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

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주 훈련은 제대로 받았음).

제대로 된 이론은 한번도 접해본 적 없지만 typography에 대해 관심은 많은 편이다 (구지 현란한 아트웍을 적용하지 않더라도 세련된 서체만 있으면 고품질의 문서 디자인을 할 수 있다고 믿는 사람임). 이런 내가 전자문서를 조판할 때마다 항상 생각하는 것이 있었으니 그것은 바로 “제대로 된 한글 기본 서체의 부족.”

일례로 영어로 된 텍스트에 Times New Roman만 입혀서 프린터로 출력해도 그럴듯한 문서가 나온다 (반면 한글 텍스트는 별로 그렇지 못함). 아래는 짧은 텍스트를 이용하여 MS 윈도우에 기본으로 탑재되어 있는 바탕체와 Times New Roman체를 비교해 본 것 (15pt). 물론 텍스트의 내용은 상이하니 내용에는 신경쓰지 말고 문단의 전체적인 시각적 느낌에만 집중하시면 되겠다.

Times New Roman 텍스트는 전체적으로 짜임새 있고 시선의 흐름도 매끄러운 반면 바탕체로 된 한글 텍스트는 무언가 허전해 보이고 세련된 맛이 나지 않는다. 이는 바탕체가 별로 좋은 서체가 아니기 때문. 좀 더 확실한 비교를 위하여 다른 한글 서체와 바탕체를 다음과 같이 비교해 보았다. 위 문단은 바탕체로 아래 문단은 소프트매직의 가변폭 sm신신명조체로 조판되었다.

이 결과가 hinting 때문이라는 반론이 있을까봐 hinting option을 끄고 다시 실험 해 보았다. 그래도 내 눈에는 아래의 sm신신명조로 된 텍스트가 더 나아 보였다.

아쉽게도 sm신신명조는 (end user license 상에) Mac OS X에서만 무료로 사용할 수 있는 것으로 알고 있다. 본인이 직접 서체 파일을 윈도우로 옮겨 보았으나 이기종간의 endianness의 차이 때문인지 잘못된 서체라고 하면서 인식되지 않았다. 서체는 OpenType 형식으로 되어 있었으며 따라서 이론상으론 서체 파일의 별도 수정 없이 다른 기종에서 문제 없이 읽을 수 있어야 한다. 참고로 공개 서체 rasterization 라이브러리인 FreeType을 통해서는 이 서체를 문제없이 읽을 수 있었다.

이야기가 잠시 삼천포로 샜는데, 그렇다면 우리가 쉽게 접할 수 있는 바탕체와 같은 한글 서체는 어떠한 점이 부족한 것일까?

우선 첫번째로, 정방형의 고정폭 글꼴이라는 점을 일반 서체의 한계점으로 꼽을 수 있겠다. 영문자의 “A”와 “a”가 그 폭이 다르듯 한글의 “가”와 “한”은 그 폭이 다르다. 물론 영문보다 그 차이야 덜하겠지만 미세한 차이가 분명 다른 결과를 낳는다. 불행히도 우리가 쉽게 접할 수 있는 한글 서체는 대부분 네모난 틀 안에 한글자 한글자를 새겨 넣은 고정폭 글꼴이다. 반면 예를 든 sm신신명조체는 이러한 단점을 극복한 가변폭 글꼴이다.

두번째 한계점은 위의 문제와 연관되는 자간 문제이다. 대부분의 서체가 고정폭으로 디자인 되다 보니 글자와 글자 사이에 많은 공간이 남아도 기본적으로 이 공간은 활용되지 않는다. 다음의 그림을 보시라.

이 그림의 붉은 원에서 볼 수 있듯 위의 바탕체는 “람”과 “들” 사이의 남는 공간 때문에 시각적인 짜임새가 떨어지지만 아래의 sm신신명조는 “들”이 “람”에 바짝 붙어서 남는 공간이 줄어들기 때문에 출력물이 세련되어 보이고 시선의 흐름도 좀 더 원활해진다.

물론 방금 지적된 자간 문제 및 고정폭의 한계점은 사용자가 수동으로 자간을 줄여줌으로써 어느정도 해소 할 수 있다. 다음은 원래의 바탕체 텍스트(위)와 자간을 줄인 바탕체 텍스트(가운데) 그리고 sm신신명조 텍스트(아래)를 비교한 것이다.

보면 알겠지만 가운데 마이너스 자간을 준 바탕체 텍스트가 위의 원래 텍스트보다 시각적으로 훨씬 세련되어 보인다: 이제는 sm신신명조 텍스트와 흡사해 보일 지경이다. (다들 눈으로만 보지 말고 실제로도 활용해보라! 예를들어 MS Word에서 바탕체로 문서를 만들고 적절하게 자간만 좁혀도 훨씬 세련된 출력물을 얻을 수 있다.) 하지만 이렇게 해도 각각의 글자마다 붙을곳은 붙고 떨어질 곳은 떨어지게 세심하게 디자인된 가변폭 글꼴보다는 완성도가 떨어지는 것은 사실이다. 물론 디자이너가 무진장 시간이 많다면 개별 글자들을 뚫어져라 쳐다보면서 각각 서로 다른 마이너스 자간을 줄 수도 있지만 (신문사에서는 가끔 이런짓도 한다) 우리같이 먹고살기에 바쁜 일반 평민들이 할 짓은 못된다.

