애플 아이폰 UX 분석 (3)

풀터치 스크린 휴대폰에서는 휴대폰이 제공하는 제스쳐 인터랙션이 사실상 그 휴대폰의 UX 품질을 좌우한다고 봐도 과언이 아니다. 거의 대부분의 인터랙션이 터치 화면 상의 제스쳐를 통해 이루어지 때문이다. 이번 호에서는 아이폰의 제스쳐 인터랙션에 대해서 알아본다. 아울러 아이폰에 부착되어 있는 센서들에 대해서도 분석한다. 센서는 인터랙션의 스텝을 줄여주고 휴대폰의 기술을 자랑 (show off)하는 마케팅 효과까지 있기 때문에 최근 나오는 휴대폰들에서 매우 중요한 UX 요소로 부상하였다. 아이폰의 센서들이 인터랙션 체험도를 어떻게 높이는지 보자.

 

3회: 아이폰의 터치 인터랙션과 부가 센서

아이폰의 터치 인터랙션
아이폰의 터치 인터랙션은 윈도우 모바일 계열의 스마트폰과는 달리 손가락으로 조작하는 터치 UI이다 (스마트폰에서도 손가락을 사용할 수는 있지만 기본 전제는 스타일러스라고 봐야 한다. 이를테면 많은 GUI 요소가 손가락으로 누르기에는 너무 작다.) 손가락은 스타일러스에 비해 다음과 같은 장단점을 가진다 (도표 1)

장점	신체의 일부로 언제든 쓸 수 있다. 즉, 스타일러스처럼 잃어버리거나 본체에서 뽑아서 써야 하는 물건이 아니다. 멀티 터치 조작이 가능하다.  하드웨어 버튼과 화면상의 터치 인터랙션을 손쉽게 오가며 사용할 수 있다. 즉, 스타일러스를 든 상태에서 하드웨어 버튼을 조작하는 것보다 상대적으로 쉽다.
단점	세밀한 조작이 불가능하다. 사람마다 손가락의 크기와 굵기가 다르다. 화면에 지문이 남는다.

도표 1: 손가락 터치 인터랙션의 장단점

아이폰의 인터랙션은 위와 같은 손가락 터치 인터랙션의 특성을 잘 살린 - 즉 장점은 대폭 살리고 단점은 최대한 극복하는 - 디자인 전략을 사용한다. 이를테면 멀티 터치를 적절하게 활용하고, 소리 크기 조절이나 홈스크린으로의 복귀는 하드웨어 버튼에 전담시켰고, 모든 GUI 요소가 최소한의 크기를 유지하여 손가락의 크기와 상관없이 조작할 수 있도록 디자인 된 점들이 그러하다.  

아이폰의 주요 제스쳐 인터랙션 세트
터치 인터랙션으로 조작하는 제품은 일반적으로 표준 제스쳐 세트가 제공된다. 아이폰의 휴먼 인터페이스 가이드라인 (Human Interface Guidelines)에는 아래와 같은 제스쳐들을 아이폰의 주요 제스쳐 인터랙션 세트로 규정하였다.

탭 (tap): 손가락으로 화면의 UI 요소를 터치하는 가장 기본적인 제스쳐이다. 마우스로 따지면 싱글 클릭 (single click)과 동일하다.

드래그 (drag): 터치를 한 상태로 특정 방향으로 스크롤을 하는 제스쳐이다. 이를테면 주소록에서 화면을 위아래로 드래그하는 것이다.

플릭 (flick): 플릭은 우리말로 "손가락으로 가볍게 튀기다, 채찍 등으로 가볍게 치다" 이다. 드래그를 하되 빠르게 튀기듯 손가락을 휙 띄는 제스쳐이다. 이를테면 컨택 페이지를 빠르게 스크롤 할 때 쓰인다.

스와이프 (swipe): " 강타하다, 세게 치다" 정도의 의미를 가진 스와이프는 대개 테이블형 리스트의 한 아이템에서 삭제 버튼을 불러오는 숏컷 제스쳐로 쓰인다 (그림 1.) 제스쳐는 특정 아이템 (그림 1에서는 +65 9233 6219) 셀에서 오른쪽->왼쪽으로 세게 밀듯 문지르면 Delete 버튼이 나온다. 아이포드 기능에서는 한 곡 재생 화면에서 곡 목록 재생 화면으로 돌아갈 때 쓰이기도 한다. 

  

                   

그림 1: Delete 키를 스와이프로 불러온 경우

