무선인터넷 제한 상황에서의 모바일 팝업 다이얼로그 메시지 사례

1. 팝업 다이얼로그란?

팝업 다이얼로그는 팝업의 형태로 알림, 혹은 확인, 취소 등을 수행하는 장치입니다. PC 환경에서는 팝업 메뉴가 마우스의 오른쪽을 클릭하면 상황에 따라 나오는 컨텍스트 메뉴를 사용되는 용도, 혹은 선택의 목적으로 사용되어 왔습니다. 모바일 환경에서는 주로 확인의 목적, 혹은 선택의 목적으로 사용되고 있습니다.

Designing Interface 책에서는 모달 패널과 팝업 메뉴를 다음과 같이 설명하고 있습니다.

모달 패널 (modal panel)
사용자가 현재 상황에 대한 문제를 해결할 때까지 오직 한페이지만 보여준다. 문제 해결과 관련되지 않은 다른 네비게이션은 할 수 없다.

팝업 메뉴 (pop-up menus)
마우스의 오른쪽을 클릭하거나, 패널이나 아이템에서 이와 유사한 행동을 하면, 상황 메뉴와 같은 팝업 메뉴가 나타난다. 팝업 메뉴에는 일반적으로 인터페이스에서 사용할 수 있는 모든 액션이 아니라, 특정 상황과 공통된 액션들만이 들어 있다. 간략하게 만들어야 한다.

또한, 위키피디아에서는 다이얼로그를 다음과 같이 설명하고 있습니다.

대화상자 (dialog)
그래픽 유저 인터페이스에서 대화 상자는 사용자에게 정보를 보여 주거나 응답을 받는 인터페이스에서 사용되는 특별한 창이다. 대화 상자라고 부르는 까닭은 컴퓨터와 사용자 사이에 대화할 수 있는 기능을 제공하기 때문이다. 사용자에게 무언가를 알려 주거나 사용자로부터 입력을 요청하는 등, 또는 그 두 가지 기능을 모두 수행할 수 있다.

물론 PC환경에서의 용어라 그대로 적용하기에는 무리가 따르겠지만, '팝업 기능을 수행하는 모달패널' 혹은 '팝업 기능을 수행하는 다이얼로그' 정도로 부를 수 있겠습니다.

2. 무선인터넷 제한 상황에서의 App.별 팝업 다이얼로그 메시지

그렇다면 모바일 환경에서 팝업 다이얼로그는 어떻게 사용되고 있을까요? 팝업 다이얼로그를 전체적으로 비교하기에는 다소 무리가 따르기 때문에 하나의 주제를 가지고 비교해보고 싶은 생각이 들었습니다. 아이팟 터치를 사용하다보면 Wi-Fi 를 사용할 수 없는 상황이 있는데, 이 상황에서 아이팟 터치 App. 들은 어떻게 팝업 다이얼로그들을 사용하고 있는지 살펴보았습니다.

크게 아이팟 터치의 App. 은 기본으로 설치되어있는 App. 이 있으며, 사용자가 직접 설치할수 있는 App. 으로 구성되어 있습니다. 비교항목은 제가 보유하고 있는 무선인터넷을 필요로하는 App. 위주로 비교하였습니다.


2-1 아이팟 터치 내부 App.

2-2. 아이팟 터치 외부 App.

3. 팝업 다이얼로그의 메시지, 버튼, 정보표현 방식 비교

아이팟 터치 App. 에서 사용된 팝업 다이얼로그 메시지와, 버튼 및 정보표현 방식에 대해서 [표1] 에 정리해 보았습니다. 

[표1] 무선인터넷 제한 상황에서의 모바일 팝업 메시지

표를 클릭하시면 크게 보실 수 있습니다.

텍스트의 종류는 '현재의 상태만 알려주는 경우'와, '현재의 상태 및 해결 책을 알려주는 경우'가 있습니다. 드물게 '친근함을 유도'하는 메시지가 있습니다. 윙버스 App. 의 경우 인터넷에 연결되지 않은 상태를 알려주며, 무선인터넷 연결 상태를 확인해 달라는 해결책을 제시하고 있습니다. 또한 팝업을 한번 더 띄워 무선인터넷이 제한된 상황에서도 미리 다운로드된 맛집 정보를 볼 수 있는 방법을 제공하고 있습니다.

