Kopub 바탕체 웹폰트 - kopub batangche webponteu

Kopub 바탕체 웹폰트 - kopub batangche webponteu

FREE

KoPub World 바탕체

3종 2020

전자책은 책이나 신문 같은 인쇄물과는 달리 디지털 화면으로만 볼 수 있기 때문에 그에 특화된 서체가 필요합니다. 이에 한국출판인회의는 출판사의 전자출판 콘텐츠 생산 강화와 전자책 시장 활성화를 목적으로 지난 2011년 'KoPub 서체'를 개발 무료 배포했습니다. 'KoPub 서체'는 디지털 화면에서 인쇄물 못지않은 가독성을 선보이며 지금까지 출판계뿐만 아니라 IT, 영화, 광고 디자인 등 다양한 산업에서 이용하는 명실상부 최고의 서체로 자리매김했습니다. 2019년 'KoPub 서체'는 'KoPub World 서체'로 다시 태어납니다. 'KoPub World 서체'는 그간 구현되지 않았던 옛한글과 함께 확장 한자, 일본어, 라틴어, 러시아, 히브리어, 아라비아어, 산스크리트어 등 다양한 언어를 포함하였으며, 이를 통해 독자들은 더욱 광범위한 지식문화 생활을 향유할 수 있게 되었습니다.

사용 가능 라이선스

* 해당 폰트의 지적 재산권은 한국출판인회의에 있습니다.

* 사용 가능 라이선스를 확인하지 않아서 발생하는 손해에 관한 책임은 사용자에게 있습니다.

  • 인쇄

    브로슈어,포스터,책,잡지 및 출판용 인쇄 등

  • 웹사이트

    웹페이지, 광고, 배너, 메일 E-브로슈어 등

  • 영상

    영상물 자막, 영화 오프닝/엔딩 크레딧 ,UCC 등

  • BI/CI

    회사명, 브랜드명, 상품명, 로그, 마크, 슬로건, 캐치프레이즈

  • 패키지

    판매용의 상품의 패키지

폰트정보

  • 카테고리

    세리프

  • 파일명

    KoPub World 바탕체 / KoPubWorldBatang

  • 포맷

    TTF

  • 지원언어
  • 라이선스

    모든 용도에 자유롭게 사용할 수 있습니다.

  • 제작사

    RixFont

  • 저작권

    한국출판인회의

보러가기

미리보기

  • 01 Light

    TTF

    별을 노래하는 마음으로 모든 죽어가는 것들을 사랑해야지 그리고 나에게 주어진 길을 걸어가야겠다.

  • 02 Medium

    TTF

    별을 노래하는 마음으로 모든 죽어가는 것들을 사랑해야지 그리고 나에게 주어진 길을 걸어가야겠다.

  • 03 Bold Italic

    TTF

    별을 노래하는 마음으로 모든 죽어가는 것들을 사랑해야지 그리고 나에게 주어진 길을 걸어가야겠다.

  • 이지러는 졌으나 보름을 갓 지난 달은 부드러운 빛을 흔붓이 흘리고 있다.대화까지는 팔십 리의 밤길, 고개를 둘이나 넘고 개울을 하나 건너고 벌판과 산길을 걸어야 된다.길은 지금 긴 산허리에 걸려 있다. 밤중을 지난 무렵인지 죽은 듯이 고요한 속에서 짐승 같은 달의 숨소리가 손에 잡힐 듯이 들리며, 콩 포기와 옥수수 잎새가 한층 달에 푸르게 젖었다. 산허리는 온통 메밀 밭이어서 피기 시작한 꽃이 소금을 뿌린 듯이 흐뭇한 달빛에 숨이 막힐 지경이다. 붉은 대공이 향기같이 애잔하고 나귀들의 걸음도 시원하다. 길이 좁은 까닭에 세 사람은 나귀를 타고 외줄로 늘어섰다. 방울소리가 시원스럽게 딸랑딸랑 메밀 밭께로 흘러간다. 앞장선 허 생원의 이야기 소리는 꽁무니에 선 동이에게는 확적히는 안 들렸으나, 그는 그대로 개운한 제멋에 적적하지는 않았다.


들어가며

티스토리 블로그의 서체를 바꾸는 방법은 크게 두 가지다. 첫째는 폰트 파일을 직접 업로드해서 바꾸는 방법인데, 번거롭고 나아가 컴퓨터에 따라 호환성 문제가 있다고 한다.1

