✏️ 실무 초기에 ‘팝업’이라는 단어만 알았지 팝업 종류에 대해 잘 알지 못하여 디자이너의 요청 사항에 당황했던 적이 있었다. 더 이상 그날의 실수를 하지 않기 위하여, 팝업의 종류와 쓰임에 대해 정리해 보았다.

‘의미’로 나누면 팝업 vs 모달
’형태’로 나누면 브라우저(=윈도우), 레이어, 토스트

💡 실무에서는 팝업창 모달창 명칭을 정확하게 구분 하지 않는다. 따라서 개발자는 기획자 or 디자이너에게 띄우는 형태를 어떻게 할 것인가를 물어봐야한다. 브라우저(=윈도우 창) 로 띄울 것 인지, 레이어 형태로 띄울 것인지

팝업 Popup

  • 메인 서비스와 관계 없이 뜨는 독립적인 창
  • 사용자가 마음대로 닫아도 서비스 진행에 차질이 없는 창
  • ex) 공지사항, 보통 사이트 처음 들어갔을 때 뜨는 창

형태에 따른 종류

브라우저(=윈도우) 팝업

레이어 팝업

  • 기존 페이지 안에서 레이어 형태로 화면 위에 쌓아져 있는 형태의 팝업
  • 보통의 팝업이라 하면 레이어 팝업을 지칭 한다.
  • 모달의 의미를 가지고 있지만 형태가 레이어 팝업인 경우도 레이어 팝업이라고 말하기도 한다.


출처 : 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

참고 문헌

profile
한 걸음 한 걸음 계속 걷는 자가 일류다

0개의 댓글