30분 만에 전자책 만들기 5 : 폰트 임베딩 및 글꼴 설정
지난 3강까지 보셨다면 기본적인 EPUB 제작을 할 수 있게 됐다고 생각하셔도 좋습니다.
이번 포스팅부터는 좀 더 예쁜 EPUB 파일을 만드는 방법을 알려드리겠습니다.
어디까지나 제가 할 수 있는 범위 내에서요.
오늘은 폰트를 EPUB 파일 안에 삽입하고, 삽입된 폰트를 불러오는 방법을 알아보겠습니다.
솔직히 저는 폰트 임베딩을 좋아하지 않습니다.
특히 텍스트로만 이루어진 소설이나 에세이에서는 더욱...
굳이 폰트 임베딩을 해서 EPUB 파일 용량을 크게 만들 필요가 없다라고 생각하거든요.
그렇지만 폰트 임베딩을 하면 확실히 좋은 점이 있습니다.
바로 편집자의 의도대로 책을 만들 수 있다는 겁니다.
뭐... 어차피 EPUB 파일은 뷰어에서 글꼴을 바꿀 수 있지만...ㄷㄷ
오늘 알려드릴 내용도 그리 어렵지는 않으니 차근차근 쫓아오시면 얼마든지 쉽게 습득하실 수 있을 겁니다.
우선 오늘의 준비물을 살펴보겠습니다.
1. 지난 포스팅에서 완성한 EPUB 파일
2. 한국출판인회의에서 제작/배포한 Kopub 서체
지난 포스팅은 밑에 있는 목록을 선택하시거나, 아래의 링크를 타고 들어서가 다운받아 주세요.
[전자책 제작] 30분 만에 전자책 만들기 4 : 메타데이터 설정
EPUB 파일에 삽입할 폰트는 한국출판인회의 홈페이지에서 배포하고 있습니다.
해당 홈페이지에서 각 OS별 자동/수동 설치 버전을 다운받을 수 있습니다.
저는 좀 더 원활한 작업을 위해 수동 설치 버전을 다운 받았습니다.
다운 받은 파일의 압축을 풀어보겠습니다.
파일이 총 6개, 용량이 무려 27.7MB나 되네요.
이 폰트 파일을 전부 다 EPUB에 넣으면 엄청나게 무거워질 게 뻔하죠.
그래서 저는 본문에 쓸 명조체와 제목에 쓸 고딕체만 뽑겠습니다.
KoPubBatangMedium.ttf를 본문에, KoPubDotumBold.ttf를 제목에 적용하겠습니다.
그러면 우리는 2개 파일만 EPUB에 포함시키면 됩니다.
용량도 6개를 다 넣을 때보다 훨씬 작아지겠지요.
이제 준비물이 다 갖춰졌으니 작업을 시작하겠습니다.
놓치지 말고 잘 쫓아오세요.
1. 폰트 삽입하기
폰트 파일을 삽입하는 방법은 앞서 이미지 파일이나 CSS 파일을 삽입하는 것과 동일한 방법을 이용하면 됩니다.
우선 novel.epub 파일을 열고 북 브라우저에서 Font 폴더 위에 마우스를 올려두고 우클릭합니다.
add Existion Files...를 눌러 탐색기 메뉴가 나오면 폰트를 저장한 폴더로 들어가 KoPubBatangMedium.ttf를 본문에, KoPubDotumBold.ttf를 선택하여 EPUB 파일에 추가하면 됩니다.
정상적으로 폰트 파일 2개가 EPUB 파일에 추가되었습니다.
하지만 단순히 파일을 추가하는 것만으로 폰트가 적용되는 것은 아닙니다.
폰트를 사용하려면 CSS를 수정해야 하지요.
그럼 이제 CSS를 수정해서 삽입한 폰트가 출력되도록 해볼까요.
2. 폰트 적용
Style 폴더를 열어 novel.css 파일을 불러옵니다.
지난번에 설정했던 내용의 제일 위에 아래의 내용을 복사하여 붙여넣습니다.
@font-face { font-family: "kb"; src: url(../Fonts/KoPubBatangMedium.ttf); }
@font-face { font-family: "kd"; src: url(../Fonts/KoPubDotumBold.ttf); }
삽입된 폰트를 사용할 수 있도록 이름을 정해줬습니다.
font-family : "" 에서 따옴표 안에 들어 있는 것이 폰트의 이름입니다.
한글로 해줘도 되지만, 혹시 모르니 영어로 적었습니다.
기억하기 쉽게 코펍 바탕은 kb로, 코펍 돋움은 kd로 설정했습니다.
이 두 가지 이름을 헷갈리지 마시기 바랍니다.
자, 이제 다 된 것 같죠?
아닙니다.
아직 끝난 게 아녜요.
각 클래스에 폰트를 적용해야 합니다.
우리가 앞서 만들어 놓은 p와 h1, h2에 폰트 패밀리를 적용할 겁니다.
p 태그는 코펍 바탕체, h1, h2 태그에는 코펍 돋움 볼드를 적용할게요.
커서를 p {text-align:...의 { 다음에 위치시킵니다.
그리고 아래의 내용을 복사하여 붙여넣어주세요.
font-family: "kb";
h1 {...과 h2 {...에도 역시 커서를 옮겨놓고, 아래 내용을 복사해주면 폰트 적용이 완료됩니다.
font-family: "kd";
아래 이미지를 보시면 어떻게 하는 건지 더 확실하게 알 수 있을 겁니다.
빨간 네모칸이 방금 우리가 써넣은 내용입니다.
p에는 코펍 바탕의 kb가, h1과 h2에는 코펍 돋움의 kd가 들어있습니다.
이제 제대로 반영이 되었는지를 확인해야죠.
북뷰 모드로 바꾸고 Section0002.xhtml을 더블클릭합니다.
우리가 삽입한 폰트로 글씨체가 변경되었습니다.
어떤 변화가 있는지 모르겠다면...
밑에 첨부한 이미지를 봐주세요.
위의 이미지는 폰트 지정이 되지 않아 윈도우즈 기본 글꼴인 굴림체로 표현되는 모습입니다.
이렇듯 폰트를 임베딩하면 기본적인 글씨체로 표현되는 것보다 좀 더 편집자의 의도가 잘 드러나게 되겠죠.
하지만 단점으로는 앞에서도 이야기했듯이 EPUB 파일의 용량이 커집니다.
폰트 파일 한두 개 가지고야 그리 큰 차이가 안 난다고 생각할 수 있지만,
폰트를 내장하지 않은 EPUB 파일은 표지까지 합쳐서 1MB 미만으로 제작할 수 있는데에 반해, 폰트가 4개 이상 되는 EPUB 파일이라면 20MB 정도는 우습게 잡아먹게 됩니다.
이제 폰트 내장까지 알아봤네요.
다음에는 하이퍼링크를 삽입해서 판권지를 만들어 보겠습니다.
오늘도 즐겁고 행복한 하루 보내세요!
오늘 완성된 EPUB 파일입니다.
#강의 #전자책 #epub #전자책제작 #sigil
