화면의 위계로 시선을 설계하기

좋은 화면은 많은 것을 보여주는 화면이 아니라, 무엇을 먼저 보고 무엇을 나중에 보게 할지 분명한 화면이다. 사용자는 앱이나 웹사이트에 들어오자마자 화면 전체를 천천히 읽지 않는다. 먼저 훑고, 중요한 신호를 잡고, 지금 이 화면이 자신에게 어떤 행동을 요구하는지 빠르게 판단한다. 이때 화면 안에 질서가 없으면 사용자는 멈춘다. 멈춘다는 것은 곧 생각한다는 뜻이고, 너무 오래 생각하게 만들면 이탈이 시작된다.

그래서 화면 설계의 핵심은 단순히 요소를 예쁘게 배치하는 일이 아니다. 시선을 설계하는 일, 다시 말해 중요도를 시각적으로 번역하는 일이다. 버튼, 제목, 설명, 이미지, 배지, 입력창이 모두 같은 목소리로 소리치면 사용자는 아무 말도 듣지 못한다. 반대로 중요한 것만 또렷하게 보이고 나머지는 자연스럽게 뒤로 물러나 있으면, 사용자는 설명을 듣지 않아도 다음 행동을 고를 수 있다.

화면의 위계란 무엇인가

화면의 위계는 말 그대로 정보의 서열이다. 이 화면에서 가장 중요한 것은 무엇인지, 그다음은 무엇인지, 지금 당장 행동해야 하는 것은 무엇인지가 시각적으로 구분되어 있어야 한다. 위계가 잘 잡힌 화면에서는 사용자가 별다른 노력 없이도 이런 순서를 따라간다.

첫째, 이 화면이 무엇에 관한 화면인지 이해한다. 둘째, 지금 자신이 확인해야 할 핵심 정보를 본다. 셋째, 다음 행동 버튼이나 입력 요소를 발견한다.

반대로 위계가 무너지면 이런 문제가 생긴다. 제목보다 배너가 더 눈에 띄고, 본문보다 장식 이미지가 더 강하게 보이며, 진짜 중요한 CTA보다 덜 중요한 링크가 더 튀어 보인다. 이런 화면은 보기에는 화려할 수 있어도 사용하기는 피곤하다.

결국 위계는 미적 감각의 문제가 아니라 판단 속도의 문제다. 사용자가 2초 안에 이해할 수 있느냐, 5초 동안 헤매느냐를 가르는 기준이라고 생각하면 된다.

사용자는 화면을 순서대로 보지 않는다

기획 문서나 와이어프레임을 볼 때 우리는 보통 위에서 아래로, 왼쪽에서 오른쪽으로 차분히 읽는다. 하지만 실제 사용자는 그렇게 움직이지 않는다. 특히 모바일에서는 더욱 그렇다. 사용자는 다음과 같은 방식으로 화면을 훑는다.

• 가장 큰 것부터 본다.

• 가장 눈에 띄는 색을 본다.

• 숫자, 가격, 상태 변화처럼 의미가 분명한 요소를 먼저 본다.

• 버튼처럼 행동을 유도하는 모양을 재빨리 찾는다.

• 자신이 기대한 위치에 있는 정보를 먼저 확인한다.

예를 들어 커머스 앱에서 사용자는 상품 상세 페이지에 들어오면 모든 문장을 읽지 않는다. 먼저 상품 이미지, 가격, 할인 정보, 배송 여부, 구매 버튼을 찾는다. 여기서 리뷰 요약이나 옵션 선택보다 추천 배너가 더 강하게 보이면, 화면은 사용자의 목적을 방해하고 있는 셈이다.

즉, 화면은 문서가 아니라 주의를 배분하는 장치다. 무엇을 얼마나 크게, 얼마나 가까이, 얼마나 강하게 보이게 할지를 정하는 것이 UX 설계다.

무엇을 먼저 보게 할 것인가

화면을 만들기 전에 가장 먼저 해야 할 질문은 이것이다.

"이 화면에서 사용자가 가장 먼저 알아야 할 것은 무엇인가?"

