<자주 쓰지만 '잘' 쓰는 법은 잘 모르는 그 컴포넌트. 제대로 된 대화 상자(dialog) 만들기> ✒️ '대충 만들어도 되는' 컴포넌트, 문구는 단 하나도 없습니다. 그러나 실제로 앱을 쓰다 보면 '어라? 왜 이렇게 만들었지?' 라는 생각이 드는 컴포넌트를 마주할 때가 많습니다. 특히 대화 상자가 그렇습니다. 디자이너나 기획자가 부족한가? 싶다가도 대형 IT 플랫폼의 제품에서도 자주 나타나는 현상인 걸 보면, 대화상자에 대한 가이드를 제대로 구축하지 않은 조직이 많은 것 같습니다. 개인적으로 대화상자(dialog) 가이드라인의 정석이라 생각하는 Google의 머터리얼 가이드에서 포인트만 몇 개 뽑아서 공유해봅니다. 📌 꼭 필요할때만 사용하기. 화상자는 사용자에게 중요한 정보를 알리거나 행동을 요구하기 위해서 사용합니다. 하지만 불필요한 대화상자는 사용 흐름을 방해할 수 있기 때문에 꼭 필요할 경우에 제공하는 것이 좋습니다. 📌 타이틀은 대화상제의 목적을 명확하게 소통할 수 있게 작성한다. “확실합니까?” , “경고” 와 같은 모호하거나 전체 내용을 유추할 수 없는 타이틀은 사용하지 않는 것이 좋습니다. - 안내 ❌ - 인증번호 전송 완료⭕ 📌 사용자는 버튼 선택시 결과를 유추할 수 있어야 한다. 모호한 버튼명은 사용자가 선택의 결과를 알기 어렵게 만듭니다. (본문) 이전 화면으로 돌아갑니다. - (버튼) 예 or 아니오 ❌ - (버튼) 돌아가기 or 계속 진행하기 ⭕ 📌 필요에 따라 '적절한' 수의 버튼을 사용한다. - 1개 : 단순 정보 알림으로 사용자가 '확인'만 하면 되는 경우 e.g) 인증번호 전송 알림 - 2개 : 사용자의 승인을 요구하는 경우 e.g) 알림신청 승인, 거절 - 3개 : "더보기" 와 같이 다른 버튼을 추가하는 경우에 사용. 그러나 대화상자의 테스크가 끝나지 않고 사용 흐름이 바뀌므로 되도록 사용을 지양합시다. (이 정도면 화면을 따로 그리는 것이 좋습니다.)