통합 요약노트

Ch.3 비율과 조화

황금비, 삼분법, 대칭과 비대칭 균형 — 수학적 아름다움의 원리

이 챕터의 내용

1

황금비와 UI

사실과 오해를 구분하고, UI에서 실제로 쓸 수 있는 부분만 정확히 짚어봅시다.

1 : 1.618… 자연이 반복하는 비율

두 양 a와 b가 있을 때, (a+b)/a = a/b ≈ 1.618이면 이를 황금비(Golden Ratio, φ)라고 합니다. 그리스 문자 파이(φ)로 표기하며, 소수점 아래로 무한히 이어지는 무리수입니다.

φ = 1.6180339887… — 끝나지 않는 무리수이지만, 실무에서는 1.618로 충분하다

  • 황금비 φ ≈ 1.618 — 자연과 건축에서 반복 출현
  • UI 활용: 62:38 레이아웃, 타이포 스케일(×1.618), 피보나치 간격
  • 8px 그리드 + 피보나치(8-13-21-34)로 자연스럽게 적용 가능
  • 만능이 아닌 '좋은 출발점' — 사용자 테스트가 최종 판단
상세 노트 보기arrow_forward
2

삼분법과 CTA 배치

중앙 배치는 안정적이지만 지루합니다. 삼분법은 시선을 끌면서도 균형을 유지하는 비결입니다.

화면을 9등분하면 시선의 교차점이 보인다

삼분법(Rule of Thirds)은 화면을 가로 3등분, 세로 3등분하여 총 9개 영역으로 나누는 구도 원칙입니다. 사진, 영화, 회화에서 수백 년간 사용되어 왔습니다.

4개의 분할선이 만나는 교차점을 '파워 포인트'라고 부릅니다. 인간의 시선은 정확히 중앙보다 이 교차점 근처에 자연스럽게 머무는 경향이 있습니다.

  • 삼분법: 화면을 9등분, 4개 교차점이 시선의 '파워 포인트'
  • 히어로 섹션: 헤드라인(좌1/3) + 비주얼(우2/3) + CTA(좌하단 교차점)
  • Z패턴 시선 흐름과 삼분법을 결합하면 CTA 전환율이 높아진다
  • 중앙 배치는 단일 초점에 적합, 삼분법은 스토리텔링에 적합
상세 노트 보기arrow_forward
3

대칭 vs 비대칭 균형

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

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

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

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

  • 대칭 = 안정·신뢰, 비대칭 = 역동·흥미
  • 시각적 무게: 크기, 색상, 밀도, 위치, 대비로 결정
  • 비대칭 균형 = '구성은 다르되 무게는 맞는 상태'
  • Apple 스타일: 큰 이미지 + 여백으로 비대칭 균형 달성
  • 다음 주제: 색채 이론 — 색상환과 배색의 원리
상세 노트 보기arrow_forward

key

핵심 용어 모음

좌측 1/3

헤드라인 텍스트 배치 — 시선이 자연스럽게 시작하는 영역 (좌→우 읽기 문화권)

우측 2/3

히어로 이미지 또는 일러스트 — 시각적 무게감이 큰 요소

좌하단 교차점

CTA 버튼의 이상적 위치 — 헤드라인을 읽고 자연스럽게 시선이 내려오는 지점

크기

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

색상

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

밀도

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

위치

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

대비

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

compare_arrows

비교 정리

항목입증된 사실과장·오해
자연피보나치 수열은 식물 배열에 실제 나타남'모든 자연이 황금비'라는 주장은 확증 편향
건축일부 건축가가 의식적으로 활용한 기록 있음파르테논 신전이 정확히 황금비라는 증거는 약함
디자인62:38 분할은 시각적으로 안정적이라는 연구 있음사용자 테스트에서 황금비가 항상 선호되지는 않음
항목중앙 배치삼분법 배치
느낌안정적, 정적, 공식적역동적, 자연스러운, 시선 유도
적합한 경우로그인 페이지, 에러 페이지, 단일 메시지랜딩 페이지, 상품 상세, 블로그 헤더
CTA 효과시선을 끌지만 행동 유도력이 약함자연스러운 시선 흐름 끝에 CTA 도달
항목대칭 균형비대칭 균형
감정안정, 신뢰, 질서, 격식역동, 흥미, 현대적, 창의적
적합한 UI로그인, 대시보드, 설정, 공공기관랜딩페이지, 포트폴리오, 매거진, 브랜드
설계 난이도상대적으로 쉬움 — 한쪽을 복제어려움 — 시각적 무게 계산 필요
시선 유도시선이 중앙에 머무름의도한 방향으로 시선 이동 가능

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

play_circle인터랙티브 코스 시작하기