본문 바로가기
인터넷 & 모바일/뉴미디어디자인 & UX

(1/3) New Media User Interface의 디자인 사례 - 스마트폰 (아이폰을 중심으로) 1

by a4b4 2011. 1. 6.
728x90
반응형
 


개요

스마트폰의 경우 웹서비스와는 다르게 좁은 화면과 제약된 기능을 고려하여 서비스를 설계하여야 한다. 특히 키보드나 별도의 스타일러스펜을 이용하지 않고 손가락으로 조작하는 정전식 터치폰이 보편화 되면서, 좁은 화면을 효율적으로 사용하는 설계와 인터렉티비티(Interactivity)를 어떻게 향상시키는가가 UI가 좋은 서비스를 판단하는 기준이 되고 있다.


스마트폰의 주요한 기능인 다양한 터치기능과 G센서를 이용한 자동 화면전환 UI설계에서도 이러한 모바일 기기만의 다양한 기능을 잘 적용하여야 한다.




1. 스마트폰의 주요한 기능을 활용하라

     1) 가로-세로 화면이동을 잘 활용하라

     G센서(중력/gravity 센서)는 중력 작용에 의해 물체의 움직임이나 기울어짐을 인식하는 센서를 말한다. 즉 휴대폰을 가로 세로로 회전 또는 기울이거나 흔들었을  경우 이용자의 행동을 감지하고 거기에 맞는 최적의 화면 또는 동작을 구현할 수 있게 해준다. 이를 활용하면 간단하게는 세로의 이미지를 가로로 보이게 하거나 가로의 이미지를 세로로 보이게 할 수 있다. 특히 좁은 화면으로 인하여 가로사진 이미지 등이 작게 보일 경우 아래의 예시와 같이 가로 전환을 통하여 좀 더 확대된 이미지를 볼 수 있도록 지원할 수 있다.




     또한 동일한 어플리케이션에서도 화면전환을 통하여, 어플리케이션의 기능을 간략 또는 복잡(상세)하게 변경할 수 있는 기능을 제공할 수 있다. 아이폰 계산기의 경우 세로 화면에서는 간략한 일반용 계산기 기능을, 가로화면에서는 공학용 계산기 기능을 제공하고 있다.




     이러한 기능을 적용하는데 있어서 가로와 세로전환의 경우 이용자가 큰 서비스의 변화를 느끼지 못할 경우 꼭 가로모드를 지원해야 할 이유는 없다. 또한 가로모드와 세로모드의 설계는 분명히 다르게 구성되어야 한다.
아래화면은 아이패드에서 note 어플리케이션의 가로와 세로 화면이다. 가로화면에서는 스플릿 뷰를 적용하여 세로화면에서는 숨긴처리된 note 리스트가 왼쪽에 배치되어 있다.





