Asymmetric balance, Rule of odds, Optical alignment

Asymmetric balance

대칭이 아닌 균형입니다. 양쪽이 똑같지 않지만 시각적 무게가 균형 잡힙니다.

일본 정원과 전통 회화의 핵심 원리입니다. 서양 회화는 대칭적 구성이 많았던 반면, 일본과 중국 미학은 의도적 비대칭으로 자연스러움을 추구했습니다.

UI 적용은 다음과 같습니다.

히어로 섹션: 왼쪽 텍스트, 오른쪽 큰 이미지. 양쪽 크기는 다르지만 균형.
대시보드: 큰 차트 1개와 작은 카드 3개의 조합.

대칭은 정적이고 격식 있는 느낌, 비대칭은 동적이고 자연스러운 느낌입니다.

Rule of odds

홀수 개(3, 5, 7)가 짝수보다 시각적으로 자연스럽습니다. 회화와 사진의 구도 원리입니다.

이유는 짝수는 두 그룹으로 나뉘기 쉽지만, 홀수는 중심이 명확하고 균형이 생기기 때문입니다.

UI 적용은 다음과 같습니다.

카드 그리드는 3개나 5개 배치가 4개나 6개보다 안정적입니다. 기능 소개 섹션은 3가지 핵심 가치로 묶기 좋습니다. 가격 옵션도 3단계로 (decoy effect와도 결합) 구성합니다.

Optical alignment

수학적 정렬과 시각적 정렬의 차이입니다.

예시 1: 원과 사각형. 수학적으로는 둘의 높이가 같지만 시각적으로는 원이 더 작아 보입니다. 해결책은 원을 약간 크게 하는 것입니다.

예시 2: 큰 폰트. 수학적으로는 baseline 정렬이지만 시각적으로는 ascender와 descender가 있는 글자가 어색합니다. 해결책은 미세한 베이스라인 조정입니다.

전문 디자이너의 미감은 optical alignment 감각입니다.

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

3가지 항목을 늘어놓을 때 그 가운데 것이 양쪽 것보다 살짝 크면 시각적으로 더 안정적입니다. 수학적 정렬을 100% 따르면 가끔 부자연스럽습니다.

관련

Rule of thirds · Visual hierarchy · Golden ratio