이 질문이 빠지면 화면은 대개 이렇게 된다. 넣을 수 있는 정보는 다 넣고, 중요한 것마다 강조를 붙이고, 결국 모두가 중요해진다. 하지만 모든 것이 중요하면 아무것도 중요하지 않다.

실무에서는 한 화면을 설계할 때 다음 세 가지를 먼저 정해두는 것이 좋다.

• 이 화면의 한 줄 목적

• 사용자가 먼저 봐야 할 핵심 정보 1개

• 사용자가 이어서 해야 할 행동 1개

예를 들어 회원가입 첫 화면이라면 목적은 "가입을 시작하게 만드는 것"일 수 있다. 이 경우 먼저 보여야 할 것은 서비스 가치 제안이나 간단한 혜택 요약이고, 이어서 해야 할 행동은 "이메일로 시작하기" 혹은 "카카오로 계속하기" 같은 CTA다. 그런데 이 화면에 공지 배너, 이벤트 팝업, 혜택 비교표, 추천 후기, 하단 프로모션까지 한꺼번에 올리면 가입 시작이라는 핵심 행동이 흐려진다.

좋은 위계는 많은 것을 덜어낸 결과이기도 하다.

크기: 큰 것은 먼저 보인다

크기는 가장 직접적인 위계 도구다. 사람의 시선은 본능적으로 큰 요소를 먼저 인식한다. 그래서 제목은 본문보다 크고, 핵심 숫자는 설명 문구보다 크며, 주 버튼은 보조 링크보다 더 또렷해야 한다.

하지만 크기는 무조건 키운다고 해결되지 않는다. 중요한 요소 하나를 키우면 효과가 있지만, 중요한 요소가 다 커지면 다시 평평한 화면이 된다. 초보적인 화면에서 자주 보이는 문제는 제목도 크고, 가격도 크고, 버튼도 크고, 배너도 크고, 아이콘도 커서 화면이 계속 소리를 지르는 상태다.

크기를 사용할 때는 차이의 폭이 중요하다. 제목과 본문이 거의 같은 크기라면 위계가 생기지 않는다. 주 버튼과 보조 버튼이 같은 크기라면 둘의 우선순위가 느껴지지 않는다. 사용자는 미세한 차이보다 뚜렷한 차이를 더 빠르게 이해한다.

예를 들어 생산성 SaaS의 요금제 페이지를 생각해보자. 월 요금 숫자는 가장 크게, 요금제 이름은 그보다 작게, 세부 설명은 더 작게 배치해야 한다. 여기서 "가장 인기 있음" 배지를 너무 크게 만들면 사용자의 눈이 가격이 아니라 배지로 먼저 이동한다. 강조해야 할 대상이 바뀌는 것이다.

간격: 여백은 빈 공간이 아니라 구조다

많은 사람이 위계를 색이나 크기로만 이해하지만, 실제로는 간격이 화면의 질서를 훨씬 강하게 만든다. 가까이 있는 요소는 하나의 묶음처럼 보이고, 멀리 떨어진 요소는 별개의 덩어리처럼 보인다. 사람은 이 간격을 보고 정보의 관계를 추론한다.

예를 들어 결제 화면에서 상품 금액, 배송비, 총 결제 금액이 있다면 이 셋은 하나의 비용 묶음 안에서 정리되어 보여야 한다. 그런데 배송비와 총액 사이보다 총액과 할인 쿠폰 배너 사이의 간격이 더 좁다면, 사용자는 어떤 것이 같은 그룹인지 잠깐 헷갈린다. 이런 작은 혼란이 누적되면 화면이 복잡하게 느껴진다.

여백은 낭비가 아니다. 오히려 여백이 있어야 중요한 것이 도드라진다. 당근이나 토스 같은 서비스가 비교적 편안하게 느껴지는 이유 중 하나도, 정보 사이의 숨 쉴 공간을 잘 확보하기 때문이다. 여백은 화면을 고급스럽게 보이게 하는 장식이 아니라, 이해를 돕는 구조적 도구다.

