피보나치와 디자인 실무
디자인 실무를 진행하다 보면 예상치 못한 지면의 비례에 당황할 때가 많다. 세상에는 16:9, 4:3, A4, A0 외에도 다양한 지면이 존재한다. 예전에 셰이크 쉑 버거의 호딩 작업을 한 적이 있었는데, 높이 3미터에 가로가 30미터에 달했다. 그때 처음 피보나치를 적용해보았는데 생각보다 좋은 결과물을 얻을 수 있었다. 경험상 이 시스템을 이용하면 대단히 창의적인 지면을 만들 수는 없더라도, 일정 수준 이상의 미감은 유지할 수 있는 것 같다. 피보나치수열은 위계질서와 깊은 관련이 있기 때문이다.
글자 크기에 수열 부여하기
아래는 애플 공식 사이트 페이지 한 장면이다. Helvetica 폰트로 대충 글자 크기를 가늠해보니 위에서부터 51/18/38/16/16이 나왔다. 총 5개의 시각적 위계가 글자를 통해 전달되고 있는 셈이다.
애플 사이트 페이지 위계 분석피보나치수열은 [1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597...]처럼 앞 두항의 합이 곧 세 번째 항이 된다. 그런 속성 덕분에 뒤로 가면 갈수록 수의 크기 차가 커지는데, 시각적으로도 선명한 차이를 발생시킨다. 이 차이는 아름다움과 연관이 깊다. 인간이 피보나치가 적용된 조개껍데기 같은 자연물에서 아름다움을 느끼는 이유는 DNA 깊게 새겨진 진화론적 패턴 때문이라고 한다. 그래서 이를 황금비라 부른다. 정보를 빠르게 습득할 수 있는 좋은 위계와(hierarchy) 시각적 아름다움의 상관관계 역시 흥미롭다. 아래는 피보나치수열로 지면을 다시 디자인해본 결과다.
피보나치를 이용해 다시 디자인해본 결과물사이트에 사용된 폰트와 비슷한 크기의 수열을 골랐더니 [13, 21, 34, 55]가 나왔다. 수열을 이용한 디자인이 제목과 본문에서 크기 차를 강하게 발생시켜 개인적으로는 더 호감이었다.
웹디자인을 할 때 보통 추천하는 본문 폰트의 최소 크기가 13px~라는 점도 흥미롭다. 그렇다는 사실은 피보나치에서 [13, 21, 34, 55, 89] 구간을 잘 이용하면 지면의 위계 잡기에 도움이 된다는 말이기 때문이다. 보통 지면의 가장 작은 글자 크기를 기준으로 아이콘이나 버튼 크기가 정해지는 경우가 많다. 예를 들면 위 애플 화면에서의 Learn more 옆에 있는 화살표의 크기는 13px과 관련이 있다. 다양한 웹사이트를 벤치마킹해보면 버튼 크기와 아이콘 크기가 최소 폰트 크기와 밀접한 관련이 있다는 걸 알 수 있다.
정육각 웹사이트에도 피보나치 원리가 고려되어있다.피보나치로 지면 분석하기
실무를 진행하다 보면 예상치 못한 지면과 부딪칠 때가 많다. 이때 당황하지 말고 피보나치를 이용해 공간을 분할해보면 활로가 생길 때가 있다. 아래 예시는 580x440 사이즈의 지면을 피보나치를 이용해 가로로 황금비화시켜 본 것이다.
피보나치수열을 이용해 가로 공간을 황금비로 분할
가로를 피보나치로 쪼갠 황금비는 조형요소가 많은 지면을 정리할 때 효과적이다. 위처럼 해당 지면에서 선명한 크기 차의 동그라미 팔레트를 손쉽게 얻을 수 있기 때문이다. 아래는 pictowatches.com이라는 실제 사이트다. 사이트를 캡처해 화면을 가로 피보나치로 분할해보았다. 분할해서 나온 동그라미 몇 개를 사이트에 적용해보니 아래 예시처럼 거의 근사치에 가깝게 들어맞았다. 실무에서도 지면을 분할한 뒤 선명한 차이가 나는 동그라미 몇 개를 골라 배치하다 보면 화면에 조화가 생길 것이다.
pictowatches.com너비 팔레트로 지면에 질서 주기
레이아웃을 잡을 때 신경 써야 하는 부분이 오브젝트 간 간격과 글자의 행간이다. 이는 ‘그룹핑'과 밀접한 관련이 있다. 피보나치를 이용하면 간격에 질서를 부여할 수 있는 너비 팔레트를 쉽게 만들 수 있다. 아래는 내가 자주 사용하는 너비 팔레트이다. 만드는 방식은 수열에 맞춰 픽셀 높이를 조절하면 된다. 주로 웹사이트 디자인에 자주 사용되기 때문에 가로폭은 중요하지 않다.
피보나치를 이용해 만든 피셀 너비 팔레트
애플 사이트에 너비 팔레트를 대입시켜본 결과위 애플 페이지는 글자 간 간격이 수열로 만든 팔레트 중 [13, 34, 89]로 설정돼있는 걸 알 수 있다. 이처럼 수열을 활용하면 글자 행간부터, 그룹핑된 덩어리 간 간격 등에 어렵지 않게 시각적 질서를 부여할 수 있다. 단 확실히 크기 차가 나는 편이 좋다.
시스템으로서의 피보나치
피보나치는 잘 활용하면 지면에 빠른 질서를 부여할 수 있는 시스템인 건 맞다. 하지만 수열만으로 디자인된다면 지면이 경직돼 보일 가능성이 크다. 인간의 시각 뇌는 완벽하게 정합적인 것에는 매력을 느끼지 못하게 디자인돼 있기 때문이다. 그래서 와일드카드라고 부르는 요소는 잘 짜인 지면에 매력을 부여하는 순간이라고 생각하면 쉽다. 디자이너의 입김이 들어가지 않으면 지면 역시 숨을 쉴 수 없기 때문이다.
당연한 말이지만 시스템만으로는 당면한 문제를 모두 해결할 수 없다. 그럼에도 수열을 활용한 디자인을 긍정하는 이면에는 내가 생각하는 좋은 상업 디자이너의 태도와 관련이 있다. 상업 디자이너는 순수 예술가와 달리 일정 수준 이상의 결과물을 매일 내야 한다. 바꿔 말하면 좋은 상업 디자이너는 10개의 결과물에서 1, 2개를 90점으로 만드는 사람이라기보다 기복 없이 10개 모두를 80점으로 만드는 사람이라고 할 수 있다. 내가 감기에 걸려 결과물의 질이 흔들리는 것을 클라이언트가 감내해야 할 필요는 전혀 없다. 밥벌이는 고단한 법이니까.
'피보나치와 디자인 실무’ 마침.
