UI 정보구조 설계하기

UI 정보 구조 설계하기

1. 정보 설계 구성

• 수립된 UI/UX 전략을 바탕으로 스마트 문화 앱 UI 디자인 개발에 필요한 정보 구조를 설계할 수 있다.

1. 정보 설계

정보 설계의 목적은 사용자와 앱의 상호작용을 원활하게 하여 사용자가 원하는 정보를 쉽 고 빠르게 찾을 수 있도록 하는 데 있다. 사용자 요구 사항으로부터 도출된 콘텐츠와 기 능 구조를 바탕으로 하여 UI 구조와 내비게이션(navigation), 레이블링(labeling) 체계를 정 립하는 과정이다. 1976년 정보 설계(Information Architecture, IA)라는 개념을 처음으로 언 급한 리처드 사울 워먼(Richard Saul Worman)은 정보 설계의 목적을 “데이터를 사람들이 이해할 수 있는 정보로 바꾸는 것.”이라고 하였다.

1-1. 정보 설계의 정의

정보 설계가인 루이스 로젠펠드(Louis Rosenfeld)와 피터 모빌(Peter Morville)은 정보 설계 의 핵심을 다음 세 가지로 정의한다.

1. 사용자(user)

사용자의 작업, 니즈, 정보 탐색 행동과 경험을 중심으로 하여 사용성과 검색성을 향 상할 수 있게 콘텐츠를 분류하고 조직화하는 것

1. 콘텐츠(contents)

사용자가 이용하는 콘텐츠의 크기와 형태, 구조, 조직을 말하며, 이러한 콘텐츠에 사용 자가 직관적으로 접근하고 업무 처리가 용이하도록 문서 형식과 분류, 앱의 구조, 콘 텐츠 관리, 내비게이션, 레이블 작성 등 정보 공간을 설계하는 것

1. 맥락(context)

사용자의 환경에 대한 고려로서 사용자의 요구 반영이 필요하며, 이와 함께 정보 제공 자의 환경으로 비즈니스적 목표와 요구, 기술, 제약 조건에 대해 고려하는 것

1-2. 정보 설계(IA)의 구성 요소

1. 조직화 시스템(organization system)

유사하거나 관련성이 있는 정보들을 몇 개로 분류하고 범주화하여 집단화(grouping)하 는 방식으로 정보의 체계를 정립하는 것을 말한다. 앱에서 제공하는 수많은 콘텐츠들 을 자료의 성격에 따라 그룹핑하여 사용자가 직관적으로 정보를 찾을 수 있게 한다.

가. 계층 구조

대부분의 웹 사이트와 모바일 웹에서 가장 많이 사용되는 구조로써 가장 효과적인 구조로 알려져 있다. 최상위 페이지에서 하위 페이지는 특정 주제 아래 계층을 가 지고 있으며, 논리적인 연결 관계로 구성되어 있어 사용자에게 익숙한 구조이다. 또 정보 구조 설계자의 입장에서도 정보를 잘 조직화할 수 있고 간단하면서도 보 편적인 구조이기도 하다. 하지만, 페이지 간에 정보의 분류가 잘못 이루어져 있을 경우 앱을 이용하는 사용자가 정보를 찾는 과정에서 어려움을 겪을 수 있으며, 사 용자가 길을 잃는 현상이 발생할 수 있다. 따라서 계층 구조를 설계할 때는 두 가 지 사항에 대해 유의해야 한다. 첫째, 콘텐츠 분류 시 상호 배타적으로 배제와 포 함에 대한 기준을 가지고 분리하여 균형을 유지하도록 하는 것이다. 그리고 둘째, 계층의 구조에서 폭과 깊이에 균형이 맞아야 하는 것이다. 계층의 폭이 넓고 계층 단계가 얕으면 많은 옵션으로 인해 사용자가 혼란을 느낄 수 있기 때문에 폭은 7 개 내외, 깊이는 4~5단계 이하로 설계한다

