모달 vs 팝업

🏷️ Vivian's curating

기획자와 소통하다보니 모달과 팝업을 모두 혼용해서 사용하고 있는 것을 알게 되어 한 번 확실히 정리하고 넘어갈 필요가 있다고 생각했다. 그런데 나조차도 모달과 팝업의 차이를 제대로 설명하기가 어려웠다. 신입 때 내용 정리를 했었는데 시간이 지나니 기억이 희미해진 것이다..🥲

오히려 잘됐다, 이번에 다시 제대로 정리해서 완벽하게 습득해야겠다 생각하고 관련된 아티클을 여러개 찾아서 읽어보며 정리하였다.

모바일은 웹 브라우저 만큼 용도의 차이가 확연하지 않은 것 같지만 팝업과 바텀시트(모달)로 정리하여 읽어보니 조금은 감이 잡혔다. 또한 스낵바와 토스트메시지에 대한 차이도 이번에 확실히 알았다. 기업마다 용어가 달라서 더 헷갈리는 부분이 있어 용어가 통일되면 참 좋겠다고 생각했지만 그런 일은 일어나지 않겠지...(ㅋㅋㅋ)

아마도 나처럼 아직도 모달과 팝업이 헷갈리는 디자이너가 있다면 이 글이 많이 도움이 될 것이라 생각한다 😎

+ 혹시 이보다 더 정확하게 정리된 내용이 있다면 공유해 주시고, 다른 의견이 있다면 댓글에 남겨주세요 :)

✍️ 요약

모달 UI의 의미와 선택 방법

1. 사용자의 액션이 필요한가?

   N → 스낵바 (토스트메시지)

   Y → 2. 매우 중요한 정보인가?

   N → 모달 (바텀시트)

   Y → 팝업

의미 정의

• 팝업 (Popup)

  기존의 열려 있는 브라우저 페이지 위에 또 다른 브라우저 페이지를 띄우는 방식.

  원래 브라우저와 독립적인 관계로 브라우저의 옵션을 통해 열리지 않도록 강제할 수 있음.

  
  

  주로 2가지 상황에서 사용.

  1) 앱 또는 기기 상태와 관련된 중요한 정보를 전달할 때

  ex) 이용자에게 작업에 대한 내용을 확인시킬 때, 에러가 발생해 작업을 수행하지 않고

  원래 단계로 돌아간다는 것을 알릴 때

  2) 이용자의 결정이 필요할 때

  ex) 이용자가 정보를 입력 또는 선택해야 하거나 승인을 해야할 때

  
  

  팝업의 구성 요소는 Scrim(Dimmed), Contents, Button.

  
  

  사용 시 주의 사항으로는

  1) 사용 최소화 - 의도적으로 이용자를 방해하여 피로감을 줄 수 있음

  2) 간단한 태스크 제공 - 현재 화면을 벗어나지 않고 액션을 취해야하므로 되도록 간단한 작업

  3) 타이틀은 상황을 간결하게 설명 - 서브 문구와 내용이 겹치면 타이틀 삭제 가능

  4) 버튼 문구 명확하게 작성 - 어떤 액션인지 바로 인지할 수 있어야 함

• 모달 (Modal)

  기존에 열려 있는 브라우저 위에 새로운 창이 아닌 레이어를 까는 방식.

  원래 브라우저와 종속적인 관계, 부모 - 자식의 형태를 가지고 있으며 브라우저 옵션과 관계없이 띄울 수 있음.

  
  

  모달(바텀시트)는 크게 2가지 상황에서 사용.

  1) 기존 화면과 관련 있는 콘텐츠를 제공할 때 - 기존 컨텍스트에서 벗어나지 않고 관련된 작업을 할 수 있어 더 빠르게 프로세스가 진행되는 느낌 전달 가능

  2) 다양한 메뉴를 제공할 때 - 화면 이동이 발생하지 않아 신속하고 간편한 느낌 받을 수 있음

  
  

  구성 요소는 Scrim(Dimmed), Handerbar(Indicator), Header, Contents, Button.

  Scrim 여부에 따라 Modal과 Non-Modal로 구분.

  Scrim 있는 경우 - Modal 타입 : 바텀 시트의 태스크를 완료하거나 취소하기 전까지 기존

  화면을 확인하거나 다른 액션을 할 수 없음

  Scrim 없는 경우 - Non-Modal 타입 : 기존 화면과 상호작용 가능. 태스크 완료되지 않아도

  기존 화면 확인 가능

  Handlerbar는 바텀 시트를 확장할 수 있음을 알려줌. Handlerbar가 있는 경우에는

  제스처로 확장과 Pull-to-dismiss(당겨서 닫기) 필수적. 없는 경우에는 제스처로 확장이

  불가능하며 Pull-to-dismiss는 상황에 따라 취사선택 가능.

  Header는 네비게이션 바의 역할을 하며, 상황에 따라 Search bar나 Tabs와 같은 컴포넌트

  포함 가능.

  
  

  주의 사항은 이용자가 기존 화면을 함께 사용할 때는 Non-Modal 타입을 선택해야 한다는 것.

• 스낵바 (Snackbar)

  스낵바는 사용자가 수행한 액션에 대한 피드백을 줄 때 사용. 이 때 별도의 액션 제공 가능.

  토스트메시지와 비슷한 형태이지만 토스트는 단순 피드백 외의 액션 제공이 불가능하다는 차이점이 있음.

  
  

  구성 요소는 Text, Action Button, Image, Icon.

  이미지 위치에는 아이콘, 프로필, 이미지 등을 넣을 수 있음. 아이콘의 경우 스낵바의 전 영역이

  링크라는 것을 이용자에게 우회적으로 알려주는 역할을 함.

  
  

  사용 시 주의 사항

  1) 스낵바의 위치를 고려해야 함. 중요도가 높은 바텀 네비게이션, 플로팅 버튼과 겹쳐지지

  않도록 배치.

  2) 간결하게 작성. 제한된 시간 안에 빠르게 읽을 수 있도록 최대한 짧은 메시지로 구성.

  **전달하려는 콘텐츠가 중요한 내용이라면 스낵바 보다는 팝업으로 안내

#UX디자인 #UI디자인 #팝업 #모달 #논모달 #바텀시트 #토스트메시지 #스낵바 #용어