주니어 기획자를 위한,
모달과 팝업 가이드
서비스기획
1. 왜 글을 발했했는가
모달과 팝업을 아직도 헷갈리고 있었다.
기획자의 시작 단계인 나에게 그럴 내가 생각하는 기능이 모달인지 팝업인지 레이어 팝업일까?
의문만 가득한 체 정확한 정의를 내리지 못했다.
그럴 때마다 브런치, 구글링을 통해 '모달과 팝업의 차이', '모달이란?'을 검색하고 있었고
나 스스로가 정의되지 않다 보니 시간을 낭비하며 두리 뭉실한 기획서를 써 내려가고 있는 나를 발견했다. 따라서 해당 글은 나의 첫 브런치 글의 주제가 되었으며 나를 위한 글을 준비했다.
어떤 주니어도 어떤 기획자 지망생도 해당 글을 통해 확실히 구분할 수 있었으면 좋겠다.
모달, 팝업의 특징을 인지하고 알맞게 설계하는 기획자가 되어보자!
시간이 없는 바쁜 주니어들을 위해
이렇게 두줄을 통해 간단하게 이해할 수 있을 것 같다.
2. 모달과 논모달, 팝업 한 줄 요약
팝업
: 프로모션, 이벤트, 공지사항을 전달할 때 사용한다. ( '오늘 하루 이창을 열지 않음' 문구 포함 )
모달
: 사용자의 액션이 필수로 요구되며, 중요한 정보를 전달할 때 사용한다.
: 사용자가 백그라운드 콘텐츠와 인터렉션 할 수 없다.
논 모달
: 사용자가 백그라운드 콘텐츠와 인터렉션 할 수 있다.
아직 모달과 팝업을 제대로 이해하지 못했을거라 생각한다.
그렇다면 조금 더 구체적인 특징과 어떤 기획 시, 사용 할 수 있을지 요약해 보았다.
또한 글로 이해는 어렵다는 것을 잘 알기에, 최대한 많은 캡쳐본을 넣어 쉬운 이해를 돕고자 했다.
3. 팝업을 활용한 기획
- 언제 사용하는 가 : 프로모션, 이벤트, 공지사항 등 특정페이지 진입 시, 바로 노출되는 상황
- 기획 시 주의사항 :
혜택이 분명하게 눈에 띄도록 기획
사용자의 액션이 필수로 요구
오늘하루 이 창을 열지 않음
팝업 표시될 때는 사용자의 결정 전까지, 서비스의 모든 기능이 비활성화됨
사용자에게 피로감을 주기에, 사용을 최소화
팝업 실행 전, 사용자가 사이트의 가치를 느낄 수 있게 해라
→ 페이지가 로딩되기 전에 뜨면 고객이 무시하거나 빠르게 닫는 방법을 즉시 찾는다.
4. 모달을 활용한 기획
- 언제 사용하는 가 : 특정 버튼이나, 링크를 클릭했을 때 페이지 내 추가적인 정보를 보여주고자 하는 상황
- 기획 시 주의사항 :
사용자의 시선을 사로잡는 화면 전환 기법
연결된 정보를 보여줄 때 사용
사용자가 당장 모달을 처리하게 하고 싶을 때
진행하는 작업에서 중요한 정보를 입력해야만 할 때 사용
종료하지 않으면, 기존이나 다음화면을 이용할 수 없음
- 모달의 종류
모달다이어로그 : 시스템과 사용자와의 대화로써 사용자에게 행동이나 정보를 요구함
시트(바텀시트, 사이드시트) : 기존화면과 관련 있는 콘텐츠 제공, 화면 전체를 가리지 않아 비교적 적은 피로감을 줌
5. 논모달을 활용한 기획
기존 페이지 컨트롤 가능
EX) G-MAIL
어둡게 딤처리(회색레이더 dim) 된 화면과, 그렇지 않은 화면 둘 다 가능
- 논모달 종류
1. 스낵바(유저가 직접 닫을 수 있음),
2. 토스트 바 (자동으로 없어짐)
6. 그렇다면 요즘 추세는..?
*브라우저 자체 및 사용자가 팝업창 차단기능 지원 사용 → 모달을 사용하는 추세
*팝업은 트레킹 증가 및 메모리 차지함
요즘 추세는 다들 트레킹 증가나 메모리 차지의 단점이 있는 팝업보다는 모달을 사용한다고들 하지만
기획 방향이나 기획자의 의도에 따라 적절하게 활용하면 될 것 같다.
이 글을 정리하고 더 이상 '팝업과 모달의 차이' 등 을 검색하며 시간을 허비하지 않았으면 좋겠다.
참고
https://brunch.co.kr/@tigrisdesign/3
https://brunch.co.kr/@3756ea803def4ac/28
https://yozm.wishket.com/magazine/detail/1272/
https://brunch.co.kr/@potatohands/275
