[실전UI디자인] ch2. 구조와 흐름을 통한 UI 설계

정보 구조화

• UI 디자인은 정보들을 시각적으로 정리하여 사용자에게 순서대로 전달하는 일.
• 화면 내의 정보를 체계적으로 분류하여 사용자가 자연스럽게 따라올 수 있도록 하기 위해서 사용자에게 보여줄 정보의 순서를 먼저 고민해야 한다.
• 사용자는 행동을 판단 할 때 그 다음을 예상하면서 움직이며, 이를 위해 정보를 목적에 따라 정리하는 정보 구조화를 통해 흐름대로 움직이도록 한다.

클러스터링

• 정보 간에도 서로 친밀한 정도가 있으며, 정보 구조화는 가까운 관계끼리 묶고 다시 묶음끼리 묶는 것을 반복하는 콘텐츠 블록화를 통한 정보 클러스터링을 통해 진행된다.
• 클러스터링을 통해 요소들을 정리정돈하여 디자인 요소 연습과 함께 흐름에 따라 시선의 자연스러운 이동을 통해 거 쉽게 읽히도록 구조화할 수 있다.

시각적 흐름

• 사람은 화면 전체를 한 번에 보지 못하고 최대한 중요한 정보만을 먼저 보려고 한다.
• 이 과정에서 화면을 인식하는 순서를 시각적 흐름이라고 하며, 시선이 먼저 머무는 지점부터 순서대로 정보를 인식하고 판단을 내린다.
• 시각적 흐름에 따라서 사용자의 판단이 달라질 수 있으며, UI 안에서 이를 고려하여 사용자가 어떻게 움지이게 만들 것인가를 생각하며 설계한다.
• 시선의 흐름에 영향을 주는 3요소
  - 1. 타이포그래피 : 글자의 크기, 굵기, 문장의 간격 등 텍스트 요소를 조정해 읽는 순서를 만든다.
  - 2. 색상, 채도 및 명도 : 색상 요소들을 통해서 눈에 띄는 순서를 조절한다.
  - 3. 정렬과 여백 : UI의 질서를 시각적으로 보여주는 핵심 요소로 어디서 어디까지 한 정보 덩어리인가 구분과 인지하는 구분이 된다.  

플랫폼과 레이아웃

• 동일한 서비스에서도 플랫폼 별로 달라지는 사용자 환경과 조작 방식에 따라 콘텐츠를 어떻게 배치하고, 어디에 시선을 모으게 할지 전략을 다르게하여 정보 전달 방식에 차이를 둔다.
• 플랫폼 별 레이아웃 전략
  - 데스크탑 : 정보량이 많아도 여러 칼럼으로 나눌 수 있어 다양한 조작 기능과 함께 세밀한 정보 제시와 조작이 가능하다. 또한, 한 화면 내에서 탐색과 입력을 동시에 처리하는 구조에도 적합하다.
  - 테블릿 : 화면 너비가 모바일에 비해 넓으며, 양손 조작과 터치 기반 입력을 동시에 고려해야 하기 때문에 많은 정보를 한 화면에 담을 수 있지만, 복잡한 인터랙션은 피하도록 한다.
  - 모바일 : 화면이 좁아 콘텐츠를 단순하면서 수직으로 나열하여 스크롤 탐색과 럼지손가락 중심의 인터랙션을 기초로 단순한 흐름으로 설계하도록 한다.
• 플랫폼 별로 레이아웃 차이를 인식해서 다음과 같은 실수를 방지할 필요가 있다.
  - 모바일에는 모든 콘텐츠를 압축하는 것이 아니라, 콘텐츠 중에서 선택과 집중을 통해서 고른 부분만을 넣도록 한다.
  - 플랫폼과 장치 별로 콘텐츠의 흐름은 달라진다.
  - 시선 흐름이 고려되지 않은 배치에 주의해야 한다.

UI 평가 요소 7가지

