(1/3) 뉴미디어 UI의 개념 - Bar : The Status Bar, Navigation Bar, Tool Bar, Tap Bar

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)들이 효율적으로 배치된 예시이다. 이러한 사례들을 찾아 논의해 보도록 한다.