내맘대로의 EPUB 제작 가이드

1. @font-face를 자동으로 추가하자 

 전자책을 만들 때 항상 폰트를 추가합니다. Sigil에서는 폰트 파일을 추가한 후 CSS 파일에 @font-face를 매번 입력해야되요. 폰트가 추가되면 자동으로 스타일도 들아가면 좋겠지만, 편집자마다 선호하는 방식이 있으니 기능을 넣어 달라고 요구도 할 수 없습니다. 

저처럼 폰트가 추가되면 스타일이 자동으로 들어갔으면 좋겠다고 생각하는 사람이 있었나봐요. CSSFromFonts라는 제가 원하는 기능의 플러그인이 있습니다. 이 플러그인은 CSS에 폰트를 선언하는 CSS 코드를 추가해 줍니다. 특별히 설명할 내용도 없어요. 그냥 폰트를 추가하고, 플러그인을 실행하면 끝입니다. 그래도 몇가지 주의사항을 알려드릴게요.

1.1 실행 전에 폰트를 추가해 주세요. 

폰트 파일이 없으면 폰트 스타일을 만들 수 없다는건 너무 당연한거예요. 그런데 저도 가끔씩 폰트를 추가하지 않고 버튼을 누를 때가 있습니다. 폰트 폴더에 폰트를 추가한 후 실행을 시키세요. 

1.2 스타일 파일이 없으면 fonts.css 파일이 생성됩니다. 

폰트 스타일은 CSS 편집시 가장 먼저 이루어집니다. 그래서 CSS스타일 파일을 만들지 않고 버튼을 누를 때가 있어요. 그럼 자동으로 fonts.css파일이 생성됩니다. 폰트 스타일을 별도로 관리하고 싶다면 이 방법도 나쁘지 않아요. 하지만 CSS스타일에 넣고 싶다면 CSS파일을 먼저 만드세요.

1.3 생성된 코드 

플러그인을 실행하면 작업하던 내용이 있더라도 제일 상단에 폰트 코드가 추가됩니다. 

코드는 이렇게 되어 있어요. 

 그대로 사용해도 되지만, 폰트 이름(font-family)은 사용하기 편한 이름으로 수정할 수 있습니다. 저는 제가 기억하기 쉬운 '기본글꼴' '제목글꼴' '강조용' 등으로 수정해서 사용합니다. font-weight와 font-style도 수정이 가능하고요.  

2. FlightCrew 대신 epubcheck를 사용하자. 

플러그인을 사용하려면 JAVA 1.6 혹은 상위 버전이 설치 되어 있어야 합니다. 대부분의 컴퓨터에 설치되어 있을거예요. 설치가 됐는지는 커맨드 창에서 java 를 치거나 java 다운로드 페이지에 들어가서 확인이 가능합니다. 

 java 다운로드 : https://java.com/ko/download/

epubcheck는 IDPF에서 제공하는 공식 EPUB 검증 프로그램입니다. EPUB2, EPUB3 파일을 자동으로 확인해서 버전에 맞는 검사를 실행합니다. 2017년 4월 15일자 기준으로 4.0.2 버전이 나와있고, epubcheck plugin 역시 이 버전의 epubcheck가 포함되어 있어요.

EPUBcheck 공식 다운로드 페이지 : https://github.com/IDPF/epubcheck 

 epubcheck 플러그인을 실행하면 오류가 있을 경우 아래처럼 메시지가 표시되요. epubcheck 결과를 볼 줄 모르는 분들이 많은 것 같은데, 이 부분은 나중에 정리를 할게요. 결과만 잘 읽어도 어디에 무슨 오류가 있는지를 파악할 수 있고, 이 내용을 인터넷으로 검색해 보면 어떻게 수정하는지 쉽게 찾을 수 있습니다. 

 아래 샘플 이미지의 오류를 보면 11번째줄에 있는 strong이라는 태그가 address, blockquote, del, div, p....등의 태그 안에 들어가 있어야 한다고 되어 있습니다. 쓸 수는 있지만 위치가 잘못 됐다(not allowed here)는 의미예요. 

12번째 줄에 있는 aside라는 태그는 EPUB2.0에서 쓸 수 없는(not allowed anywhere) 태그입니다. epub:type, aside 등은 epub2에서 사용할 경우 오류 메시지가 표시되는데 국내 뷰어에서는 허용을 하고 있어요. 이 외에도 ruby, mark 같이 epub3에서는 허용하지만 epub2에서는 사용할 수 없는 태그를 쓰면 오류가 납니다. 국내 유통용이면 오류를 무시해도 되는데 구글 등에 올리려면 이 파일을 epub3로 변경해야 오류를 없애고 등록할 수 있어요.  

