[본캠프] d+2.

박예지·2025년 1월 21일

[UIUX] TIL 📑

목록 보기
11/100

📌
1. 디자인 씽킹 (Design Thinking)
2. 데이터 드리븐 (Data Driven)
3. 디자인 씽킹의 단계
4. 과제

1. 디자인 씽킹 (Design Thinking)

논리적으로 제품을 만들 수 있도록 도와주는 프레임워크
가장 널리 알려져있고 많이 사용하는 방법론
by 미국의 디자인 회사 IDEO의 CEO Tim Brown
이 단계가 순서대로 진행될 수도 있고 다시 전 단계로 돌아가는 등 유기적으로 진행된다.

왜 중요한가? 🤓

아이디어를 빠른 시간에 논리적, 현실적으로 눈에 보이는 것으로 만들 수 있도록 하기 위해

2. 데이터 드리븐 (Data Driven)

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

온라인 기반의 생활 양식으로 사용자의 행동 대부분이 데이터로 쌓이고, 점점 더 데이터를 많이 활용할 수 있게 되었다. 따라서 데이터는 곧 사용자에 대한 이해를 의미한다.

여러가지 데이터를 통해 사용자를 더 잘 이해할 수 있게 되고, 그들에게 맞는 더 정확도 높은 제품을 만들 수 있다.

왜 중요한가? 🤓

  1. 정확도 높은 의사결정을 할 수 있다.
    의사결정 과정에 제품을 만드는 사람의 취향이나 주관 대신 사용자 데이터가 명확한 근거와 기준이 된다.

  2. 빠른 의사결정으로 제품 개발의 속도를 높인다.
    데이터는 다수의 사람이 빠르게 공감할 수 있는 수단으로 데이터를 활용하면 결정이 빨라지고 제품 개발 속도가 빨라진다.

데이터 드리븐과 디자인 씽킹

데이터는 도구일뿐 사용하는 사람에 따라 결과가 달라진다.
어떤 데이터를 보고, 어떻게 해석할지 결정하는 것은 사람마다 다르기 때문이다.

디자인 씽킹은 이러한 데이터를 체계적으로 활용할 수 있도록 한다.

3. 디자인 씽킹의 단계

1. 공감하기 (Empathy)

사용자는 우리가 만드는 제품을 쓰게 될 주체이기 때문에 우리는 사용자를 완벽히 이해해야한다.
사용자를 이해하는 시작점이 바로 ‘공감하기’ 이다.

인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 해야한다.

공감대를 형성한 후 사용자의 충족되지 않은 욕구 (Needs)와 불편한 점(Pain Point)을 파악하며 진짜 문제에 다가갈 수 있게 된다.

- A-E-I-O-U 관찰법

정보를 체계적으로 수집할 수 있도록 5가지의 분류로 수집하는 관찰법
인터뷰나 현장 조사에서 사용자를 관찰할 경우에 활용

활동 (Activities)

: 관찰하는 대상이 어떻게 움직이는지 파악

  • 이야기를 나누는 중에 먹거나 보인 행동
  • 특별한 움직임이나 반응, 제스쳐
  • 목적을 이루기 위해 선택한 방법

환경 (Environments)

: 활동이 일어나는 모든 시간적, 공간적 요소들 포함

  • 공간의 조명
  • 흘러나오는 음악
  • 디지털 환경 너머의 물리적인 공간
  • 개인 공간 혹은 공용 공간

상호작용 (Interactions)

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

  • 사람들간의 혹은 사람과 사물, 환경 사이의 특별한 상호작용
  • 상호작용으로 인한 감정의 변화
  • 일상적으로 반복하는 루틴

사물 (Objects)

: 관찰하는 대상 주변으로 눈에 띄는 것들이 있는지

  • 사람 혹은 활동, 환경과 연관이 있는 것
  • 사물이 가진 원래의 뜻과 다르게 쓰이고 있는 것
  • 공간과 어울리지 않은 특이한 물건

사용자 (Users)