1. 정렬 : 수직, 수평 정렬 축을 기준으로 요소들을 정리해야 정보가 논리적으로 인식되며, 같은 타입의 콘텐츠는 흐름이 끊기지 않도록 같은 라인에 정렬되어 일관된 가로/세로선으로 읽도록 한다.
2. 공간감 : 여백을 경계선으로 이용하여 같은 정보와 다른 정보끼리 나누어서 묶음을 인식하기 쉽게 한다. 
3. 정보 밀도 : 사람은 밀도가 너무 높으면 인식해야 하는 정보가 너무 많이 들어와서 우선 순위를 정하기 어려워 하고, 밀도가 너무 낮으면 정보의 부족함에 불안함을 느낀다. 그렇기에 정보를 크러스터링을 통해서 정렬과 배치하여 밀도를 조절해야 한다. 
4. 무게 중심 : 사람은 가장 먼저 눈에 띄는 것을 중심점으로 삼아 전체를 해석하며, 이는 다른 화면 구성 요소들과 관련이 깊다.
5. 시각적 위계 : 화면의 모든 구성 여러 요소들을 이용하여 우선 순위와 행동 순위를 설계하는 것. 적당한 강조를 이용해야 선택과 집중을 통해서 전체적인 위계를 표현할 수 있다.
6. 정보 흐름 : 정보가 끊기는 지점에선 사용자도 같이 멈추기 때문에, 이러한 것을 방지하고자 정보가 위아래와 좌우로 부드럽고 자연스럽게 연결되며 이어지는 흐름이 필요하다.
7. 목적 적합성 : 무엇보다도 우선적으로 고려해야 하는 요소로, 사용자 목적을 찾고 정의하여 위험을 충분히 감수할 만큼의 맥락과 예측 그리고 이해를 시키도록 한다.

MVP 디자인 목적

• MVP : 최소 가치 제품 Minimum Viable Product. 사용자 문제를 해결하는 가장 작은 형태의 제품. 
• 실무에선 제한된 리소스로 사용자의 목적을 빠르게 검증해야 하는데, 이때 가장 중요한 전략이 MVP 디자인이다.
• MVP는 최소한의 여정만을 구현하는 것이지, 기능과 화면의 수와는 관계가 없다.
• MVP 디자인은 사용자의 행동 흐름을 시각화 하는 것으로, 이때 플로우차트를 통하여 사용자가 어떤 과정으로 제품을 이용하는지를 시각적으로 정리한 순서도를 표현하여 사용자의 의사결정 경로, 화면 간 이동 구조,MVP 범위와 비용 절약을 시각화하여 확인할 수 있다.

와이어프레임

• 디자이너 제품 설계할 때 처음부터 고해상도 비주얼 디자인을 만들기 보다는 우선 순위에 맞춰서 기본 뼈대와 필수 기능만을 주현한 와이어프레임을 우선적으로 그린다.
• 와이어프레임은 논리적으로 설계하기가 핵심으로, 전체적으로 사용자 목적이 충족되는지 기획자와 개발자가 디자이너와 같이 검토하며 의사소통하기 위한 도구임을 생각하며 맥락과 배치를 통해서 시각적으로 정리한다.
• 화면의 맥락부터 정하고 덩어리부터 크고 작은 순서로 접근한다.
• 여백과 정렬은 대략적인 선이면 충분하지만, 컴포넌트의 역할에 대해서는 정확히 명시해야한다.

전략적 UI 사고 훈련

• UI 구성에는 정답이 없지만, 동일한 콘텐츠나 같은 공간에도 목적에 따라서 맞는 구조로 변경되고 달라져야 한다.
• 예를 들어,
  상품 구매가 중심이라면 상품 이미지->상품명과 가격->후기->구매 버튼으로 구매 유도
  구독 신청이 중심이라면 구독 서비스 명->혜택->가격과 비교 요소->구매버튼으로 구독 유도
  와 같이 전반적으로 소비를 유도하는 것은 같으나 무엇을 먼저 강조하는 가는 달라진다.
• 즉, 화면의 목적에 따라 전략적으로 구조를 바꾸는 사고 전환이 필요하다.