UIUX 스터디 6주차 학습일지 05 : 프로토파이 실습, 카카오 UX 디자인 프로세스 - 20

1-1. 프로토타이핑

오류와 결함을 찾아내기 위해서 (사용자 테스트 포함)

엔지니어와 소통하기 위해서

경영진 등 비즈니스 이해관계자를 설득하기 위해서

 

1-2. 프로토타이핑 툴 소개

피그마는 인풋필드에 텍스트를 치는 것까지 구현하기 힘듦

 

3-4. Trigger & Response

Start 트리거: 화면이 시작할 때

Detect 트리거: 어떤 값을 인지하게 함

 

트리거 사용해보기 / 인풋필드 실습

 

Detect 트리거 아래에 조건(Condition)을 넣으면 레이어의 어떤 값을 인지해서 색깔을 변하게 할 수 있음

 

3-6. Record & Cloud

프로토타입을 공유하는 방법

직접 실행할 수 있는 프로토타입을 전달

동작하는 프로토타입 영상을 전달

 

3-7. Component & Library

컴포넌트는 따로 내보내기할 수 있음

라이브러리에 수정사항이 생길 경우 퍼블리시하면 히스토리를통해 수정사항을 업데이트 / 관리할 수 있음

Go to Main Component를 활용하기

 

컴포넌트와 라이브러리를 쓰는 이유

유연한 팀프로젝트에서 일관된 디자인 작업이 가능하다

불필요한 작업시간을 줄여준다

 

1-1. 협업에서 UX 디자인이란 (1)

강사소개

• 다양한 플랫폼과 서비스 기획을 바탕으로 사용자들이 머물고싶은 공간을 제공하고 다양한 직군의 사람들이 함께  일하는 환경을 마련하는 프로덕트 디자이너
• 사람과 사람 사이에서 일어나는 인터랙션에 관심이 많다
• 그들이 만들어내는 온/오프라인의 공간을 기획하는 것을 좋아한다

현업에서 UX디자인이란 어떤 프로세스일까

일반적으로 알고있는 UX디자인은 이해-공감-아이디어도출-프로토타입-테스트-출시&피드백 수집 6계의 단계

 

이해

• 사용자의 페인포인트 발굴하고 비즈니스 목표를 만들어나가는 단계 
• 화려하고 좋은 기능이라고해도 사용자의 니즈에 맞닿아있지 않으면 쓸모없는 서비스
• 사용자들의 니즈에만 맞춰 편리하고 좋은 기능을 제공한다고해서 비즈니스목표가 뚜렷하지 않은 서비스를 기획해도 공급자 입장에서 좋은 서비스가 아님
• 뚜렷한 목적과 목표를 설정하고 사용자와 공급자의 양쪽의 요구사항을 적절히 담아내야 좋은 서비스

UX Questionnaire

서비스 포지션

• 시장에서 서비스의 포지션이 어떻게 되는지

비즈니스 목표

• 금전적인 목표도 좋지만 사용자의 데이터나 트래픽을 수집할 수 있는 지표적인 목표도 좋음

사용자의 목표

• 타겟 사용자를 설정하고 사용자들이 서비스를 통해 이루고자 하는 목표를 설정

사람들이 이 서비스를 선택하게 될 이유

• 사용자들이 서비스를 왜 사용하는지

태스크와 시나리오

• 타겟 사용자의 페인포인트 생각해보고 어떻게하면 해결할 수 있을지 함께 고민
• 구체적인 태스크와 시나리오를 생각나는대로 발산하고 정리
• 이 서비스의 메인이되는 기능과 동작이 어떻게 이루어지는지

Lean Canvas

Problem

• 현 시점에서 가장 중요한 3가지 문제를 생각하고 이 문제들이 현재 어떻게 해결되고 있는지

Customer

• 우리의 목표 고객을 설정하고, 이상적인 고객의 특징을 생각해봄

Value

• 이 제품을 구입해야하는 이유와 다른 제품과의 차이점을 설명할 수 있도록 알기쉽고 설득력있는 슬로건 만들기

Solution

