Web Master Guide!

웹 스타일 가이드 - 웹 사이트 제작을 위한 기본적인 디자인 원칙
패트릭 J.린치, 사라 호튼 지음ㅣ 양선옥, 고일주 옮김 / 안그라픽스 / 2000년 5월

''황금비''라고 들어보셨는지요. 1개의 선을 a와 b로 분할(a>b)할 때 b;a=a:(a+b)가 되도록 하는 것인데, 이게 대략 1:1.618정도가 됩니다. 특히 조각이나 건축에는 이 황금비율이 자주 사용되었습니다. 기제에 있는 쿠프왕의 피라미드의 밑변과 높이의 비도 황금비율로 되어 있고, 또 식물을 비롯한 많은 자연물에도 황금비율이 숨겨져 있죠. 고대 인간의 미적 기준은(물론 현재도 어느 정도는 그렇지만) 바로 이 황금비에 지배받고 있었다고 이해하면 되겠네요. 1:1.618…

중국의 채륜이 종이를 발명했다고 하지만 그 이전부터 인간은 종이 비슷한 것들을 사용하고 있었습니다. 그리고 시간이 흘러 종이가 보편화되면서 인간들은 종이를 일정한 규격으로 재단하게 됩니다. 바로 그것이 우리가 흔히 쓰는 A4니 B5니 하는 것이죠. 그렇다면 A4 종이의 가로, 세로 비율을 아시나요? 바로 1:1.414입니다. 1:1.414라는 비율은 정확히 절반을 자르면 똑같이 1:1.414라는 비율로 나옵니다. A1 전지를 절반으로 자르면 A2, 다시 이를 절반으로 자르면 A3, 다시 이를 절반으로 자르면 A4…이런 식이란 말입니다. 종이가 보편화된 중세 이후 특히 현대 인간들의 시지각은 바로 이 종이 규격에 지배받게 됩니다. 1:1.414…

우리는 종이 시대를 넘어 모니터 시대에 살고 있습니다. 아직 모니터로 글을 읽고 그림을 보는 걸 불편해 하시는 분들이 있지만 어쨌건 간에 매번 프린터로 출력해서 볼 수도 없는 노릇이고 보면, 결국은 모니터에 익숙해져야 하는 것이 아닐까 싶습니다. 자, 그럼 모니터의 가로, 세로 비율은 어떻게 될까요? 그렇죠. 4:3 즉 1:1.333…입니다.

이제 우리 시대의 모든 시지각의 기준은 1:1.333…에 지배받고 있습니다. 웹 스타일 가이드는 1:1.333…이라는 모니터 환경 위에서 웹 디자인을 하는데 있어서 기본적으로 지켜야 할, 일관된 네비게이션, 통신속도와 상호작용, 단순성과 일관성 등 인터페이스 디자인에 대한 원칙부터 사이트 디자인(사실은 네비게이션)대한 부분까지 원칙들을 하나 하나 친절하게 짚어 주고 있습니다.

특히 이 책에는 실무에 있어서 중요한 요소들을 꼼꼼하게 정리해 놓았습니다. 가령, 4장 페이지 디자인에서는 플랫폼에 대한 부분을 지적하면서 default로 디자인했을 때, 웹 브라우저와 왼쪽 라인과 상단에 자동으로 설정되는 옵셋에 대한 고려라든가, (보통은 8픽셀이지만 브라우저의 종류와 버전에 따라 이것도 차이가 있죠. 경우에 따라 다르지만 저 같은 경우 보통 leftmargin과 topmargin을 0으로 설정합니다.)

또 웹 페이지의 수직적 계층화나 정보를 표현하기 위한 화면 디자인에 대한 고려 즉, 한 페이지에 들어가는 정보의 양이 많을 경우 필연적으로 스크롤이 생기게 되는데 이 경우 사용자는 스크롤하지 않은 화면과 스크롤 한 화면 사이에서 새로운 그래픽 문맥을 접하게 된다는 사실을 얘기하고 있죠. 따라서 사용자를 위해서 스크롤 하지 않은 첫 화면에 최우선적인 항목이나 모든 중요한 정보, 링크를 집중시키고, 스크롤 할 경우 만나게 되는 두 번째 화면에 상대적으로 중요도가 낮은 항목이나 소수의 그래픽을 배치함으로서 효율적인 정보 디자인이 가능하게 해야 한다는 사실 등을 지적하고 있습니다.

쉽게 생각하면 당연히 누구나 알고 있는 내용이 아니냐 하시겠지만 실제로 웹 디자인을 하거나 설계에 참여할 때는 이런 부분을 무심코 지나치는 경우가 많습니다. 디자인은 디자이너만의 몫이 아닙니다. 그런 의미에서 이 책은 웹 마스터 가이드라 부를만 합니다.

숙제!
황금비 1:1.618→종이 1:1.414→모니터 1:1.333! 점점 정사각형에 가까워지는 것 같군요. 이게 무슨 뜻일까요? 여기에도 혹시 무슨 법칙이 아니면 음모이론(?)이 도사리고 있는 건 아닐까요? 혹시 알고 계신 분이 있을까요?