[내일배움캠프_UX/UI] 2주차 월요일 TIL

TIL (Today I learned)

 

 

🙄 오늘 나는 무엇을 했나요

오늘은 월요일이라서 새로운 과제의 발제 시간이 있었다.

새롭게 팀이 편성되어서 새로운 팀원들과 잠깐 자기소개를 했다.

UXUI 디자인 입문 1-2주차 강의를 다 들었다.

1주차 과제로 내가 자주 쓰는 앱(스타벅스)을 분석했다.

화면에 있는 요소들이 어떤 것이 있는지 확인해보고,

애플의 FIG와 머터리얼디자인의 디자인 가이드를 참고하여 

가이드대로 잘 만들어졌는지 분석을 했다.

2주차 과제로는 디자인씽킹을 해보는 것인데

하다가 내일로 미뤘다. ㅎ

😰 오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

여전히 9시간을 온전히 집중하기가 힘들다.

계획이 엄청 빡빡하게 있는 건 아닌데도 불구하고,

좀만 쉬고 해야지 하다보면 시간이 훌쩍 지나서 다 못했다.

근데 또 보면 과제하는데 사람마다 다 다르게 하는데

나는 나름 정성껏(?)하느라 시간도 꽤 걸려서

매니저님이 제안해주시는 스케줄이 빡빡할 수도 있을 것 같다.

그래도 내일은 더 집중해서 제안된 스케줄을 최대한 많이 완료해봐야겠다!

 

🧐 오늘은 어떤 것을 배웠나요

 

[1주차]

 

- UI (User Interface) 디자인
: 제품과 사용자가 소통할 있도록하는 수단, 매개체
  화면의 전체적인 구조, 시각적인 요소 디자인
- UX (User Experience) 디자인
: 사용자가 제품이나 서비스를 이용하면서 느끼는 총체적인 경험
  제품을 통해 느끼는 감정, 특정한 경험

 

- HCI (Human Computer Interaction)
: 인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야
  컴퓨터를 더 쉽게, 잘 활용할 수 있도록 개선하는 것
- CX (Customer Experience)
: 브랜드를 만나는 모든 측면에서 고객이 경험하는 느낌이나 인상
  고객 서비스(CS)가 포함
- BX (Brand Experience)
: 브랜드와 상호작용할 때 갖는 인식, 감정 등,  BX안에 CX, UX 포함
   Brand Identity (브랜드명, 로고, 컬러, 슬로건 등)

 

- UI 디자이너 : 인터페이스의 구성을 디자인 =GUI
                            레이아웃, 색상, 크기와 정렬, 컴포넌트라고 부르는 버튼, 아이콘, 이미지 등을 디자인
- UX 디자이너 : 총체적인 경험을 디자인, 조사와 분석 비중이 큼
                             유저 리서치와 테스트, 정보 구조 설계, 페르소나와 유저 시나리오 작성 등
- 프로덕트 디자이너 : UI와 UX를 포함하여 제품 전반의 경험을 디자인
                                        문제 정의, 가설 설정, 솔루션 도출, 테스트 등

* 회사마다 이름도 업무도 다 다름
스타트업 : 프로덕트 디자이너가 전반적인 UX/UI 모두 담당
대기업 : UX디자이너 UI디자이너를 구분

 

- 디자인 가이드라인
: 브랜드의 디자인 원칙과 컴포넌트별 규칙을 정의한 것

라인의 디자인 시스템

- 일관된 디자인을 위한 원칙, 규칙을 제안
- 컬러, 버튼, 폰트, 컴포넌트 디자인 스타일, 브랜드 철학까지
- 디자인 가이드라인=디자인 시스템=스타일 가이드

- 기업 : 브랜드 아이덴티티 강력하게 유지, 디자이너간 수준 평준화
- 디자이너 : 정의된 디자인을 재사용으로 업무의 효율성 높임
- 사용자 : 일관된 사용자 경험

애플의 Human Interface Guidelines (HIG, 히그)
구글의 Material Design

- UXUI 변천사

출처 : 박진희 튜터님, [스파르타코딩클럽] UXUI 디자인 입문 - 1주차

- 리얼메타포 : 1990년대, 실제 물건을 모방, 사용성은 좋지 않았다.
- 스큐어모피즘 : 2007년, 실제 물건의 특징을 최대한 반영
- 플랫디자인 : 스큐어모피즘은 실물과 가깝게 표현하기 위해 디자인에 시간이 많이 걸렸다.

                          다년간 스마트폰 사용으로 자세하게 디자인하지 않아도 UI를 이해할 수 있게 됨.

                          효율적인 디자인