간격을 다룰 때 기억할 점은 일관성이다. 같은 수준의 요소끼리는 같은 간격을 유지하고, 상위 블록과 하위 블록은 간격 차이를 분명히 둬야 한다. 간격의 규칙이 일정하면 사용자는 화면을 읽는 것이 아니라 패턴으로 익힌다.

색상: 강조는 선택적으로 써야 힘이 생긴다

색은 의미를 실어 나르는 강력한 신호다. 하지만 색을 많이 쓰는 것과 색을 잘 쓰는 것은 전혀 다르다. 화면에서 주목을 끌고 싶은 요소가 있다면, 그 요소에만 강한 색을 써야 한다. 모든 요소가 다채로우면 결국 아무것도 눈에 띄지 않는다.

특히 CTA 버튼은 색상 설계의 영향을 크게 받는다. 사용자가 지금 눌러야 할 버튼이 무엇인지 명확하게 알려주려면, 주 행동 버튼과 보조 행동 버튼을 시각적으로 분리해야 한다. 예를 들어 "구매하기"와 "장바구니 담기"가 같은 색, 같은 무게로 놓이면 사용자는 잠깐 멈춘다. 둘의 우선순위를 화면이 말해주지 않기 때문이다.

색을 사용할 때는 브랜드 감성보다 기능적 의미를 먼저 생각해야 한다. 브랜드 컬러가 강렬하더라도 모든 버튼, 배지, 링크, 탭, 카드 테두리에 그 색을 반복하면 강조의 힘이 사라진다. 브랜드 컬러는 핵심 행동이나 중요한 상태를 위해 아껴두는 편이 낫다.

또한 색은 혼자 작동하지 않는다. 배경과의 관계, 텍스트와의 대비, 주변 요소의 밀도에 따라 체감 강도가 달라진다. 같은 파란 버튼이라도 회색 배경 위에서는 더 튀고, 화려한 배너 옆에서는 덜 돋보인다. 결국 색은 단독 요소가 아니라 맥락 속의 대비로 읽힌다.

대비: 차이를 만들어야 의미가 보인다

대비는 위계의 핵심이다. 대비가 있어야 중요한 것과 덜 중요한 것이 구분된다. 이 대비는 색상에서만 생기지 않는다. 크기, 굵기, 밝기, 여백, 모양, 밀도 모두 대비를 만든다.

예를 들어 같은 화면 안에서 제목은 진하고 크며, 설명은 작고 옅고, 경고 문구는 색상 대비가 강하고, 보조 정보는 한 단계 물러나 있다면 사용자는 화면을 빠르게 해석할 수 있다. 반대로 모든 텍스트가 비슷한 굵기와 색이라면 무엇이 제목이고 무엇이 보조 설명인지 읽기 전에는 알 수 없다.

실무에서 자주 생기는 문제는 "다 잘 보여야 한다"는 생각 때문이다. 그래서 모든 문장을 진하게 하고, 모든 카드를 박스로 감싸고, 모든 영역에 아이콘을 붙인다. 이렇게 되면 화면은 선명해지는 것이 아니라 오히려 무거워진다. 잘 보이게 만드는 방법은 모두를 전면에 내세우는 것이 아니라, 중요하지 않은 것을 뒤로 물리는 것이다.

좋은 화면은 대비가 분명하지만 과장되지 않는다. 사용자는 어디를 봐야 할지 자연스럽게 알지만, 피곤하지는 않다. 이 균형이 바로 위계 설계의 감각이다.

위치: 기대한 자리에 있어야 덜 헤맨다

사람은 화면을 볼 때 완전히 자유롭게 탐색하지 않는다. 이미 익숙한 위치에 대한 기대를 가지고 움직인다. 로고는 상단, 검색은 눈에 잘 띄는 곳, 뒤로 가기는 좌측 상단, 주 행동 버튼은 하단 또는 손이 닿기 쉬운 위치에 있을 것이라고 예상한다.

이 기대를 적절히 활용하면 사용자는 더 적은 노력으로 화면을 이해한다. 반대로 중요 요소를 예상 밖의 위치에 두면 시선 탐색 비용이 늘어난다. 예를 들어 모바일에서 "다음" 버튼이 매 화면마다 위치가 바뀐다면, 사용자는 내용을 이해하는 것 외에 버튼을 찾는 일까지 해야 한다.

