px과 em :)

많이들 들어보셨을만한 em 단위는 간단히 말해서 브라우저에서 담고 있는 기본폰트 사이즈 입니다. M 이 글자 한칸을 나타낸다해서 M을 기준으로 표현되는 단위이죠. 웹표준을 이야기 할 때에 이 em 단위가 자주 등장할만큼 그만이 가진 장점이 있습니다. 그것은 바로 유연성 인데요, 특히 인터넷익스플로러 IE 에서 불변하는 PX 단위가 em 의 장점을 더욱 부각 시키고 있습니다.

px 의 치명적인 단점은 IE 에서는 사용자가 바꾸려 해도 글자의 크기가 변하지 않는다는 것입니다. IE 메뉴에서 보기->글자크기 중 어떠한 크기를 선택하여도 px 단위로 정해진 글꼴크기는 메뉴이름이 무색하도록 불변합니다. 1px 에 모든걸 거는 디자이너에게는 즐거운 단위일지 몰라도 유저 입장에선 커다란 단점이 될수 있다는 것이죠. 물론 타 브라우저에선 가능하지만, 한국 웹서핑은 IE 가 주도하고 있다는것을 볼때에 거의 대부분의 사용자들이 폰트크기 조정을 포기하고 지낸다는 뜻이 되겠습니다.

이에반해 em 단위는 %와 같이 모든 브라우저에서 크기변화가 가능합니다. 유저가 원하는 만큼 변화가 가능하며 사이트 레이아웃까지 %로 제작이 되었다면 유연성이 대단히 높아지겠죠. ‘최대한 방문자가 원하는데로 사이트를 조절하게 해준다’ 라는 방침을 가지고 있다면 이 em 이 큰 매력으로 다가오리라 생각이 됩니다.

왜 em 사용을 꺼릴까?

잘 알려지지 않았다라는 무책임한 이유 말고 좀더 기술적인 측면에서 보겠습니다.

1. em 은 우리가 익숙한 12px 이나 9pt 와는 다르게 소수점을 동반합니다. 보통 브라우저의 기본폰트가 16px 이니 많이사용되는 12px 을 나타내려면 0.75em 이라고 표기하게 되는 것이죠. 물론 폰트크기는 12px 말고는 사용되는것이 거의 없으니 0.75em 이라는 것만 알고 있어도 되지만 em 을 기본단위로 선택하는데 있어서는 걸림돌이 될수 있습니다.
2. em 이 갖는 또 다른 하나의 거부감은 사용하기 까다로움에 있습니다. 바로 기본폰트에 상대적 이다보니 기본점이 어디냐에 따라서 크기가 변화합니다. 쿠키님께서 잘 지적해서 설명하셨는데 간단히 말하면 한 컨테이너 안에 종속되어 있는 부분들을 한꺼번에 불러 폰트크기를 정하게 되면 기준점이 그 컨테이너를 중심으로 바뀌게 되어버리는 것 입니다. 예를들어 <div id=”A”> 안에 <p id=”ABC”> 가 있다고 할 때에 스타일을 이렇게 주면

   #A, #ABC {font-size:0.75em;}

   #A 의 폰트크기는 12px 이지만, ABC 의 크기는 A 의 0.75 사이즈, 즉 9px 이 되어버리는 것입니다. 그러므로 폰트크기의 조절을 조심해서 해주어야 하는것이 또 다른 이유입니다.

3. 마지막으로 em 이 갖는 치명적인 약점은 (ie 때문이지만) 인터넷 익스플로러에서 글꼴크기를 한단계 줄였을때에 한단계가 아니라 거의 읽지 못하는 정도로 갑자기 줄어버리는 것입니다. 지금 일모리 블로그의 폰트를 한단계 줄여보세요(보기->글꼴크기->작게) 갑자기 사이트가 확 줄어버리는 것을 확인하실수 있습니다. px 이 인터넷익스플로러에서 사이즈 불변으로 치명적인 약점인것 처럼, em 또한 IE에선 사이즈를 줄였을때에 가독성이 거의 없을정도로 작아져 버린다는 약점이 있습니다. 이 약점은 javascript 로 보충이 가능한 부분이기도 합니다.

em의 사용법

em단위가 생소하여 사용을 안하시는 분들을 위해서 잠깐 em 의 사용법을 나누겠습니다. 말씀드렸듯이 em은 기본글꼴 크기에 맞추어져 있습니다. 보통 브라우저에서는 16px 이니

