상태변화 UI에 대한 고찰
Modal UI의 기능 분류를 통해 효율적으로 사용할 수 있는 방법
서비스 내 상태변화 전 후 상황에서 Modal UI를 쓰면서 각 플랫폼 간 (AOS, iOS)의 통일성을 위해 작업하던 중 Modal UI가 가지고 있는 기능 중 일부분에 대해서 좀 더 명확하게 정의할 필요가 있다고 생각했습니다.
본 글에선 디자인 요소를 제외하고 Modal UI의 기능 분류를 통해 효율적으로 사용할 수 있는 방법에 대해서 이야기하려 합니다.
Modal UI
화면의 유형을 구분할 때 Modal 화면과 Non-Modal 화면으로 구분이 가능한데, 일반적으로 Mobile 환경에선 Navigation, Tabbar 환경을 제외하고 화면 내에서 자식 화면을 통해 부모 화면의 상태 변화에 관여할 때를 기준으로 구분할 수 있습니다.
Modal UI는 부모 화면과 자식 화면의 상호 관계 속에서 부모 화면의 워크플로우를 좀 더 명확게 알려 줄 수 있어서 확인, 선택, 경고 등 다양한 기능에서 사용이 가능합니다.
다만, Mobile 환경에선 작은 UI 내에서 효율적으로 Modal UI를 구분해서 써야 명확하게 부모 화면의 상태를 전달할 수 있습니다.
Popup UI외 아래 기술한 다른 UI들도 Modal UI로 묶는 과정에서 많은 고민이 있었습니다. '부모뷰를 비활성화 하지 않는 UI도 Modal UI라 할 수 있을까?' 기본적으로 부모뷰를 비활성화하지 않았기에 Modal UI라 할 수 없을 수 있지만, 워크 플로우 과정에서 부모뷰를 선택할 때 진행되던 워크플로우가 멈추고 다시 부모뷰로 돌아간다는 점에서 Modal UI 범주에 포함되지 않을까 생각했습니다.
또한, Modal UI의 성격은 부모뷰 고유의 워크플로우 안에서 자식뷰를 통한 워크플로우 확장에 더 많은 의미가 있다 생각했습니다.
다만 상태변화에 유용한 UI만을 정의하기 때문에 해당 글에서 모든 Modal UI를 서술하지 않고 있음을 미리 말씀드립니다.
참고) Modal의 이해를 돕기 위한 링크
Popup UI
기본적으로 AOS에서는 Dialog를 바탕으로, iOS는 Alert을 바탕으로 쓰이며 기본 프레임 내에서 버튼 추가, 메시지 추가 등을 통해 다양한 상황에서 쓰일 수 있게 구성되었습니다.
Popup UI에서 기대할 수 있는 기능은 다음과 같습니다.
∙확인(취소) 팝업 기능
∙간단한 메시지 팝업 기능
∙선택지 확인(취소) 팝업 기능
∙시간 선택 기능
Popup UI는 Show → Pass on information → Confirm → Close의 순으로 진행되기 때문에, 유저의 반응 이후에 상태 변화에 관여할 수 있으며, 타이틀과 내용을 통해 유저 인터랙션 이후에 정보전달이 가능한 장점이 있습니다.
Popup UI는 Modal UI 중에서 가장 직관적이고 많은 기능을 담고 있는 만큼 다양한 환경에서 사용이 가능하지만, 남발하게 될 경우 유저의 활동을 방해해 피로감을 줄 수 있는 UI이기에 적절한 상황에서 사용해야 됩니다.
Sheet UI
Sheet UI는 AOS 에선 Bottom Sheet, iOS 에선 Action Sheet 라 부릅니다. 보기 선택 기능을 제공하며, Popup UI와 달리 화면 하단에 위치하여 조작이 유용하고 보기 선택 기능에 집중해서 나온 UI입니다.
때문에 선택지의 설명이 필요 없는 경우, 타이틀과 내용 없이 보기 옵션만 제공하여 사용하는 경우가 많습니다.
Popup UI 보다 직관적이고 보기 선택에 유용하기 때문에
Show → Pass on information(Optional) → Confirm → Close 순서 중 부모 화면에서 이미 보기에 대한 이해를 한 후 진행하는 상황이라면 정보 전달(Pass on information) 플로우를 생략할 수 있습니다.
이 경우 Popup UI를 통한 보기 선택보단 Sheet UI가 보기 선택이 직관적으로 더 좋습니다. 다만, Sheet UI는 선택 옵션이 많을 경우 화면 내 전부 표기가 어려워 주의할 필요가 있습니다.
Push UI
iOS만 유저의 동의 이후 사용이 가능하지만, 앱을 사용하지 않을 때도 앱의 상태 변화를 전달해 줄 수 있는 Modal UI입니다.
Push UI는 Notification 전달을 통해 앱이 켜 있지 않은 상황에서도 상태변화를 전달할 수 있기 때문에, 타 기기(PC, Web 등)에서 이뤄지는 상태변화도 전달이 가능한 장점이 있습니다. 또한, 사용자의 인터랙션이 없어도 정보 전달 이후 일정 시간이 지나면 부모 화면에서 자동으로 사라지기 때문에 유저에게 컨펌 인터랙션을 강요할 필요도 없습니다.
다만 OS 별로 인터랙션 제한이 있기 때문에 보편적으로 터치 인터랙션만 사용하며, iOS의 경우 동의를 한 사용자에게만 Push UI를 사용할 수 있기 때문에 Push UI 외에 Toast UI나 Popup UI를 추가로 표기하여 Push 동의를 하지 않은 유저도 볼 수 있게 해 줍니다.
Push UI를 남발하게 될 경우 상태 화면에 누적이 되어 피로감을 줄 수 있어, 꼭 필요한 상황에 대해서 사용하는 것이 좋습니다.
토스 앱의 경우 상태 변화가 있을 경우 Push UI를 통해 알려주기 때문에, 타 기기에서의 상태변화도 Mobile로 알려줄 수 있으며, Push 동의를 하지 않은 유저에게도 상태 변화를 전달하기 위해 Popup UI를 따로 뒀습니다.
당근 마켓의 경우 키워드 알람에 Push UI를 사용하는데, Push 알림을 사용하기 위한 조건에 Push 동의를 포함하기 때문에 보조 Modal UI 없이 Push UI만으로 상태 변화를 알릴 수 있었습니다.
Snak bar UI (Toast UI)
Snak bar UI와 Toast UI는 HUG(Human Interface Guidelines)에는 없는 UI입니다. AOS의 Material design에서 정의된 UI이며, 간단한 메시지를 전달하기 위해서 사용됩니다. Push UI와 차이점으로 UI의 위치 외에 앱이 실행 중인 상태에서만 보이며, 미리 정의된 부모 화면에서만 보여줄 수 있습니다.
Material design의 Snak bar UI버튼을 통한 추가 인터랙션 가능 여부에 따라 Snak bar UI와 Toast UI로 구분하지만, 화면 하단에서 간단한 메시지를 보여준다는 점에서 Material design에선 Snak bar UI로 통일해서 정의합니다.
Snak bar UI는 사용자를 방해하지 않고 간단한 메시지를 보여줄 수 있는 가장 좋은 Modal UI입니다. 하지만 앱을 사용 중인 환경과 미리 정의된 화면에서만 볼 수 있기 때문에 포인트 적립 같은 타 기기와 동기화된 상태변화를 알려주기 어려운 단점이 있습니다.
또한, Snak bar UI는 iOS에는 없는 기능이기에 iOS에 적용시킬 경우 별도의 가이드가 필요합니다.
Snak bar UI는 앱 서비스 내의 상태 변화 알림 혹은 상태 변화 이후 실행 취소 같은 환경에서 좋은 UI 이기 때문에 서비스 환경에 따라 구분해서 쓰는 것이 좋습니다.
모달 정리하기
각 Modal UI의 장∙단점을 구분하면,
1) Popup UI
장점 : 정보 전달이 유용하며, 많은 기능 제공으로 적절한 조합으로 다양한 곳에서 사용이 가능하다.
단점 : Confirm 과정이 필수라 자주 사용할 경우 유저의 행동을 방해하여 피로감을 줄 수 있다.
2) Sheet UI
장점 : 보기 선택 기능에 집중하여 직관적이고 하단 버튼으로 작동이 유용하다.
단점 : 보기 갯 수의 제한이 있어 많은 보기를 선택해야 될 경우 사용이 어렵다.
3) Push UI
장점 : 앱을 사용하지 않는 상태에도 알림이 가능하며, 간단한 메시지를 전달할 경우에 매우 유용하다.
단점 : Push 동의를 하지 않은 사용자에게 제공할 수 없는 제약이 따르며, 터치 인터랙션 외 다른 기능을 추가할 수 없다.
4) Snak bar UI
장점 : 간단한 메시지 전달에 유용하며, 버튼을 추가를 통해 선택 옵션을 줄 수 있다.
단점 : Push UI와 달리 앱이 켜져 있을 때만 사용 가능하며, iOS에서 기본적으로 제공하는 기능이 아니기 때문에 따로 가이드가 필요하다.
위와 같이 정의가 가능합니다.
마치며
Modal UI는 서비스의 상태 변화를 직관적으로 알려줄 수 있기 때문에 매우 유용한 UI입니다. 하지만, 정확한 구분 없이 개별적 상태에 따라 무분별하게 사용할 경우 정보 중복 전달의 오류, 방해 누적에 의한 피로감 증가 같은 오류를 범할 수 있기 때문에, 서비스에서 추구하는 방법에 맞는 Modal UI 선택이 필요합니다.
os 업데이트, 누락된 정보 등에 의해서 글에 문제가 있을경우 댓글을 통해 알려주시면 검토한 후 수정하도록 하겠습니다!
