★ 솔직리뷰 ~ 여행 맛집 전시 공연

 

    4) Alert

      경고창은 어플리케이션이나 기타 서비스를 이용하는 과정에서 사용자 주의를 요하는 경우 또는 추가 옵션이나 기능을 제공하고 이용자가 이를 인지하거나 선택 할 수 있도록 하는 기능이다. 

      기능적으로 해당 창은 화면의 중앙에 위치하도록 배열하며, 이용자가 이를 확인(해지)하기 전에는 현재 실행중인 응용 프로그램을 사용할 수 없게 구성한다. 

      또한 경고창의 내용은 가능하면 짧고 간결하게 제공되어야 한다. 오른쪽 하단의 이미지와 같이 긴 문장의 경고문은 피해야 한다. 통상 한줄에서 두줄로 간결하게 내용이 제공되어야 한다.























     5) Action Sheet

     액션 시트는 사용자가 실행한 작업과 관련하여 기능을 선택할 수 있도록 구성한 세트를 정의한다. 엑션 시트의 경우 아이폰과 아이패드에서 구현되는 방식과 디자인이 다르게 되어있다.

     아이폰(왼쪽 이미지)의 경우에는 어플리케이션의 하단에서 출력된다. 아이패드의 경우(오른쪽 이미지)에는 항상 팝오버 내에 표시된다. 이러한 액션시트 목적은 사용자가 작업을 완료할 수 있도록 적어도 두 개 이상의 버튼을 제공하게 된다. 또한 이중 하나의 버튼을 선택하면 해당 시트는 사라지고 선택한 액션이 진행된다.


     또한 삭제등의 파괴적인(destructive) 행동을 요구하는 경우에는 빨간 버튼을 적용하여 이용자에게 주의를 요할 수 있다.










     6) Modal View

     모달뷰는 사용자의 입력이나 현재 작업하고 있는 과정에서 사용자의 입력등을 요구하는 자체 기능을 정의한다. 또한 모달 뷰는 각각의 어플리케이션의 디자인에 어울리는 스타일로 보여줄 수 있다.

3. Controls

       컨트롤은 사용자가 정보를 얻기 위하여 행동하거나 여러 가지 작업을 진행하는 과정에서 제공되는 UI 요소들이다.


- Page indicator : 전체 페이지의 분량과 현재 페이지의 위치를 표시
 

- Progress View : 작업 또는 진행상황을 안내
  




- Scope Bar : 사용자가 검색의 범위를 지정할 수 있으며, 검색창과 함께 사용할 수 있다. 아래 검색범위가 제외된 모양을 search bar이라고 한다.

- Slider

- Switch 
 




- Segmented Control : 각각의 다른 뷰를 보여주는 버튼들이 나열된 하나의 세트를 의미한다.

1. 개요

        최근 각광받고 있는 스마트폰의 경우에는 통상적으로 두가지 방법으로 서비스 이용이 가능하다. 하나는 기존 PC기반의 인터넷 이용과 유사한 ‘브라우져’를 통한 접속과 다른 하나는 ‘어플리케이션’을 다운로드 받아 스마트폰에 설치 한 후 접속시 이를 구동하여 이용하는 ‘어플리케이션’ 방식의 서비스로 나누어 진다.

        이 장에서는 브라우져를 통하여 인터넷을 이용하는 ‘모바일 웹’방식에 대하여 디바이스별로 공부하도록 한다.
        특히 기존 PC기반의 브라우져 서비스와 저해상도의 스마트폰 브라우져서비스 그리고 고해상도의 태블릿PC의 브라우져서비스 비교를 통하여,이종 단말간 UI의 차이점을 이해하고. 동일한 서비스가 다양한 해상도의 디바이스에서 구현될 때 UI의 통합이 우선인지, 각 단말별 최적화가 우선되어야 하는지에 대하여 서비를 사용해 보고 이에 대하여 토론해 보도록 한다.