더블 탭 (double tap): 말 그대로 두 번 연속으로 탭을 하는 경우이다. 그림 2와 같이 지도보기에서 더블 탭을 하면 지도가 줌인되면서 확대된다. 또한 아이포드 기능에서 한 곡 재생 화면과 곡 리스트 화면을 더블 탭으로 토글을 할 수 있다. 

  

     

그림 2: 더블 탭으로 지도를 줌인



핀치 열기 (pinch open): 마치 화면을 늘이는 것처럼 두 손가락을 화면에 대고 벌리는 제스쳐이다. 지도보기에서 지도 화면을 줌인할 때 사용하는 것이 대표적인 사용 케이스이다. 더블 탭과 다른 점은 더블 탭은 미리 정해진 양만큼 자동으로 줌인되는 반면 핀치 열기는 사용자가 손가락를 벌리는 정도로 줌인 레벨을 조종할 수 있다는 것이다.

핀치 닫기 (pinch close): 핀치 열기의 반대 제스쳐이다. 두 손가락을 화면에 대고 좁히는 것으로 이를테면 지도를 줌아웃하여 축소시킬 때 사용한다.

터치 및 유지 (touch & hold): 손가락을 화면에 대고 터치한채 그대로 유지하는 것이다. 롱프레스 (long press)라고도 한다. 터치 유지는 약방의 감초마냥 여러 애플케이션에서 추가 기능을 불러올 때 자주 사용된다. 몇 가지 예를 보자. 통화 키패드에서 0을 계속 누르고 있으면 국제번호 싸인인 +가 입력된다 (그림 3.) 텍스트 입력 과정에서는 확대경을 불러올 때도 사용된다 (그림 4.) 이 경우는 터치, 유지 및 드래그의 혼합 제스쳐이다. 또한 텍스트 입력에서 스크린 키보드의 한 키를 오래 누르고 있으면 부가적으로 입력할 수 있는 특수문자 세트가 디스플레이된다 (그림 5.) 마찬가지로 터치, 유지 및 드래그의 혼합 제츠쳐로 입력하는 특수 문자를 선택한다. 

  

  

그림 3: 키패드에서 0을 누른 채로 더 있으면 + 싸인이 입력된다.

 

  

 

그림 4: 텍스트 입력시 확대경                  그림 5: 특수 문자 입력

2008년 9월부터 애플은 아이폰의 개발툴킷을 공식으로 오픈하였다. 앞으로 전세계의 써드파티 업체들과 개인 프로그래머들이 다양한 애플리케이션을 내놓으면서 보다 많은 제스처 인터랙션이 나올 것이다. 애플은 이에 따라 휴먼 인터페이스 가이드라인에서 아이폰 애플리케이션의 UI 디자이너들에게 위의 주요 제스쳐들을 애플에서 규정한대로 사용할 것을 권고한다. 표준화된 제스쳐 세트를 규정하고 권고하는 것은 아이폰과 같은 오픈 개발 플랫폼에서는 터치 UX의 품질을 유지하는데 매우 중요한 역할을 한다.

 

아이폰과 같은 풀 터치 스크린 폰에서는 대부분의 UX 케이스에서 적용 가능한 표준 제스쳐 세트를 규정해야 한다. 특히 오픈 개발 플랫폼인 경우 써드파티 개발자들에게 표준 제스쳐 세트의 준수를 적극 권고하는 것이 바람직하다.

 

아이폰이나 스마트폰은 웹브라우징이나 워드프로세싱 등이 지원된다는 점에 사실상 컴퓨터 제품으로도 볼 수 있다. 실제로 이런 휴대폰들이 미니 컴퓨터와 점차 시장에서 경쟁을 벌이는 추세이기도 하다. "사용자가 이미 익숙한 멘탈 모델을 적극 재사용하라" 라는 UX 디자인 원칙을 본다면 아이폰/스마트폰에서 컴퓨터의 인터랙션을 적극 도입하는 것도 하나의 디자인 전략이 될 수 있다. 현 데스크탑 컴퓨팅에서의 표준 인터랙션은 흔히 WIMP로 상징되는 윈도우 GUI 환경과 마우스이다.도표 2에서 2버튼과 휠이 있는 기본형 마우스의 인터랙션과 아이폰의 주요 제스쳐 인터렉션을 상호 비교해 보았다.    

