내맘대로의 EPUB 제작 가이드

Table elements should include a caption element.

이 규칙은 표(table)에 대한 접근성과 가독성을 높이는 데 매우 중요합니다.

<caption> 요소는 표의 '공식적인 제목' 역할을 합니다. 📚

## 중요한 이유

화면 낭독기(Screen Reader)와 같은 보조 기술은 표를 인식했을 때 이 <caption>에 있는 내용을 가장 먼저 읽어줍니다. 이 제목을 통해 사용자는 표의 전체 내용을 살펴보기 전에 무엇에 대한 정보인지 미리 파악할 수 있습니다.

## 해결 방법

해결 방법은 간단합니다. <table> 태그 바로 아래, 첫 번째 <tr> 태그 위에 <caption> 요소를 추가하고 그 안에 표의 제목을 적으면 됩니다.

올바른 구조:

<table>
  <caption>월별 판매 보고서</caption>
  <tr>
    <th>월</th>
    <th>수량</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>150</td>
  </tr>
</table>

이렇게 하면 모든 사용자가 표의 목적을 더 명확하게 이해할 수 있습니다.

SVG hyperlink has no accessible name

이 오류는 SVG(이미지의 한 종류) 안에 클릭 가능한 링크가 있지만, 그 링크가 무엇에 대한 것인지 알려주는 텍스트 설명이 없다는 의미입니다. 

이는 접근성에 있어 중요한 문제입니다. 시각적으로는 링크가 걸린 도형이나 아이콘을 보고 클릭할 수 있지만, 시각 장애가 있는 사용자가 이용하는 화면 낭독기(Screen Reader)는 이 링크를 발견해도 무엇이라고 읽어줘야 할지 알 수 없습니다. '라벨 없는 버튼'과 같은 상황입니다.

## 해결 방법: <title> 요소 추가하기

이 문제를 해결하는 가장 간단한 방법은 링크를 만드는 <a> 태그 안에 <title> 요소를 추가하여 링크에 대한 설명을 제공하는 것입니다.

예시

아래는 파란색 원 전체에 링크를 건 SVG 코드입니다.

• 오류 예시 (수정 전):이 코드에서 화면 낭독기는 클릭 가능한 영역이 있다는 것은 알지만, 그 목적지는 알려줄 수 없습니다.
• XML

   

  <svg width="100" height="100" viewBox="0 0 100 100">
    <a href="https://example.com">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
    </a>
  </svg>
  

• 수정 예시 (수정 후): ✅이제 <a> 태그 안에 <title> 요소가 추가되었습니다. 화면 낭독기는 이 링크를 만나면 **"Example.com 홈페이지로 이동"**이라고 명확하게 읽어주어 사용자가 링크의 목적을 정확히 알 수 있게 됩니다.
• XML

   

  <svg width="100" height="100" viewBox="0 0 100 100">
    <a href="https://example.com">
      <title>Example.com 홈페이지로 이동</title>
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
    </a>
  </svg>
  

MathML should either have an "alttext" attribute or "annotation-xml" child element.

이 오류는 책에 포함된 수학 수식(MathML)에 대한 설명이 빠져있다는 의미입니다. ♿

수식은 시각적으로는 보이지만, 화면 낭독기(Screen Reader)와 같은 보조 기술은 수식을 이미지처럼 인식하여 내용을 읽어줄 수 없습니다. 따라서 시각 장애가 있는 독자를 위해 수식이 무엇을 의미하는지 알려주는 대체 텍스트를 반드시 제공해야 합니다.

해결 방법은 오류 메시지에 나온 대로 두 가지가 있습니다.

## 해결 방법 1: alttext 속성 사용 (쉬운 방법)

가장 간단하고 일반적인 해결책은 <math> 태그에 직접 alttext 속성을 추가하여 수식에 대한 간단한 설명을 제공하는 것입니다.

• 오류 예시 (수정 전):
• XML

   

  <math>
    <mrow>
      <mi>a</mi>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>b</mi>
      <mi>x</mi>
      <mo>+</mo>
      <mi>c</mi>
    </mrow>
  </math>
  

