내맘대로의 EPUB 제작 가이드

안녕하세요.

<par id="heading1">

<text src="../Text/chapter_001.xhtml#c01h01"/>

<audio clipBegin="

0:00:24.500

" clipEnd="

0:00:29.268

" 

src="../Audio/mobydick_001_002_melville.mp4"/

>

</par>

<!--오디오 한 구간의 시작과 끝입니다.

예를 들어

It is a way I have of driving off the spleen and regulating the circulation.

라는 부분을 MP3와 싱크시키고 싶다면 MP3에서 이 부분이 시작되는 시간(clipBegin)과 끝나는 시간(clipEnd)을 적어줍니다.

그리고 이 본문의 위치와 ID를 이 부분에 넣어줍니다. 본문 ID는 뒤에서 설명드릴게요.

<text src="../Text/chapter_001.xhtml#c01h01"/>

 

끝으로 MP3 파일의 위치를

src="../Audio/mobydick_001_002_melville.mp4"

여기에 넣어줍니다.

 

-->

<par id="word1"><text src="../Text/chapter_001.xhtml#c01w00001"/>

<audio clipBegin="0:00:29.268" clipEnd="0:00:29.441" src="../Audio/mobydick_001_002_melville.mp4"/>

</par>

 

<!--오버레이 처리가 되야 하는 문단이 2개 이상일 경우 par ID를 변경해 줘야 합니다. ID는 word1, word2, word3... 등 편집자가 임의로 지정해 줄 수 있습니다. -->

<par id="

word1

">

1. 표지 스타일

표지 스타일은 한번 만들면 모든 책에 사용할 수 있다. 간단하게 편집하고 싶다면 아래처럼 좌우 가운데 정렬을 해 주면 된다. 이미지 태그는 <div>나 <p>태그로 감싸는데 <p>태그로 감쌀 경우 들여쓰기가 되지 않도록 주의해야 한다.

이렇게 표지를 삽입하면 좌우는 가운데 정렬이 되지만, 세로로 긴 화면에서 보면 표지가 화면 위쪽에 붙는다. 표지가 뷰어의 상하좌우 중앙에 오게 만들고 싶다면 아래 스타일을 사용할 수 있다.

표지 스타일 적용 전

표지 스타일 적용 후

2. 속표지 스타일

전자책과 종이책은 읽는 방식이 다르다. 텍스트를 담는 그릇 자체가 종이와 디지털이라는 전혀 다른 성질이다. 종이책 편집에 익숙한 편집자들은 전자책에 종이책 감성을 담으려고 노력을 하는데, 그러다 보면 아래 같은 편집이 나오게 된다.

종이책과 똑같이 편집한 전자책

이 책은 필자가 시간상의 문제로 외주 제작을 의뢰해 받은 전자책 파일이다.  표지, 책등의 저자 소개, 저작권면 등 목차까지 6개 페이지가 나온다. 스마트폰 같은 작은 화면에서 보면 저자 소개, 저작권면 등은 2~3페이지가 나오기 때문에 실제로는 10페이지가 넘는다.

독자의 입장에서 생각해 보자. 종이책이라면 책을 펼쳐 바로 본문으로 넘어갈 수 있다. 편집자에게는 책등과 속표지와 저작권면이 중요하겠지만, 독자에게는 큰 의미가 없다. 특히 전자책은 바로 본문으로 넘어갈 수 없기 때문에 책을 열자 마자 필요 없는 페이지를 10페이지 이상 넘겨야 하는 불편이 생긴다.

저자소개와 판권면을 책의 뒤로 보내고, 속펴지를 없앤 편집

편집을 수정해 책에 포함되야 하는 저자소개와 판권면은 뒤로 넘기고, 속표지를 없앴다. 독자는 이 책을 볼 때 본문까지 가는데 3페이지면 충분하다. 전자책을 편집할 때는 종이책과 달라야 한다는 생각으로 전자책에 필요하지 않은 부분은 과감히 없애고, 독자에게 불편할 수 있는 부분은 뒤쪽으로 넘기는게 좋다.

그래도 속표지가 필요한 경우가 있다. 그럴 때는 겉 표지와 편집을 달리 가져가는게 좋다. 샘플로 사용하는 이상한 나라의 앨리스는 종이책으로 보면 목차까지 4페이지가 있다. 간지와 책날개 등을 포함하면 7페이지가 된다.

