헷갈리지 않는 디자인 시스템 컴포넌트 네이밍
Alert, Dialog, Sheet, Modal, Popup
디자인 시스템을 구축할 때 어려운 점 중 하나가 컴포넌트의 이름 짓기입니다. 모양이 비슷해 보이지만 부르는 이름은 다양하고 사용법도 조금씩 다른 5개의 컴포넌트인 Alert, Dialog, Sheet, Modal, Popup을 비교하고 용법을 정의해 보려고 합니다.
논모달뷰(Non-Modal View) & 모달뷰(Modal View)
시작하기에 앞서 View 라고 부르는 화면은 크게 논모달뷰(Non-Modal View) 와 모달뷰(Modal View) 로 구분지을 수 있습니다. Non-Modal View 는 일반적인 기본 View이고, 그 위에 Scrim(Dimmed 검정 화면)을 깔고 작은 View를 띄우는 것을 Modal View이라고 합니다. 주로 사용자가 현재의 맥락의 흐름에서 이탈하지 않고 새로운 과업을 집중해서 수행하고 이전의 화면으로 돌아오는 임시의 화면입니다.
Modal은 컴포넌트 이름이라기보다는 개념에 가까운 이름입니다. 애플이 정의하는 개념 Modality 와 라인의 UX 가이드라인이 이를 더 명확히 설명해줍니다. 이 개념에 따르면 Alert, Dialog, Sheet는 Modality 라는 속성을 가진 컴포넌트라 할 수 있습니다. 서비스마다 각자의 상황에 맞게 Sheet 컴포넌트 안에 Dialog 기능을 합쳐서 사용하거나, Dialog 를 Alert 기능까지 합쳐서 사용하기도 합니다.
알러트(Alert) & 다이얼로그(Dialog)
Alert는 사용자에게 중요한 정보를 강제로 전달하고 "제목, 메시지, 버튼"으로만 구성됩니다. 사용자는 Alert를 무시할 수 없고 버튼으로 응답해야 합니다. 사용자를 강하게 방해하는 느낌이 있고, Dialog 와 형태는 비슷하지만 필수적인 요소로만 단순한 구조로 구성되어 있습니다.
Dialog는 사용자와 시스템 간의 대화 상자입니다. Alert 와 다른 점은 사용자가 시스템의 대화를 무시할 수 있으며, 텍스트뿐만 아니라 이미지나 영상 등을 활용하여 더 다양하게 구성할 수 있습니다. Alert보다는 가볍게 사용할 수 있습니다.
애플은 Alert 라는 명칭으로 사용하고, 구글과 지마켓은 Dialog 를 기본으로 명칭하여 사용합니다. Alert 성격은 Basic Dialog 나 Dialog 기본타입으로 사용하는 것으로 추측됩니다. 라인은 Popup 이라는 명칭을 사용하고 마찬가지로 가장 기본적으로 사용했을때 Alert 성격의 요소만으로 구성됩니다.
iOS, Material 3, Gmarket, Line 의 Alert 와 Dialog 예시시트(Sheet)
Sheet는 얇은 판(레이어, 종이 같은)을 화면에 들이밀어 이전 화면에서 벗어나지 않은 상태에서 새로운 작업을 할 수 있는 컴포넌트입니다. 화면의 아래쪽에서 위로 올라와서 Bottom Sheet라고도 많이 부릅니다. 아예 새로운 콘텐츠를 구성할 수 있어서 자유도가 가장 높고 이전에 Modal이나 Popup이라고 불리던 방법과 가장 가깝습니다. 모바일 기기에서는 흔하게 보지만, 데스크탑 기기에서는 쇼핑몰에서 장바구니 버튼을 눌렀을 때 화면 오른쪽에서 왼쪽으로 나오는 흰 배경의 장바구니 리스트를 떠올리시면 됩니다. 애플 웹사이트에서도 제품의 자세한 특징을 설명할 때 자주 사용합니다.
SheetSheet는 컴포넌트지만 내부에 더 작은 컴포넌트나 엘리먼트를 다양하게 구성할 수 있어서 디자인 패턴이라고 불러야 할지도 모릅니다. 크기를 콘텐츠에 맞게 조정하거나, 전체 화면을 가리는 크기로 설정할 수도 있습니다. 애플은 액션 버튼으로만 구성된 밑에서 위로 올라오는 Action Sheet라는 컴포넌트가 있고, 구글은 Bottom Sheet라고 명칭합니다.
iOS, Material 3, Line 의 Sheet팝업(Popup) & 모달(Modal)
Windows XP 시절 브라우저의 새 창이 뜨는 것을 Popup Window라고 불러왔기 때문에 현재의 상황과 가장 헷갈리는 명칭입니다. 팝업은 브라우저에서 독립된 새 브라우저 창이 뜨는 형태이고 모달은 브라우저 안에서 새로운 화면이 뜨는 형태입니다. 개인적으로는 팝업이 커뮤니케이션에서 혼란을 주기 때문에 사용을 지양하는 편입니다. 하지만 라인에서는 위의 모달 개념의 Dialog 를 Popup 이라고 명칭하여 사용합니다. 모바일기기에서는 브라우저를 새로 띄운다는 개념이 없기 때문에 모바일 서비스에서는 팀원들과 약속하면 혼란스럽지 않을 것 같습니다.
팝업은 브라우저 창이 2개, 모달은 브라우저 안의 새로운 화면
라인에서는 Alert + Dialog + Promotion 의 다양한 형태를 Popup 으로 풀어냄스낵바(Snackbar) & 토스트(Toast)
위의 컴포넌트들은 사용자와의 상호작용(Interaction)이라는 맥락이 있다면, 스낵바와 토스트는 시스템이 사용자에게 보내는 간단한 피드백입니다. 사용자가 한 행동에 대한 시스템의 변경 사항을 간단히 알려주는 안내입니다. 시간이 지나면 사라지기 때문에 사용자에게 방해가 되지 않습니다.
스낵바에는 간단한 액션 버튼이 있습니다. 아이콘을 추가할 수도 있습니다.
토스트는 스낵바와 다르게 액션 버튼이 없고 시스템 메시지입니다. 액션버튼이 없기 때문에 사용자가 스와이프하거나 닫기 버튼을 눌러 제거할 수 없습니다. 화면이 전환되어도 사라지기 전의 시간 이내라면 계속 떠있습니다. 스낵바는 여러개를 동시에 노출시킬 수 없지만 토스트는 여러개를 노출할 수 있습니다.
보통은 스낵바 하나로 충분하기에 토스트를 컴포넌트로 만들지 않는 경우가 많으나, 라인은 스낵바와 토스트의 차이를 더 분명하게 구분하여 디자인시스템에 구성해두었습니다.
결론
최대한 간단하게 설명했지만, 마지막으로 요약해보자면 아래와 같습니다.
Alert: 중요한 정보를 강제로 알리는 긴급한 성격의 대화 상자 컴포넌트
Dialog: Alert 보다는 덜 무거운 대화 상자 컴포넌트
Sheet: 현재 화면에서 임시로 새 화면을 띄워 같은 맥락의 새로운 작업을 수행하거나 정보를 제공하는 컴포넌트
Snackbar: 액션 버튼이 있는 간단한 피드백 컴포넌트
Toast: 액션 버튼이 없는 간단한 시스템 메시지 컴포넌트
모달 종류의 컴포넌트는 사용자의 흐름을 방해하는 성격이 조금씩 있기 때문에 사용을 최소화하는 것이 좋습니다.