2. 이종 기기간의 UI가 통합된 경우


     1) 파란 : 웹과 태블릿PC의 UI 통합화

          파란닷컴(http://www.paran.com)의 경우 주된 Target을 PC가 아닌 새로운 디바이스 이용자로 잡고, 과감하게 웹상의 UI도 태블릿 PC에 최적화된 UI로 변경하였다. 아래의 이미지를 보면 스마트폰 상에서의 모바일 웹은 주요 서비스와 개인화 서비스 일부를 제외하고는 단순하게 메뉴 중심으로 UI를 구성하였다.

        좌로부터 파란의 스마트폰 모바일 웹, 아이패드 모바일웹, PC웹 화면

          그러나 태블릿PC에서 구현되는 화면과 PC웹상에서 구현되는 화면은 차이가 없는 것을 알 수 있다.
특히 파란의 PC웹 화면의 경우 다른 포털과는 다르게 이미지(thumbnail image)의 색상이나 크기, 각 서비스명의 위치, 행간등이 웹 전용이 아닌 태블렛 PC 사용자를 위하여 상당히 배려된 GUI를 볼 수 있다.
         이 경우 이용자의 입장에서는 PC웹에서 경험하고 학습한 내용을 그데로 태블렛 PC에서 사용할 수 있는 장점을 가지게 된다. 물론 반대의 경우에도 추가적인 학습 없이 사용할 수 있다. 그러나 이러할 경우 PC웹 시장에서는 경쟁사의 PC웹에 비하여 빈약한 구성을 보이게 되는 단점도 가지게 된다.

          이번 파란의 예시를 보면서 아래와 같은 부분에 대하여 분석하고 토론하도록 한다.

1. 마우스를 사용하는 PC웹과 손가락을 사용하는 태블릿 PC의 GUI구조는 상당이 상이하다. 파란의 사이트 디자인에서 태블릿PC 이용자를 고려한 부분을 찾아보자. (행간, 메뉴구성 등)
2. 1과 같은 고려는 그래픽 디자인 부분에서도 나타난다. 이러한 부분을 찾아보고 논의해 보자. (아이콘 색상 크기 배열 등, 썸네일(Thumb nail) 등..



     2) 네이버 : 웹의 화면을 모바일로사용

      네이버(http://www.naver.com)의 경우 모바일 디바이스를 위한 별도의 웹페이지를 구성하지는 않고 현재의 PC웹 페이지를 그대로 모바일에서도 제공하고 있다. 이러한 방식은 국내 대부분의 포털에서 운영하는 방식이기도 하다. (물론 태블릿 PC등 신종기기의 보급이 확대되면 별도의 UI가 적용된 사이트가 나올 것으로 예상된다.)
      이 경우 태블릿 PC를 이용하는 이용자의 입장에서는 웹상에서 경험하고 학습해 왔던 내용을 기반으로 추가적인 학습 없이도 뉴 디바이스에서도 사용할 수 있다는 장점을 가지고 있다. 또한 서비스 제공자의 입장에서도 추가적인 비용 없이 서비스를 유지할 수 있는 사업상의 장점도 존재한다.
      그러나 마우스 커서를 기반으로 설계된 화면을 태블릿 PC에서 이용하기에는 상황에 따라 불편이 따르게 된다.

 2. 기기별로 독자적인 UI를 구성하는 경우

     (1) 야후 : 각각의 디바이스에 최적화된 UI 구축

      야후닷컴(http://www.yahoo.com)의 경우 이종기기간 UI 통일보다는 각각의 device에 최적화된 화면을 구성하여 보여준다.

     이전 페이지의 이미지와 같이 야후 닷컴의 경우에는 스마트폰, PC 웹, 태블릿  PC에서 구현되는 화면의 UI가 모두 상이하게 구성되어 있다. 이 경우 디바이스별 이용행태를 반영하여 각각의 디바이스의 특성에 맞춘 최적화된 UI를 제공할 수 있게 된다. 다만 디바이스별 상이한 UI와 서비스의 제공은 이용자의 입장에서 새로운 디바이스에서 접속할 때마다 새롭게 학습을 해야 한다는 부담감을 가지게 될 수 있다.

     또한 운영의 입장에서는 각 디바이스별로 개발 및 유지보수가 필요하며 페이지 운영(편집)에서도 추가적인 인력이 투입되는 문제도 고려되어야 한다.

 


개요

스마트폰의 경우 웹서비스와는 다르게 좁은 화면과 제약된 기능을 고려하여 서비스를 설계하여야 한다. 특히 키보드나 별도의 스타일러스펜을 이용하지 않고 손가락으로 조작하는 정전식 터치폰이 보편화 되면서, 좁은 화면을 효율적으로 사용하는 설계와 인터렉티비티(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)를 판단하면서 별도의 페이지 전환 없이 진행이 가능하다.