EPUBCheck 오류 메시지를 한글로 보자~

3. EPUB을 PDF로 저장하자. 

 **PrincePDF는 개인이 비 상업적인 목적으로 쓸 경우 무료지만 상업적인 목적으로 사용하려면 유료로 구입을 해야합니다. PrincePDF는 웹 페이지를 PDF로 출력해 주는 프로그램입니다. 커맨드라인으로 명령을 넣어야 하지만 놀라울정도로 강력한 기능을 갖고 있어요. 웹페이지를 그대로 PDF로 출력할 수도 있고, 사용자가 원하는 형태로 출력도 가능합니다. EPUB은 파일 기술적으로 '하나로 만든 홈페이지'입니다. 그래서 PrincePDF를 이용해 PDF로 출력이 가능해요. 먼저 PrincePDF를 설치합니다. 다운로드 : https://www.princexml.com/ 파일을 다운로드 받아 기본설치를 하면 PrincePDF 플러그인을 사용할 수 있습니다. 설치가 잘 됐는지 확인하고 싶다면 java처럼 커맨드 창에서 prince를 입력해 보세요.  

PrincePDF플러그인을 사용하는 이유는 카카오페이지 때문이에요. 

네이버, 교보문고, 리디북스 등에 콘텐츠를 올릴 때는 EPUB을 쓰지만 카카오에는 이미지 파일을 올리는데 카카오에서 전달 받은 제작 가이드는 시간이 오래 걸리고 오류도 많이 나더라구요. 카카오에서 받은 가이드는 HWP에서 카카오페이지 비율(720*1098) 이미지로 저장하고, 이를 포토샵에서 자동 변환 스크립트를 사용해 PNG로 변환하는 방식입니다. 제 컴퓨터에서는 한장 변환하는데 3초 정도 시간이 걸리더라고요. 20~30페이지짜리 연재물이라면 금방 끝나지만 같은 장르라도 단행본을 변환하면 3000~6000페이지 정도 나오는데 페이지당 3초면 몇시간을 작업해야 합니다. 그리고 EPUB으로 제작한걸 다시 HWP로 옮기는 불편함도 크고요. 그래서 Sigil에서 바로 이미지로 변환하는 방법을 찾다 보니 PrincePDF를 쓰게 됐습니다. 

1. 플러그인을 위한 Python설치

파이썬(Python)은 플러그인을 실행하기 위한 프로그램이에요. 정확히는 컴파일러인데 이런건 몰라도 되요. '플래시 플레이어' 같은거라고 생각하시면 됩니다. 브라우저에서 플래시 파일을 실행시키기 위해 '플래시 플레이어'가 설치되듯, Sigil 플러그인을 실행하려면 파이썬을 설치해야되요.

'이런거 설치 안해도 잘 되던데?'

네. Sigil은 파이썬을 번들로 포함하고 있습니다. 메뉴에서 [Plugins > Manage Plugins]에 들어가면 [Use Bundled Python]을 체크해 Sigil에 내장되어 있는 파이썬을 사용할 수 있어요. 파이썬을 설치하지 않았는데 플러그인이 실행된다면 이 옵션을 체크했거나, 자신도 모르는 사이에 파이썬이 설치됐을거예요.

번들을 써도 플러그인은 잘 작동합니다. 그러니 파이썬을 설치할 필요는 없어요. 그런데 간혹 파이썬 버전이 달라 실행이 안된다거나 하는 경우가 있습니다. 이럴 때는 버전에 맞는 파이썬을 설치해 줘야되요. 파이썬 설치는 간단합니다. 설치파일을 다운받아 실행시키고 [다음] 버튼만 눌러주면 되요. 개발자가 아니라면 복잡한 옵션을 설정할 필요가 없습니다.

파이썬은 여러 버전을 다운로드 할 수 있게 되어 있어요. 파이썬 홈페이지에는 3.6.1 버전이 가장 최신이고, 2.7.13버전도 함께 있는데 둘 중 어떤걸 받아도 괜찮아요. 구 버전에서 작동하지 않거나 최신 버전에서 오류가 나는 문제 때문인데 Sigil 플러그인을 사용할 때는 큰 이슈가 없어보이네요. 

