UXUI

다시 만난 주주 👧🏻

deo11 2025. 5. 12. 21:15

디자인 씽킹

- 논리적으로 제품을 만들 수 있도록 도와주는 프레임워크 중 하나

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

▪️공감하기(Empathy)

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

▪️문제 정의하기(Define)

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

▪️아이디어 발산하기(Ideate)

- 다양한 아이디어를 내고, 그 중에서 가장 적합한 아이디어를 선택하는 단계

▪️프로토타입 만들기(Prototype)

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

▪️테스트하기(Test)

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

 

📌1단계 공감하기

사용자를 이해하는 시작점

 

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

활동(Axtivities)

- 관찰하는 대상이 어떻게 움직이는지 살펴보기

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

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

환경(Environmeants)

- 관찰하는 곳이나 인터뷰하는 장소 주변을 둘러보기

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

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

상호작용(Interactions)

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

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

ex. 특별한 상호작용, 상호작용으로 인한 감정의 변화, 일상적으로 반복하는 루틴

사물(Objects)

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

- 당연하게 있어야하는 물건을 제외하고 특이한 물건은 ?

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

사용자(User)

- 관찰하는 대상을 포함하여 주변에 있는 모든 사람을 살펴보기

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

 

▪️공감지도(Empathy Map)

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

출처:toolo

▪️인터뷰

- 사용자 파악하는 가장 대표적인 방법으로 사용자를 직접 만나 다양한 질문을 던지고 대답을 들으며 정보를 얻는 것을 의미

- 인터뷰를 통해 얻고자하는 목적을 분명하게 설정

- 대답은 예, 아니오가 아닌 다양한 대답을 들을 수 있는 개방형 질문을 해야함

 

📌2단계 문제 정의하기

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

 

▪️친화도 분석(Affinity Diagram)

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

- 인터뷰, 포커스 그룹, 필드스터디 등의 정성적인 조사 결과를 분석하는데 유용하게 쓸 수 있다.

- 여러 주제로 흩어진 자료를 정리해 일정한 그룹으로 정리하기 좋다.

- 가장 먼저 해결해야할 문제 적기

- 관련한 정보를 포스트잇에 다양하게 적는다.

- 중복되거나 가치가 낮은 정보는 제거

- 유사성, 상관성을 고려하여 그룹화하고 그룹의 타이틀을 적기

- 그룹화한 결과를 살펴보며 인사이트 정리

 

▪️페르소나(Persona)

제품의 사용자를 대표하는 가상의 인물을 뜻한다.

- 사용자를 잘 이해하기 위해 가상의 페르소나를 설정

- 한 번 설정하고 끝이 아니라 추가로 얻는 정보를 통해 페르소나를 정교하게 수정해 나간다.

- 인터뷰, 서베이, 데스크 리서치 등 사용자에 대해 알 수 있는 정보를 모은다.

- 페르소나 템플릿을 적어보며 사용자를 정의

- 페르소나 템플릿에는 나이, 직업, 성별 등의 인적 사항부터 행동, 목표, 불편함을 겪는 지점들이 정의되어야 한다.

 

▪️5Whys

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

발견한 문제에 대해 더 깊이 생각해 보기 위해 사용

- 분석하고싶은 문제를 적는다.

- 원인이 파악될 때까지 5번을 반복하며 질문과 대답을 되풀이한다.

- 마지막 대답을 통해 근본적인 원인을 파악한다.

- 원인이 나왔다면 해결할 수 있는 솔루션을 고민해본다.

예시

 

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

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

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

- 만드는 제품, 혹은 특정 문제를 해결하기 위해 사용자가 하게 되는 행동을 숭서대로 적는다.

- 행동을 기준으로 여정을 몇 단계로 나눈다.

- 단계마다 사용자의 행동, 생각, 감정 등을 분석해 자세히 적는다.

- 단계를 살펴보며 사용자의 니즈가 무엇인지 살펴보고 제품 안에서 해결해 줄 수 있는 부분이 있을지 고민해 본다.

 

📌3단계 아이디어 발산하기

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

 

▪️HMW(How Might We?)

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

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

- 사용자가 겪는 어려움 보다는 니즈에 집중

- 우리가 [어떤 역할]로써 어떻게 하면 [목적과 대상]을 위해 [니즈]를 해결할 수 있을까? 라는 질문에서 대괄호 안에 들어갈 내용을 채워보기

 

▪️SCAMPER

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

SCAMPER로 브레인스토밍

새로운 제품에 대한 다양한 아이디어를 발산하는데 활용하기 좋다.

7개의 키워드에 하나씩 접목하여 새로운 아이디어를 떠올려보기

 

▪️브레인스토밍

여러 사람이 모여 특정 문제에 대해서 최대한 많은 아이디어를 내보는 방법

