내맘대로의 EPUB 제작 가이드

아래의 긴 내용을 간단히 요약하면....

국내 유통사는 EPUB2에서 ruby, aside, mark 등의 태그를 허용합니다. 하지만 이 태그는 EPUBCheck로 검사하면 오류가 나기 때문에 구글 플레이북 같은 곳에 등록하려면 EPUB3로 변환을 해야합니다. 

아래 내용은 2017년 기준입니다. sigil 플러그인 epub3-itizer를 사용하면 클릭 한번으로 변환할 수 있습니다.

EPUB2, EPUB3의 차이를 알고 계신가요?

많은 분들이 'EPUB3는 멀티미디어를 포함한 콘텐츠' 정도로 막연히 알고 있습니다. 동영상이나 MP3가 포함되면 EPUB3고 그렇지 않으면 EPUB2라는 정도로 알고 있습니다. 이렇게 알고 있다면 '완전히' 잘못 알고 있는 것입니다.

EPUB2와 EPUB3를 구분할 때 멀티미디어(동영상, MP3등)의 포함 여부는 '전혀' 중요하지 않습니다. 

정확히 EPUB2와 EPUB3의 차이를 구분하기는 어렵습니다. 너무 많은 요소들이 섞여있기 때문에 몇줄로 이 둘을 규정할만한 설명을 하는건 불가능합니다. 이 둘의 차이를 가장 명확히 설명해 놓은 문서가 IDPF에서 관리하고 있는 EPUB2.0.1과 EPUB3.0.1 표준 명세서인데 이 내용을 제대로 읽고 이해하기는 어렵지요. 그리고 전자책 편집자라 해도 이 내용을 알 필요는 없습니다.

어렵긴 하지만, EPUB2와 EPUB3의 차이를 정리해 보면 이렇습니다.

이렇게 정리를 해도 복잡하지요? XHTML은 뭐고 HTML5는 뭔지, CSS2는 뭐고, CSS3 는 뭔지, 이런 것들이 외계어처럼 해석이 안되는 분들이 많을거예요. 오늘 설명드리려는 내용은 사실 이런 내용과 별 상관 없습니다. 

그렇다면 왜 이런 내용을...?

EPUB2와 EPUB3를 잘 비교해보세요. MP3, 동영상이 둘의 구분하지 않습니다. 비교표를 잘 보시면 EPUB3는 EPUB2를 모두 포함하고 있다는 것을 알 수 있습니다. 이해하기 쉽게 설명하자면 이렇습니다.

MS-DOS 시절 사용하던 HWP2.0 프로그램은 HWP2012로 만든 한글 문서를 읽을 수 없습니다. 그런데 HWP2012프로그램은 HWP2.0 문서를 읽을 수 있지요. 

EPUB3도 마찬가지예요. EPUB2로 만든 전자책은 EPUB3로 만들 수 있습니다.

EPUB2는 텍스트와 이미지, EPUB3는 MP3, 동영상이 포함된 콘텐츠로 둘을 구분하는 것이 아니고, 파일의 구조 차이입니다. 그러니 EPUB2로 된 파일은 EPUB3로 변환이 가능한 것이지요.

이게 왜 필요할까요?

어차피 EPUB3 뷰어에서 EPUB2 파일도 볼 수 있게 되어 있는데 왜 변환할 일이 있을까요?

제작 작업을 하다 보니 이런 일이 필요할 때가 생기더라구요.

왜 변환이 필요한지 설명을 하려면 또다시 기술적인 내용이 조금 들어가야 되는데... ㅜ.ㅜ

EPUB2는 아주 오래된 버전이에요. 그래서 요즘 나오는 스마트폰서 구현 가능한데 표준이 따르지 못하는 부분이 있습니다. 예를 들면 ruby, mark, aside 등의 태그처럼이요.

루비ruby

태그는

일*본*어*

를 위해 만들졌는데 활용도가 다양해요.  루비, 일본어 라는 단어 위에 영문 표기와 *표를 붙인게 보이지요? 시중에 나온 책중에 이런 편집이 많이 있습니다. 이걸 해주는게 ruby 태그예요.

