황금 비율: 이해 및 사용에 대한 궁극적인 가이드

전 세계의 디자이너는 황금 비율에 대해 알아야 합니다. 미학적으로 즐거운 디자인을 만드는 수학적 비율입니다. 황금비는 자연에 너무나 자주 존재하기 때문에 그 결과가 자연스러워 보이는 것은 놀라운 일이 아닙니다.

Unsplash의 Bogomil Mihaylov 사진

황금 비율은 다음과 같은 다른 이름으로도 불립니다.

• 신성한 비율
• 황금 평균
• 골든 섹션
• 파이(그리스 문자)

황금 비율 뒤에 숨겨진 수학

나는 황금 비율의 수학을 가능한 한 간단하게 설명하고 실제로 알 필요가 없는 세부 사항은 다루지 않을 것입니다. 수학을 따라갈 수 있다면 훌륭합니다. 그러나 할 수 없더라도 괜찮습니다. 디자인에 이 개념을 계속 사용할 수 있습니다.

황금 비율을 이해하려면 먼저 황금 사각형을 이해해야 합니다.

황금 직사각형은 내부에 정사각형이 있는 큰 직사각형입니다. 정사각형의 변은 직사각형의 가장 짧은 길이와 같습니다.

출처: 위키피디아

황금비는 1.618과 같은 숫자입니다. 파이가 대략 3.14와 같지만 정확히는 아닙니다.

당신은 한 줄을 잡고 긴 부분(a)과 짧은 부분(b)의 두 부분으로 나눕니다. 전체 길이(a + b)를 (a)로 나눈 값은 (a)를 (b)로 나눈 값과 같습니다. 그리고 이 두 숫자는 모두 1.618입니다. 따라서 (a + b)를 (a)로 나눈 값은 1.618이고 (a)를 (b)로 나눈 값 도 1.618입니다.

이해하기 훨씬 쉽기 때문에 황금 사각형으로 돌아가십시오.

사각형 안에 사각형을 배치하면 더 작은 다른 사각형이 생성됩니다. 검은색 선은 무시하고 빨간색과 녹색 상자를 보십시오.

빨간 정사각형은 네 변의 길이가 같고 그 길이는 직사각형의 가장 짧은 길이와 같습니다. 해당 정사각형을 분할하면 자동으로 다른 작은 직사각형(녹색 윤곽선)이 생성됩니다. 함께, 그들은 완전한 황금 비율 레이아웃과 황금 나선의 기초를 만듭니다.

파란색으로 윤곽을 표시한 다음과 같이 더 작은 사각형에서 새로운 황금색 사각형을 만들 수도 있습니다.

전통적인 황금 비율 다이어그램에는 8개의 황금 사각형이 있습니다.

그리고 여기 가장 작은 황금 직사각형, #8이 있습니다.

왼쪽 하단에서 시작하여 각 정사각형 및 작은 직사각형 단면의 먼 쪽을 연결하는 아치를 만들면 황금 나선을 얻을 수 있습니다.

피보나치 수열

피보나치 수열은 이해하기 매우 간단합니다. 0과 1로 시작하여 그 앞에 있는 두 숫자를 더하여 다음 숫자를 얻습니다. 0 + 1 = 1, 그 다음 1 + 1 = 2 등. 시퀀스의 처음 몇 개의 숫자는 0, 1, 1, 2, 3, 5, 8, 13, 21, 34입니다.

이 숫자를 사용하여 해당 너비의 정사각형을 만들면 황금 나선을 만들 수 있습니다.

출처: 수학은 재미있다

골든 서클

때로는 나선형 대신 또는 추가로 사각형에 원이 그려지는 것을 볼 수 있습니다. 황금 비율 오버레이의 상자에 완벽한 원을 그리면 하나의 인접한 원과 1:1.618 비율이 됩니다.

출처: 각광부

펩시와 트위터 로고는 골든 서클을 사용합니다.

출처: 하이브리드 토크

당신은 본 적이 많이 전

자연은 황금 비율로 가득 차 있습니다. 그것은 식물, 조개, 날씨에 있습니다 ...

출처: Unsplash의 Annie Spratt의 사진

출처: Unsplash의 NASA 사진