12px = 0.75em
16px = 1 em

이 되겠습니다. 쿠키님께서 표로 만들어 잘 설명해 주시고 계십니다.

해서 em 을 body 에 적용을 시킬때에

body { font: 0.75em/1.6em Gulim, sans-serif; }
/* 0.75em 폰트, 그리고 1.6em 의 글자 
위아래 간격 즉 line-height 을 표현했습니다 
font: 0.75em/160%;
이렇게 쓸수도 있습니다.
*/

이런 식으로 사용이 가능합니다. 머리속으로 계산하기 힘들다 라고 느끼시면 %로 생각하시기 바랍니다. %이지만 100단위가 아니고 1단위라고 보시면 되겠네요. 1.6em 은 160%, 0.8em 은 80% 로 말입니다.

과연 em 사용이 접근성에 최선의 방법인가

현재 이러한 폰트 사이즈 조절이 필요하다고 생각되는 여러 노인협회 홈페이지나 각종 복지 시설 웹사이트들이 px 단위로 제작이 되어 전혀 폰트 사이즈를 조절할수 없게 되어있으며 홈페이지 크기도 1024 해상도를 기준으로 제작되어 폰트크기를 가장크게 할수 있는 800px 의 해상도로 바꾸었을때엔 한번에 사이트를 볼수 없습니다. 이러한 사이트들이 가독성을 높이며 방문자들에게 접근성을 높이려면 화려한 이미지 보다는 네비게이션이나 여러 글들의 크기조절이 가능해야 합니다. 이러한 부분에 있어서 em 단위 사용은 확실히 클라이언트가 제작자에게 문의해볼수 있는 옵션이 될수 있습니다.

위의 사이트뿐만 아니라 컨텐츠를 나눔에 있어서 최고의 자리에 올라서고 있는 블로그의 경우에도 글을 읽고 나누는 부분이 많기때문에 가독성을 높임에 있어서 em 의 사용또한 좋은 선택이 될수 있습니다. 적어도 방문자에게 자유를 준다는것, 사용자가 중심이 된다는것 자체가 웹표준의 의미있는 일이겠죠.

BUT! 하지만 최선이라고 하기엔 문제들도 많으며 디자인이 중시되는 웹세계에서 글꼴의 변화로 인해 레이아웃이 깨질수 있는 부분이나 백터폰트가 아니기에 깔끔하지 못한 변화등은 무시할수 없는 부분일 겁니다. 이 뿐만 아니라 현재 베타로 나와있는 IE7 에서는 폰트크기가 아닌 화면 전체를 확대할수 있는 기능을 담고 있어서 IE 에서 문제가 되던 px 단위의 사용이 괜찮아 지게 됩니다. 오른쪽 밑의 돋보기 아이콘을 누르면 10%에서부터 1000% 까지 확대가 가능하며 오히려 사이트 자체가 확대되기 때문에 더욱 큰 효과를 불러올수 있는 좋은 기능입니다. 몇년안에 px 의 사용도 접근성에 있어서 문제가 되지 않겠죠. ^^;

최근 부모님께서 인터넷 쓰신다고 열씸이신데 px 로 이루어진 한국 사이트들, 글꼴크기 조절이 안되니 가끔 읽으시는데에 불편하신거 같아 안타깝습니다. em 이 최선의 방법일까요?

아마도 그럴지도 모릅니다. 지금은 말이죠.

Updated: 2007/2/8 추가 합니다.

0.01의 묘미

위에서도 0.75em은 보통 12px과 흡사하다고 했습니다만, 브라우저에서 1보다 작은 수를 인식 못하는 경우가 있습니다. 해서 그 차이를 매꾸고자 0.76을 쓰게 되면 바르게 인식이 되죠. 0.76em 바로 0.01의 효과 입니다 ^^

덧글과 타 의견들

nmind – Em Calculator라는 편리한 EM 계산 사이트도 있습니다

hooney – 개념적으로 1em=16px가 아닙니다. 1em=브라우저에서 정한 기본 글자 크기죠.

대부분의 브라우저가 기본 글자 크기를 16px로 설정되어 있지만, 사용자는 이 설정을 얼마든지 바꿀 수 있습니다.