: 관찰하는 대상을 포함하여 주변에 있는 모든 사람들

  • 직접 사용자 외에 영향을 받는 간접 사용자
  • 대상의 구체적인 행동이나 니즈, 역할, 성향

- 공감 지도 (Empathy Map)

8개의 도표를 채우며 사용자의 숨겨진 어려움과 욕구를 유추할 수 있도록 도와주는 시각화 도구

사용자를 관찰해야하는 경우에 사용

방법

  1. 우리의 대표 사용자 설정
  2. 대표 사용자의 입장이 되어 4분면에 생각과 느낌, 말과 행동, 보는 것, 듣는 것 정리
  3. 사용자가 겪을 어려움과 욕구 유추

- 인터뷰

사용자 파악의 가장 대표적인 방법

사용자를 직접 만나 다양한 질문을 던지고 대답을 들으며 정보를 얻는 것

제품 개발 전 과정에서 사용

방법

  1. 인터뷰를 통해 얻고자 하는 목적 설정
  2. 대답을 듣기에 가장 적절한 사용자 그룹 설정
  3. 그룹의 특성에 맞는 대상 모집 (유저군 스크리닝)
    5명이 가장 적절
  4. 궁금한 것들을 질문지로 작성

    💡
    예,아니오로 대답할 수 있는 질문보다는 다양한 대답을 들을 수 있는 개방형 질문을 하는 것이 중요
    ex. 이런 경우에는 어떠한 감정을 느끼셨나요?

  5. 인터뷰 대상에게 준비한 질문을 묻고 대답을 듣는다.

2. 문제 정의하기 (Define)

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

정의된 문제로부터 아이디어가 나오기 때문에 문제 정의 단계가 중요하다.

  1. 무엇이 문제인가?
  2. 그것이 왜 문제인가?
  3. 풀어야 할 문제 중 가장 중요한 것인가?

🗑️ GIGO (Garbage-In, Garbage-Out)

올바르지 않은 데이터를 입력하면 올바르지 않은 결과값이 나온다는 뜻
올바른 방향의 솔루션을 만들기 위해 현재 상태를 정확히 파악하고 (공감) 문제를 정의해야한다.

- 친화도 분석 (Affinity Diagram)

정보를 무작위로 최대한 많이 수집한 후 유사한 그룹으로 묶어서 결과를 정리하는 기법

인터뷰, 포커스 그룹 등의 정성적인 조사 결과를 분석하는데 사용
여러 주제로 흩어진 자료를 정리해 일정한 그룹으로 정리하는데 용이하다.

방법

  1. 해결해야 할 문제 작성
  2. 관련 정보를 포스트잇에 작성
  3. 관련성이 높은 것끼리 그룹핑
  4. 중복되거나 가치가 낮은 정보 제거
  5. 그룹별로 타이틀 작성
  6. 그룹핑된 결과를 살펴보며 인사이트 정리

- 페르소나 (Persona)

제품의 사용자를 대표하는 가상의 인물을 설정하는 기법

사용자를 이해하기 위해 가상의 페르소나 설정, 설정 후 지속적으로 정보를 업데이트 하여 페르소나를 더 정교하게 만들어나간다.

방법

  1. 인터뷰, 설문조사, 리서치 등 사용자에 대한 정보 수집
  2. 페르소나 템플릿에 따라 내용을 적어보며 사용자 정의 (팀원들이 모두 모여 설정하는 것 추천)
  3. 나이, 성별, 직업 등의 인적사항부터 가치관, 행동, 습관 등에 대해서도 정의

- 5 Whys

문제의 근본적인 원인을 파악하기 위해 5번의 질문을 반복해보는 기법
발견한 문제에 대해 더 깊이 생각해보기 위해 사용

방법

  1. 분석하고 싶은 문제 작성
  2. 원인이 파악될 때까지 질문 - 대답 5번 반복
  3. 마지막 대답을 통해 근본적인 원인 파악
  4. 원인이 나왔다면 원인을 해결할 수 있는 해결책 고민

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

사용자가 제품을 처음 만나는 시점부터 끝나는 시점까지의 경험의 흐름을 시간이나 순서 등에 따라 분석하는 기법

