내맘대로의 EPUB 제작 가이드

최신 내용은 아래 글을 참고하세요.

https://www.epubguide.net/522

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.

전자책은 종이책에 비해 분철과 합본을 만들기 쉽습니다. 분철이란 한 권의 책을 장이나 절로 나눠 판매하는 방식, 합본은 1권, 2권으로 나눠져 있는 책을 하나로 묶어 판매하는 방식입니다. 

분철은 어렵지 않습니다. 전자책 편집 프로그램으로 챕터 파일을 삭제하면 알아서 다 정리해 줍니다. 예를 들어 3개 챕터로 구성된 EPUB 파일이라면 원본 파일을 [Filename_01.epub]로 복사한 후 첫번째 챕터만 남기고 나머지는 삭제합니다. 그리고 목차 정보를 갱신해주면 첫번째 챕터의 분철 파일이 생깁니다.

합본은 조금 복잡합니다. EPUB 파일을 합쳐주는 편집 프로그램은 아직 못봤어요. 그래서 두개의 책을 하나로 합치려면 첫번째 책에 두번째 책을 한 챕터씩 추가해 줬야 합니다. 시간이 오래 걸리는 작업이지요. 그리고 이렇게 하면 문제가 생길 수 있습니다. 예를 들어 첫번째 책과 두번째 책의 스타일을 조금 바꿨다면 CSS가 겹칠 수 있습니다. 첫번째 책의 본문을 나눔명조로, 두번째 책의 본문을 은글꼴로 편집했다면 스타일으 틀어져버립니다. 

이럴 때 간단히(물론, EPUB의 구조를 잘 알고 있는 분들에게) 두 책을 합치는 방법이 있습니다. 작업도 금방 끝나고 스타일으 겹치는 문제도 없습니다. 전자책 제작 경험이 없는 분들이라도 신경써서 따라해 보면 어렵지 않을거예요.

* 전자책 편집 프로그램은 Sigil을 사용합니다. 다른 편집 프로그램도 사용할 수 있습니다.

* 합본 제작은 심야책방 출판사에서 출간된 이상한 나라의 앨리스와 거울 나라의 앨리스를 예제로 사용했습니다. 

1. 합본 파일 준비하기

합본을 만들 둘 혹은 그 이상의 EPUB 파일을 준비합니다.

여기서는 심야책방에서 출간된 이상한 나라의 앨리스, 거울 나라의 앨리스로 설명을 하겠습니다. 

저작권이 있는 책이기 때문에 샘플 파일은 제공하지 않습니다. 

1.1 이상한 나라의 앨리스.epub 파일을 Sigil로 열어줍니다. 그리고 모든 파일명 앞에 W를 붙여줍니다. 챕터가 많다면 '이름바꾸기' 기능을 이용해 변경할 수 있습니다. css 파일명도 바꿔줍니다. 여기서는 wonder.css로 바꿨습니다.

1.2 거울 나라의 앨리스.epub 파일을 sigil로 열어 1.1처럼 작업을 합니다. 이 책은 파일명 앞에 M을 붙여줍니다. 그리고 css 파일명은 mirror.css로 바꿉니다.

1.3 만약 두 파일에 사용된 이미지 파일명이 겹친다면 이 역시 모두 W나 M을 추가해 줍니다. 두 책의 표지 이미지 파일명이 cover.jpg라면 W_cover.jpg, M_cover.jpg로 바꿔주면 됩니다. 이미지 파일명 역시 '이름 바꾸기'를 통해 일괄로 변경이 가능합니다.

2. 압축 풀기 & 파일 합치기

2.1 압축풀기 

압축 프로그램을 이용해 두 파일의 압축을 풀어줍니다. 압축을 푸는 방법은 생략합니다. 압축을 풀면 [이상한 나라의 앨리스]와 [거울 나라의 앨리스] 폴더가 각각 생길 거예요.

각각의 폴더 안에는 [META-INF]와 [OEBPS] 폴더가 있고, [OEBPS] 폴더 안에는 [Fonts] [Images] [Styles] [Text]폴더가 있습니다. 원본 파일에 따라 폴더 명이나 파일명이 다를 수 있지만 구조는 동일합니다.

