내맘대로의 EPUB 제작 가이드

Content Documents do not use "epub:type" attributes for semantic inflection.

오류 의미

이 메시지는 전자책의 HTML 문서 본문에 epub:type이라는 속성이 사용되지 않았다는 뜻입니다.

쉽게 비유하자면, 책의 내용은 잘 들어가 있지만, 어떤 부분이 **'표지'**인지, 어떤 부분이 **'목차'**인지, 그리고 어디서부터가 진짜 **'본문'**의 시작인지 컴퓨터(전자책 리더기, 스크린 리더 등)에게 정확히 알려주는 **'꼬리표'**가 붙어있지 않다는 의미입니다.

epub:type은 바로 이 '꼬리표' 역할을 하는 속성입니다. 이 꼬리표를 붙여주면 전자책을 읽어주는 프로그램이 책의 구조를 더 잘 이해하게 되어, 시각장애인을 위한 스크린 리더 기능이 향상되고 검색 기능이 정확해지는 등 전자책의 접근성과 기능성이 전반적으로 좋아집니다.

해결 방법

책의 각 구성 요소에 맞는 epub:type 꼬리표(속성)를 해당 HTML 태그에 추가해주면 됩니다. HTML을 전혀 모르시더라도, 전자책 편집 프로그램(예: Sigil)의 코드 보기 기능을 이용해 간단히 수정할 수 있습니다.

1. 책의 주요 구성 요소 파악하기

먼저 내 책이 어떤 부분들로 이루어져 있는지 파악합니다. (예: 표지, 제목 페이지, 목차, 서문, 본문 챕터들, 참고 문헌 등)

2. 올바른 epub:type 꼬리표 찾기

각 구성 요소에 맞는 표준 epub:type 꼬리표(값)들이 정해져 있습니다. 자주 사용하는 것들은 다음과 같습니다.

• cover: 표지 이미지
• titlepage: 제목, 저자, 출판사 정보가 담긴 페이지
• toc: 목차
• preface: 서문, 머리말
• bodymatter: 본문 전체를 감싸는 영역
•  
• chapter: 각 장 (챕터)
• acknowledgments: 감사의 말
• bibliography: 참고 문헌
• footnote: 각주 내용
• page-list: 종이책 페이지 번호 목록

3. HTML 코드에 epub:type 속성 추가하기

각 구성 요소를 감싸고 있는 HTML 태그(주로 <section>이나 <div> 태그)에 epub:type 속성을 추가합니다.

수정 예시 1: 챕터(Chapter) 표시하기

챕터 하나를 감싸고 있는 <section> 태그를 찾아서 다음과 같이 수정합니다.

• 수정 전:
• HTML

  <section>
    <h2>제1장 새로운 시작</h2>
    <p>이야기는 이렇게 시작됩니다...</p>
  </section>
  

• 수정 후:
• HTML

  <section epub:type="chapter">
    <h2>제1장 새로운 시작</h2>
    <p>이야기는 이렇게 시작됩니다...</p>
  </section>
  

수정 예시 2: 목차(Table of Contents) 표시하기

목차를 감싸고 있는 <nav> 태그에 다음과 같이 epub:type 속성을 추가합니다.

• 수정 전:
• HTML

  <nav>
    <h1>목차</h1>
    <ol>
      <li><a href="chapter1.xhtml">제1장</a></li>
      <li><a href="chapter2.xhtml">제2장</a></li>
    </ol>
  </nav>
  

• 수정 후:
• HTML

  <nav epub:type="toc">
    <h1>목차</h1>
    <ol>
      <li><a href="chapter1.xhtml">제1장</a></li>
      <li><a href="chapter2.xhtml">제2장</a></li>
    </ol>
  </nav>
  

이처럼 책의 모든 구조적 요소(서문, 각 챕터, 감사의 말 등)에 해당하는 태그를 찾아 알맞은 epub:type 꼬리표를 붙여주면 오류 메시지가 사라지고, 훨씬 더 품질 좋은 전자책이 됩니다.

Tables should include a "thead" element for accessibility.

표는 접근성을 위해 "thead" 요소를 포함해야 합니다.

오류 해결 방법: 이 오류는 HTML 표(<table>)의 구조를 명확하게 구분하는 <thead> 태그가 빠졌다는 것을 의미합니다.

HTML 표는 내용에 따라 머리글, 본문, 바닥글 세 부분으로 구조를 나눌 수 있습니다. 이렇게 구조를 나누면 컴퓨터(특히 스크린 리더와 같은 보조 기술)가 표의 내용을 더 정확하게 이해하고 사용자에게 전달할 수 있습니다.

• <thead> (Table Head): 표의 머리글 영역을 감싸는 태그입니다. 주로 각 열의 제목(<th>)이 포함된 행(<tr>)을 이 태그로 묶어줍니다.
• <tbody> (Table Body): 표의 본문 영역, 즉 실제 데이터가 포함된 행들을 감싸는 태그입니다.
• <tfoot> (Table Foot): 표의 바닥글 영역으로, 합계나 요약 정보가 포함된 행을 감쌀 때 사용합니다. (선택 사항)

<thead> 태그를 사용해 머리글 영역을 명확히 지정하면, 스크린 리더는 어떤 부분이 제목이고 어떤 부분이 데이터인지를 확실하게 구분할 수 있어 표의 정보를 훨씬 더 쉽게 파악할 수 있게 됩니다.

잘못된 코드 예시

아래 코드는 표의 제목 행(<th>가 있는 행)이 있지만, 이 행을 <thead>로 감싸주지 않아 구조가 불분명하고 오류가 발생합니다.

