✏️ 실무 초기에 ‘팝업’이라는 단어만 알았지 팝업 종류에 대해 잘 알지 못하여 디자이너의 요청 사항에 당황했던 적이 있었다. 더 이상 그날의 실수를 하지 않기 위하여, 팝업의 종류와 쓰임에 대해 정리해 보았다.
‘의미’로 나누면 팝업 vs 모달
’형태’로 나누면 브라우저(=윈도우), 레이어, 토스트
💡 실무에서는 팝업창 모달창 명칭을 정확하게 구분 하지 않는다. 따라서 개발자는 기획자 or 디자이너에게 띄우는 형태를 어떻게 할 것인가를 물어봐야한다. 브라우저(=윈도우 창) 로 띄울 것 인지, 레이어 형태로 띄울 것인지
팝업 Popup
- 메인 서비스와 관계 없이 뜨는 독립적인 창
- 사용자가 마음대로 닫아도 서비스 진행에 차질이 없는 창
- ex) 공지사항, 보통 사이트 처음 들어갔을 때 뜨는 창
형태에 따른 종류
브라우저(=윈도우) 팝업
- 기존 페이지 안에서 새 창으로 열리는 팝업
출처 - https://brunch.co.kr/@bcc5736f7b26444/1
레이어 팝업
- 기존 페이지 안에서 레이어 형태로 화면 위에 쌓아져 있는 형태의 팝업
- 보통의 팝업이라 하면 레이어 팝업을 지칭 한다.
- 모달의 의미를 가지고 있지만 형태가 레이어 팝업인 경우도 레이어 팝업이라고 말하기도 한다.
출처 : https://itcenter.yju.ac.kr/xe_board_xe/1334
토스트 팝업
- 갑자기 나타났다 정보를 보여주고 사라지는 팝업
- 나타나는 모양새가 토스트 나오는 모습과 비슷하여 토스트 팝업이라 한다.
- 주로 모바일 앱에서 사용된다.
❗기획자 or 디자이너 에게 요청 해야 할 사항
- trigger (언제 노출 될 것인가)
- 시간(노출 되는 시간, 얼마 동안 있다 사라질 것인가)
출처 - https://care.buzzvil.com/ko/support/solutions/folders/66000312330
➕스낵바
- 내용이 적고, 어떠한 액션이 필요 한 경우 사용하는 팝업
- 버튼 클릭 했을 경우 해당 링크로 이동한다.
- 주로 모바일 앱에서 사용된다.
❗기획자 or 디자이너 에게 요청 해야 할 사항
- trigger (언제 노출 될 것인가)
- 시간(노출 되는 시간, 얼마 동안 있다 사라질 것인가)
- 연결 링크
출처 - https://developer.android.com/training/snackbar/action?hl=ko
모달 Modal
- 서비스와 관련해 다음 단계로 나아가기 위해 필요한 창
- 선택, 입력하는 내용이 존재 함.
출처 - https://brunch.co.kr/@bcc5736f7b26444/1
참고 문헌
한 걸음 한 걸음 계속 걷는 자가 일류다