타포그래피 anti-aliasing. text-smoothing

Anti-aliasing. 혹 많이 들어보셨는지 모르겠네요. 제가 타이포그라피 전문도 아니고 약간의 지식만을 가지고 있는지라 그렇게 멋지고 학자스럽게 전달하지는 못하지만, 워낙에 국내 문서가 적고, 특히 거의 찾아볼수 없는 문구가 아닌가 해서 이야기 해보려고 합니다.

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 의 열약한 디자인 부분이 매꾸어 지고있는 시점에서 한발자국 크게 앞으로 나아가는 부분이 되지 않을까 합니다. 결국 최종적인 정착역은 실제적인 종이에 씌인 문서와 일치하는것 이니까요.