티스토리 뷰

GUI 상세 디자인을 하기

UI 디자인이 성공하기 위한 요건

GUI 템플릿에 따라서 전체 화면을 디자인할 수 있다.
GUI 템플릿에 따라서 아이콘과 버튼을 디자인할 수 있다.

GUI 상세 디자인

UX 디자인의 기본 명제를 이해하고 있다면 프로세스를 이해하는 것은 간단하다. 사용자를 이해하고 그것을 디자인으로 연결시키면 되는 것이니 말이다. 그러나 디자인은 ‘자동판 매기(Bending machine)’가 아니다. 사용자 경험을 이해했다고 해서 자동으로 디자인이 만 들어지지는 않는다는 얘기다. 디자이너 개인의 창의성이나 지식, 경험 등이 ‘의도’를 형 성한 뒤, 이 ‘의도’를 통해 디자인이 만들어지는 것이다.

“사용자들의 경험을 이해하고, 그 이해를 바탕으로 디자인 한다.”

사용자 경험을 이해하는 과정에는 목표 수립, 제반 상황 분석, 이슈 도출, 필드리서치, 모 델링 등의 단계(Phase)가 있다. 뒷부분은 ‘사용자 경험 이해’를 바탕으로 디자이너의 의도를 효과적으로 표현하는 것과 관련돼 있다. 서비스 디자인에서 출발해 IA, 인터랙션 디 자인, UI 디자인, 그래픽 디자인까지 체계적으로 접근하는 것은 물론 반복적인 프로토타이 핑과 테스트 과정을 통해 최적의 결과를 창출해 나가는 작업이 이뤄진다.

UI 디자인이 성공하기 위해서 필요한 요건은 무엇인가?
명확한 목표

UX Design은 Bottom-up 기반이기 때문에 명확한 목표가 중요하다. 비즈니스적으로 불확실 한 도전에 UX Design을 적용했다고 해서 프로젝트가 성공할 수는 없다. 명확한 시장 선정 과 비즈니스 목표 수립이 필요하다. 가령 새로운 브랜드 커뮤니케이션을 위해서 어떤 채널 을 이용할 지 확신할 수 없다면 UX 프로젝트가 그 해답을 제시해줄 수 있다. 그러나 비즈 니스 목표도 불분명한 상태에서 모든 것을 UX Design에 맡기는 것은 잘못된 접근이다. 2013년 가을 이후 다양한 크기의 제품 군 출시를 준비하고 있어 iOS 6의 오토 레이아웃, 콘스트레인트를 더욱 강화한 상대적 레이아웃을 보편화하였다. 다음은 iOS7의 Dynamic UIKit에 대한 샘플이다. 또한, iOS의 경우 노티피케이션과 연동해서 좀 더 실용적인 멀티태스킹 환경 제공한다. 다 음은 그 실 예이다.

구체적인 이슈

두리뭉실한 이슈를 가지고 리서치를 진행한다면 어떻게든 도움은 되겠지만 원하는 성과는 기대하기 힘들다. 리서치는 통계분석이나 설문조사, 벤치마킹을 통해서는 해결할 수 없는 구체적인 이슈를 해결하는 과정이다.

적절한 리서치 대상자 선정

사용자 전체를 만난다는 것은 불가능하다. 또한, 불필요한 일이기도 하다. 리서치가 신뢰 할 수 있고 리서치 결과가 의미 있기 위해서는 적절한 대상자를 선정하는 게 관건이다.

깊이 있는 사용자 경험 이해

사용자들의 니즈 뿐만 아니라 이용 동기나 행태, 태도 등에 대한 포괄적인 이해가 중요하 다. 단지 사용자들이 현재 겪고 있는 문제점을 해결한다는 관점에서만 접근한다면 혁신적 인 결과를 얻기 힘들다. 다양한 리서치 기법을 활용하여 사용자들의 경험을 깊이 있게 파 악하는 과정이 중요하다.

