UX 디자인 개론 - Chapter 1

코드잇에서 웹 퍼블리셔 과정 수강하며 html css 기초를 배우던 중에 클래스 101에서 개발 일을 하시다가 UX 디자이너로 커리어를 전환하신 분의 UX 디자인 강의를 발견했다. 사용자 중심적으로 사고하고 서비스를 설계하는 것이 IT 비지니스에 관여된 여러 직무의 유용한 무기가 될 수 있다... 음 일단 디자인 배워두면 나중에 도움될 것 같은데? 라며 무턱대고 수강했다. 과연 내가 잘 할 수 있을지... 일단 도전이다.

이미지를 누르면 링크로 연결

 

---

사용자의 문제를 해결하는 UX

시장에 임팩트를 낼 수 있는 아이디어는 누구나 가질 수 있다. 그러나 그것을 구체화하고 시각화 하여 제시하는 것은 상상하는 것 처럼 간단하지 않다. UX디자인은 사용자들과 시장이 원하는 것을 구체화 하는 데 핵심적인 역할을 한다.

강의에서는 웹과 모바일 사용성 원칙을 강조하는 도서를 한 권 추천해 주고 있었다. 

스티브 크룩 <사용자를 생각하게 하지 마!>

디자인 할 때 사용자의 입장에서의 검증은 필수다. 한번 읽어봄직한 도서인 것 같다. 배송받으면 추후에 리뷰해보도록 하겠다.

 

 

---

UX 기초 알아보기

사용자 중심의 디자인 프로세스 중 가장 대표적인 모델

더블 다이아몬드 프로세스

첫 번째 다이아몬드는 문제를 찾는 과정, 두 번째 다이아몬드는 문제를 해결하는, 솔루션을 찾는 과정이다.

 

첫 번째 Discover에서 사용자들을 관찰하고, 비즈니스 골과 이해관계자들의 의견을 듣게 된다. 문제가 무엇인지 파악하고 사용자들을 학습하는 단계이다. 인풋이 좋아야 아웃풋이 좋듯이, 이 단계에서 양질의 정보와 관찰이 이루어져야 한다. UX 프로세스에 있어서 가장 중요한 단계라고 볼 수 있다.

두 번째는 Define, 사용자가 가지고 있는 문제를 정의하고, 솔루션을 도출하는 단계이다. 

두개 다이아몬드 사이의 가운데는 전체 프로젝트에서 방향성과 전략을 정하는 단계라고 볼 수 있다. 솔루션에 대한 정의와 서비스의 컨셉 등이 이 단계에 속한다.

세 번째 Develope 단계에서 많은 스케치와 프로토타입 등을 거쳐 아이디어들을 구체화해 나간다. 이때 프로토타입(시안) 단계에서 시각적인 디자인 부분도 포함된다.

네 번째 Deliver 단계에서는 시각화된 솔루션들을 테스트해보게 된다. 이 때 사용자들을 대상으로 사용성 테스트를 통해 피드백을 얻고 개선하는과정을 거치게 된다.

 

---

UX와 UI는 어떻게 다를까?

UX Design : 서비스/제품을 사용하면서 총체적으로 느끼는 사용자의 경험을 디자인

UI Design : 사용자가 서비스/제품을 사용하면서 인터랙션하게 되는 제품의 접점을 디자인

 

간단히 말하면 UI 디자인은 비주얼적인 요소 즉 컬러/레이아웃/폰트 등 이며 UX 디자인은 어떻게 하면 더 편리하게 사용할 수 있을지 문제점을 파악하고 해결책을 제시하는 것이다.

자동차로 비교해 보자면 UI는 계기판, 운전대, 페달, 의자조절장치 크기 색 등 / UX는 엔진의 힘, 의자의 푹신함, 빨리 달리 때의 느낌이라 볼 수 있다.

 

일반적으로 디자인이라고 하면 시각적으로 유려한 것이 좋다는 통념을 가지고 있는 경우가 많다. 그렇지만 좋은 UI와 예쁜 UI는 다르다. 시각적으로 뛰어나게 유려하게 디자인을 하는 것은 중요하지만 최우선 순위는 아닐 수 있다.

살짝 논외이지만 개인적으로 생각컨대 네이버의 UI는 구버전이 훨씬 편리한 것 같다. 업데이트 되면서 대다수의 유저가 주로 이용하는 검색기능을 메인에 남겨서 겉으로 보기에는 깔끔해졌다. 그렇지만 그 외의 메뉴들은 다른 카테고리를 들어가야만 찾을 수 있으며 익숙해져있던 카테고리/메뉴 순서가 업데이트되면서 뒤죽박죽이 되어버렸다. 구버전에서는 메인화면에서 검색, 메인 뉴스, 카테고리별 뉴스 등을 한눈에 볼 수 있으며 주로 사용하는 메뉴를 바로가기로 정리해놓아서 편리하게 사용할 수 있었는데 말이다. 이젠 구버전을 종료한다고 하니.. 나로써는 아쉬울 따름이다. 구버전 살려줘!!!!!

 

