NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


유니버설 디자인을 위한 웹 안전 서체.

본문 건너 뛰기

우리가 살고 있는 지구촌에는 다양한 웹 접근 환경이 존재합니다. 그리고 유니버설 디자인 철학은 모든 인류에게 이상적인 웹 사용 환경을 제공하는 것이 아니라 현실 속에 있는 장애를 조금씩 개선해 나아가는데 초점을 맞추고 있습니다. 그 일환으로 오늘은 웹 안전 서체라는 것을 소개하려고 합니다. 웹 안전 색상이라는 것은 익히 들어 봤지만 웹 안전 서체가 있다는 이야기는 생소하실 수 있습니다. 웹 안전 색상은 그래픽 출력기기의 성능이 낮았던 웹 초창기에 디자이너들의 유니버설 디자인 지침 가운데 하나였지만 최근에는 이런 환경도 상당히 개선이 되었기 때문에 이 지침을 강조하는 곳은 점점 줄어들고 있는 추세입니다. 오히려 이런 지침보다는 ‘시각에만 의존하여 정보를 전달하면 안된다‘는 지침이 더욱 실용적이라고 할 수 있겠습니다. 즉, 색을 사용하는 환경은 많이 개선되어 더 이상 안전 색상의 구속을 받을 필요가 없으나 색상만으로 의미를 파악할 수 있도록 하는 디자인을 하면 안된다는 것이겠지요. 자, 본론으로 돌아와서 웹 안전 서체에 대해 이야기를 해보겠습니다.

웹 안전 서체란 말 그대로 웹에서 사용하기에 안전한 서체 입니다. 그렇다면 지금까지 아무 기준 없이 서체를 사용해왔던 분들은 큰 실수를 저지른 것인가 하면 꼭 그렇게까지 생각하지 않으셔도 될 것 같습니다. 이 문제는 자국어 서체를 사용한 웹 사이트에 외국어 운영체제 사용자가 접근한 경우에 발생하는 문제이기 때문입니다. 즉, 내국인을 대상으로 서비스 하는 웹 사이트의 경우 대부분의 사용자가 내국인이고 한국어 운영체제를 사용하기 때문에 문제가 발생할 확률이 적을 것이라는 것입니다. 다소 심각한 문제가 될 수 있는 상황은 외국인을 향한 글로벌서비스에 한국어 서체를 사용한 경우 입니다.

아주 흔한 케이스로 영문이나 일문 또는 중문으로 구성된 콘텐츠에 ‘Dotum’ 따위의 서체를 적용하는 상황인데 이런 경우 문제 상황이 발생할 수 있습니다. ‘Dotum’ 서체는 모든 국가별 운영체제에 기본으로 탑재된 서체가 아니기 때문입니다. ‘Gulim, Batang’ 서체는 Win 2000, Win XP 버전의 모든 국가별 운영체제에 공통으로 탑재되어 있지만 ‘Dotum’ 서체는 Vista에 이르러서야 모든 국가별 운영체제에 탑재되기 시작했기 때문에 Vista를 사용하지 않는 해외의 자국어(영문, 일문, 중문…) 운영체제 사용자는 ‘Dotum’ 서체를 만나는 경우 다음과 같은 문제 상황에 직면할 수 있습니다. Windows 버전별로 어떤 서체가 모든 국가별 버전에 기본 탑재되어 있는지 확인하시려면 Microsoft의 Typography 웹 사이트에 있는 Fonts and products 페이지를 참고하시면 됩니다.

  1. 첫 번째 문제는 웹 페이지에 지정된 한국어 서체가 사용자 윈도우즈에 설치되어 있지 않은 경우 운영체제가 자동으로 한국어 서체 다운로드를 시도한다는 점 입니다. 이마저도 되는지는 잘 모르겠습니다.
  2. 두 번째 문제는 서체가 깨져서 출력된다는 점 입니다.

