[내일배움캠프 19일차(2)] UXUI 디자인 입문 수강

<UXUI 디자인 입문 2주차>

수업 목표

• 디자인씽킹이 무엇인지 이해한다.
• 디자인씽킹의 단계별 세부 내용을 익힌다.
• 디자인씽킹의 각 단계의 방법론들을 파악하고, 필요할 때 활용할 수 있다.

 

 

 

 

디자인 씽킹이란?

사용자에 대한 이해를 기반으로 문제를 찾고 제품을 만들어 검증하는 프로세스이다.

아이디어를 빠른 시간에 논리적, 현실적으로 눈에 보이는 것으로 만들 수 있도록 도와준다.

 

이 5단계의 프로세스는 꼭 1번에서 5번으로 한 방향으로만 진행되는 건 아니다.

필요에 따라서 되돌아오기도 하고 일부를 반복하기도 한다.

 

 

 

 

 

데이터드리븐이란?

데이터드리븐은 데이터를 중심으로 의사결정 하는 것을 말한다.

 

-데이터드리븐이 중요한 이유

1) 정확도 높은 의사결정을 할 수 있다.

2) 빠른 의사결정으로 제품 개발의 속도를 높인다.

 

데이터는 사용자를 이해하는 도구이고,

디자인씽킹은 데이터를 체계적으로 활용할 수 있게 해준다.

그래서 우리는 데이터드리븐 디자인씽킹을 해야 한다.

 

 

 

 

 

[디자인씽킹 1단계] 공감하기 Empathy

1) 디자인씽킹에서 가장 중요한 단계

 

2) ‘공감하기’란?

• 이 단계에서는 인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 해야 한다.
• 공감대를 형성한 후 사용자의 충족되지 않은 욕구(Needs)와 불편한 점(Pain Point)들을 파악하며 진짜 문제에 다가갈 수 있게 된다.

3) 공감하기 단계에서 활용할 수 있는 방법들

• A-E-I-O-U 관찰법
• 공감지도 (Empathy Map)https://www.toolo.org/sub/tool_detail.php?idx=15&sch_nm=%EA%B3%B5%EA%B0%90%EC%A7%80%EB%8F%84&ord=1&sch_nm=%EA%B3%B5%EA%B0%90%EC%A7%80%EB%8F%84&ord=1

툴 상세 | 툴로 TOOLO

• 인터뷰https://designkit.skcc.com/Interview-1

Interview — accu.DESIGN KIT

 

4) AEIOU로 사용자 이해하기

• 활동 Activities

       관찰하는 대상이 어떻게 움직이는지 살펴본다.

       사용자의 모든 행동을 눈여겨보는 것이 좋다.

• 환경 Environments

       관찰하는 곳이나 인터뷰하는 장소 주변을 둘러본다.

       활동이 일어나는 모든 시간적, 공간적 요소들이 여기에 포함될 수 있다.

• 상호작용 Interactions

       관찰하는 대상이 어떤 것과 영향을 주고받는지 관찰한다.

       상호작용은 사람이나 사물, 사건 등 다양한 관계 사이에서 일어난다.

       예를 들어, 카페에 방문한 사용자를 살펴본다면 키오스크 사용법을 정확히 알고 있는지,

       주문하는 데에 어려움은 없는지, 곤란한 상황에서 어떻게 행동하는지 살펴본다.

• 사물 Objects

      관찰하는 대상 주변으로 눈에 띄는 것들이 있는지 확인한다.

      당연하게 있어야 하는 물건 말고도 특이한 물건은 없나 확인한다.

• 사용자 Users

      관찰하는 대상을 포함하여 주변에 있는 모든 사람을 살펴본다.

 

 

 

 

 

[디자인씽킹 2단계] 문제 정의하기 Define

1) ‘문제 정의하기’란?

공감으로 얻은 정보를 해석해 사용자가 불편함을 느끼는 지점을 발견하는 단계이다.

 

문제 정의가 잘 되었다면 다음의 질문에 대답할 수 있어야 한다.

• 무엇이 문제인가?
• 그것이 왜 문제인가?
• 풀어야 할 문제 중 가장 중요한 것인가?

2) 문제 정의하기 단계에서 활용할 수 있는 방법들

• 친화도 분석 (Affinity Diagram)

https://www.toolo.org/sub/tool_detail.php?idx=39

툴 상세 | 툴로 TOOLO

