한곽 인쓰 보드 갔다가 갑자기 픨 받아서 본 다큐멘터리 영화. 제목이 암시하듯 지구 온난화와 관련된 인정하기 거북스러운 (혹은 인정하고 싶지 않은) 진실을 다루고 있다.

연사로 등장하는 앨 고어 아저씨는 다음과 같은 지구 온난화와 관련된 몇 가지 과학적 근거 자료를 제시하고 있는데 이것만으로도 상당히 충격적이다:

1. 지난 65만 년간 대기중 이산화탄소 농도는 항상 300ppm 이하의 수준을 유지하고 있었다. 그러나 산업혁명 이후 대기중 이산화 탄소 농도는 꾸준히 증가하고 있으며 현재는 무려 383ppm을 가르키고 있다. (참고로 대기중 이산화탄소 농도가 높을수록 지구의 평균 기온은 상승한다.)
2. 북반구와 남반구를 포함하여 범 세계적으로 빙하가 녹고 있으며 심지어 시베리아 지역의 영구동토가 녹아내려 지형이 변화하고 건물이 붕괴하는 일도 발생했다.
3. 지난 14년간 역사상 가장 더웠던 열 개의 해가 있었다!

▲ 지난 65만년부터 지금까지 대기중 이산화탄소 농도를 보여주는 그래프. 산업혁명 이전에는 결코 300ppm을 넘지 않았으나 오른쪽 위의 노란 점이 나타내듯 지금은 무려 383ppm을 가르키고 있다.

▲ 지난 14년간 무려 10개의 신기록 달성! (영화가 제작된 시점이 2005년 경이라서 그 이후 사정은 모르겠음)

아는 사람은 알겠지만, 사실 현재의 지구 온난화 수준은 매우 위험한 상태라고 볼 수 있다. 왜냐하면 비록 지금 현재로써는 그렇게 큰 온난화의 징후가 발견되고 있지는 않지만 자칫 지금의 수준을 넘어서면 급격하게 지구 온난화가 진행되어 (즉, 점점 더 빠르게 온난화가 진행되어) 향후 수십년 이내에 해마다 그 이전에는 경험하지 못했던 태풍, 폭우, 가뭄, 전염병 창궐과 같은 자연 재해를 맞이하고 순식간에 해수면이 높아져 전 세계의 주요 도시가 손 쓸 사이도 없이 바다 밑에 잠겨버릴 가능성이 있기 때문이다. 그 이유는 다음과 같다: (more…)

시민논객 박영호군의 조언을 수용하여.. (본문 내용 없이 제목만 나열된) 카테고리별 글 목록 보기 기능을 추가했습니다.

• 오른쪽 side menu의 Resources에서 Archives 옆에 있는 (by category)를 클릭하면 바로 카테고리별로 정렬된 글 목록이 주루룩..
• 또는 Categories에서 (list view)를 클릭해도 그에 해당하는 목록을 바로 볼 수 있답니다.
• 물론 각 포스팅 맨 마지막에 글 정보를 보여주는 foot note에서 (By RedRiver under 어쩌고 저쩌고 다음에 있는) 카테고리를 클릭해도 됩니다. 이 경우는 방금 읽었던 글에 바로 포커스가 맞춰지니 해당 카테고리의 다른 글을 읽을 때 편리하겠죠?

아참, 하는 김에.. 기존 side menu에 있던 Account 그룹을 없앴습니다. 대신 화면 가장 위쪽에 있는 top menu에 해당되는 링크들이 있으니 이용에 착오 없으시길. (갠적으론 이렇게 하는게 더 직관적인거 같은데 혹시 다른 의견 있으면 리플 달아주셈)

아, 그리고 각 페이지 맨 밑에 화면 꼭대기로 가는 귀여운(..) 링크를 하나씩 달아놨으니 애용 바람.

이제 wiki만 붙이면 될텐데.. (맨 위쪽 메뉴와 본문을 가르는 회색 띠 안에 Blog, Research, Thoughts 이렇게 세 개의 메뉴를 넣을 예정. 이 중 Research와 Thoughts는 wiki로 관리.) wiki에서 blog 계정을 그대로 가져다 쓸 수 있게끔 하는 캐삽질작업을 마치니 급 귀차니즘이 도져서 냅두고 있다는.. –_–; 이제 스킨만 적용하면 끝인데 말입니다..;;

어쨌든 바쁘더라도 글은 가끔씩 포스팅 하도록 하지요. 그럼 모두들 굿나잇.

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

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 공개한글글꼴 항목에서 찾아볼 수 있다. 본문에서 사용된 예문은 이 글과 이 글에서 찾아볼 수 있다.