UIUX 디자인 컴포넌트 : 스낵바, 팝업, 바텀시트 모달 알림 종류별 특성 및 상황별 선택 가이드

UI화면을 구성하다 보면 사용자 행동에 대한 알림을 줘야 하는 케이스들이 발생합니다. 이럴 때 사용하는 UI가 바로 스낵바, 팝업, 바텀시트 등의 모달 UI입니다. 정해진 답이 있는 것은 아니지만, 현업에서 실제 사용하다 보면 상황별로 더 사용하면 좋은 모달 UI가 있습니다. 오늘 포스팅에서는 각 모달 UI를 사용할 때 판단기준과 사용 시 주의할 점에 대해서 알아보겠습니다.

---

모달 UI란?

출처 : 부트스트랩 홈페이지

모달(Modal) UI는 사용자의 행동에 대한 알림을 주는 UI로 사용자의 이목을 끌기 위해서 사용하는 화면 기법 중 하나입니다. 즉, 사용자의 이목을 끌어 해당 UI를 보게 하고 사용자의 액션을 유도하는 UI라고 할 수 있습니다. 주로 Task 수행 중에 사용자의 결정에 의해서 삭제, 동의, 결제 등이 이루어질 때 많이 사용됩니다.

---

모달 UI의 종류와 선택 기준

 
모달 UI의 종류는 위에서 살펴본 바와 같이 스낵바, 팝업, 바텀시트로 구성되어 있습니다. 제가 실무를 진행하면서 상황별로 적절한 모달 UI를 선정할 때 고려하는 판단기준은 크게 2가지로, 바로 사용자의 액션과 정보의 중요도입니다. 사용자의 다음 액션을 유도하는 가? 그리고 정보의 중요도가 단순히 알림 정도인지 아니면 사용자가 놓치면 안 될 중요한 정보인지의 여부에 따라서 사용할 모달 UI를 선정합니다. 제가 생각하는 판단 기준에 맞춘 의사결정 과정을 위의 이미지로 표현하였습니다. 아래에서는 각 모달 UI 종류별로 특징과 구성요소, 주의사항을 살펴보겠습니다.

---

1. 팝업(Popup)

팝업은 대표적으로 플로우 상에서 중요한 정보를 전달하거나 사용자의 액션이 필요할 때 사용합니다. 예를 들어 결제 취소 과정에서 '정말로 취소하시겠습니까?'라는 문구를 안내하는게 대표적입니다. 결제 취소는 실수로 진행 시 원복이 어렵기 때문에 수행하는 텍스트의 중요도를 사용자에게 한 번 더 강조하고, 사용자의 액션을 유도해 현재 사용자가 진행하는 것이 무엇인지 한 번 더 인식시키는 역할을 합니다.

구성요소

팝업은 주로 헤더, 콘텐츠, 푸터로 구성되어 있습니다. 다만 서비스 특성과 필요에 따라서 헤더와 푸터는 제외하고 사용할 수 있습니다. 또 추가로 과업의 몰입도에 따라서 팝업 뒤쪽으로 Shadow를 불투명하게 깔아서 사용자의 집중도를 더 높일 수도 있습니다.

주의사항

팝업의 잦은 사용은 사용자에게 피로감을 주기 때문에 태스크 플로우 상에서 중요도에 따라 1번 또는 2번 정도로 제안해서 사용하는 것이 좋습니다. 또한 팝업은 현재 화면에서 벗어나지 않고 간단한 정보성 내용을 전달하는 용도이기 때문에 팝업이 과하게 복잡해지지 않게 되도록 최소화된 정보를 전달하도록 구성하는 것이 좋습니다.

---

2. 바텀시트 (Bottom sheet)

바텀시트는 주로 기존 화면과 관련 있는 콘텐츠르를 제공할 때 사용됩니다. 기존 Task Flow 흐름에서 크게 벗어나지 않고 관련된 작업을 바로 수행할 수 있기 때문에 화면 이동이 발생하지 않아 사용자가 간편한 느낌을 받을 수 있습니다. 

구성요소

바텀시트는 주로 핸들바, 헤더, 콘텐츠, 푸터로 구성되어 있습니다. 다만 서비스 특성과 필요에 따라서 핸들바와 푸터는 제외하고 사용할 수 있습니다. 또 팝업처럼 뒤쪽에 Shadow를 불투명하게 깔아서 사용할 수 있는데 이럴 경우 바텀 시트 내에서 태스크를 완료하기 전까지는 기존 화면을 확인할 수 없습니다. Shadow가 없을 경우에는 기존 화면과 상호작용이 되기 때문에 바텀시트 내에서 태스크가 완료되지 않아도 기존 화면이 확인 가능합니다.

주의사항

핸들바가 있는 바텀시트는 제스처를 통해서 화면을 확장하고 축소할 수 있지만, 없는 경우는 불가능합니다. 또한 바텀시트의 헤더는 내비게이션과 같기 때문에 타이틀영역에 닫기 버튼 외에 서치 창 등의 부가 액션기능이 들어갈 수 없습니다. 디자인 시에는 이 부분을 유의해서 사용하는 것이 좋습니다.

---

3. 스낵바 (Snack bar)

스낵바는 주로 사용자가 수행한 액션에 대해서 피드백을 간단하게 줄 때 사용됩니다. 취소, 완료 등의 사용자의 액션이 없는 정보를 전달하는 게 주목적인데요, 이때 별도의 액션을 제공하는 것도 가능합니다.

구성요소

스낵바의 구성요소는 주로 심벌 아이콘, 텍스트, 액션버튼으로 구성되어 있습니다. 심벌아이콘 위치에는 아이콘뿐만 아니라 이미지 등 간단한 이미지 요소도 넣을 수 있습니다. 액션버튼 영역에는 확인, 실행취소 등 간단한 액션기능을 넣을 수 있습니다.

주의사항

스낵바를 사용할 때는 위치 고려가 제일 중요합니다. 특히 바텀 내비게이션이나 FAB 등 주요 액션 버튼 등과 겹치지 않게 배치해야 합니다. 추가적으로 스낵바는 말 그대로 짧은 시간 동안 보이고 사라지기 때문에 내용구성을 간단하게 하는 것이 좋습니다. 전달하려는 콘텐츠 내용이 많다면 팝업이나 바텀시트 등 다른 UI를 사용하는 것이 좋습니다.

---

지금까지 모달 UI의 3종류인 팝업, 바텀시트, 스낵바에 대해서 알아보았습니다. 이 3개의 UI는 표준화된 사용 규칙이 있지는 않습니다. 다만, 태스크 플로우의 맥락, 전달하려는 정보의 양 그리고 중요도에 따라서 상황에 맞는 적절한 UI를 선택해서 사용하는 것이 좋기 때문에 각 UI별 특징과 사용시 주의사항을 포스팅해 보았습니다.
프로젝트를 진행하다보면 상황별로 어떤 UI를 선택해야할지 고민되는 부분이 많았습니다. 처음 프로젝트를 수행하는 분들이 참고해서 활용할 수 있도록 각 UI별 특성을 구분해서 포스팅해 보았습니다.