이런 두 가지 오류 상황은 제가 직접 경험한 것이 아니라 오픈소스 UI 개발을 경험하면서 간접적으로 알게된 사실들 입니다. 따라서 보다 정확한 사실이나 오류 상황에 대하여 알고 계신 분들이 있으시면 보충설명 해주시면 좋겠습니다.

결국 여러분들이 글로벌 환경을 고려해야만 하는 웹 사이트를 구축하고 계신다면 다음과 같이 다양한 운영체제에서 공통으로 지원하고 있는 안전한 시스템 서체를 사용할 것을 권장 합니다.

Browser Safe Fonts : All versions of Windows & Mac equivalents.
Generic Family Family Name Example
Windows Font Name Mac Font Name
Sans-serif Normal fonts without serifs Arial Arial Safe Fonts, 안전서체, 安全書体, 安全字体
Arial Black Arial Black Safe Fonts, 안전서체, 安全書体, 安全字体
Lucida Sans Unicode Lucida Grande Safe Fonts, 안전서체, 安全書体, 安全字体
Tahoma Geneva Safe Fonts, 안전서체, 安全書体, 安全字体
Trebuchet MS Helvetica Safe Fonts, 안전서체, 安全書体, 安全字体
Verdana Verdana Safe Fonts, 안전서체, 安全書体, 安全字体
MS Sans Serif Geneva Safe Fonts, 안전서체, 安全書体, 安全字体
Serif Normal fonts with serifs Georgia Georgia Safe Fonts, 안전서체, 安全書体, 安全字体
Palatino Linotype Book Antiqua Safe Fonts, 안전서체, 安全書体, 安全字体
Times New Roman Times Safe Fonts, 안전서체, 安全書体, 安全字体
MS Serif New York Safe Fonts, 안전서체, 安全書体, 安全字体
Monospace Fixed-width fonts Courier New Courier New Safe Fonts, 안전서체, 安全書体, 安全字体
Lucida Console Monaco Safe Fonts, 안전서체, 安全書体, 安全字体
Cursive Fonts that emulate handwriting Comic Sans MS Comic Sans MS Safe Fonts, 안전서체, 安全書体, 安全字体
Fantasy Decorative fonts, for titles, etc. Impact Impact Safe Fonts, 안전서체, 安全書体, 安全字体

참조 문서

분류: CSS,웹 기획,웹 디자인,웹 접근성 | 2009년 6월 5일, 0:47 | 정찬명 | 댓글: 22개 |
트랙백URI - http://naradesign.net/wp/2009/06/05/844/trackback/

