topic★★★★★난이도 · 약 15분
대칭 vs 비대칭 균형
대칭의 안정감 vs 비대칭의 역동성 — 시각적 무게 개념으로 균형을 설계한다.
#대칭#비대칭#시각적 무게#균형
왜 배우는가
좋은 디자인은 균형이 잡혀 있다. 하지만 균형이 반드시 대칭을 뜻하지는 않는다. 대칭과 비대칭의 차이를 이해하고, 시각적 무게라는 개념을 체화하면 레이아웃 판단이 빨라진다.
시각적 균형(Visual Balance)이란, 화면의 요소들이 '한쪽으로 기울지 않았다'고 느끼는 상태다. 이 균형을 달성하는 방법에는 크게 대칭(Symmetry)과 비대칭(Asymmetry) 두 가지가 있다.
| 구분 | 대칭(Symmetrical) | 비대칭(Asymmetrical) |
|---|---|---|
| 정의 | 중심축 기준으로 좌우(또는 상하)가 거울상 | 요소의 크기·색상·위치가 다르지만 시각적 무게가 균등 |
| 느낌 | 안정감, 격식, 신뢰, 전통 | 역동성, 현대적, 긴장감, 흥미 |
| 적합한 상황 | 기업 웹사이트, 법률 사무소, 금융 서비스 | 크리에이티브 포트폴리오, 스타트업, 미디어 |
| 위험 요소 | 지루하고 뻣뻣하게 느껴질 수 있다 | 균형을 잘못 잡으면 혼란스럽게 보인다 |
| UI 사례 | 로그인 페이지(중앙 정렬 폼), About 페이지 | 히어로 섹션(텍스트 좌 + 이미지 우), 매거진 레이아웃 |
시각적 무게(Visual Weight) — 요소의 '무거움'을 결정하는 5가지 요소: ① 크기: 큰 것이 무겁다 ② 색상: 어두운 색이 밝은 색보다 무겁다 ③ 밀도: 디테일이 많은 것이 무겁다 ④ 위치: 화면 가장자리에 있을수록 무겁다(지렛대 원리) ⑤ 색 대비: 주변과 대비가 큰 것이 무겁다.
비대칭 균형의 핵심은 지렛대 원리다. 시소에서 무거운 사람이 중심에 가까이 앉고 가벼운 사람이 멀리 앉으면 균형이 잡히듯, UI에서도 큰 요소는 중심 가까이, 작은 요소는 가장자리에 배치하면 비대칭이지만 균형 잡힌 레이아웃이 된다.
균형 체크법 — '눈 감고 흐릿하게 보기' — 화면을 흐릿하게(squint) 보면 개별 요소 대신 덩어리(mass)만 보인다. 이 상태에서 화면이 한쪽으로 기울어 보이면 균형이 깨진 것이다. Figma에서 Gaussian Blur를 100px 정도 걸어 놓고 확인하는 방법도 있다. 프로 디자이너들이 레이아웃 검증에 실제로 쓰는 기법이다.