본문 바로가기

서비스 기획

6/13 UX전략과 UI설계방법론 (feat. 스토리보드)

어피니티 다이어그램

방대한 데이터 사이에서 의미있는 데이터를 발견하는 그룹핑 기법 

- 리서치를 통해 수집된 데이터를 분류하고 정리하는 데에 사용됨 

→ 공통의 이슈, 주제, 고객의 문제와 니즈를 한 눈에 파악할 수 있다. 

 

페르소나

인터뷰, 설문 등 사용자 연구를 통해 얻어진 데이터를 기반으로 대상 사용자 층을 대표하는 가상의 인물 → 사용자 니즈에 맞는 최적화된 사용자 경험 구축

- 실무에서는 안 쓰는 경우가 많다. 

 

사용자 페르소나 5단계

UX를 위한 페르소나 만들기

사용자 조사 → 조사결과 분석 → 페르소나 개수 결정 → 페르소나 묘사 → 페르소나 시각화 

√ 1~4개 페르소나 

√ 주요/보조 페르소나

 

-  사진, 라이프스타일(시나리오), 이름, 나이, 지역, 직업, 성격, 학력, 특징, etc. 

* 딱 보자마자 뭘 하고자 하는 사람인지 알 수 있도록 사진 등이 직관적이고 깔끔한 느낌이 있어야함. 

 

저니 맵

사용자가 목적을 달성하기 위해 행하는 과정을 시각화한 것

기능별 행동에 대한 만족도로 문제점 도출

UX전략 도출

비즈니스 전략(경쟁분석/영업기회/사례분석)과 UX디자인(사용자조사/디자인트랜드/새로운경험과니즈)을 모두 고려하여 UX 전략을 짜야함

UX전략 수립 단계

문제 파악 →  인사이트 가치 도출 포지셔닝 컨셉 도출 아이디어 도출

 

UI 설계 방법론

  메뉴설계 →  이용자 흐름 설계  → 정보구조설계(IA)   → 화면 설계  → 디자인 컨셉 도출 및 디자인

 

  메뉴설계 

서비스의 전체 구성을 한눈에 볼 수 있도록 메뉴트리 구성

√ 핵심 서비스가 잘 드러나도록 구성

√ 메뉴를 통한 서비스 정체성 부여

* 처음에는 손으로 그려놓고 나중에 툴로 그리는 것이 중요. 

 

이용자 흐름 설계(Flow Chart)

사이트 전체의 흐름에 따라 데이터를 어떻게 처리하는지 기호나 도형을 통해 보여준다

 

 

와이어프레임

UX설계 작업을 기반으로 각 페이지와 기능 간의 관계와 구조를 정의하고 콘텐츠 및 레이아웃을 시각화 하는 작업

* IA를 보면서 이미지와 색상을 넣지 않고 회색 베이스로 디자인. 

ex) 제목을 두 줄까지 노출할건지, 어쩔건지를 기획자가 결정

 

스토리보드

와이어프레임, 콘텐츠, 기능 정의, 프로세스, DB연동, 정책 등 서비스 구축을 위한 모든 정보를 작성하는 문서