그리고, 이 설정을 바꿔서 줌 브라우징과 같은 사용자가 웹사이트 디자인을 조정할 수 있도록 하는 것이 em과 같은 유동형 크기 단위의 장점이죠.

마지막으로 모니터 해상도의 단위가 px인 이상, px가 유동형 단위가 될리는 없다고 봅니다. ^^

일모리 – hooney// 네 맞습니다. 하지만 브라우저에선 보통 16px=1em 이라는 것이죠. 기준점은 어느정도 잡아야 하니까요. 이제 그 설정을 바꿀수 있는것이 바로 em 의 유연성의 핵심이라고 생각합니다. px 이 일단 상대적인 단위인데다 앞으로의 트랜드를 볼때에 유동형으로 쓰이지는 않아도 유동할수 있도록 가능해질겁니다. 이미 그렇게 되고 있는 상황이죠. 사용자들이 다양한 해상도를 쓰고 있기 때문에 해상도에 의존하는 브라우저에서의 px 단위를 유동형으로 가능케 하는것은 어쩌면 이미 예견된 일일수도 있겠다는 생각을 해봅니다.

Justin – em이라는 단위도 있습니다만, 어차피 상대적인 크기라면 그저 x-small/small/medium/large/x-large 등의 단위를 쓰는건 어떨른지요?

제가 지난번에 글 하나 올려놓은 적이 있는데, 이게 영문에서는 아무 문제가 없이 작동을 합니다만 한글폰트가 뒤섞이면 문제가 되더라구요. 그렇다면 em으로 사용하면 그문제가 해결이 되려나요? ^^

리피오 – 텍스트 크기를 고정하지 않았더니, 자기 브라우저의 텍스트 크기가 ‘크게’로 되어 있는 줄은 모르고 ‘이 사이트는 글자 크기가 너무 커’라고 불평하는 사람들이 있더라는 글을 봤습니다. 그냥 우스개 소리로 넘기기엔 생각해볼 꺼리가 많더군요.

그래도 이번에 사이트 하나 만들면서 레이아웃 폰트 모두 %로 정의해 봤는데, %로 정의되는 경우에는 종속성 때문에 조금 번거롭더군요.

ps. 한번 들러봐 주세요. ^^; http://www.virss.com

턱스 – em쓰다가 모두 다시 px로 바꿧다죠…
ie를 많이 쓰고, 거기다 폰트도 고정 사이즈로 모두 정해져 있는 우리나라 웹사이트 환경탓에 사용자는 자기 브라우저의 글꼴 크기가 어떻게 설정되어있는지 개념조차 상실되어있고, 그걸 바꾼다는것조차 생각 못하는 사람이 상상하는것보다 엄청나게 많습니다.
그러다 보니 첨 접속한 사이트의 글씨가 유별나게 크다던지, 못읽을 정도로 작다던지 하게 되면 크기의 유연성이 주는 이로움보단 불편함이 더 크게 다가올것입니다. (물론 이렇게 보인다면 첫 방문자는 바로 창을 닫기 마련이지만..)

글씨가 너무 작게 나와서 못읽는 것보단 일반 12px 사이즈가 작아 안보일경우 돋보기 사용한다면, 적어도 읽을수는 있으니까요..

지금 생각해도 em에서 px로 다시 돌아간건 최선의 선택이라고 봅니다. 아직까진 말이죠 ^^

나니 – 리피오님/ 종속성 문제는 em이나 %가 상대적 수치라는 점 때문에 발생하는 어쩔 수 없는.. (주절주절)

일모리 – 리피오님과 턱스님 말씀에 공감하고 있습니다. 상대적으로 변화하는 폰트에게는 적어도 사이트를 처음으로 접속시에 universal 적으로 시작되는 그 시작점이 있는것이 큰 부분을 차지한다는 말씀이시군요.

그냥 좀만 참고 IE7 퍼질때까지 기다리는게 역시 최선인가요 ㅡㅜ;;;

kukie – 상대적 단위 개념에서의 em을 굉장히 사랑하지만, 실제 작업에서는 100% 활용할 수 없는 것이 사실입니다.

작업을 하다보면.. pt, px, em이 서로 미세한 차이를 보이는데, 그 미세함이 큰 차이로 다가오는 경우가 꽤 생겨서..

개인적인 작업이 아닌 경우엔 HML 기본 설정을 9pt로 해두고, 다른 부분에서는 pt와 em을 섞어서 사용하고 있어요.