22개의 댓글이 있습니다.

  1. 정찬명의 생각…

    유니버설 디자인을 위한 웹 안전 서체….

  2. 윤좌진 댓글:

    IE에서는 영문폰트를 먼저 선언하면 input type=text에서 한글적고 영문 적을때 위,아래로 커서가 흔들리는 문제가 있어요 그것만 아니면 참 좋은데 말이죠…

  3. 정찬명 댓글:

    그정도 버그는 저희 동네에서 애교로 봐주죠. ㅎㅎ.

  4. 엔하늘의 생각…

    유니버셜 디자인을 위한 웹 안전 서체…

  5. Na! 댓글:

    본문에 만들어주신 표가 한국의 웹 디자이너들에게 [TEXT는 TEXT로]의 어려움을 보여주는 사례라고 생각됩니다. 사용할수 있는 Font의 제약(Serif계열의 영문폰트와 한글 폰트의 종류를 봐도.. )과 웹페이지가 사용자 환경에 무관하게 동일한 뷰를 원하는 발주측..
    (서버측폰트를 원활히 사용할 수있을 때 까지는 국내환경에서 [Text To Text.. Ash To Ash Dust to Dust..].는 먼이야기인 듯 합니다… )

    문자의 이미지 대치를 완전 배제하고
    Windows와 비교적 많이 설치되는 한글 또는MS Office에 지원되는 한글폰트로 멋진 타포그라피를 가진 TEXT 위주 디자인을 가진 웹페이지 디자인 대회라도 해보면..
    TEXT기반 디자인에 대한 인식을 높일수 있지 않을까 하는 혼자만의 생각을 해봅니다.
    (CDK에 건의를.. )

  6. chatii 댓글:

    잘 읽었습니다
    영문은 그럭저럭 쓸만한 폰트가 많은데, 한글은 결국 굴림 뿐인가요 orz

  7. 우엉의 생각…

    NARADESIGN:BLOG 유니버설 디자인을 위한 웹 안전 서체 CSS 만들때 주의해야겠다……

  8. 일모리 댓글:

    폰트… html5 에서 과연 웹링크로 해결이 되는것인지…
    아무튼 폰트는 국내웹디자이너에게 참 장애를 많이 안겨주죠.

  9. 정찬명 댓글:

    @Na!
    텍스트 기반의 멋진 디자인을 위하여 건배를!

  10. 정찬명 댓글:

    @chatii
    제목과 같이 조금 큰 글씨에는 바탕도 나름 괜찮던데요. ^^;

  11. 정찬명 댓글:

    @일모리
    네, 특히 글로벌 환경 때문에 한글 서체를 지정하지 않아야 하는 상황에서 굴림으로 표시되는 11px 짜리 서체는 정말 곱게 봐주기 어려운것 같습니다. 제가 괜히 디자이너분들께 미안해 지는 그런 상황입니다.

  12. 이슬빛 댓글:

    정말 우리 회사 디자이너들에게 꼭 보여..아니
    앞에서 읽어서라도 보여주고푼 내용이군요.

    많이 배워갑니다..^ㅡ^*

  13. 이슬빛 댓글:

    아 그리고 Tahoma는 익스에서 12px아래로는 랜더링을 하지 못하더군요.
    한글일 경우에요.

  14. 정찬명 댓글:

    이슬빛님 안녕하세요? Tahoma는 한글 글꼴이 없습니다. 그래서 한글은 Tahoma를 만나면 시스템 기본 글꼴인 ‘굴림’으로 표현 됩니다. 굴림 글꼴이 11px 이하를 렌더링을 해 주기는 하는데 예쁘게 못해주는 것이겠지요. ^^

  15. 타나토스 댓글:

    위의 예는
    결국…. 한글 폰트는 “굴림” 하나만 표시한다는 것인가요??

  16. 정찬명 댓글:

    운영체제에 따라서 다르고 Win 2000, Win XP 이전에 나온 Win 98의 해외판에서는 ‘굴림’만 표시했을 것으로 추측 됩니다.

  17. 황원준 댓글:

    결국 네이버의 승 -_ ? 하우… 이미지 / 플래시가 남발하는 현상을 어찌 막아야할까나~용 ㅠㅜ

  18. 정찬명 댓글:

    @황원준
    이미지/플래시라는 기술 자체가 나쁜것은 아닐껍니다. 접근성있고 유니버설하게 사용하면 되는데 좋은 기술임에도 불구하고 잘 못 써서 항상 문제가 되지요. ^^

  19. 익명 댓글:

    그냥 사이트에서 사용하는 폰트를 해당 사이트에서 제공해 주면 되는거 아닌지…

  20. 정찬명 댓글:

    @익명
    그런 방법을 웹 폰트라고 하는데요. 글꼴이 무겁기 때문에 웹 페이지 로딩 성능을 떨어뜨리게 되어 일반적으로 널리 쓰이는 방법은 아닙니다.

  21. 익명 댓글:

    리눅스에서 돋움이 없는 상황에 직면하여 검색하다 찾아오게 되었습니다.
    글꼴이 없다보니 윈도우 환경과 리눅스 환경이 다르게 보여지는데 이런 경우에는 어떻게 해야 하는지 답을 좀 주실 수 없을까요 ㅠㅠ

  22. 정찬명 댓글:

    @익명
    여러가지 대응 방법이 있겠는데요. 일단 어떻게 보이기를 원하시는지요?

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님