brunch

매거진 같이 알면 좋은 것들

라이킷 200 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Shaun Mar 19. 2019

피보나치 수열과 그리드.

"크기가 왜 다르지?"

"작업 파일에 그리드 가이드라인이 없던데?"

"비율의 기준이 어떻게 되는 거야?"

형태를 완성하는 것은 그리드.

그리드와 레이아웃

디자인에 있어 중요한 요소들이 여럿 있다. 컬러, 타이포, 비주얼, 레이아웃 그중 타이포와 레이아웃이 전체적인 첫인상의 대부분을 차지한다고 하니 디자인에서 그만큼 중요한 요소도 없다. 흔히들 그리드와 레이아웃을 혼돈하곤 한다. 그리드는 시스템이고 레이아웃은 시스템을 활용한 창작물이다. 그리드 시스템은 기하학이라는 고전에서부터 시작됐고, 디자이너들에게 꾸준히 사랑받고 있다. 그리드 시스템에 대한 이해는 디자이너로서 학문으로 접근해야 이해할 수 있는 부분이다. 예제 이미지는 인터뷰 스토어 작업 시 1130px에 20 컬럼을 적용한 이미지다.

그리드 시스템을 활용한 레이아웃.

하지만 나는 웹 작업 시 12 컬럼 그리드를 선호한다. 그 이유는 2단, 3단, 4단, 6단 등 여러 분할이 가능하기 때문이다. 12 컬럼을 사용한다 해도 디자이너의 따라 레이아웃이 다르다. 시스템을 누가 어떻게 사용하느냐에 따라 그 결과물인 레이아웃이 다르다.

피보나치 수열과 황금비

황금비는 기하학의 창시자 유클리드가 기원전 300년 무렵에 정의한 것으로 근삿값이 약 1.618이다. 황금비는 심미적으로 가장 아름다운 ‘전체와 부분의 비율’을 의미하기도 한다. 하지만 미국 존스홉킨스대의 천문학자 마리오 리비오는 “대부분의 인공물과 관련해서 우리가 상식처럼 알고 있는 황금비율은 과학적인 근거가 없는 것”이라고 지적한다. 기원전 5세기에 지어진 파르테논 신전의 폭과 높이의 비는 약 2.25여서 황금비 1.618과 거리가 멀다는 것이다.

파르테논 신전 복원팀은 가로 세로의 비가 황금비가 아닌 9:4를 따른다고 밝혔다. (수학동아 2017년 2월호)

그는 “과거 사람들은 꼭 1.618이 아니라 1.5와 1.8 사이를 오갔다”며 “황금비를 예술과 건축에 널리 적용하기 시작한 것은 19세기 중반 이후”라고 말한다. 또 1860년 경 독일의 심리학자 구스타프 페히너는 여러 종류의 사각형 가운데 가장 보기 좋은 사각형을 찾는 실험을 진행했다. 가장 많은 사람들이 선택한 사각형의 가로 세로 비는 13:21, 약 1:1.615였다. 사실 황금비는 고전에서 찾아볼 수가 없다. 근대화가 진행되기 시작하면서부터 황금비에 대한 부분이 부각됐고 그 프레임으로 고대 미술품들을 과도하게 해석했다. 최근 발표에 따르면 모나리자, 파르테논 신전, 앵무조개, 비너스 등에는 황금비가 존재하지 않는다고 한다. 하지만 황금비는 디자인을 함에 있어 기준을 세울 수 있는 방법으로 사용되고 있다. 사람들은 1.5~1.8 사이의 비율에서 벗어나지 않는다고 하니 1.5.~1.8의 비율이 사람에게 안정감을 주는 비율인 것은 어느 정도 일리가 있다. 황금비를 맹신하라는 이야기가 아니다. 기준을 세우고 일관성을 유지하는 방법으로 황금비는 충분히 디자인에서 의미가 있다.