• 이를 통해 우리 고객에게 놓여있는 문제를 해결할 수 있는 가장 중요한 해결책 3가지

Unfair advantage

• 다른 제품이 쉽게 흉내낼 수 없는 특징을 생각해보기
• 시장에서 어떻게하면 경쟁우위를 선점할 수 있을지

Revenue streams

• 수익원, 매출, 총 이익, 매출 모델 등 그를 통한 가치 

Core structure

• 이를 만들기 위해 드는 비용(고객 획득을 위한 비용, 유통비용, 호스팅, 인건비 등)

Key metrics

• 고객 피드백 등 우리가 측정해야 할 핵심 활동들은 무엇인지, 봐야할 핵심 지표는 무엇인지
• 사업의 현황을 알려주는 핵심 숫자 나열

Channel

• 고객들에게 우리 서비스를 어떤 채널로 알릴 수 있을지

이러한 방법론을 활용하는 이유

> 창의적인 사고를 다각적인 시각에서 초반에 튼튼하게 잡아 서비스가 진행됨에 있어 흔들림없이 나아가기 위해

> 데스크 리서치 이외에도 직접 사용자를 만나 인터뷰를 하거나 이해관계자들을 대상으로 인터뷰를 해서 이들의 니즈를 파악해야 함

 

1-2. 협업에서 UX 디자인이란 (2)

공감

사용자를 이해하고 이해관계자들이 원하는 바를 파악하였다 하더라도 사용자들이 어떤 것을 보고, 어떤 감정을 느끼고, 어떤 경험을 하는지 공감하지 않으면 좋은 서비스를 만들 수 없음

페르소나와 유저 저니는 앞 단계의 정보들을 하나의 스토리로 엮는 작업임

 

ex) 네이버지도 여행 프로젝트

• 인터뷰와 리서치를 통해 정성적, 정량적 로우 데이터를 마련함
• 이를 바탕으로 두 명의 프라이머리, 세컨더리 페르소나를 설정
• 각 페르소나가 출발해서부터 다시 집으로 돌아오는 일련의 여행 과정에서 겪을 수 있는 문제들과 그때 당시 생각들과 감정, 그 속에서 발굴할 수 있는 기회요소 등이 담긴 저니맵 작성
• 각 단계별 유저들의 목표, 상황 설명, 감정, 행동, 행동의 어려운 점, 페인 포인트, 기회요소
• 저니맵을 각 이해관계자들에게 공유하는 커뮤니케이션 요소로도 활용 가능

아이디어 도출

• 다양한 이해관계자와 함께 하며 서비스를 만들어나가는데 있어 모두에게 동기를 부여할 수 있는 과정
• 브레인스토밍, 어피니티 다이어그램, 커버 스토리 방법
• 커버 스토리란? - 우리 서비스가 성공해서 서비스를 소개하는 잡지를 만든다고 가정
• 회사 성공에 대한 이야기를 잡지 커버로 만든다고 생각하고 작성 (어떤 컨셉, 슬로건, 그림, 문구가 들어갈지)
• 어떠한 기능들이 있어서 성공을 했는지 아이디어를 작성
• 사람들로부터 우리 서비스가 어떻게 회자되고 있을지 상상
• 해당 잡지의 핵심 내용, 세부사항, 이미지를 자유롭게 작성

프로토타이핑

• 앞선 단계의 아이디어가 잘 녹아들 수 있도록 메뉴 구조와 플로우 등을 짜봄 (와이어프레임)

유저 테스트

• 실제 타겟 사용자를 모아 의도한대로 잘 사용하는지 테스트 진행
• 시간이 모자라면 사내 전문가들을 대상으로 간단하게 휴리스틱 평가로 대체하기도 함

출시 & 피드백

• 사용자들의 반응을 분석 / 피드백 수집 / 지표데이터를 바탕으로 서비스 업데이트 준비
• 개선사항을 수집하고 우선순위 작성 / 협업 관계자들과 논의를 바탕으로 다음 단계 준비

 

2-1. IT 회사에서의 UX 디자이너의 업무와 역할

서비스 개발 프로세스와 각 직군의 역할

 

