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

          (4) 개인화 

            불특정 다수를 대상으로 배포되는 기존의 미디어와 다르게 뉴미디어의 경우에는 이용자 개개인에 맞추어 페이지가 구성되거나 서비스가 제공된다. 뉴미디어 디자인의 경우 이와 같은 특장점을 고려하여 디자인에 반영하여야 한다.
아래 네이버어세 제공하는 ‘네이버 me’서비스의 경우 개인화된 서비스를 중심으로 페이지를 구성하여 제공한다.이를 통하여 초기페이지에서 개인화된 서비스에 대한 접근성을 높이고 이용자의 만족도를 극대화 할 수 있다.




            아래 이미지는 IP-TV에서 개인화 기능에 대한 예시이다.이용자가 방송을 시청하면서 자주보는 채널이나 콘텐츠를 등록할 수 있으며, 초기 화면에서 해당 목록에 바로 접속이 가능하게 구성되어 있다. 이러한 특징은 기존의 올드 미디어에서는 구현할 수 없는 기능이며, 많이 사용되지는 않지만 뉴 미디어에 대한 접근성이 높아지고, 이용자가 증가하고 있는 상황에서 이러한 기능들을 이용자에게 어떻게 보여주는가에 대한 고민은 디자이너의 중요한 역할이 되고 있다.




            또한 디바이스에 따라 단순하게 제공되는 화면을 넘어 다양한 입력도구를 통한 통합적인 UI를 제공하기도 한다.아래의 이미지는 방송 청취중에 리모컨을 통하여 해당 방송을 북마크(즐겨찾기)하는 기능을 설명하고 있다.해당 기능의 구현에 있어서도 이용자에게 보여주는 화면과 입력도구(리모컨)와의 모양 및 색상(원형/녹색)의 통일화로 이용자가 학습이 가능하게 구성되어 있다.




          (5) 다양한 고정 해상도

            최근 다양한 LCD사이즈와 해상도의 단말기가 출시되면서 각각의 단말기에 최적화된 서비스 개발이 필요하게 되었다. 또한 기존 PC 기반 서비스와 다르게 이용자는 단말의 해상도 조정이 불가능하다.이 경우 디자이너의 입장에서는 각 단말별로 최적화된 해상도를 고려하여 디자인 설계를 하여야 하며, 또한 범용적으로 이용이 가능하도록 설계를 하여야 한다.

            아래의 이미지는 과거부터 최근 출시된 단말기의 해상도를 정의하고 있다. 800x480의 경우에는 가로 800개 세로 480개의 pixel이 지원되며 총 384,000개의 pixel로 구성되어 있음을 의미한다. 만약 해당 해상도로 개발된 작업물의 경우 이보다 높거나 낮은 해상도에서 구현 될 경우 선명한 서비스를 제공하지 못하거나, 심지어 서비스 제공이 불가능 할 수 있다.




             이번에는 액정크기에 대하여 정의해 보도록 하자, 아래 3개의 단말기는 오른쪽부터 HTC의 디자이어HD, 삼성 갤럭시S, 구글 넥서스원 단말기 이미지다. 각각 4.3 / 4.0 / 3.7인치의 다양한 크기의 액정을 탑제 하였으나, 모두 공히 800x480의 해상도를 지원하고 있다. 이 경우에는 동일한 해상도로 개발된 서비스는 액정의 크기와 상관없이 서비스 제공이 가능하다는 것을 의미한다. 반대로 액정의 크기가 같아도 해상도가 다르다면, 서비스 제공에 문제가 발생할 수 있다는 것을 의미하기도 한다.




 

오른쪽의 이미지는 아이패드(1024x768)에서 구현된 네이버 웹툰 어플리케이션의 구동 화면이다. 이 경우 해당 해상도에 최적화된 별도의 어플리케이션을 제공하는 것이 아니라, 기존 HVGA(480x320)에 최적화된 어플리케이션을 확대하여 제공하고 있다.

이에 저해상도에 최적화된 이미지나 글씨들이 좋은 해상도로 출력되지 못하고 있는 것을 볼 수 있다. 

 

 

 

 

 

 

 

 

  

