지금 까지 크고 작은 웹 사이트를 만들어 보면서 나름대로 느낀 디자인 수칙을 정리해 보았다.

1. 사용자가 쓰기 편한 (user friendly한) 웹 사이트를 제작할 것.
비록 만들기는 어렵더라도 사용자가 이용하기 쉽다면 그것이 좋은 웹 사이트라는 말.

• 사례 1: 일전에 이 블로그에도 이에 해당하는 사례가 하나 있었으니, 블로그를 개장한지 반년이 지나자 하루에도 수십통의 스팸 코멘트가 쌓이는 것이었다. 보다 못한 나는 코멘트를 달때 의무적으로 (요새 흔히 볼 수 있는) 이상한 그림안에 있는 글자를 입력하도록 사용자에게 요구했었다. 하지만 시민논객 박영호가 “그것은 firm이 편하려고 사용자에게 불편을 주는 행위”라고 꼬집었고 나는 그 말이 옳다고 판단하여 추가 입력 항목 없이 내부적으로 스팸을 걸러내는 filter를 적용하게 되었다. 그나저나 그 이후 박영호는 이 블로그에서 코멘트를 쉽게 달고 있는지 잘 모르겠다.
• 사례 2: 요새 흔히 볼수 있는 ActiveX를 사용하도록 사용자에게 요구하는 곳은 거의 모두 잘못 디자인된 사이트라고 보면 무방하다. 예를 들어 동영상을 보기 위해서 ActiveX를 반드시 다운받아야만 하는 사이트가 그 예. 보다 표준적인 방법으로 (예를 들자면 mov나 asf같은 streaming media나 아니면 flash movie 등과 같은 매체로) 충분히 서비스를 제공할 수도 있음에도 불구하고 ActiveX를 사용하는 것은 프로그래머가 “내가 멍청하고 무능력하고 귀찮아서 당신들에게 비표준적이면서도 귀찮은 ActiveX 팝업창과 확인 클릭을 강요하는 것이에요.”라고 선전하는 것이나 마찬가지.

2. 모든 대중적인 웹 브라우저에서 거의 비숫하게 보여질 수 있도록 표준적인 방법으로 웹 사이트를 꾸밀 것.
여기서 말하는 대중적인 웹 브라우저란 MS Internet Explorer 말고도 Firefox같은 Mozilla 계열 브라우저, Apple Safari, Opera, 그리고 KDE Konqueror 등을 말한다. 물론 우리나라에서야 IE가 사용자층의 90% 이상을 점유하겠지만 이게 항상 적용되는 것은 아니다. 게다가 요 근래 IE의 보안상 취약점 및 느린 속도로 인해 Firefox로 갈아타는 사용자가 늘어가고 있는 추세에서 IE에서만 제대로 동작하는 웹 사이트는 분명 반쪽자리 사이트라고 보는 것이 옳을 것이다. 실제로 2007년 현재를 기준으로 firefox는 IE 다음으로 가장 많이 사용되는 browser라고 하며 이 블로그를 찾는 사람의 27%정도가 Firefox로 접속하고 있었다.

▲ Firefox에서 레이아웃이 깨지는 사례. 자세히 보면 인코딩 문제 때문에 글자도 몇몇 군데 깨져있다 –_–;

▲ 교보문고야.. 너도 좀 어떻게 안 되겠니?

3. 한 화면당 다운로드되는 모든 요소의 크기가 60kB를 넘지 않을 것.
한 화면을 구성하는 html 파일 및 그림 등등을 모두 합하여 60–70kB를 넘지 않는 것이 이상적이다. 이 정도라면 56kbps 모뎀으로 15초 내외면 다운로드 받아 볼 수 있는 정도의 크기. (구닥다리라고 무시할지도 모르지만 아직도 모뎀을 쓰는 사용자들이 북미주에서 2006년 기준 36%라고 함) 이런 점에서 볼 때 Flash로 도배질한 site 또한 내 시각에서는 별로 바람직하지 못하다.

