Visual hierarchy, 게슈탈트에서 디자인 원칙으로

한 줄로

화면의 어떤 요소가 가장 중요한지 사용자가 즉시 알 수 있게 만드는 시각적 구조입니다. 게슈탈트 심리학에서 발전했습니다.

어디서 왔나

1910~30년대 게슈탈트 심리학이 "사람의 시각은 자동으로 위계를 인식한다"고 설명했습니다. 큰 것, 진한 것, 다른 색이 먼저 눈에 들어옵니다.

이 원리가 그래픽 디자인의 핵심 도구로 자리잡은 건 20세기 중반입니다. 스위스 디자이너들이 활자 크기, 굵기, 색의 차이로 메시지 우선순위를 표현하는 방법을 정립했습니다.

위계를 만드는 도구

1. 크기: 큰 것이 먼저 보입니다.
2. 색: 진한 색, 강한 색이 먼저.
3. 위치: 위, 왼쪽이 먼저 (서양 독서 방향).
4. 여백: 빈 공간이 둘러싼 요소가 강조됩니다.
5. 굵기: bold 텍스트.
6. 대비: 주변과 다른 것.

UI 적용

좋은 화면은 사용자가 1초 안에 "가장 중요한 것"을 인식합니다. 디자이너의 일은 그것을 가장 두드러지게 만드는 것입니다.

랜딩 페이지: 헤드라인, CTA, 부가 정보.
카드: 제목, 이미지, 본문, 메타.
폼: 다음 동작(Submit), 입력 필드, 라벨, 보조 텍스트.

함정

모든 게 강조되면 어떤 것도 강조 안 됩니다. 한 화면에 강조 요소는 1~2개이고, 그 외는 보조입니다.

바이브 메이커가 챙길 한 가지

본인 화면을 흑백으로 만들어 봅니다 (브라우저 DevTools의 grayscale filter). 색이 없어도 위계가 명확하면 좋은 디자인입니다. 색에 너무 의존하면 색 없이 평평해집니다.

관련

Gestalt 법칙 · Focal point · Whitespace