다음에서 보는 이미지는 아이폰(480x320)와 아이패드(1024x768)에서 구현된 SNS게임 We Rule의 화면이다.해당 게임의 경우 저 해상도용 어플리케이션과 고해상도용 어플리케이션을 구분하여 개발하여, 각각의 단말에 최적화된 어플리케이션을 이용자가 다운로드 받아 이용할 수 있도록 제작하였다. 또한 각각의 해상도에 맞도록 GUI를 수정하여 각 단말에서 이용자가 최적화된 경험을 할 수 있도록 지원하고 있다.



          (6) 모든 방향의 지원

             스마트폰 및 태블릿 PC의 경우 기존의 디바이스와는 다르게 가로-세로화면을 모두 지원한다. 이는 디자이너의 입장에서 이용자의 선택에 따라 다양한 화면을 제공해야 함을 의미한다. 1)가로와 세로화면을 동일하게 구성할 것인가-폭만을 조절하여-아니면 2) 가로와 세로화면을 다르게 구성할 것인지. 그렇다면 이 경우에도 단순하게 나열되는 콘텐츠의 개수 또는 기본요소의 가감으로 변화를 줄 지, 스플릿 뷰를 이용하여 추가적인 기능을 노출 할지 등에 대한 UI적인 결정이 필요하다. 

           아래 이메일 본문기능의 경우 세로화면에서는 이메일의 본문만을 보여주지만, 가로화면에서는 스플릿 뷰를 통하여 화면 왼쪽에 메일 리스트가 제공되는 UI를 취하고 있다.


 해당 내용은 ‘3. User Interface의 디자인 사례’에서 상세하게 다루도록 한다.

 

 

 

1. 개요

     최근 스마트폰과 태블릿 PC의 보급이 급속화 되면서, 해당 디바이스에 대한 UI의 중요성이 대두되고 있다. 해당 디바이스의 경우 기존 PC에서 사용하는 방식과 큰 차이를 느끼지 못하지만, 해당 기기에 최적화된 차별화된 UI 요소들이 지원되고 있다.
여기에서는 스마트폰과과 태블릿PC에서 구현되는 주요한 UI구성에 대하여 학습하고, 해당 요소들이 어떠한 개념을 가지고 서비스에 적용되는지를 학습하도록 한다.



2. Bar

     1) The Status Bar

       상태바는 해당기기의의 중요한 정보 및 상태를 보여주는 바이다. 아래와 같이 전화 및 무선접속 상태, 베터리 잔량, 현재 시간 등 해당 기기를 사용하면서 이용자가　꼭 알아야 하는 중요한 정보를 제공하는 부분이다.
       아래 이미지는 아이패드와 아이폰, 옵티머스의 상태바를 보여준다. 안드로이드 개열의 경우에는 기본정보 이외에서 이용자가 항상 호출을 필요료 하는 어플리케이션 등을 보여주어 어느 화면에서도 즉시 호출이 가능하도록 지원하고 있다. 또한 GUI 적으로는 상당에 작게 위치하여 공간을 크게 차지하지 않으며, 시각적으로도 돋보이지 않게 처리하여 다른 어플리케이션을 구동할 때 사용자의 주의를 끌지 않게 디자인 되었다.

        아래 단말기별 상태바를 보자, 공통적으로는 단말기의 통신상태와 시간 그리고 베터리의 전여량이 제공되고 있다. 추가적으로 아이패드의 경우 가로세로 전환에 대한 잠금장치 설정여부가 제공되고 있으며, 아이폰의 경우에는 접속한 통산사표시 및 알람 설정여부가 추가적을 제공되고 있다. 또한 안드로이드 계열의 경우 추가적으로 현재 구동되고 있는 주요 어플리케이션에 대한 표시가 이루어지고 있다. (바 좌측) 화면에 나오는 3가지는 구동중인 어플리케이션 제어, 진동전환, 데이터 사용량 알림 어플리케이션인데, 이용자의 입장에서는 상시 구동되고 지속적으로 이용이 필요한 어플리케이션 들이다.

      이러한 주요한 목적을 가지고 제공되는 만큼 어플리케이션 또는 브라우져 구동시 상태바는 가능하면 숨기지 않고 제공하는 것이 원칙이다. 만약 어플리케이션 구동시 상태바가 숨겨진다면, 사용중 베터리의 잔여량이 얼마남지(충전을 필요로 한다는 사실) 않았다거나, 전화 수신에 문제가 발생한 상황(전화를 받을 수 없거나)이에서 이용자가 해당 상황을 알지 못한다는 것은 치명적인 문제를 발생시킬 수 있다. 다만 게임과 같이 풀스크린 화면 제공이 필요한 경우에는 예외로 한다.

      상태바를 제공하지 않고 있는 두 가지 예시를 보자, 해당 어플리케이션을 구동하는 동안 이용자에게 어떠한 불편을 제공하는지 이해할 수 있을 것이다. 그러나 통상적으로 전체화면을 사용하는 게임의 경우에는 예외로 처리한다.

     2) Navigation Bar

     네비게이션 바는 보통 현재 구현하고 있는 어플리케이션 등의 화면 제목출력과 콘트롤 할 수 있는 주요 버튼을 보여준다.오른쪽 2개의 바를 보면 UI상의 공통점을 찾을 수 있다.

     해당 바의 위치는 상태바 하단, 응용 프로그램 상단에 위치한다. 또한 상태바 중심에는 해당 어플리케이션의 현재 메뉴명을 표시한다. 또한 제목의 왼쪽에는 뒤로가기(back button)버튼을 제공한다. 해당 버튼에는 이전페이지의 제목을 표시한다. 위 두가지 기능의 경우에는 이용자가 새로운 페이지로 이동할 때마다, 새로운 페이지의 제목과 이동전 페이지의 제목으로 변경되어야 한다.
