내맘대로의 EPUB 제작 가이드

이 오류는 작성일 기준이며, 향후 유통사의 업데이트로 오류가 개선될 수 있습니다.

오류 개선은 업데이트 하지 않습니다.

전자책 제작에 영향을 주는 정도에 따라 하, 중, 상, 심각으로 구분합니다.

오류는 아니고 기능 변경이어서 [참고]로 표시했습니다.

문제 원인을 파악했습니다.

알라딘은 epub:type이 아닌, 알라딘 자체 코드를 사용합니다.

리디도 비슷한 방식을 쓰다, 표준 방식을 받아들였고,

교보, 리디, 예스24 모두 현재는 표준 방식을 사용합니다.

물론  EPUB3에 사용하는 코드라 EPUB2에서는 오류가 생기지만 허용을 하고 있지요.

알라딘도 epub:type을 쓴다고 생각했는데 제가 잘못 알았던 것 같습니다.

(예전에 테스트 할 때 잘 먹혔다고 생각했는데, 같은 파일 안에 있을 때만 먹히네요)

교보, 리디, 예스24는 epbu:type을 쓰면 팝업으로, 그렇지 않으면 단순 링크로 이동(리디는 팝업으로)

알라딘은 자체 주석 코드를 사용해야 팝업 주석 표시가 되며 그렇지 않으면 링크로 이동.

표준 문서의 샘플 코드는 여기에서 확인.

==> 이 코드는 교보, 리디, 예스24와 해외 유통사(구글 플레이, 아마존 등. EPUB3로 배포해야 함)에서 팝업 주석으로 표시됩니다.

http://idpf.org/epub/30/spec/epub30-contentdocs.html

알라딘의 팝업 주석 코드는 알라딘에 문의하세요.

알라딘 전자책 뷰어의 팝업 주석은 같은 파일 안에 주석 번호와 설명이 있어야 되는 것 같습니다.

이것 저것 확인해 봤는데, 같은 파일 안에 주석 번호/설명이 있을 때만 팝업 주석이 표시되고

다른 파일에 있을 때는 링크로 연결되네요.

제작하실 때 참고하세요.

알라딘 전자책 뷰어에서 팝업주석 기능이 빠진 것 같습니다.

언제부터인지는 모르겠지만,

구 버전에서는 링크와 팝업주석을 1초 이상 롱탭을 하면 무조건 강제로 팝업으로 띄우고,

링크 위치로 이동하기 버튼을 누르면 해당 페이지로 이동했습니다.

그런데 언제 부터인지 이 기능이 사라지고

팝업주석(epub:type="footnote") 뿐 아니라 일반 링크도 링크로 인식합니다.

알라딘 전자책 뷰어에서 팝업 주석 지원되지 않는건

뷰어에서 지원을 하지 않는 것이니 제작할 때 참고하시기 바랍니다.

* 알라딘 뷰어에서 팝업 주석 지원하는 코드를 알고 계신 분 있으면 공유 요청드립니다.

주석 코드가 있을 경우 롱탭을 하면 팝업 주석이 표시된다고 되어 있는데 아무리 오래 눌러도 표시가 되지 않네요. 알라딘에서만 사용하는 주석 코드가 있는데 제가 모르는 것 일 수 있으니, 아는 분 있으면 공유 요청드립니다.

CSS 스타일을 적용하려면 인라인, 내부, 외부 3가지 방법 중 하나를 선택해야 합니다.

수업을 하다 보면 수강생들이 만든 EPUB에 인라인 스타일이 잔뜩 포함된걸 자주 보는데, 이런 '짓'은 하지 않아야 합니다.

제대로 모르는 사람들은 인라인 스타일을 '써도 되지만 안쓰는게 좋다' 정도로 얘기하는데, '안써야 하지만 특별한 예외 상황에서는 써도 된다'가 맞습니다.

이건 누구의 개인적인 의견이 아닌, W3C, Mozilla의 권고.

CSS에 대한 가장 정확한 정보를 전달하는 사이트에 뭐라고 나와있는지 볼까요?

https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured

Inline Style

Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content makes maintenance easier for all who work on the website.

가능하면 CSS를 이런 식으로 사용하지 마세요. 모범 사례의 반대입니다. 첫째, 유지보수를 위한 CSS 구현이 가장 비효율적입니다. 하나의 스타일 변경은 단일 웹 페이지 내에서 여러 번 수정해야 할 수 있습니다. 둘째, 인라인 CSS는 (CSS) 프리젠테이션 코드를 HTML 및 콘텐츠와 혼합하여 모든 것을 읽고 이해하기 어렵게 만듭니다. 코드와 콘텐츠를 분리하면 웹사이트에서 작업하는 모든 사람들이 유지 관리를 더 쉽게 할 수 있습니다.

내부 스타일은 조금 덜 엄격하지만, 그래도 사용하지 않는게 좋다고 설명합니다.

Internal stylesheet

