전자책 주석 처리 방법(팝업 + 링크)

주석처리 sample.epub

전자책에 주석을 삽입하는 방법입니다.

전자책이 종이책보다 편리해야 하는 기능 중 하나가 주석입니다. 그런데 지금까지는 전자책으로 주석 보는게 더 불편했었습니다. 주석을 장, 혹은 책의 제일 마지막 부분에 몰아 넣어 책을 보면서 주석을 보기 힘들게 만들거나, 본문 중간에 쌩뚱맞게 주석이 들어가기도 하고, 조금 편하게 신경을 쓰면 링크를 걸었습니다.

최근에는 유통사들이 이런 불편을 줄이고자 '팝업 주석' 기능을 도입했습니다. 교보eBook, 리디북스, 알라딘 eBook에서 팝업주석이 지원됩니다.

교보문고 주석리디북스 주석알라딘 주석

* 왼쪽부터 교보eBook, 리디북스, 알라딘 eBook의 팝업 주석

그런데 각 업체의 제작가이드를 보면 서로 제각각이라 유통사별로 전자책을 다시만들어야하나 하고 생각하시는 분들이 많더라구요. 그리고 팝업주석을 지원하지 않는 뷰어용도 별도로 제작해야 한다고 생각하는 분들이 계시네요.

주석을 처리하는 방식이 유통사별로 조금씩 달라 100% 호환되게 만들 수는 없지만 많은 뷰어에서 주석이 제대로 보이도록 만들 수는 있습니다. 아래에 설명하는 방식은 교보eBook, 리디북스, 알라딘 eBook에서 팝업 주석이 표시되고 예스24 뷰어에서는 링크로 주석을 확인할 수 있습니다. 칼리브레에서도 잘 적용됩니다.

□ 전자책 주석 표현 방법

1. 주석을 표현할 때 주의해야 하는 사항.

주석은 본문 내용의 일부를 터치했을 때 표시됩니다. 그런데 터치 영역이 너무 작다면 주석을 터치하려다 페이지가 넘어가는 불편이 생길 수 있습니다. 뷰어별로 설정이 다르기 때문에 터치 영역을 넓게 잡아주는게 좋습니다. 

1) 처럼 주석 번호에 링크를 걸지 말고, 단어에 링크를 걸어주세요.

일부 뷰어는 서로 다른 파일에 있는 주석도 표현되지만 일부 뷰어는 같은 파일 안에 있는 주석만 표현이 됩니다. 유통하려는 뷰어를 확인하고 작업하세요. 같은 파일 안에 주석 설명을 넣으면 모든 뷰어에서 문제가 없고, 다른 파일에 주석 설명을 담으면 일부 뷰어에서 문제가 됩니다.

2. 주석 추가 코드

  <p><a epub:type="noteref" href="#note01" id="anno01">불필 때¹⁾</a> <a epub:type="noteref" href="#note02" id="anno02">끈적나긋한²⁾</a> <a epub:type="noteref" href="#note03" id="anno03">토브³⁾</a>들이</p>

.

.

.

<blockquote>

<aside epub:type="footnote" id="note01">

<p><a href="#anno01">1　불필 때: 저녁을 위해 불을 지필 때.</a></p>

</aside>

<aside epub:type="footnote" id="note02">

<p><a href="#anno02">2　끈적나긋한: ‘끈적끈적한’과 ‘나긋나긋한’이 합쳐진 합성어.</a></p>

</aside>

.

.

.

</blockquote>

2.1 빨간 글자는 팝업 주석을 위한 코드입니다.

팝업주석이 지원되는 뷰어에서는 빨간 글자 부분만 있으면 됩니다. 

팝업 주석의 원리는 간단합니다. a 태그로 링크를 걸고, 링크가 걸린 부분을 팝업으로 보여주는 형식입니다. 그래서 주석 설명이 필요한 단어에 주석 설명을 링크로 걸어줍니다.

그런데 어디에 링크를 걸어줘야 할까요?

'이 단어의 주석 설명은 이거다' 라고 알려주는게 ID입니다. 어떤 태그든 ID를 넣을 수 있습니다. p 태그에도 ID를 넣을 수 있고 주석 설명을 p 태그로 묶고 ID를 추가하면 팝업 주석을 불러올 수 있습니다.

하지만 p 태그로 주석을 넣으면 여러 문단을 쓸 수 없습니다. 주석 설명이 길어 여러 문단을 써야 한다면 다른 태그로 묶어줘야 합니다. <aside>태그가 이 역할을 합니다.

<aside> 태그는 HTML5 에서 추가된 태그이기 때문에 EPUB 2 형식에서는 오류가 날 수 있습니다. 하지만 교보, 리디, 알라딘에서는 이 태그를 지원합니다.

2.2 파란 글자는 팝업 주석을 지원하지 않는 뷰어를 위한 코드입니다.

팝업 주석이 지원되지 않는 뷰어에서는 링크를 누르면 해당 위치로 이동합니다. 빨간 글자만 넣어도 주석 설명 위치로 이동을 합니다. 그런데 주석 설명에서 다시 본문으로 돌아올 수는 없습니다.

그래서 파란 글자가 필요합니다. 파란 글자는 주석에서 본문으로 돌아올때 필요한 링크와 ID입니다. 원리는 주석 설명으로 넘어가는 링크와 동일합니다.

팝업 주석을 지원하는 뷰어에서는 파란 글자 부분이 필요 없습니다.

팝업 주석을 지원하지 않는 뷰어는 주석 단어를 누르면 주석 설명으로 이동을 하는데, 여기서 주석 설명을 누르면 다시 본문의 주석 단어가 있는 위치로 돌아갑니다.

2.3 <blockquote>는 주석과는 상관 없습니다.

다만, 주석과 본문을 구분해 주기 위해 주석 스타일을 처리하기 위한 코드입니다. 

<blockquote>를 쓰지 않아도 됩니다. css로 footnote라는 클래스를 만들고 <div class="footnote">로 묶어줘도 됩니다. 주석을 본문과 구분할 필요가 없다면 이렇게 묶어줄 필요도 없고, 모든 주석이 <aside> 태그로 묶여있으니 aside 태그에 직접 스타일을 적용해도 됩니다. 

이렇게 편집한 샘플 파일을 첨부했으니 다운받아 참고하시기 바랍니다.