Modal / Alert Dialog

Jul 2

GUIDE

Modal은 특정 영역의 위치에 원하는 사이즈로 별도의 레이어를 만들어서 사용자에게 중요한 메시지를 전달합니다. 다음 진행으로 넘어가기 전에 필요에 의해 사용되는 창이며, 주로 프로모션 진행, 서비스 공지, 주의사항, 안내문 등을 전달 또는 강조할 때 사용합니다.
Modal은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 추가해 덮는 것을 말하며,  대화상자(dialog)가 실행될 때 제어권을 독점하게 되면서 대화 상자가 종료되기 전까지는 기존 화면을 제어할 수 없습니다. 모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라지며, 브라우저의 새 창 제어 옵션에는 전혀 영향을 받지 않습니다.

사용자 주의를 집중하여 해당 내용이 처리되도록 합니다.
정보를 전달하고 과업을 완수하는데 전념해야 합니다.
관련 작업 또는 상황 별 정보와 함께 사용자 작업 또는 작업에 대한 응답으로 나타나야 합니다.
사용을 최소화 합니다.
모달을 종료할 수 있는 명확하고 안전한 방법을 제공합니다.
단순하고, 짧게 안내합니다.
필요한 경우 과업을 식별하는 제목을 표시합니다.
이상적으로 행동 가능한 정보를 제공하기 위한 경고를 준비합니다.
[google material design guide, apple human interface guidelines 참고]

ANATOMY

모달의 배경 영역입니다. contents, device 환경에 따라 사이즈가 달라질 수 있습니다.
모달의 목적과 용도에 맞게 이미지 또는 기타 컴포넌트를 삽입하여 자유로운 컨텐츠 구성이 가능합니다.
모달의 목적에 부합하는 메시지를 명확하고 간결하게 전달합니다. 좌측 정렬을 기본으로 작성합니다.
간결하게 작성된 title을 보충하기 위한 본문 영역입니다. 좌측 정렬을 기본으로 작성되며, 내용이 길어질 경우 container의 높이가 달라집니다.
부가 요소에 해당하는 버튼입니다. ‘다시보지 않기' 또는 ‘닫기'와 같이 모달로 인한 불편함을 덜어낼 수 있는 요소로 사용됩니다.
주요 버튼이 배치되는 영역입니다. 모달을 dismiss할 수 있는 버튼이 꼭 포함되어야 하지만, 관련 버튼을 넣을 옵션이 부족할 경우 [secondary 또는 tertiary button]에 이관하고 성질이 다른 버튼으로 구성합니다. dismiss와 함께 모달의 과업이 완료(모달 종료)되는 경우 하나의 기본 버튼을 사용할 수 있습니다.(comfirm 등) 버튼이 단순 dismiss 기능과 별도로 사용자의 승인, 혹은 특정 액션을 포함하는 경우 기본 버튼과 다른 action 버튼을 제공합니다.
primary 버튼과 대비되는 기능을 하는 버튼입니다.
modal 하위로 깔리는 배경 영역입니다. dimmed effect 배경을 사용하여 모달이 강조될 수 있습니다. 이 영역을 click(or tap) 했을 시 기본 동작은 close 이지만, 사용자의 명확한 피드백이 필요한 경우 적용되지 않을 수 있습니다. 디바이스 마다 처리 방식이 상이할 경우 디자인 QA가 요구됩니다.

SIZE

modal의 기본 사이즈는 디바이스에 따라 다르지만, 이는 컨텐츠 구성에 따라 변동될 수 있습니다. 

mobile : 좌우 마진 24px을 제외하고 width 100%를 차지하지만, 최대 가로폭은 400px로 제한됩니다. height는 컨텐츠의 양에 따라 조절될 수 있습니다. 
pc : width는 최대 480px이지만 이는 컨텐츠 구성에 따라 달라질 수 있습니다. 화면의 중앙에 위치하며, height는 컨텐츠의 양에 따라 조절될 수 있습니다.

mobile

width : 312px
radius : 28

mobile

width : 400px
radius : 32

TYPES

modal의 기본 종류는 버튼의 개수,버튼의 형태에 따라 다라집니다.

solid btn : 과업에 대한 안내가 중요하여 강조될 필요가 있는 경우 사용합니다. (회원가입, 결제, 문서 파기 확인 등 시스템에 변화가 생길 수 있는 주제)
text btn : 가벼운 정도의 사용자 피드백이 필요한 경우 사용합니다. (기능 전환, 페이지 이동 등 사용자에게 단순히 알려주기 위한 목적인 경우)