전자책으로 편집할 때는 표지, 속표지, 목차 이렇게 3페이지만 표현할 것이다.

속표지는 종이책 이미지를 그대로 가져와도 되지만 여기서는 표지 스타일을 적용해 텍스트 형식으로 제작하려고 한다.

왼쪽은 종이책 표지이고 오른쪽은 CSS를 적용하기 전 EPUB 속 표지이다. 속표지에는 영문 제목, 한글 제목, 저자, 역자 그리고 출판사 로고 이렇게 5개의 스타일이 필요하다.

1. 영문 제목
   영문 책 제목은 h1 태그를 사용한다. 제목 아래에 밑줄이 있고, 글자 크기는 다른 글자보다 커야 한다. 태블릿 처럼 화면이 넓은 기기에서는 제목이 한 줄로 표현되지만, 스마트폰에서는 제목이 2줄 이상이 될 수 있어 밑줄은 화면 길이에 맞춰 폭이 조절되야 한다.
    

위 스타일을 적용하면 아이패드의 넓은 화면과 스마트폰의 좁은 화면에 맞춰 글자가 자동으로 배열된다. 밑줄 역시 화면에 맞춰 길이가 조절된다.

2. 한글 제목

한글 제목에는 h2를 사용한다. 한글 제목은 글자 크기를 맞추고 가운데 정렬을 시켜준다. 그리고 한글 제목과 저자 사이에 간격이 벌어져 있으니 margin으로 폭을 조절해 준다.

3. 저자와 역자

저자와 역자는 p 태그에 클래스로 스타일을 지정한다. 저자와 역자 역시 가운데 정렬에 글자 크기만 지정해 주면 된다.

4. 로고

로고 이미지가 준비돼 있다면 Images 폴더에 로고 이미지를 불러온다.

로고는 화면 크기에 따라 크기가 조절되야 한다. 아이패드처럼 큰 화면에서는  크게, 스마트폰 같은 작은 화면에서는 작게 조절되야 한다. 화면 크기에 따라 로고는 가로 20% 크기로 하고, 최대 크기는 100%를 넘지 않게 스타일을 지정한다.

 왼쪽은 종이책 속표지, 오른쪽은 전자책 CSS를 적용한 표지

스타일이 모두 적용이 되면 종이책 표지와 비슷한 느낌으로 속표지가 표현된다. 차이가 있다면 이미지형 표지는 화면 크기가 작아지면 글씨를 읽기 힘들어지고, 가로 화면에서도 세로형으로 표현되지만 텍스트로 편집한 표지는 가로/세로에 따라 표지 배열이 바뀌고 화면이 작아도 글씨 크기가 그에 맞게 조절된다는 점이다.

전자책 표지는 화면크기 및 비율에 맞춰 자동으로 조절됨

* Tip

스타일을 적용하다 보면 똑같이 반복되는 속성이 있다. 제목 스타일도 아래 속성이 계속 반복된다.

이렇게 반복되는 스타일은 한번에 지정을 할 수 있다.

 중복 스타일을 묶어 한번에 지정을 하면 CSS 파일을 조금 더 깔끔하게 정리할 수 있다.

속표지 스타일은 책마다 다양한 변형이 가능하다. 이미지로 표현할 수도 있고, 텍스트로 된 속표지라면 여기에서 처럼 CSS로 스타일을 지정해 표현할 수도 있다. 어떤 형태로 만들 든 전자책 화면은 종이책 처럼 고정되어 있지 않고 다양한 비율, 다양한 크기라는 점을 잊지 않는게 중요하다. 이미지로 속표지를 넣더라도 4인치 스마트폰부터 10인치 태블릿까지 고려해서 편집을 해야한다.

스타일을 편집하기 전에 사용할 글꼴, 이미지 등을 먼저 불러오면 작업을 편하게 진행할 수 있다.  이미지는 편집 전에 모두 준비해 둬야 하고, 글꼴은 기본 글꼴을 추가한 후 편집하면서 필요한 글꼴을 추가해도 된다.