단위를 하나로 통일하는 것이 관리하기는 더 편하겠지만, 그렇지 않을 경우도 꽤 있고..

그리고, 기본 글꼴을 %나 em으로 해두면 어른들은 크게 불편해 하더라구요. 우연히 글자크기가 “크게”로 되어 있다면, ‘이 사이트는 왜이렇게 글자가 커’ 하고 웃고 넘어가지만, 또 우연히 “가장 작게”로 되어 있을 때는 이 사이트에 오류가 있다고 생각해 버립니다 ㅎㅎ.
브라우저 자체에 글자 크기를 바꾸는 기능이 있다는 것을 가르쳐 드리는 것도 여러가지 해결책 중에 하나가 될 수 있겠지만, 따로 교육 시키지 않고 뭔가 더 멋진 방법을 찾아 낼 수 있지 않을까 하는 희망;을 가지고 있답니당

손님 – 요새 블로그들 돌아다녀보면 웹표준, 접근성 이런 얘기들이 많은데, 제발 웹표준 이전에 어지러운 디자인 좀 정리하고 기본 글쓰 크기나 좀 늘려놨으면 좋겠다는 곳이 한두곳이 아닙니다. (일모리님한테 하는 얘기 절대 아님) validator.w3.org 검사 통과해서 로고 다는게 중요한게 아니라 정말 그곳을 방문하는 사람들이 편하게 볼 수 있어야죠.
제가 가장 글 읽을 때 편하고 집중이 되는 곳중에 하나를 예를 들어보면.. 많이들 아시는 블루문님의 블로그(http://www.i-guacu.com) 입니다. 거추장스런 이미지나 눈에 거슬리는 색도 없이 평범하면서, 글씨 크기가 크고 본문의 폭이 일반책과 비슷해서 한줄 읽고 다음줄로 내려가는 리듬이 읽기에 적당합니다. 물론 제 취향적인 부분일 수도 있겠지만 어쩌다 몇번 읽었던 가독성에 관한 연구 비스무리한 글들에 비춰봐도 그리 틀린 얘긴 아니라 생갑합니다.
보기엔 안 좋아도 환한 흰색보다 배경을 은은한 무채색 톤으로 해서 보는 사람 눈 덜 피로하게 해주고, 아기자기한 모양도 좋지만 1024해상도를 넘겨 쓰는 사람들이 수두룩한 지금엔 글씨 크기를 조금 크게 해주는게 기술적인 웹표준보다 쉽고 진정한 배려가 아닐까요.

계속 의견 부탁드립니다.

“이번에는 정말 폰트가 한개라도 들어있다면”

이라는 바람으로 MSN 에서 한숨을 푹푹 쉬었던 때가 있었는데, “비스타의 가장 매력적인 ‘기능’은 ‘폰트’일지도 모르겠다.” 라는 말이 나올정도로 맘에드는 한글폰트가 첨가되어 나온다는건 환영할만한 일이 아닐수 없겠죠. ‘맑은 고딕체’. 새롭게 출시될 마이크로소프트사의 비스타 OS 에 첨가되어 나올 폰트가 그나마 썰렁했던 웹2.0에 맞는 한글 폰트의 구세주로 사용될꺼 같습니다.

현재 SEO(Search Engine Optimization) 의 장점이나, 사이트의 구조적인 관리를 위한 문서와 스타일의 분리등의 트랜드로 폰트의 중요성이 더욱 부각되고 있는 만큼, 맑은고딕은 꽤나 중요한 시기에 들어오는 폰트라고 생각이 됩니다. 이미지로 대쳐가 되는 많은 ‘제목’ 들이 text-indent 의 도움을 받지 않아도 되는것은 큰 수학이겠죠. 글자대쳐 이미지가 감소하니 접근성이 향상되는건 당연하겠습니다. 물론 그 종류의 다양성이 아직 많이 부족(Serif 체라도 하나 더 더해진다면… 좋긴 하겠습니다만)하다는 아쉬움이 있지만 이게 어딥니까~

해외에서는 많은 좋은 예를 찾아볼수 있습니다. ajaxian, only a blog, Shaun Inman 등등, 오히려 확대될수록 아름답게 보이는건 정말 부러운 부분이었습니다. 누구는 <img> 로 도배하는데 누구는 <h2> 로 간단히 표현하다니 불공평하죠. 이제 저런 사이트 부럽지 않게 제작되어질 앞을 생각하니 즐겁습니다. likejazz님 말씀대로 정말 환영할 일입니다.

이런 즐거움을 조금이라도 누려본다고 일모리네 글제목들에 적용을 시켜봤습니다. 아직 전체글에 적용할만한 시기는 아니고 그래도 제목 정도는 폰트 크기도 크고 bold 가 적용되어 있는지라 써 놓을만 하다고 판단해서 넣어놨습니다. 맑은 고딕체가 있으시면 잘 보이시리라 생각됩니다. 혹 타 블로그 분들 혹은 웹사이트 제작자께서 사용하기 원하시면 맑은고딕의 사용설정을 이렇게 해주시면되겠네요. letter-spacing 을 잘 맞추어 주면 더 괜찮습니다.

body{
 font-family: 맑은 고딕, "Malgun Gothic"; 
 letter-spacing: -0.05em;
}

일단 malgun gothic, malgun 등은 먹히지 않기 때문에 ‘맑은 고딕’으로 사용하시면 되겠습니다. [ 흠... ]

이야기를 넘기자면 이번 비스타 위도우에는 시스템 기본폰트가 Segoe UI(발음: 씨고) 입니다. San-serif 의 ClearType 에 적합, 기본사이트 9pt 그리고 Aero 라는 테마를 통해 새로운 테마 글자도 첨가된다고 합니다. 그밖에 첨가되는 백터폰트들이 Meiryo for Japanese, Malgun Gothic(오예!), Microsoft JhengHei for Chinese (Traditional), Microsoft YaHei for Chinese (Simplified), Majalla UI for Arabic, Gisha for Hebrew, and Leelawadee for Thai 입니다. 그밖에 폰트리스트들도 확인해 보시길.

참고가 될수도 있고 아닐수도 있긴 하기도 하는 것인데, 맑은고딕은 파란 Paran 어딘가에서 다운로드 받을수 있다고 하는 소문이 어디선가 돈다고 하는것을 제가 확인해보려다 못하고 계속듣기만 해서 돌고 있다는것만 짐작과 함께 말씀을 드릴까 말까 하다 어떻게 하다보니 적게되는거 같기도 하고 잘 모르겠습니다.

덧:
“Finally, Segoe UI is just one part of the extended Segoe family of typefaces. This family also includes contextual cursive handwriting fonts (Segoe Script), a hand drawn non-cursive font (Segoe Print), special fonts for TV use (Segoe TV), a symbol font for hardware decals (Segoe HW) and a fourteen member set used for branding and corporate communications.

“One final note: The original Segoe fonts were not created for or by Microsoft. It was an existing Monotype design which we licensed and extensively extended and customized to meet the requirements of different processes, apps and devices.” – Vistablog

Serif 와 Sans-serif 의 차이점은 간단합니다.
끝부분의 차이점인데, 끝부분이 얇게 튀어나온다거나 장식이 조금더 붙어있으면 serif 이고 그것에 모양부분이 없는 깨끗한 것을 Sans-Serif 라고 합니다. Sans-Serif 중 sans가 불어로 without 이니 ‘serif가 없이’ 라는뜻으로 sans-serif 가 되겠네요.

모든 폰트는 이렇게 나누어 집니다.
한국어도 그렇습니다.

첫번째는 Sans-serif 입니다.
두번째는 Serif 입니다.
세번째도 Serif 입니다.

저번 포스팅에서도 문제를 제기했었지만,

“”글자, 문서전달이냐 아니면 그래픽적인 요소의 전달이냐”

를 언제나 염두해 두어야 하는데, Serif 와 Sans-serif, 어느것이 이것의 만족에 가장 가까울까요?

이러한 저러한 의견들이 많습니다만, 여러의견들을 종합해 볼때에 Sans-Serif 가 가장 많이 채운다고 할수 있겠습니다. 물론 미묘한 차이입니다만, 디자이너들에겐, ’1px 의 차이’ 인것처럼 그 미묘함이 여러가지를 말해줍니다.

Michael Bernard 과 Melissa Mills 이 한 실험 결과에서 많은 실험대상자들이 12px 의 Arial 을 12px 의 Times New Roman 보다 더 읽기에 편한것을 말해주었습니다. 얼마나 한국어에 적용이되는지는 실험을 해보지 않아서 모르지만 영어보다는 더 큰 차이가 있지 않을까 하는 생각입니다. 눈에서 무언가를 받아들일때에 일정한 크기의 조금은 단순해 보이는 Sans-Serif 글체가 문자가 그대로 뇌로 인식이 되는것이, 약간은 모양이 들어감으로 뇌에 단순히 글자보다는 모양또한 들어올수 있는 Serif 문자보다는 훨씬 빠르고 효율성이 있지 않을까라는 추측입니다.

한번 모의로 해보겠습니다.
다음글을 최대한 빨리 머릿속으로 읽어보세요.
어떤것이 더 정확하게 글자 하나하나가 최단시간에 들어오시나요?

• 첫번째는 serif 인 궁서체에 anti-aliasing 이 적용되지 않은것입니다.
• 두번째는 sans-serif 인 굴림체에 anti-aliasing을 적용하지 않았습니다.
• 세번째는 궁서체에 anti-aliasing 이 적용되었습니다.
• 네번째는 굴림체에 anti-aliasing 이 적용되었습니다.

물론 글자사이사이의 간격또한 커다란 역할을 하지만, 그걸 일단 버려두고 볼때에 저에게는 3번째 궁서체가 가장 눈에들어오고 실제로 빠르게 읽기에는 sans-serif 인 2번째 가 더 낫습니다. 물론 제 개인의 생각이라 잘 모르겠네요.

아무튼 이렇게 sans-serif 와 serif는 미묘한 차이에도 그 문서상의 디자인뿐만 아니라 유저가 글을 읽는데에도 영향을 끼친다는 사실을 일단은 아시면 되겠습니다. 물론 한글을 선택할 시에는 보통 굴림이냐 궁서냐 돋움이냐 인데, 많은 분들께서 거의 선택하시는 글체는 아시다시피 굴림이고 그 사용도는 인터넷 문서상에서 이루 말할수 없이 많이 쓰입니다. 하지만 혹시나 나중에 영어의 선택을 고려하신다면, 혹은 타이포그래피를 쓰실만한 포스터라면 그 이용도에 대해 잠시는 생각해 볼수 있는 계기가 된다면 좋겠네요.

물론 CSS3 의 기능으로 정말 font-smooth 를 정할수 있다면, 딱딱하고 멋없게만 보이는 궁서체나 돋움체가 너무나도 단순해 보이는 굴림보다 많이 쓰일수도 있겠다는 생각을 해봅니다.

ps. 제 WP 홈에는 좋다는 Sans-serif 폰트가 아닌 Serif 폰트인 Georgia를 사용하고 있지만, 특별히 verdana나 georgia 는 화면에서 읽기 쉬울수 있도록 제작 되었다고 하니 막무가네로 밀고 나가고 있습니다. 잘 읽히네요 :) 이제 이곳 한글WP는 굴림을 쓰고 있습니다. 그리고 코딩 부분에는 어느곳에서나 쓰이는 courier 를 쓰고 있습니다.