파이썬을 설치했으면 Sigil을 실행합니다. Sigil 메뉴에서 [Plugins > Manage Plugins]를 선택하거나 [파일 > Preferences > Plugins]를 선택해 플러그인 관리 화면을 열어주세요. 그리고 [자동] 버튼을 눌러줍니다. 그러면 플러그인이 설치된 경로가 자동으로 등록될거예요. 만약 자동으로 설정되지 않는다면 [Set]을 눌러 파이썬이 설치된 폴더를 찾아주면 됩니다. 

설정이 잘 됐는지 확인하고 싶다면 testplugin으로 테스트를 해보세요. 사용 방법은 아래 내용을 참고하세요.

오류 없이 실행되면 파이썬 연결이 잘 된거예요.

파이썬 설치는 끝!

2. 플러그인 불러오기, 도구 버튼 설정

플러그인을 실행하려면 플러그인 파일을 Sigil에 불러와야합니다. 필요한 플러그인을 다운받은 후 [Add Plugin] 버튼을 눌러 추가시켜 주세요. 

testplugin으로 설명드려볼게요. [Add Plugin]을 누르면 아래처럼 플러그인을 선택할 수 있는 창이 열립니다. 윈도우용도 크게 다르지 않을거예요. 이 창에서 사용할 플러그인을 선택하면 플러그인 등록이 끝납니다.

플러그인이 등록되면 목록에서 확인을 할 수 있어요. 잘못된 파일이면 등록 전에 오류메시지가 표시되며 등록이 되지 않습니다. 

플러그인을 등록하면 설정창을 닫고 [Plugins] 메뉴를 눌러보세요.

플러그인이 종류별로 정렬된 것을 볼 수 있을거예요. [편집] 항목은 전자책을 편집하는데 도움을 주는 플러그인입니다. testplugin은 편집 항목으로 분류가 되네요. Validation은 FlightCrew나 epubcheck plugin처럼 적합성 검사를 해주는 플러그인이 포함됩니다. Outupt은 EPUB3 Output Plugin이나 PrincePDF처럼 결과물을 컴퓨터에 저장해 주는 플러그인이 등록되고요.

자주 사용하는 플러그인이 있다면 단축 버튼으로 등록할 수 있어요. 적합성 검사를 할 때 [Plugins > Validation > EPUB Check]를 눌러주기 귀찮다면 단축아이콘으로 등록해 사용하면 되요. 단축 아이콘은 3개까지만 지원이 됩니다. Assign as Plugin1 ~ 3까지 있고 오른쪽 끝에 있는 플러그 모양의 아이콘으로 실행할 수 있습니다. 왼쪽부터 1번이에요.

플러그인 아이콘은 바꿀 수 없어요. 그리고 이름을 추가할 수도 없어서 본인이 어떤 플러그인을 지정했는지 기억애햐 하는 불편함이 있습니다. 언젠가 개선되리라 기대해 봅니다 ^^

테스트 플러그인을 실행해 보세요. 단축아이콘으로 지정을 했다면 아이콘을 클릭하고, 그렇지 않다면 [Plugins > 편집 > testplugin]을 실행하면 되요. 저도 실행해 봤는데... 이런... 오류가 뜨네요. 코드 중에 PyQt5를 패키지 관련 오류인데, 파이썬 기본만 설치하고 PyQt5 설정을 안해놔서 그런 것 같아요.

Sigil 최신 버전이 PyQt5라는 것을 지원하면서 생긴 오류인 것 같아요. 제가 쓰는 플러그인에서는 PyQt5 가 필요 없으니 이 신경쓰지 않아도 됩니다. 번들 플러그인으로 실행을 하니 문제 없이 작동을 하네요.

여기까지가 플러그인 사용을 위한 준비과정이었습니다.

다음편에서는 제가 잘 써먹고 있는 플러그인 3개를 설명해 드릴게요.

1. 플러그인(Plugin)이란?

플러그인은 말 그대로 필요한 기능을 플러그에 꼽듯이 해서 사용하는 부가기능이에요. 스마트폰에 메모리가 부족하면 추가 메모리를 꼽는 것과 비슷하다고 생각하시면 됩니다. 플러그인을 잘 활용하면 복잡하게 해야 하는 작업이 아주 편해져요. 그런데 스마트폰에 추가 메모리를 설치하려면 메모리 슬롯이라는게 필요하잖아요. 컴퓨터 프로그램도 비슷해요. 플러그인을 지원하는 프로그램만 플러그인을 쓸 수 있습니다. Sigil은 플러그인을 지원하고 있어요.