[OEBPS] 폴더 안에는 content.opf와 toc.ncx 파일도 있습니다. EPUB 제작 프로그램에 따라 파일명은 다를 수 있지만 opf와 ncx 파일은 반드시 하나씩 있습니다.

2.2 파일 합치기

거울 나라의 앨리스 폴더에 있는 [Fonts] [Images] [Styles] [Text] 폴더를 이상한 나라의 앨리스의 [OEBPS] 폴더 안으로 복사합니다.

복사를 하면 같은 폴더가 있다는 경고를 볼 수 있습니다. 폴더가 같다는 경고는 무시해도 됩니다.

단, 같은 파일이 있다는 경고가 뜬다면 반드시 파일을 확인하세요. 폰트 파일이나, 출판사 로고 처럼 겹쳐도 되는 파일이면 괜찮습니다. 두 책에 서로 다른 내용으로 들어가 있는데 파일명이 같다면 반드시 다른 파일명으로 수정을 해야합니다. 

3. content.opf 파일 수정하기

가장 중요하고 까다로운 부분입니다.

EPUB 구조를 잘 아는 분이라면 어렵지 않겠지만 경험이 많지 않다면 이 부분에서 실수를 할 수 있습니다.

1번, 2번 과정을 제대로 해 놓았으면 별 어려움이 없을거예요. 하지만 1권과 2권에 겹치는 파일이 많이 있으면 조금 복잡해집니다. 초보자라면 가급적 두 책에 겹치는 파일이 없게 작업을 하세요. 용량이 조금 늘어나겠지만 작업은 간단해집니다.

메모장으로 이상한 나라의 앨리스 폴더에 있는 content.opf 파일을 열어주세요. 파일 내용을 잘 살펴보면 아래 이미지처럼 <manifest>...</manifest>와 <spine toc="ncx">...</spine>을 찾을 수 있습니다.

먼저 <manifest>의 끝으로 가주세요. </manifest> 바로 윗줄입니다.

위치를 찾았으면 거울 나라 앨리스 폴더에 있는 content.opf 파일도 열어줍니다.

이제부터 중요하니 잘 따라하세요.

1) 거울나라 앨리스의 content.opf 파일에서 <manifest>와 </manifest> 사이에 내용을 모두 복사합니다. <manifest>, </manifest>는 복사할 필요 없어요. 사이에 있는 내용만 복사합니다.

2) 복사한 내용을 이상한 나라의 앨리스 content.opf 파일에 붙여넣습니다. 위치는 </manifest> 바로 윗줄입니다. 아래 이미지 보시면 <!--여기부터 거울나라 앨리스-->라고 되어있는 부분입니다. 붙여넣기 했으면 저장합니다.

1) 이상한 나라의 앨리스 content.opf 파일에서 </manifest> 위치 확인

2) 거울 나라의 앨리스 content.opf 파일을 복사

3) 복사한 내용을 이상한 나라의 앨리스 content.opf 파일에 붙여넣기

이 부분은 아주 중요합니다. 이걸 잘못하면 제대로 병합되지 않고 오류가 납니다.

3) <spine> 부분도 똑같이 작업을 해줍니다. 이상한 나라의 앨리스에 있는 </spine> 바로 위쪽에 공간을 만들고 거울나라의 앨리스의 <spine> 영역 내용을 붙여넣습니다. 그리고 저장을 해줍니다.

4. 압축하기

이제 이상한 나라의 앨리스 폴더를 압축합니다.

압축할 때 아래 이미지처럼 이상한 나라의 앨리스 폴더 안쪽만 압축해 줘야합니다. 이상한 나라의 앨리스 폴더를 압축하면 안되니 주의하세요.

EPUB 파일 압축은 규칙이 있습니다. 폴더에 있는 mimetype은 압축을 하지 않고 zip 파일에 포함되야 합니다. 하지만 여기서는 그냥 압축을 합니다. 5번 과정에서 이 문제는 해결이 되거든요. 만약 Sigil 같은 편집기를 사용하지 않는다면 mimetype파일은 zip 파일에 압축 없이 추가해 주세요. 