1. 글꼴 추가
1. 책 찾아보기의 Fonts 폴더에서 마우스 오른쪽 버튼을 누른다.

1. 대화 상자에서 필요한 글꼴을 선택해 추가한다. 여기서는 무료로 사용할 수 있는 나눔고딕과 은바탕 글꼴을 사용할 것이다.

2.  CSS에 글꼴 추가

글꼴 파일을 추가했다면 이제 CSS에 글꼴을 추가해야 한다.

3. 공통 스타일 지정

공통 스타일은 책 전체에 적용되는 스타일이다. 모든 단락(p 태그) 사이의 줄간격이 많이 떨어진 전자책을 본 적이 있을 것이다. 이는 편집자가 의도한 경우 보다는 스타일을 몰라 줄간격을 붙이지 않았을 가능성이 높다. 아래 공통 스타일을 추가하면 이런 문제를 간단히 해결할 수 있다.

*는 컴퓨터에서 '모든 것'에 해당하는 와일드카드 문자다. 예를 들어 모든 jpg 이미지 파일을 찾고 싶다면 [찾기] 메뉴에서 *.jpg를 하면 된다. CSS에서는 모든 스타일에 상속되는 스타일을 의미한다. 

4. 이미지 추가

글꼴을 추가했으면 이제 이미지를 추가한다. 이미지는 책에 들어갈 순서에 맞춰 미리 정리를 해 두는게 좋다. 이미지 역시 폰트를 추가하는 방법과 동일하게 진행한다.

여기서는 이미지가 들어갈 순서에 맞춰 img001, img002…로 이름을 정리했다. 이렇게 정리를 해 놓으면 이미지가 들어갈 위치를 찾아 쉽게 추가를 할 수 있다. 

전자책 제작의 90%는 스타일 편집이다. 편집자는 독자들에게 전달하고자 하는 내용을 텍스트 뿐 아니라 행간, 여백, 이미지의 위치 등으로 책에 담는다. CSS는 전자책을 편집자가 원하는 형태로 독자들에게 보이도록 해준다.

다른 편집 프로그램들은 HWP나 MS워드같은 문서편집기가 제공하는 수준의 편집 기능을 제공하기도 한다. 하지만 Sigil은 이런 기능이 없고, 사용자가 직접 CSS를 편집해야 한다. 두 방식은 각각 장점과 단점이 있다.

전자책 편집 프로그램의 CSS 편집기 

1. 편집 기능과 코드 편집의 장단점

편집기능이 있으면 초보자도 쉽게 CSS로 편집이 가능하다. CSS 적용 결과를 눈으로 확인하며 편집을 할 수 있기 때문에 원하는 스타일을 쉽게 만들 수도 있다. 하지만 이런 편집 기능으로 만든 전자책은 코드가 깔끔하지 않은 경우가 많고 기능도 제한적이다.

편집 프로그램으로 만든 CSS 코드

Sigil로 직접 편집한 코드

Sigil처럼 직접 CSS를 편집하는 방식은 초보들이 사용하기 어렵다. HTML과 CSS에 대해 알고 있어야 편집이 가능하다. 그리고 HTML에 어떻게 적용하는지, CSS의 설정이 중복될 경우 어떤 순서대로 표현되는지 등 까다로운 조건을 편집자가 고려해야 한다.

까다로운 대신 제대로 활용하면 장점이 아주 크다. 편집 프로그램으로는 표현하기 어려운 다양한 스타일을 적용할 수 있고, 미세한 표현도 가능하다. CSS3는 에니메이션 같은 강력한 기능도 지원하기 때문에 JavaScript을 몰라도 간단한 에니메이션이나 인터렉티브형 표현도 가능하다. 편집 시간도 절약할 수 있다. Sigil은 찾기/바꾸기 기능에서 정규표현식을 사용할 수 있어 제목, 주석처럼 형식이 정해져 있을 경우 클릭 한번으로 수 백개의 코드를 수정할 수 있다.

편집 기능과 코드 편집 중 어떤 방식이 더 좋다고 말할 수는 없다. 코드 편집이 강력한 기능을 제공한다 해도 초보자에게는 없느니만 못하고 고급 편집자라도 글꼴 크기를 바꾼다든지 적당한 색을 찾을 때는 코드 편집 보다 편집 기능에서 제공해 주는 미리보기로 스타일을 잡는게 편하다.