2. 어떤 기능을 추가할 수 있지?

Sigil은 34개의 공개(공식이 아니에요) 플러그인이 있습니다. 개인이 사용하는 것까지 찾아보면 더 많겠지만, Sigil 플러그인 페이지에서 정리한 목록에 나와있는게 32개예요. Sigil에서 추천을 한다고 이 플러그인이 공식 지원한다는 얘기는 아닙니다. Sigil에서 공식 지원하는 플러그인은 2개예요.

이 두개의 공식 플러그인 외에 32개가 더 있어요. Sigil이 공식 지원을 하는건 아니지만 많은 사람들이 사용하고, 지속적인 업데이트가 이루어 지거나 업데이트는 없지만 더 이상 수정할 필요도 없는 완성도 높은 플러그인을 Sigil 사이트를 통해 정리해 놨습니다. 목록을 보려면 아래 링크를 클릭해 보세요.

이 중 제가 쓰는 플러그인은 3개예요.

다른 플러그인들은 영문(문법 플러그인)만 지원하거나 업데이트가 안돼 Sigil v0.9.x 이후 버전에서 오류가 나는게 많아요. 그리고 EPUB3 output plugin, cssRemoveUnusedSelector 같은 일부 플러그인은 Sigil이 업데이트 되면서 필요 없어졌습니다.

다음 글에서는 플러그인을 사용하는 방법을 알려드릴게요.

플러그인 파일을 다운받아 Sigil에서 불러오면 사용할 수 있어요... 라고 간단히 설명할 수 있으면 좋겠지만, Sigil은 파이썬(Python)이라는 언어를 사용하기 때문에 파이썬을 먼저 설치하고, Sigil에 파이썬을 연결해 줘야하거든요. 

'Sigil에 Python이 내장돼 있는데.'라고 딴지걸고 싶은 분이 계시겠지만, 제대로 쓰려면 이번 기회에 확실히 배우는게 좋지 않겠어요^^?

오랜만에 글을 올리네요.

한달 좀 넘게 여행을 다녀와서 현실 적응을 하느라 한참 제정신이 아니었어요.

오늘은 고난도 기술을 소개하려고 합니다.  

만약 이 잡지 표지를 한장의 이미지가 아닌, 이미지 위에 텍스트를 얹어 편집해야 한다면?

가운데 인물이 있고, 좌우에 텍스트를 배치해야 되요. 그런데 글자가 인물 안으로 들어가면 안되고 인물 주위에 자연스럽게 배치되야 합니다. 그리고 가장 중요한거. 글자 크기가 변경되도 편집이 틀어지면 안되고요. 어깨 아랫쪽으로 글자가 내려가는것 까지는 막을 수 없지만, 글자 크기가 커져도 얼굴 쪽으로 글자가 넘어가면 안됩니다. 가능할까요?

