내맘대로의 EPUB 제작 가이드

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

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로 장을 나눈 후 생성된 파일 목록

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

Sigil 0.9.3 버전이 공개됐습니다.

이번 업데이트는 EPUB 2와 호환이 되는 'EPUB 3 기능 강화'에 초점이 맞춰져 있습니다.

greatly improves Sigil’s ability to work with and generate epub3 ebooks without losing any of its epub2 capabilities

이번 업데이트에 새로 추가된 기능을 살펴볼까요?

1. 새 문서 만들때 EPUB 2 / EPUB 3 포멧 선택

   Add General Settings Preference for setting default (epub 2 or 3) for new documents

[편집 > 설정] 혹은 F5를 눌러 '기본 설정' 메뉴를 들어가면 EPUB 2, EPUB 3 포멧을 선택할 수 있습니다.

EPUB 3를 선택하면 EPUB 2와 호환이 되는 EPUB 3 포멧으로 파일이 생성됩니다.

EPUB 3를 선택하면 Package 버전이 3.0으로 바뀌고 메타데이터에 opf:role 속성이 추가되지 않습니다. 

그리고 HTML에서 공백문자가 &nbsp; 대신 &#160;로 추가됩니다. 

하지만 아직 완벽하지는 않습니다. 메타데이터에 opf:role 속성이 추가되지 않는 대신, 메타데이터 편집기를 사용할 수 없습니다. 다음 업데이트에 기능이 개선되기를 기대해 봅니다.

2. EPUB 3 도구 추가 

Add an “Epub3 Tools” submenu to the Tools menu with 3 new epub3 specific tools:

[도구] 메뉴에 EPUB 3 Tools라는 메뉴가 새로 생겼습니다. 이 메뉴에는 아래 3가지 기능이 추가됐습니다. 

Update Manifest Properties

Manifest에 EPUB 3에 맞게 Properities를 추가합니다. properties="cover-image" 같은 EPUB 2에서는 필요 없었던 Properities 속성을 자동으로 추가해 주는 기능입니다.

예를 들어 EPUB 2에서 표지 이미지를 설정하면 아래처럼 메타데이터에 표지라는 정보가 추가됩니다.

<meta name="cover" content="사랑도_멋이다_최종_-_1권.jpg"/>

...

<item id="cover" href="Images/cover.jpg" media-type="image/jpeg"/>

하지만 EPUB 3에서는 Manifest에 properties로 표지 이미지라는 것을 표시해 줍니다. 이미지, 미디어파일, 스크립트, svg 등 파일 종류에 따라 properties 속성이 부여되는데 이를 자동으로 해줍니다.

<item id="cover" href="Images/cover.jpg" media-type="image/jpeg" properties="cover-image"/>

Generate Nav From NCX

EPUB 3에 새로 정의된 html 방식의 Nav 목차파일을 자동으로 생성해 줍니다. Nav 목차를 생성하면 NCX를 바탕으로 HTML 형태의 목차 파일을 만들어줍니다. 

Generate NCX From Nav

이 기능은 Nav에서 NCX를 생성해 주는 기능입니다. Nav from NCX의 반대 과정입니다.

3. 3개의 Plugin 도구모음 버튼 추가

Add 3 User-assignable ToolBar Buttons for up to 3 plugins – users can now an assign key accelerators to them

도구모음에 플러그인 버튼 3개가 추가됐습니다. 

사용을 하려면 플러그인 설정을 해야합니다.

[기본설정 > Plugins]에 들어가 아래쪽에 있는 Assign as Plugin 1, 2, 3 을 설정해 주면 왼쪽부터 1, 2, 3 순서대로 플러그인을 실행할 수 있습니다. 

이 외에도 MathML을 미리보기에서 확인할 수 있게 됐고, SMIL을 인식하는 등 EPUB 3와 관련한 다양한 기능들이 개선됐습니다.