전자책 표지와 목차 등록 방법 - Sigil에서 쉽게 설정하기

전자책을 만들 때, '표지'와 '목차' 등록은 매우 중요합니다.

Sigil을 사용하면 이 두 가지를 쉽고 빠르게 처리할 수 있어요.

이 글에서는 Sigil에서 표지와 목차를

어떻게 등록하는지에 대해 한 번에 설명할게요!

1. 표지 등록하기 (cover.xhtml)

경로: 상단[도구] > 표지추가 > 생성된 cover.xhtml 수정

전자책 표지는 독자에게 첫 인상을 주는 중요한 부분이에요.

Sigil에서 표지 이미지를 등록하고 제목, 저자명 등을 넣는 방법을 알려드릴게요.

[입력] 표지 코드 예시

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:epub="http://www.idpf.org/2007/ops"
      xml:lang="ko" lang="ko">
  <head>
    <title>[입력] 제목</title> <!-- [입력] 제목을 원하는 제목으로 바꾸세요 -->
    <style>
      body.cover-page {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
        position: relative;
        font-family: "Noto Sans KR", sans-serif;
      }
      .cover-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .text-block {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.4);
        padding: 16px 30px;
        border-radius: 12px;
        color: #fff;
        text-align: center;
        width: 90%;
        max-width: 600px;
        line-height: 1.5;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
      }
      .text-block h1 {
        font-size: 2em;
        margin: 0.2em 0;
      }
      .text-block h2 {
        font-size: 1.1em;
        font-weight: normal;
        margin: 0.2em 0;
      }
      .text-block h3 {
        font-size: 1em;
        font-weight: normal;
        margin-top: 0.4em;
        color: #ddd;
      }
    </style>
  </head>
  <body class="cover-page">
    <img class="cover-bg" src="../Images/gloria_cover1.png" alt="표지 이미지"/> <!-- [입력] 여기에 실제 표지 이미지 경로 넣기 -->
    <div class="text-block">
      <h1>[입력] 제목</h1> <!-- 제목 입력 (예: "마법의 하루") -->
      <h2>[입력] 부제목</h2> <!-- 부제목 입력 (예: "A Magical Day") -->
      <h3>글 · 그림 [입력] </h3> <!-- 저자명 입력 (예: "[입력]") -->
    </div>
  </body>
</html>

2. 목차 등록하기 (nav.xhtml)

nav.xhtml는 동화책을 만들기 시작하면

왼쪽 사이드바의 책탐색기 Text에 자동으로 만들어져요.

전자책에서 목차는 독자가 책을 읽을 때

중요한 역할을 합니다.

[입력] 목차 코드 예시

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:epub="http://www.idpf.org/2007/ops"
      xml:lang="ko" lang="ko">
  <head>
    <title>차례</title>
    <style>
      body {
        font-family: "Noto Sans KR", sans-serif;
        background-color: #fff;
        color: #333;
        padding: 30px;
        line-height: 1.8;
      }
      h1 {
        text-align: center;
        font-size: 1.8em;
        margin-bottom: 1em;
        color: #444;
      }
      ol {
        list-style-type: decimal;
        list-style-position: inside;
        padding-left: 0;
      }
      li {
        margin-bottom: 0.5em;
        font-size: 1.05em;
        text-indent: -1.2em;
        padding-left: 1.2em;
      }
      a {
        text-decoration: none;
        color: #2a4d9b;
      }
      a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <nav epub:type="toc" id="toc" role="doc-toc">
      <h1>차례</h1>
      <ol>
        <li><a href="Text/Section0001.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0002.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0003.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0004.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0005.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0006.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0007.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0008.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0009.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0010.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0011.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0012.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0013.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0014.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0015.xhtml">[제목입력]</a></li>
        <li><a href="Text/Section0016.xhtml">[제목입력]</a></li>
      </ol>
    </nav>
  </body>
</html>

각 <a href="Text/Section000X.xhtml"> 항목 안에 목차 제목을 넣으세요.
각 챕터(Section0001, Section0002 등)에 맞는 링크와 제목을 추가해야 합니다.
href 링크 안의 Text/Section000X.xhtml는 자신의 EPUB 구조에 맞는 경로로 수정해야 해요.
목차 항목에 숫자가 자동으로 붙을 수 있도록 <ol>을 사용했습니다.
각 챕터를 <h1>, <h2>로 구분하여 목차에 반영하고, <ol>은 자동으로 번호를 매깁니다.
목차 항목을 클릭하면 해당 챕터로 바로 이동할 수 있어요.

최종 점검 포인트

체크리스트	확인
표지 이미지 등록 후 cover.xhtml 생성됐나요?	✅
content.opf에 cover 메타데이터 자동 추가됐나요?	✅
목차(nav.xhtml)에 <nav epub:type="toc"> 구조 적용됐나요?	✅
목차 항목 텍스트에 번호가 중복되지 않도록 했나요?	✅
전체 EPUB 저장 후 EPUBCheck에서 통과되나요?	✅

마무리

전자책은 만들고 싶은데...

html도 모르겠고, 코딩도 모르겠다고 걱정마세요.

전자책을 제작할 때, 각 장의 제목이 정해지면

chatgpt에게 [sigil에 들어갈 목차html] 만들어 달라고 하세요

이제 표지와 목차를 등록하고, EPUB을 저장한 후,

각 전자책 리더기에서 정상적으로 목차와 표지가 표시되는지 확인해보세요.

'전자책 소책자 출판' 카테고리의 다른 글

EPUB 전자책, 부크크용 PDF로 변환하는 가장 쉬운 방법 (0)	2025.05.19
전자책 뷰어 추천｜Thorium Reader, 이거 하나면 끝나요 (0)	2025.05.19
전자책 출간할 때, 책의 양식은 어떻게 해야 할까? (0)	2025.05.18
나도 구글폼 하나 만들어볼까? (0)	2025.05.17
[동화책] AI와 함께 만드는 삽화 이미지｜시각 연속성 체크 & 자산 고정 가이드 (0)	2025.05.10