만약 어플리케이션의 특성상 많은 기능을 제공하여야 할 경우에는 해당 기능보다는 툴바(Tool Bar)을 사용하여야 한다.

     그러나 네비게이션  바는 아이패드 어플리케이션에서는 많이 사용되지 않는다. 이는 해당바의 주된 목적이 좁은 화면에서 이전 페이지와의 이동 및 위치한 페이지에서 제어를 용이하게 하기 위해 제공되는 이유이다. 즉 스마트폰에 비하여 상대적으로 해상도가 높은 태블릿 PC 계열에서는 스플릿 뷰 등을 통하여 한 화면에 제공이 가능하기 때문이다.




      위 화면은 아이폰의 메일어플리케이션이다. 좁은 화면으로 인하여 하위메뉴 이동시 페이지가 변경되고 있다. 또한 이에 맞추어 네비게이션 바도 변경되고 있는 것을 알 수 있다. 그러나 아래 아이패드의 경우 팝오버와 스플릿 뷰를 이용하여 페이지 변환 없이 서비스 제공이 가능하다.

     3) Tool Bar

      툴바는 현제페이지에서 개체와 관련된 작업을 수행하는데 필요한(자주 사용되어지는) 컨트롤이 포함되어 있는 바를 정의한다. 해당 툴바는 화면 하단 또는 상단에 모두 사용할 수 있다.

     툴바의 경우 좁은 공간에 많은 아이콘이 제공되는 경우가 많다. 이 경우 너무 많은 아이콘을 밀접하게 배열하였을 경우 오작동(옆의 다른 아이콘을 클릭하는 등)을 유발할 수 있다. 이에 각각의 아이콘간 터치 영역은 최소한 44x44pixel을 유지하도록 한다. 또한 툴바에서 제동되는 아이콘은 통일성을 유지하도록 한다.



     마지막으로 툴바는 현재의 페이지에서 이용할 수 있는 작업의 집합이다.(회전, 지우기, 검색, 이전페이지, 다음페이지, 상위이동 등) 만약 해당 페이지에서 다른 모드간의 전환이 필요하다면 ‘툴바’가 아닌 ‘탭바’를 사용하여야 한다.




     4) Tap Bar

      탭바의 경우 유선웹에서의 메뉴바를 생각하면 이해가 쉽다. 해당 어플리케이션이 지원하는 메인(주요)카테고리를 제공하며, 해당 카테고리간(또는 하위메뉴)의 이동을 한번에 지원하기 때문이다.

     왼쪽 시계에서 제공되는 탭바의 경우 하단에 위치하여 어플리케이션에서 제공하는 4가지 주요 기능(세계시간, 알람, 스톱워치, 타이머)간의 접근을 원활화게 지원한다. 

      공간의 활용도 차원에서는 아이폰을 기준으로 탭바 영역에 한번에 5개 이내의 버튼수를 권장(이유는 툴바에서 설명한 내용과 동일하다.)하고 있으며, 아이콘을 설명하는 텍스트를 삽입한다. 또한 선택된 아이콘(메뉴)의 경우에는 해당 아이콘의 배경 및 이미지를 밝게 처리한다.  

 

      오른족의 이미지와 같이 아이폰에서 5개 이상의 응용프로그램(메뉴)이 있을 경우에는 4개를 표시하고 마지막을 추가(more)아이콘으로 설정할 수 있다.
