내맘대로의 EPUB 제작 가이드

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

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

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

​

각 뷰어 별로 '표준 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 속성을 이용하면 표 보다 간단하게 셀 안의 텍스트 길이와 상관 없이 좌우 크기가 동일하게 맞출 수 있지요.

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

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

대표사진 삭제

사진 설명을 입력하세요.

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

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

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

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

Sigil을 먼저 공부하세요.

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

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

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

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

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

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

지금까지 작업한 것과 다른 테두리 스타일을 만났습니다.

글자가 테두리 보다 길어요.

이런 테두리는 어떻게 그릴까요?

Previous imageNext image

이것 역시 border-image로 그릴 수 있습니다.

뭔가 엄청난게 있을 것 같지만, 아주 단순합니다.

결정적인 힌트를 드릴게요.

아! 하고 느끼셨나요^^?

​

재미있는 테두리가 많이 쓰인 책이에요.

이런 테두리는 어떻게 그릴까요?

​

이 테두리의 이미지입니다.

보기엔 2겹, 3겹으로 된 테두리 처럼 보이지만 선 하나로 그린 테두리예요.

​

그럼 이건 어떻게 그릴까요?

바깥 테두리를 그리고, 안쪽에 다른 테두리를 그렸을까요?

이럴 때는 아주 단순하게 생각을 하면 돼요.

어디에서 어디까지를 테두리로 잡느냐가 기준이 됩니다.

단선 테두리 안에 이중선 테두리를 넣는 것도 방법이지만,

그냥 단선과 이중선을 포함해서 하나의 테두리를 보면 훨씬 간단해 집니다.

​

모두 border-image 속성을 이용했습니다.

border-image 모르는 분은 없을거예요.

이 속성으로 저런 다양한 테두리를 만들 수 있느냐, 없느냐의 차이가 있지요.

속성을 어떻게 활용하느냐, 이게 중급에서 고급으로 넘어 가는 핵심이에요.

​

전자책에서는 이렇게 보입니다.

그나저나, Sigil 리디움 뷰어 플러그인 너무너무너무너무 편하고 좋네요 ^^

검수할 때 너무 편해요.

요즘 일에 치여서 글을 올리지 못했네요.

게시판이 너무 오래 쉬고 있으면 안되겠기에...^^;;

간만에 스타일 하나 올립니다.

형광펜 중간에 십자가 표시 보이시나요?

하나는 파란색, 하나는 파란색 테두리입니다.

파란색은 쉽지만, 테두리는 어떻게 할까요?

​

테두리를 그리는 스타일은 없습니다. 글자 테두리 색과 안쪽 색을 지정하는 스타일도 없고요.

이건 그림자 속성을 활용한거예요.

​

상하좌우 그림자를 1px로 주고, 그림자 색을 원하는 것으로 지정하면 되지요.

​

text-shadow: -1px 0 #0181C6, 0 1px #0181C6, 1px 0 #0181C6, 0 -1px #0181C6;

color : #FFFFFF;

눈에는 파란색 테두리 처럼 보이지만, 사실 그림자입니다.

안쪽 글자는 흰색으로, 글자 안쪽은 흰색으로 넣었어요.

​

그런데 회색 바탕이라 티가 안나지만, 글자 안쪽 색을 지정하지 않고 투명하게 하려면 어떻게 하면 될까요?

​

이건 퀴즈로 남겨봅니다.