내맘대로의 EPUB 제작 가이드

전자책 좀 만들어 봤다 하는 분들이라면 알라딘 뷰어에서 이런 현상 종종 경험하실거예요.

몇년이 지나도 수정을 하지 않는 알라딘 뷰어의 고질적인 문제입니다.

​

뷰어 기획자 경험으로 보면 왜 저런 문제가 생기는지 예상이 갑니다.

이미지 height를 강제로 뷰어 높이에 맞춰놨기 때문이지요.

그 이유야... 각자 알아서 생각을 해 보시고.

​

아는 분들은 아주 쉽게 해결하겠지만,

저런 현상 처음 겪는 분들은 당혹스러울 거예요.

​

교보, 예스, 리디, 캘리버, 리디움, 토륨, ibooks, 킨들..... 거의 모든 뷰어에서 저런 문제가 생기지 않는데, 유독 알라딘 뷰어에서만 생기니까요.

제작 의뢰라도 맡았다가 저런 문제 생기면

"다른 뷰어에서 문제 없으니 알라딘 뷰어도 문제 없어요." 라고 발뺌하기도 뭣합니다.

그냥 딱 봐도 문제로 보이잖아요.

​

저걸 아주 간단히 해결할 방법이 있습니다.

​

img {

height : auto;

max-height : 84vh;

}

​

CSS 앞부분에 이 코드를 넣어보세요.

​

max-height : 84vh;를 넣은건... 음... 직접 실험을 해보세요. 빼면 무슨 문제가 생기나.

84vh가 아닌 100vh를 넣고 교보ebook도 테스트를 해 보시고요.

왜 84가 나왔는지는 저보다 더 집요하신 어떤 분이...(카페에 열심히 활동하고 계신 분이에요^^)

전 대충 80을 잡았는데, 1단위로 테스트를 하셨더라구요.

​

이걸 그냥 쓰지는 마세요.

이 코드를 이해 못하고 쓰면, 이 코드 때문에 생길 수 있는 다른 문제를 처리할 수 없습니다.

왜 저게 들어가야 하는지 이해를 하면 아주 많은 공부가 됩니다.

남이 던져줬다고 쉽게 받아먹기 보다는

남이 던져 준 것을 자기 것으로 소화하는게 더 중요합니다.

얼마 전에 주석 숫자 맞추며 1000개짜리 아닌게 어디냐고 푸념을 했는데,

바로 다음 책이 1000개 넘는 주석, 30개 정도로 구분된 장, 각 장마다 새로 번호 시작되는 책이었습니다.

루틴이 된걸까요 ㅜ.ㅜ 말을 조심해야겠어요.

​

​

이번에 소개할 스타일은 EPUB3라면 간단하지만 EPUB2에서는 창의력이 필요한 거예요.

​

종이책에서는 이렇게 보입니다. 어느 부분인지 딱 감이 오시지요?

​

EPUB3라면 ruby를 쓰면 됩니다. 하지만 EPUB2늘 ruby를 지원하지 않기 때문에 CSS를 사용해야 합니다.

약간의 창의력(?)만 발휘하면 아주 간단히 문제를 해결 할 수 있어요.

​

힌트를 드릴게요.

​

<span class="txt_dot_top">않</span><span class="txt_dot_top">는</span><span class="txt_dot_top">다</span>

​

이렇게 하면 위에 점이 찍힙니다.

오랜만에 고민하게 만든 스타일이 있어 이것 저것 시도해 봤습니다.

아래는 PDF 캡쳐 이미지입니다. 어디가 문제인지 아시겠지요?

대표사진 삭제

사진 설명을 입력하세요.

처음 떠오른 태그는 테이블이었어요.

테이블로 만들면 간단합니다.

테이블로 만들어도 아무 문제가 없긴 한데, 그냥 테이블로 만들기 싫었어요 ㅎㅎ

table, tbody, tr, td가 들어가다 보면 코드가 너무 복잡해 지기도 하고요.

그래서 flex를 사용했습니다.

<div class="box_book_title">

<div class="box_book01">

<p class="txt_book01">파브르 곤충기</p>

<p class="txt_book01_sub">자연에 대한 이성적 관찰</p>

</div>

<div class="box_slash"></div>

<div class="box_book02">

<p class="txt_book02">시튼 동물기</p>

<p class="txt_book02_sub">자연에 대한 감성적 관찰</p>

</div>

</div>

코드가 간단하지는 않아요.

테이블 보다 tbody 한 줄 빠집니다.

테이블의 문제는 또 있어요.

가운데 사선 셀 크기는 고징시킨다 해도

좌우 텍스트가 들어간 셀 크기는 고정을 시킬 수 없거든요.

그럼 테이블은 텍스트 양에 맞춰 자동으로 크기를 조절합니다.

좌우 테이블 크기가 달라질 수 있지요.

이것도 해결 안되는건 아니지만,

이걸 해결 하느니 flex가 더 낫겠다 싶더라구요.

flex 속성을 적용한 결과입니다.

flex 속성을 이용하면 표 보다 간단하게 셀 안의 텍스트 길이와 상관 없이 좌우 크기가 동일하게 맞출 수 있지요.

가운데 사선도 크기를 맞추기 쉬워요.

가운데 사선 크기를 고정하지 않고 폭에 맞춰 좌우 셀은 같은 크기로, 가운데는 일정 비율로 맞추는 것도 가능하고요.

대표사진 삭제

사진 설명을 입력하세요.

CSS가 뭔지 모르는 사람들을 위한 WYSIWYG 방식 CSS 편집기 플러그인입니다.

https://drive.google.com/file/d/1eRqDzPa737p1EYhtJ5naN1sopaSXq_Cc/view?usp=sharing 

Sigil에서 플러그인을 설치한 후 실행하세요.

플러그인을 어떻게 설치하는지 모르는 분이라면 이 플러그인 설치해도 사용 못합니다.

Sigil을 먼저 공부하세요.

왼쪽에는 CSS 속성이, 오른쪽에는 스타일용 샘플이 표시됩니다.

Examples를 누르면 샘플을 바꿀 수 있습니다.

왼쪽 메뉴에서 CSS 속성을 선택하면 조절을 할 수 있습니다.

속성을 조절하면 샘플에 반영됩니다.

CSS 스타일을 만들면 오른쪽 상단에서 CSS를 선택합니다.

CSS 스타일을 복사해 Sigil의 CSS에 붙여 넣습니다.