BLOG main image
분류 전체보기 (60)
qooop 이야기 (5)
웹일반 (19)
웹기술 (7)
미디어/언론/마케팅/PR (10)
트렌드 (1)
경제/전략 (11)
통계분석 (0)
디자인/UX (7)
최근 1년간 포털/검색 사이트의..
17:14 - louis vuitton bags
당신의 숲으로
07/26 - discount pandora beads
당신의 숲으로
07/26 - louis vuitton geldboerse
이명박 대통령 및 청와대 입장에..
07/23 - charm club
우선 지난 주 국회시정연설에서..
07/23 - kauf ed hardy
한대면 방송사 이동중계차량이..
07/23 - kauf ed hardy
조이스틱으로 두 대의 카메라를..
07/23 - christian audigier clothing
인터넷 상태가 별로 좋지 않아..
07/23 - christian audigier clothing
최 대 웹 컨퍼런스인 Le Web을..
07/23 - ed hardy perfume
인터넷 업계에는 참으로 많은 일..
07/23 - ed hardy perfume
험블의 생각
humbleprogrammer's me2DAY
그린데이의 생각
greendayslog's me2DAY
뉴욕 타임즈, 자존심을 깨고 1면..
미도리의 온라인 브랜딩
Goobye 2008, Good Morning 2009
세상을 보는 또 다른 시선
콘텐트 vs 플랫폼, 언론사닷컴의..
호모 미디어쿠스
Statistics Graph
88,262 Visitors up to today!
Today 0 hit, Yesterday 3 hit
rss
2008/08/24 15:47

by 에린

얼마전 N사에서 일하는 후배 디자이너가 무작정 저에게 묻더군요.

     - 웹에서 맑은고딕 서체 쓰고 있는거 어떻게 생각해요?
     - 좋아
     - 맑은고딕 으로 된거 좋은거 같아요?
       시스템폰트랑 느낌이 많이 다르고 사용하고있는 곳이 극히드물어서
       사용해야하나 말아야하나 고민이였거든요
     - 어디에?
     - 웹페이지에...
유니세프 웹페이지가 다 맑은 고딕이긴한데....

또 저와 같이 일하는 PD분도 저에게 이런 메일을 주신 적도 있어요.

      "다른 폰트 – 예컨대 맑은 고딕 같은 – 를 적용할 수는 없는지
       이탤릭과 같은 변화는 가능하지 않은지? 확인 부탁합니다.
       제가 일견 드는 생각은 앞으로 폰트가 좀더 이뻐지면 훨씬 더 좋아질 것 같네요"


제 주변에서는 서서히 기본 폰트에 관한 고민이 시작되고 있습니다.
저는 감히 이것을 맑은 고딕을 맛본 후의 현상이라고 생각해 봅니다.
여러분들은 맑은 고딕 쓰시나요?
저 개인적으로는 맑은 고딕을 맛본 후, 최상급 한우 맛을 본 사람처럼, 쉽사리 돋움이나 굴림 따위에
만족을 못하고 있습니다. 아니, 심하게는 이 그지같은 폰트들 때문에 그동안 당했던 일들을 생각하면
억울하다는 생각마져 들고 있습니다.

그동안 억울했던 일들

    • 기본 폰트만로 정보 디자인(grouping)이 어려워 이미지 폰트를 일부 사용했더니,
      이미지 폰트 때문에 속도가 느려진다는 개발자들의 원성.
    • 턱없이 많은 정보(그것도 거의 링크들)를 주면서 잘 구분가게 해달라는 기획자들의 바램
    • 불가능한 UI 디자인을 하며, 재능없다 보다며 좌절하여, 날이면 날마다 야근했던 시간들.
    • 이 어려운 디자인을 아무도 몰라주고, 화려한 프로모션 페이지 디자인들만 상을 타는 웹디자인 업계 풍토
    • UX를 몰라서 디자인 못하나.....UX에 대한 Argue속에 결국 마무리는 "예뿌게 해주세요..."