앞서말한 고정폭 문제와 이에 따른 부수적인 문제인 자간 문제는 어느정도 사용자가 수동으로 해결 가능하다고 치자. 하지만 아직도 다음과 같은 중요한 문제들이 남아있다:

• 변종 서체의 부재: 일반적으로 쉽게 구할 수 있는 한글 서체에는 bold, italic, italic bold 등이 포함되어 있지 않은 경우가 많다! 실제로 윈도우 기본 바탕, 굴림, 궁서체에는 regular만 포함되어 있는것으로 알고 있다 (bold나 italic은 software적으로 구현하는 것임). Semibold 이런거는 바라지도 않는다. 제발 regular 말고 이러한 기본적인 변종 서체도 좀 넣어 주면 좋겠다. Regular 서체에 gaussian blur를 적용한다고 bold가 되지 않고 regular 서체를 15도로 기울인다고 italic 서체가 되지 않는단 말이다.
• 포함되어 있는 로마자의 품질 문제: 일반적으로 한글 서체에 포함되어 있는 로마자는 그 품질이 (Times New Roman이나 Palatino 등과 비교하였을 때) 저열하다. 물론 한글 서체 따로 영문 서체 따로 쓰는 방법이 있긴 하지만 항상 잘 어울리는 짝을 찾을 수 있는것은 아니다.
• 한글 자형학의 부재: 위의 모든 문제점은 바로 한글 자형학의 부재에서 비롯되었다고 볼 수 있다고 한다. 이는 내가 왈가왈부할 문제는 아닌 듯 싶고, 송현님께서 이에 대한 문제를 잘 정리해 놓으신 것 같다.

서체 개발에는 고도의 미적감각과 전문 지식이 필요한 관계로 많은 노력과 자금이 투입되는 것이 사실이다. 그리고 이러한 이유로 인해 기존의 Open Source 개발 방식과 같이 수많은 개발자들이 개떼처럼 달라붙어서 해결 볼 수도 없는 분야이다. 하지만 서체는 문서의 얼굴과도 같은 것이다. 기본적인 필수요소를 모두 갖춘 서체를 찾아보기 힘든 지금의 상황은 한글 문서의 수준을 격하시키는 결과를 가져올 것이다.

개인적으로 이 부분에는 정부나 대기업이 손을 대도 괜찮을 것 같은데.. 어쨌든 어찌보면 척박한 현 상황에서 공개글꼴(이라고 하기는 어렵지만 편의상 공개글꼴이라고 하자)을 배포한 다음 단체들은 높이 평가할만 하다.

• 한겨레 신문사: 한겨레 결체. 신문사 최초로 공개하는 한글 서체. 역시 한겨례 답다.
• 아모레퍼시픽: 아리따체. 장식제목체로 쓰면 괜찮을 듯 하다. 이번에 사이트 개편하면서 post 타이틀 서체로 이걸 가져다 쓸까.. 했다가 말았다. 상당히 미려하다. 나름 이쪽 업계의 대가들이 디자인 했다고 함.
• 조선일보: 조선일보체. 한겨레에 이어 조선일보도 자사의 신문명조체를 공개했다. 환영할 만한 일이기는 한데.. 약간 떨떠름한게 미운아이가 하면 뭐든지 미워보여서 그런걸까.
• 이 밖에도 네이버에서 내년 상반기까지 공개 한글 서체 6종을 무료로 배포한다고 한다. 매우 기대된다.

위에서 언급한 단체 말고도 다른 곳에서도 (특히 정부에서도) 좀 신경을 써줘서 영문 서체 만큼이나 다양한 고품위 한글 서체를 일반 사용자들이 쉽게 사용할 수 있었으면 한다.

.

이번에 사이트를 개편하면서 image title 시스템을 도입했는데 (자세히 보면 각 포스팅의 제목은 글자가 아니라 그림으로 되어 있음) 이 때 사용할 서체를 가지고 고민하다가 통탄하면서 쓴 글이다. 더 많은 자료는 KLDPWiki 공개한글글꼴 항목에서 찾아볼 수 있다. 본문에서 사용된 예문은 이 글과 이 글에서 찾아볼 수 있다.

제목은 거창한데 전혀 그렇지 않음;

요새 ska도 죽고 해서 블로그를 다시 활성화시키고 있는데..
아예 이참에 홈페이지를 새로 꾸며볼까 생각중이다.

지금은 그냥 홈페이지 = 블로그인데,
아예 개인 사이트를 꾸며서 CV도 올리고 개인연구주제도 소개해 볼까 한다.
물론 blog도 하위 메뉴로 들어가겠고.

레이아웃은 아래와 같이 WordPress 홈페이지를 참조할 예정