- 뉴모피즘 : 스큐어모피즘과 플랫디자인의 장점을 결합
                      그림자를 사용하여 대상을 구분하고 볼륨감을 부여

 

 

 

---

 

[2주차]

 

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

아큐 디자인킷의 디자인씽킹 프로세스

- 5단계 : 공감하기 - 문제정의하기 - 아이디어발산하기 - 프로토타입 만들기 - 테스트하기
- 효율적으로 디자인하기 위해 사용
- 빠른시간에 논리적, 현실적으로 디자인할 수 있도록 도와주는 도구

- 데이터드리븐
: 데이터를 중심으로 의사결정 하는 것
- 여러가지 데이터를 활용해 사용자를 이해하고, 그들에게 잘 맞는 제품을 만들 수 있다.

- 정확도 높고, 빠른 의사결정을 위해 사용
- 데이터가 항상 답을 주지 않고, 해석하는 사람의 주관이 들어갈 수 있다.

 

- 데이터드리븐 디자인씽킹을 하여 데이터를 체계적으로 잘 활용해야 한다.

 

---

 

<1단계 공감하기 Empathy>
- 매출은 제품, 제품을 쓰는 사용자한테서 나오기 때문에
  사용자를 정확히 아는 것이 중요
- 더 많은 사용자가 제품을 잘 쓸 수 있도록
- 사용자와 공감대를 맞추고, 완전히 이해하기 위한 노력
- 충족되지 않은 욕구(Needs)와 불편한 점(Pain Point)들을 파악

1) A-E-I-O-U 관찰법
활동 Activities : 사용자의 모든 행동, 반응, 제스쳐, 선택한 방법
환경 Environments : 인터뷰 장소 주변, 시간적, 공간적 요소
상호작용 Interactions : 어떤 것과 영향을 주고 받는지, 사람, 사물, 사건 등
사물 Objects : 관찰 대상 주변에 눈에 띄는 것, 특이한 물건
사용자 User : 관찰 대상 포함 주변에 있는 모든 사람
5가지 주제에 맞춰 사용자를 관찰한 내용 정리

2) 공감지도 (Empathy Map)

가상 인물의 입장이 되어 생각과 느낌, 말과 행동, 보는 것, 듣는 것을 정리하고,

사용자가 겪을 어려움과 욕구를 유추한다.

3) 인터뷰
목적을 분명하게 설정, 적절한 사용자 그룹 모집
단답형이 아닌 다양한 대답을 들을 수 있는 개방형 질문
(ex. 어떤 감정을 느꼈나요, 어떻게 생각했나요?)

* 유저스크리닝 : 대상 모집
* 5명 :  경향성을 보임, 같은 질문 비슷한 인사이트를 얻을 수 있음


<2단계 문제 정의하기 Define>
: 정의된 문제로부터 아이디어가 나옴
무엇이 문제인가?
그것이 왜 문제인가?
풀어야할 문제 중 가장 중요한 것인가?

* GIGO(garbage-in, garbage-out)
올바르지 않은 데이터를 입력하면 올바르지 않은 결과값이 나온다
문제 정의가 정확해야 의미있는 결과를 얻을 수 있음

1) 친화도 분석

친화도 분석 방법

: 정보를 대량으로 수집, 유사한 그룹으로 분류, 결과를 정리하는 기법

2) 페르소나

출처 : 아큐디자인킷

: 사용자를 대표하는 가상의 인물
한번 설정하고, 추가로 얻는 정보를 통해 정교화, 고도화
나이, 직업, 성별 등의 인적 사항부터 
행동, 목표, 불편함을 겪는 지점들을 정의

 

3) 5 Whys

: 5번의 질문을 반복해보는 기법
근본적인 원인이 파악될 때까지 질문과 대답을 반복 후, 
마지막 대답을 토대로 인사이트를 도출, 솔루션 고민

 

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

출처 : 스포카 디자인툴킷

: 제품을 처음 만나는 시점부터 끝나는 시점까지
경험의 흐름을 시간이나 순서 등에 따라 분석하는 기법
행동을 순서대로 적기 > 행동을 기준으로 단계를 나누기 

> 단계마다 행동, 생각, 감정 등 자세히 적기 > 사용자 니즈를 살펴보고, 솔루션 고민


