스터디 첫 과제로 ui 컴포넌트들을 바닐라 JS로 구현해보기로 했고 첫 번째는 팝업(모달)이다. 원래 생각한 건 모달이었는데 참고한 사이트에서는 팝업이라는 이름으로 소개하고 있는 것 같길래 팝업이라고 했다. 만들 컴포넌트 정할 때 참고한 사이트는 [lithium design system](http://61.107.76.13/Li/04_26.html)
일단 모달과 팝업의 차이를 어렴풋하게 한 페이지 내에서 기존 페이지 내용 위에 요소를 띄운 것 / 새 창으로 띄운 것 정도로 이해하고 있었는데, 좀 더 정확한 차이를 알고 싶어서 조사해봤다. Lithium design system 설명 사이트도 잘 안내가 되어 있어 해당 사이트와, UX 컨설팅 회사로 유명하다고 하는 닐슨 노먼 그룹의 기사 내용이 상세하게 기술되어 있어 하단의 사이트를 주로 참고했다.
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
Popups: 10 Problematic Trends and Alternatives
1. 모달/팝업이란
-
닐슨 노먼 그룹의 기사에서는 페이지 콘텐츠 위에 나타나는 창 또는 대화 상자 자체를 팝업이라고 말하며, 팝업의 유형 중 모달을 포함한다고 소개했다.
-
분류 기준은 2가지로, 위 사진처럼 4종류로 나뉜다.
- 사용자가 페이지(배경)와 상호작용 할 수 있는가
- Y(non-modal) : 팝업과 상호작용하는동안 페이지의 다른 컨텐츠와 상호작용 가능
- N(modal) : 팝업과 상호작용하는동안 페이지의 다른 컨텐츠와 상호작용 불가능
- 배경이 어두워지는가
- Y(lightbox) : 배경(기존 페이지의 다른 컨텐츠 영역)이 어두워지는 경우
- N : 배경이 어두워지지 않는 경우
하지만 구글링을 했을 때나 여태 학원에서 팝업이나 모달이라는 단어를 사용했을 때의 느낌과는 조금 다르게 느껴졌다. 정확하고 신빙성있는 설명이 어느 것인지 모르겠어서 구글링을 해 본 결과 공통적으로 말하는 모달과 팝업의 차이점은 아래와 같았다.
| 모달 | 팝업 | |
|---|---|---|
| 새 창으로 띄우기 | X | O |
| 요소 활성화 시 배경 컨텐츠와 상호작용 가능 여부 | X | O |
| 배경이 어두워지는가 | O | X |
실제로는 이와 같은 차이점들을 기준으로 모달/팝업을 이야기하는 경우가 많은 것 같아
현재 페이지와 별개로 작동하는 창으로 띄운 것을 팝업,
현재 페이지 안에 자식요소로 기존 컨텐츠 위에 띄우며 요소가 닫혀야 기존 컨텐츠와 상호작용이 가능한 것을 모달이라고 칭하도록 하겠다.
결과적으로 내가 만들고 싶었던 것은 모달쪽에 가까우므로 모달을 기준으로 조사해보고 컴포넌트로(?) 만들어보려고 한다.
2. 모달/팝업은 언제 사용해야 하는가?
- 페이지가 로드되기 전(페이지에 접근하자마자) 사용하지 말기.
- 사용자에게 먼저 정보를 제공한 후에 팝업을 표시하기
1, 2번은 같은 맥락인데 닐슨노먼 그룹에서는 사용자가 아무 정보도 얻지 못한 채 팝업을 띄우는 것은 사용자의 작업을 중단시켜 방해가 되므로 어느정도 정보를 제공한 후 팝업을 띄우는 것이 더 효과적이라고 말하고 있다. - 로그인한 직후 팝업 사용하지 말기
위와 비슷한 내용이다. 보통 목적을 가지고 로그인 후에 해야 할 일이 있는 경우 로그인을 하게 되는데, 할 일을 시작하기도 전에 팝업을 띄웠을 때 방해받는다고 느끼므로 로그인 후 시간이 어느정도 지난 후에 팝업을 사용하거나, 방해가 덜 되는 툴팁같은 방법을 사용하라고 제안하고 있다. - 이메일 주소 요청은 비모달로 표시하라
3번까지의 내용과 동일하게 사용자가 무언가 제공받았다고 느껴지기도 전에 이메일을 요구하지 말고, 요구한다면 방해가 덜 되는 비모달로 표시하기를 권한다. - 피드백은 사용자가 충분한 경험을 한 후에 요청하라
사람들은 사이트에서 별점이나 피드백을 줄 만큼 충분한 경험을 하지 못한 상태에서 피드백을 요구하는 모달을 만났을 때 피로감을 느끼므로 접속 후 충분한 시간이 지난 후 요구할 것을 제안하고 있다. - 팝업은 한번에 하나, 중요한 내용은 되도록 표시하지 말 것
팝업 사용 시 이목을 끌 수 있기는 하나 사람들은 대개 팝업을 읽지 않고 닫는 경향이 있으므로 중요한 정보는 되도록 팝업이 아닌 페이지 내에 눈에 띄는 곳에 배치하는 것을 추천하고 있다. 어차피 읽지 않고 닫는다면 귀찮기만 할 테니 한번에 팝업 여러개를 띄우지도 말 것.
3. 모달/팝업으로 어떤 내용을 전달하는 것이 좋은가?
- 모달을 사용할 경우 다른 작업을 할 수 없고 크게 주의를 끌게 되므로 남용하여 사용자 경험을 방해하지 않도록 주의. 중요한 경고메시지의 경우에는 사용하기 적합함
- 사용자가 현재 진행중인 프로세스에서 중요한 정보 입력에 사용
- 작업 과정을 간소화하는데 도움이 되는 정보를 요청(해당하지 않는 경우에는 건너뛰어 불필요한 과정을 생략하게 하는 등)
4. 모달/팝업의 디자인은 어떻게 할까?
팀 프로젝트를 하면서도 느꼈었지만 폰트의 크기나 요소들의 간격 하나하나도 설득력있는 이유가 있어야 한다는 사실이 굉장히 어렵게 느껴졌었는데 Lithium designt system의 GUI style 탭에 권장 태그, 간격 등의 가이드가 세세히 적혀있어 이 가이드를 참고해 만들어보기로 했다.
- 기본을 라이트박스 모달 형식으로 만들기로 했는데, 오버레이 색상 가이드는 없어 예시코드에 사용된 #101314를 배경색으로, 투명도는 0.5로 사용했다.
참고자료
https://brunch.co.kr/@aksouiypop/7
https://brunch.co.kr/@tigrisdesign/3
https://www.nngroup.com/articles/modal-nonmodal-dialog/
https://www.nngroup.com/articles/popups/
