내비게이션과 레이블링 정의 기능 정의 및 메뉴 구조 작성 기능 정의 UI 시나리오 기반의 태스크 분석 결과로부터 사용자에게 필요한 인터페이스의 정보 및 콘 텐츠, 기능, 절차 등을 도출한다. 기능 구조는 사용자가 수행하는 태스크를 지원하기 위해 앱에서 제공해야 하는 인터페이스 구조이다. 앱의 기능은 사용자들이 필요로 하는 메뉴, 또는 콘텐츠이며 기능에 따른 세부 기능 요소를 필요로 한다. 다음의 문화콘텐츠 앱의 기 능 정의 작성 사례는 다음과 같이 구성하였다. 주요 기능인 문화 콘텐츠 분야를 장르별로 구분하여 사용자가 앱에 진입 시 초기 화면에서 직관적으로 확인할 수 있도록 구성한 사 례이다. 첫 번째, 사용자는 초기 화면에서 영화 메뉴로 탭을 하여 진입할 수 있으며 베스 트셀러, 신작, 무료 서비스, ..
워크플로우 작성법 파악 앱의 콘텐츠 구조·주요 기능·사용자 태스크를 토대로 효율적인 워크플로우를 제 작할 수 있다. 워크플로우(workflow) 작성 워크플로우 작성의 목적 워크플로우는 사용자들이 시스템을 이용하면서 취하는 경로나 과정을 보여주는 다이어그 램이며, 시스템에서 사용자의 전체적인 이용 흐름을 보여주기 위해 작성된다. 그리고 특정 결정이 이루어져야 하는 지점과 함께 제시되어야할 메뉴와 정보도 포함된다. 워크플로우의 활용 워크플로우를 작성하기 위해서는 먼저 사용자의 목표를 이해하여야 한다. 따라서 워크플 로우를 작성 전, 사용자 요구사항 정의서나 유스케이스를 필요로 한다. 워크플로우는 다음 과 같이 다양하게 활용될 수 있다. 앱의 기능이나 작업들이 어떻게 논리적으로 연결되어 와이어프레임으로 구성..
워크플로우 이해 사용자의 앱 인터페이스 작동 방법과 수행 순서를 고려하여 혼란을 일으키지 않는 워크플로우를 제작할 수 있다. 워크플로우(workflow) 이해 UI 디자인은 GUI 디자인에 앞서, 먼저 사용자의 분석을 토대로 UI 시나리오 문서를 충실 히 작성하여야만 한다. 또한 최종 사용자의 편의성을 높이도록 해야 하고 감성적인 목표 도 함께 고려해야만 한다. UI 디자인을 위한 UI 시나리오 작성의 단계는 다음과 같다. UI 디자인의 첫 번째 작업은 앞선 학습 1의 정보구조 설계를 기획하는 단계이다. 두 번째 작업은 본 학습 2의 사용자가 앱 서비스를 바라보는 관점을 이해하는 단계이다. 사용자가 앱 인터페이스를 이용하는 방법과 태스크 흐름을 파악하여 사용자가 시스템을 보는 관점을 표현한다. 이때에는 ..
와이어프레임 작성 인터페이스(interface) 기능 요소와 사용자 편의를 고려하여 항목들을 배치하는 것을 통해 와이어프레임(wire frame)을 작성할 수 있다. 기능 구조 정의 주요 기능 정의 카드소팅 수행을 통하여 콘텐츠와 기능에 대하여 다양하게 그룹핑 및 배열을 시도하면서 기능구조를 정의하였다면, 사용자 태스크 흐름을 중심으로 각 그룹의 사용빈도와 중요도 를 파악한다. 그리고 정의된 기능들에 대해 우선순위를 설정해야 하는데, 이 과정에서 중 요하지 않거나 불필요하다고 판단되는 기능들은 삭제하기도 하고, 새로운 기능이 필요하 다고 판단될 경우에는 추가하기도 한다. 메뉴 구조도 메뉴 구조도 정의 메뉴 구조도는 앱 공간의 형태를 시각적으로 보여주며, 메뉴와 각 메뉴의 기능을 문서 로 정리 한 것을 말..
OS 플랫폼 특성 파악 OS 플랫폼에 따른 UX의 특성을 파악하여 정보구조를 설계할 수 있다. 모바일 UX의 특성 이해 정보구조 설계 과정에 있어서 실제 개발할 UI의 구조도를 작성하기 전에 고려해야 할 사 항은 모바일 소프트웨어의 UI/UX에 대한 특성 이해와 모바일의 UI/UX 디자인 원칙, OS 플 랫폼 별 모바일 앱의 UI/UX 디자인 가이드라인에 대한 이해가 필요하다. 모바일 소프트웨어의 UX 모바일 환경에 적합한 사용자 경험 디자인을 하기 위해서는 사용자가 앱을 이용하여 달성 하고자 하는 목적과 그에 따른 사용자의 행동패턴과 니즈를 발견하여, 그것을 UI 디자인 에 담아내는 디자인 과정이 요구된다. 모바일에서 사용자 경험이 유독 강조되는 이유는 첫째, 작은 화면에서 서비스를 이용해야 한다는 점..
정보설계 구성 정보설계 정보설계의 목적은 사용자와 앱의 상호작용을 원활하게 하여, 사용자가 원하는 정보를 쉽 고 빠르게 찾을 수 있도록 하는데 있다. 사용자 요구사항으로부터 도출된 콘텐츠와 기능 구조를 바탕으로 하여, UI 구조와 내비게이션(navigation), 레이블링(labeling) 체계를 정립하 는 과정이다. 1976년 정보설계(Information Architecture, IA)라는 개념을 처음으로 언급한 리처드 사울 워먼(Richard Saul Worman)은 정보설계를 “데이터를 사람들이 이해할 수 있 는 정보로 바꾸는 것.”이라고 정의하였다. 정보설계의 정의 정보설계가인 루이스 로젠펠드(Louis Rosenfeld)와 피터 모빌(Peter Morville)은 정보설계의 핵심을 다음 세 가..
이미지 아트웍 의뢰 사양에 반영할 매체를 확인하고, 기본 시안과 변형 시안의 범위를 계획할 수 있다. 매체별 특성을 이해하여, 다양한 레이아웃으로 시안을 표현할 수 있다 설정된 콘셉트를 유지하면서 다양한 베리에이션을 구현할 수 있다 디지털 이미지의 구현 픽셀(Pixel) 파악 픽셀은 컴퓨터 모니터에서 시각 형상을 구성하는 최소 단위로서 ‘화소(Picture element)’를 가리키는 개념으로서 ‘실사 이미지’를 형성한다. 이때 이미지는 픽셀로 구 성되어 있다. 비트맵 이미지를 구현하는 그래픽 소프트웨어에서 표현되는 이미지를 확대 하여 보면, 정사각형의 픽셀들로 이루어져 있음을 알 수 있다. 모니터에서 픽셀은 수평축과 수직축의 좌표계로 표시되며, 그리드(Grid)를 형성한다. 디지 털 이미지는 일정한 코..
시안 베리에이션 계획 응용시안 개발을 위하여 기초 자료를 수집·구분할 수 있다 설정된 콘셉트의 시각화를 위해 수집한 자료의 응용과 적합 여부를 판단할 수 있다. 여러 가지 응용시안 개발을 위하여 수집한 자료별 시안 작업 방법을 계획할 수 있다. 수집한 자료를 디자인 요소로 적용하여 응용 시안을 예상할 수 있다. 인쇄매체 시안 베리에이션 기획 시각디자인 결과물 제작을 위해서는 개발 팀 내에서 단계별로 클라이언트와 활발한 커뮤 니케이션이 필요하다. 그중 시안 제작 단계에서는 단일 디자인 안을 제시하는 것이 아닌, 여러 가지 안을 제시하여 디자인 결정을 위한 논의가 진행 되어야 한다. 시안 제작 단계는 아이디어 스케치를 통해 디자인 콘셉트의 구체화를 거친 단계이므로 여러 시안들의 변화 폭을 넓힐 필요는 없으나..