<table>
  <tr>
    <th>월</th>
    <th>지출</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>100,000원</td>
  </tr>
  <tr>
    <td>2월</td>
    <td>120,000원</td>
  </tr>
</table>

올바른 코드 예시

오류를 해결하려면 제목 행은 <thead>로 감싸고, 데이터 행들은 <tbody>로 감싸주어야 합니다. 이렇게 하면 표의 구조가 논리적이고 명확해집니다.

<table>
  <thead>
    <tr>
      <th>월</th>
      <th>지출</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1월</td>
      <td>100,000원</td>
    </tr>
    <tr>
      <td>2월</td>
      <td>120,000원</td>
    </tr>
  </tbody>
</table>

이처럼 <thead>와 <tbody>를 사용해 표의 구조를 명확히 구분하는 것은 웹 접근성을 준수하는 데 매우 중요합니다.

Table heading cells should be identified by "th" elements for accessibility.

접근성을 위해 표 머리글 셀은 "th" 요소로 식별해야 합니다. 오류 해결 방법: 이 오류는 HTML에서 표(table)를 만들 때, 표의 제목(머리글) 부분에 <th> 태그 대신 <td> 태그를 사용했다는 의미입니다. 🧑‍💻

HTML 표는 주로 두 가지 종류의 셀 태그로 구성됩니다.

• <th> (Table Header): 표의 제목 셀을 의미합니다. 예를 들어 '이름', '나이', '도시'와 같이 각 열의 내용이 무엇인지 알려주는 역할을 합니다.
• <td> (Table Data): 표의 실제 데이터가 들어가는 일반 셀을 의미합니다.

스크린 리더(화면을 읽어주는 프로그램)와 같은 보조 기술은 <th> 태그를 사용해 표의 구조를 파악합니다. 사용자가 특정 데이터 셀(<td>)로 이동하면, 스크린 리더는 그 셀이 속한 열과 행의 제목(<th>)을 함께 읽어주어 데이터의 의미를 정확하게 파악할 수 있도록 돕습니다.

만약 제목 셀을 <th>가 아닌 <td>로 만들면, 스크린 리더 사용자는 데이터의 의미를 파악하기 어려워 접근성이 크게 떨어집니다.

잘못된 코드 예시

아래 코드는 표의 제목인 '책 제목'과 '저자'를 일반 데이터 셀인 <td>로 작성하여 오류가 발생합니다.

<table>
  <tr>
    <td>책 제목</td>
    <td>저자</td>
  </tr>
  <tr>
    <td>어린 왕자</td>
    <td>생텍쥐페리</td>
  </tr>
</table>

올바른 코드 예시

표의 제목 역할을 하는 첫 번째 행의 <td> 태그를 <th> 태그로 수정하면 오류가 해결되고 접근성이 향상됩니다.

<table>
  <tr>
    <th>책 제목</th>
    <th>저자</th>
  </tr>
  <tr>
    <td>어린 왕자</td>
    <td>생텍쥐페리</td>
  </tr>
</table>

이렇게 수정하면 스크린 리더는 '어린 왕자' 셀을 읽을 때 "책 제목: 어린 왕자"라고 알려줄 수 있어, 사용자가 표의 내용을 훨씬 쉽게 이해할 수 있습니다.

Html "a" element must have text.

HTML "a" 요소에는 텍스트가 있어야 합니다.

오류 해결 방법 : 이 오류는 웹페이지에서 다른 페이지로 연결되는 링크를 만드는 <a> 태그 안에 클릭할 수 있는 글자(텍스트)가 없다는 의미입니다.

<a> 태그는 사용자가 클릭해서 다른 곳으로 이동할 수 있는 하이퍼링크를 만듭니다. 하지만 <a> 태그와 </a> 태그 사이에 아무 내용이 없으면, 화면에 링크가 보이지 않아 사용자가 클릭할 수 없습니다.

잘못된 코드 예시

<a href="page2.xhtml"></a>

위와 같이 코드가 작성되면 <a> 태그는 아무런 텍스트를 가지고 있지 않기 때문에 화면에 보이지 않고, 따라서 사용자가 링크를 클릭하여 page2.xhtml 파일로 이동할 수 없습니다.

올바른 코드 예시

문제를 해결하려면 <a> 태그와 </a> 태그 사이에 사용자가 보고 클릭할 수 있는 설명 텍스트를 넣어주어야 합니다.

<a href="page2.xhtml">다음 페이지로 이동하기</a>

이렇게 수정하면, 화면에 '다음 페이지로 이동하기'라는 글자가 나타나고 사용자는 이 글자를 클릭해서 링크로 이동할 수 있습니다.

이미지를 링크로 사용하는 경우

만약 텍스트 대신 이미지를 클릭해서 링크를 이동하게 만들고 싶다면, <a> 태그 안에 <img> 태그를 넣고, <img> 태그에 alt 속성을 사용해 이미지에 대한 설명을 반드시 추가해야 합니다. 이 alt 속성의 설명이 링크의 텍스트 역할을 대신하게 됩니다.

<a href="cart.xhtml">
  <img src="images/cart_icon.png" alt="장바구니로 이동">
</a>

위 코드에서는 alt 속성의 '장바구니로 이동'이라는 텍스트가 링크의 목적을 설명해 주는 역할을 합니다.

Sigil 2.6.2 업데이트 파일이 등록됐습니다.

이번 업데이트는 2.6.0 버전의 버그 수정 중심이고 편집자가 느낄 수 있는 변화는 없습니다.

SVG 이미지 편집 관련 기능이 개선되었습니다.

https://github.com/Sigil-Ebook/Sigil/releases