mark

는 형광펜 스타일을 쉽게 표현해 줍니다. mark라는 단어에 적용된 노란색 바탕을 표현하려면 CSS로 배경색 스타일을 지정하고 span 태그로 스타일을 적용해 줘야 하는데, mark 태그를 사용하면 <mark>mark</mark> 이렇게 간단히 표현할 수 있습니다. 

aside는 주석을 표현하면서 설명을 한 적이 있습니다.(http://epubguide.net/135) aside가 주석을 위한 태그는 아니예요. 의미적 마크업(Semantic Markup)이라고 해서 section, nav, aside 등의 태그가 새로 추가됐는데 aside가 주석을 표현할 때 유용해서 다른 태그보다 사용을 많이 합니다.

이런 태그는 EPUB2에서 사용하면 오류가 납니다. 원칙을 철저히 지키면 사용할 수 없는 태그예요. 그런데 전자책을 제작하다 보면 이 태그들이 꼭 필요합니다. mark 태그는 스타일로 대체할 수 있다 해도, ruby와 aside는 대체가 어렵거나 대체하려면 코드가 엄청 복잡해지거든요.

그러다 보니 EPUB2 파일로 제작을 할 때 이런 태그를 쓰게 됐고, 국내 유통사들은 출판사의 요청을 받아서 이런 태그가 문제 없이 뷰어에서 표현되도록 해놨습니다.

여기엔 논란의 소지가 조금 있어요. EPUB2 표준을 위반해서 이런 태그를 사용해도 되는가 하는 문제입니다.

그런데 엄밀히 말하면 표준 위반이라고 할 수도 없습니다. 설명하자면 표준문서 항목까지 열거하며 must, should, recommand 등의 단어 의미까지 따져야 하니 간단히 설명을 드릴게요.

법에 보면 상위법과 하위법이 있잖아요. 전자책을 만드는 표준에도 상위, 하위 법이 있어요. EPUB은 W3C라는 단체가 만든 웹표준을 지키고 있습니다. W3C의 웹 표준이 '헌법' 같은 상위법이에요. 그리고 EPUB 표준은 민법, 상법 같은 하위법입니다. 민법, 상법에 구체적으로 명시되지 않은 내용이 있다면 상위법인 헌법을 따르지요? 

EPUB2는 웹 표준의 하위법입니다. 하위법에 포함되지 않은 내용인데 시대가 변하면서 필요해 졌고, 그게 상위법에 나와있다면 하위법(EPUB2)에는 나와있지 않지만 상위법(웹표준)을 따르는게 맞겠지요.

EPUB2 표준에서는  ruby, aside, mark 같은 태그에 대해 명확히 명시하지 않았습니다. 물론 XHTML1.1을 따른다고 했으니 문제의 소지는 있지만 뷰어가 이런 태그들을 표현하면 안된다는 내용은 없습니다. 그러니 국내 유통사가 EPUB2에서 지원하지 않는 ruby, aside, mark 등의 태그를 지원해도 표준에 위배되는 것은 아닙니다. 

사족이 정말 길어졌는데, 중요한건 여기부터!!!

EPUB2에 ruby나 aside 태그를 사용하면 EPUBCheck에서 오류가 납니다. 국내 유통사는 문제되지 않아요. 오류가 나도 이런 태그들은 허용을 하거든요. 그런데 구글 플레이북 같은 플랫폼에서는 EPUBCheck에서 오류가 나는 콘텐츠를 허용하지 않습니다. 

IDPF의 표준을 따라 ruby 태그로 글자 위에 점이나 영문설명을 넣거나, 팝업 주석을 넣으려면 EPUB3로 만들어야 하는데 국내 유통사 중 EPUB3 파일을 받지 않는 곳이 많아요. EPUB2로 팝업 주석을 넣고 ruby 태그를 쓰면 구글 플레이북에는 유통을 할 수 없습니다. 그러니 국내 유통을 위해서는 EPUB2로, 구글에 등록하려면 EPUB3로 파일을 만들어야 하는거지요. 

그럼 시길에서 EPUB2 파일을 EPUB3로 어떻게 변환을 할까요?

궁금하면 다음편을 봐주세요 ^^

오랜만에 글을 올리네요.

4월 28일에 글을 올리고 거의 한달만입니다. 강의도 있고, 긴급히 제작해야 하는 전자책도 생기고 해서 정신이 없었어요.

오늘은 이미지에 캡션 다는 스타일을 알려드리려고 해요.

CSS가 익숙한 분들이야 별거 아니겠지만, 이미지 캡션이 처음인 분들은 막막할거예요.

방명록에 캡션을 달았는데 몇가지 문제가 생긴다고 해결 방법을 묻는 글이 올라와서 한번 정리해 보겠습니다.

이미지에 캡션이 달린 책을 몇권 봤는데 많은 분들이 사용하는 방식은 이런거였습니다.

가장 간단한 방법이긴 한데, 이미지와 캡션 한 묶음으로 움직이지 않아요. 그리고 float : left; float:right;를 했을 때 제대로 적용되지 않고요. 캡션 내용이 엄청나게 많아져도 문제가 됩니다. 문의 주신 분은 이 부분의 문제를 해결하지 못하셨던 것 같아요.

제가 쓰는 캡션 스타일은 이렇습니다. 샘플파일 다운로드 하면 뷰어에서 확인이 가능해요.

줄간격, 여백, 글자색 등 스타일은 편집자가 원하는 대로 수정이 가능하니 책에 맞게 수정해서 사용하세요.

캡션을 넣을 때 이미지가 들어가는 상자를 하나 만들고 그 안에 이미지와 캡션을 같이 넣어 이미지와 캡션이 항상 한 묶음으로 움직이도록 만들어 놨습니다. 그래서 캡션 내용이 길어 다음 페이지로 넘어가더라도 캡션이 본문과 섞이지 않고 이미지 상자 안에 남아있게 됩니다.

샘플파일을 뷰어에서 보면 이렇게 나옵니다.

문의 주신 분의 설명 내용을 구현해 보려고 캡션을 과장되게 넣어봤습니다.

샘플은 [심야책방 세계문학 시리즈 '이상한 나라의 앨리스']에서 텍스트를 일부 발췌해 사용했습니다.

이 스타일이 실제 적용된 책입니다.

[시대의창 : 서울, 도시의 품격]

[시대의창 : 권력에 맞선 상상력 - 문화운동 연대기]

360도 사진을 EPUB3에서 구현해 봤습니다.

구글 API를 이용한 간단한 코드고 네트워크에 연결되어 있어야 볼 수 있습니다.

오래 전에 설명을 한 적이 있는 방법인데 교보eBook, 알라딘, 예스24 등의 뷰어에서 볼 수 있습니다. 교보eBook 뷰어에서 가장 깔끔하게 보이고요.

이건 구글 API를 이용했기 때문에 네트워크에 연결돼 있어야 볼 수 있습니다. 구글 스트리트 사진이어서 여행책 만들 때 활용하면 좋을거예요.

하지만 네트워크에 연결되지 않은 상태에서 EPUB에 포함된 사진을 보려면 360도 사진용 스크립트가 필요합니다.

three.js(https://threejs.org/)를 이용한 공개되어 있는 360도 사진용 스크립트가 많이 있어 구현을 해 봤는데 교보eBook 뷰어에서 작동이 됩니다.

오늘은 이런게 가능하다 정도만 소개해 드리고, 구글 API를 이용해 구글 스트리트에 있는 360도 사진을 전자책에 넣는 방법, 스크립트를 이용해 EPUB에 포함되어 있는 360도 사진을 전자책에 넣는 방법은 다시 설명드릴게요.

참고로 구글 스트리트에 있는 사진을 넣는 방법은 여기를 참고해 주세요.

http://epubguide.net/134