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

Material Design

Material Design

Material Design

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2021년 10월 7일 오후 2:10

댓글 0