div 태그와 display : box; display :table; 등의 속성을 이용하면 비슷한 위치에 글자 배치는 가능해요. 그런데 글자를 키우면 틀어질거예요. 글자 크기가 변경 가능하면서 얼굴 선을 따라 곡선형으로 글자 배치하는건 정말 어렵고요. 이럴 때 쓸 수 있는 CSS속성이 있습니다. 예전에 한번 소개한 적이 있는 속성(http://epubguide.net/207)인데 어렵긴 하지만 활용도는 아주 높아요.

이 속성이 어떤건지 바로 이해를 하고 싶다면 아래 사이트에 들어가 보세요.

http://galjot.si/css-exclusions#examples-print

아랫쪽으로 쭉 내려가면 텍스트를 네모, 세모, 동그라미 모양으로 배치한걸 볼 수 있습니다. 텍스트를 이렇게 배치할 수 있게 해주는 속성이 shape-outside예요.

속성에 대한 설명은 모질라 재단 홈페이지에 나와있는걸 그대로 보여드릴게요. 속성에 대한 값이 너무 많아 다시 설명드리는건 낭비입니다!라는 핑계를 대며... ^^;;

/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> value */
shape-outside: url(image.png);

/* Gradient value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

여러가지 속성이 있는데 오늘 설명드릴건 polygon이라는 값이에요.

이 값을 잘 활용하면 전자책 편집하다 난감했던 문제들을 풀 수 있습니다.

오늘 예제는 '이상한 나라의 앨리스'예요. 

아래 이미지를 보세요.

이 이미지가 있는 부분을 제대로 편집한 전자책은 보기 힘들어요. 저도 예전에 한참을 고민하다가 앨리스와 체셔고양이 부분을 나눠서 편집한 적이 있습니다. 독자들은 별로 신경쓰지 않겠지만(ㅡ.ㅡ;) 그래도 전자책 제작 전문가라는 자부심이 있는데 이것 하나 해결 못하나 하는 자괴감이 들기도 하고...

왜 예전에는 shape-outside를 안썼냐고 하시면, 변명으로 들리시겠지만(^^;;) 안드로이드 구형 버전에서는 이 속성이 제대로 구현하지 못했어요. 안드로이드 4.4 이후 버전부터 구현이 되다가 5.0 버전 이후부터는 아무 문제 없이 적용이 됩니다. 그러다 보니 몇년 전에는 이 속성을 편집에서 쓸 생각조차 하지 않았습니다.

잡담은 그만 하고, 이제 본론으로 들어가서...

앞에서도 말했지만 오늘 소개할 속성은 이거예요.

shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

polygon 속성을 사용하면 다각형을 그릴 수 있습니다. 3각, 4각, 5각, 6각형 등을 표현할 수 있고, 별처럼 복잡한 도형도 그릴 수 있어요.

shape-outside : polygon(X좌표 X좌표 Y좌표, X좌표 Y좌표, X좌표 Y좌표);

이 스타일을 보면 좌표값이 3개 있습니다. polygon은 최소 3개의 좌표가 필요해요. 도형은 최소한 3개의 좌표를 필요로 하기 때문에 그래요. 사각형이라면 4개, 5각형이라면 5개의 좌표를 추가해 주면 됩니다. 좌표는 X축과 Y축이 한 쌍이에요. 그래서 2개가 한 쌍으로 콤마로 구분을 합니다. 화면 크기에 따라 변경되게 하고 싶다면 %단위를 쓸 수 있어요.

설명은 아무리 들어도 어렵지요^^?

이 속성은 직접 사용해 보기 전까지는 이해하기 어려워요. 저도 아직 X좌표가 가로축인지 세로축인지 자주 헛갈려요.

그럼 좀 더 이해하기 쉽게 예제로 설명을 드릴게요. 조금 많이 복잡하니 잘 따라오세요.

체셔고양이가 나오는 이미지는 오른쪽 중간부터 텍스트가 나옵니다. 이미지는 사각형이기 때문에 이미지를 넣고 float을 쓰면 오른쪽 중간 부분은 흰색으로 나와요. 이 부분을 채우려면 어떻게 해야 할까요? 컴퓨터가 이미지를 텍스트가 들어간 부분이 비어있는 다각형이라고 생각하도록 만들면 됩니다.

컴퓨터가 이미지를 이런 다각형이라고 생각하면 이미지가 들어간 영역을 제외한 나머지 부분에 텍스트를 채울거예요. 텍스트 크기가 변경되도 상관 없어요. 이미지 모양에 맞춰 텍스트가 알아서 채워지거든요.

이 이미지는 6각형이에요. 그러니 좌표가 6개여야 합니다. 좌표값은 이미지에 표시해 뒀으니 참고하세요.

이미지를 저렇게 만들기 위해 shape-outside 속성과 polygon 값을 아래같이 설정했어요.

좌표를 찾는게 어려워요. 한번에 찾을 수는 없고 눈대중으로 이쯤 되겠다 싶은 좌표를 찍은 다음 조정을 해줘야 되요. 정확한 이미지의 가로/세로 길이를 알면 계산을 해서 값을 잡아도 되지만, 그렇게 하는게 시간이 더 걸리더라고요.

참고로, Sigil에서는 shape-outside 속성이 표현되지 않습니다. Sigil에서 작업하기는 어렵습니다. 저는 텍스트 편집기와 브라우저를 열어놓고 작업했어요.

제가 설명을 건더뛰며 했기 때문에 설명만으로는 이해하기 어려울거예요. 모질라 사이트에 나와있는 예제와 이상한 나라의 앨리스 샘플을 직접 적용해 보면서 좌표가 바뀌면 도형이 어떻게 변하는지 확인해 보세요.

이 속성을 잘 활용하면 이미지와 텍스트가 복잡하게 얽힌 책도 편집을 할 수 있습니다. 시간이 많이 걸리긴 하겠지만요 ^^;