게다가 굴림과 돋움은 다른 이유는 다 봐준다고 하더라고 "굵기"와 "크기"의 조절은
거의 불가능한 수준이 였습니다. 네, 가능합니다. 하지만 불가능한 수준으로 후지다는 의견입니다.
우리들은 거의 12px 굴림과 11px 돋움 사이를 배회하면서, 정보 디자인의 가장 "기본"인 비주얼 하이어라키(hierachy)는 따위는 되도록 모르는 척하며 살아왔습니다.


맑은 고딕은 기쁨이고 작은 혁명의 시작입니다.
저는 개인적으로 맑은 고딕을 쓸 수 있어서 너무 행복합니다.
가히 맑은 고딕을 맛본 후와 맛보기 전으로 한국 웹 디자인의 역사를 나누는 날이 올 것이라는 확신도 해봅니다.
맑은 고딕은 굴림처럼 너무 공무원스럽지도 않고, 돋움처럼 지나치게 여성스럽지도 않으면서도
가독성도 높고, 폰트 크기를 크게 했을때 무리가 없으며, 특히나 clear type에 반응하니 훨씬 더 부드럽습니다.


영문폰트가 더 예쁘다?는 사대주의도 아니고 편견도 아닙니다.
아래의 예시를 보시죠. (아래 예시 중 영문은 Yahoo.com의 shine에서 가져왔습니다)

    1.  세리프가 있는 서체 이면서도 작은 크기로 사용할 수 있습니다.
        아래 한글은 바탕체로 해보았습니다.

    2.  세리프가 있는 서체 이면서도 큰 크기로 사용할 수 있습니다.
        보통 뉴스 등에서 헤드라인으로 많이 사용하는 폰트가 돋움이라,
        아래 한글은 돋움체로 해보았습니다.
        글사사이의 간격도 어색하지만, 영문과 비교해보았을 때 매끄럽지 못한 부분이 눈에 띕니다.
        ex) 트렌드의 "렌", 예외의 "외", 없다의 "없"

    3, 4. 글3번과 4번은 물론 2번~4번까지의 서체가 다르고 크기가 달라 정보의 하이어라키(hierachy)의 표현이
       자유롭고 자연스럽습니다.

사용자 삽입 이미지
   

잠시 맑은 고딕의 맛을 감상하시죠.
사용자 삽입 이미지

정보 디자인, 그중에서도 하이어라키(hierachy) 표현을 위한 폰트가 필요하다.
즉, 제가 궁극적으로 말씀드리고 싶은 의견은 서체의 "다양성"이 아니라 큰 글씨와 작은 글씨의
표현이 가능하여 정보 디자인의 기본을 지킬 수 있게 도와주는 기본 폰트 개발이 필요하다는 것입니다.


이 소재를 생각할 무렵  "Web Design is 95% Typography"란 제목의 흥미있는 포스트를 발견하게
되었는데, 제 의견과 일부 연결된 것도 있어 소개해봅니다.

위의 포스트의 요지는 "Treat text as a user interface" 입니다.

         웹 디자이너는 글과 문장에 대해서, 즉 Typography에 대해서 제대로 된 훈련이 필요하다.
         정보의 홍수 속에서 "정보를 분류해, 제대로 정리하고, 유저가 필요한 것을 찾아낼 수 있도록 도움을
         주는 것"이 인포메이션 디자이너의 역할이다. 또한 타이포 그래피는 가독성, 접근성, 사용성 usability
         그리고 그래픽 밸런스를 향상시키는 것이다.

        온라인으로의 Typography를 논할 때에 많이 하는 논의가 온라인용의 폰트가 적다는 것이다.
        그리고 두번째는 해상도의 이슈로 인해 anti-aliasing 된 폰트의 가독성이 떨어지는 것이다.
        하지만 폰트의 종류가 적다는 주장은 틀릴 수 있는 것이, 이탈리아 르네상스 시대에는 1종류의 폰트만으로
        아름다운 Typography 작품이 많다.

        또 인터넷에서의 문제는 사람들의 집중력을 쉽게 잃으므로, 텍스트의 가독성을 높이는 것이
        웹디자인의 일이다. 올바른 이끌기와, 단어, 활자 간격들, 여백 그리고 도움을 주는 컬러 선택 등이
        가독성을 향상시킨다. 뛰어난 웹 디자이너라면, 텍스트를 단순한 컨텐츠로서 만이 아니고,
        유저 인터페이스로서 취급해야 한다는 것을 알고 있다.

         텍스트를 인터페이스로서 사용한 심플한 웹 사이트로는 google, ebay, craigslist, youtube, flickr,
         Digg, reddit, delicious 등이 있다. 텍스트를 인터페이스로서 취하는 것이 지금 성공의 파라미터라고도
         할 수 있다. 성공적인 웹사이트는 심플한 인터페이스와 동시에 강력한 아이데티티를 갖는 것이다.


