시선 흐름과 사용자 흐름, 정보 배치·여백·강조로 읽히는 화면 만들기
온라인 쇼핑몰에서 상품을 고르다가 설명이 너무 복잡해 창을 닫은 경험이 있을 것입니다. 버튼은 여러 개 보이는데 무엇을 먼저 눌러야 할지 모르거나, 중요한 배송 정보가 화면 아래에 숨어 있으면 사용자는 내용을 읽기보다 먼저 떠납니다. 화면이 예쁜데도 행동으로 이어지지 않는 까닭은 시선 흐름이 끊겼기 때문입니다.
시선 흐름은 사람이 화면을 볼 때 어느 지점에서 시작해 어떤 순서로 이동하는지를 말합니다. 이 글을 읽으면 정보의 우선순위를 정하는 법, 여백과 색으로 시선을 안내하는 법, 사용자 흐름과 시선 흐름을 구분하는 기준을 알게 됩니다. 포스터, 누리집, 카드뉴스, 발표 자료에도 같은 원리를 적용할 수 있습니다.
시선 흐름은 ‘보이는 순서’를 설계하는 일
사람은 화면의 모든 내용을 같은 힘으로 읽지 않습니다. 제목의 크기, 사진의 방향, 색의 차이, 주변의 빈 공간에 영향을 받아 먼저 볼 곳을 찾습니다. 따라서 디자인은 정보를 많이 넣는 작업이 아니라, 꼭 필요한 정보부터 자연스럽게 만나게 하는 작업에 가깝습니다.
예를 들어 카페 신메뉴 포스터라면 첫 시선은 메뉴 이름이나 대표 사진으로 가는 편이 좋습니다. 그다음 가격과 특징을 보고, 마지막에 주문 방법이나 행사 기간을 확인하게 만들 수 있습니다. 제목, 설명, 행동 버튼이 모두 같은 크기와 색이라면 보는 사람은 시작점을 잃습니다.
- 첫 단계: 무엇을 알리고 싶은지 찾습니다.
- 두 번째 단계: 읽은 뒤 사용자가 할 행동을 정합니다.
- 세 번째 단계: 정보의 크기와 위치를 행동 순서에 맞춥니다.
먼저 확인할 시선 흐름 체크리스트
작업을 시작하기 전에 아래 질문에 답하면 장식에 끌려가며 내용을 배치하는 실수를 줄일 수 있습니다.
- 화면을 처음 본 사람이 3초 안에 주제를 짐작할 수 있는가?
- 가장 중요한 정보가 제목, 사진, 버튼 중 하나로 분명하게 드러나는가?
- 다음에 읽을 위치를 알려 주는 연결 요소가 있는가?
- 비슷한 중요도의 정보가 너무 많이 경쟁하고 있지는 않은가?
- 휴대전화처럼 좁은 화면에서도 순서가 무너지지 않는가?
특히 첫 화면에 모든 내용을 넣으려 하지 않는 것이 좋습니다. 대표 메시지와 다음 행동만 남기고, 세부 내용은 뒤쪽으로 보내야 시선이 덜 흔들립니다. 단, 중요한 조건이나 비용처럼 사용자의 판단에 영향을 주는 내용은 숨기지 말고 찾기 쉬운 위치에 두어야 합니다.
시선 흐름과 사용자 흐름은 어떻게 다른가
두 표현은 비슷해 보이지만 범위가 다릅니다. 시선 흐름은 눈이 화면 안에서 이동하는 순서입니다. 사용자 흐름은 화면을 본 뒤 클릭하고, 입력하고, 이동하고, 완료하는 전체 과정입니다. 눈이 버튼을 발견했더라도 버튼을 누른 뒤 어디로 가는지 알 수 없다면 사용자 흐름은 끊깁니다.
예를 들어 회원 가입 화면에서 큰 제목, 입력창, 가입 버튼이 잘 배치되어 있으면 시선 흐름은 좋을 수 있습니다. 하지만 비밀번호 조건이 입력창 아래에 작게 표시되거나 오류 문구가 사라진다면 사용자는 같은 행동을 반복하게 됩니다. 이때 문제는 단순한 시각 배치가 아니라 사용 과정 전체에 있습니다.
- 시선 흐름: 무엇을 먼저 보고 다음에 어디를 보는가
- 사용자 흐름: 본 뒤 어떤 행동을 하고 목표를 끝내는가
- 확인 방법: 화면 캡처에는 시선 순서를, 실제 사용에는 행동 단계를 기록합니다
두 흐름은 따로 보되 함께 점검해야 합니다. 시선은 제목에서 설명으로 이어지고, 사용자 행동은 설명에서 버튼과 완료 화면으로 이어져야 합니다.
화면에 적용하는 순서
1. 한 문장으로 목적 쓰기
먼저 “이 화면을 본 사람은 무엇을 알아야 하는가”를 한 문장으로 적습니다. 행사 홍보라면 “기간 안에 어떤 혜택을 받을 수 있는지 알린다”처럼 씁니다. 목적이 여러 개라면 첫 화면과 다음 화면으로 나누는 편이 낫습니다.
2. 정보를 세 등급으로 나누기
가장 중요한 내용은 제목이나 대표 이미지로 크게 보여 줍니다. 다음으로 필요한 설명은 중간 크기의 글과 가까운 위치에 둡니다. 조건, 참고사항, 출처처럼 읽을 필요는 있지만 첫 시선이 될 필요가 없는 내용은 낮은 강도로 배치합니다.
3. 방향과 여백을 이용하기
사람을 바라보는 사진이나 화살표가 특정 방향을 향하면 그 끝에 중요한 내용을 둘 수 있습니다. 문단 사이의 여백은 단순히 비어 있는 공간이 아니라 정보 덩어리를 나누는 경계입니다. 다만 모든 요소 사이에 같은 여백을 주면 관계가 흐려집니다. 관련된 내용은 가깝게, 다른 내용은 멀게 두어야 합니다.
4. 실제 크기로 시험하기
작업 화면을 확대해 보면 작은 글씨도 읽히는 것처럼 느껴집니다. 휴대전화와 노트북에서 실제 크기로 보고, 화면을 흑백으로 바꿔도 중요한 부분이 구분되는지 확인합니다. 동료에게 5초만 보여 준 뒤 무엇을 먼저 봤는지 물어보는 방법도 유용합니다.
시선 흐름을 막는 흔한 실수
모든 요소를 강조하는 경우
굵은 글씨, 강한 색, 큰 크기를 여러 곳에 쓰면 강조가 아니라 소음이 됩니다. 대표 제목과 핵심 버튼처럼 정말 중요한 요소에만 강한 대비를 사용하세요. 나머지는 크기나 색을 한 단계 낮추면 중심이 살아납니다.
왼쪽에서 시작하면 언제나 정답이라고 생각하는 경우
많은 화면에서 왼쪽 위가 시작점이 되지만, 언어와 화면 형태, 이미지 배치에 따라 달라질 수 있습니다. 사진 속 인물의 시선이 오른쪽을 향하거나 큰 제목이 가운데 놓이면 사용자는 다른 곳에서 시작할 수 있습니다. 정해진 공식보다 실제 내용의 방향을 우선해야 합니다.
빈 공간을 낭비로 보는 경우
정보를 더 넣기 위해 여백을 없애면 요소가 서로 붙어 보입니다. 사용자는 어디까지가 제목이고 어디부터가 설명인지 구분하기 어려워집니다. 여백을 줄이기 전에는 먼저 같은 내용을 더 짧게 쓰거나, 중요도가 낮은 요소를 덜어내는 방법을 시도해야 합니다.
예쁜 이미지가 목적을 가리는 경우
장식 사진이 제목보다 크면 사람은 사진을 먼저 보지만, 사진의 의미가 메시지와 연결되지 않을 수 있습니다. 이미지가 무엇을 설명하는지 분명하지 않다면 크기를 줄이거나 캡션을 붙입니다. 멋있어 보이는 것과 이해하기 쉬운 것은 항상 같지 않습니다.
자주 묻는 질문
시선 흐름을 확인할 때 시선 추적 장비가 꼭 필요한가요?
초기 작업에는 꼭 필요하지 않습니다. 동료나 실제 사용자에게 짧게 보여 주고 가장 먼저 본 요소와 헷갈린 부분을 물어보는 것만으로도 큰 문제를 찾을 수 있습니다. 방문자가 많거나 중요한 화면을 개선할 때는 분석 도구와 사용성 테스트를 함께 검토하면 좋습니다.
사용자가 모든 내용을 읽지 않으면 정보가 부족한 것 아닌가요?
모든 내용을 같은 순간에 읽게 하는 것이 목표는 아닙니다. 핵심을 먼저 이해하고, 필요할 때 세부 내용을 찾아갈 수 있으면 좋은 흐름입니다. 제목과 요약만 읽어도 주제를 알 수 있게 하고, 조건과 근거는 가까운 위치에서 확인하게 구성하세요.
색을 많이 쓰면 시선을 더 잘 끌 수 있나요?
색의 수보다 역할이 중요합니다. 한 색은 주요 행동, 다른 색은 상태나 경고처럼 의미를 정해 사용해야 합니다. 색만으로 차이를 전달하면 색각이 다른 사람이나 밝은 화면을 보는 사람은 구분하기 어려울 수 있으므로 글자, 모양, 위치도 함께 활용해야 합니다.
좋은 시선 흐름은 사용자를 억지로 끌고 가는 기술이 아닙니다. 필요한 정보를 필요한 순서로 만나게 해 망설임을 줄이는 설계입니다. 작업을 마친 뒤에는 “무엇을 먼저 봤는가”뿐 아니라 “그다음 행동을 이해했는가”까지 확인해야 합니다.