• 페르소나 (Persona)

https://designkit.skcc.com/Persona

Persona — accu.DESIGN KIT

• 5 Whys

      문제의 근본적인 원인을 파악하기 위해 5번의 질문을 반복해 보는 기법이다.

 

• 사용자 여정 지도(Customer Journey Map)

https://designkit.skcc.com/JourneyMap

JourneyMap — accu.DESIGN KIT

 

3) 5 Whys를 이용해 문제 정의하기

 

1. 관찰한 사용자의 문제나 이슈를 상단에 적고 시작한다.
2. Why 1: 기록한 내용에 대해 '왜?'라고 질문한다.
3. Why 2: 첫 번째 질문에 대답하고 다시 그 대답에 대한 이유를 질문한다.
4. Why 3, 4, 5: 원인이 파악될 때까지 질문과 대답을 되풀이한다.
5. 마지막 대답을 토대로 문제의 근본적인 원인이나 인사이트를 도출해 본다.

 

 

 

 

[디자인씽킹 3단계] 아이디어 발산하기 Ideate

1) 아이디어 발산하기

 

2) 아이디어 발산하기 단계에서 활용할 수 있는 방법들

• HMW(How Might We?)

https://designkit.skcc.com/HMW

HMW — accu.DESIGN KIT

• SCAMPER

       7개의 키워드로 질문을 던지고 대답을 생각해 보면서 생각을 전환해보는 방법이다.

• 브레인스토밍 (Brainstorming)

https://designkit.skcc.com/BrainStorming-1

BrainStorming — accu.DESIGN KIT

• Yes and

       “네, 그리고~”라는 대화법으로 상대방의 말에 동의한 후 이야기를 이어 나가 보는 방식이다.

 

 

 

 

 

[디자인씽킹 4단계] 프로토타입 만들기 Prototype

1) ‘프로토타입 만들기’란?

사용자가 아이디어를 경험할 수 있도록 구체적인 제품이나 서비스로 개발한다.

 

-프로토타입의 핵심

• 최대한 간결하게
• 가능한 한 빠르게 실패를 확인
• 빠르게 반복하기

2) 프로토타입 단계에서 활용할 수 있는 방법들

• 와이어프레임 Wireframe

https://blog.adobe.com/ko/publish/2018/03/06/everything-you-need-to-know-about-wireframes-and-prototypes

와이어프레임과 프로토타입에 대한 모든 것

• 목업 Mockups

https://yozm.wishket.com/magazine/detail/1306/

와이어프레이밍, 목업, 프로토타이핑 뭐가 다른건가요? | 요즘IT

• 프로토타입 Prototype

https://blog.adobe.com/ko/publish/2018/03/06/everything-you-need-to-know-about-wireframes-and-prototypes

와이어프레임과 프로토타입에 대한 모든 것

 

3) Lo-fi(Low fidelity)와 Hi-fi(High fidelity) 프로토타입

 

-Lo-fi(Low fidelity) 프로토타입

• 시각적인 부분이 크게 고려되지 않은 와이어프레임 수준으로 움직임을 구현한 프로토타입을 의미한다.
• 디지털 툴을 사용하지 않고 펜으로 종이에 그려서 테스트하거나, 클릭과 화면 전환 정도로 구현된 단순한 프로토타입이 여기에 속한다.

-Hi-fi(High fidelity) 프로토타입

• 최종 제품과 유사한 수준으로 구현한 프로토타입을 의미한다.
• 색상과 텍스트 스타일 등의 비주얼과 인터렉션의 움직임 모두 실제 제품 컨셉과 유사해야 한다.

 

 

 

 

[디자인씽킹 5단계] 테스트하기 Test

1) ‘테스트’란?

테스트는 프로토타입을 사용자가 직접 사용해 보게 하고 피드백을 받는 단계이다.

 

2) 테스트 단계에서 활용할 수 있는 방법들

• 사용성 테스트 (Usability Test)

https://www.toolo.org/sub/tool_detail.php?idx=27

툴 상세 | 툴로 TOOLO

• 휴리스틱 평가 (Heuristic evaluation)

https://yozm.wishket.com/magazine/detail/1038/

디자이너의 휴리스틱 평가방법 10가지: 상편 | 요즘IT

• 린캔버스 (Lean Canvas)

       제품을 평가할 수 있는 9개의 항목으로 구성된 도표이다.

• 역할극 (Role Playing)