위 글에서 말한 것을 토대로 재미있는 가설을 설정해봅니다.

       정보 중심으로 구성된 한국의 포탈 사이트들이 폰트를 자유롭게 이용할 수 있었다면,
      위에서 말한 "강력한 아이덴티티"는 어떻게 변했을까요?


포탈의 아이덴티티는 거의 컬러에 의존되어 있습니다.

솔직히, 우리나라 포탈은 "컬러"로만 아이덴티티를 표현하고 있지, 폰트를 인터페이스로 인식해서
아이덴티티를 만든 포탈은 없습니다. 이것은 한국의 포탈 비즈니스가 상당히 유사하여 기본적인
아이덴티티가 달라기지기 힘든 요인도 있겠지만, 더 중요한 정보와 조금 덜 중요한 정보를 표현하기
힘든 부분도 큰 요인 중에 하나라고 생각되어 집니다.

한국 웹의 세계화를 위하여
만약, 이 글을 보시는 네이버 관계자나 마이크로 소프트 관계자 분들이 있다면,
한국 유저들과 수많은 웹디자이너들을 위해 순수한 투자차원에서 기본 폰트 개발을 하는 것이 부탁드려봅니다.
만약, Youtube나 facebook처럼 기본 폰트만으로도 정보 디자인을 하는데 무리가 없다면,
한국의 웹이 세계화 되는데 큰 도움을 줄 수 있을 것이라고 생각합니다.

