topic★★★★★난이도 · 약 15분
황금비와 UI
1:1.618 — 자연에서 발견된 비율이 로고와 레이아웃에 적용되는 이유.
#황금비#피보나치#1.618#로고
왜 배우는가
황금비는 디자인에서 가장 유명한 비율이다. 과장된 신화를 걷어내고 실제로 UI에 적용할 수 있는 방법을 배우면, 레이아웃과 로고 디자인의 비율 감각이 한 단계 올라간다.
황금비(Golden Ratio)는 약 1:1.618의 비율이다. 그리스 문자 φ(파이)로 표기한다. 직사각형의 짧은 변을 1로 놓았을 때 긴 변이 1.618인 비율이며, 이 직사각형에서 정사각형을 잘라내면 남은 직사각형이 다시 같은 비율을 갖는 자기 유사성이 특징이다.
피보나치 수열과의 관계 — 1, 1, 2, 3, 5, 8, 13, 21, 34... 피보나치 수열에서 인접한 두 수의 비율(예: 21/13 ≈ 1.615)은 항이 커질수록 황금비 1.618에 수렴한다. 자연에서 해바라기 씨 배열, 앵무조개 나선이 이 수열을 따른다.
| 적용 영역 | 활용 방법 | 사례 |
|---|---|---|
| 로고 | 원과 호의 크기를 피보나치 비율로 구성 | Apple 로고, Twitter(구) 로고의 원형 구성 |
| 레이아웃 | 콘텐츠 영역과 사이드바를 약 62:38으로 분할 | 블로그 본문(넓음) + 사이드바(좁음) |
| 타이포그래피 | 제목/본문 폰트 크기 비율을 1.618로 설정 | 본문 16px → 제목 26px (16 x 1.618) |
| 이미지 크롭 | 황금 직사각형 비율로 이미지 자르기 | 히어로 배너를 1:1.618 비율로 설정 |
다만 황금비를 맹신할 필요는 없다. 실증 연구에 따르면 사람들이 황금비 직사각형을 다른 비율보다 특별히 선호한다는 증거는 약하다. 중요한 것은 일관된 비율 시스템을 사용하는 것 자체이며, 황금비는 그 중 하나의 좋은 선택지일 뿐이다.
실전 팁 — 황금비를 정확히 1.618로 계산하기보다, 피보나치 수를 그리드 값으로 쓰는 것이 실용적이다. 예: 8-13-21-34-55px를 스페이싱·폰트 크기에 활용하면 자연스러운 비율감을 얻으면서도 계산이 간단하다.