둘째는 구글 웹폰트를 사용하는 방법이다. 이 방법은 폰트 파일을 따로 업로드 할 필요 없이, CSS 상단에 링크 하나만 추가해주면 되기 때문에 간편하고 호환성도 좋다.

구글 웹폰트는 무료이다. 대신 지원하는 폰트 숫자가 적은데,2 더 많은 폰트를 원한다면 모빌리스 웹폰트라는 유료서비스가 있다. 무료 폰트도 일부 있으나 예쁜 건 대부분 유료이고, 회원 가입도 해야 해서 뭔가 복잡하다. 따라서 개인이 가볍게 쓰기에는 구글 웹폰트가 최고다.

구글 웹폰트란?

구글 웹폰트는 구글에서 제공하는 무료 서체 서비스이다. 구글 웹폰트는 두 가지로 나뉘는데, 정식판과 베타판이 있다. 영어는 정식판이라도 미려한 게 많으나, 한국어는 정식판에서의 지원이 처참할 수준이다. 따라서 이 글에서는 베타판을 이용한다.

베타판은 ‘Early Access’라고도 부르며, 주소는 이곳이다. 보면 목록이 정말 많은데, 우리는 한글만 쓴다. Early Access가 지원하는 한글 폰트는 나눔고딕, 나눔명조, 나눔필기, 한나, 제주한라산, 제주고딕, 제주명조, Kopub 등이 있다. 예전에는 나눔고딕 하나밖에 없었는데 많이 발전된 것이다.

현재 블로그 적용 서체는 Kopub체. 한국출판인회의에서 만들었으며, 나온지 오래되었으나 특유의 깔끔한 획 처리로 예전부터 좋아하는 서체이다. 개인적으로 나눔고딕이랑 나눔명조를 싫어해서… 구글 검색으로 여러 디자이너의 평을 들어봐도, 나눔폰트는 완성도에서 좀 문제가 있다고 한다.

서체 적용의 기본

서체를 입힐 때는 제목, 메뉴 등은 sans-serif로, 본문은 serif로 디자인하는 게 좋다. 쉽게 설명하면 sans-serif는 각종 삐침 등이 없는 고딕 느낌의 서체이고, serif는 삐침이 들어가 있는 명조나 궁서 느낌의 서체이다.3 즉 제목이나 메뉴의 서체는 딱딱하게, 본문은 부드럽게 꾸미면 된다. 요새 웹폰트로 나눔 고딕이 많이 풀려서 너도나도 본문에 고딕체를 많이 쓰는데, 고딕체로 쓰인 장문의 글은 명조나 바탕체로 쓰인 글보다 눈의 피로가 심하다.

현재 본 블로그는 메뉴, 제목, 본문 가리지 않고 모두 serif체인 Kopub체로 통일되어 있다. 원칙은 위에서 언급한 대로 제목-고딕, 본문-명조지만 일단 세밀하게 설정하기가 귀찮았고, 거대 커뮤니티가 아닌 단순한 개인 블로그라 이렇게 해도 썩 괜찮아 보였기 때문이다.

웹폰트 적용하기

본격적으로 구글 웹폰트를 적용해보자. 한 가지 주의할 점은, 스킨 별로 적용법이 천차만별이라는 점이다. 블로그에 새로 폰트를 입히려고 들뜬 마음에 처음 구글링 해보면, 스킨마다 CSS가 달라서 거기에 나온 가이드대로 따라 할 수 없을 때가 대부분이다.4 이에 관해서는 밑에서 추가로 설명한다.

웹폰트 적용은 어느 홈페이지든, 블로그든 두 단계로 나뉜다. 첫 번째는 구글에서 폰트 퍼오기, 두 번째는 퍼온 폰트 예쁘게 입혀주기이다.

먼저 첫 번째부터. 예시는 Kopub체로 한다.

@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);

이게 구글 웹폰트를 퍼오는 태그다. 티스토리 관리 → HTML/CSS 편집에서 CSS 최상단에 넣어주면 된다. 이로써 첫 단계는 완료인데 문제는 두 번째 단계.

font-family: 'KoPub Batang', serif;

구글 Early Access에 보면, 요렇게 무성의하게 달랑 한 줄 나와 있다. 이는, 본문 서체를 바꿀 거면 본문 영역에, 제목을 바꿀 꺼면 제목 영역에 KoPub Batang을 추가해주란 소리다.