Typography 타이포그라피 혹은 타이포그래피의 자세한 지식들은 산돌에서 잘 설명해주고 있으니 참조하시기 바라구요. 제가 줄여서 말씀드리자면 글자로 디자이너가 전하고자 하는 그것. 문서전달, 이미지전달, 심리적인 전달 등등 하는것을 일컽습니다., 쉬운예로 글중에 중요한 부분을 보여주고자 해서 Bold, 굵게 특정단어나 문장을 해 주는것 또한 간단한 타이포그라피겠습니다. 유저가 볼때에 굵게 글자가 되어 있기때문에 중요한것으로 인식을 하게 되는거죠.

여기서 디자이너, 혹은 간단히 홈피 디자인이나 광고 디자인을 하시는분들께서 약간 고려해야 하는 부분이 있습니다. 아마 오늘 이야기하는것과 관련이 있겠는데요. 바로

“글자, 문서전달이냐 아니면 그래픽적인 요소의 전달이냐”

인데요, 요즘은 약간 문서나 문구 전달 보다는 그래픽적인 아름다움을 중요시 여기는 부분이 없잖아 있더군요. 약간은 안타까운 부분들이긴 한데, 아무튼 넘어가서, 이 두 가지를 잘 조합해서 보여줄수 있다면 정말 멋지게 타이포그래피의 완성이 아닐까십습니다.