다만 아이패드의 경우 7개 이내로 개수를 제한하고 있으며, more기능은 사용하지 않는다.

      아래의 이미지는 지금까지 학습한 다양한 바(bar)들이 효율적으로 배치된 예시이다. 이러한 사례들을 찾아 논의해 보도록 한다.

    1) Popover

     팝오버는 사용자가 어플리케이션을 이용하는 과정에서 네비게이션 바의 컨트롤 버튼을 클릭하거나 화면에서 지정된 링크를 클릭 하였을 때 기존 화면위에 오버되어 출력되는 기능이다. 해당 기능은 아이패드 등 태블릿 PC에서만 지원되며, 기존 스마트 폰 사용시 반복적으로 화면을 오고가는 불편을 해결해 주는 기능이다.

     오른쪽 이미지는 일정을 입력하는 과정에서 반복기능을 호출하는 화면이다. 배경에 일정이 출력되어 있는 상태에서, 어떠한 주기로 일정을 반복할까에 대한 옵션을 팝오버로 출력해 주고 있다. 이러한 기능을 통하여 메인화면이 유지된 상태에서 각각의 옵션을 쉽게 호출하고 닫을 수 있는 UI를 제공한다. 또한 팝오버 화면에서는 아래와 같이 테이블, 이미지, 지도, 텍스트, 웹 등의 다양한 구성물을 출력해 준다. 또한 팝오버는 ‘닫기’ 버튼을 지원하지 않으며, 더 이상 필요가 없을 경우(위 일정예시의 경우 이용자가 반복옵션중 하나를 선택하면 자동으로 닫히게 된다.) 자동으로 닫을 수 있도록 설계되어야 한다.




     팝오버의 주요한 특징은 아래와 같다.

     분할된 화면으로 되어잇는 어플리케이션이 세로모드로 전환되었을 경우 가로모드의 왼쪽 부분을 팝오버로 처리해 준다. 아래 메일서비스와 같이 가로모드에서는 목록과 본문을 동시에 출력하나, 세로모드의 경우에는 목록을 팝오버 처리한다.

또한 팝오버는 화살표를 가지고 있으며, 해당 화살표가 팝오버를 출력시킨 요소(버튼, 아이콘 등)를 가리켜야 한다. 이를 통하여 사람들은 팝오버가 어디서 왔는지 그리고 어떤 작업 도는 어떤 객체와 연관되는지에 대한 도움을 제공한다.

팝오버는 한 화면에서 동시에 하나만 제공이 가능하다. 또한 팝오버의 사이즈는 최소 너비 320point, 최대 600point이내에서 구현되어야 한다. 다만 팝오버의 길이에는 제한이 없다.































      2) Split View

     스플릿 뷰(Split View)는 용어 그대로 화면을 좌우로 분할하려 두 개의 화면으로 구성한 것을 의미한다.
     통상적으로 왼쪽이 영역에는 1) 메뉴 2) 목록 등의 고정된 내용을 출력해 주고, 오른쪽에는 왼쪽영역에선 선택된 대용에 따라 세부내용 또는 하위 정보/메뉴를 보여준다. 또한 화면 분할 차원에서는 통상적으로 왼쪽영역이 오른쪽 영역보다는 폭이 좁으며 간략하고 정형화된 모양으로 구성된다. 그리고 왼쪽화면의 내용은 정보를 지속적으로 보여주며 해당 정보의 선택 여부에 따라 오른쪽 화면의 내용만을 변화시킨다. 또한 이용자는 각각의 패널 크기를 조정할 수 없다.




 

    3) Table View

      테이블 뷰는 단일 열 목록에서 여러 행으로 데이터를 제공하는 기능을 정의한다.

      테이블 뷰는 아래와 같이 다양한 조합으로 제공이 가능하며, 구분자를 포함한 그룹구성 또는 구분자 없는 그룹목록 등으로 구성이 가능하다. 또한 하나의 뷰 안에서도 그룹별 다양한 구성이 가능하다.