https://www.toolo.org/sub/tool_detail.php?idx=52

툴 상세 | 툴로 TOOLO

 

 

 

 

 

 

<UXUI 디자인 입문 3주차>

수업 목표

• 제품팀이 무엇인지 이해한다.
• UX/UI 디자이너의 기본적인 디자인 프로세스를 파악한다.
• UX/UI 디자이너가 실무에서 누구와, 어떤 방식으로 일하는지 익힌다.

 

 

 

 

제품팀이란?

제품을 만들기 위해 각자 다른 전문적인 능력을 갖춘 사람들이 모인 팀을 말한다.

 

목적조직은 특정한 목적을 달성하기 위해 여러 직무의 사람들이 모인 팀을 말한다.

예를 들어, 핀테크 회사라면 도메인별로 대출팀, 카드팀, 예/적금팀으로 나뉠 수 있다.

 

기능조직은 유사한 직무끼리 구성된 팀을 말한다.

예를 들어, 기획팀, 디자인팀, 개발팀 등이 여기에 속한다.

 

매트리스 조직은 구성원이 기능조직과 목적조직이 교차된 형태로 소속된 구성을 말한다.

예를 들어, 프로덕트 디자이너는 기능조직인 디자인팀에 속하면서 동시에 목적조직인 스쿼드에 속할 수 있다.

 

 

-제품팀이 일하는 방식

린스타트업은 빠르게 제품을 테스트하고 그 결과를 다시 제품에 반영하는 운영 방식이다.

• 린스타트업은 불확실성이 높은 스타트업에서 제품을 효과적으로 개발하기 위해 고안된 전략이다.
• 핵심은 낭비를 줄이는 것으로, 적은 리소스로 제품을 만들어서 빠르게 시장에 검증해 가면서 기능을 고도화해 나가는 방법을 말한다.
• 린스타트업에서는 ‘만들기 → 측정 → 학습’을 반복하면서 피드백을 받고 사용자 중심으로 제품을 만드는 것을 중요하게 생각한다.

 

 

애자일은 제품을 만드는 방법론 중 하나이다.

일정한 주기로 빠르게 제품을 배포해 사용자의 피드백을 받고 요구사항을 수정해 나가는 과정을 반복하는 거다.

• 애자일(Agile)은 사전적으로 날렵한, 민첩한이라는 뜻이 있다.
• 애자일한 제품팀은 1~4주의 스프린트 단위로 제품을 개발, 테스트하고 피드백을 받아 개선해 나가는 과정을 반복한다.

 

폭포수 방식은 애자일과 반대 방식이다.

 

스프린트

• 스프린트는 사전적 의미는 짧은 거리를 전속력으로 달리는 것이다.
• 제품팀에서 말하는 스프린트는 집중해서 여러 태스크를 완료하는 1~4주 정도의 짧은 기간을 말한다.
• 스타트업에서는 스프린트를 여러 번 반복하며 밀도 있게 일한다.

스크럼

• 1~4주 단위의 스프린트 안에서 목표를 정하고 우선순위에 따라 제품을 개발하는 방식이다.
• 스프린트에서 설정한 목표에 따라 요구사항 설계 → 디자인 → 개발 → 테스트 → 배포의 과정으로 제품을 개발하는 애자일 방법론의 하나다.

이터레이션

• 짧은 주기로 스프린트를 이어 나가는 것을 이터레이션이라고 표현한다.

 

 

 

 

 

UX/UI 실무 프로세스

1) 디자인 프로세스

 

2) 프로덕트 스펙 문서

프로덕트 스펙은 제품을 만들거나 개선할 때 사용하는 문서로 기능의 사양을 정의한 가이드이다.

회사에 따라서 PRD(Product Requirements Document, 제품 요구사항 정의서)라고 부르기도 한다.

 

-프로덕트 스펙이 필요한 이유

• 팀원 모두가 같은 생각을 갖고 제품을 만들 수 있도록 가이드하는 역할을 한다.

-기획 배경 & 문제 정의

• 문제 발견 과정
• 문제로 정의한 이유
• 문제의 원인
• 누가 이 문제에 영향을 받는지

-솔루션 설명

• 페르소나
• 사용자 시나리오
• 기능별 주요 특징 & 요구사항
• 예외 상황 및 Edge Case 정의
• 최종 시안

-실험 설계