1. 레이블링 시스템(labeling system)

콘텐츠와 기능에 대표성을 부여할 수 있는 명확하고 친밀감이 있으며, 일관된 이름을 지어 주는 작업으로 사용자가 원하는 것을 쉽게 찾을 수 있도록 보편 타당성이 있어 야 한다. 그 기준은 서비스 제공자가 아닌, 실제 앱을 이용하는 사용자의 생각과 언어 를 중심으로 레이블링 시스템을 구축해야 한다

1. 내비게이션 시스템(navigation system)

사용자가 원하는 정보를 빠르고 정확하게 검색하고, 정보와 정보 사이의 이동을 원활 하게 돕기 위해 제공하는 것으로 검색 기능, 사용자 위치 정보, 리스트 메뉴, 탭 메뉴, 토글 메뉴, 사이트맵 등의 체계를 말한다. 모바일 앱의 UX에 있어서 내비게이션은 사 용자가 앱에서 태스크를 쉽게 달성할 수 있도록 도와야 하는 것으로서 사용자와 콘텐 츠의 특성을 고려하여 사용 편의성을 제공해야 한다.

1-3. 정보 설계(IA)의 프로세스

1. 사용자의 목적과 콘텍스트, 콘텐츠 및 비즈니스 목적과 이슈에 대한 이해

사용자 리서치 결과를 통해 도출된 사용자의 요구 사항 및 사용자에 대한 충분한 이 해가 전제되어야 한다.

1. 내비게이션 시스템, 레이블링 시스템, 정보의 분류와 조직화

사용자의 요구 사항을 기반으로 사용자의 이용 목적에 따라 정보 체계를 구조화하고 내비게이션, 레이블링 등을 디자인한다.

2. OS 플랫폼 특성 파악

• 운영체제(OS)에 따른 UX의 특성을 파악하여 정보 구조를 설계할 수 있다.

1. 모바일 UX의 특성 이해

정보 구조 설계 과정에 있어서 실제 개발할 UI의 구조도를 작성하기 전에 고려해야 할 사 항은 모바일 소프트웨어의 UI/UX에 대한 특성 이해와 모바일의 UI/UX 디자인 원칙, OS 플 랫폼별 모바일 앱의 UI/UX 디자인 가이드라인에 대한 이해이다.

1-1. 모바일 환경의 UX

모바일 환경에 적합한 사용자 경험 디자인을 하기 위해서는 사용자가 앱을 이용하여 달성 하고자 하는 목적과 그에 따른 사용자의 행동 패턴과 니즈를 발견하여, 그것을 UX 디자 인에 담아내는 디자인 과정이 요구된다. 모바일에서 사용자 경험이 유독 강조되는 이유는 첫째, 작은 화면에서 서비스를 이용해야 한다는 점과, 모바일 기기의 특성상 언제 어디서 든 휴대성이 확보되기 때문에 사용자가 원하는 정보만을 직관적으로 신속하게 보여주고 반응해야 한다는 것에 있다. 더 나아가 불특정 다수를 대상으로 사용자 경험을 표준화하 여 반영해야 한다는 데 있다. 이러한 이유로 기존 PC 기반에서의 UX와 모바일에서의 UX 개념에는 많은 차이가 발생할 수밖에 없는 것이다. 현재는 모바일 앱 시장의 수요 증가 및 보급 확대로 인해 모바일을 중심으로 UX 디자인의 중요성이 증대되고 있는 추세이므 로 기본적인 특성에 대한 이해가 필요하다.

1-2. 모바일 환경의 UI/UX 디자인 원칙

모바일 환경에 적합한 UI/UX 디자인을 하기 위해서는 사용자의 이용 측면과 기기와 환경 의 특성, 그리고 인터랙션하는 방식에 대한 이해를 바탕으로 다음의 UX 디자인의 원칙이 필요하다

