내맘대로의 EPUB 제작 가이드

상세 정보 및 다운로드 : https://sigil-ebook.com/2016/03/26/sigil-0-9-5-released/

새로운 기능

Allow user to choose what level of CSS gets used in the “Validate Stylesheets With W3C” tool via user preference (General).

W3C의 Stylesheet 검증을 이용할 때 EPUB2, EPUB3의 CSS 레벨을 선택할 수 있습니다. Sigil은 W3C 웹사이트로 연결해서 Stylesheet의 적합성을 검증할 수 있는 기능이 있습니다. [도구 > W3C로 스타일시트 검증] 메뉴를 선택하면 되는데 지금까지는 선택할 수 있는 옵션이 없었습니다.

EPUB2와 EPUB3를 지원하면서 이 부분에 CSS Level을 선택할 수 있는 설정이 추가됐습니다. 기본은 EPB2 - CSS-Level 1, 2 / EPUB3 - CSS-Level 3으로 EPUB에서 공식 지원하는 CSS레벨에 맞춰져 있습니다.

[편집 > 설정]으로 기본설정 창을 열고 General Settings에서 설정을 할 수 있습니다. 

그 외에는 몇가지 버그가 개선됐습니다.

그리고 추가로...(0.9.3 버전 이후부터)

When you fire up Sigil for the very first time:

- navigate to the new General Preferences and select the default epub version you plan to work with (epub 2 or epub3) so that new empty ebooks start with the correct code.

처음 Sigil을 설치하는 사람들은 [기본 설정]에서 새로 시작할 때 EPUB 2, EPUB3 중 어떤 파일이 기본으로 설정할 것인지 정해야 합니다. EPUB2와 EPUB3는 사용하는 코드가 네임스페이스 같은 설정들이 약간 다르기 때문에 만들고자 하는 전자책에 맞게 EPUB2나 EPUB3 중 올바른 형식으로 시작하도록 합니다.

- if you plan to work with epub3 epubs, you should change your PreserveEntities setting to use ONLY NUMERIC entities. For example use & # 1 6 0 ; for non-breaking spaces and etc.

만약 EPUB3로 파일을 만들고자 한다면 [PreserveEntities]에 반드시 NUMERIC entities를 추가해야 합니다.

PreserveEntities는 Sigil이 지원하는 Reformat HTML이나 Well formed Check 기능이 강제로 코드를 바꾸지 않게 합니다. EPUB2에서는   코드가 공백을 대체하는데 EPUB3에서는 이 코드를 사용할 수 없습니다. 대신 Numeric entities인  를 쓰기 때문에 PreserveEntities를 Numeric으로 추가하라는 의미입니다. 

HTML Name 코드와 Numeric 코드는 여기서 확인하세요 : http://www.ascii.cl/htmlcodes.htm

- We strongly recommend enabling Mend On Open in your settings for best performance with Sigil

Sigil 최상의 성능을 위해 설정을 아래 이미지처럼 Mend On Open으로 수정할 것을 강하게 권장합니다.

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

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 0.9.4 버전이 나왔습니다.

0.9.3에서 EPUB3를 제대로 지원하게 됐는데 이번 버전에서는 0.9.3에서 부족했던 부분을 개선하는데 초점을 맞춘 것 같습니다. 많은 버그 수정이 있었고, 아래처럼 기능 개선도 포함이 되었습니다. 

0.9.3 버전에서 제대로 지원하지 못했던 Nav 파일과 메타데이터 생성/편집/수정 기능이 중점적으로 보강됐습니다. 메타데이터 편집 기능은 UI가 변경됐고, Nav는 NCX 파일 편집과 연결시켜 편의성을 높였네요. 

• Completely redesigned the MetaEditor gui to work with both epub2 and epub3 metadata
  • Extended epub3 metadata is now supported(EPUB3 메타데이터 편집 지원)
  • Added the default metadata language and title for the user
  • Extracted and updated the MarcRelators codes so they can be shared
• The Nav is now a required part of an epub3
  • Sigil will create an empty one upon import if need be(EPUB3 에서 Nav 파일 생성)
  • The Nav TOC can now be generated from Book Headings using the normal CreateTOC tool(Generate TOC로 Nav 목차 생성 : 설명에는 Create로 되어 있지만 Sigil 메뉴에는[차례>Generate TOC로 되어 있어 Sigil 메뉴 명으로 표시함)
  • Added support for Adding/Removing Nav Landmarks
  • Similar to the NCX, Nav documents can not be deleted, split, or merged
• Completely Revamped the BookBrowser interface to support both Guide and Landmark Semantics
  • Created a new Add Semantics Dialog to better handle epub2 and epub3 semantics
  • Both Landmark and Guide Semantics now show up in BookBrowser tooltips
• Completely Revamped how the dockable TableOfContents gui widget is built and updated
  • Allow dockable Table Of Contents to refresh from Nav under epub3, and NCX under epub2

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

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

앞 장에서 표지 이미지를 삽입했다. 하지만 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로 장을 나눈 후 생성된 파일 목록

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