압축을 했다면 zip 확장자를 epub으로 수정합니다.

5. Sigil로 EPUB 파일 열기

이제 [이상한 나라의 앨리스.epub] 파일이 생겼습니다. 파일명은 알아서 수정해주세요. 저는 [앨리스 합본.epub]으로 수정을 했습니다. 이 파일을 Sigil로 열어줍니다.

파일을 열때 오류가 없어야 합니다. 특정 파일을 찾을 수 없다거나 content.opf 파일에 문제가 있다는 메시지가 뜨면 위 과정에서 실수를 한 부분이 있을거예요. 오류 없이 열렸다면 이상한 나라의 앨리스와 거울나라의 앨리스의 내용을 모두 확인할 수 있습니다. 편집도 그대로 적용돼 있고요.

하지만 목차는 [이상한 나라의 앨리스]의 목차만 들어있습니다.

[도구]>[차례]>[Generate Table of Content]를 눌러 목차를 만들어 줍니다.

Tip을 하나 드리면, 1권과 2권 표지 파일에<h1>제목을 하나 추가해주세요. 그럼 아래 이미지처럼 권별로 목차가 정리됩니다.

목차 정리 후에 표지 파일에 넣었던 <h1>태그는 삭제해 주면 됩니다.

설명은 복잡하고 길지만 직접 해보면 30분도 안걸리는 작업입니다. 조금 익숙해지면 10분이면 끝낼 수 있는 작업이에요. 1. 파일명을 서로 겹치지 않게 정리하고, 2. 압축을 풀어 파일을 한쪽 폴더에 넣어주고, 3. content.opf를 합친 후, 6. 압축하고, 7. Sigil로 열어 목차를 다시 만들어 주면 끝납니다. 

오늘은 간단히 세로쓰기 정리해 봅니다.

일본어 책을 만들거나, 훈민정흠 해례본처럼 고서를 원문 느낌 살려 편집하고 싶을 때 세로쓰기가 필요해요. IDPF 회원국 중에서는 일본이 세로쓰기 연구를 가장 활발히 하고 있습니다.

여담이지만, 일본어 세로쓰기 셈플을 보고 세종대왕님께 다시한번 깊은 감사를 드리게 됐어요. 일본어 전자책 제작비는 국내 전자책 매출 규모로 보면 감당이 안될 것 같네요. 한글로 전자책을 만들 수 있다는게 정말 다행입니다.

세로쓰기는 이렇게 표현이 됩니다.

이미지 보니 감이 딱 오시지요. 우리가 익숙하게 접할 수 있는 텍스트는 일본어인데 소수 국가에서 세로쓰기를 합니다. 그래서 EPUB3에서 세로쓰기 지원이 강화됐습니다.

세로쓰기는 간단히 설정할 수 있습니다. 

가로로 만들어 놓은 책이라도 아래 스타일을 추가해 주면 세로쓰기로 쉽게 바꿀 수 있습니다. 

html에 스타일을 준건, 모든 태그에 세로쓰기 스타일이 적용되야하기 때문입니다. 그리고 spin에 적용한 rtl 속성은 페이지를 오른쪽에서 왼쪽으로 넘기도록 해줍니다. 

하지만 세로쓰기에 큰 문제가 하나 있습니다.

국내 유통사 중 제대로 지원하는 곳이 별로 없어요.

제가 테스트해본 결과입니다.(2016년 7월 20일 테스트함)

펍트리, 깃든뷰어 등 EPUB3를 지원하는 뷰어라면 세로쓰기 책을 볼 수 있습니다. 하지만 국내 주요 유통사 뷰어에서 지원을 하지 않기 때문에 전자책 만들 때 이 점을 고려해야 합니다. 

◇ 한글 세로쓰기 샘플

◇ 일본어 세로쓰기 샘플 : https://github.com/readium/readium-test-files/blob/master/demos/kusamakura-japanese-vertical-writing-20121124.epub

◇ 세로쓰기 관련 참고문서 : http://epubzone.org/news/epub-3-and-global-language-support