가장 중요한 것은
사이트 구성 관리를 wiki로 해 볼까 한다는 점이다.
(wiki가 뭔지 잘 모르는 사람은 위키백과를 떠올리면 이해가 쉬울 듯)

그야말로 나 자신을 위한 위키백과사전 사이트를 꾸며볼까 한다.
지금부터 만들어 놓으면 여러모로 좋을 듯 싶네.

사실 이게 블로그의 텔넷화보다는 훨씬 수월한 사업 같기도 하다. =_=;

.

아참. 그리고 혹시 지금 현재 이 블로그 레이아웃이 깨지는 사람 있삼?
원래는 아래와 같이 나와줘야 하는데..

일부 경우는 제목 글자가 무식하게 크게 표시되는 경우가 있더라고;

혹시 그런사람 있으면 코멘트 달아주면 감사~

1.
ska가 혼수상태에서 살아날 기미가 보이지 않게되자 심심해진 나는 지난번 숙원 사업이었던 “블로그의 비비화”에 이은 또 다른 숙원사업을 완료하게 되었다. -_-;;

이름하여 “사용자별 읽기 권한 부여”

내가 요새 블로그에 글을 자주 안 쓰는 이유가 아무나 내 글을 읽을까봐 여서 였는데 이번 개삽질(..)을 통해 이젠 적절하게 등록한 사용자만이 이 비공개 글들을 읽을 수 있게 되었삼. 즉, 이제는 아무나 비공개 글을 읽을 수 없다. (이 기회를 통해 이제부터는(!) 비비질보다는 블로그질을 더 많이 하게 될 것 같다는 ㅎㅎ)

자자 그러니깐 이 블로그의 모든 글을 읽고 싶은 사람은 신속하게 사용자 등록을 해 주기 바랍니다. ㅋㅋ

2.
사용자 등록 하는 법 (무진장 쉽다):

1. 맨 위쪽 메뉴에서 Register 클릭.
2. 필요한 정보를 다 입력하고 (e-mail 주소 꼭 제대로 입력!!) Register 버튼 클릭.
3. 초속 30만km의 속도로 새로운 사용자 정보가 아까 입력한 e-mail로 전송됨. 메일을 열어서 비밀번호를 확인하고 이걸로 로긴.
4. 로긴 한 후 맨 위쪽에 있는 My Account에서 새로운 비밀번호를 지정해 주기를 극권정함.
5. 로긴시 Remeber Me를 체크하면 매번 id/passwd를 넣는 수고를 덜 수 있음.

3.
물론 사용자 등록만 한다고 비공개글을 바로 볼 수 있는 것은 아니다. 각각의 비공개글마다 읽을 수 있는 사용자는 따로 지정되어 있으며 그 사용자 외에는 비공개글이 포스팅 되었는지조차 알 수 없다 (물론, 그 글에 달린 코멘트도 볼 수 없다).

4.
웹 로긴(HTTP_AUTH)을 지원하는 RSS Reader를 사용하는 분께서는 사용하는 RSS Reader에서 새로운 비공개글이 포스팅 될 때마다 요것들을 가져오도록 설정 할 수 있다. 물론 미리 사용자 등록을 마쳐야 한다. 자세한 내용은 이 글 참고.

1. 이 블로그의 (비공개글을 포함한) 전체 글 feed 주소는 http://hahong.org/blog/feed/?http_auth=yes 이다.
2. 만약 현재 사용하는 RSS Reader가 웹 로긴를 지원한다면 구독 주소를 저 주소로 변경한다. 로긴에 사용하는 id와 암호는 이 블로그에서 사용하는 사용자 계정 정보와 동일하다.
3. 만약 명시적으로 웹 로긴을 지원하지 않더라도 많은 경우 암묵적으로 웹 로긴을 이용할 수 있다. 만약 자신의 id가 bob이고 암호가 rice라면 구독주소를 다음과 같이이 설정한다: http://bob:rice@hahong.org/blog/feed/?http_auth=yes (즉, http://id:암호@hahong.org/blog/feed/?http_auth=yes와 같이 입력. 자세한 내용은 이 글 참고.)

하지만 HTTP_AUTH를 아예 지원하지 않는 몇몇 RSS Reader에서는 이러한 방법을 사용할 수 없으며, 따라서 새로운 비공개글이 포스팅 되어도 새 글이 떴다고 알려주지 않는다 (아, 물론 공개글은 아무런 상관이 없삼). 이 경우는 어쩔 수 없이 웹 브라우져로 본인의 블로그에 정기적으로 방문해 주셔야만 하겠다 -_-;

5.
위에 덧붙여 몇가지 팁

별명을 바꾸고 싶으면: My Account에서 nickname을 수정 후 Update Profile 버튼 클릭. 그 다음 Display name publicly as..에서 보여질 별명을 고른 후 다시 Update Profile 버튼 클릭.

만약 자신의 별명에 개인 홈페이지나 블로그 등이 링크로 나타나게 하고 싶으면: My Account에서 Website 항목을 적절히 입력 후 Update Profile 버튼 클릭.