• 수정 예시 (수정 후): ✅
• XML

   

  <math alttext="ax 제곱 더하기 bx 더하기 c">
    <mrow>
      <mi>a</mi>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>b</mi>
      <mi>x</mi>
      <mo>+</mo>
      <mi>c</mi>
    </mrow>
  </math>
  

## 해결 방법 2: annotation-xml 요소 사용 (고급 방법)

더 자세하거나 구조적인 설명이 필요할 때 사용하는 방법입니다. 기존의 <math> 태그를 <semantics> 태그로 감싸고, 그 안에 <annotation-xml> 요소를 추가하여 설명을 넣습니다.

• 수정 예시: ✅
• XML

   

  <math>
    <semantics>
      <mrow>
        <mi>E</mi>
        <mo>=</mo>
        <mi>m</mi>
        <msup>
          <mi>c</mi>
          <mn>2</mn>
        </msup>
      </mrow>
      <annotation-xml encoding="application/mathml-alternative">
        <mrow>
          <mtext>에너지(E)는 질량(m) 곱하기 빛의 속도(c)의 제곱과 같다.</mtext>
        </mrow>
      </annotation-xml>
    </semantics>
  </math>
  

⭐ 추천: 대부분의 경우, alttext 속성을 사용하는 첫 번째 방법으로 충분히 문제를 해결할 수 있고 훨씬 간편합니다.

전자책에서 단어나 문장에 밑줄을 긋는 방법은 여러가지가 있습니다.

하지만 밑줄을 긋기 전어, 어떤 밑줄을 그을 것인지부터 정확히 알아야 합니다.

많은 사람들이, 밑줄을 긋고 싶다고 얘기하지 어떤 밑줄을 긋고 시픈지는 얘기하지 않아요.

1. 그냥 밑줄

아무 설명 없이 '밑줄을 그리고 싶다'고 한다면, text-decoration을 사용하세요.

text-decoration은 밑줄을 그리는 속성입니다.

색상, 두께, 모양 등을 지정 할 수 있습니다.

2.  밑줄의 모양을 보다 유연하게 편집하고 싶다면 border-bottom을 사용하세요.

text-decoration은 한계가 있습니다. 글자와 여백 조절이 어렵고, 인라인 스타일의 밑줄만 그릴 수 있습니다.

전자책을 만들다 보면 가장 먼저 두 가지 형태의 밑줄을 고민하게 됩니다.

인라인 스타일의 밑줄은 줄이 바뀔 때 같이 줄이 바뀝니다.

일라인 스타일의 밑줄은

줄이 바뀔 때 같이 줄이 바뀝니다.

이러게 문장이나 문단의 줄이 바뀔 때 밑줄도 같이 행갈이를 하고 싶다면 인라인 속성의 태그로 밑줄을 그리면 됩니다.

본문 내에 특정 문장의 밑줄을 그을 때 적합합니다.

<p><span class="txt_underline">인라인 스타일의 밑줄은 줄이 바뀔 때 같이 줄이 바뀝니다.</span></p>

.txt_underline {

    border-bottom : 1px solid #000000;

}

블럭 스타일은 줄이 바뀌어도 블럭 하단에만 줄이 표시됩니다.

블럭 스타일은 줄이 바뀌어도

블럭 하단에만 줄이 표시됩니다.

이렇게 문장이 줄을 바꿔도 아래에만 밑줄을 그리고 싶다면 블럭 스타일의 밑줄을 사용합니다.

주로, 제목 하단에 밑줄을 그릴 때 사용합니다.

<p class="txt_underline">블럭 스타일은 줄이 바뀌어도 블럭 하단에만 줄이 표시됩니다.</p>

.txt_underline {

    border-bottom : 1px solid #000000;

}

3. 물결무늬나 연필, 크레파스로 그은 것 같은 밑줄은 background-image를 사용하세요.

이런 밑줄은 background-image를 사용하면 쉽게 그릴 수 있습니다.

형광펜 스타일도 있습니다. 이 역시 background-image를 이용해 그릴 수 있습니다.

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 기술 문서를 참고하세요.