Trackback Address :: http://qooop.kr/trackback/34 관련글 쓰기
Tracked from 철수네 소프트웨어 세상 3 | 2008/08/27 01:50 | DEL
쿱미디어 - 인터넷 지켜보기 - 맑은 고딕과 UX의 상관관계 맑은 고딕이 좋은 평가를 받고있는 점은 출시때의 분위기로도 대충 짐작할 수 있었습니다. 그동안 Windows에서 사용하던 4개의 기본 폰...
BlogIcon 나인테일 | 2008/08/24 16:30 | PERMALINK | EDIT/DEL | REPLY
근데 맑은고딕은 레귤러 폰트만 있고 볼드, 이텔릭 같은 폰트가 없고... 포인트 크기 별로 각각 다른 폰트를 지원해 주지도 않는 통에 좀 예쁘게 생기긴 했어도 인디자인 같은 출판용 소프트에선 아직 너무 먼 당신인 것 같더군요... (끝까지 윤고딕, 릭스고딕을 끌어안고 가야지요.. OTL...)
BlogIcon Nyangkun | 2008/08/24 16:44 | PERMALINK | EDIT/DEL
사족이지만 맑은 고딕 Bold 폰트는 있지요. :)
BlogIcon 명이 | 2008/08/24 18:08 | PERMALINK | EDIT/DEL | REPLY
쇼핑몰을 하던동안 사진을 편집하기 위해 폰트에 대한 너무 많은 고민을 하다가 결국 영문으로 눈물을 머금고 바꿔 썼던 경험이 있기에 완전 공감합니다.
맑은고딕. 감동입니다.! (여전히 입점형 쇼핑몰들은 돋움이나 굴림을 쓰라고 강요합니다.)
텍스트만으로도 충분히 인터페이스로 사용가능하고 그 자체가 주는 개성과 신선함을. 아직 알려면 멀었나봅니다.
BlogIcon 신현석 | 2008/08/24 18:16 | PERMALINK | EDIT/DEL | REPLY
비스타에 셰리프 계열은 추가없이 맑은 고딕만 추가 된게 너무 아쉽죠.
BlogIcon 신승식 | 2008/08/24 18:59 | PERMALINK | EDIT/DEL | REPLY
맑은 고딕, 한글은 예쁜데, 영문 폰트는 아직 아니었어요. 말씀하신대로 굵은 글꼴, 이탤릭 글꼴도 따로 있어야 되고...
BlogIcon PSB | 2008/08/24 20:09 | PERMALINK | EDIT/DEL | REPLY
애플의 브라우저 사파리의 기본 폰트도 맑은고딕 아니었나요? 얼른 보기에는 그렇게 보이네요. 사파리로 국내 주요 웹사이트를 보면 폰트 개편후 느낌을 미리 맛 볼 수 있겠군요.
BlogIcon 스카이호크 | 2008/08/24 23:39 | PERMALINK | EDIT/DEL
Mac OS의 기본 폰트는 '애플고딕'입니다. 거기다 '애플명조'도 있지요. 애플고딕은 그럭저럭 봐줄만한데, 애플명조는 보면 볼수록 참 우울합니다.
BlogIcon iendev | 2008/08/24 22:05 | PERMALINK | EDIT/DEL | REPLY
아무래도 보다 다양한 한글 폰트가 있어왔으면 하네요..
box | 2008/08/26 02:05 | PERMALINK | EDIT/DEL | REPLY
클리어타입 적용 설정이 안 된 컴에서 흉하게 보이는 문제와 해당 컴에 맑은 고딕 폰트가 없을 경우 스타일 시트에서 다음 지정한 굴림, 돋움 등의 폰트가 아닌 어그러진 모양으로 보이는 문제가 있습니다. MSN코리아가 첫화면을 맑은 고딕 default 로 했다가 며칠 못가 원상복구했던 일이 있었는데 복구 이유에 대해 공식적으로 알려진 바는 없지만 위와 같은 이유 때문이 아니었을까 짐작됩니다.

<MSN코리아 첫화면 변경. 특정 글꼴 사용은 처음>
http://news.empas.com/show.tsp/cp_ch/20071114n12751/
<MSN코리아> http://kr.msn.com/

<맑은 고딕이 뭐가 좋은거야? 맑은 고딕 vs. 돋움> http://emotion.tistory.com/33
<맑은 고딕 사용을 중단합니다> http://idealist.egloos.com/4527171
BlogIcon 개미탐험가 | 2008/08/25 00:13 | PERMALINK | EDIT/DEL | REPLY
예전에 포스터나 유인물 만들 때에 다양하고 적절한 폰트를 사용하다가 웹페이지를 만들다 보면 정말 답답해지더라구요. 범용으로 쓰이는 한글 글꼴은 윈도 기본 글꼴 4개 정도밖에 안되고, 그 이외를 쓰고 싶을 때에는 그림으로 붙여야 되더군요..

저도 예쁘고 다양한 한글 글꼴이 널리 보급되었으면 좋겠어요...
lovelyk2 | 2008/08/25 10:07 | PERMALINK | EDIT/DEL
포스터나 유인물은 출력해서 배포하면 그만이지만,
웹 페이지는 사용자마다 사용하는 브라우저가 다르거나, 설치 되어 있는 폰트가 다를 경우 보이는 형태가 동일하지 않을 수 있습니다.
선 게시(배포), 후 Display(출력)이랄까요.
모든 사용자가 동일한 브라우저, 동일한 폰트를 가지고 있지 않기 때문에, 웹 페이지 게시자가 시도할 수 있는 방향은 2가지 이겠지요.(폰트만 생각해 보겠습니다.)
1. 대다수의 사용자가 특정 폰트를 사용하게끔 한다.
2. 대다수의 사용자가 이미 가지고 있을 법한 기본 폰트만 사용한다.