그리고 우리는 그것을 너무 자주 보았기 때문에 우리의 두뇌는 그것을 선호합니다. 그 타고난 매력 때문에 디자이너가 사용할 수 있는 강력한 레이아웃입니다.

예술과 디자인의 황금 비율

때때로 황금 비율은 매우 쉽게 알아볼 수 있습니다.

출처: staceysdetailinginc.com

때때로 당신은 "당신이 무슨 말을 하고 있는지 잘 모르겠습니다... 아, 잠깐만. 이제 나는 그것을 본다. 제 생각에는."

출처: 마케팅 인사이더

다른 시간에는 당신이 그것을보고 미치게 될 수 있습니다 ...

출처: 와이드월

...하지만 주요 황금 사각형에 초점을 맞추면 조금 더 명확해집니다.

일반적으로 참조되는 예를 살펴보겠습니다. 파르테논 신전

출처: 크리에이티브 블록

처음에는 이것을 보고 "그건 저에게 대칭적으로 보입니다. 내가 보고 있는 것이 황금 직사각형 나선에 어떻게 들어맞습니까?”

황금 비율은 디자인의 각 부분이 어떻게 특정 섹션에만 완벽하게 들어맞는지에 관한 것이 아닙니다. 그것이 요점이라면 파르테논 신전의 오른쪽은 하나의 큰 블록이 될 것이고 왼쪽은 작은 블록으로 분할될 것입니다.

대신 비율은 조화와 비율을 만드는 데 사용되며 몇 가지 다른 방식으로 해석될 수 있습니다.

황금 비율은 수학에 기반을 두고 있지만 창의적인 방식으로 조정할 수 있습니다. 파르테논 신전의 경우 황금 비율은 디자인 구성 요소의 높이와 배치를 결정합니다. 또한 그 위에 황금 비율 다이어그램을 배치하는 여러 가지 방법이 있습니다.

출처: 아키넥트

출처: Esther Sugihto on Medium

출처: GoldenNumber.net

황금비율과 웹사이트 디자인

수학에 관심이 있든 머리가 터질 것 같든 황금 비율은 디자인 측면에서 이해하기가 조금 더 쉽습니다. 당신은 무거운 일을 했습니다. 이제 기본 오버레이를 사용하여 웹 구성 요소를 완벽하게 만족스럽게 만들 차례입니다.

황금 비율과 레이아웃

완벽한 황금 비율 레이아웃을 원하면 치수를 1:1.618로 설정하십시오. 예를 들어 너비를 960픽셀로, 높이를 594픽셀로 설정할 수 있습니다. 황금 사각형은 각 면이 594픽셀이고 사각형이 나머지 레이아웃(594 x 366)을 차지합니다.

계산기 수프에는 올바른 황금 비율 값을 찾기 위해 용어(A, B 또는 A + B)를 설정할 수 있는 유용한 황금 비율 계산기가 있습니다.

또는 이 유형의 2열 레이아웃을 사용할 수 있습니다. 여기서 한 열은 다른 열보다 약간 더 넓습니다. 체계적이고 명확하게 계층 구조를 보여줍니다.

출처: 내셔널 지오그래픽

홈페이지가 내 블로그 게시물의 모음이기 때문에 내 웹사이트에서 이것을 사용하고 이것이 블로그에서 가장 잘 알려진 레이아웃 중 하나라고 생각합니다.

하지만 제 생각에는 우아한 테마에서 사용하는 대칭 레이아웃이 더 현대적입니다.

황금 비율과 간격

황금 비율은 디자인 요소를 배치할 위치, 사용할 비율 및 음수 공간을 남겨둘 위치를 결정하는 데 도움이 될 수 있습니다. 다음은 간단한 예이며 맨 위에 놓을 필요 없이 황금 비율 오버레이를 거의 볼 수 있습니다.

출처: Digiarts 2011

Photoshop에서 Golden Spiral을 적용했을 때의 모습은 다음과 같습니다.

다시 말하지만, 황금 비율은 수학에 기반을 두고 있지만 디자인에 적용할 때는 완벽하지 않습니다. 그 디자인은 황금 직사각형에서 만들어지지 않았기 때문에 황금 나선은 정상적인 비율을 벗어났습니다. 그러나 디자이너가 디자인의 가장 큰 요소와 가장 작은 요소 및 음수 공간을 배치할 위치를 선택하도록 안내하는 방법을 알 수 있습니다.