위치는 단지 좌표의 문제가 아니다. 맥락의 순서와도 연결된다. 사용자가 정보를 이해한 뒤 바로 행동할 수 있게 하려면, 관련 정보와 행동 요소가 자연스럽게 이어져야 한다. 가격을 보여준 뒤 너무 멀리 떨어진 곳에 구매 버튼이 있으면 시선이 끊긴다. 입력 오류 메시지가 입력창과 멀리 떨어져 있으면 사용자는 무엇이 잘못되었는지 곧바로 알기 어렵다.

좋은 위치 설계는 화면을 읽는 동선을 짧게 만든다. 사용자가 눈으로 왔다 갔다 하는 횟수를 줄이는 것이다.

CTA는 왜 튀어야 하는가

CTA는 Call To Action, 즉 사용자가 지금 하기를 바라는 핵심 행동이다. 가입하기, 구매하기, 저장하기, 계속하기처럼 제품의 다음 단계를 여는 버튼이 여기에 해당한다. CTA가 잘 보이지 않으면 사용자는 행동하지 않는다. 아주 단순한 원리지만, 많은 화면이 이 부분에서 무너진다.

CTA가 튀어야 하는 이유는 버튼이 예뻐 보여야 해서가 아니다. 결정을 덜 어렵게 만들어야 하기 때문이다. 사용자가 이 화면에서 무엇을 해야 하는지 이미 이해했다면, 다음에는 그것을 쉽게 실행할 수 있어야 한다. CTA가 배경과 섞여 있거나 보조 버튼과 구분되지 않으면, 사용자는 마지막 순간에 다시 생각한다.

물론 모든 CTA가 항상 가장 강해야 하는 것은 아니다. 위험한 행동, 되돌리기 어려운 행동, 사용자의 신중함이 필요한 행동은 의도적으로 차분하게 설계할 수도 있다. 예를 들어 계정 삭제, 유료 업그레이드 확정, 자동 결제 동의 같은 화면에서는 강한 유도보다 명확한 이해와 확인이 더 중요하다.

그래도 원칙은 같다. 이 화면의 주 행동이 무엇인지 혼동되지 않아야 한다. 주 CTA와 보조 CTA의 시각적 차이가 분명할수록 사용자는 더 빠르게 선택한다.

한 화면에 하나의 주된 목적 만들기

위계가 흔들리는 가장 흔한 이유는 한 화면에 목적이 너무 많기 때문이다. 상품 상세 페이지에서 구매도 시키고 싶고, 리뷰도 읽히고 싶고, 쿠폰도 받게 하고 싶고, 추천 상품도 보게 하고 싶고, 앱 설치도 유도하고 싶다. 그러면 모든 팀이 자기 요소를 강조하려 하고, 화면은 전쟁터가 된다.

하지만 사용자는 한 번에 하나의 주된 결정을 내린다. 그래서 한 화면에는 가능하면 하나의 주 목적이 있어야 한다. 이것은 다른 정보가 필요 없다는 뜻이 아니라, 우선순위가 분명해야 한다는 뜻이다.

예를 들어 회원가입 화면의 주 목적은 가입 완료다. 그렇다면 화면의 가장 강한 요소는 가입 방식 선택과 다음 단계 버튼이어야 한다. 브랜드 소개, 고객 후기, 이벤트 혜택은 부가 정보로 존재할 수 있지만, 이들이 가입 행동보다 더 강하게 보이면 안 된다.

실무에서 판단이 어렵다면 이렇게 생각해보면 좋다.

"사용자가 이 화면에서 단 하나만 하고 나간다면, 무엇이어야 하는가?"

그 답이 곧 위계의 출발점이다.

화면 위계가 무너지는 흔한 장면들

좋지 않은 위계는 대개 거창한 실수보다 작은 타협들이 쌓여서 만들어진다. 다음 장면은 특히 자주 나타난다.

• 중요한 버튼보다 배너가 더 눈에 띄는 경우

• 제목, 본문, 설명, 주석의 크기 차이가 거의 없는 경우

