GUI 상세 디자인을 하기

UI 디자인이 성공하기 위한 모델링

• GUI 콘셉트 기획서에 따라서 화면의 인터랙션 요소를 디자인할 수 있다.
• UI 구현을 위하여 GUI 디자인 가이드 문서를 작성할 수 있다

UI 디자인이 성공하기 위한 모델링

UX에서 리서치 결과를 토대로 모델링을 한다는 의미는 결국 사용자 저변에 깔려 있는 마 음속 모형을 드러내 보인다는 얘기와 일맥상통한다. 사용자가 자신들의 마음속에 가지고 있는 대사에 대한 모형을‘멘탈모델’이라고 한다.

다음의 3가지 모델로 구분된다.

1. 구조모형

• 대상의 구체적인 세부요소를 머릿속에서 묘사하는 모형
• 주로 정보의 분류나 구조적인 형태로 표현된다
• 사용자유형별로 구조모형에 큰 차이가 존재하기 때문에 구조모형은 Persona를 통해서 표현될 수 있다.

2. 기능모형

• 사람들이 제품/서비스를 어떻게 이용하는지에 대한 모형
• 과거에 해당 제품/서비스를 이용했던 맥락에 많은 영향을 받음
• 초기상태, 목표상태, 조작자, 제한조건과 같은 문제공간을 통해 모형화 할 수 있다. Journey Map이나 Persona를 이용한다.

3. 가치모형

• 제품/서비스가 자신에게 어떠한 가치를 제공해줄 것이라고 생각하는 멘탈모델
• 사용자가 어떤 가치모형을 가지고 있느냐에 따라서 제품/서비스의 기능, 구조가 달라지 게 된다
• Persona나 User Story를 이용하나, 궁긍적으로는 Affinity Diagram을 통해 UX Value로 취합된다.

Persona는 제품을 사용하는 사용자들을 특정한 기준에 따라 분류한 뒤, 이들 각각의 사용자 유형들을 가공의 캐릭터로 표현하는 기법

Persona는 사용자를 보다 면밀하게 분석하기 위해, ‘전형적인 사용자(Persona)를 통해 각 사용자들의 이용행태와 상품에 대한 니즈에 주목하여 이를 서술적으로 정의하는 기법이다.

• Persona는 사용자를 집중해서 분석하도록 해준다
• Persona는 사용자에 대한 감성적인 이해를 도와준다.
• Persona는 효과적으로 사용자를 알게 해준다

(1) Persona를 만드는 시기

Persona를 만드는 시기는 다음과 같다. 리서치 결과를 정리하다 보면, 사용자들을 일정한 기준에 의거하여 분류할 필요가 생 긴다. 다시 말해, 사용자는 하나의 동일한 유형으로 존재하지 않고, 이용환경(Context)나 성 별/연령별/직업별 특성, 제품에 대한 기대, 니즈, 동기, 태도, 이용행태 등이 다르다는 것을 발견하게 된다. Persona는 리서치 결과 정리 시에 사용자 분류 과정을 통해서 만들어 진다

Persona에 들어가는 내용

• 사용자 정보 및 간단한 프로파일
• 사용자에 대한 구체적인 정보 (인구통계학적인 정보, 제품에 대한 이용환경)
• 사용자 기대(User Goals)
• 공급자 기대(Business Objectives)

(2) Persona 작업 시 주의할 점

• 사용자들의 특징과 차이를 분명히 밝혀야 한다.
• 각 Persona들은 서로 명확하게 달라야 한다
• 실제 사용자(Real People)처럼 느껴져야 한다
• 모든 사용자들을 포괄해야 한다.
• 의사 결정에 영향을 미치는 시사점이 있어야 한다.
• 사용자의 서비스 이용흐름은 UI/UX를 설계하는데 가장 중요한 요소중 하나이다.
• 사용자들이 시간 흐름에 따라서 서비스를 이용하는 Flow를 Journey라고 얘기한다.
• Journey Map은 리서치 결과를 바탕으로 하여 사용자들이 수행하는 제품/서비스 이용 흐름을 조망하고 문제를 발견하는 데 탁월한 툴이다. 서비스에 따라 약간씩 차이가 나 지만 통상적으로 Journey는 Pre-Service, Service, Post-Service로 구분된다.
• 성공하기 위한 모델링을 하기 위해서는 좋은 Header를 만들어야 한다.