<3단계 아이디어 발산하기 Ideate>
: 정의한 문제를 해결할 다양한 아이디어를 내고, 적합한 아이디어 선택하는 과정

1) HMW(How Might We?)
만약 ~할 수 있다면 어떨까?라는 질문을 사용해 가정과 상상 속에서 아이디어를 이끌어 내는 방법
우리가 [어떤 역할]로 [목적과 대상]을 위하여 [니즈]를 해결할 수 있을까? 질문에서 괄호 내용을 채워보기

2) SCAMPER
7개의 키워드로 질문을 던지고 대답을 생각해는 방법
대체하기 Substitute : A 대신 B를 쓰면 어떨까?
결합하기 Combine : A와 전혀 다른 B를 합쳐보면 어떨까?
응용하기 Adjust/Adapt : A를 B 외에 C에도 사용하면 어떨까?
수정하기 Modify - 확대하기 Magnify - 축소하기 Minify
: A를 변형하면 어떨까? A를 확대/축소하면 어떨까?
다르게 활용하기 Put to another use
: A를 B가 아니라 C로 사용하면 어떨까?
제거하기 Eliminate : A의 일부를 제거하면 어떨까?
역발상 해보기 Reverse, 다시 정렬하기 Rearrange
: A→B를 B→A로 바꾸면 어떨까?

3) 브레인스토밍 (Brainstorming)
논의할 문제, 주제를 정한다 > 키워드를 보고 연상되는 것을 적는다
> 적은 내용을 보고 추가로 연상되는 것을 적으며 이 과정을 반복
질보다 양, 다양한 아이디어가 필요할 때 사용

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


<4단계 프로토타입 만들기 Prototype>
아이디어를 선정하고, 가능성 판단을 위해 최소 기능을 중심으로 만듬

최대한 빠르게 아이디어의 가능성을 검증하는 것
최대한 간결하게, 빠르게 실패를 확인하고, 빠르게 반복하는 것

 

* MVP (Minimum Viable Product)

: 목적을 달성하기 위한 최소한의 기능만 구현한 제품, 핵심 기능만 최소한으로 만드는 것

1) 와이어프레임 Wireframe

화면의 인터페이스를 단순한 선과 도형으로 표현
종이에 펜으로 스케치하거나 디자인 툴로 그린다.
기능과 플로우가 잘 드러나도록

2) 목업 Mockups

실제 프로덕트의 시각적인 컨셉을 담은 화면
와이어프레임에서 발전된 형태로 색상, 텍스트, 비주얼 등이 표현
컨셉이 잘 드러나는 화면 몇가지만 골라 만든다.

3) 프로토타입 Prototype
실제 움직임을 구현한 것
기능 및 사용성을 평가하기 위해 사용

 

- Lo-fi(Low fidelity) 프로토타입
시각적인 부분이 크게 고려되지 않은 와이어프레임 수준으로 구현
아이디어를 빠르게 검증하기 위해 클릭과 화면 전환 정도로 구현

- Hi-fi(High fidelity) 프로토타입
최종 제품과 유사한 수준으로 구현
색상, 텍스트, 비주얼과 인터렉션의 움직임 모두 실제 제품과 유사
구체적인 기능이나 화면의 사용성을 시험하기 위해
사용자가 프로토타입이라는 것을 인지하지 못할 정도로 몰입한 경험을 테스트 하기 위해


<5단계 테스트하기 Test>
프로토타입을 사용자가 직접 사용해보게 하고 피드백을 받는 단계
가설 확인 후 다시 문제 정의로 돌아가 사용자 관점을 다듬고 개선
5단계 과정을 반복하며 제품을 고도화해 나간다.

1) 사용성 테스트 (Usability Test)
사용자에게 직접 제품 보여주고 평가 받는 것
참가자, 진행자, 관찰자 필요

2) 휴리스틱 평가 (Heuristic evaluation)

특정 기준에 따라 제품의 사용성을 평가하는 것
3~5명의 평가자가 동일한 화면을 독립적으로 평가

 

[UX/UI 사전캠프_19일차] 휴리스틱 평가

 

 

3) 린캔버스 (Lean Canvas)

 

사업성 측면에서 확인하는 체크리스트로 9가지 항목에 답을 적는다.

4) 역할극 (Role Playing)
실제 제품의 사용자 역할을 해보면서 문제점을 찾아보는 방법
시나리오늘 정하고 각자 역할을 맡는다.
반응을 예상해서 행동하고, 서로 관찰하면서 문제를 발견해본다.