여기서는 코드 편집 중심인 Sigil에 맞게 HTML과 CSS를 사용한 편집 방법을 설명하려고 한다. CSS 편집기가 필요한 사람은 미투북스의 스타일리스트나 나모 펍트리 등을 이용하면 좋다.

2. 기본 스타일 정하기

책 본문을 편집하기 위해 필요한 기본 스타일은 그리 많지 않다. 책의 구성 항목을 생각해 보면 소설류는 5개 이내, 자기계발서는 10개 안팎, 여행책 처럼 편집이 복잡해도 20개 이내로 기본 스타일을 잡을 수 있다.

기본 스타일을 정하는 방법은 간단하다. 종이책이 있다면 책을 보면서 본문과 다른 형태의 편집 요소를 뽑아내면 된다. 대부분 한 장(챕터)만 살펴봐도 책 전체 스타일의 90% 이상 정리할 수 있다.

예제로 사용하는 '이상한 나라의 앨리스'는 소설이지만 스타일이 많이 쓰이는 책이다. '이상한 나라의 앨리스'에 필요한 기본 스타일을 정리하면 다음과 같다.

1. 1. 표지 스타일
2. 2. 속표지 스타일
3. 3. 목차 스타일
4. 4. 장 제목 스타일(11p)
5. 5. 본문 스타일
6. 6. 이미지 스타일
1. 6.1. 한 페이지를 가득 채운 스타일(10p)
2. 6.2. 왼쪽 어울림 스타일(16p)
3. 6.3. 오른쪽 어울림 스타일(17p)
4. 6.4. 가운데 정렬 스타일(30p)
7. 6. 괄호 설명(11p)
8. 7. 빈병 라벨(강조)(13p)
9. 8. 시, 인용구(24p)
10. 9. 가운데 정렬(18p)
11. 10. 판권면

(페이지는 [내 인생을 위한 세계문학 14권 이상한 나라의 앨리스(심야책방)]를 기준으로 함)

1장에 필요한 스타일을 정리하면 4번 ~ 9번까지 10개가 나온다. 여기에 표지, 속표지, 목차, 판권면 등 기본적인 스타일을 추가하고, 장별로 나오는 예외적인 스타일을 추가하면 '이상한 나라의 앨리스' 전자책이 완성된다. 표지, 속표지, 목차, 판권면은 한번 만들어 두면 반복해서 사용할 수 있기 때문에 실제 추가해야 하는 스타일은 4번 ~ 9번까지이다.

장별로 파일 정리가 끝나면 본격적으로 스타일 편집이 시작된다. 스타일 편집은 장별로 나누기 전에 해도 되지만 편집 내용이 많을 경우 속도가 느려지거나 오류가 발생해 강제 종료가 될 수 있어 주의해야 한다.

편집 순서도 본문부터 편집을 하든, 표지부터 편집을 하든 편집자 취향대로 하면 된다. 여기서는 설명의 편의상 표지부터 순서대로 스타일 편집을 하려고 한다.

앞 장에서 표지 이미지를 삽입했다. 하지만 Sigil 책보기 화면으로 보면 표지가 화면에 제대로 표시되지 않는다. EPUB 전자책을 보는 기기는 크기가 다양하기 때문에 표지는 화면 크기에 맞게 확대/축소되도록 편집을 해야한다.

표지 스타일을 편집하기 위해 먼저 CSS 파일을 추가한다. CSS 파일은 EPUB 파일에서 하나면 충분하지만 필요에 따라 하나 이상 추가할 수도 있다.

1. 빈 스타일시트(CSS 파일) 추가

[파일 > 추가 > 빈 스타일시트]를 이용하거나 [책보기] 창의 Styles 폴더에서 마우스 오른쪽 버튼을 클릭 후 [빈 스타일시트]를 추가한다.

만약 사용하는 CSS 파일이 있다면 [파일 > 추가 > 기존파일]을 눌러 CSS 파일을 추가할 수 있다.

추가된 스타일시트 파일을 열면 아무런 내용도 없는 빈 화면이 나타난다. 여기에 필요한 스타일을 추가한 후 HTML 파일에 연결하면 스타일이 반영된다.