지금까지 언급한 내용은 나름 광범위하게 적용 될 수 있는 일반 수칙인 것 같다…만 아쉽게도 우리나라 유명 포탈 사이트 대부분은 위 세가지 수칙 중 하나라도 제대로 지킨 것이 없지 싶은데 말입니다 (네이년 및 흥신월드 등등). 어쨌건 이제 다음부터 다룰 내용은 지극히 개인적인 디자인 취향.

4. Frame을 사용하지 않을 것.
Frame을 사용하면 (1) 주소줄이 정확하게 표시되지 않으며 (2) 뒤로 가기 버튼이 제대로 작동하지 않을 수 있다. 따라서 모든 내용을 뭉뚱그려 하나의 frame으로 제작하는것이 훨씬 바람직하다.

5. 본문 폭은 770 pixel을 넘기지 않을 것.
물론 대부분의 사용자가 1024×768 이상의 해상도로 컴퓨터를 사용하고 있지만 아직도 800×600 화면을 사용하는 사람이 있을 수 있다. 그리고 무엇보다도 너무 큰 화면에 맞춰 페이지를 디자인하면 전체화면 모드가 아닐 경우 페이지 레이아웃이 흉하게 틀어질 수 있다.

6. 사용하는 색상을 5가지 이하로 줄이고 배경은 흰색으로.
그림을 제외한 글자에 사용되는 색은 5가지 이하로 줄이는것이 좋다. 너무 다양한 색을 사용하면 사이트가 난잡해짐. 본 사이트도 검정색(본문), 파란색(링크), 옥색(방문했던 링크), 쥐색(작은 텍스트) 이렇게 네 가지 글자 색만 사용한다. 또한 배경색은 흰색이나 그에 상응하는 밝은색으로 하는게 (경험적으로) 페이지가 더 깔끔해보이고 눈이 덜 피로한 것 같다. 확실히 검은 바탕에 흰색 글씨는 눈이 마이 아파. =_=

7. 사용하는 서체는 5개 이하로, 장식체는 사용하지 않는다.
위와 비슷한 이유로 너무 많은 서체를 사용하면 사이트가 난잡해진다. 개인적으로는 Times New Roman, Georgia, Verdana 이 세가지만 사용하면 거의 충분하다고 본다. 특히 Georgia는 작은 크기에서도 가독성이 뛰어나며 서체 자체도 상당히 아름답게 잘 짜여졌다고 생각한다.

▲ Wikipedia에서 훔쳐온 Georgia 서체 예제.

8. Encoding은 utf-8을 사용한다.
한글을 포함한 비영어권 글자는 여러 방법으로 표현할 수 있겠지만, 할 수만 있다면 가장 국제적이면서도 표준적인 utf-8로 인코딩을 하는것이 바람직해 보인다.

Conclusion
써 놓고 보니 완전 minimalistic한 simple is beautiful적인 사상이 드러나는 글이다. 어쨌든 우리나라 웹 디자인 하는 사람들, 너무 기교에만 치중하지 말고 기본에도 충실하게 웹사이트를 꾸며주었으면 한다. 좀 Google이나 Flickr(이젠 Google에 인수 되었지만 –_–) 디자인 철학 반만 따라가 주었으면.

.

아 젠장 책 좀 봐야되는데 남굴사인가 하는 곳에 들어갔다가 제대로 말렸다. 이 사람들 주장대로라면 제4 땅굴 이후로도 수십개의 남침 땅굴이 만들어졌으며 이미 의정부를 넘어 수원 화성까지 땅굴이 내려온게 된다. 특히나 저기서 근거 자료로 삼는 사진 및 동영상이 과학적으로 너무나도 설득력 있어서 더 말렸다는. 주장하는 내용이 제발 사실이 아니길 빈다. 그나저나 북괴군은 겉으로는 평화 운운 하면서도 여태까지 수십번 뒤통수를 쳐 왔기 때문에 저런 짓은 하고도 남을 놈들이긴 하다 (그래도 4주 훈련은 제대로 받았음).