사용자들은 원하는 것을 직접적으로 말하지 않는다. 사용자들이 원하는 것은 그들의 행동이나 맥락 속에서 파악할 수 있는데 아래의 5가지 요소들을 종합적으로 살필 필요가 있다.

Context	사용자가 제품을 사용하는 시간, 장소, 상황, 사회문화적 환경
Behavior	사용자가 제품과 실제로 인터랙션하는 방식
Needs	무언가를 필요로하는 내적 욕구
Attitude	대상에 대해서 갖는 인지적, 정서적 반응
Motivation	행동을 일으키게하는 요인

 

---

필수 UX/UI 용어

• Feature : 제품이나 서비스에서 하나의 기능 단위
• Feasibility : 실현 가능성의 의미
• VOC(Voice of Customers) : 고객으로부터 접수된 피드백이나 불만, 리뷰
• UGC(User Generated Content) : 사용자가 생성한 콘텐츠
• Fidelity : 묘사/표현의 정도 (주로 Low-fidelity / High-fidelity 로 표현)
• Wireframe : 각 페이지들의 정보와 UI요소등에 대한 배치를 표현 (Low-fidelity)
• Storyboard : 서비스의 각 페이지 구성요소나 콘텐츠의 설명 및 페이지간의 이동 흐름, 로직 등을 기술한 문서. 
• Mockup : 디자인, 데모 시연 및 평가를 위한 서비스/제품의 디자인. 디자인 시안이라고 부르기도 함 (High-fidelity)
• Prototype : 서비스에 대한 기능 및 사용성 등의 테스트를 위해 제작되는 동적인 모형.
• Affordance : 디자이너의 의도대로 사용자의 행동을 유도하는 것을 의미(ex. Button-Push, Switch-Flip, Knob-Rotate)
• IA(Information Architecture) : 제품, 서비스를 구성하는 정보의 구조와 우선순위, 흐름의 설계 등을 포함 (ex. 사이트맵)
• CTA(Call To Action) : 사용자의 반응/행동을 유도하는 행위 혹은 요소 (버튼/링크/배너)
• Usability, UT(Usability Testing) : 사용성. 서비스를 어떤 특정 목정을 달성하기 위해 사용할 때에 어느 정도 사용하기 쉬운가를 말하는 용어
• Breadcrumbs : '빵가루'라는 의미로 사용자가 사이트 전체 구조 안에서 어디에 위치했는지 알려줌

 

Waterfall 이란 미리 정해진 요구사항을 바탕으로 기획-디자인-개발의 프로세스가 순서대로 진행된다. 이전 단계가 완전히 끝나야 다음 단계로 넘어가는 방식이다. 각 단계에 요구사항의 변화나 문제가 발생했을 경우 유연한 대처가 어렵다는 단점이 있다.

Agile 이란 큰 스콥(프로젝트의 범위)의 프로젝트를 잘게 쪼개어 개발하며 변화에 대응해 나가는 방식이다. 프로젝트의 스콥이 작기 때문에 수정사항이 반영이나 피드백 등이 유연하게 반영될 수 있다는 장점이 있다.

 

---

UX/UI 역사 및 최신 트렌드

Skeuomorphism(스큐어모피즘)이란 실재하는 대상의 본래 모습을 최대한 사실적으로 표현하는 기법이다. 예를 들어 녹음 어플 화면에 마이크를 표시하거나, 계산기 프로그램에 실제 계산기의 디자인/레이아웃을 가져온 것이 있다. 최대한 사실적으로 표현하다보니 디자인 하는데 리소스가 많이 들고 쏟아져나오는 디바이스들에 대한 대응이 어렵다는 단점이 있다.

이 Skeuomorphism의 해결책으로 나온 것이 Flat design 이다. 이는 사용자가 인지할 수 있을 정도의 형태는 유지한 채 선과 컬러 등을 플랫하게 단순화하여 디자인하는 것을 의미한다. 아래의 사진에서 본래모습을 사실적으로 표현한 Skeuomorphism과 2차원적 형태로 그림자, 하이라이트 등 의 요소는 배제한 Flat design의 차이를 한눈에 확인할 수 있다.

Flat design - Skeuomorphism

Flat desgin에도 단점은 존재한다. 너무 모든 요소들이 플랫하다 보니 정보우선 순위와 사용성, 가독성 등을 해칠 수 있으며 단순한 컬러와 선을 이용해서 디자인하다 보니 서비스, 제품만의 아이덴티티를 나타내기가 어렵다.

이러한 Flat design의 문제를 해결하기 위해 등장한 것이 구글에서 만든 Material Design이다. 이는 Flat design과 달리 3차원 z축을 이용해 입체감을 더한 것으로, 디지털 종이들이 layered layer를 구성하며 표면 뒤의 그림자를 이용해 깊이감을 표현하여 사용자에게 정보구조를 표현하기에 더 적합하다.

Google Material Design

 

---

구글 스프린트 / Lean 스타트업

Google Sprint

구글 스프린트는 아이디어를 짧은 시간에 프로토타입을 통해서 테스트해보는 방법론이다. 총 5일간의 과정으로 구성되어 있다.