마우스 기본 인터랙션	아이폰의 제스쳐 인터랙션
왼쪽 버튼의 싱글 클릭	탭
왼쪽 버튼의 더블 클릭	탭 / 더블 탭
오른쪽 버튼의 싱글 클릭
휠 스크롤	드래그 / 플릭 / 스와이프
드래그 & 드롭	터치 유지 및 드래그

도표 2: 마우스 인터랙션과 아이폰 주요 제스쳐 인터랙션의 비교

 

일반적으로 컴퓨터에서는 왼쪽 버튼의 싱글 클릭은 객체를 선택하고 더블 클릭을 객체를 실행하는 인터랙션이다. 터치에서 이를 그대로 베껴 쓴다면 탭은 객체 선택, 더블 탭은 객체 실행이 될 것이다. 그렇지만 아이폰에서는 탭이 거의 모든 UX 케이스에서 객체 선택과 실행 - 그것도 주로 실행 - 의 역할을 병행하고 더블 탭은 지도 상에서 자동 줌인/아웃 정도에만 사용된다. 아이폰은 왜 더블 탭을 적극 활용하지 않았을까?

일단 아이폰은 선택과 실행을 구분하지 않는다. 다시 말해 선택 아니면 실행일 뿐이다. 대부분의 화면에서 탭은 실행이다. 탭이 선택으로 작동하는 경우는 이를테면 그림 6과 같이 벨소리를 선택할 때이다. 이 경우 실행은 없다. 탭이 선택, 더블 탭이 실행으로 동시에 두 제스쳐가 사용되어야 하는 UX 케이스는 무엇일까? 이를테면 음악 목록이 디스플레이된 화면에서 다음 두 가지 기능을 모두 할 수 있는 경우일 것이다.

• 다중 삭제나 복사 등의 태스크를 수행할 목적으로 싱글 탭으로 복수의 아이템들을 선택

• 한 아이템을 더블 탭하면 바로 재생(=실행)이 된다

아이폰은 바로 이러한 다소 복잡한 UX 케이스를 원천적으로 배제함으로써 단순선택과 실행이 공존하는 화면을 허락하지 않는다.

그림 6: 벨사운드 선택 화면

일전에 프라다 휴대폰의 터치 인터랙션을 분석할 때 더블 탭의 UX 케이스를 보았는데 다소 불편한 면이 있었다. 이것이 터치 휴대폰에서 더블 탭 자체가 불편한 것인지, 프라다에 들어간 터치 기술이 더블 탭을 불편하게 느끼게 한 것인지 (=기술적인 문제), 아니면 그 화면에서의 UX 디자인 자체가 더블 탭이 적절하지 않은 케이스였는지는 명확하게 분석하지는 못했다. 어째든 더블 탭은 터치 인터랙션에서 좀 더 집중적으로 연구해 볼 필요성이 있는 숙제인 듯 하다.

아이폰의 기본 제스쳐 세트에서 한 가지 아쉬운 점을 들자면 컴퓨터의 마우스의 오른쪽 버튼을 클릭하여 나오는 컨텍스트 메뉴 (그림 7)와 같은 제스쳐가 마땅히 없다는 점이다. 사실 아이폰에서는 컨텍스트 메뉴의 개념 자체가 없다고 봐야 한다. 물론 앞서 설명한 바와 같이 터치 및 유지가 약방의 감초처럼 부가 기능을 불러오는 제스쳐로 작동하는 UX 케이스들이 있다. 그러나 이것은 보편적인 인터랙션은 아니다. 즉 어떤 UI 요소 또는 UX 케이스에서나 터치 및 유지를 하면 무엇인가 부가 기능이 나오는 것이 아니라는 것이다. 컨텍스트 메뉴가 초보자부터 고급 사용자까지 컴퓨터 인터랙션 환경에서 가장 많이 활용되는 UI 중의 하나임을 고려해 볼 때 아이폰의 컨텍스트 메뉴의 배제는 다소 의아한 의사결정으로 보인다.  

그림 7: 컨텍스트 메뉴

어째든 이 두가지 사항에서 알 수 있듯 아이폰의 UX는 컴퓨터의 마우스 멘탈 모델을 100% 그대로 베껴쓰지는 않았다. 초창기에 나온 아이폰 이외의 터치 스크린 휴대폰에서 "탭 1번을 선택, 또 한번의 탭을 실행"으로 하는 것과 같은 실수를 저지르는 경우가 종종 있었는데 비해 아이폰은 한번 더 생각하여 만든 UX인 것만은 확실하다.