체계적인 기법 활용

UX Design에는 사용자 경험 이해를 디자인으로 연결시키는 뛰어난 기법들이 있다. 가령 페르소나를 잘 정의한다면 어떤 사용자들을 타겟으로 삼아서 제품을 디자인할 지가 분명 해진다. 사용자 시나리오는 전체적인 이용 흐름 관점에서 새로운 아이디어들을 도출할 수 있는 기회를 제공한다. UX Design의 장점을 충분히 활용하기 위해서는 체계적인 기법 활 용이 중요하다.

풍부한 리소스 활용

뛰어난 ‘사용자 경험 이해'가 빈약한 ‘리소스 풀(pool)’ 때문에 가치 절하될 수 있다. 사용자 경험을 아무리 잘 이해했다고 하더라도 결국 우리의 목적은 그것을 해결할 디자인 을 만드는 게 목적이기 때문이다. 기술이나 각 디자인 영역별 전문적인 역량은 물론 최신 트랜드에 대해서도 풍부한 리소스가 있어야 한다.

활발한 프로토타이핑

모든 것이 준비됐을 때 프로토타이핑을 한다는 것은 무리가 있다. 어느 시점에서든 활발 하게 프로토타이핑이 시도되고 팀원들 사이에서 토론되어져야 한다. 화면 디자인을 하기 위한 중요한 요소 로 의미 별 정보 그룹으로 구성하여 배치하는 방법 이 있다.

  • 중요도, 사용빈도, 연관성, 조작순서 등을 고려하여 의미단위로 묶어서 배치한다.
    • 조작(이동, 편집, 삭제), 탐색(검색, 정렬), 보기(날짜별, 위치별) 등 정보 속성에 따라 그룹핑하여 배치한다.
    • 전체 조작 관련 기능(정렬, 전체 삭제 등)과 선택된 콘텐츠 조작 관련 기능(편집, 삭제 등)을 구분하여 배치한다.
    • 추가/삭제(제거, 지우기)와 같은 상대적인 기능은 하나의 Set으로 묶은 후 빈도 별로 배치한다.
  • 정보 그룹과 그룹 사이에는 구분선 또는 여백 등을 통해 시각적으로 구분시킨다.
  • 핵심 기능이 되는 20%를 현화면내 제공하고, 그 외에는 옵션 또는 하위Depth에 제공 한다.
다양한 기기의 특성을 반영하여 GUI를 설계하여야 한다.

즉, 기기의 물리적 특성과 사용 환경을 반영하여 사용자에게 최적화된 경험을 제공한다. 스마트폰의 경우 Smartphone 특성 분석 및 Principle 도출하도록 설계하여야 하며, 물리적, 사용 행태적, 환경적 요소를 기준으로 Phone 특성 분석 및 정의를 하여야 한다.

물리적 특성과 빠르게 전환되는 GUI 설계를 해야 한다.

물리적 특성을 고려하여 최적화 된 동선을 제공하도록 GUI를 설계하여야 한다. 즉, 항상 소지하고 정적이고 동적인 환경에서 사용함을 고려하여 한손/양손 사용시의 동 선과 단순한 조작 방법을 제공하도록 설계하여야 한다.

UX 제작 GUIDE는 다음과 같다.

  • 한 손 및 양손 조작시의 운지 동선을 모두 고려해야 한다.
  • 자주 접근하는 Common Control은 가능한 한 손 조작 영역 내 배치한다.
  • 조작 동선은 컨텐츠 영역을 최대한 가리지 않는다.
  • 기본 터치 영역은 엄지 손가락 터치 영역 기준으로 제공한다.
  • 기본적으로 Portrait mode를 기준으로 디자인한다.
결사용 맥락에 맞는 자연스러운 경험을 제공

사용 맥락에 맞는 자연스러운 경험을 제공할 수 있도록 다음의 UX 가이드를 활용하여 설계해야 한다.

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

TAG
댓글
댓글쓰기 폼