But for sites with more than one page, an internal stylesheet becomes a less efficient way of working. To apply uniform CSS styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. The efficiency penalty carries over to site maintenance too. With CSS in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages.

하지만 페이지가 두 개 이상인 사이트의 경우 내부 스타일시트는 작업의 효율성이 떨어집니다. 내부 스타일시트를 사용하여 여러 페이지에 균일한 CSS 스타일을 적용하려면 해당 스타일을 사용할 모든 웹 페이지에 내부 스타일시트가 있어야 합니다. 효율성 패널티는 사이트 유지 관리에도 적용됩니다. 내부 스타일시트의 CSS를 사용하면 한 번의 간단한 스타일 변경에도 여러 웹 페이지를 편집해야 할 위험이 있습니다.

웹에서 '페이지 두 개'는 EPUB에서 본문 xhtml 파일 두개와 같습니다.

xhtml 파일 하나만 넣어 만들 수 있는 전자책은 없을거예요.(뭐... 누군가는 그렇게 만들지도 모르지만요)

그럼 내부(Internal) 스타일시트 사용도 권하지 않습니다.

다시 말해,

전자책 만들 때는 무조건 외부(External) 스타일시트를 사용하고,

꼭 필요하면 내부(Internal) 스타일시트를 쓰고,

정말 예외적인 경우에 한하여 인라인(Inline) 스타일 시트를 쓰세요.

정말 예외적인 경우가 무엇인지 모르겠다, 그럼 인라인 스타일은 안쓰면 됩니다.

일러두기는 글자를 아래로 배치해야 하는데,

이게 많이 까다롭습니다.

height : 100%;는 먹히지 않습니다.

뷰어의 높이를 height는 감지할 수 없기 때문이지요.

그래서 뷰오 높이를 기준으로 height를 잡을 수 있는 vh를 사용합니다.

하지만 vh는 디스플레이의 크기이기 때문에

뷰어의 설정에 따라 100vh가 다음페이지로 넘어갈 수 있습니다.

그래서 대략 80vh를 사용했어요.

그런데 이보다 간단한 코드가 있습니다.

.box_note {

  position : fixed;

  bottom : 5em;

  margin : 1em;

}

이렇게 상자를 만든 후 텍스트를 넣으면 화면 하단에 배치됩니다.

이 코드도 완벽하지는 않습니다.

몇가지 문제가 있어요.

그래도 지금까지 찾은 코드 중 가장 간단한 스타일 코드입니다.

이 오류는 작성일 기준이며, 향후 유통사의 업데이트로 오류가 개선될 수 있습니다.

오류 개선은 업데이트 하지 않습니다.

전자책 제작에 영향을 주는 정도에 따라 하, 중, 상, 심각으로 구분합니다.

교보문고 SCM에 전자책 등록을 할 때 아래와 같은 오류가 생길 수 있습니다.

교보문고 등록 시스템에 문제가 있어, 오류가 없어도 이런 오류가 생기고 등록을 할 수 없다고 나옵니다.

<p> 태그 사이에 있는 <br/> 태그는 문제가 없지만,

<h1> 같은 다른 블럭 태그에 <br/> 태그를 사용하면 이런 오류가 생기는 것 같습니다.

HTML 규칙 상 <br/> 태그는 블럭 태그에 사용할 수 있기 때문에

이 문제는 교보문고의 오류 체크 시스템의 오류입니다.

EPUBCheck에서 오류가 없다면 교보문고 등록 시스템 문제이니

교보 등록 시스템 업데이트 될 때까지 기다린 후 등록하시면 됩니다.

이 오류는 작성일 기준이며, 향후 유통사의 업데이트로 오류가 개선될 수 있습니다.

오류 개선은 업데이트 하지 않습니다.

전자책 제작에 영향을 주는 정도에 따라 하, 중, 상, 심각으로 구분합니다.

안드로이드에서 테스트를 위해 전자책을 교보 ebook으로 불러 올 때

탐색기에서 EPUB을 선택하면 [교보ebook] 뷰어를 선택할 수 있습니다.

하지만 [교보ebook] 뷰어를 선택해도 책이 서재에 추가되지 않습니다.

책을 서재에 추가하려면

메인 화면> 메뉴> [내 파일 추가]를 눌러 추가할 책을 선택해야 합니다.

이 글은 2022년 10월 12일 기준입니다.

이후 알라딘 뷰어 업데이트를 통해 아래 문제가 개선될 가능성이 있습니다.

개선 사항에 대해서는 업데이트 하지 않으니, 오류 여부는 직접 확인하시기 바랍니다.

알라딘 뷰어에서 들여쓰기가 적용되지 않습니다.

복잡한 스타일이 아닌, 아래 처럼 내어쓰기를 할 때 누구나 사용하는 스타일입니다.

text-indent : -2em;

padding-left : 2em;

다른 뷰어에서는 이렇게 보입니다.