내맘대로의 EPUB 제작 가이드

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

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

​

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

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

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

​

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

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

​

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

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

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

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

​

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

​

img {

height : auto;

max-height : 84vh;

}

​

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

​

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

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

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

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

​

이걸 그냥 쓰지는 마세요.

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

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

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

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

전자책을 만들다 보면 유통사 뷰어에 따라 여러 문제가 생깁니다.

이런 문제를 얼마나 잘 처리하느냐,

전자책 전문 편집자의 실력을 가늠할 수 있는 기준이지요.

​

각 뷰어 별로 '표준 HTML'에 위반하는 오류가 몇가지 있습니다.

1. 리디북스 마진 - 리디북스는 마진이 제대로 적용되지 않습니다. 그리고 div로 박스를 그린 후 그 안에 편집한 스타일은 엉망이 되지요.

2. 알라딘 이미지 height/width : 표준 html에서는 width/height 둘 중 하나만 적용하면 나머지는 비율에 맞게 보입니다. 하지만 알라딘은 둘 중 하나만 적용하면 나머지는 100%로 만들어 버립니다. 이건 몇년째 지적한 문제인데, 알라딘 내부에서 고칠 능력이 안되는지 계속 그대로 두네요.

3. 교보문고 PC 뷰어 링크 위치 오류 - 같은 파일 내 링크는 잘 먹는데, 다른 파일로 넘어가는 링크가 걸리면 대상 파일의 처음 위치가 표시되는 문제가 있지요. 랜더링 후 링크 위치로 넘겨야 하는데 랜더링과 링크 위치로 넘기는 순서가 꼬인게 아닌가 싶습니다.

4. 예스24는.... 뭐, HTML에 기반한 EPUB 뷰어라 말하기 어렵겠네요. EPUB은 표준 HTML에 기반하여 표현을 하는데 뷰어는 표준 HTML을 완전 무시하는 수준...

​

​

이런거야 대충 파악을 한 상태여서 문제가 생겨도 즉시 대처 가능합니다.

그런데 말도 안되는 황당한 뷰어 오류를 얼마 전에 경험했어요.

모든 뷰어에서 문제가 없는데, 심지어 리디, 알라딘 뷰어도 등록 후 다운로드 받으면 문제가 없는데 PC에서 직접 서재에 넣으면 오류가 생기는....

​

모바일 뷰어는 문제가 없습니다. EPUBCheck로 돌려도 오류 없다고 뜨고, 국내 주요 유통사 뿐 아니라 캘리버, 리디움, 토륨 등 다른 뷰어도 모두 문제 없는데 알라딘과 리디만 문제가 생기더라구요.

​

원인을 찾기 위해 EPUB을 완전 분해조립해도 해결이 되지 않네요.

EPUB에서 파일을 하나씩 빼보고, 이미지 크기를 조절해 보고, HTML 파일 크기를 조절해 보고, 압축 풀었다 다시 압축해 보고... 할 수 있는건 다 해봤는데 해결이 되지 않았습니다.

그러다 아무 생각 없이, 오류 고치겠다는 생각을 갖고 한 것도 아니고, 그냥 별 의미 없이 표지 이미지 표지 설정 여부를 체크해 봤는데... 이게 체크되어 있지 않더군요. 이걸 체크했더니... 빙고~

​

작업하며 중간에 이미지 편집을 하면서 메타에 있는 표지 이미지명과 실제 표지 이미지 명이 달라졌는데

이걸 오류로 인식하는 건 없기 때문에 - 그리고 메타 정보가 잘못 들어갔다고 오류라는 판단을 내릴 이유가 전혀 없기 때문에 발견을 하지 못했습니다.

​

알라딘은 아무런 메시지 없이 책이 등록되지 않습니다.

리디북스는 '손상된 파일입니다' 라는 오류 메시지가 표시됩니다.

​

'표지 정보를 확인하세요' 라고 메시지를 보여줬다면 아주 간단했을텐데 말이지요.

표지 메타 정보 하나 잘못 들어갔다고 '손상된 파일입니다' 라고 하니 원인을 찾을 수 없지요.

그리고 이건 EPUB표준에 문제

​

리디가 올 초부터 '버그레이드'를 하고 있는데, 점점 더 상태가 심각해 지는 것 같아요.

알라딘은 한동안 뷰어에 신경을 썼는데 최근엔 제대로 된 업그레이드가 없습니다.

장사가 되는 장르물만 잘 보이면 아무 문제가 없다고 생각하는 걸까요?

얼마 전에 주석 숫자 맞추며 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 속성을 이용하면 표 보다 간단하게 셀 안의 텍스트 길이와 상관 없이 좌우 크기가 동일하게 맞출 수 있지요.

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

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

대표사진 삭제

사진 설명을 입력하세요.