내맘대로의 EPUB 제작 가이드

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;

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