이 부분에서 나오는 것이 바로 이 anti-aliasing 안티알리아싱 혹은 text-smoothing 부분입니다.
anti-aliasing 이란 소프트웨어 테크닉으로 화면에서 딱딱하게 보이는것을 자연스럽게 바꾸어 주는것을 말합니다. 화면색을 8bit으로 바꾸면 곧바로 antialiasing 이 깨어지는걸 볼수 있습니다. 높은 화면색수가 필요한 테크닉이죠. 인터넷 디자인에 절대 적인 부분으로 자리잡았습니다.

text-smoothing 으로도 잘 알려져 있는 이 anti-aliasing은 맥에서 기본으로 제공하는 기능으로 맥을 쓰시는분이면 잘 아실겁니다. 글자가 pixel 글자가 아닌 그림자가 혹은 테두리가 있는듯한 영향을 주어서 더욱 화면에 자연스럽게 표현되어 버리는거죠. 포토샵을 쓰실때에 글자에 그림자를 주어 약간 글자들이 화면에 붙어있는듯한 기분이 나게 해 보신분은 대충 어떤 느낌인지 아실겁니다.

글자가 화면에 한 부분처럼 녹아있기때문에 그래픽상 너무나도 이득적인 요소를 제공하게 됩니다. 유저에게나 디자이너에게나 매력적인 부분이죠. 저에겐 Mac의 커다란 지름양의 유혹부분이기도 합니다.