2) 정전식 터치패드의 장점을 활용하라

     최근 들어 대부분의 터치방식 폰에 사용되는 정전식(사람 몸에서 나오는 미세한 전류를 통하여 동작) 터치 스크린은 감압식 (좌표와 압력을 인지하여 동작)에 비하여 빠르고 적은 힘으로 섬세한 조작이 가능한 것이 특징이다. 이러한 특성을 활용하여, 좁은 화면에서도 이용자가 쉽게 정보를 입력하거나 수정할 수 있도록 화면을 설계한다.

     알람 서비스의 경우 이용자가 화면상의 휠을 이용하여 날자와 시간을 설정할 수 있으며 휠을 돌리는 방향에 따라 이전-다음으로 이동하며, 휠을 돌리는 속도에 따라 휠이 돌아가는 속도와 지속시간이 변경된다. 라디오 서비스의 경우 이러한 기능을 활용하여 상단에는 좌우로 채널을 이동할 수 있도록 함과 동시에 아래의 조그셔틀을 통하여 회전방식으로 채널을 변경할 수 있도록 지원하고 있다.

     이러한 기능은 좁은 화면에서 이용자가 별도의 학습 없이 직관적으로 편리하게 기기 및 프로그램을 이용할 수 있으며, 조작과정에서 발생할 수 있는 오류를 최소화 한다.




     3) 유사 기기와의 디자인 통일성을 고려하라

     최근 유행하는 스마트폰의 경우 오프라인의 상품 및 기기들이 디지털화 되어, 어플리케이션을 통하여 스마트폰 상에서 구현 되고 있다.
     아래의 이미지는 IP-TV 서비스인 KT의 QOOK TV의 리모컨을 어플리케이션으로 개발한 예시이다. 해당 어플리케이션에서는 리모컨의 가장 중요한 요소인 채널전환과 볼륨 조절 기능을 강조하였으며, 아날로그 리모컨에선는 구현할 수 없는 채널별 현재 방송하는 프로그램명 및 시간대를 표시하여 이용자에게 차별화된 서비스를 제공하고 있다.

     또한 기존의 복잡한 리모컨에서 벗어나 가장 많이 이용하는 최소한의 기능으로 구성하고 해당 요소들을 오프라인의 리모컨의 기호 및 구성과 유사하게 배열하여 기존 리모컨 사용자들이 별도의 학습 없이 직관적인 이용이 가능하도록 구성되어 있다. 이는 아이패드 가이드라인에서 제시된 'Add Physicality and Heightened Realism - 현실세계와 같이 디자인하라'와 일맥 상통한다.





2. 좁은 화면을 효율적으로 활용하는 몇가지 기능들

     1) 상하좌우 화면 공간을 활용하라

     좁은 화면에서 유선과 같이 모든 요소(메뉴바, 연관된 서비스, 공지 등)를 한 페이지에 구현하는 것은 불가능한 일이다. 메뉴를 구분하고 해당 메뉴별로 메뉴를 부여하여 화면간의 이동을 지원하고 있다. 그러나 공지 같은 중요하지만 간단한 기능의 경우 아래 게임화면의 상단 뉴스 탭처럼 이용자가 현재의 화면에서 전환 없이 보고 닫을 수 있도록 지원한다.



     위룰(we rule)게임의 경우 중요한 고지는 게임화면 상단에 news 형식으로 작은 탭을 배치하였다. 이 경우 이용자는 게임을 하는 도중에도 최신 공지사항을 게임의 중단 없이 쉽게 숙지하고 해당 내용을 닫을 수 있다





     2) 페이지의 전환을 최소화 하라

     유선의 웹사이트와는 다르게 작은 화면에서 세로운 페이지로의 이동은 이용자의 입장에서는 이전 화면을 모두 가리게 되어 당황하게 되며, 또한 진행 중에 이전 페이지로의 이동을 어렵게 한다. 이 경우 ‘팝오버’와 ‘스플릿뷰’등의 기능을 사용하게 된다.
아래와 같이 간략한 데이터를 입력 받거나, 간략한 오류메시지를 출력 할 경우 별도의 새 창이 아는 팝오버를 사용한다.



 

     아래 아이패드의 이메일 전송 페이지와 같이 좀 더 큰 화면에서는 메일리스트 화면에서 메일쓰기 페이지가 이전 페이지를 배으로 모달뷰가 되어 작업을 진행하고, 작업이 완료되면 입력 화면이 사라지고 이전 페이지가 다시 활성화 되는 구조를 취하고 있다. 이 경우 이용자는 갑작스런 화면의 변화를 겪지 않게 되고 자연스러운 상호 화면전환을 경험하게 된다.

이러한 구성을 통하여 이용자는 주어진 미션을 완료하면 이전의 작업으로 돌아갈 수 있다는 확신과 함께,페이지를 찾기 위한 추가 작업을 하지 않아도 된다.


또한 아이패드와 같이 조금 더 큰 화면의 경우 ‘스플릿뷰’ 구성을 제공한다. 이를 통하여 이용자는 이용자가 페이지의 뎁스(depth)를 판단하면서 별도의 페이지 전환 없이 진행이 가능하다.

728x90
반응형

댓글0