지나치게 많은 Affinity들을 묶어서 Header가 두리뭉실한 내용이 된다. ex) 사용자들은 빠 른 쇼핑을 원한다, 속도가 느려서 불만이 크다.

Header에 단어를 기록한다. 단어는 하위 구성요소들을 대표하고 의미를 전달하는 데 충분 하지 않다. ex) 이용방법, 검색하는 절차, 가장 불편한 점 Header와 하위 Affinity들이 따로 논다. ex) 하위 Affinity들과 관계없이 자신이 주장하고 싶은 얘기를 쓰는 경우, 하위 Affinity들에서 지나치게 비약된 결론을 도출하는 경우 요약에만 충실해서 하위 Affinity들에 언급된 사실들이 장황하게(만연체로) 이어진다. ex) 사용자들은 습관적으로 홈버튼을 누르며, 홈버튼을 통해 문제가 해결될 거라 믿고 있고, 홈버튼 외에 누를 게 없다는데 불만이다. 사용 맥락에 적절히 반응 하도록 디자인 하기위해서는 사용자의 상황에 따른 신체 정보를 수집하여 사용 맥락에 맞는 정보를 제공해야 한다.

다음의 UX가이드를 참고해야 한다. UX 제작 GUIDE는 다음과 같다.

• 일정, 날씨등 현 상황에 필요한 정보를 시계 화면과 연계하여 미리 제공한다
• 손목에서 울리는 알림이 Stress가 되지 않도록, Disturb Mode 설정/해제를 제공한다.
• 손목 탈착을 구분하여 알림 소리의 크기와 진동의 세기를 다르게 적용한다.
• Wearable Device의 장점을 활용하여 현재 맥락에 따른 개인화된 정보(운동거리, 심박수, 칼로리, 이동경로등)를 제공한다.

화면크기에 최적화하여 표현하기 위해서는 소 화면과 흘긋 보는 사용자 행태를 고려하여 정보의 시인성을 높여야한다. 따라서, 명도 및 채도가 높은 그래픽을 제공하고, 정보량을 최적화한다

다음의 UX가이드를 참고해야 한다. UX 제작 GUIDE는 다음과 같다.

• 작은 화면임을 고려하여 화면 전체를 사용하고 화면 분할은 최대한 지양한다.
• 조작을 위한 Touch down시 손가락으로 화면을 가리는 경우 Bubble Pop-up으로Guide를 제공한다.
• 모바일 디바이스와의 시선거리 30~40cm를 고려하여 Font Size는 43pt(폰 대비130%이상/ 5.5” 1080x1920px기준)로 가독성을 확보한다.
• 시인성을 위해 명도 및 채도가 높은 아이콘을 사용하며, 버튼 크기는 1.3” 기준10mm 이상으로 제공한다.

예) 디바이스 버튼 최소 사이즈 7x7mm, Press 영역 10x10mm, Release 영역14x14mm Phone 버튼 최소사이즈 6x6mm, Press 영역 8.9x8.9mm, Release 영역15x15mm

다양한 New Feature

iOS의 New Feature : iOS의 경우 개별 UI 요소에는 큰 변화가 있었지만 UI 관련 API 자체 에는 큰 변화가 없도록 설계되었다.

iOS7의 경우, iOS 6의 오토레이아웃, 콘스트레인트를 더욱 강화한 상대적 레이아웃을 보 편화한 것으로 설계되었다. 또한, 노티피케이션과 연동해서 좀 더 실용적인 멀티태스킹 환경 제공하도록 설계되었다. 코코스2D 등 모바일 게임 엔진의 사용이 상식이 된 가운데, 네이티브 언어를 이용한 상호 작용성 높은 게임 개발이 가능, iOS 7에 추가된 여러 프레임워크 가운데 가장 많이 언급되 고, 높은 기대를 받고 있다. 기존 버전의 앱을 iOS 7버전에 맞게 수정, 보완하기 위한 가이드를 제공하고 있다.

iOS 플랫폼 표준에 부합하고 사용성 높은 앱을 만들기 위한 가이드를 서비스로 제공하고 있다.

iOS 7버전에 사용되는 각종 UI 요소는 다음과 같이 구성되어져 있다.

안드로이드에서 사용되는 아이콘은 다음과 같은 스타일로 디자인 설계한다. UI를 개발하기 위해 사용하는 도구이다.