스타일 편집 전에 HTML 파일에 스타일시트를 연결한다. 스타일시트를 연결하지 않으면 편집이 반영되지 않기 때문에 편집 전에 연결하는 것이 좋다.

2. 스타일시트 연결

2.1 스타일시트를 연결할 HTML 파일을 선택한다. 여기서는 모든 파일을 선택한다.
 

2.2 선택한 파일 위에서 마우스 오른쪽 버튼을 누른 후 [Stylesheets를 연결…]을 클릭한다.

2.3 스타일시트 연결 창이 나오면 원하는 스타일시트를 선택 후 [OK]를 클릭한다.

2.4 스타일시트를 연결 후 cover.xhtml 파일의 코드보기를 하면 아래처럼 스타일시트 파일이 연결된 것을 볼 수 있다.
* 스타일시트 연결 코드. <head>태그 사이에 <link…>로 파일이 연결된 것을 볼 수 있다.

스타일시트가 연결됐으면 이제 책의 스타일을 편집해야 한다. 다음 장에서는 스타일 편집에 대해 설명한다.

한 권의 책은 여러 개의 챕터(장)으로 나눠져 있다. EPUB으로 책을 만들 때는 각 챕터를 하나의 HTML(xhtml) 파일로 구분해 주는 것이 좋다. 책 한 권을 HTML 파일 하나로 만들면 저사양 기기에서 오류가 발생하거나 페이지를 넘기는 시간이 오래 걸릴 수 있다.

몇 년 전에는 한 챕터(HTML)를 100kb ~ 300kb 정도로 제한을 두기도 했다. 챕터가 너무 크면 갤럭시 A, 아이폰 3 처럼 성능이 떨어지는 기기로 책을 볼 때 뷰어가 강제로 종료되는 등의 문제가 생길 수 있고, 챕터가 넘어갈 때 시간이 오래 걸리기도 한다.

최근에 나온 모바일 기기에서는 이런 문제가 없지만, 여전히 저사양 모바일 기기를 사용하는 독자가 많기 때문에 다양한 독자층을 고려한다면 한 챕터가 300kb를 넘지 않는게 좋다.

챕터를 나누면 편집도 쉬워진다. 책을 구성하는 단위 중에 챕터(장)는 편집이 완성된 단위이다. 첫번째 챕터와 두번째 챕터의 편집을 완전히 다르게 하는 경우는 드물기 때문에 첫번째 챕터의 스타일을 잡아 놓으면 그 다음 부터는 스타일을 추가할 일이 많지 않다.

텍스트 파일이나 HTML 파일로 본문 전체를 불러왔다면 책 한권이 하나의 HTML 파일로 저장된다. Sigil에서는 이렇게 하나로 된 파일을 여러 개로 나눠주는 기능이 있다.

1. 현재 커서 위치에서 나누기

[현재 커서 위치에서 나누기] 기능을 이용하면 커서가 위치한 곳에서 파일을 나눌 수 있다. 커서를 1장이 시작되는 곳에 놓고 아래 처럼 나누기 기능을 실행하면 Section0001.xhtml 파일이 Section0002.xhtml 파일이 생기면서 커서 뒷부분이 새로운 파일로 나뉘게 된다.

1. 장을 구분할 위치에 커서를 놓는다.

1. [편집 > 현재 커서 위치에서 나누기] 혹은  아이콘을 클릭한다

2. Split Marker와 Split at Marker

챕터를 하나씩 나누지 않고 파일 하나로 책을 편집한 후에 한번에 나누고 싶다면 Split Marker를 이용한다. Split Marker는 파일로 나눌 위치를 표시하는 기능이다. Split Marker로 표시된 부분은 Split at Marker를 이용해 한번에 나눌 수 있다.

1. 장을 구분할 위치에 커서를 놓는다.
2. [삽입 > Split Marker]를 클릭해 나눌 위치를 표시한다.
   Split Marker를 삽입하면 구분선이 그어진다. 이 부분을 코드 보기로 보면 아래 코드가 추가된 것을 볼 수 있다.
   
   

코드보기에서 Split Marker를 추가하고 싶은 위치에 이 코드를 삽입하면 [삽입 > Split Marker]를 한 것과 동일하다. 