제품 전체의 경험을 점검하고 개선점을 찾고 싶을 때 사용

방법

  1. 만드는 제품, 혹은 특정 문제를 해결하기 위해 사용자가 하게 되는 행동들을 순서대로 기입
  2. 행동을 기준으로 여정을 단계별로 정리
  3. 각 단계마다 사용자의 행동, 생각, 감정 등에 대해 분석 및 작성
  4. 단계를 살펴보며 사용자의 니즈 파악, 제품 안에서 해결해줄 수 있는 부분에 대해 탐색 및 고민

3. 아이디어 발산하기 (Ideate)

정의한 문제를 해결할 다양한 아이디어를 내고 그 중에서 적합한 아이디어를 선택하는 단계

- HMW (How Might We)

‘만약 -할 수 있다면 어떨까?’ 라는 질문을 사용해 가정과 상상 속에서 아이디어를 이끌어내는 방법

새로운 방식으로 아이디어를 떠올려 보고 싶을 때 사용

방법

  1. 사용자가 겪는 어려움보다는 니즈에 집중
  2. ‘우리가 [어떤 역할]로서, 어떻게 하면 [목적과 대상]을 위하여 [니즈]를 해결할 수 있을까?’ 라는 질문에서 대괄호 안에 들어갈 내용을 채운다.

- SCAMPER

7개의 키워드로 질문을 던지고 대답을 생각해보며 생각을 전환시켜보는 방법
새로운 제품에 대한 다양한 아이디어를 발산하는데 활용

아래의 7개의 키워드에 대해 질문/답
1. 대체하기 (Substitute)
2. 결합하기 (Combine)
3. 응용하기 (Adjust/Adapt)
4. 수정하기 (Modify) - 확대하기 (Magnify) - 축소하기 (Minify)
5. 다르게 활용하기 (Put to another use)
6. 제거하기 (Eliminate)
7. 역발상 해보기 (Reverse), 다시 정렬하기 (Rearrange)

- 브레인 스토밍 (Brainstorming)

여러 사람이 모여 특정 문제에 대해 최대한 많은 아이디어를 내어보는 방법
다양한 아이디어가 필요할 때 사용

방법

  1. 사람들을 모은 뒤 함께 논의해보고 싶은 문제 혹은 주제 설정
  2. 키워드를 보고 연상되는 것을 포스트잇에 적고 잘 보이는 곳에 배치
  3. 다른 사람들이 적은 내용을 보고 추가로 연상되는 것 작성, 추
  4. 위 과정 반복 (질 < 양)

- Yes, and

네, 그리고 -’라는 대화법으로 상대방의 말에 동의한 후 이야기를 이어나보는 방식
주로 회의에서 생산적인 논의와 새로운 아이디어를 만들고 싶을 때 사용

방법

  1. 말을 할 때 항상 맨 앞에 ‘네, 그리고 - ‘ 를 붙인다.
  2. 상대방의 의견을 귀기울여 들으며 진행

4. 프로토타입 만들기 (Prototype)

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

다양한 아이디어 중 하나의 아이디어를 선정하고, 그 가능성을 판단해보기 위해 최소 기능을 중심으로 빠르게 프로토타입을 만든다.

  1. 최대한 간결
  2. 가능한 빠르게 실패 확인
  3. 빠르게 반복

🚀최소 기능 (Minimum Viable Product)

목적을 달성하기 위한 최소한의 기능만 구현한 제품을 말한다.
리소스를 효율적으로 쓰기위한 목적으로 아이디어를 확인할 수 있는 핵심 기능만 최소한으로 만드는 것을 의미한다.

- 와이어프레임 (Wireframe)

화면의 인터페이스를 단순한 선과 도형으로 표현한 것

아이디어를 구체적인 개념으로 발전시키고, 시각화하여 공유하고 싶을 때 사용

시각적 측면이 아닌 구조에 집중, 단순한 선과 도형만을 사용해서 기능과 플로우가 잘 드러나도록 표현

