황금비율
디자인에서 황금비율을 적용하는 다양한 방법을 알아봅니다
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
황금비율
황금비율은 자연이 우리에게 선사해 준 가장 아름다운 비율입니다. 조개의 껍질, 꽃잎 등 자연에서 뿐만아니라 모나리자, 피라미드 등 역사적인 건축물이나 예술작품에서도 황금비율을 찾아볼 수 있는데요, 이러한 황금비율을 우리가 하는 디자인에 어떻게 적용할 수 있을까요?
1. 황금사각형
Info: 두 변의 길이가 황금 비율인 1:1.61을 사각형에 적용한 것이 황금사각형입니다. A4용지, 신용카드나 신분증(8.5cm, 세로 5.4cm, = 1.574) 등 주위에서 흔히 이 황금사각형을 발견할 수 있는데요, 우리의 눈엔 단순히 직사각형으로 인식되었던 이러한 것들이 인간이 보기에 가장 편안하고 안정적인 형태입니다.
2. 그리드 레이아웃에 적용
Info: 황금비율을 가장 간단하게 적용하는 방법은 화면이나 종이를 구성하는 그리드를 황금비율로 나누는 것입니다. 특히 단 구분이 중요한 웹디자인에서는 더 유용하게 쓰일 수 있는데요, 가로 960픽셀의 화면을 1.6:1의 비율로 나누게 된다면 각각 594픽셀, 366픽셀로 나눌 수 있습니다. 메인 영역과 사이드 영역의 구분이 안정되어 보입니다.
Tip: 메인과 서브의 영역이 황금비율과 거의 유사한 비율로 나뉘어 깔끔하고 정돈된 느낌을 주는 내셔널 지오그래피의 웹사이트입니다.
3. 가로 분할에 적용
Info: 화면을 가로로 구분할 때에도 역시 황금비율을 이용할 수 있습니다. 원페이지로 화면을 구성할 때에, 메인 영역과 사이드 혹은 푸터 영역을 황금비율로 구성할 수 있을 것입니다.
4. 황금나선 (피보나치)
Info: 피보나치 수열로 만들어진 황금나선을 이용하는 방법도 있습니다. 디자인 스튜디오 Moodley가 디자인 한 아트페스티벌의 브로셔는 로고와 이미지가 충분한 여백과 함께 황금나선을 따라 적절히 배치되어 시각적인 안정감을 줍니다.
Info: 트위터의 웹 화면 또한 나선형 그리드로 화면이 구성되어 있습니다. 메인 콘텐츠 영역과 좌측 사이드의 각 영역이 황금비율로 나누어져 중요도에 따라 사용자의 시각적인 흐름을 유도합니다.
5. 2/3 법칙 (Rule of Thirds)
Info: 2/3법칙(Rule of thirds)은 황금비율과 유사하며 쉽게 그리드를 나눌 수 있는 방법입니다. 이는 화면을 가로 3등분, 세로 3등분으로 동일하게 분할하는 것인데요, 카메라로 사진을 찍을 때 이 그리드 안에서 피사체를 중앙의 코너에 배치하는 이유 또한 유사한 원리라고 할 수 있습니다.
Info: 여백과 이미지, 그래픽 요소가 9등분 안에서 조화롭게 배치된 표지 디자인입니다. 정중앙에 배치된 타이틀과 중앙을 향한 모델의 시선은 시각적인 균형감과 안정감을 줍니다.
Info: 웹디자인에서도 같은 원리를 이용할 수 있습니다. 화면을 응시할 때 우리의 눈은 왼쪽에서 오른쪽, 위에서 아래의 방향으로 시선이 이동한다고 합니다. 일반적으로 로고가 상단 좌측에 위치하는 것은 바로 이런 이유입니다. 9개의 영역에서 헤더와 푸터, 메인 콘텐츠와 서브 콘텐츠를 이 원리에 따라 적절히 구성하면 좋습니다.
6. 폰트 크기에 적용
Info: 폰트 크기를 적용할 때에도 황금비율을 이용할 수 있는데요, 타이틀과 서브타이틀, 그리고 본문의 글자 크기를 정할 때 황금비율을 이용한다면 시각적으로 균형된 문단을 구성할 수 있습니다.
황금비율은 어디까지나 참고사항입니다. 모든 디자인에 이 황금비율을 적용할 필요는 없지만, 오랜 시간동안 우리의 눈에 가장 익숙하고 역사적으로 검증된 자연의 산물인 황금비율을 디자인에 이용해 보는 건 어떨까 싶습니다.
7. 황금비율이 적용된 로고 사례
8. 황금비율 각도