1. 사용자의 인지적 관점에서 이해할 수 있는 디자인
2. 사용하기 쉬운 인터페이스
3. 원활한 상호작용(interaction)
4. 간결하고 매력적인 디자인
5. 유용한 기능과 콘텐츠
6. 사용자 행동과 상황, 반응을 고려한 직관적인 디자인
7. 접근성의 극대화
8. 사용자 실수 방지 및 복구 가능한 디자인
9. 표준을 준수한 일관된 디자인

1-3. 모바일 앱(App)의 유형

2014년 4월, (주)IBM에서는 ‘IBM 소프트웨어 기술 백서’ 발간을 통하여 모바일 앱의 유 형을 3가지로 분류하고 각각의 장단점을 분석하여 다음과 같이 제시하였다.

1. 모바일웹 앱(mobile web app)

모바일웹 앱의 유형은 모바일 애플리케이션처럼 보이는 웹사이트를 말한다. 모바일에 최적화된 웹사이트라고 볼 수 있으며, 디바이스별로 별도의 개발 방식이 필요하지 않 다. 모바일웹 앱은 HTML5에서 단일 페이지 애플리케이션으로 만들 수 있으며, 모바일 기기 페이지에서 앵커 사용 페이지로 이동하는 것을 시뮬레이션할 수 있다. 또한 모바 일 기기의 브라우저에서 실행되지만, 브라우저 단추나 표시 줄이 보이지 않아 하이브 리드 앱이나 네이티브 앱과 잘 구별되지 않는다. 모바일웹 앱의 장점은 네이티브 앱처 럼 보이지만 개발 비용이 훨씬 저렴하고, 변경 사항이 적용되더라도 사용자가 즉시 사 용할 수 있다. 또한 네이티브 앱에 비해 확장성이 우수하고 구축 비용도 합리적인 크 로스 플랫폼이라 할 수 있다. 하지만, 모바일 기기에서 기본으로 제공하는 기능에만 접근할 수 있어 앱 스토어나 구글 플레이에 등록되지 않으며, 인터넷이 연결되지 않으 면 사용할 수 없다는 단점이 있다.

1. 네이티브 앱(native app)

네이티브 앱은 특정 모바일 OS 제조사에서 제공하는 개발 언어를 이용하여 각각의 고 유 모바일 OS 플랫폼에서만 동작한다. 따라서 자바로 개발하는 안드로이드 앱과 오브 젝트-C언어로 개발되는 아이폰 앱으로 나뉜다. 네이티브 앱의 장점은 모바일웹 앱에 비해 속도가 빠르며, 모바일 기기의 다양한 기능 활용, 인터렉티브한 사용자 환경을 제공할 수 있다는 점이다. 하지만, 개발하는 데 시간과 비용이 많이 소요되며 업데이 트 및 수정의 어려움, 같은 앱을 다양한 플랫폼에 출시할 경우에는 많은 시간과 비용 이 따르게 된다는 단점이 있다.

1. 하이브리드 앱(hybrid app)

하이브리드 앱은 웹 앱과 네이티브 앱의 장점을 결합한 형태로, 모바일 웹의 홈페이지 를 구현하는 웹 기능과 앱의 어플 기능을 혼합한 방식의 앱을 말한다. 하이브리드 앱 은 다양한 기기의 기능을 사용할 수 있으며 네이티브 앱과 같이 앱 스토어에서 다운 로드할 수 있다. HTML, JavaScript, CSS와 같은 웹 기술을 사용하여 만들 수 있으며, 하이브리드 앱은 모바일 기기에 임베드된 브라우저에 표시되므로 참조할 URL이 없다 는 특징이 있다. 따라서 기업들은 기존 모바일 웹 앱 방식으로 개발된 앱을 하이브리 드 앱에 패키징하여 앱 스토어에 올리기도 한다. 이는 동일한 HTML 코드를 멀티 모바 일 운영 체제에서 재사용할 수 있기 때문에 앱을 다시 개발할 필요 없이 멀티 플랫폼 을 지원할 수 있게 된다. 하이브리드 앱의 장점은 모바일 기기의 고유 기능 및 위치 정보, 카메라 등과 같은 고 급 기능을 사용할 수 있으며, 네이티브 앱의 빠른 속도와 모바일 웹 앱이 가지는 개발 용이성, 빠른 업데이트 적용을 들 수 있다. 하지만, 인터넷 환경에 따라 일부 기능이 작동이 되지 않을 수 있으며 구동 속도가 네트워크 상태에 따라 많이 영향을 받아 속 도가 느릴 수 있다는 단점이 있다.