• 서비스 상위 기획 참여, 사용자 리서치, 개발자들이 볼 수 있는 시나리오 문서 제작, 이를 바탕으로 개발, 회의
• 필요한 단계에만 UXer가 투입되는 경우도 있음
• 사용자 리서치를 통한 인사이트만 기획팀에게 전달, 워크샵이나 아이데이션을 모더레이트하는 역할만 하거나 디자인이나 개발을 위한 상세 시나리오만 전달하는 경우도 있음 > 서비스가 신규 프로젝트인지, 운영/업데이트 프로젝트인지에 따라 다름

1) 서비스 프로토타이핑

• UX팀에서 주도적으로 제안할만한 서비스 선택 후 해당 부서에 구현 및 제안
• 리서치+UX컨셉+UI설계+인터페이스/인터랙션 디자인+제안

2) 기능 프로토타이핑

• 실무에 빠르게 도움이 되는 프로토타이핑, 내부 프로덕트 제안

3) 마이크로 인터랙션 프로토타이핑

• 인터랙션 디자인의 라이브러리화, 카카오 내/외부 전파에 주력
• 실무자와의 커뮤니케이션 도구로 활용

 

2-2. 포털에서의 Working Process의 변화

기존에 포털에서는 사용자 분석을 통해 디자인을 하고 개발하고 검증하는 Waterfall 방식으로 진행

 

개발 방식의 변화

 

반면 Iterative 방식은 수정해야 할 문제점을 빨리 찾고 개선할 수 있는 방법

2주간의 스프린트를 통해 빠르게 결과물을 보는 실행 중심의 프로세스로 진화하고 있음

프로세스에서 가장 중요한 것은 문서화를 줄이고 프로토타이핑을 통해 시각적 커뮤니케이션을 하는 것

 

2-3. 서비스 개발 프로세스의 변화와 사례

기존 서비스 개발 프로세스의 한계

• 한 번의 리뉴얼, 신규 오픈을 위해서는 긴 프로세스를 거침
• UIUX 설계 문서가 1차 마무리되기까지 기다리게 되는 개발 리소스도 있음
• 시나리오 문서를 만들고, 찾아보기도 힘들어짐

1) 게릴라 회의와 프로젝트

• 메이저, 마이너 업데이트와는 별도로 진행되는 '소수 인원'으로 이루어진 '미니 프로젝트'
• 작지만 빠르게 의사결정하고 움직일 수 있음
• 각 파트에서 생각하는 새로운 기능 등에 대해 소수가 모여 논의
• 유의미하다고 판단될 경우 미니 프로젝트 진행
• 완료 후에는 메이저 또는 마이너 업데이트에 포함시킴
• 모든 직군들이 병렬로 작업을 하고 실시간 공유가 가능
• ex) iOS 다음 위젯의 오늘 날씨, 많이 본 뉴스, 실시간 이슈 등을 나눠서 진행

2) Parallel Design

• 시나리오 공유시점을 좀더 빠르게 조정하는 방식
• 시나리오가 완료되기 전까지 개발과 디자인이 기다리는 형태가 아니라 대표화면부터 빠르게 공유
• 이후 서비스개발을 하면서 상세 시나리오 문서를 추가해나가는 방식으로 진행
• 리뷰의 과정이 중요해짐 모든 의사결정권자가 모여 시나리오를 리뷰하고 의견을 듣고 수정하는 시간을 가져야 함
• 디자인과 개발이 병렬적으로 진행될 수 있는 장점
• > 문서대신 내용을 프로토타이핑해서 공유 / 상세 시나리오 문서는 필요한 정책, 주요 태스크 내용만 기입해서 최소화

Summary

1. 소규모 그룹의 프로젝트 (게릴라 프로젝트)

> 빠르게 결과물을 받아보고 적용하기

2. 스케치 수준의 설계 공유 (대표화면 공유)

> 완결성 있는 설계문서 기다리지 않기

3. 빠른 프로토타이핑과 테스트 (빠른 공유와 피드백)

> 문서 작업 최소화하기

 

