웹디자인에 수학적 요소를 도입하는 방법 (Applying Mathematics To Web Design)

2010년 2월 9일 SMASHING MAGAZINE에 실린 Applying Mathematics To Web Design에 관한 자료를 FIREJUNE님께서
번역해두신 자료가 있어 발췌해 왔습니다.
황금 비율, 피보나치 수열, 오원소, 사인 웨이브 등 수학적 요소를 웹디자인에 도입하는 방법에 대하여 다루고 있습니다.

"수학은 아름답습니다." 수학을 싫어하는 사람은 이 말이 미친소리로 들릴지도 모르겠습니다만 자연과 우주 그리고 작은 조개에서 부터 은하에 이르기까지 모든 만물이 수학적인 요소를 가지고 있다는 것은 사실입니다. 수학은 먼 옛날부터 오늘날까지 예술과 건축 디자인등 여러분야게 걸쳐 이롭게 사용되어 왔습니다. 그리고 수학은 분명히 창의적인 디자인을 생산하는데 밑거름이 될 수 있습니다. 하지만 웹 디자인에는 그다지 중요하지 않게 여겨지고 있습니다. 물론, 무조건 수학에 의지해서 디자인하자는 것은 아닙니다. 디자인적인 관점에서 수학을 친구로 여기고 접근하여 활용할 수 있는 방법에 대하여 알아봅시다.

황금 비율(Golden Ratio) 디자인
"1:1.618" 비율로 이루어진 것을 "황금 비율"이라고 하며 가장 아름다운 비율이라고 표현합니다. 그리고, 이 비율을 가진 직사각형을 "황금 사각형(Golden Rectangle)"이라고 합니다. 즉 아래와 같은 사격형입니다.

 아래는 이 "황금 사각형"을 도입하여 웹 사이트를 디자인한 예입니다.

한줄에 3개씩 총 6개의의 사각형이 배치되어 있으며, 크기는 299 x 185로 되어있습니다. 각 사각형의 크기는 299 / 185 = 1.616 이 되어 황금 사각형인 것을 확인할 수 있습니다. 이 황금 사각형은 충분한 공백이 확보되어 있기 때문에 황금 사각형에 의하여 분위기를 연출했다는 사실을 알지 못하는 경우가 많습니다. 그러나 시각적 안정감이 묻어나오고 있습니다.

이러한 격자 구성은 이미지 갤러리 또는 포트폴리오, 쇼핑몰 등 제품 중심의 웹사이트에 적용하기 쉽습니다. 긴밀한 컨텐츠 배치와 접근 용이성 및 강조효과를 적절히 사용하면 더욱 멋진 디자인이 될 것입니다.

샘플 레이아웃 PSD 다운로드

피보나치(Fibonacci) 디자인
피보나치 수열은 두 숫자 0과 1로 시작하는 수열에서 다른 자연수를 차례로 더한 수열입니다. 피보나치 수열의 순서가 더 높아지면 황금 비율에 가깝게 되고 이들은 서로 연관성을 가집니다. 

 
 피보나치 수열을 곡선으로 표현한 것을 "황금 나선"이라고 합니다. 이 나선의 꼭지점을 기준으로 사각형으로 배치하면 이 사각형들은 황금 비율을 가진것으로 볼 수 있습니다. 피보나치 수열을 웹 디자인에 도입하는 쉬운 방법은 레이아웃 컬럼의 너비에 적용하는 것입니다. 아래의 예를 봅시다.
 

총 3단으로 구성되었으며 각 단의 너비는 피보나치 수열에 근거하고 있습니다. 기본을 90px로 잡고 첫 번째 컬럼은 180px (90 x 2) 두 번째 컬럼은 270px (90 x 3), 그리고 마지막 컬럼은 720px (90 x 8)의 너비를 가집니다. 또한 글꼴의 크기도 피보나치 수열에 해당하며, 제목은 55px, 표제는 34px 본문은 21px로 구성되어 있습니다.

피보나치 수열을 디자인에 적용하고자 할 때 한정된 고정폭을 가진 레이아웃은 주의가 필요합니다. 예를 들어 페이지 전체 폭이 1,000px로 고정되어 있다면 피보나치 수열을 사용하는 것이 어렵습니다. 이 수열을 사용하기에 이상적인 숫자는 610px, 987px, 1,597px 이 있으며 당신은 이 범위 내에서 대략적인 값을 선택하게 될 것입니다.

피보나치 수열은 잡지 스타일의 레이아웃과 블로그 등에 잘 어울립니다. 피보나치 수열을 다른 형태로 사용할 수도 있습니다. “Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web” (프랑스어) 이 포스트는 피보나치 수열을 응용하는 방법을 조금 더 깊이 설명하고 있습니다. 만약 당신의 웹사이트 디자인이 너무 경직되어 있다면 피보나치 수열을 적용하여 레이아웃을 구성해 보세요.

샘플 레이아웃 PSD 다운로드

오원소(Five Elements , Or Kundli) 디자인

오원소는 인도의 별자리인 "Kundli"에서 온 것으로, 정 사각형에 대각선을 긋고 각 변의 중심을 이은 형태를 말합니다.

 

다음 예제에서는 "Kundli"의 기하학적인 배치에 근거하여 디자인한 것입니다.

각 요소를 클릭하면 그것에 관하여 정보를 표시합니다. 자바스크립트를 이용하여 애니메이션 효과를 부여하거나 툴팁이 적용되어도 재미있겠군요. 오원소를 가진 레이아웃 디자인은 복잡한 것이 아닙니다. 3개의 열이 머리글(Header)과 바닥글(Footer) 그리고 컨텐츠 영역으로 배치되어 있을 뿐입니다.

오원소 디자인은 제품 정보와 포트폴리오 사이트에 잘 어울립니다. 그리고 자바스크립트 애니메이션 효과를 가중시킬 수 있는 구조입니다.

샘플 레이아웃 PSD 다운로드

 
 

사인 웨이브(Sine Wave) 디자인
사인 웨이브를 일컬어 "sinusoid"라고 합니다. 부드럽고 반복적인 파동을 나타내는 용어입니다.

이 간단한 물결 모양의 패턴을 사용하여 페이지 레이아웃을 만들어 보겠습니다. 물론, 웹 디자인 뿐만 아니라 그래픽과 인포그래픽 등 다른 디자인에도 동일한 방법으로 사용될 수 있습니다.

컨텐츠의 배치는 머리글 및 바닥글, 그리고 다섯개의 컬럼으로 간단하게 구성되어 있습니다. 그리고 각 컬럼들은 자바스크립트를 이용한 상호작용(interactive) 컨텐츠들입니다.

이러한 웨이브 패턴 디자인은 가로 탐색을 활용한 레이아웃 및 시간 흐름을 표현하는 스케줄러 등에 잘 어울립니다. 각 컬럼을 자유롭게 강조할 수 있는 대화형 컨텐츠를 만들기에 적합합니다.

샘플 레이아웃 PSD 다운로드