2. OS 플랫폼별 UI/UX 디자인 가이드라인

2.1. iOS 휴먼 인터페이스 가이드라인(human interface guidelines)

애플 iOS의 모바일 사용자 인터페이스 원칙은 사용자의 명확한 목적을 이루도록 하는 것 과 편리한 사용성이 균형을 이룬 인터페이스를 제공하는 데 있다. 훌륭한 UI는 기계의 성 능이 아닌 사용자, 사용자의 생각과 동작에 근간을 두고 있으며, 다음의 휴먼 인터페이스 디자인 원칙(human interface principle) 여섯 가지를 준수해야 한다고 제시한다.

1. 심미적 통합(aesthetic integrity)

앱의 아름다운 디자인과 사용하기 좋은 기능의 통합을 의미하며, 이와 같은 앱은 사용 자에게 앱의 목적과 정체성에 대한 명확하고 통일된 정보를 제공한다.

1. 일관성(consistency)

일관성은 사용자들이 앱을 사용하며 얻은 UI 지식과 기술을 다른 앱에서도 동일하게 적용할 수 있는 것을 말한다. iOS의 표준 준수 여부, 컨트롤, 뷰, 아이콘 디자인의 일 관성과 동작의 정확성, 텍스트 용어의 의미나 스타일의 일관성, 앱의 UI 요소의 형태와 행동에 있어서 일관성의 원칙을 지켜야 한다.

1. 직접적 조작(direct manipulation)

사용자가 UI를 자유자재로 조작할 수 있고 자신의 의지대로 앱이 동작하는 것을 의미 한다. 사용자가 화면의 객체를 조작하기 위하여 제스처를 사용할 때, 사용자 액션에 대한 즉각적인 반응이 나타날 때 직접적 조작을 경험하게 된다.

1. 반응성(feedback)

사용자의 행동을 인지하고 처리가 발생하는 것에 대해 정보를 보내어 적절한 상태가 되도록 하는 것으로 사용자 조작에 대해 즉각적인 피드백을 주는 것을 말한다.

1. 은유(metaphors)

메타포는 실제 세계의 객체나 행동을 앱의 가상 객체와 행동에 접목시켜 사용자가 앱 을 어떻게 사용해야 하는지 쉽게 이해할 수 있게 하기 위한 것이다. iOS는 메타포를 이용한 풍부한 그래픽 이미지와 동작을 제공하여 사용자가 실제와 같이 화면의 객체 들과 물리적 상호작용을 할 수 있도록 한다.

1. 사용자 통제성(user control)

사용자 액션은 단순하고 직관적으로 만들어 사용자가 쉽게 이해하고 기억할 수 있어 야 한다. 사용자가 이미 익숙해져 있는 표준 컨트롤과 액션을 사용해야 하며, 작업을 진행하기 전에는 그것을 취소할 수 있는 기회를 제공해야 하며, 사용자가 무언가를 삭 제하려 할 때는 반드시 확인하는 절차를 제공해야 한다.

2-2. Android 사용자 인터페이스 가이드라인(user interface guidelines)

1. 사용자에게 집중하라.
2. 사용자에게 중요한 요소들의 시인성을 확보하라.
3. 개발 도중에도 사용자 의견을 반영하라.
4. 사용자의 행동, 상황, 반응을 예측하라.
5. 사용자가 오류를 범하더라도 정상 작동하게 하라.