모달 (modal) 디자인 원칙

jbee·2024년 2월 5일

1일 1 스터디

목록 보기

5/40

UX writing 신경쓰기
- YES or NO ( X )
- 삭제하겠다 or 취소하겠다 ( O )
- 사용자가 상황을 충분히 인지할 수 있도록 문장을 골라 적어야 함
- 대강 훑고 넘겨버릴 수 있다는 특성을 고려한 원칙
비주얼 관련한 유념사항
- 모달 안의 텍스트는 최대 2문장으로 한정할 것
- 닫기 버튼은 잘 보일 수 있도록 배치함
- 이상적인 모달 크기 = 전체에서 1/4 이상을 가리지 않는 정도
- 배경에 놓이는 메인 화면과 확실하게 구별되도록 하기
웹의 경우, 단축키를 지원하라
- 내부 진입 및 닫기에 한해 제어 단축키를 연결해야 함
- ESC : 이전 페이지 복귀
- 1 ( focus ) : 모달 내부 컨텐츠로의 이동
여러 모달을 겹쳐 쓰지 않기
- 복잡하다는 인상
- 전혀 효과적이지 못함
대안이 있다면 가시화를 위해 사용말 것
- 맥락 안에서 보여줬을 때, 보는 이의 재빠른 이해를 도모함
- 오류・로딩・성공이 위 케이스에 부합함
- 로딩의 경우, 프로그레스 바의 활용 권장
남용 절대 금물
- 메인 화면 위에서 어떠한 동작도 하지 못하게끔 차단한다는 특이점
- 이것이 행동을 강제받는다는 느낌을 줄 수 있다는 점에서 유의가 필요함
- < 사용해도 좋을 용처 예시 >
  - ( 복구 불가 등 위험이 따르는 ) 사용자의 행동 되묻기
  - 대단히 긴급한 메시지를 전달할 때

[ 함께 보기 좋은 글 ]

jbee

주니어 UXer ⏐ think more, design less