1. [편집 > Split at Marker]로 표시한 위치를 나눈다.

Split at Marker로 챕터를 나누면 [Section0001_0001.xhtml]처럼 파일명 나누기 전 파일명 뒤에 _0001, _0002로 번호가 붙는다. 파일을 나누기 전에 [Section.xhtml]처럼 파일명을 수정해 놓으면 챕터 파일명을 깔끔하게 정리할 수 있다.

챕터가 10개 이내로 나눠진 책이라면 [현재 커서 위치에서 나누기]나 [Split Marker]로 나누는게 어렵지 않다. 하지만 챕터가 30개쯤 된다면 하나씩 찾아 나누기 쉽지 않다. 이럴 때 정규표현식[Regex, Regular expression]을 사용하면 단순한 반복 작업을 쉽게 끝낼 수 있다.

정규표현식을 이용하면 동일한 패턴으로 된 내용을 쉽게 찾을 수 있다. 예를 들어 본문 내에서 2자리 숫자를 찾고 싶을 때 정규표현식을 사용할 수 있다.

2자리 숫자는 00부터 99까지 100가지 경우의 수가 있다. 찾기 기능을 이용하면 00, 01, 02를 하나씩 대입해서 100번을 찾아야 한다. 하지만 정규표현식을 이용하면 아래 식으로 한번에 00부터 99까지 2자리로 된 모든 수를 찾을 수 있다.

예제로 든 '이상한 나라의 앨리스'는 장 제목이 아래처럼 되어 있다.

<p>(숫자)장</p>가 반복적으로 나오고 바로 다음에 <p>장제목</p>이 나오는 패턴이다.

책의 장 제목은 이와 똑같지 않더라도 패턴이 동일하게 반복된다. 이렇게 패턴이 반복되는 형태라면 정규표현식으로 찾거나, 찾아바꾸는게 가능하다.

위 식을 [찾기]에 넣은 후 찾기를 하면 장 번호를 모두 찾을 수 있다.

'(\d+)'는 하나 이상의 숫자를 의미한다. 그래서 '(\d+)장'을 정규표현식으로 찾으면 '1장, 2장, 3장…10장, 11장' 등 숫자 뒤에 '장'이 붙은 문자를 모두 찾을 수 있다.

앞뒤에 <p></p>태그로 묶인 숫자 뒤에 '장'이 붙은 문자는 장 번호밖에 없으니 위 정규표현식을 이용하면 장 번호만 모두 찾을 수 있게 된다.

찾기로 장 제목이 제대로 찾아진다면 이제 원하는 형태로 바꿀 차례다.

[바꾸기]에 아래 내용을 추가한 후 [모두 바꾸기]를 누른다.

이제 책보기로 본문을 보면 각 장의 시작부분에 Split Marker 표시인 선이 추가되고 장 번호가 <h3> 태그로 묶인 것을 볼 수 있다.

이상한 나라의 앨리스는 모두 12장으로 되어 있는데 정규표현식과 찾아바꾸기로 한번에 각 장의 시작부분에 Split Marker를 추가하고 제목 태그까지 바뀐 것을 볼 수 있다. 20번 이상 반복해야 하는 단순 작업을 정규표현식으로 간단히 끝낸 것이다.

정규표현식을 자세히 익히는건 아주 어렵지만 전자책 편집에 필요한 식은 그리 많지 않다. 몇가지 간단한 식만 기억해도 수백번 반복해야 하는 작업을 한두번으로 줄일 수 있다. 인터넷을 찾아보면 정규표현식에 대한 자세한 설명을 볼 수 있다.

Split at Marker를 이용해 장별로 챕터를 나눴다. 챕터 구분을 명확히 하기 위해 빈 HTML 추가하기를 이용해 파일을 추가 후 속표지, 목차, 판권면(Copy Right)등을 정리해 준다.

Split at Marker로 나눌 때 이런 페이지까지 나눠도 된다. 필자는 1챕터를 Section_0001로, 마지막 챕터를 Section_0012로 파일명을 만들기 위해 그에 맞춰 Split at Marker를 사용했다.

Split at Marker로 장을 나눈 후 생성된 파일 목록

속표지, 목차, 판권면을 정리한 후 파일 목록