워크플로우 제작하기 워크플로우 작성 사용자의 여러 상황을 직접 경험하고 감정이입을 통해 직관적이고 편리한 워크플로우를 제작할 수 있다. UI 문서의 이해 1. 와이어프레이밍(wireframing) UI 문서 중 중요한 역할을 담당하는 하나로서 와이어프레임은 화면 단위의 레이아웃 구조 설계하는 단계의 과정이다. 프로젝트 관계자들과 레이아웃을 협의하거나 시스템의 간략한 흐름을 논의하고 공유하기 위한 목적으로 사용하며 UI, UX 디자인에 집중되어 있다. 와이 어프레임 설계에서 중요한 사항은 크게 두 가지로 요약된다. 첫째, 사용자의 콘텐츠 요구 사항에 대하여 구조화 작업을 수행하고, 사용자가 콘텐츠를 편리하게 이용할 수 있도록 콘텐츠 공간의 패턴과 순서를 설계하는 정보구조 설계에 관한 것이다. 둘째, 사용자..
워크플로우 제작하기 워크플로우 작성법 파악 앱의 콘텐츠 구조, 주요기능, 사용자 태스크를 토대로 효율적인 워크플로우를 제작할 수 있다. 워크플로우(workflow) 작성 1. 워크플로우 작성의 목적 워크플로우는 사용자들이 시스템을 이용하면서 취하는 경로나 과정을 보여주는 다이어그 램이며, 시스템에서 사용자의 전체적인 이용 흐름을 보여주기 위해 작성된다. 그리고 특정 결정이 이루어져야 하는 지점과 함께 제시되어야할 메뉴와 정보도 포함된다. 2. 워크플로우의 활용 워크플로우를 작성하기 위해서는 먼저 사용자의 목표를 이해하여야 한다. 따라서 워크플로우를 작성 전, 사용자 요구사항 정의서나 유스케이스를 필요로 한다. 워크플로우는 다음과 같이 다양하게 활용될 수 있다. 앱의 기능이나 작업들이 어떻게 논리적으로 연..
워크플로우 제작하기 워크플로우 이해 사용자의 앱 인터페이스 작동 방법과 수행 순서를 고려하여 혼란을 일으키지 않는 워크플로우를 제작할 수 있다. 워크플로우(workflow) 이해 1. UI 디자인 작성 순서 UI 디자인은 GUI 디자인에 앞서, 먼저 사용자의 분석을 토대로 UI 시나리오 문서를 충실 히 작성하여야만 한다. 또한 최종 사용자의 편의성을 높이도록 해야 하고 감성적인 목표 도 함께 고려해야만 한다. UI 디자인을 위한 UI 시나리오 작성의 단계는 다음과 같다. UI 디자인의 첫 번째 작업은 앞선 학습 1의 정보구조 설계를 기획하는 단계이다. 두 번째 작업은 본 학습 2의 사용자가 앱 서비스를 바라보는 관점을 이해하는 단계이다. 사용자가 앱 인터페이스를 이용하는 방법과 태스크 흐름을 파악하여 사..
UI 정보구조 설계하기 스토리보드 흐름 구체화 와어이프레임에 기반을 두어 표현되는 정보와 기능에 따른 상세 스토리보드 흐름(flow)을 기획할 수 있다. 스토리보드의 정의 1. 스토리보드의 구성 스토리보드는 앱을 개발하기 위한 기초 설계 도면으로 디자이너 및 개발자가 참고하는 최 종적인 산출문서라고 할 수 있다. 화면 구성이 어떻게 보여 질것이며 다음 화면이 어떻게 전개될지 알려주는 것으로 각 화면에 대한 화면 정의서, 기능 정의서, 데이터베이스 연동 등 구축을 위한 모든 정보가 담겨 있는 문서이다. 앱 서비스 제작의 단계에서 스토리보드 는실제제작의전단계이며요구분석, 정보구조설계, 서비스흐름도작성후최종문서 로서 해당 문서를 바탕으로 커뮤니케이션을 하게 된다. 스토리보드 작성 단계 (1) 앱의 설명 및 개..
UI 정보구조 설계하기 와이어프레임 작성 인터페이스(interface) 기능 요소와 사용자 편의를 고려하여 항목들을 배치하는 것을 통해 와이어프레임(Wire frames)을 작성할 수 있다. 기능 구조 정의 1. 주요 기능 정의 카드소팅 수행을 통하여 콘텐츠와 기능에 대하여 다양하게 그룹핑 및 배열을 시도하면서 기능구조를 정의하였다면, 사용자 태스크 흐름을 중심으로 각 그룹의 사용빈도와 중요도 를 파악한다. 그리고 정의된 기능들에 대해 우선순위를 설정해야 하는데, 이 과정에서 중 요하지 않거나 불필요하다고 판단되는 기능들은 삭제하기도 하고, 새로운 기능이 필요하 다고 판단될 경우에는 추가하기도 한다. 2. 메뉴 구조도 (1) 메뉴 구조도 정의 메뉴 구조도는 앱 공간의 형태를 시각적으로 보여주며, 메뉴와 ..
UI 정보구조 설계하기 OS 플랫폼 특성 파악 OS 플랫폼에 따른 UX의 특성을 파악하여 정보구조를 설계 할 수 있다. 모바일 UX의 특성 이해 정보구조 설계 과정에 있어서 실제 개발할 UI의 구조도를 작성하기 전에 고려해야 할 사 항은 모바일 소프트웨어의 UI/UX에 대한 특성 이해와 모바일의 UI/UX 디자인 원칙, OS 플 랫폼 별 모바일 앱의 UI/UX 디자인 가이드라인에 대한 이해가 필요하다. 1. 모바일 소프트웨어의 UX 모바일 환경에 적합한 사용자 경험 디자인을 하기 위해서는 사용자가 앱을 이용하여 달성 하고자 하는 목적과 그에 따른 사용자의 행동패턴과 니즈를 발견하여, 그것을 UI 디자인 에 담아내는 디자인 과정이 요구된다. 모바일에서 사용자 경험이 유독 강조되는 이유는 첫째, 작은 화면에..
UI 정보구조 설계하기 정보설계 구성 앱 UI/UX 디자인 개발에 필요한 요소를 기반으로 전체적인 정보설계를 구성할 수 있다. 정보설계 정보설계의 목적은 사용자와 앱의 상호작용을 원활하게 하여, 사용자가 원하는 정보를 쉽 고 빠르게 찾을 수 있도록 하는데 있다. 사용자 요구사항으로부터 도출된 콘텐츠와 기능 구조를 바탕으로 하여, UI 구조와 내비게이션(navigation), 레이블링(labeling) 체계를 정립하 는 과정이다. 1976년 정보설계(Information Architecture, IA)라는 개념을 처음으로 언급한 리처드 사울 워먼(Richard Saul Worman)은 정보설계를 “데이터를 사람들이 이해할 수 있 는 정보로 바꾸는 것.”이라고 정의하였다. 1. 정보설계의 정의 정보설계가인 ..
UX 전략 도출하기 앱 UX/UI 디자인 방향성 및 콘셉트 도출 수립된 UX 전략과 사용자 요구사항을 반영하여 구체적인 앱 UX/UI 디자인 방향성 및 콘센트를 도출 할 수 있다. UX 디자인 목표 수립 UX 디자인 전략이란, 사용자 경험 디자인의 원칙과 방향을 말하는 것으로 본 학습에서는 문화콘텐츠앱 디자인의 세부 전략을 바탕으로 UX 디자인 목표를 수립한다. 다음 예시와 같이, 명확한 목표 수립을 통해 사용자에게 전달할 UX 디자인 콘셉트를 정의할 수 있다. 1. 문화콘텐츠앱 UX 디자인 원칙 사용자 경험을 이루는 앱 디자인의 핵심 분야로서 인터랙션 디자인, 정보 디자인, 비주얼 디자인의 세 가지 디자인 분야의 원칙을 이해하고, 이를 바탕으로 사용자의 니즈를 충족시 킬 수 있는 디자인 방향성을 도출하..
UX 전략 도출하기 UX 차별화 전략 수립 결정된 포지셔닝에 따라 경쟁 환경, 기술적 측면, 사용자 요구사항을 반영하여 차별화된 UX 전략을 수립할 수 있다. UX 전략 수립 시 고려해야 할 조건 앞서 선정한 UX 전략 포지셔닝 방향에 따라 전략을 수립할 시 고려해야 할 조건들을 분 석하여 실현 가능하며 차별화된 UX 전략을 수립한다. 비즈니스 측면에서의 UX 전략의 고 려와 기술적 측면, 사용자 측면에서의 고려를 통하여 UX 디자인 전략의 명확성 및 타당성 을 검토하여야 한다. 1. 경영 전략 및 경쟁 환경에서 UX 전략 (1) 경영 관점에서의 UX 전략 전략 경영 분야의 최고 권위자인 제이 바니(Jay B. Barney)와 윌리엄 헤스털리(William S. Hesterly)는 경영(business)..
UX 전략 도출하기 UX 전략의 포지셔닝 방향 선정 사용자 조사 결과를 통해 도출된 방향성을 바탕으로 UX 전략의 포지셔닝을 결정할 수 있다. 퍼소나 요구사항 정리 앞서 학습해본 바와 같이, 퍼소나에 따른 정황 시나리오 분석을 통하여 도출된 요구사항 을 바탕으로 개략적인 디자인 방향성을 예측할 수 있다. 이에 따라, 가상의 대표 사용자 퍼소나의 요구사항 구분은 다음과 같은 기준으로 정리될 수 있다. 목표 대상에 따른 구분 시스템 요구사항 사용자 요구사항 요구사항의 특성에 따른 구분 기능적 요구사항 사용자가 앱을 이용하는 목적에 따른 기능적 요구를 충족할 수 있을 만큼, 충분하게 기능이 제공되고 있는지 사용자를 통하여 확인해볼 수 있다. 현재 서비스 중인 앱의 경우에는 사용자들로부터 추가로 제공되었으면 하..