[UI 디자인] 위계

좋은 디자인은 단순히 “예쁜 화면”이 아니라,
사용자가 정보를 빠르게 이해하고 자연스럽게 읽어 내려갈 수 있게 만드는 구조입니다.
이때 핵심이 되는 것이 바로 **시각적 위계(Visual Hierarchy)**와 게슈탈트(Gestalt) 원리입니다.

 

이 글에서는 실제 UI 디자인에서 자주 활용되는 원리들을 쉽게 설명하고,
왜 이 원리들이 화면을 더 명확하게 만드는지 직관적으로 살펴보겠습니다.

 

1. 시각적 위계(Visual Hierarchy)

시각적 위계란,

“사용자가 무엇을 먼저 보고, 그다음 무엇을 보게 할 것인가”를 디자인이 스스로 안내하는 구조

를 말합니다.

같은 정보라도 어떤 요소를 강조하고, 어떤 요소는 덜 드러나게 할 것인지를 결정하는 것이 핵심입니다.

 

위계를 만드는 대표적인 방법

 

1️⃣ 크기(Size) : 더 큰 요소는 더 중요한 정보처럼 보임
2️⃣ 색(Color) : 더 강한 색일수록 시선이 빨리 도달함
3️⃣ 굵기(Weight) : Bold는 자연스럽게 눈에 띄는 효과
4️⃣ 간격(Spacing) : 가까울수록 서로 연관되어 보임
5️⃣ 배경 대비(Contrast) : 채도·명도의 차이를 크게 주면 ‘시각적 무게감’ 증가

위계는 사용자에게 다음을 알려줍니다:

“여기서 가장 중요한 정보는 이것입니다.”

 

 

2. 게슈탈트(Gestalt) 이론이란?

게슈탈트는 인간이 사물을 ‘전체적인 패턴’으로 인식하는 방식을 설명하는 심리학적 원리입니다.

디자인에서는 화면을 깔끔하고 읽기 쉽게 만드는 핵심 법칙으로 활용됩니다.

여기서는 UI에서 가장 많이 쓰이는 세 가지 원리를 다룹니다.

 

1️⃣ 근접성(Proximity)의 원리

서로 가까이 있는 요소는 ‘같은 그룹’이라고 인식된다.

예:

• 제목과 설명 문장이 가까이 있으면 하나의 덩어리로 보임
• 카드 내부 정보가 모여 있으면 하나의 컴포넌트처럼 느껴짐

이 원리는 구성 요소의 그룹화를 통해 정보를 빠르게 정리할 수 있게 돕습니다.

 

2️⃣ 공통 영역(Common Region)의 원리

같은 영역 안에 있는 요소들을 우리는 자연스럽게 한 그룹으로 본다.

 

카드(Card UI)를 떠올리면 바로 이해됩니다.

• 테두리(box)가 그 자체로 하나의 영역을 형성
• 영역 안의 정보들은 모두 ‘연관된 정보’로 인식

UI의 기본 구성 요소인 카드, 섹션, 모듈이 이 원리를 기반으로 만들어집니다.

 

3️⃣ 유사성(Similarity)의 원리

비슷한 형태·색·크기·폰트를 가진 요소는 서로 같은 역할을 한다고 인식된다.

예:

• 버튼들이 같은 스타일이면 “모두 같은 성격의 행동”으로 보임
• 목록의 아이콘이 동일한 형태라면 하나의 그룹처럼 보임
• 가격 플랜 카드에서 동일한 레이아웃을 쓰면 비교가 쉬워짐

이 원리를 활용하면 **디자인의 일관성(consistency)**을 높일 수 있습니다.

 

유사성을 만드는 방법

• 색상統一
• 형태統一
• 타이포 스타일統一
• 컴포넌트 구조統一

UI/UX에서 가장 실무적으로 많이 쓰이는 원리라고 해도 과언이 아닙니다.

 

3. 시각적 무게감(Visual Weight)

시각적 무게감은,

화면에서 어떤 요소가 더 무겁게 보이느냐, 즉 더 강하게 눈에 들어오느냐

를 의미합니다.

 

이 무게감은 다음 요소들로 조절할 수 있습니다:

• 색의 채도(Saturation) : 채도가 높으면 무거움
• 명도(Contrast) : 배경 대비가 강하면 더 눈에 띔
• 글자 굵기(Bold weight) : Bold는 더 높은 우선순위
• 크기(Size) : 더 크면 더 무거움

이 원리를 적절히 조합하면
→ “어디를 강조할지”,
→ “어디를 조용하게 둘지”
정확히 조절할 수 있게 됩니다.

 

4. 이 모든 원리가 합쳐져서 만드는 효과

디자인은 단순히 ‘예쁜 화면’을 만드는 것이 아니라,
이런 기본 법칙들이 어우러져 사용자가 자연스럽게 정보를 읽도록 안내하는 과정입니다.

• 위계는 “어디를 먼저 봐야 하는지”를 알려주고
• 근접성은 “무엇이 서로 관련 있는지”를 알려주며
• 공통영역은 “이 그룹은 하나입니다”라고 말하고
• 유사성은 “이 패턴은 반복됩니다”라고 알려주고
• 시각적 무게감은 “가장 중요한 요소는 이것입니다”라고 강조합니다

결국,

좋은 디자인의 80%는 위계 + 게슈탈트 원리를 얼마나 정확히 적용하느냐로 결정된다.

 

안 좋은예 / 좋은 예

 

정리하면

 

디자인은  구조입니다.
위계와 게슈탈트 원리를 이해하면, 어떤 화면도 자연스럽게 읽히는 직관적인 UI로 바뀝니다.