타운광장토픽게시판
아오 이것때문에 얼마나 삽질을 한건지...

한글이 용량이 너무 커서 저런 경량화버전을 쓰곤 하는데

문제는 저런걸 쓰면 표현을 못하는 글자들이 많습니다

예컨대 jsdelivr에 등록된 노토산스는 "아햏햏"에서 "햏"자를 표시 못합니다;;;

그리고 역시 jsdelivr에 있는 나눔바른고딕 경량화버전은 "웈" 이라는 글자를 표시하지 못하더군요

누가 저런걸 쓰냐고 하는데.. 커뮤니티 운영하다 보면 별 희한한 단어들이 다 나옵니다

참고로 "웈"이라는 단어는 누가 "현우"라는 사람 이름에 웃기다는 뜻의 "ㅋㅋㅋ"을 연달아 입력해서 "현웈ㅋㅋ" 라는 문장을 입력할 때 나온 단어입니다

그러면 어떻게 해야 하느냐... 솔직히 가장 좋은 해결책은 한글은 웹폰트를 안 쓰는거 같네요

영어는 수십KB밖에 안되는데 한글은 작아도 1메가를 넘어가고 위에서 말한 노토산스나 나눔바른고딕은 2~3메가를 넘어갑니다

너무 용량이 커서 너무 비효율적인 거 같네요

그래도 디자인때문에 꼭 필요하다면, 최소한 모바일에서는 로딩하지 않도록 해야 합니다

모바일 네트워크에서 다 받으면 5~6MB 내외인 웹폰트를 다운받았다간...

(어차피 모바일 기기들은 각자 기기에서 제일 깔끔하게 보이고 가독성이 높은 폰트들을 내장하고 있어서 굳이 필요 없습니다)

웹폰트를 별도의 webfont.css 파일로 만들고, layout.html 최상단에 load 구문으로 불러온 다음 그걸 모바일 에이전트+cond 구문으로 둘러싸면 됩니다.

<span cond="!Mobile::isMobileCheckByAgent()">
<load target="css/webfont.css" />
</span>

이런 식으로 씁니다.

그리고 웹폰트 css파일에는 cdn에 있는 css파일을 import하지 말고, 직접 font-face 구문을 이용해서 홈페이지에서 필요한 파일들만 올려놔야 합니다.

ie 같은 경우는 심지어 오프라인에 폰트가 있는 경우라도 올라와 있는 웹폰트를 전부 다운받는다고 하더군요. 그리고 css import보다 직접 font-face로 써놓는 것이 더 빠르다고 들었습니다.

+

나눔바른고딕 쓰는 분들 꽤 계실텐데(xedition도 나눔바른고딕이더군요) 이것만 쓰면 영문/숫자 등이 상당히 못생겼습니다. 그래서 앞쪽에 영문폰트를 따로 하나 더 추가해주는 게 좋은데

xedition은 Open Sans를 쓰더군요

그런데 이게 문제가 있는데... 특수기호 중에 ~ 자가 - 자로 보이는 현상이 있습니다

혹시 폰트 크기에 따라 안 나타날 수도 있고 확대 비율에 따라서도 다른데, 제 사이트에서는 브라우저 확대비율이 100%일때 무조건 -자로 보이더군요

살펴보면 ~ 자의 물결 굴곡이 매우 낮은 걸 알 수 있습니다

그래서 다른 폰트들을 찾아 나섰는데, 여러가지 적용해본 결과 Roboto 폰트가 특수기호도 깔끔하면서 나눔바른고딕에 매우 잘 어울리더군요

사람마다 다르게 생각할 수는 있어도 제가 볼땐 Open Sans보다도 더 잘 어울리네요

나눔고딕 계열 쓰신다면 Roboto도 같이 적용하고 font family에 Roboto-나눔고딕 순으로 적용해보시길
  • profile

    한글 웹폰트 어렵죠... 예전에는 화딱지나서 이런 것도 만들어 보았는데

    지금도 사정이 크게 달라지진 않은 모양이네요.

  • profile
    에디터 개발하면서 가독성 관련글을 엄청 파본 입장에서 이 글에 공감하고 있습니다.

    알아보면 알아볼 수록 아직 한글체가 웹에서 다채로워지기는 멀었습니다. 하지만 구글이나 어도비가 본고딕이라는 폰트체를 오픈소스화 하였다는것을 볼때 머지않아 한글도 부담없이 다채로운 폰트가 많이 나올거라고 봅니다.

    웹폰트의 단점은 용량이죠. 데스크톱이야 인터넷 환경이 좋아졌으니 상관없지만 모바일이라면 상황이 다르죠. ㄷㄷ;

    그리고 저는 개인적으로 웹폰트를 사용하지 않고도 훌륭한 타이포그라피를 만들 수 있다고 생각하고 있고 현재 에디터에 이걸 사용하고 있습니다.

    나중에 타이포그라피 관련해서 글도 개진하려고 생각중이에요.
  • profile

    보통 한 번 읽으면 캐시처리 되니... 가장 만만한 구글..나눔고딕 씁니다.

    거의 모든 글자가 표현되는 걸로...

     

     

    진짜 이럴 때 조합형 문자가 큰 단점으로 다가오네요..

     

    영문 같은 경우 정말 26자면 되니 (그외에 기호등등이 있겠지만) 오히려 디지털에 더 최적화된 문자가 아닐까 생각이 드네요..

  • profile ?
    jsdelivr의 경우 seoul edge에 캐싱처리가 돼서 매우 빠르게 로딩된다고 들었네요. 웹폰트 파일이야 원래 최초 접속 이후에는 캐싱된 파일을 사용하고...
  • ? profile
    나눔고딕이 그래도 가장 웹에서 부담 없으면서도 세련된 느낌이라 자주 애용합니다.ㅎㅎ

    그 전에는 돋움이였고... 웹폰트 한참 썼을 때는 정9체..ㅋㅋ
  • profile ?
    이 관점에 보니 디지털에 더 최적화됐다고 볼 수도 있겠네요
  • profile
    제가 웹폰트를 써본 결과... 많은 방법을 찾았었는데 한번 싹 정리해 봐야겠어요.