모달이란?
모달은 사용자의 이목을 끌기 위해 사용하는 대화형 UI 요소 / 화면 전환 기법이다.
사용자가 모달 내의 정보를 주시하거나, 요구되는 작업을 완료하도록 강제하는 역할을 수행한다.
- 모달 창은 별도의 페이지가 아니라, 사용자가 기존에 하고 있던 작업창에서 오버레이 형태로 나타난다.
모달과 팝업의 차이점
모달과 팝업은 기본적으로 같은 기능을 지니고 있다.
(부모 화면 위에 표현되고, 사용자가 작업을 계속하기 전에 모달/팝업과 상호작용하도록 함)
1. 팝업
- 시작과 동시에 공지, 프로모션, 주의사항, 안내문 등을 띄우는 용도로 사용됨
- 현재 의도하는 목적과 상관없이 뜨는 창
2. 모달
- 사용자에게 요구되는 사항에 맞게 띄움
- 다음 스텝으로 넘어가기 위해 필요한 창
ex) 로그인, 동의하기 등
모달뷰 종류
1. Fullscreen
- 전체 화면을 덮는 방식
- 사용자의 이목을 최대로 이끌어 내야 하는 경우 Fullscreen을 사용한다.
2. Sheet
- 새로운 자식 창을 띄우고, 뒷 부분은 background blur로 날려버리는 방식
- 기존 화면의 맥락을 잃지 않고 과업을 진행해야하는 경우 Sheet를 사용한다.
기본적으로 화면의 스크림 영역(background blur 처리된 곳)을 터치하여 기존 페이지로 돌아갈 수 있다. 하지만 blur 처리되지 않고, 기존 콘텐츠가 그대로 남아있을시 이 액션은 수행할 수 없다. 대신 기존 화면을 스크롤하고 터치하여 상세 페이지를 확인할 수 있는데, 이를 Non-modal 방식이라고 한다.
모달에 포함시켜야하는 요소
- 헤더 텍스트
- 본문 텍스트
- 그래픽
- CTA 버튼
-Call To Action Button
목표를 달성하기 위해 사용자의 특정 행동을 유도하는 것을 의미한다. - X 버튼
- 배경
Product Design