- 목업 (Mockup)

실제 프로덕트의 시각적인 컨셉을 담은 화면

본격적인 디자인 전에, 팀원들과 미리 시각적인 컨셉을 고융하고 피드백을 주고 받을 때 사용

실제 색상, 텍스트, 비주얼 컨셉 등이 표현, 컨셉이 잘 드러나는 화면을 몇가지 골라 제작

- 프로토타입 (Prototype)

와이어 프레임이나 목업의 화면에서 실제 움직임을 구현한 것

실제 제품을 만들기 전에 기능 및 사용성을 평가하기 위해 사용

프로토타이핑 툴인 Invision 혹은 Protopie 사용, 피그마의 Prototyping 사용

📻Lo-fi/ Hi-fi

최종 제품과 얼마나 유사하게 구현했는지에 따라 Lo-Fi (Low Fidelity)와 Hi-Fi (High Fidelity)로 나뉜다.
사용자에게 테스트하고자 하는 목적에 맞게 적절하게 선택

- Lo-fi

시각적인 부분이 크게 고려되지 않고 와이어프레임 수준으로 구현
클릭과 화면 전환 정도만 구현된 단순한 프로토타입

아이디어를 빠르게 검증해보고 싶을 때 사용

- Hi-fi

최종 제품과 유사한 수준으로 구현한 프로토타입

색상과 텍스트 스타일 등의 비주얼과 인터렉션의 움직임 모두 실제 제품 컨셉과 유사

구체적인 기능이나 화면의 사용성을 시험해보고 싶을 때 사용

사용자에게 몰입된 경험을 테스트하고 싶을 때 사용

5. 테스트하기 (Test)

프로토타입을 사용자가 직접 사용해보고 피드백을 받는 단계

테스트 과정에서 관찰하고 피드백을 받으며 , 사용자를 더 깊이 이해할 수 있게 된다.

가설의 성공 여부를 확인한 후 다시 문제 정의로 돌아가 사용자의 관점을 다듬고 프로토타입을 개선한다.

실무에서는 경우에 따라 일부 단계가 생략되기도 하지만 보통 이러한 5단계의 과정을 반복하며 제품을 고도화해 나간다.

- 사용성 테스트 (Usability Test)

사용자에게 직접 제품을 보여주고 평가를 받는 것

제품 출시 전, 후 모두 가능. 제품 개발 단계의 모든 단계에서 제품을 평가하고 싶을 때 활용

방법

  1. 테스트 진행자, 참가자, 관찰자, 평가할 제품이 필요
  2. 평가하고 싶은 내용을 시나리오로 준비
  3. 참가자에게 수행하도록 안내
  4. 테스트가 끝난 후, 발견한 문제점을 모아 개선점 도출

- 휴리스틱 평가 (Heuristic Evaluation)

특정 기준에 따라 제품의 사용성을 평가하는 체크 리스트 (UXUI 디자인 체크리스트)

사용자가 사용하기에 편리하게 설계되었는지 평가하기 위해 활용

방법

  1. 휴리스틱 평가 기준이 적힌 문서 제작
  2. 3-5명의 평가자가 동일한 화면을 독립적으로 평가

- 린캔버스 (Lean Canvas)

제품을 평가할 수 있는 9개의 항목으로 구성된 체크리스트 (비즈니스 체크리스트)

제품의 사업성 측면에서 놓친 것은 없는지 확인하기 위해 사용

방법

  1. 한장짜리 종이에 9가지 항목에 대한 질문
  2. 스스로 답변

- 역할극 (Role Playing)

실제 상품을 사용하는 상황을 가정하고 사용자 역할을 대신해 보며 문제점을 찾아보는 방법

실제 사용자를 만날 수 없는 상황에서 사용자를 이해하기 위해 사용

방법

  1. 사용자가 어떤 방식으로 경험할 지 시나리오 설정
  2. 각자 역할 분배
  3. 특정 상황에서 사용자가 어떻게 반응할지 떠올려보고 행동
  4. 관찰하며 발견한 문제를 적어보며 사용자 이해

