내맘대로의 EPUB 제작 가이드

전자책 관련해서 여러 사람들과 얘기하다 보면 '아직 이런 정보도 모르나' 싶은 것들이 있습니다.

토리움 https://thorium.edrlab.org/en/ 장애인접근성과 멀티미디어, 인터렉티브를 지원하는 뷰어입니다.

알라딘 전자책 뷰어에서 TTS가 sup, sub 태그를 읽지 않습니다.

알라딘 측에서는

(알라딘 뷰어의 TTS)가 10의 몇 승을 그냥 10으로 읽습니다.

라는 독자의 문의에 대해 출판사에

[일반적으로 sub, sup 태그는 주석 등 읽지 않아도 되는 텍스트에 사용되며, 저희 전자책 뷰어에서는 해당 태그를 TTS로 읽지 않도록 설정되어 있습니다.]

라고 하며 sup, sub 태그를 span 태그로 수정해 달라고 하는데, 알라딘 담당자가 HTML에 대한 기초도 없는 것 같습니다.

알라딘 뷰어가 정책상 첨자 태그를 TTS가 읽지 않도록 막은 것인데 EPUB에 첨자 태그를 쓴 것 자체가 문제라는 의미로 보일수도 있습니다. 

sup, sub 태그는 인쇄상의 이유로 아래 첨자로 표시되어야 하는 인라인 텍스트를 지정합니다.

일반적으로 수학 기호, 화학식, 주석 번호 처럼 본문 보다 작은 글씨로 본문 글씨의 위 또는 아래에 걸치는 형태의 편집,

10², H₂O

처럼 되어 있는 편집을 첨자라 하며, 첨자를 표현할 때 sup, sub 태그를 사용합니다. 

따라서 10²의 위첨자 2를 sup 태그를 이용해 편집하는 것은 전혀 문제가 되지 않습니다.

책을 편집할 때 본문 보다 작은 글씨로 주석을 달 때도 "첨자" 스타일을 사용합니다.

그러니 영문 병용 표기, 괄호 설명 등에 sup, sub 태그를 쓰는 것은 HTML 편집 상 문제가 되지 않습니다.

그리고 독자의 문의 사항이었던 10의 몇승을 TTS가 읽지 못한다는 문제는

span이냐, sup냐, sub냐와는 전혀 무관합니다.

sup, sub는 인쇄 모양만 관여를 할 뿐 10²를 10의 2제곱으로 읽는 것과는 전혀 상관이 없습니다.

sup, sub 태그를 span으로 수정한다 해도, TTS는 "십이"라고 읽게 됩니다.

독자가 원하는 십의 이제곱이라고 읽지 못하지요.

첨자를 써서 제곱을 표시한 것은 유통사 뷰어가 mathml을 제대로 처리하지 못하기 때문입니다.

유통사가 뷰어에 mathml을 적용하고, TTS가 mathml을 읽을 수 있도록 바꿔야 하는데(EPUB 기술 문서 권고사항)

이런 노력은 하지 않고 독자의 요구와 전혀 상관이 없는 sup/sub를 span으로 바꿔야 한다는, 동문서답식 답변을 한 것입니다.

mathml을 당장 처리하기 어렵다면 sup 대신 10²로 편집해 달라고 해야 옳습니다. 저렇게 하면 TTS는 "십 위첨자이"라고 읽을테니까요.

어째든,

오늘의 결론.

알라딘 뷰어는 sup, sub 태그를 TTS가 처리하지 못한다.

그러니 편집할 때 무시하거나, 주의하시라... 입니다.

전자책 제작 관련 블로그를 운영하고, 강의도 하다 보니

이런 저런 질문을 많이 받습니다.

웬만하면 답변을 보내려고 하지만, 10개 질문 중 답변 할 수 있는 것은 2~3개 밖에 안돼요.

제 실력이 한참 부족한가봅니다. 웬만한 질문에 답변 할 능력이 안되는 것을 보면요.

질문의 품격이 낮으면, 답변의 품격도 떨어집니다.

어떤 사람들은 답변이 왜 이모양이냐며 화를 내기도 하는데,

답변이 엉망이면, 질문이 엉망이 아닐까 하는 생각을 먼저 해 보세요.

아래는, 제가 답변을 달지 않았거나, 답변 받은 사람들이 기분 나쁠 수 있는 답변을 한 질문들입니다.

질문을 이렇게 하는 사람들이 정말 많아요.

1)

문제가 생겨서 이렇게 혹시나 문의글 작성해봅니다. 외부,내부 CSS가 전혀 적용이 되질 않습니다.

* 다른 내용 용없습니다. 질문의 핵심은 "CSS가 적용되지 않는다. 왜 그러냐?". 답변은 달지 않았지만, "잘 하면 적용 돼요" 정도가 답변이 됩니다.

2)

이북 뷰어에서는 잘 나오는 CSS가(에를 들면 박스나 이미지 첨부 같은) 웹으로 보면 CSS가 대부분 깨져서 나오는 곳이 있더라구요.