다양한 아이디어가 필요할 때 사용

- 사람들을 모은 뒤 함께 논의해보고 싶은 문제 혹은 주제를 정하기

- 키워드를 보고 연상되는 것을 포스트잇에 적고 잘 보이는 곳에 붙히기

- 다른 사람들이 적은 내용을 보고 추가로 연상되는 것을 적고 이어서 붙히는 과정 반복

* 질보다 양이라는 점을 유념

 

▪️Yes and

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

주로 회의에서 생간적인 논의와 새로운 아이디어를 만들고 싶을 때 사용

-말할 때 항상 앞에 '네, 그리고~'를 사용

 

📌4단계 프로토타입 만들기

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

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

- 문제를 해결하는 주요 컨셉이 프로토타입으로 잘 표현되어야 아이디어를 정확하게 평가 가능

 

▪️와이어프레임

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

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

- 종이에 펜으로 스케치하거나 디자인 툴을 이용해 그리기

- 와이어프레임의 핵심은 시각적 측면이 아닌 구조에 집중

- 단순한 선과 도형만 사용해 기능과 플로우가 잘 드러나도록 표현해야 한다.

 

▪️목업

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

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

- 와이어프레임에서 발전된 형태

- 색상, 텍스트 스타일, 비주얼 컨셉 등이 표현되어야 한다.

- 모든 화면을 다 그릴 필요는 없으며 컨셉이 잘 드러나는 화면을 몇가지 골라 제작

 

▪️프로토타입

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

프로토타이핑 툴인 Invision 혹은 Protopie를 이용하거나 피그마 자체 기능인 Prototyping을 사용하여 동작 구현

 

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

- 시각적인 부분이 크게 고려되지 않은 와이어프레임 수준으로 움직임을 구현한 프로토타입을 의미

- 디지털 툴을 사용하지 않고 펜으로 종이에 그려 테스트하거나, 클릭과 화면 전환 정도로 구현된 단순한 프로토타입이 여기에 속한다.

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

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

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

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

- 구체적인 기능이나 화면의 사용성을 시험해보고 싶을 때나 사용자가 프로토타입이라는 것을 인지하지 못 할 정도로 몰입한 경험을 테스트를 하고 싶을 때 사용

 

📌5단계 테스트하기

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

- 사용자를 더 깊이 이해할 수 있게 된다.

- 가설이 맞았는지 틀렸는지 확인 후 다시 문제 정의로 돌아가 사용자의 관점을 다듬고 프로토타입을 개선

 

▪️사용성 테스트

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

- 제품 출시 전, 후 모두 가능

- 제품 개발 단계 전반에 언제든지 제품을 평가하고 싶을 때 사용

- 진행자, 참가자, 관찰자, 평가할 제품이 필요

- 평가하고 싶은 시나리오를 준비하고 참가자에게 수행하도록 안내

- 테스트가 끝난 후 발견한 문제점을 모아 개선점을 도출

 

▪️휴리스틱평가

특정 기준에 따라 제품의 사용성을 평가하는 것

화면이 사용자가 쓰기 편리하게 설계되었는지 평가하기 위해 활용

평가 기준이 적힌 문서를 만들어 3~5명의 평가자가 동일한 화면을 독립적으로 평가

 

▪️린캔버스

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

제품의 사업성 측면에서 놓친 것은 없는지 확인하기 위한 체크리스트로 사용

한 장짜리 종이에 다음의 9가지 항목에 대한 질문을 스스로 던져보고 답을 적는다.

 

▪️역할극

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

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

- 사용자가 어떤 방식으로 경험할지 시나리오를 정하고 각자 역할을 맡는다.

- 특정 상황에서 사용자가 어떻게 반응할지 떠올려보고 행동한다.

- 서로를 관찰하면서 발견한 문제를 적어보고 사용자를 이해해본다.

 

Data-Driven과 디자인씽킹

▪️데이터드리븐

- 데이터 중심으로 의사결정 하는 것

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

- 사용자 데이터라는 명확한 근거와 기준이 객관적으로 의사 결정할 수 있게 뒷받침

- 의사결정에 제품을 만드는 사람의 취향이나 주관이 들어가지 않도록 도와줌

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

- 데이터는 다수의 사람이 빠르게 공감할 수 있는 수단

- 다수가 같은 의견이면 결정이 빨라지고 전체적인 제품 개발 속도가 올라간다.


A4조에서 A9조로
마주보기로 하고 돌아 앉은 다시 만난 ㅎㅣ주,,

 

오늘은 월요일 + 새로워진 환경 탓이라고 생각하며 흐느적 거리는 하루를 보냈다. 내일은 개인과제도 있으니까 정신차리고 해야지,,