물론.
단점인 부분도 있습니다. 상당히 놀라웠던 부분인데요. 오랫동안 글을 읽거나 특히 프로그래밍으로 오랫동안 글씨들과 씨름하다보면 text-smoothing이 눈에 상당한 피로를 주는걸 알수 있습니다. 이것이 바로 위에서 언급한 디자인전달은 되지만 문서적인 전달에 약한 부분이 될수 있겠습니다. 오히려 반대라는 분들도 있습니다만, 장시간 쓰는것이 그러한 요소를 더하는걸수도 있겠네요. 여기저기서 text-smoothing 기능을 끄는법을 알려달라고 포스팅이 올라오기도 합니다. 또한, Daring Fireball의 Anti-Anti-Aliasing 글을 보면 특히 pixel font들, 한국에서는 웹폰트라고도 하고 monospaced font 9, 8, 7 픽슬 크기의 폰트들이 anti-aliasing 이 저절로 되면서 그 픽셀폰트만의 기능을 하지 못하는경우가 생기게 됩니다. 마지막으로 맥에서의 사파리와 카미노에서의 비교를 예로 들었습니다만, outline 폰트들과 bitmap폰트의 차이점또한 알아야 하고 여러 복잡한 부분으로 들어가게 되니 간단히 설명하자면, 폰트의 크기에 따라, 그리고 브라우저가 둘중 어떠한 폰트를 어떤 상황에서 고르느냐에 따라서 글자의 모양, 성질이 틀려진다는 예 였습니다.

DARINGFIREBALL에서 분석한 그림들 입니다.
위는 카미노 그리고 밑은 사파리 입니다. 둘의 렌더링이 틀립니다.

사파리 엔지니어 Dave Hyatt 은 그러한 부분을 CSS3 에서 설정할수 있도록 정하는 부분을 제안했습니다.

body {
font-smooth: never;
}

혹은 특정 폰트사이즈 이상에게만 anti-aliasing 이 적용된다던지 하는 부분입니다. 꽤나 멋진 제안이네요. 이거 너무 CSS3의 기대가 커지는거 아닌지 모르겠습니다. 다음주에 나오는 스타워즈3보다 더 커지고 있네요 :)

pre, tt {
font-smooth: 12px;
}

이렇게 text-smoothing 은 약간의 트집을 빼고는 웹안에 깁숙히 들어올만한 매력사항이 아닐까 합니다. 윈도우 XP가 OS도 그래픽을 넣어 바뀔수 있다 라는 인식을 심어준것처럼(물론 맥 os들이 있었지만) 문서또한 달라질수 있음을 잘 보여주는 요소가 될듯 하네요. 점점 HTML 의 열약한 디자인 부분이 매꾸어 지고있는 시점에서 한발자국 크게 앞으로 나아가는 부분이 되지 않을까 합니다. 결국 최종적인 정착역은 실제적인 종이에 씌인 문서와 일치하는것 이니까요.