Dialog에 대한 고찰
오늘도 배워갑니다
오늘은 Dialog에 관한 분석과 우리 서비스에 맞게 정의해나가면서 추가적으로 발견한 문제 및 해결 과정을 정리한 글을 써보려고 한다.
Dialog 분석을 결심한 계기
디자인 핸드 오프를 무사힌 마친 후 어느날, 개발자님이 질문을 주셨다.
"화면 다이알로그 타이틀 사이즈를 기존 사이즈와 다르게 주신 이유가 있나요?"
난 입사한지 얼마 안된 상황이었고, 우리 회사는 아직 디자인 시스템이 체계적으로 갖춰진 상태가 아니었다.
때문에 컴포넌트를 상황마다 지난 업데이트 파일에서 복사해와 구성을 조금씩 바꾸는 형태로 진행했다.
이미 잘 사용하고 있는 다이알로그 디자인을 내가 굳이 바꿀 필요도 없고 바꾼적도 없었는데, 왜 다르다고 말씀하신걸까?
1차 확인 : 디자인 파일 확인
일단 디자인한 파일을 재확인하니 역시나 텍스트 크기를 내가 직접 바꾼것은 아니었다.
2차 확인 : 앱 화면에서 직접 확인
그러나 서비스 화면에서 비슷한 종류의 다이알로그를 확인하니 개발자님 말씀처럼 텍스트 크기가 디자인과 달랐다.
결론적으로는 디자인과 화면의 싱크가 맞춰져 있지 않아서 생긴 문제였다. 복사해온 화면에서의 디자인이 수정 전의 디자인이었고, 해당 화면을 디자인하신 분이 싱크를 맞춰두지 않았던 것으로 파악된다.
그때 그때 무작위 화면에서 컴포넌트를 복사해 사용하다보니 이런 문제가 종종 생겼고, 이로인해 각 컴포넌트를 일관되게 가져갈 수 없는 문제가 발생했다.
결국 중요한 컴포넌트 위주로 디자인 시스템화를 틈틈이 진행하기로 결정하고, 다이알로그부터 시작하기로 했다.
우리 서비스의 다이알로그 파악
다른 회사의 디자인 시스템과 사례들을 찾아보기 전, 우리 서비스의 다이알로그를 모아 정리해보기로 했다.
1. 성격
알림이나 경고, 확인과 같은 컨펌창의 용도로 주로 사용한다.
(이번 정리에서 Full-screen 버전은 다루지 않도록 한다)
2. 구성 요소
• 타이틀(생략 가능)
• body 텍스트
• 버튼
3. 컬러
전체적 구성은 Grey 컬러 계열로 가져가고, 행동을 유도하는 버튼은 Primary 컬러를 사용한다.
이제 다양한 디자인시스템과 서비스 사례를 통해 우리 서비스의 다이알로그를 정리해보자.
Google Material Design
(출처 : https://m3.material.io/components/dialogs/guidelines)
다양한 디자인 시스템을 참조했으나, 역시나 가장 상세히 기술되어 있고 우리 서비스에 호환 적용하기 좋은 사례는 Google Material Design 이었다.
☑️ Headline
• 헤드라인(타이틀)은 생략가능하다.
• 간단하고 명확한 문구나 질문을 포함해야 하며, 모호한 문장은 사용하지 않는다.
예시
"위치 서비스를 허용하시겠습니까?" (⭕️) ➡️ 동작이 명확한 질문
"진행 하시겠습니까?" (❌) ➡️ 모호한 질문
☑️ Button
• 확인 동작은 화면의 끝 부분에 배치하며, 취소 동작은 확인 동작의 앞쪽에 배치한다.
• 단일 버튼은 승인을 요구하는 내용일때만 가능하다.
• 사용자에게 불분명한 선택지를 제시해서는 안된다.
• 단일 버튼을 제공할 때는 반드시 '동작 확인' 버튼이어야한다.
• 두개의 버튼을 제공할 때는 하나는 '동작 확인' 버튼이고 나머지는 반드시 '동작 해제' 버튼이어야한다.
☑️ Scrolling
• 대부분의 다이알로그는 스크롤 동작을 피해야한다.
• 스크롤이 필요하다면, 타이틀과 버튼은 각 위치에 고정시킨 후 내용만 스크롤 가능해야 한다.
이때, 다이알로그의 외부 화면과 함께 스크롤되지 않도록 한다.
문제 발견
구글 메테리얼 디자인을 정리하면서, 기존 우리 서비스의 다이알로그 문제점을 몇가지 발견했다.
1. 타이틀의 불명확한 메세지
주의 사항임을 알리기 위해 주의 문구의 컬러 강조에만 집중한채, 정작 타이틀에서 중요한 정보를 전달하고 있지 않았다.
2. 주의력 부족
삭제 컨펌 메세지와 같이 사용자의 주의력을 요하는 메세지에서 충분한 주의를 주고 있지 않았다.
또 버튼에 Primary 컬러를 사용함으로써 자연스럽게 '확인'버튼으로 행동을 유도하고 있었다.
• 앱 내의 컨텐츠 삭제는 서비스 입장에서도 긍정적인 행동은 아니다
• 주의력이 약해 사용자가 무의식적으로 확인을 누를 가능성이 커져, 삭제를 원치 않았음에도 삭제를 하고마는 실수를 유발할 수 있다.
다양한 서비스에서 주의를 요하는 상황의 다이알로그 창을 찾아보았다.
대다수가 빨간색의 경고 컬러를 통해 사용자에게 주의를 주고 있었고, 커리어리에 경우 더 명확한 메세지 전달을 위해 아이콘을 함께 배치해두었다.
다양한 서비스들의 사례이제 우리 서비스에 적용해보자
구성요소나 형태는 현재의 다이알로그 디자인에서 획일화 되어있지 않다는 것 외에는 문제가 없었기에,
스펙을 상세하게 정리해놓고 문서화만 해놓는 것으로 최종 정리했다.
다만 분석 과정에서 위에서 추가로 발견한 2가지 문제를 개선하는 작업을 하기로 했다.
1. 모호한 타이틀 문구 개선
• 구체적 문구 사용 : 사용자가 하는 행동에 초점을 맞춰서 다이알로그 창에서 이루어지는 구체적 행동을 타이틀에서 충분히 설명한다.
• 버튼 컬러 변경 : '주의' 단어를 빼는 대신 버튼에 경고성 레드 컬러를 넣어 주의해야할 상황임을 암시적으로 나타낸다.
2. 버튼에 레드 컬러를 사용해 주의력 상승
• 일반적인 상황에서는 Primary컬러를 사용하되, 주의와 같이 사용자의 실수가 치명적인 상황에서는 주의력 상승을 위해 레드 컬러를 사용한다.
• 우리 서비스에는 주로 버튼에 아이콘을 사용하지 않아서, 따로 아이콘을 추가하지는 않는다.
• 버튼에 '확인'이라는 모호한 문구 대신 해당 버튼을 통해 일어나는 구체적 행동을 명시한다.
글을 마치며
사실 Dialog의 중요성을 알면서도 너무 익숙한 컴포넌트라 섬세하게 주의를 기울이지는 못했다.
처음엔 시스템적인 문제로 접근했지만, 이를 위해 Dialog에 대해 공부하고 분석하면서 UX적인 측면에서도 문제점이 있다는 것을 발견할 수 있었다. 전반적으로 정리를 결심하지 않았다면 분명 깨닫지 못했을 것이다.
혹시 여태껏 Dialog를 관성처럼 써왔다면, 담당하는 서비스의 모든 Dialog를 한 곳에 모아놓고 살펴보는 것을 추천한다. 여태 발견하지 못한 섬세한 문제점들을 찾아낼 수 있을 것이다.