전 물론 2번입니다. 이상적으로는 1번을 희망해야 하지만, 가능할 리 없습니다.
국내 사용자들은 대부분 IE를 쓰며, 원도에서는 IE와 함께 굴림, 돋움 등등을 기본 폰트로 사용하니, 제가 쓰는 폰트는 굳이 말씀드리지 않아도 되겠군요.
BlogIcon snowall | 2008/08/25 00:21 | PERMALINK | EDIT/DEL | REPLY
MS에서 한국 웹의 발전을 위해 투자할 것 같지는 않군요. 네이버에서는 네이버 사전체를 배포중인 걸로 알고 있습니다. 윈도의 고딕과 무슨 차이가 있는지는 모르겠지만요 -_-;
정부 차원에서 투자를 해야 한다는 의견도 있습니다. http://kldp.org/node/38741
BlogIcon 에린 | 2008/08/25 09:42 | PERMALINK | EDIT/DEL | REPLY
너무 좋은 답변들 감사합니다.!!!! 사실 웹에서 크기, 볼드, 이탤릭을 모두 만족시키는 글꼴, 그것도 2byte로 된 한글꼴을 만드는 것이 쉬운 일은 아니겠지요. 그러기에 더욱더 순수한 투자와 시간이 필요한 것 같습니다. 이번기회에 여러분들이 추천해주신 블로그들 보고 공부 좀 해봐야겠어요. ^^ 다시한번 감사드립니다.
BlogIcon docupia | 2008/08/25 12:02 | PERMALINK | EDIT/DEL | REPLY
저도 처음에 CSS를 배우던 10년전쯤에는.. 폰트만 가지고 미려한 타이포그라피를 구축할 수 있을 것으로 생각했습니다만.. 한글폰트의 한계가 있더라구요.. 예전 다음로고 같은 정도의 디자인은 폰트와 CSS로도 만들수 있는데 말이죠.. 웹에서 쓸 수 있는 다양한 한글폰트.. 정말 필요합니다.
BlogIcon 불멸의 사학도 | 2008/08/25 17:01 | PERMALINK | EDIT/DEL | REPLY
아무래도 한글 서체는 개발에 많은 비용이 들어가기 때문에 웹에서 마음놓고 쓸 수 있는 폰트가 별로 없는 것 같습니다. 오픈소스 서체도 조금 있긴 하지만, 조금씩 엉성한 부분도 있고, 특히 한자가 포함되지 않아서 한글과 한자의 모양이 일치하지 않는 문제도 발생합니다.

역시 기업이나 지방단체 등에서 CI구축의 일환으로 폰트를 만들어 공개하거나, 정부 차원에서 웹문화 발전을 위해 정책적으로 서체 공개를 유도하는 것이 필요할 것 같습니다.
BlogIcon Nes | 2008/08/25 17:45 | PERMALINK | EDIT/DEL | REPLY
좋은 글 잘 읽었습니다.
그런데 글 중에 12pt 굴림과 11pt 돋움은 pt가 아니라 px 아닌가요?^^;
BlogIcon 에린 | 2008/08/26 13:10 | PERMALINK | EDIT/DEL
px 맞습니다. ^^;; 제가 포토샵만 생각하고 그렇게 표기했네요. 수정했습니다. 감사합니다.
BlogIcon 맑은고딕 개발자 | 2008/08/27 12:01 | PERMALINK | EDIT/DEL | REPLY
맑은고딕은 Bold 체가 따로 있습니다.
맑은고딕을 사용한 다음에 Bold 처리를 하면, 실제 Bold체가 나옵니다.
마치 arial 이 그렇게 처리한 것처럼요.. 이런 것을 True Bold 처리한다고 표현합니다.
arial은 Italic, Bold, Bold Italic, Narrow 등이 모두 실제 일일이 작업된 폰트를 끌어다 쓰도록 되어 있습니다.
일반적인 폰트들은 기계적으로 Bold 처리하지만, 맑은고딕은 이미 Bold로 작업된 폰트를 뿌려주는 것이지요.

