티스토리 뷰

스타일가이드 제작하기

스타일가이드 제작

OS별 인터페이스 규격에 따른 스타일가이드를 제작할 수 있다.

모바일 운영 체제(operating system)별 UI 특성 이해

모바일 OS란 모바일 장치나 정보 기기를 제어하는 운영 체제를 말하는 것으로, 대표적으 로 높은 개방성을 특징으로 하는 구글의 안드로이드(android)와 강력한 보완성을 특징으 로 하는 애플의 iOS가 있다. 타깃의 니즈에 부합하는 앱 디자인을 하기 위해서는 사용자 에게 제공하려는 콘텐츠를 어떤 형태로 구현할 것인지가 중요한 사항이 되므로, OS별 모 바일 화면 레이아웃 구성요소의 차이점을 고려할 수 있어야 한다. 최근 사용자들이 이용 하는 앱들은 OS에 기본 탑재된 네이티브 앱(native app)보다는 대부분이 OS에서 다운로 드 받아 사용하는 서드파티 앱(third party app)이 대부분이다. 이에 따라, 대부분 앱이 독 자적인 브랜드 아이덴티티를 확립하여 더욱 향상된 GUI 디자인을 구현하고 있으며, OS별 규격에 맞추기보다는 디자이너가 GUI 구성요소를 변형·응용하여 OS와 관계없이 같은 레 이아웃을 선보이고 있다. 따라서 UX/UI 디자이너들은 GUI 구성요소에 대해 명확히 이해 하여 각기 다른 기기 환경에서도 대응할 수 있는 스타일가이드를 구축할 수 있어야 한다.

모바일 OS별 화면 구성의 차이점

화면 구성에 있어서 OS별 차이점은 페이지 탭 레이아웃, 버튼 등 UI 구성요소의 위치와 용어의 차이 등을 들 수 있다. 특히, 앱에서 정보를 안내하는 것을 지원하는 네비게이션 바 가능은 각각 탭 바(tab bar), 네비게이션 바(navigation bar), 앱 바(app bar) 등 여러 가 지 용어로 사용되고 있으며, 앱 바(app bar)와 탭 바(tab bar)가 네비게이션 기능을 구현하 는 경우도 있다. 안드로이드와 iOS OS에서 제공하는 기본 GUI의 구성요소는 크게 바(bar), 콘텐츠 뷰(contents view), 콘트롤(controls), 임시 뷰(temporary view)로 나누어 볼 수 있다.

iOS 및 안드로이드 GUI 구성요소 및 종류
  • 바(bar)
    • 현재 사용자가 어느 화면에 있는지에 대한 정황(context)을 알려주고, 사용자가 다른 화면으로 이동하거나 다른 작업을 수행하고 조정할 수 있도록 콘트롤(control) 요소를 제공하기도 한다. iOS에서 제공하는 바의 종류에는 상태 바(status bar), 네비게이션 바(navigation bar), 툴 바(tool bar), 탭 바(tab bar) 등이 있다.
  • 콘텐츠 뷰(contents view)
    • 콘텐츠 뷰는 해당 앱의 콘텐츠 및 특화된 콘텐츠를 보여주는 화면의 부분이며, 사용자 가 스크롤하거나, 재배치, 추가, 제거하는 등 사용자 행동이 발생한다.
  • 콘트롤(control)
    • 콘트롤은 액션을 수행하거나 정보를 표시하는 것으로 사용자가 조정할 수 있는 UI 구 성요소이다. 상세 정보를 확인할 수 있는 버튼이나 스와이핑(swiping)을 통해 페이지 를 넘겨볼 때 사용자 위치를 보여주는 페이지 콘트롤, 최근 상태를 업데이트하는 콘트 롤, 음량이나 화면 밝기 등을 조절할 때 사용되는 슬라이더(slider), 날짜나 언어 선택 시 사용하는 픽커(picker) 등이 해당한다.
  • 임시 뷰(temporary view)
    • 템포러리 뷰는 사용자에게 중요한 정보를 알려주거나 추가적인 선택, 또는 선택 가능 한 대안을 보여주기 위해 일시적으로 나타나는 것으로 주로 팝업 형태로 나타나는 경 고창이나 알림 창 등을 말한다.