4. 과제

👩‍💻
스카이스캐너 앱의 홈 화면을 디자인씽킹 프로세스를 활용해 개선 아이디어를 도출해 보세요.
각각 다음과 같은 방법론을 사용해 봅시다.
1. 1단계 공감하기에서는 공감지도 (Empathy Map)
2. 2단계 문제 정의하기에서는 5 whys
3. 3단계 아이디어 도출하기에서는 SCAMPER

1. 공감지도

(부끄🤭)

2. 5 Whys

1. 왜 스카이 스캐너를 사용해야할까?

최저가로 항공권을 구입하고 여행에 필요한 옵션들을 편리하게 예약할 수 있도록 하기 위해

2. 여행에 필요한 옵션들을 정말 편리하게 예약할 수 있을까?

항공권을 검색하면 해당 목적지의 호텔 리스트가 관련지어 나온다. 또한 홈 화면에서 숙소와 렌터카를 검색해볼 수 있다. 하지만 여행지에서의 액티비티와 관련한 선택지는 없다.

3. 정말 최저가일까?

Drops라는 기능을 홈 화면의 네비게이션 바에 위치 시켜 가격이 최소 20% 인하된 왕복 항공권 상품을 소개한다.

4. Drops라는 기능이 편리한가?

출발지만 선택하여 내가 있는 위치에서 저렴하게 갈 수 있는 항공권을 소개하지만 내가 가고싶은 목적지에 대한 최저가 항공권을 보여주는 것은 아니다.

5. 내가 원하는 목적지에 대한 최저가 항공권은 어떻게 찾아봐야할까?

검색 페이지로 넘어가 목적지를 입력하고 최저가 필터를 클릭하여 찾아봐야한다.

3. SCAMPER

1. 대체하기 (Substitute)

항공권과 렌터카를 이동 수단으로 대체한다.
이동 수단 페이지에서 항공권인지 렌터카인지 고른다.

2. 결합하기 (Combine)

Drops와 내가 원하는 목적지 설정 기능을 결합하여 그 선택지 내에서 가격이 최소 20% 인하된 왕복 항공권을 보여준다.

3. 응용하기 (Adjust/Adapt)

박물관 입장권, 전망대 입장권 등 여행지에서 할 수 있는 액티비티에 관련된 정보들도 함께 제공한다.

4. 수정하기 (Modify) - 확대하기 (Magnify) - 축소하기 (Minify)

호텔을 숙박으로 수정하고 호텔 외에도 호스텔, 민박 등의 다양한 숙박 시설에 대한 정보도 제공한다.

5. 다르게 활용하기 (Put to another use)

최저가가 아닌 가장 편하고 빨리 갈 수 있는 항공권을 먼저 보여준다.

6. 제거하기 (Eliminate)

항공권 페이지를 없애고 가격 인하된 항공권만 보여주는 기능만 남긴다.

7. 역발상 해보기 (Reverse), 다시 정렬하기 (Rearrange)

항공권, 호텔, 렌터카 3개의 네비게이션을 이동수단, 숙박, 액티비티로 재정렬한다.

🎙️소감

디자인 씽킹과 데이터 드리븐의 개념에 대해 처음 배웠는데 신기하고 재밌었다.
데이터 드리븐에 대해 더 깊게 알아보고 싶다는 생각이 들었다.
내가 보고있는 화면들이 이런 중요한 단계를 거쳐서 만들어 졌을 것을 생각하니 좀 다르게 보이는 것 같다.

그리고 숙제를 하면서 디자인 씽킹의 방법론들을 처음 수행해보았는데 생각보다 쉽지 않았다.
하면서도 '이게 맞나?' 라는 생각이 많이 들었고 SCAMPER를 쓸 때는 혼자 '이건 진짜 아닌데'라는 생각이 많이 들었다.
몇번 더 해보면서 익혀야겠다!

🐰 다음 시간에 학습할 내용
UX/UI 실무 프로세스
테스트 케이스
디자인 QA

profile
Life is pain au chocolat 🍞

0개의 댓글