세리프 스타일의 폰트 제작은, 당시 MS의 개발기간 및 예산 부족 및 폰트 자체 용량에 대한 문제 때문에 개발을 포기한 것이었습니다. 안타깝게도 현재는 한글폰트쪽으로 새로운 계획을 갖고 있지는 않는 것 같아 안타까울 뿐입니다. 담당하셨던 분이 MS Korea를 퇴직하면서 정확한 당시 스토리를 알고 있는 사람도 없고, 폰트쪽에 대한 개발계획을 세울만한 생각도 없는 것 같습니다.(물론 저희쪽에서 제안을 하긴 했지만요;;)

맑은고딕이 욕도 먹긴 했지만, 그래도 자부심을 갖는 것은, 중국, 대만, 일본의 UI폰트들은 미국의 Monotype Imaging에서 힌팅작업을 다 했지만, 한국만 유일하게 자국에서 힌팅작업하였답니다. Bold체의 경우는 Monotype에서 우기고 우겨서 미국에서 했지만, Bold 처리가 안된 폰트의 힌팅을 그냥 베끼기만 하다보니 한글이 완전히 엉망이 되어버렸죠;;

현재는 한글에 최적화된 오토힌팅 기술을 어느정도 개발한 상태이기에, 빠른 시간내에 고품질의 웹용 폰트들을 만나실 수 있을 것으로 보입니다.
BlogIcon 에린 | 2008/08/27 20:44 | PERMALINK | EDIT/DEL
흠....그런 히스토리가 있었군요. 그럼 고품질의 웹용 폰트들이라고 하면 어떤 것들인가요? 맑은 고딕이 더 발전된다는 건가요? 혹은 다른 폰트들도 만날 수 있는 건가요? 기대가 되는데요 ^^
정지훈 | 2008/09/02 01:49 | PERMALINK | EDIT/DEL | REPLY
개인적으론 맑은 고딕뿐만 아니라 이번에 비스타에 도입된 MS의 segoe UI 폰트들은 모두 수준미달인듯 싶습니다만..
비스타 이후로 클리어타입이 점차 늘어날 거란 생각으로 선택한 것이겠지만, 클리어타입이 아니면 뭐 하나 제대로 볼 수 없는 절름발이 폰트들 이라는 생각밖에 안 드네요. (비트맵 방식에서 벗어난 건 박수칠만한 일이긴 합니다.)
나그네 | 2008/09/22 00:37 | PERMALINK | EDIT/DEL | REPLY
맑은 고딕은 gray scale 환경의 힌팅처리가 되어 있지 않아서,
xp같이 클리어타입이 기본이 아닌 환경의 경우, 획이 뭉개지는 현상으로 인해 가독성이 나빠질수 있기 때문에
섣불리 사용하지 못하는 문제가 있죠.
정은 | 2008/10/18 16:55 | PERMALINK | EDIT/DEL | REPLY
맑은 고딕 맥에도 깔수있나요?? 맑은 고딕 어디서 구하나요??? 사실 얼마전에 사진 전문 f 사이트의
developer 한테 막 불평했거든요. 굴림 안이뿌다. 영어랑 중국말이랑 대놓고 비교해봐라. 빨랑 윤고딕으로 바꾸 어라.. 결국. 제 생각에 큰 문제는 한국같은 경우 속도보다는 (물론 사람들이 속도에대해 tolerant 하지 않다고는 합니다만.) accessibility 인거 같은데, 이거 먼가 방법없을까 진짜 고민 많이 하고 있었는데요.. 써보고 싶네요.. 그리고 다른 웹폰트들 기대가 됩니다..
Name
Password
Homepage
Secret