황금 비율 오버레이를 레이어링하여 동일한 디자인의 다른 요소에 적용할 수도 있습니다.

출처: Lemongraphic의 브랜딩. Canva의 예.

황금비율과 함량

황금 비율의 레이아웃과 간격을 함께 생각할 때 웹 사이트에서 콘텐츠를 배치할 위치를 결정할 수 있습니다.

이번에는 Canva의 황금 비율 오버레이가 적용된 내셔널 지오그래픽 웹사이트를 다시 살펴보겠습니다.

콘텐츠가 나선의 중심선을 따라 정렬되도록 레이아웃이 분할됩니다. 왼쪽에는 큰 콘텐츠 블록이 있습니다. 오른쪽으로 갈수록 내용이 더 조밀해지고 음수 공간이 훨씬 많아집니다. 나선형의 중앙 소용돌이를 향해 두 번째 내셔널 지오그래픽 로고가 보일 것입니다. 홈 브랜딩을 유도하는 데는 눈이 자연스럽게 가는 곳에 배치하는 것보다 더 좋은 방법은 없습니다.

다음은 Golden Spiral이 주요 구성 요소를 넘어서도 디자인을 통해 어떻게 당신의 눈을 이끌 수 있는지에 대한 좋은 예입니다. 한 페이지에 압축할 콘텐츠가 많은 경우에 유용합니다. 당신은 또한 그와 같이 포장되고 상세한 디자인에도 불구하고 거기에 여전히 부정적인 공간이 있다는 것을 알게 될 것입니다.

출처: Helms Workshop의 디자인. Canva의 예.

가작: 황금 비율 및 이미지

황금 비율은 사진 구도에도 사용됩니다. 황금 나선을 만드는 대신 황금 비율은 이미지를 6개의 블록으로 나눕니다. 이 유형의 그리드에는 동일한 황금 비율이 사용됩니다. 섹션의 너비와 높이는 1 또는 0.618입니다.

출처: Canva

그런 다음 교차점을 사용하여 샷을 구성합니다. 목표는 교차하는 선 중 하나에 피사체 또는 피사체의 주요 부분을 배치하는 것입니다. 피사체가 중앙에 있으면 안 되며 일부 블록은 비어 있어야 합니다(대부분의 경우 최소한 매크로 사진 및 클로즈업 인물 사진). 거의 모든 프레임을 채울 것입니다). 이렇게 하면 피사체가 중앙에 있을 때보다 더 흥미로운 인물 사진을 만들 수 있습니다.

이 규칙을 따르는 훨씬 간단하고 접근하기 쉬운 방법은 아마도 휴대전화의 내장 카메라나 DSLR에 있는 3분의 1 법칙 그리드를 사용하는 것입니다.

다음은 사촌의 아들과 함께 찍은 사진입니다. 피사체가 프레임을 채우는 위치와 채우지 않는 위치를 보여주기 위해 3분의 1의 법칙 격자를 그 위에 놓았습니다.

또한 Golden Spiral이 주제를 거의 완벽하게 감싸는 방법을 살펴보십시오.

황금 비율은 3분의 1의 규칙 그리드에 길이와 너비가 동일한 섹션이 있기 때문에 3분의 1의 규칙과 다릅니다. 그러나 이것은 사진가가 사진을 구성하거나 편집할 때 일반적으로 사용하는 방법입니다.

마무리

황금 비율은 있는 그대로 사용하거나 목적에 맞게 조정하고 크기에 맞게 조정할 수 있습니다. 수학에는 어렵고 빠른 규칙이 있을 수 있지만 창의성에는 그렇지 않습니다. 처음부터 황금 비율을 사용하여 디자인을 안내할 수 있지만 디자인을 시작한 후에 조정 및 개선을 위해 사용할 수도 있습니다. 목표는 디자인을 강제로 맞추는 것이 아니라 비율을 안내하는 것입니다.

웹사이트 레이아웃을 더 많이 사용할 준비가 되셨습니까? Divi의 새로운 높이 및 너비 옵션을 사용하여 반응형 디자인을 만드는 방법에 대한 기사를 확인하십시오.