2-4. UX 디자이너의 역할과 역량의 변화

UX Researcher

• 사용자에 대해 조사를 하고 타겟을 명확히 할 수 있도록 인사이트를 전달하는 역할
• 사용자에 대한 정량, 정성적인 인터뷰 방법론에 대한 깊은 이해가 필요
• 이를 통해 숨어있는 사용자의 니즈를 잘 파악할 수 있는 역량 필요

Interaction & Product Designer

• 서비스를 구체화시키는 작업에 집중
• 발굴된 인사이트를 실제 서비스에 어떻게 녹이는지 고민하는 역할
• 어떤 기능과 흐름으로 전달해서 사용자들의 이해를 도울 수 있는지 고민

Visual Designer

• 제품의 심미적인 부분을 구현
• 서비스, 레이아웃, 그리드, 타이포그라피, 아이콘 스타일 등 여러가지 에셋으로 서비스 아이덴티티를 만들어냄
• 서비스의 시각적인 표현을 책임지는 역할

 

PC와 모바일 기기의 인터랙션 차이

 

• PC에 비해 모바일은 다양한 인터랙션이 가능하고 점점 더 자연스러운 사용자 인터페이스를 요구하게 됨
• 손으로 스케치하는 것으로 이야기할 수 없는 영역
• > UX디자이너에게 프로토타이퍼, 프론트엔드 개발자의 역량까지 요구하게 됨

 

UX디자이너에 요구되는 역량

 

Prototyper & Front End Developer

서비스의 구조와 플로우에 대해 이해하고 간단히 UI를 만들어 실제로 동작하는 앱으로 만들어 의견을 전달하는 역할

 

2-5. Prototyping Design의 중요성 및 도구 (1)

프로토타이핑 툴은 시간 기반의 동선을 확인하기에 용이한 툴과 상태, 상황, 인터랙션을 테스트하기에 용이한 툴로 나눔

 

1) Time based Flow Design

> 프로젝트 초기에 서비스의 플로우를 그려보고 실제 서비스의 컨셉을 확인해보는 과정

 

장점

• 프로젝트 초반의 컨셉을 명확히 확인하기에 용이
• 필요한 경우 빠른 테스트 수행 가능
• 초반의 적극적인 커뮤니케이션에 유용
• 프로토타입을 통한 구성원 간 합의 도출

단점

• 리치한 인터랙션을 보여주기에 한계가 있음
• 툴마다 트랜지션과 애니메이션 수준의 한계

ex) 페이퍼 프로토타이핑(Pop 앱), 피그마

 

2-6. Prototyping Design의 중요성 및 도구 (2)

2) State based Interaction Design

• 서비스의 특정 장면을 테스트하는 데 적합한 툴
• 서비스의 특정 장면(Scene)에 대한 리치한 인터랙션 디자인을 만들어복 테스트하는 과정

장점

• 상상 속 다양한 인터랙션을 직접 구현
• 구현한 인터랙션을 기반으로 설득에 용이함
• 실제 코딩 시 명확한 데이터 값 전달 가능
• 빠르고 다양한 인터랙션 테스트 기능

단점

• 전체 서비스의 플로우를 확인하기 어려움
• 초기 러닝커브가 높아 학습에 오랜 시간이 소요
• 디테일한 인터랙션을 위해서는 코딩 필요
• 자칫 프로토타이핑의 미세한 부분까지 논의하게 될 수도 있음

Summary

1. 언어로 표현하기 어려운 디자인을 명확히 전달

2. 개발 중인 서비스의 테스트와 검증 기능

3. 제대로 만들고 있는지에 대한 지속적 확인

4. 상황에 맞는 올바른 도구를 선택하는 것이 중요

5. 반복적으로 확인하고 테스트하고 개선하는 것이 중요

6. 빠르게 만들고 또 버려질 수 있는 것이 중요

 

Takeaway

 

 

UX디자인의 프로세스는 점점 더 문서를 줄이고 빠르게 프로토타이핑하고 의견을 공유하는 방향으로 나아가고 있음

이에 맞추어 UX디자이너의 역할도 프로토타입과 프론트엔드 역할까지 요구받고 있음

