디자인 아틀라스
EN
▦ 레이아웃

황금비

Golden ratio

1 : 1.618 비율. 큰 변을 작은 변으로 나눈 몫이 전체를 큰 변으로 나눈 몫과 같아지는, 고전 회화·건축부터 쓰인 비례입니다.

다른 이름: φ (phi)1.618Golden rectangleFibonacci spiral
···
html
<div class="stage">
  <div class="rect">
    <div class="sq s1"></div>
    <div class="sq s2"></div>
    <div class="sq s3"></div>
    <div class="sq s4"></div>
  </div>
  <svg id="spiral" viewBox="0 0 161.8 100" preserveAspectRatio="xMidYMid meet">
    <path id="path" d="M0,100 A100,100 0 0 1 100,0 A61.8,61.8 0 0 1 161.8,61.8 A38.2,38.2 0 0 1 123.6,100 A23.6,23.6 0 0 1 100,76.4" fill="none" stroke-width="2" vector-effect="non-scaling-stroke"/>
  </svg>
  <span class="label">φ ≈ 1.618</span>
</div>
css
.stage{position:relative;width:min(88%,420px);aspect-ratio:1.618;display:grid;place-items:center}
.rect{position:absolute;inset:0;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.sq{position:absolute;border:1px solid var(--line)}
.s1{left:0;top:0;width:61.8%;height:100%;background:color-mix(in oklab,var(--accent) 12%,var(--surface))}
.s2{left:61.8%;top:0;width:38.2%;height:61.8%;background:color-mix(in oklab,var(--accent) 20%,var(--surface))}
.s3{left:76.39%;top:61.8%;width:23.6%;height:38.2%;background:color-mix(in oklab,var(--accent) 30%,var(--surface))}
.s4{left:61.8%;top:76.4%;width:14.58%;height:23.6%;background:color-mix(in oklab,var(--accent) 42%,var(--surface))}
svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#path{stroke:var(--accent-2);stroke-dasharray:340;stroke-dashoffset:340;animation:draw 3.6s ease-in-out infinite}
@keyframes draw{
  0%{stroke-dashoffset:340}
  65%{stroke-dashoffset:0}
  100%{stroke-dashoffset:0}
}
.label{position:absolute;right:6%;bottom:5%;font:700 clamp(11px,2.4vmin,14px)/1 ui-monospace,monospace;
  color:var(--accent-2);background:color-mix(in oklab,var(--bg) 75%,transparent);padding:2px 6px;border-radius:4px}

φ(파이) ≈ 1.618은 피보나치 수열(1,1,2,3,5,8,13…)의 인접한 두 수의 비가 수렴하는 값과 같습니다. 그래서 황금비 사각형을 정사각형과 남은 직사각형으로 계속 나누면, 그 정사각형들의 호를 이어 그 유명한 나선(황금 나선)이 됩니다.

웹 레이아웃에서는 두 칼럼의 폭 비율(예: 본문 61.8% : 사이드바 38.2%), 이미지와 캡션의 비율, 히어로 섹션과 그 아래 콘텐츠의 높이 비율 등에 씁니다. `aspect-ratio: 1.618`로 요소 하나에 바로 적용할 수도 있습니다.

다만 "황금비라서 아름답다"는 인과관계는 과장된 경우가 많습니다 — 실제로는 극단적이지 않은 비대칭 비율(대략 1.3~1.8 사이)이면 대부분 무난해 보입니다. 숫자 자체에 얽매이기보다 "정확히 반반은 지루하다"는 감각으로 이해하는 게 실용적입니다.

언제 쓰나

두 영역의 비중 차이를 은근하게 보여주고 싶을 때 61.8:38.2 같은 근사값을 참고 삼아 씁니다. 정확한 수치보다 "확실히 비대칭"이라는 느낌이 더 중요합니다.