Ch.3 비율과 조화

대칭 vs 비대칭 균형

대칭 균형과 비대칭 균형의 차이를 시각적으로 구분할 수 있다시각적 무게(Visual Weight) 개념을 이해하고 레이아웃에 적용할 수 있다

균형은 '같은 무게'가 아니라 '무게가 맞는 느낌'이다

시소를 떠올려보세요. 양쪽에 같은 무게를 올리면 수평이 됩니다. 하지만 한쪽을 더 가깝게 놓으면? 다른 무게로도 균형을 잡을 수 있습니다.

대칭이 더 깔끔한데, 왜 비대칭을 쓰는 걸까?

대칭은 안정감, 비대칭은 역동성. Apple 제품 페이지가 비대칭인 이유를 함께 알아봅시다.

article

핵심 내용

균형(Balance)에는 두 가지 종류가 있습니다

대칭 균형 (Symmetry): 중심축을 기준으로 좌우(또는 상하)가 거울처럼 동일한 구성. 공식적, 안정적, 전통적인 느낌을 줍니다.

비대칭 균형 (Asymmetry): 좌우가 다르지만 시각적 '무게'가 균형을 이루는 구성. 역동적, 현대적, 흥미로운 느낌을 줍니다.

대칭의 예: 정부 기관 웹사이트, 결혼식 초대장, 은행 앱의 메인 화면. 신뢰와 격식을 전달해야 할 때 효과적입니다.

비대칭의 예: Apple 제품 페이지, 패션 브랜드 사이트, 포트폴리오 웹사이트. 시각적 긴장감과 흥미를 만들어야 할 때 효과적입니다.

비대칭 균형의 핵심은 시각적 무게(Visual Weight)입니다

시각적 무게란 화면 요소가 시선을 끄는 정도를 말합니다. 물리적 크기가 아니라 지각적 존재감입니다. 무거운 요소 하나와 가벼운 요소 여러 개로 균형을 맞출 수 있습니다.

Apple 제품 페이지 분석 좌측: 큰 제품 사진 1장 (무거움) 우측: 작은 텍스트 + 넓은 여백 (가벼움) 비대칭이지만 균형 — 좌측의 시각적 무게를 우측의 여백이 상쇄합니다. 이것이 '숨 쉴 공간'을 만들어 제품에 집중하게 합니다.

정답은 없습니다. 목적에 따라 선택하세요

다음 중 시각적 무게(Visual Weight)를 높이는 요소가 아닌 것은?

비대칭 균형에서는 좌우의 시각적 무게가 완전히 다르다

key

큰 요소 > 작은 요소 — 가장 직관적인 무게 차이

어두운 색·채도 높은 색 > 밝은 색·채도 낮은 색

텍스트가 빽빽한 영역 > 여백이 많은 영역

화면 가장자리 요소는 중앙보다 더 무겁게 느껴짐 (레버 원리)

주변과 대비가 큰 요소일수록 시선을 더 강하게 끌어당김

compare_arrows

대칭 = 안전한 선택 / 비대칭 = 전략적 선택 — 두 가지를 혼합하는 것이 가장 현실적

check_circle

퀴즈와 인터랙션으로 더 깊이 학습하세요