• 실험 가설 : 문제 해결을 통해 만들어 내고자 하는 결과 
• 실험 방식
• 결과 평가 : 문제가 해결되었는지 판단할 수 있는 방법
• 실험 기간

-예상 일정

• 프로덕트 스펙 초안 작성 완료 예상 일정
• UI/UX 디자인 최종 시안 제작 완료 예상 일정
• 개발 분야별 예상 일정 : 프론트엔드, 서버, 이벤트 설계, QA가 각각 세부적으로 작성되어야 한다.
• 배포 목표 일정

3) 디자인 공유하고 피드백 받기

• 디자이너의 업무의 대부분은 디자인과 피드백, 거듭되는 수정으로 이루어진다.
• 기획 배경과 맥락을 잘 이해해야 좋은 피드백이 나올 수 있다.
• 피드백을 주는 사람이 전체적인 내용을 알 수 있도록 충분한 정보를 함께 전달한다.

-디자인 피드백을 요청할 때 포함하면 좋을 것

• 배경
• 솔루션의 의도
• 필수 리뷰어
• 참고 문서
• 피드백 기한

 

 

 

 

[실무 프로세스 1] 협업하기

1) 협업이란?

• 협업이란 각 직무의 리소스가 낭비 없이 좋은 솔루션을 만드는 데 집중적으로 쓰이는 것을 의미한다.
• 서로가 더 좋은 퍼포먼스를 낼 수 있도록 돕고 시너지를 낼 수 있도록 하는 것이 좋은 협업이다.

2) PO/PM 이해하기

• PM은 Product Manager의 약자이다. 프로덕트 매니저는 제품의 전략을 세우고, 우선순위를 결정해 실행한다.
• PO는 Product Owner의 약자이다. 프로덕트 오너는 제품에 대한 오너십을 갖고 제품이 시장에 잘 전달될 수 있도록 관리한다.

3) 엔지니어 이해하기

• 프론트엔드 엔지니어는 앱/웹의 페이지, 화면 안의 각종 컴포넌트 즉, UI를 코드로 구현한다.
• 백엔드 엔지니어는 제품에 필요한 정보를 저장하거나 전송하고, 관리하는 영역을 담당한다.
• QA 엔지니어는 QA 테스트를 계획, 진행하고 제품 전반적인 품질을 높이는 역할을 한다.
• 데이터 애널리스트는 수집하고 분석해서 인사이트를 제공한다.

4) UX/UI 직무 이해하기

• BX 디자이너는 Brand eXperience의 줄임말로, 브랜드 경험과 관련된 전반적인 디자인을 하는 사람이다.
• UX writer는 제품 내의 문구를 담당하는 사람이다.

 

 

 

 

[실무 프로세스 2] 실험 문화

1) 실험이란?

제품의 개선이 실제로 사용자에게 더 나은 경험으로 이어지는지 데이터로 검증하는 것이다.

 

2) 실험 환경 이해하기

• 실험은 대부분 A/B 테스트로 진행된다.
• A/B 테스트 설계를 할 수 없을 때, 특정한 상황에서는 전후 비교 테스트를 하기도 한다.

 

 

 

 

[실무 프로세스 3] 디자인 QA

1) QA란?

QA는 Quality Assurance의 약자로, 제품이 출시되기 전에 기능을 테스트하는 것을 말한다.

 

-QA의 목적

• 사용자가 제품을 이용할 수 없을 만큼의 치명적인 결함은 없는지 확인한다.
• 조직 전체에서 기대하는 수준의 품질이 갖춰졌는지 확인한다.
• Product Spec 문서에서 작성했던 명세대로 잘 구현되었는지 확인한다.
• 특수한 상황에서 예상하지 못한 대로 동작하지는 않는지 확인한다.
• 전반적인 UX가 사용하기 편리한지 확인한다.

2) QA 문서

• 체크리스트(CL)

       예/아니요, 혹은 Pass/Fail로 답변할 수 있는 확인 성격의 항목을 나열한 목록이다.

• 테스트 시나리오(TS)

       기획한 기능이 모두 제대로 동작하는지 확인하기 위해 작성하는 문서이다.

• 테스트 케이스(TC)

       특정 조건에서 요구 사항을 충족하는지 확인하기 위해 여러가지 케이스를 작성한 문서이다.

 

3) 디자인 QA

디자인이 정확하게 개발되었는지 확인하는 절차이다.

 

-디자인 QA에서 발견한 이슈 공유하기