내맘대로의 EPUB 제작 가이드

Rule %1$s is under review and its severity may change in a future release. See the discussion at %2$s

오류 의미

이 메시지는 사용자의 전자책 파일에 오류가 있다는 뜻이 아닙니다.

이것은 EPUBCheck라는 검사 프로그램 개발자들이 사용자에게 보내는 **'정보성 안내 메시지'**입니다.

쉽게 말해, "당신의 파일에서 발견된 특정 규칙(%1$s 부분)은 저희 개발자들이 현재 재검토하고 있습니다. 그래서 다음 버전의 EPUBCheck 프로그램에서는 이 규칙의 심각도(단순 경고인지, 심각한 오류인지)가 변경될 수 있습니다. 더 자세한 논의 내용이 궁금하시면 여기 주소(%2$s 부분)를 방문해주세요." 라는 의미입니다.

보통 이 메시지는 실제 오류나 경고 메시지 바로 아래에 함께 표시됩니다.

핵심 요약:

• 이 줄 자체는 오류가 아닙니다.
• 함께 표시된 다른 오류/경고 규칙이 현재 개발자들 사이에서 논의 중이라는 것을 알려주는 공지사항입니다.

해결 방법

이 메시지에 대해서는 아무것도 수정할 필요가 없습니다.

이 메시지는 무시하시고, 이 메시지와 함께 나온 실제 오류 또는 경고 메시지에 집중하여 그 문제를 해결해야 합니다.

예시:

만약 EPUBCheck 검사 결과가 아래와 같이 나왔다고 가정해 보겠습니다.

1. 경고(CSS-008): style.css 파일에서 접두사가 없는 CSS 속성을 사용해야 합니다.
2. 정보(INFO_001): 'CSS-008' 규칙은 현재 검토 중이며...

이 경우, 우리가 신경 써야 할 것은 2번 정보 메시지가 아니라 1번 경고 메시지입니다. style.css 파일의 문제를 해결하면, 1번 경고 메시지가 사라지면서 2번 정보 메시지도 자연스럽게 함께 사라지게 됩니다.

따라서 이 메시지가 보이면, '아, 내가 해결해야 할 저 오류가 나중에 기준이 바뀔 수도 있구나' 정도로만 이해하고, 함께 나온 실제 오류를 해결하는 데에만 집중하시면 됩니다.

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은 opf 파일을 자동으로 관리합니다. 그래서 opf 파일을 수정 할 일은 거의 없습니다.

하지만 고급 편집자는 opf 파일의 구조를 정확히 알고 있습니다.

opf 파일이 EPUB이다 라고 해도 될 정도로 중요한 파일이기 때문이지요. 

EPUBCheck를 실행해 보면 가끔식 opf 파일 오류가 표시됩니다.

그 중에 속성이 선언되지 않았다는 오류가 있습니다.

이런 오류지요.

error(opf-014): "scripted" 속성은 opf 파일에 선언되어야합니다.

error(opf-014): "***" 속성은 opf 파일에 선언되어야합니다.

이 오류는 특정 파일의 속성(properties)을 제대로 선언하지 않았을 때 발생합니다.

script 연결 기능으로 스크립트 파일을 연결하면, Sigil은 알아서 scripted 속성을 opf 파일에 선언합니다.

하지만 스크립트 작업을 하다 보면 직접 삽입 할 때도 많이 있습니다.

편집자가 직접 스크립트 링크를 연결했다면 Sigil은 자동으로 opf 파일에 선언을 할 수 없습니다.

이럴 때 opf 파일을 열어 속성을 지정해 줘야 합니다.

scripted 속성 외에도 mathml, svg, nav, remote-resource 등 다양한 속성이 있습니다.

자세한 내용은 epub 기술 문서를 참고하세요.