표지 이미지 삽입

Sigil 표지 이미지 삽입 기능이 제공된다. 준비된 표지 이미지가 있다면 사이즈에 관계 없이 사용할 있다. 참고로, 국내 유통사는 표지 이미지로 JPG 이미지 포멧을 권장하는 곳이 많다. 국내 유통을 목적으로 제작한다면 JPG 포멧의 표지를 준비하는게 좋다.

 

표지 이미지의 크기는 정해진 규칙은 없으나 가로(짧은면) 길이를 기준으로 1024 픽셀, 300DPI 이상을 사용하길 권한다. EPUB 3인치보다 작은 화면부터 UHD TV까지 사용이 가능하고, 최근에는 스마트폰도 4K(UHD, 2160*4096 해상도) 지원하고 있다. 고화질 화면에서 600*800 픽셀과 낮은 DPI 이미지를 사용하면 화면을 가득 채울 경우 이미지가 깨져보일 있다.

 

표지 이미지를 삽입하려면 [도구 > Add Cover] 메뉴를 이용한다.


표지 이미지가 파일 안에 포함돼 있다면 이미지 목록에서 선택할 있다. 이미지를 불러오기 전이라면 [Other Files] 버튼을 눌러 컴퓨터 있는 이미지를 불러올 있다.



이미지 파일을 선택해 표지 이미지를 만들면 [ 찾아보기] 창에 cover.xhtml이라는 파일이 제일 위쪽에 만들어진다. [ 찾아보기]에서 보이는 xhtml 파일의 순서는 책을 열었을 페이지가 넘어가는 순서와 같기 때문에 표지 이미지는 항상 제일 위쪽에 위치한다.

그리고 Images 폴더에는 선택한 표지 이미지가 추가된다. 만약 표지 이미지 파일명이 영문과 숫자로 되어있지 않다면 수정해 줘야 한다. 이미지를 선택해 파일명을 수정하면 cover.xhtml 있는 파일명도 자동으로 수정된다.

EPUB 다양한 기기에서 사용하기 때문에 기기에 따라 한글이나 공백, 특수문자가 들어간 파일명은 오류가 생길 있다. 이미지 뿐만 아니라 모든 파일은 공백이 없는 영문과 숫자로 파일명을 만드는게 좋다.

 

Sigil에서 제공하는 기본 표지 이미지 삽입 코드는 SVG 태그를 사용한다.


  <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>

Sigil의 기본 표지 이미지 코드



국내 뷰어 중에 SVG 지원하지 않아 오류가 있어 국내 유통을 목적으로 한다면 코드를 수정해 주는 것이 좋다. 코드 수정은 [1. Sigil 주요 기능] Add cover 항목을 참고하기 바란다.


<?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>

수정한 표지 이미지 코드


수정한 표지 이미지 코드를 사용했다면 삽입한 표지 크기가 화면에 맞게 조정되지 않았을 것이다. 아직 표지 이미지 스타일을 적용하지 않은 상태이니 그냥 지나간다.

표지를 삽입했다면 저장을 한다.

'Sigil 사용 설명서 > Sigil로 전자책 제작하기' 카테고리의 다른 글

스타일시트 추가 및 연결  (0) 2016.03.03
장 나누기  (0) 2016.02.22
표지 이미지 삽입  (0) 2015.12.24
책 정보(메타데이터) 입력  (0) 2015.12.24
EPUB으로 저장  (0) 2015.09.28
Sigil로 파일 열기  (0) 2015.09.24

설정

트랙백

댓글


티스토리 툴바