* 이것 도 다른 내용이 없습니다. 질문의 핵심은 "CSS가 뷰어 별로 다르게 보여요. 어떻게 해야돼요?". 이 글도 답은 달지 않았지만, "여러 뷰어에 잘 보이게 CSS를 만드세요"가 답이에요.

3)

한데 최근에 버전업(2.0.2)된 sigil에서는 Add-cover가 안 먹히네요. 책들도 찾아보고 이렇게저렇게 코드도 고쳐 보고, 심지어 설정에 들어가서 여기저기 폴더를 바꿔 가며 cover.xhml을 넣어 보기도 했는데 끝내 해결 못 했습니다. 왜 안 되는 걸까요?

* 이 질문의 답변은, Sigil 2.0.2에서 Add-cover가 잘 적용됩니다. 였습니다.

4)

미리보기 내용과 달리 리디움리더로 보면 사진파일이 모두 보이지 않고 폰트도 제가 지정한 폰트로 변환되어 보이지 않습니다. 무엇이 문제일까요?

* 이 질문의 답변은 "무언가 문제가 있을거예요." 입니다. 제대로 하면 잘 보여요.

5)

sigil에 적용된 폰트를 플랫폼 뷰어에서도 보이게 하고 싶어서 시도해보고 있는데, sigil 상에는 폰트가 잘 적용되어있는데 리디북스 등의 뷰어로 보면 안 나타나더라고요^^;

* Sigil에서 제대로 적용하면 플랫폼 뷰어에서도 제대로 보여요.가 답이에요.

6)

제작문의 : PDF로 준비되었으며 캘리버로 변환해보아도 잘 안됩니다.

* 이게 질문 내용 전부예요. 답변을 달지 않았습니다. 궂이 달자면, '원래 안돼요' 정도?

EPUB에 종이책 페이지를 표기하는 방법.

https://www.w3.org/TR/dpub-aria-1.0/#doc-pagebreak

명시적으로 페이지를 표기해야 하는 경우 아래와 같이 쓴다.

<span epub:type="pagebreak"  role="doc-pagebreak"  id="page23">23</span>

빈 요소로 페이지를 표기해야 할 경우 아래와 같이 쓴다.

<span epub:type="pagebreak"  role="doc-pagebreak" id="page24" title="24"/>

근거 : TTAK.KO-10.0905-Part1/R1 개정일: 2020 년 06 월 17 일

시길을 이용해 EPUB에 글꼴을 추가했는데 적용이 되지 않을 때가 있습니다.

이 설명을 위해 예시로 드는 글꼴은  [박물관문화재단클래식]이에요. 

최근에 개선이 됐는지는 모르겠지만, 이 글꼴에 문제가 있습니다.

글꼴을 적용하면 이렇게 보여야해요.

그런데 시길에서 글꼴을 적용하면 이렇게 보입니다.

이런 글꼴이 생각보다 많아요. 윈도우 PC에서는 글꼴이 잘 보이지만 EPUB에 넣으면 반영이 되지 않습니다.

윈도우에서 잘 보이니 폰트 문제라 생각 안하고 Sigil이 문제거나 CSS를 잘못 적용했다고 생각할 수 있어요.

어설픈 (자칭) 전문가들은 아는 척을 하기 위해 OTF와 TTF 차이가 어쩌구 하며 EPUB에서는 TTF만 써야 한다는 황당한 소리도 하지요. 그런데 예시로 든 박문관문화재단클래식 폰트는 TTF를 쓴거예요. EPUB은 OTF, TTF 다 써도 됩니다.

그럼 뭐가 문제냐.

폰트가 문제예요.

저도 폰트의 어떤 부분이 문제인지는 몰라요. 그건 폰트 전문가에게 물어보세요.

제가 아는 건 일부 폰트가 윈도우에서는 제대로 보이지만 안드로이드/아이폰 같은 모바일 OS나  Sigil같은 일부 프로그램(아마 웹 엔진 문제가 아닐까...) 같은 곳에서는 제대로 보이지 않는 다는 것이에요.

그럼 폰트 문제인지 어떻게 확인할 수 있을까.

Sigil의 폰트 뷰어를 이용하면 돼요.

책 탐색기에서 폰트를 더블 클릭 하면 코드 보기 창에 폰트 뷰어가 열려요.

여기에서 글꼴이 제대로 보이지 않으면 폰트 문제예요.

같은 글꼴을 수정하면 이렇게 제대로 보입니다.

폰트 뷰어에서 글꼴이 제대로 보이면 사용할 수 있는 글꼴이고,

폰트 뷰어에서 글꼴이 제대로 보이지 않으면 글꼴 문제예요.

글꼴이 문제라면 글꼴 배포처에 문의해서 글꼴을 수정해 달라고 하세요.

만약 글꼴 뷰어에서 제대로 보이는데 반영이 되지 않는다.

그럼 CSS 문제일 거예요. 오타거나, 대소문자 구분 문제가 대부분이지요.