버튼의 경우에는 '승인', '확인', 'OK' 를 주로 사용하고 있습니다. Tweetery App.의 경우는 'Cancel' 과 'Try again'의 두 개의 버튼을 제공하고 있습니다. skype App. 의 경우 '거절'이라는 다소 이상한 레이블을 제공하고 있습니다.

정보 표현 방식의 경우 '팝업'을 띄워 제한상황을 알리는 경우가 있고, '내부'에 제한상황을 보여주는 경우가 있습니다. 아프리카TV App.의 경우 팝업을 보여주고 '자동종료'가 됩니다.

iGmail 과 Gmail App.의 경우 무선인터넷 제한 상황에서는 아무 정보도 보여주지 않고 있습니다. 한국사람들을 대상으로 하는 App. 인 경우에 영어를 사용해서 일반 사용자들에게 해석을 요구하는 경우도 있습니다. 일반 사용자들은 잘 모를수 있는 전문용어를 사용하는 경우도 있습니다.

팝업 다이얼로그 메시지는 문제점을 알려주고, 문제점을 해결할 수 있는 방법을 가르쳐주며, 무선인터넷 제한 상황에서도 저장된 정보를 자유롭게 볼 수 있게끔 유도해야 하겠습니다.

4. 글을 마치며

이 글을 읽은 사람들은 바로 문제제기를 할 수 있을 것입니다. '과연 요즘시대에 무선인터넷이 안되는 경우가 어디있겠느냐?' 고 말입니다. 이 글의 경우 무선인터넷이 되고 안되고를 떠나서 팝업을 통한 알림이 과연 친절한가? 혹은 충분히 신중히 설계되었는가? 에 초점이 맞추어져 있다고 생각합니다. 무선인터넷 제한 상황은, 같은 환경에서 비교하기 위한 수단으로 사용되었음을 밝힙니다.

또한 '팝업창이 과연 필요한가?' '팝업창이 얼마나 유용한가?' 에 대해 질문할수 있습니다. 이 질문의 명쾌한 답을 여기서 드릴수는 없을 듯 합니다. 다만 모바일 환경에서 팝업 다이얼로그는 충분히 사용되고, 남용되고 있다고 생각합니다. 불필요한 팝업창을 계속 띄워서 사용자를 불편하게 할 것이 아니라, 정말 유용한 정보를 적시적소에 녹여내는것이 중요하다고 생각합니다.

팝업창을 똑똑하게 사용하는데에는 여러가지 방법이 있겠습니다. 팝업창의 메시지를 친근하고 재미있게 하는 방법이 있을 수 있습니다. 팝업창을 사용하지 않고 App.의 내부에 메시지를 녹여낼 수도 있습니다. 팝업을 한번만 띄우게 하고, 원치 않을경우 더이상 띄우지 않게 조정할 수도 있을 것입니다. 팝업에서 확인 버튼을 없애고 일정 시간이 지나면 자동으로 사라지게 하는 방법을 사용할 수도 있습니다. 아니면 사용자를 믿고 불필요한 정보들은 자동으로 처리하게 할 수도 있겠습니다.

이 글은 제한된 상황에서 작성하여, 모든 팝업의 경우를 다루고 있지는 않습니다. 팝업의 경우 알림의 경우 외에도 선택이 필요한 경우가 있습니다. 또한 요즘에는 팝업 창을 단순히 버튼으로만 배치하지 않고 다양한 컴포넌트들을 같이 섞어서 사용하는 경우도 있습니다.

앞으로 팝업 다이얼로그가 사용자에게 그저 귀찮기만한 골칫덩이가 아닌, 정말 유용한 정보를 제대로 보여줄 수 있는 소통의 창이 되기를 기대해봅니다. :)

참고 - 팝업
2012/05/11[UI 디테일] 퍼소나에 따른 네이버 뮤직 알림 팝업 디자인 (2) by 無異
2010/09/09팝업 종류별 개선 방안 (9) by uxdragon
2010/03/30무선인터넷 제한 상황에서의 모바일 팝업 다이얼로그 메시지 사례 (10) by uxdragon