아이폰의 부가 센서
아이폰에는 터치 스크린 이외에도 몇 가지 부가적인 센서들이 달려 있어 여러가지 부가 기능과 인터랙션을 제공한다. 다음은 아이폰에서 제공되는 센서들이다.

• 주변 조명 센서 (ambient light sensor) 

• 근접 센서 (proximity sensor)

• 가속도계 (accelerometer)

• GPS (Global Positioning System)

주변 조명 센서 (ambient light sensor)
화면의 밝기를 주변에 맞추어 자동으로 맞추는 센서이다. 맥킨토시에도 똑같은 센서가 달려 있다.

근접 센서 (proximity sensor)
근접 센서란 물체가 검출면에 가까이 근접했을 때 이를 감지하는 센서이다. 아이폰에서는 본체가 사용자의 얼굴에서 얼마나 가까워졌는지를 체크하는데 주로 사용된다.

근접센서는 아이폰이 사용자의 얼굴에 얼마나 근접했는가를 감지하여 사용자가 통화 중일때는 화면을 꺼서 전력을 아끼고 화면이 얼굴에 닿았을 때 의도치 않는 터치 조작이 발생하지 않도록 방지해 준다. 반대로 얼굴에서 일정 거리 이상으로 본체가 멀어지면 화면이 자동으로 켜진다. 사용자가 전화 통화 중에 주소록에서 정보를 찾아봐야 한다든가 ARS 조작 - 이를테면 "분실 신고는 1번, 부가 서비스 신청은 2번" 하는 - 에 필요한 키패드를 불러온다든가 할 수 있다.

가속도계 (accelerometer)
아이폰에서 사진이나 동영상을 볼 때 아이폰을 가로/세로 - 흔히 portrait와 landscape라고 표현하는 모드 - 방향으로 돌리면 사진이나 동영상이 같이 따라돈다. 이것을 가능하게 해주는 센서가 가속도계이다. 가속도계는 가속도와 중력을 바탕으로 움직임 (motion)을 감지하는 센서이다. 인터랙션 측면에서는 앞서 말했듯 와이드 화면으로 사진/동영상을 볼 수도 있게 해주고 아이폰용으로 나오는 여러 게임에서 조작 센서로도 활용된다.

GPS (Global Positioning System)
센서로 분류하기에는 좀 애매하지만 어째든 아이폰에서 자동으로 어떤 신호를 감지한다는 측면에서 센서와 함께 묶었다. 아이폰에서 위치 정보를 파악하는 데 사용하는 신호는 총 3가지이다. 기본으로 사용하는 것이 위성 신호이고, 위성 신호가 감지 되지 않을 때는 와이파이 (Wi-Fi) 핫스팟과 기지국 (cellular tower)의 신호를 감지하여 위치를 추정한다. 아이폰에는 구글맵이 들어 있어 측정된 위치 정보를 지도 상에 동심으로 표시한다.  

센서가 인터랙션 디자인에 주는 혜택은 정황에 맞게 시스템이 자동으로 판단을 내림으로써 사용자의 수동적인 인터랙션 스텝을 줄여준다는 데에 있다. 이를테면 조명 센서는 알아서 밝기를 주변 조명 환경에 맞게 조절해 주기 때문에 사용자가 밝기를 수동으로 조절할 필요가 없다.

아이폰에서는 곳곳에 센서를 적절하게 활용하여 훌륭한 인터랙션을 제공한다. 다만 몇 군데 가속도계를 활용하여 보다 높은 UX를 제공할 수 있지 않을까 싶어 이 글의 마지막으로 몇 가지 아이디어를 아래 적어 본다. 다음 호에서는 아이폰의 내비게이션 스타일에 대해 다루겠다.

• 계산기 애플리케이션에서 아이폰을 가로로 놓으면 일반 계산기, 세로로 놓으면 공학 계산기가 나오면 어떨까?

• 주소록 (contanct) 화면에서 아이폰을 세로로 놓으면 이름과 함께 첫 번째 등록된 전화번호가 나와 전화번호를 탭하면 바로 전화가 걸리게 한다면? 이렇게 하면 아이폰에서 전화 거는 스텝을 하나 줄일 수 있다.

• 달력에서 가로/세로가 사용자가 가장 많이 보는 뷰 (view) 2개의 토글로 작동해도 좋을 듯 하다. 이를테면 주 (week) /월 (month) 뷰의 토글.
  

출처 : www.caerang.com , blog.caerang.com