[카테고리:] M

웹 기술도 많이 변했다. 예전처럼 JAVA 스크립트나 웹폰트를 직접 웹서버에 내장해서 페이지에 연결하는 무식한 짓보다는 대규모 서비스에서 제공하는 공용 소스를 공유해서 쓰는 일이 보편화되는 추세.

구글이나 클라우드플레어와 같은 서비스를 통해 Jquery 정도는 편하게 얻어다 쓸 수 있고, 이렇게 웹으로 연동되어 공유되는 자산들을 이용하면 웹사이트의 억세스 속도도 빨라진다.

이 방식은 웹폰트에도 적용된다. 국내에도 모빌리스라는 업체에서 시험적으로 한글 웹폰트를 서비스하고 있다는 걸 웬만한 설치형 블로그 이용자들은 알고 있을 거다. 하지만 서버의 속도나 글꼴의 크기가 그리 최적화되지 않은 편이라 마음대로 쓰기엔 불편한 것이 사실. 그런데 구글에서 제공하는 600여 가지의 구글 웹 폰트 서비스에 나눔 글꼴이 추가될 (이미 시험 가동중) 예정이라고 한다.

글꼴의 적용은 아래와 같이 간단히 CSS에 ‘@import’로 시작하는 구문 하나와 ‘font-family’로 시작하는 구문을 해당 스타일에 지정해주면 된다. 위로부터 순서대로 나눔브러쉬스크립트, 나눔고딕, 나눔고딕코딩, 나눔명조, 나눔펜스크립트 서체의 사용법.

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
font-family: 'Nanum Brush Script', cursive;

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
font-family: 'Nanum Gothic', sans-serif;

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
font-family: 'Nanum Gothic Coding', monospace;

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
font-family: 'Nanum Myeongjo', serif;

@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
font-family: 'Nanum Pen Script', cursive;

아래 스크린샷처럼 ssall.com에도 적용시켰다. 워드프레스는 요즘 기능이 너무 좋아져서 CSS 추가 정도는 JETPACK 플러그인의 CUSTOM CSS기능을 이용하면 너무 쉽다. 기존 파일들을 FTP로 직접 열지 않아도 해당 스타일의 Class를 알면 관리자창을 열어 추가시킬 수 있다.