피보나치 수열을 활용하면 황금비(1:1.618)를 구현할 수 있다. 그리드는 수학과 밀접한 관계가 있다. 그 시작이 기하학이라는 고대 수학이었기 때문이다. 그렇다고 고대 수학까지 섭렵할 필요는 없다. 간략하게 말하자면 피보나치 수열만 이해해도 황금비를 충분히 만들 수 있다. 디자인을 하다 보면 흔히 헷갈리는 것이 비율과 수치다. 비율은 상대적인 것이고, 수치는 절대 적인 것이다. 비율은 비율을 유지하면 광범위하게 적용할 수 있지만, 수치는 지정된 한 곳에만 적용할 수 있다. 황금비는 비율에 대한 부분이다. 비율과 수치를 혼동하지 말자. 그럼 피보나치 수열에 대해 아주 간략하게 설명하겠다.

패턴은 매우 간단하다. 1,2,3,5,8,13,21,34,55 숫자의 패턴을 보면 알 수 있듯이 앞 수과 뒷 수의 합이 다음수가 되는 패턴이다. 1 더하기 2는 3, 3 더하기 5는 8, 이런 패턴을 유지한다. 그리고 큰 수를 작은 수로 나누게 되면 1:1.6의 비율을 볼 수 있다.(34/21=1.6) 1:1.6에 대한 공식은 절대적이지만, 이렇게 만든 황금비를 어떻게 적용하고 활용할지는 디자이너의 역량에 달렸다.

활용사례

앞에서 말한 황금비의 비율을 어떻게 활용하는지 활용사례를 보면 알 수 있다. 활용사례를 보면 대게 1.5.~1.8의 비율을 벗어나지 않는다.

스케일의 일관성을 유지하고, 안정감 있는 형태를 만들 수 있다.

iOS의 아이콘 그리드는 1:1.6의 비율을 기본으로 하고 있다. 1:1.6의 비율을 유지해 형태의 안정감과 스케일의 일관성을 벗어나지 않는다.

iOS의 아이콘 그리드 시스템.

안정감 있는 레이아웃을 만들 수 있다.

페이스북은 사이트의 컨텐츠 영역 비율을 1:1.6으로 유지하고 있다. 컨텐츠 영역의 중요도에 따라 1:1.6의 비율은 컨텐츠를 안정감 있게 보이게 한다.

페이스북 사이트.

유튜브 사이트 역시 1.5~1.8의 비율을 벗어나지 않는다. 보통 1:1.6의 비율이 황금비의 절대 수치이긴 하나 경우에 따라 오차가 있지만, 1.5~1.8의 비율을 벗어나지는 않는다.

유튜브 사이트.

폰트에도 적용할 수 있다.

애플 사이트의 맥북 소개 페이지를 보면 텍스트의 비율이 1:1.7을 유지하고 있다. 앞서 말한 바와 같이 1.5~1.8의 비율을 벗어나지 않는다.

애플 사이트의 맥북 소개 페이지.

좋은 것에는 이유가 있다.

흔히 레이아웃이 좋다, 비율이 좋다, 형태가 좋다고 말하는 것들은 그리드 시스템을 기반으로 한다. 좋은 것은 하늘에서 뚝 떨어지지 않는다. 레이아웃이 좋은 것에는 이유가 있고, 비율이 좋고, 형태가 좋은 모든 것들에는 이유가 있다. 그 이유에 대해 호기심을 가지고 관찰한다면, 그 좋은 것들과 같은 수준의 아웃풋을 만들 수가 있다. 디자인을 하는데 앞서 말한 공식이 절대적인 것은 아니다. 보편적인 공식을 기반으로 디자이너의 판단을 통해 새로운 공식이 생겨난다. 그중 의식 있고 합리적인 공식은 여러 추종자가 따르게 된다. 그렇게 새로운 공식이 생겨나는 것이다. 공식을 이해하고 응용해 자신만의 공식을 탄생시킨다면 바우하우스처럼 디자인의 큰 자산이 될 것이다. 그것이 디자인이 지속되는 방식 아닐까?

그리드는 시스템이다. 시스템은 기준을 세우기 위한 도구일 뿐이다. 도구를 활용하여 의미 있는 질서를 만드는 것이다. 그렇다고 황금비를 활용한 그리드 시스템이 디자인의 절대적인 공식은 아니다. 황금비는 질서의 기준을 세우기 위한 하나의 방법이다. 그 방법에서 제일 중요한 것은 디자이너의 합리적이고 의식적인 판단이다.

keyword