안드로이드와 iOS GUI 구성요소 차이점
  • 네비게이션 바(navigation bar)
    • 안드로이드와 iOS UI 구성요소에서 큰 차이를 보이는 것 중 하나는 바로 바(bar) 부 분으로, 상태 바(Status bar)의 바로 하단에 위치하며 정보를 안내하는 것을 지원하는 기능을 수행한다. iOS에서는 이를, 네비게이션 바(navigation bar)로 부르며 상단에 배 치하는 반면에 안드로이드에서는 액션 바(action bar)라는 용어를 사용한다. 제공하는 기능에서도 차이점이 있는데, iOS 네비게이션 바는 사용자가 상위, 하위 뷰로 이동할 수 있게 안내하는 역할을 수행하며 화면 이동시에도 사용자가 혼란을 겪지 않도록 일 관성 있는 배치를 지향한다. 안드로이드 액션 바(action bar)에는 주로 사용자 액션 실행이 가능한 버튼이 배치된다. 아이콘 및 정보 문구가 제공되어 사용자가 액션을 실 행할 경우 선택 가능한 기능들이 제공되는데, 되돌아가기 버튼(back button)이나, 혹 은 정보 더 보기(more) 버튼 등을 제공하여 사용자의 작업을 지원한다.
  • 탭 바(tab bar)
    • 탭 바를 통한 메뉴 확장 기능을 제공하는 방식에 있어서 안드로이드와 iOS는 서로 분 명한 차이를 보인다. 아래 그림과 같이 안드로이드는 탭 바를 상단에 배치하는 형태의 GUI를 유지하고 있으며, 전통적으로 하단 네비게이션 바 영역에 메뉴 버튼, 홈 버튼, 히스토리 백(history back) 버튼을 상시 고정하고 있다. 또 안드로이드 탭 바는 콘텐츠 탐색 기능뿐 아니라 네비게이션 역할을 수행하기도 한다. 안드로이드는 탭 영역에서 좌우 스크롤링과 콘텐츠 영역에서 플리킹, 좌우 스크롤링 탭(scrollable tabs) 기능 제공 을 통해 사용자에게 제어할 수 있도록 한다.
  • 기타
    • OS별화면을기준으로보이는GUI 구성요소의차이가큰네비게이션바와탭바외 에, 콘텐츠 뷰와, 콘트롤, 템포러리 뷰에서는 GUI 디자인의 특징과 기능에서 큰 차이 를 보이지 않는다. 콘텐츠 뷰는 용어에서 안드로이드의 경우, 리스트뷰(list view), iOS의 경우 테이블뷰(Table view)라고 부른다. 콘트롤(control) 요소에서는 안드로이 드의 경우, 토글 버튼(toggle button), iOS의 경우 스위치(Switch)라는 용어를 사용하 며 임시 뷰(temporary view)의 구성에서도 서로 유사한 형식을 사용한다. 이러한 GUI 구성 요소는 사용자가 한눈에 기능의 사용 방법을 예측할 수 있도록 단순하고 명확하 게 디자인되어야 하며, 특히 컬러의 속성을 적극적으로 활용할 수 있어야 한다. 예를 들어 콘트롤(control) 버튼의 경우 ON, OFF의 두 가지 옵션에 컬러를 적용할 때 빨강 과 초록 등의 서로 대비되는 색상을 사용함으로써 사용자는 두 개의 상호배타적인 상 태를 쉽게 인지할 수 있다. 이외에도 GUI 요소에 대해 컬러의 투명성이나, 콘텐츠 간 의 구분을 위한 컬러의 적용, 아이덴티티의 표현 등 컬러의 다양한 효과를 적극적으로 활용할 수 있는 디자이너의 능력이 요구된다고 할 수 있다.

OS별 UI/UX 특성 이해를 바탕으로 한 스타일가이드 제작

특정 OS 기반의 앱을 개발할 것인지, 아니면 안드로이드와 iOS 두 가지 버전을 별도로 제 작할 것인지 또는 OS별 규격에 맞추지 않고 디자이너가 GUI 구성요소를 변형·응용한 디 자인을 할 것이지 결정한다.

타깃 사용자 그룹에 제공해야 할 UX의 핵심 요소 선정

GUI 디자인은 UI의 효율성이나 편의성을 제공하는 것뿐만 아니라, 디자인의 느낌을 감성 적으로 전달하는 중요한 디자인의 과정이라는 것을 염두에 두어야 한다. UI 디자인을 통 해 제공할 수 있는 UX 요소에는 유용성, 사용성, 접근성, 일관성, 심미성, 검색성, 신뢰성 등이 있다. 이러한 UX 요소들을 균형 있게 제공하는 것을 목표로 해야 한다. 하지만, 타 깃의 특성 및 니즈를 고려하여 그들에게 우선시되어야 하는 요소가 무엇인지 파악할 수 있어야 한다.

타깃에게 전달할 GUI 디자인 스타일 방향 결정

앞선, GUI 스타일가이드 구성요소의 이해 및 OS별 GUI 디자인 구성요소의 차이점 이해를 토대로 하여 전달하고자 하는 스타일을 선정한다. 예를 들어 간결하고 깔끔한, 화려하고 장식적인 등의 디자인 분위기를 결정하여 일관되게 스타일가이드에 반영해야 한다.

댓글
댓글쓰기 폼
공지사항
Total
7,598
Today
28
Yesterday
58
링크
«   2018/08   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
글 보관함