• 모든 카드가 테두리와 그림자, 배경색을 동시에 가져서 밀도가 과한 경우

• 주 버튼과 보조 버튼이 같은 색과 같은 크기인 경우

• 섹션 간격보다 섹션 내부 간격이 더 커서 구조가 뒤집힌 경우

• 할인, 혜택, 추천, 광고, 공지가 모두 강조색을 쓰는 경우

이런 화면의 공통점은 하나다. 중요도를 화면이 대신 말해주지 못한다는 점이다. 사용자가 직접 중요도를 계산해야 한다면, 그 화면은 이미 불친절하다.

실전 예시: 결제 화면을 다시 본다면

가령 어떤 커머스 앱의 결제 화면이 있다고 해보자. 상단에는 이벤트 배너가 있고, 중간에는 배송지, 쿠폰, 적립금, 결제 수단, 주문 상품 목록이 길게 이어진다. 하단에는 "결제하기" 버튼이 있지만 회색 톤이라 눈에 잘 띄지 않는다. 대신 중간중간 빨간 배지와 강조 문구가 많아 시선이 계속 분산된다.

이 화면의 문제는 정보가 많아서가 아니다. 무엇이 핵심인지 순서가 없다는 것이다.

이 화면을 개선하려면 먼저 사용자의 질문 순서를 따라야 한다. 내가 어디로 받는가, 얼마를 내는가, 어떤 방식으로 결제하는가, 그리고 마지막으로 결제해도 되는가. 이 흐름에 맞춰 정보 덩어리를 재배치하고, 총 결제 금액과 결제 버튼을 가장 강한 시각 요소로 올려야 한다. 쿠폰이나 이벤트 혜택은 중요하지만, 결제 확정 행동보다 더 앞에 나와서는 안 된다.

즉, 개선은 장식을 추가하는 일이 아니라 판단 순서를 정리하는 일이다.

위계를 만들 때 실무자가 자주 놓치는 질문

화면을 다 만든 뒤에는 예쁘냐보다 먼저 다음 질문을 던져야 한다.

• 사용자가 3초 안에 이 화면의 목적을 말할 수 있는가

• 가장 먼저 보여야 할 요소가 실제로 가장 먼저 보이는가

• 중요한 행동 버튼이 보조 요소보다 분명히 강한가

• 관련 있는 정보끼리 충분히 묶여 있는가

• 덜 중요한 정보는 한 단계 뒤로 물러나 있는가

• 강조 색이 정말 강조가 필요한 곳에만 쓰였는가

• 이 화면에서 사용자가 해야 할 주된 행동이 하나로 정리되는가

이 질문에 선뜻 답하기 어렵다면, 대체로 위계가 아직 충분히 정리되지 않은 상태다.

좋은 위계는 사용자를 덜 생각하게 만든다

사용자는 친절한 화면을 만나면 그것이 얼마나 잘 설계되었는지 굳이 의식하지 않는다. 그냥 편하다고 느낀다. 원하는 정보가 먼저 보이고, 다음 행동이 자연스럽게 이어지고, 덜 중요한 것은 방해하지 않기 때문이다. 반대로 위계가 나쁜 화면은 이상하게 피곤하다. 어디를 봐야 할지 모르겠고, 중요한 버튼은 숨어 있고, 강조는 많은데 정작 길은 보이지 않는다.

결국 화면의 위계는 시각 디자인의 마무리 단계가 아니라 UX의 중심부에 있다. 사용자의 눈이 어떻게 움직일지, 무엇을 먼저 믿고, 무엇을 나중에 읽을지, 어디에서 결정을 내릴지를 설계하는 일이기 때문이다.

좋은 화면은 사용자를 압도하지 않는다. 대신 조용하게 안내한다. "먼저 이것을 보고, 이제 이것을 이해하고, 다음으로 이것을 하면 된다"고 말해준다. 그 질서가 있을 때 사용자는 빠르게 판단하고, 덜 망설이고, 더 쉽게 행동한다. 그리고 바로 그 지점에서 UI는 보기 좋은 화면을 넘어, 행동을 만드는 경험이 된다.