{3줄 요약}

시각적 위계는 화면의 정보 순서를 눈에 보이게 정리해 주는 정보 구조예요.
사용자는 읽기보다 훑기 때문에 무엇이 먼저 보여야 하는지가 특히 중요해요.
위계를 알면 크기와 색과 여백으로 우선순위를 분명하게 설계할 수 있어요.

사용자는 읽지 않고 스캔해요

웹페이지나 앱 화면을 처음 열었을 때 어떻게 보나요?

처음부터 끝까지 순서대로 읽는 사람은 거의 없어요.
대부분은 화면을 빠르게 훑으면서 원하는 걸 찾아요.
가장 큰 텍스트, 가장 눈에 띄는 색, 화면 중앙에 있는 요소 - 이런 것들이 먼저 눈에 들어와요.

Visual Hierarchy(시각적 위계)는 이 스캔 행동을 설계에 활용하는 원리예요.
사용자가 자연스럽게 중요한 정보를 먼저 보도록 구조를 만드는 거예요.

위계가 잘 잡힌 화면에서는 사용자가 "어디부터 봐야 하지?"를 고민하지 않아요.
구조가 시선을 자연스럽게 안내하니까요.

위계를 만드는 도구들

크기 - 가장 강력한 도구예요.
큰 것이 먼저 보여요.
제목이 본문보다 크고, 주요 숫자가 설명 텍스트보다 크게 표시되는 이유예요.

색과 대비 - 주변과 다른 색이 눈을 끌어요.
빨간색 경고, 파란색 링크, 강조된 가격.
색이 정보의 종류와 중요도를 구분해줘요.

위치 - 화면 상단, 좌측 상단에 있는 것이 더 중요해 보여요.
사람의 시선은 Z자나 F자 패턴으로 움직이기 때문에 이 위치에 핵심 정보가 있어야 해요.

여백 - 주변에 공간이 많은 요소는 더 중요해 보여요.
여백은 "여기 집중해주세요"라는 신호예요.

굵기 - 같은 크기라도 Bold 텍스트는 Regular보다 먼저 눈에 들어와요.

토스 앱에서 보는 위계 설계

토스 앱을 열면 가장 먼저 보이는 건 총 자산 금액이에요.
화면에서 가장 크고 굵은 텍스트예요.

그 아래에 각 계좌와 잔액이 작은 텍스트로 나열돼요.
하단에는 "이체", "충전" 같은 주요 액션 버튼들이 있어요.

사용자의 시선이 가는 순서 - 총 자산 → 세부 계좌 → 액션.
이게 의도한 위계예요.
"지금 내 돈이 얼마인지 먼저 보여주고, 뭘 할지 선택하게 한다"는 설계예요.

이 위계가 없으면 총 자산과 개별 계좌, 버튼이 비슷한 크기로 나열돼요.
사용자가 어디를 먼저 봐야 할지 판단해야 해요.
인지 부하가 올라가요.

위계가 무너지는 패턴들

모든 것을 강조하기 - 볼드 텍스트, 빨간색, 큰 아이콘이 화면에 가득하면 아무것도 강조되지 않아요.

제목과 본문 크기 차이가 없기 - 같은 크기면 정보의 수준이 구분되지 않아요.

중요한 정보를 화면 아래에 배치하기 - 스크롤 없이는 보이지 않는 위치에 핵심 정보를 두면 사용자가 놓쳐요.

비슷한 색의 버튼들 - "완료"와 "취소"가 같은 스타일이면 사용자가 잘못 누르기 쉬워요.

위계를 점검하는 방법

설계한 화면을 보면서 이 질문을 해보세요.

  • 눈을 가늘게 뜨고 봤을 때 가장 먼저 무엇이 보이나요?
  • 그게 사용자가 첫 번째로 봐야 하는 정보인가요?
  • 두 번째, 세 번째로 눈이 가는 곳은 어디인가요?
  • 그 순서가 사용자의 행동 흐름과 맞나요?

이 순서가 맞으면 위계가 잘 설계된 거예요.

강조와 위계가 연결되는 방식은 강조 (Emphasis)에서 더 자세히 다뤄요. 레이아웃 구조에서 위계가 어떻게 작동하는지는 레이아웃 구조 이해와 연결돼요.

관련 아티클

참고 문헌

  • Jenifer Tidwell, 《Designing Interfaces》(2020) - 인터페이스 위계 패턴과 실무 적용을 다뤄요.
  • Edward Tufte, 《Envisioning Information》(1990) - 정보 시각화에서 위계를 만드는 원칙이에요.
  • William Lidwell, 《Universal Principles of Design》(2003) - 시각적 위계의 지각 심리학적 근거를 설명해요.