내맘대로의 EPUB 제작 가이드

EPUB을 만들었는데 뷰어에서 열리지 않을때가 있습니다.

유통사에 보냈는데 문제가 있으니 수정을 해 달라고 하기도 합니다. 

EPUB을 만든 후 EPUB2.0 혹은 3.0 기준으로 문제가 없는지 확인해 주는 프로그램이 EPUB Validator입니다.

EPUB3.0 파일을 만들었는데 Navigation이 없거나 폰트를 추가했는데 본문에서 한번도 사용하지 않았다면 Validator가 알려줍니다. EPUB 파일이 2.0인지, 3.0인지도 구분을 해 줍니다. 2.0과 3.0에서 사용할 수 있는 CSS나 HTML 태그가 조금씩 다른데 EPUB2.0에서는 허용을 하지만 EPUB3.0에서는 사용하면 안되는 태그를 써도 Validator가 알려줍니다.

어느 파일 몇번째 줄에 어떤 오류가 있는지를 알려주기 때문에 문제를 수정하기도 쉽습니다. 

http://Validator.idpf.org/

웹페이지에서 EPUB파일을 바로 체크할 수 있습니다. 하지만 파일 크기가 10mb를 넘으면 안되고 파일 업로드하는 시간, 검사하는 시간이 오래 걸립니다. 

https://github.com/idpf/epubcheck/

JAVA로 만들어진 EPUB Validator를 다운로드 받아 PC에서 실행시킬 수 있습니다. JAVA를 실행시킬 수 있는 환경이어야 하는데 대부분의 컴퓨터에 설치되어 있습니다. 설치가 되지 않았다면 자바 홈페이지(https://java.com/ko/download/)에서 무료로 설치할 수 있습니다. JVM, JRE 등을 최신버전으로 설치하면 됩니다.

복잡한 옵션이 없기 때문에 사용법은 쉽게 익힐 수 있습니다.

압축을 푼 후 같은 폴더에 EPUB 파일을 넣고 아래처럼 실행시키면 끝납니다.

java -jar epubcheck-3.0.1.jar file_file_name.epub

현재 버전이 3.0.1이기 때문에 버전이 바뀌면 epubcheck-3.0.1.jar 이 부분을 바뀐 버전으로 수정해 줘야합니다. 

전자책을 보면 본문은 텍스트가 가득해서 스타일이 많이 필요할 것 같지 않지만 유통되고 있는 콘텐츠의 CSS를 확인해 보면 본문에 들어가는 스타일이 가장 많다. 본문을 편집하다 보면 주석이나 설명 문구, 단락의 소제목, 단어나 문장 강조 등 다양한 스타일이 필요하다. 

CSS를 만들 때 본문 스타일을 제대로 잡아주지 않으면 전자책 소스가 아주 지저분해 지게 된다. 편집자는 책을 보는 독자만 고려해서는 안되고 유통사의 뷰어에서 얼마나 가볍고 빠르게 열릴지, 오류 가능성은 없는지, 편집이 틀어지지 않는지 등을 모두 고려해야 한다. 그렇기 때문에 뷰어에 보이는 화면 뿐 아니라 태그와 스타일이 어떻게 적용되었는지도 확인을 해야 한다. 

이번 장에서는 전자책 편집시 가장 많이 사용되는 스타일을 깔끔하게 편집에 적용할 수 있는 CSS 스타일을 설명하도록 한다. 

* 아래에 설명한 스타일은 그대로 사용하기 보다는 원하는 스타일에 맞춰 스타일을 변경해 사용하기를 권한다.

1. 본문 기본 스타일

본문 기본 스타일은 문서 전체에 영향을 주는 스타일이다. 그렇기 때문에 가급적 간단한 스타일을 적용하는 것이 좋다. *는 모든 클래스를 대표한다. *로 설정한 스타일은 모든 하위 스타일에 적용된다. 여기서는 상하좌우 여백만 0으로 뒀다. 뷰어에 따라 기본 여백이 있기 때문에 책을 편집할 때 다시 여백을 주게 되면 여백이 너무 많아질 수 있어 여백을 0으로 두는 것이 좋다.

<p> 태그는 문단 태그로, 거의 모든 텍스트 편집에 사용한다. 제목과 일부 특수한 경우를 제외하면 모든 글자는 <p> 태그 스타일에 영향을 받는다고 말할 수 있다. 따라서 <p> 태그에는 가장 많이 쓰이는 스타일만 간단히 적용해야 한다. 

2. 기본 편집 스타일

2.1 들여쓰기 해제 스타일

본문 기본 스타일에 적용한 들여쓰기를 해제해야 할 때 사용하는 스타일이다. 이 스타일은 <p> 태그에 직접 적용하고 <sapn> 태그에 적용하지 않는다. 

2.2 오른쪽, 왼쪽 정렬 스타일

오른쪽, 가운데 정렬에 사용한다.

들여쓰기가 되어 있으면 들여쓰기가 된 지점부터 오른쪽 끝의 중간을 가운데로 보기 때문에 뷰어에서는 오른쪽으로 치우쳐 보인다. 그래서 화면 정 가운데에 맞추기 위해 가운데 정렬 스타일에 text-indent : 0;을 넣었다.

2.3 주석 관련 스타일

HTML의 기본 태그 중에 주석을 처리할 수 있는 태그가 많이 있다. 주석이 있음을 표시할 때는 윗첨자<sup>, 단어 옆에 괄호를 치고 간단한 설명을 추가하기 위해서는 <cite>나 <sub>를 사용할 수 있다. 그리고 이보다 많은 스타일이 필요하다면 클래스를 지정해 사용할 수 있다. 

주석 스타일이 여러개가 필요한 경우가 아니라면 HTML 태그 사용을 권한다. 아래 코드를 보면 HTML 태그를 사용했을 때 코드가 간결해 지는 것을 볼 수 있다.

2.4 문단 단위의 인용구

문단 단위의 인용구나 본문과 구분을 해야하는 단락에 사용하는 스타일이다. 본문과 구분을 두기 위해 여백, 글자색, 글자크기 등 다양한 효과를 줄 수 있다. 본문과 구분을 주기 위해 배경색, 문단 테두리 등을 적용하고자 할 때는 <div> 태그를 사용한 text_box 스타일을 참고하기 바란다. 

2.5 글자에 선을 긋는 스타일

글자에 취소선이나 밑줄을 그어야 할 때 사용할 수 있다. 이 중 txt_midline과 txt_underline은 각각 <del>, <ins>태그를 활용할 수 있다.

2.6 첫 글자