본문 혹은 본문의 특정 단어에 밑줄을 긋고 싶을 때 <u> 태그를 쓸 수 있습니다. 그런데 <u>태그를 쓰면 밑줄이 예쁘지 않아요. 두께나 스타일을 줄 수도 없습니다. 텍스트에 딱 달라붙은 밑줄이 그어져요. 

이럴 때 <u> 태그 스타일을 바꿔보세요. HTML 태그의 스타일은 편집자가 원하는 대로 바꿔 사용할 수 있습니다. 글자와 밑줄 간격을 조절할 수 있고, 밑줄 종류도 점선, 실선, 이중실선 등 다양하게 바꿀 수 있습니다. 색깔, 선의 두께도 편집자가 원하는 대로 지정할 수 있지요. 

선택자를 만들어 처리해도 되지만 태그에 스타일을 적용하면 코드가 깔끔해져요.

이렇게 코드도 깔끔해 지고, 편집 시간도 줄일 수 있습니다. 물론 <u>태그의 기본 스타일로 다른 곳에 사용했다면 쓸 수 없지요.

아래처럼 <u>태그에 스타일을 적용해 보세요. <u>태그를 쓸 수 없다면 선택자에 스타일을 적용하고 span 태그를 사용해도 되요.

text-decoration : none;을 해 준건 u 태그의 기본 스타일인 밑줄을 없애기 위함입니다. 이걸 해주지 않으면 border로 그어준 밑줄에 u태그의 밑줄이 겹쳐 그려지거든요.

border-bottom(border)는 다양한 속성이 있습니다. 1px는 밑줄의 두께예요.

border 밑줄 기본 두께

1px 밑줄 두께

2px 밑줄 두께

5px 밑줄 두께

solid는 1줄 실선을 뜻합니다. double(2줄 실선), dotted(1줄 점선), dashed(긴 점선), groove, ridge, inset, outset 등의 밑줄 종류를 선택할 수 있어요. 마지막에 붙은 #FF0000은 색입니다. 원하는 밑줄 색을 지정하면 됩니다.

padding-bottom으로 글자와 밑줄의 간격을 조절할 수 있습니다. padding을 주지 않아도 적당한 간격이 벌어지지만 섬세한 편집이 필요할 때 유용하게 사용할 수 있어요. 단, padding 값을 너무 크게 주면 아래쪽 줄에 영향을 줄 수 있으니 주의해야 합니다. 

padding-bottom을 주지 않았을 때

padding-bottom : 2px

padding-bottom : 10px(밑줄이 아래 문장에 그어짐)

padding-bottom 값이 너무 크면 윗쪽 단어에 그은 밑줄이 아래 문장과 겹칠 수 있어요.

링크 태그 <a...>는 3가지 스타일을 갖고 있습니다.

링크가 걸려있는 텍스트는 파란색에 밑줄, 방문한 링크는 갈색에 밑줄이 기본 스타일이고 마우스가 위로 올라가도 스타일이 변하지 않습니다. 

전자책을 만들 때 주석을 링크로 연결하는 경우가 있는데 별도의 스타일을 지정하지 않으면 링크 기본 스타일이 적용되지요.

링크 스타일을 변경하는 방법은 2가지가 있습니다.

1번은 링크의 상태(링크, 방문, 마우스오버)와 상관 없이 동일한 스타일이 적용됩니다.

이렇게 스타일을 적용하면 링크가 걸린 텍스트가 본문과 똑같이 보입니다.

링크의 상태에 따라 서로 다른 스타일을 지정하고 싶다면 선택자(selector)를 구분해서 스타일을 지정해 주면 됩니다.

이렇게 스타일을 지정하면 링크 텍스트는 빨간 글씨에 밑줄, 방문한 링크는 밑줄 없는 회색, 마우스가 올라가 있으면 노란색 배경이 적용됩니다.

링크가 걸려있는데 본문과 똑같아 구분이 가지 않는다면 독자들이 불편하겠지요? 하지만 주석은 ¹⁾처럼 본문과 구분이 되기 때문에 독자들이 주석이라는 것을 알 수 있습니다. 이럴 때는 파란색에 밑줄을 그을 필요는 없을거예요. 

상황에 맞게 a 태그나 3가지 선택자에 스타일을 적용할 수 있으니 편집할 때 활용하세요~