1. Map : 이해관계자들과 현재 상황을 파악하고 문제들을 나열
2. Sketch : 문제들을 해결하기 위한 다양한 스케치 활동을 통해 아이데이션(아이디어 생산을 위해 행하는 활동 혹은 아이디어 생산 자체)을 진행
3. Decide : 구성원들이 낸 아이디어 스케치를 피칭하고 투표를 통해 아이디어를 선별
4. Prototype : 선별된 아이디어들을 데모가 가능한 프로토타입으로 발전
5. Test : 프로토타입을 가지고 고객 테스트와 피드백을 받는 과정을 통해 가설을 검증하고 피드백을 반영

 

린 스타트업은 완벽한 제품을 오랜시간에 거쳐 개발후 출시하는 것이 아니라 가설을 가지고 최소한의 제품으로 빠르게 출시하여 고객의 피드백을 얻고 이를 바탕으로 개선해나가는 방식을 뜻한다.

최근 성장하는 스타트업 중 가장 Lean했다! 고 볼 수 있는 회사로 스터디 파이를 뽑을 수 있다. 스터디 파이는 참가자들의 포기가 많은 온라인 스터디 시장에서 참가비를 받고 완주하는 경우 환급을 해준다면 스터디 완주율이 올라갈 것이라는 가설을 세웠고, 이 방식은 곧 스터디 완주율 50%라는 결과를 만들어냈다. 초기 단계에서 스터디 파이는 제대로 기능이 갖춰진 사이트도 없었고 스터디도 슬랙이나 구글 닥스를 이용해서 진행되었는데 말이다. 이런 사례를 통해 시장을 혁신하는 것은 고객의 니즈를 빠르게 검증하는 회사라고 볼 수 있다.

온라인 스터디에서 50% 완주율이라면.. 실로 놀라운 숫자다! 학생인 내 입장에서 보면 정말 혹할만한 내용이다. 온라인 강의 수강하다 포기한 적이 몇 번 있는데.. 돈이 걸려있다면 없는 의지도 생겨날 것 같다(?). 비단 학생 뿐만 아니라 스스로 학습하는 데 중도포기가 잦은 사람들에게 매력적이지 싶다. 시장 조사와 사용자 니즈 파악의 중요성을 이렇게 느끼게 되는군.

 

MVP(Minimum Viable Product)란 최소한의 노력으로 사용자의 니즈를 검증할 수 있는 제품을 뜻한다. 한번에 완벽한 Product를 만드는 것이 아니라 최소 존속 가능한 제품으로 빠르게 출시하고 시장의 반응에 따라 개선해 나가는 프로세스가 가능하다. 이러한 방법으로 고객의 피드백이나 시장의 변화에 따라 더 빠르고 유연하게 대처할 수 있다.

 

---

문제 해결을 위한 생각 도구들

5 Whys는 어떤 발견한 현상에 대해서 이유의 이유를 계속해서 파고들어가 가장 근본적인 문제의 원인을 파악하는데 효과적인 방법이다. 물음표 살인마 같은거..? 

5 Whys

 

2X2 Matrix는 우선순위를 세워 의사결정을 하는 데 도움이 되는 방법론이다. 

x축은 얼마나 효율적인가, 즉 리소스 대비 효율이 높은가를 보고, y축은 사용자에게 얼만큼 큰 가치를 주느가를 기준으로 구분하여 결정한다. 그러므로 오른쪽 위에 배치될수록 리소스 대비 사용자에게 큰 가치를 주는 피쳐임을 알 수 있다. 

2X2 Matrix

 

Golden Circle은 서비스의 방향성이나 의사결정을 내리는 데 있어서 도움을 줄 수 있는 도구이다. 무엇을 만들까를 고민하기 이전에 왜 만들어야 하는지에 대한 고민이 선행되어야 한다.

Golden Circle

 

 

 

< 강의 미션 >

강의 미션으로 서비스화 할만한 문제를 정해보는 게 있었다. 내가 생각한 문제는 다음과 같다.

 

문제 : 다른 지역으로 여행가서 맛집을 찾기가 어렵다.

 

1. 맛집 찾기가 왜 어려운가 -> 후기글의 양이 방대하고 광고글인지 진짜 먹은 사람의 후기인지 판단이 어렵다.

2. 왜 판단이 어려운가 -> 누구나 후기글을 쓸 수 있기 때문이다.

3. 왜 누구나 쓸 수 있는가 -> 후기글을 쓰는데 제한같은게 걸려있지 않다.

4. 왜 제한을 두지 않는가 -> 제한을 두면 사람들이 글 쓰기를 기피하고 이용률이 떨어질수도 있다.

5. 왜 이용률이 떨어지는가 -> 대부분 번거로움을 감수하면서까지 후기를 쓰려하지 않는다.

 

해결방법 : 음식점의 위치와 사용자의 GPS가 일치하는 경우에만 후기를 남길 수 있게 하면 인증하는데 크게 번거롭지도 않고, 실제 이용자들만의 후기를 볼 수 있게 된다.

 

 

흠.. 잘 파악한 건지 모르겠다.