내맘대로의 EPUB 제작 가이드

 Add Cover 기능은 표지 이미지 파일을 선택해서 HTML 형식의 표지를 만들어 주는 기능이다. 많은 편집자들이 표지 이미지를 삽입할 때 스타일을 적용하지 않는다. 그래서 뷰어에서 이미지가 한페이지에 나오지 않거나 왼쪽으로 치우치고, 들여쓰기가 적용되는 등 의 문제가 생긴다.

Add Cover 기능을 이용하면 Sigil에 설정돼 있는 표지 탬플릿이으로 표지 페이지가 삽입되어표지를 뷰어의 가운데 정렬시키고 화면에 꽉 차도록 자동으로 크기가 조절된다.

Sigil에서 기본으로 제공하는 표지 탬플릿은 SVG 이미지 태그를 사용한다. 그래서 SVG를 지원하지 않는 뷰어에서는 문제가 발생할 수 있다.  EPUB3를 지원하는 뷰어에서는 문제가 없지만 국내 유통사 중 EPUB3를 지원하거나 SVG를 지원하는 뷰어를 제공하는 곳은 많지 않다.

Sigil은 사용자가 직접 표지 탬플릿을 추가할 수 있는 기능을 제공한다. 

Sigil의 설정파일이 저장된 폴더에 cover.xhtml이라는 파일을 추가하면 Sigil의 기본 표지 탬플릿이 아닌 사용자가 추가한 cover.xhtml을 탬플릿으로 사용한다. 설정 폴더는 [편집 > 설정]으로 설정 창을 연 후 왼쪽 하단에 있는 [Open Preferences Location] 버튼을 눌러 쉽게 이동할 수 있다.

• 표지 탬플릿 만들기
• 설정 폴더에 cover.xhtml이라는 파일을 추가한다
  * 편집자가 자주 사용하는 표지 파일이면 된다
• 표지 파일을 메모장이나 텍스트 에디터로 열어 표지 파일 윛, 파일 크기 등을 수정한다.

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cover</title>
</head>

<body>
  <div style="text-align: center; padding: 0pt; margin: 0pt;">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%"
    preserveAspectRatio="xMidYMid meet" version="1.1"
    viewBox="0 0 SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT" width="100%"
    xmlns:xlink="http://www.w3.org/1999/xlink">
      <image width="SGC_IMAGE_WIDTH" height="SGC_IMAGE_HEIGHT"
      xlink:href="SGC_IMAGE_FILENAME"/>
    </svg>
  </div>
</body>
</html>

* SGC_IMAGE_FILENAME : 표지 파일 경로가 들어가야 하는 곳에 그대로 삽입한다.

* SGC_IMAGE_WIDTH : 표지의 너비를 설정하는 곳에 그대로 삽입한다.(옵션)
* SGC_IMAGE_HEIGHT : 표지의 높이를 설정하는 곳에 그대로 삽입한다.(옵션)
* 표지 탬플릿 예
  아래 탬플릿은 표지 이미지를 상하좌우 중앙에 놓이게 만들어준다. Sigil 탬플릿과 달리 style.css 파일에 스타일을 지정하고 편집자의 탬플릿에는 스타일이 적용된 코드를 삽입해서 만들었다.

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xml="http://www.w3.org/XML/1998/namespace">

<head>

  <title></title>

  <link href="../Styles/style.css" rel="stylesheet" type="text/css" />

<style type="text/css">

html, body { height:100%; margin: 0; padding: 0; }

</style>

</head>

<body>

  <div class="cover"><img alt="표지 중앙정렬 샘플" class="cover" src="SGC_IMAGE_FILENAME" /></div>

</body>

</html>

style.css
 

.cover {

width: 100%;

height : 100%;

text-indent : 0;

text-align : center;

display: box;

box-orient: horizontal;

box-pack: center;

box-align: center;

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

-webkit-box-align: center;

display: -moz-box;

-moz-box-orient: horizontal;

-moz-box-pack: center;

-moz-box-align: center;

}

img.cover {

width : 100%;

height : auto;

}

• 파일을 저장 후 Sigil의 Add Cover 기능을 이용하면 편집자가 만든 탬플릿으로 표지가 들어간다.