1. UX, UI 디자인의 단계별 핵심 개념 이해하기

1. 디자인 씽킹과 프로토타입

 

공감하기 : 설정한 목표에 따른 사용자에 대해 최대한 공부한다.

#그들이 무엇을 하는지, 어떤 어려움이 있는지... 

정의하기 : 앞선 단계에서 수집한 데이터를 통해 문제를 정의한다.

#문제는 정말 많을 수 있으나, 집중해야할 문제가 무엇인지 정리한다.

아이데이션 : 정의된 문제들을 해결할 수 있는 다양한 아이디어를 생각해본다.

#브레인스토밍, 아이디어 회의 등등으로...

프로토타입 : 한두가지의 아이디어를 만들어본다.

#가설을 검증하기 위해 만든다고 볼 수 있다.

테스트 : 프로토타입을 사용자가 사용해보게 하여, 문제가 해결되는지 확인한다.

#여기서 피드백을 받아, 개선점이 있다면 반영하여 출시한다. 

 

-> 출시했다고 해서 끝이 아니다.

=> 처음의 과정으로 다시 돌아가, 어떻게 하면 더 나아질 수 있을지 끊임없이 고민한다.

 

프로토타입의 종류

1. 로우파이 프로토타입

2. 미드파이 프로토타입

3. 하이파이 프로토타입

#하이파이 로 갈수록 시각적 퀄리티가 높아지고, 수정 및 업데이트가 어렵고 시간이 오래 걸린다.

 

---

2. 로우파이 프로토타입

 

로우파이(Lo-Fi)의 대표적인 예시는 위의 그림과 같은 핸드스케치가 있다.

#시각적 퀄리티가 높지 않아도 괜찮다.

 

로우파이의 장점

1. 아이디어를 구체화하는 초기단계에 시간을 효율적으로 사용할 수 있다.

2. 함께 일하는 동료들과 효율적으로 커뮤니케이션 할 수 있다.

#회의를 하다보면 서로 이해하는 것이 다를 수 있는데, 이때 시각적인 것으로 이해도를 높일 수 있다.

 

+) 로우파이 프로토타입을 포트폴리오에 포함시키는 것이 좋을 수 있다.

-> 실무에서의 시각화 능력을 보여줄 수 있다.

 

---

3. 미드파이 프로토타입 "와이어프레임"

 

미드파이(Mid-Fi)의 대표적인 예시로 와이어프레임이 있다.

#UI 기획서라고 부르기도 한다.

 

와이어프레임에서 중요한 것은 흐름도이다.

#그림에서의 빨간 화살표이다.

-> 워크플로우라고 부르기도 한다.

=> 버튼을 누르거나 했을때 기능이 어떻게 동작하는지, 화면이 어디로 전환되는지 등을 정리하는 것.

 

하이파이 프로토타입을 만들기 전에 반드시 거쳐가야할 단계이다.

-> 최종 단계에 비해 수정이 쉽다.

 

와이어프레임은 최종 단계(UI 디자인)에 비해 기능적인 부분에 좀 더 집중한다.

#위 그림처럼 정확한 색상값, 폰트 크기 등등은 배제한다.

-> 와이어프레임을 만들지 않고 UI 디자인을 한다면, 후에 기능적인 부분을 수정해야할 때 작업효율이 떨어진다.

=> 기능적인 부분에 대해 효율적으로 수정이 가능하다.

#실무에서는 속도가 정말 중요하다.

 

---

4. 하이파이 프로토타입 "UI 디자인", 그리고 프로토타이핑

 

하이파이(Hi-Fi), 즉 시각적 완성도가 높은 단계의 프로토타입을 UI 디자인이라고 부른다.

#폰트 사이즈, 아이콘, 색상 등 시각적인 영역에 대한 정의가 구체적으로 내려진다.

=> 테스트, 혹은 테스트가 생략될 경우 출시할 때 이 버전이 바로 사용된다. 

 

프로토타이핑

-> 앞서 만들어진 화면들을 실제 앱처럼 만들어보는 것.

=> 테스트를 할 때, 사용자가 앱을 사용해보는 것처럼 느끼기 위해 만든다.

#실제 개발을 하는 것은 아니다. 피그마를 통해 만든다.

#사용자의 행동을 관찰하거나, 왜 이런 행동을 했는지 질문할 수 있다.

 

---

5. 최종 디자인 산출물 "핸드오프"

 

출시를 위한 디자인이 확정되었다면, 디자인 산출물(핸드오프)을 만들어야한다.

-> 개발자, PM 에게 전달을 하기 위한 것.

#텍스트의 사이즈, 텍스트 위치, 요소간의 거리 등등을 포함한다.

 

---

6. 시각 계층

 

UI 디자인이란 = 시각정보의 룰을 만들어주는 것.

-> 우선순위, 중요성에 따라 중요한 시각정보를 강조하여 사용자가 빠르게 정보를 습득할 수 있게 한다.

=> 디자이너는 중요한 정보를 어떻게 표현할 지 고민해야 한다.

 

시각 정보의 계층(Visual Hierarchy)

-> 화면의 어떤 요소든간에 시작 정보의 계층을 적용할 수 있다.

 

기본 원리는 중요도에 따라서 정보를 더 잘 드러나게 하는 것이다.

-> 위 그림은 우선도에 따라 텍스트 사이즈, 굵기를 다르게 하였다.

 

-> 위 그림은 같은 정보를 제공하고 있으나, 왼쪽에서 좀 더 정보를 빠르게 이해할 수 있다.

#어디서부터 어떤 정보를 봐야할 지 가이드가 잘 되어있다고 볼 수 있다. 

 

-> 텍스트 뿐만 아니라 다른 요소에도 시각 정보 계층을 적용할 수 있다.

#왼쪽에 비해 오른쪽 디자인이 좀 더 산만해보인다. (시각 정보 계층 적용의 차이)

 

=> 디자인을 할 때 항상 사용자에게 줄 가이드를 생각해야 한다!