이를 위한 도구들이 많이 개발되고 있고, 상황에 맞는 적절한 툴을 선택해야 함

 

3-1. 포트폴리오에 담을 콘텐츠 선택하기

역량과 결과물을 다듬어서 내가 어떤 UX디자이너인지 잘 보여줄 수 있는 포트폴리오를 준비해야 함

결과물과 결과물에 도달하기 위한 과정이 중요한 디자이너

 

어떤 문제점이나 사용자 니즈를 발굴했는가?

> 이걸 어떻게 분석했는가?

> 어떻게 해결했는가?

> 어떻게 출시했는지?

 

• 문제 해결의 스토리가 포트폴리오 내에서 잘 보여야 함 (스토리텔링)
• 채용자의 입장에서 첫 번째 페이지에  문제 해결 중심의 내용으로 정리되었는지 훑어본다
• > 문제 해결중심의 과정이 잘 담긴 첫페이지를 가진 포트폴리오를 다시 정독
• 문제 해결과정을 보여주기 위해 유저 리서치, 아이데이션, 와이어프레임을 했다처럼 단순 나열식은 안 됨
• 자신의 생각이나 인사이트가 담기지 않은 결과물을 펼쳐서 보여주는 방식은 좋지 않음
• 문제 해결 과정과 자신의 인사이트가 함께 담겨야 함

포트폴리오 구성

 

문제는 어떻게 발굴했으며, 발굴했을 때 사용한 방법론이 무엇인지, 왜 그 방법론을 채택했는지, 거기서 어떤 인사이트를 도출해서 어떻게 기능으로 풀어냈는지, 타 서비스와 차별되는 요소는 어떠한 것이 있었는지 How, Why를 중점적으로 담는 것이 중요

• 프로젝트는 3-4개정도가 적당함
• 프로젝트 묶음화
• 유저 리서치를 통한 개선, 운영 프로젝트였는지, 선행 UX 연구를 해서 신규서비스 요소를 발굴하고 제안한 프로젝트였는지, 특정 서비스의 공통 가이드라인을 작업하는 프로젝트였는지
• 플랫폼별로 구분해도 됨 (PC, 웹, 앱, 워치 등)
• 오프라인 UX 설계 경험(사옥 방문객 투어 프로그램 기획)

 

3-2. 목차 및 내용 구성하기

Contents

About me - Work Experience - UX Project Overview - Project 1~5 - Activities

 

About me

• 간략한 본인 소개, 나의 강점을 보여주는 키워드(텍스트 or 이미지), 그리고 채용을 한다면 회사에 어떤 도움을 줄 수 있을지 간단한 어필, 연락처, 운영 홈페이지나 채널(Behance, dribbble)

Work Experience

• 경력을 간단하게 요약(역할 기준, 프로젝트 기준 등)

UX Project Overview

• 무엇인지, 왜 선정했는지 이유와 함께 기입
• 개선이었는지, 선행이었는지, 새로운 플랫폼이나 디바이스였는지

Project - 문제 해결 중심의 스토리

• 프로젝트 요약(언제, 플랫폼, 팀, 나의 역할, 대표화면)
• 무슨 문제를 해결하려고 했는지, 이 문제를 어떻게 발굴했는지 리서치 방법론과 인사이트를 잘 보여주는 것이 중요
• 발굴한 인사이트를 통해 얻어낸 결과물만 보여주기

Lessons & Learned을 요약

• 어떤걸 배웠는지, 출시한 서비스가 어떤 영향력을 보여줬는지 회원 수나 페이지 뷰 등 수치적인 부분을 이야기해주는 것이 좋음 > 지표가 없다면 앞으로 어떤 데이터를 어떻게 업데이트를 할 것인지 정리하기

Activities

• 강의 진행, 수료 등 프로젝트 외 활동 / 논문이나 특허

---

프로토파이 실습 내용

 

https://cloud.protopie.io/p/38beb93f11c178ddbf7a81ab

test | ProtoPie Cloud

 

text input | ProtoPie Cloud

text input | ProtoPie Cloud