웹표준과 폰트 크기 - 접근성

폰트 하면 떠오르는 단어가 바로 12px 혹은 9pt 입니다. 그만큼 당연시 여겨지는 폰트 크기이며 맑은고딕이 퍼지기 전 까지는 그 누구도 도전할수 없는 부동의 자리이죠. 기본폰트의 문제도 그러하겠지만 디자인이 무조건 먼저 오게되는 웹계에서는 감히 그 누구도 의문을 제기할수 없었으리라 생각됩니다. 이 불문율의 영역 한번 건드려 보겠습니다.

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의 효과 입니다