DAY 28. 사용자의 손가락이 어디로 갈지 미리 보는 법
화면 디자인은 단순히 정보를 보기 좋게 배치하는 작업이 아니다. 사용자가 화면에서 무엇을 확인하고, 어떤 순서로 행동할지 예상하여 설계하는 과정이다.
이번 수업에서는 사용자 행동 흐름을 먼저 정의하고, 이를 바탕으로 터치포인트 UI를 구성하는 방법을 학습했다.
01. 화면보다 행동을 먼저 설계하기
화면을 구성할 때는 어떤 요소를 넣을지 고민하기 전에 사용자가 이 화면에서 무엇을 하길 원하는지 먼저 결정해야 한다.
예를 들어 상품 상세페이지라면 사용자가 제품을 이해하고, 구매할 이유를 확인한 뒤, 구매 버튼을 누르는 흐름을 예상할 수 있다.
- 핵심 메시지: 사용자가 가장 먼저 알아야 할 정보
- 다음 행동: 메시지를 확인한 뒤 사용자가 취하길 원하는 행동
- 터치포인트: 사용자와 브랜드가 만나는 접점
이렇게 행동을 먼저 정의하면 화면에 필요한 정보와 UI 요소를 판단하기 쉬워진다.
반대로 화면부터 채우기 시작하면 정보가 지나치게 많아지거나, 중요한 버튼이 다른 요소에 묻힐 수 있다.
02. 사용자 행동 흐름은 4단계 이내로 정리하기
사용자가 화면을 탐색하는 순서를 간단하게 정리하면 다음과 같다.
첫 화면 → 근거 → 다음 행동 → 입력
| 단계 | 역할 | 주요 UI |
|---|---|---|
| 01. 첫 화면 | 핵심 메시지 전달 | 히어로 |
| 02. 근거 | 메시지를 뒷받침하는 정보 제공 | 콘텐츠 카드 |
| 03. 다음 행동 | 사용자의 행동 유도 | CTA |
| 04. 입력 | 행동 완료에 필요한 정보 수집 | 입력 폼 |
각 단계는 사용자가 다음 행동으로 이동할 수 있도록 연결되어야 한다.
이때 중요한 것은 화면의 개수가 아니라 사용자가 거쳐야 하는 판단과 행동의 순서다.
03. 정보는 행동 순서에 맞춰 배치하기
정보를 많이 보여주는 것보다 사용자가 필요한 정보를 적절한 시점에 발견하도록 하는 것이 중요하다.
좋지 않은 구성
- 향, 성분, 리뷰, 가격, 배송 정보를 한꺼번에 노출
- 모든 정보를 동일한 크기로 강조
- 행동 버튼을 화면 곳곳에 반복 배치
권장하는 구성
- 핵심 메시지 → 근거 3개 → 행동 순서로 배치
- 행동에 필요한 정보부터 크게 표시
- 첫 화면에서 핵심 메시지와 버튼을 먼저 노출
정보의 중요도에 따라 크기, 위치, 간격을 조절하면 사용자의 시선을 자연스럽게 유도할 수 있다.
즉, 시각적 위계는 사용자의 행동 순서를 안내하는 수단이다.
04. 터치포인트 UI를 구성하는 4가지 요소
이번 수업에서는 히어로, 콘텐츠 카드, CTA, 입력 폼을 활용해 하나의 터치포인트를 구성했다.
① 히어로(Hero)
사용자가 화면에 진입했을 때 가장 먼저 마주하는 영역이다.
- 핵심 메시지
- 간단한 설명
- 주요 행동 버튼
히어로에는 핵심 메시지와 설명, 버튼을 중심으로 구성한다. 불필요한 정보를 줄여 사용자가 화면의 목적을 빠르게 이해하도록 한다.
② 콘텐츠 카드(Content Card)
핵심 메시지를 뒷받침하는 근거를 제공하는 영역이다.
향, 성분, 고객 리뷰 등 사용자의 판단에 필요한 정보 3가지를 카드로 구성할 수 있다.
- 기존 디자인 시스템의 카드 컴포넌트 활용
- 카드 3개의 높이와 시작선 통일
- 내용에 따라 일관된 간격 적용
카드의 형태와 정렬이 일정하면 사용자가 정보를 비교하기 쉬워진다.
③ CTA(Call To Action)
사용자의 다음 행동을 유도하는 영역이다.
CTA는 버튼을 많이 배치하는 것보다 어떤 행동이 가장 중요한지 명확하게 구분하는 것이 중요하다.
- Primary: 구매하기 등 핵심 행동
- Secondary: 자세히 보기 등 보조 행동
하나의 구역에서는 Primary 버튼을 1개만 사용하여 행동의 우선순위를 명확히 한다.
여러 버튼을 같은 강도로 강조하면 사용자가 무엇을 먼저 눌러야 할지 혼란스러울 수 있다.
④ 입력 폼(Input Form)
사용자의 정보를 입력받는 영역이다.
기본적으로 다음 세 요소를 함께 구성한다.
- 라벨: 어떤 정보를 입력해야 하는지 안내
- 입력 상자: 실제 정보를 입력하는 공간
- 안내 문구: 입력 조건이나 오류 설명
입력 폼은 Default, Focus, Error 등의 상태를 고려해야 한다.
오류가 발생했을 때는 디자인 시스템의 Semantic/Error 색상을 사용하여 상태를 구분할 수 있다.
또한 입력이 완료되기 전에는 버튼을 Disabled 상태로, 필요한 정보가 입력된 후에는 활성 상태로 표현할 수 있다.
05. 디자인 시스템을 활용한 UI 제작
터치포인트 UI는 매번 새로운 스타일을 만드는 것이 아니라, 기존 디자인 시스템의 값을 재사용하여 구성한다.
| UI | 활용할 디자인 시스템 요소 |
|---|---|
| 히어로 | Heading 1, Body, Button/Primary |
| 콘텐츠 카드 | 카드 컴포넌트, Heading 3, Caption |
| CTA | Button/Primary, Button/Secondary |
| 입력 폼 | 입력창, Body, Caption |
색상, 타이포그래피, 간격, 버튼 등을 시스템 값으로 통일하면 화면 간 일관성을 유지할 수 있다.
특히 간격은 임의로 지정하기보다 기존 Spacing 값을 활용하는 것이 좋다.
디자인 시스템은 개별 UI의 모양뿐 아니라 여러 화면에서 일관된 사용 경험을 제공하기 위한 기준이다.
06. 행동 흐름을 시각적으로 표시하기
UI를 완성했다면 사용자가 이동할 순서를 화살표와 번호로 표현한다.
01 히어로 → 02 콘텐츠 카드 → 03 CTA → 04 입력 폼
- 각 구역에 01~04 번호 부여
- 구역 사이에 화살표 배치
- 화면 프레임 밖 별도 레이어로 정리
피그마에서는 Shift + L로 화살표를 그릴 수 있다.
이번 작업에서는 실제 Prototype 연결보다 화면의 행동 흐름을 시각적으로 전달하는 데 집중한다.
흐름을 표시하면 사용자가 어느 지점에서 정보를 확인하고, 다음 단계로 넘어가는지 점검하기 쉬워진다.
07. 시각적 위계 점검하기
UI를 완성한 뒤에는 다음 세 가지를 기준으로 점검한다.
① 첫 화면
눈을 가늘게 뜨고 화면을 봤을 때 핵심 메시지가 가장 먼저 보이는가?
② 버튼
Primary 버튼이 화면에서 두 번째로 눈에 들어오는가?
③ 흐름
화살표가 없어도 사용자가 정보를 읽는 순서대로 자연스럽게 시선이 이동하는가?
핵심 메시지 → 버튼 → 근거 순서로 시선이 이동한다면 위계가 적절하게 형성되었다고 볼 수 있다.
단순히 요소가 잘 정렬되었는지가 아니라, 사용자가 화면을 어떻게 읽고 행동할지를 기준으로 판단해야 한다.
08. 모바일 화면에서의 행동 흐름
데스크톱에서 구성한 정보가 모바일에서도 동일한 방식으로 보이는 것은 아니다.
모바일은 화면 너비가 좁기 때문에 가로로 나열된 정보를 세로로 재배치해야 한다.
이번 수업에서는 375px 너비의 모바일 첫 화면을 기준으로 점검한다.
- 히어로의 핵심 메시지가 잘 보이는가?
- 주요 버튼이 화면 밖으로 밀려나지 않는가?
- 첫 화면에서 다음 행동을 이해할 수 있는가?
데스크톱 레이아웃을 단순히 축소하기보다 모바일 환경에 맞게 정보의 배치와 우선순위를 조정해야 한다.
09. 오늘의 과제
터치포인트 UI 1세트 제작하기
Day 21에서 선정한 접점 하나를 Day 27의 디자인 시스템으로 구현한다.
제작 항목
- 히어로, 콘텐츠 카드 3개, CTA, 입력 폼으로 구성된 UI
- 화살표와 번호를 활용한 4단계 이내의 행동 흐름
- 첫 화면·버튼·흐름에 대한 위계 점검 메모 3줄
- 375px 모바일 첫 화면
완성 기준
- 기존 디자인 시스템의 색상, 글자, 간격을 사용했는가?
- Primary 버튼을 구역당 1개만 사용했는가?
- 핵심 메시지가 가장 먼저 보이는가?
- 행동 흐름을 쉽게 파악할 수 있는가?
- 모바일 첫 화면에서도 메시지와 버튼이 보이는가?
⭐ 오늘 기억해둘 것
- 화면을 만들기 전에 사용자의 다음 행동을 먼저 정의한다.
- 사용자 행동 흐름은 가능한 한 간단하게 구성한다.
- 정보는 사용자의 행동 순서에 맞춰 배치한다.
- 히어로, 콘텐츠 카드, CTA, 입력 폼은 디자인 시스템을 재사용한다.
- Primary 버튼은 구역당 하나만 사용해 행동의 우선순위를 명확하게 한다.
- 시각적 위계와 모바일 화면을 통해 사용자의 시선 흐름을 점검한다.
화면은 정보를 담는 공간이 아니라, 사용자의 다음 행동을 안내하는 도구다.