문제는 CSS를 한 번도 다루지 않은 사람은, 마치 망망대해에서 구슬하나 찾듯이, CSS에서 어디가 본문이고 어디가 제목이고 어디가 메뉴인지 찾아내기 어렵다. 간단한 스킨은 금방 찾을 수 있으나 복잡한 스킨은 상당히 오래 걸린다. 일단, 아래의 설명은 내가 쓰고 있는 공간 스킨을 기준으로 한다.

일반적인 스킨은, .article body 등으로 따로 본문이 선언되어 있지만, 공간 스킨은 CSS 상단에서 한 번에 설정한다. 아래의 세 곳을 수정해주면, 블로그의 모든 글씨체가 Kopub 바탕체로 변한다.

html,body,input,button,textarea
{
color: #000;
font: 1em/1.65 KoPub Batang,Roboto,"Helvetica Neue",Arial,NanumBarunGothicOTF,NanumBarunGothic,"나눔바른고딕","Apple SD Gothic Neo",Dotum,"돋움",sans-serif;
}
html.wf-active,html.wf-active body,html.wf-active input,html.wf-active button,html

.wf-active textarea
{
font-family: KoPub Batang,NanumBarunRoboto,Roboto,"Helvetica Neue",Arial,NanumBarunGothicOTF,NanumBarunGothic,"나눔바른고딕",NanumGothicOTF,NanumGothic,"나눔고딕","Apple SD Gothic Neo",Dotum,"돋움",sans-serif;
}

.cover h2
{
font-family: 'KoPub Batang';
font-size: 20px;
font-weight: 300;
letter-spacing: 4px;
line-height: 24px;
max-height: 72px;
overflow: hidden;
}

요렇게 총 3곳에 넣어주면 된다.

공간 스킨은 이렇게 하면 되는데 그럼 다른 스킨은? 제일 확실한 방법은 스킨 제작자에게 물어보는 것이다. 여건상 그게 불가능하다면, 스스로 CSS 코드를 분석해서 알아낼 수도 있다.

CSS의 구조는 중구난방이 아니고 대부분 특정 순서로 정리되어 있는데, 예를 들어 블로그 구성이 상단/본문/하단/꼬리 이렇게 되어있으면 CSS 순서도 대충 그걸 따른다. 이걸 인지하고 차근차근 찾아보면 어디가 본문인지, 어디가 메뉴인지 감이 잡히고 거기에 웹폰트를 선언해주면 된다.

마치며

사실 이도 저도 귀찮으면 그냥 기본 서체로 써도 문제 없다. 서체는 어디까지나 껍데기일 뿐 정말 중요한 것은, 글이 얼마나 고퀄의 내용을 담고 있냐 이기 때문이다. 그리고 네이버 블로그 등 폐쇄성 쩌는 블로그는 CSS 접근이 아예 막혀있기 때문에, 매 글마다 일일이 선언해 주는 게 아닌 이상, 서체를 바꾸는 것은 불가능하다.

그러나 보기 좋은 떡이 먹기도 좋다고, 나는 네이버 카페든, 블로그든, 웹사이트든 글을 쓸 때 3가지는 항상 수정한다. 서체, 글자 크기, 그리고 줄 간격. 이 세 가지만 잘 잡혀있어도 그렇지 않은 글에 비해 가독성이 월등히 나아지기 때문이다.5

멋쟁이 블로그에서 유려한 서체가 주는 눈의 즐거움을 만끽했다면, 자신의 블로그도 서체를 바꿔보자. 어렵지 않다. 바꾼 후에는 마치 집에 도배를 새로 한 것처럼 산뜻하고 뿌듯한 기분을 느낄 수 있다. 끝.

같이보면좋은글

티스토리 Bigfoot 각주 적용하기

  1. 폰트 파일 확장자도 골치거리다. 어떤 확장자는 익스플로러에서 안 보이고, 어떤 확장자는 사파리에서 안 보이고… ↩
  2. 한국어 한정. 영어는 어마어마하게 많다. 확실히 한글 폰트가 디자인 하기 어려운듯. ↩
  3. 애초에 sans는 불어인데, 영어로 without이란 뜻이다. ↩
  4. 가이드를 쓴 사람과 동일한 스킨을 쓰지 않는 이상, CSS는 반드시 다르다. ↩
  5. 상황상 서체를 바꿀 수 없다면 글자 크기와 줄 간격만이라도 바꿔보자. ↩