내맘대로의 EPUB 제작 가이드

국내 주요 유통사 4곳(교보문고, 예스24, 알라딘, 리디북스)의 뷰어가 EPUB3 형식을 지원합니다.

팝업 주석에 주로 사용하는 epub:type 속성과 aside, mark, ruby, mathML 등을 사용할 수 있게 되었습이다.

Fixed Layout은 교보ebook을 제외하면 모든 유통사가 제대로 지원하지 않습니다.

리디북스는 파일 자체는 받아주지만 판형이 전부 깨집니다.

알라딘과 예스24 뷰어는 오류가 생깁니다.

W3C에서 제공하는 EPUB3 팝업 주석 샘플 코드를 그대로 사용할 경우 일부 유통사만 팝업으로 지원합니다.

교보, 리디, 예스24는 팝업 주석으로 표시를 합니다.

알라딘은 링크로 이동을 합니다.

교보문고, 리디북스, 예스24는 팝업 주석을 동일한 코드로 편집할 수 있습니다.

코드는 W3C에서 제공하는 Moby-dick EPUB3 샘플을 참고하세요. 

알라딘은 주석을 처리하려면 자체 코드를 사용해야 합니다. 이정도면 알라딘 팝업주석을 포기하는게 좋습니다.

언젠가는 알라딘도 3사의 주석 코드를 사용할 가능성이 높습니다. 그러니 지금은 포기하고, 업데이트를 기다리는게 변칙적인 팝업주석 코드를 쓰는 것 보다 더 효율적일거예요.

* ○ 지원함 / △ 열리기는 함. 작동은 하지 않음 / X 지원 안함 또는 열릴 때 오류

* 팝업 주석은 aside 태그와 epub:type="noteref", epub:type="footnote"를 사용해 링크로 연결한 주석을 의미합니다. 이 방식은 W3C에서 제공하는 주석 Sample에 포함되어 있는 코드입니다.

** 동영상은 Sigil의 삽입 기능을 이용해 추가하였고, 아무런 수정을 가하지 않은 상태에서 테스트 했습니다.

    <video controls="controls" src="../Video/video.mp4">video</video>

*** RTL/LTR은 일본어 책의 세로쓰기, 오른쪽에서 왼쪽 넘김이나 아랍어의 오른쪽-왼쪽 쓰기 등을 지원하는 기능입니다. 

테스트 원하는 기능이나, 유통사가 있으면 댓글 남겨주세요. 테스트 후 추가하겠습니다.

아직 EPUB3 파일 유형을 열 수 있는 수준이지만 그래도 큰 발전입니다.

EPUB2는 폐기된지 10년이 다 되가고 EPUB3로 표준이 완전히 넘어갔는데 

국내에서는 여전히 EPUB2가 메인이 되고 있지요.

EPUB3를 지원한다고 해서 멀티미디어, 스크립트, 미디어오버레이를 지원해야 하는 것은 아닙니다.

표준에서도 이런 항목들은 지원 가능한 기능이지 필수나 권고 항목은 아닙니다.

그래도 교보ebook이 EPUB3에서 지원 가능한 항목을 가장 많이 지원하고 있습니다.

이렇게 좋은 뷰어인데 왜 교보는 형편없는 돈을 들여 형편없는 뷰어로 교체하려고 하는지 모르겠어요.

교보ebook은 현재 iBooks 뷰어와 함께 상용 뷰어 중에서 EPUB3의 멀티미디어, 스크립트, 미디어오버레이, MathML을 가장 잘 표현하는 뷰어 중 하나입니다. 전 세계적으로 봐도 교보eBook, iBooks 처럼 잘 돌아가는 뷰어를 찾아보기 힘들어요.

이제 EPUB3로 만들면 되느냐... 하면 국내에서는 아직 멀었습니다.

주요 유통 4의 뷰어가 EPUB3를 지원을 EPUB3 유통을 지원하는 것은 아닙니다. 그 외 유통사는 뷰어조차 EPUB3를 지원하지 않는 곳이 많습니다.

EPUB2, EPUB3 두 벌을 관리하면 좋겠지만, 많은 출판사들이 그정도 노력을 들이기 힘들지요.

Sigil 2.2.0 버전이 올라왔습니다.

https://github.com/Sigil-Ebook/Sigil/releases

이번 버전은 UI 개선이 많이 됐습니다.

HI-dip 옵션을 빼고, 윈도우 설정에 자동으로 따르도록 변경되었고,

현재 선택된 창을 강조해 주는 기능, 접근성 강화를 위해 커서 두께를 2배로 캐워주는 기능 등

UI 변경이 많이 됐습니다.

찾기 바꾸기 기능도 많은 부분 개선되었습니다.

SVG, JS, 기타 파일을 검색할 수 있게 되었고

정규식에서 Unicode Property (UCP) 옵션을 사용할 수 있습니다.

이전에는 한글만 찾으려면 [가-힣] 또는 [ㄱ-힣] 처럼 개별 글자를 지정해야 했지만

p{hangul}

이렇게 하면 한글을 찾을 수 있습니다.

한글, 영문, 한자, 일본어 등을 보다 쉽게 찾을 수 있고,

특정 언어 뿐 아니라 숫자, 하이픈, 수학기호 등 특정 목적 문자도 쉽게 찾을 수 있습니다.

사용법은 아래 사이트 참고하시기 바랍니다.

https://www.regular-expressions.info/unicode.html

Sigil은 기존 전자책 파일(.epub)을 열고, HTML/텍스트 파일을 읽어 전자책 내용으로 변환할 수 있습니다. 저장 시에는 이미지, 스타일 시트, 폰트 등 모든 요소를 포함한 하나의 .epub 파일로 압축됩니다.

문서 열기/추가

열기

열기 도구 버튼 또는 파일=>열기 메뉴를 이용해 기존 파일을 열 수 있습니다.

EPUB 파일

·       EPUB 파일 내 모든 구성 요소를 자동으로 불러옵니다. 여기에는 HTML 파일, 이미지, 스타일시트, 메타데이터 등이 포함됩니다.

·       Sigil은 지정된 폴더에 파일들을 압축 해제하며, 정확한 경로가 책 탐색기의 툴팁을 통해 표시됩니다. 책 탐색기는 파일 유형 또는 기능에 따라 파일들을 그룹화합니다.

·       사용자 정의 EPUB 만들기에서 임의 형식을 지정한 경우 Sigil은 이 형식을 따라 EPUB 구조를 다시 구성합니다.

·       EPUB에 일반적인 오류가 존재하는 경우 Sigil은 이를 수정하려고 시도합니다.

·       정리 후에도 EPUB가 유효하지 않은 HTML 파일을 포함하는 경우, Sigil은 여전히 파일을 로드하고 수정이 필요한 오류를 보고합니다.

XHTML 파일

·       XHTML 파일과 연결된 이미지, 스타일시트 등 EPUB에서 불러올 수 있는 파일은 함께 불러와 지정된 폴더에 배치됩니다.

·       XHTML 파일 내 메타데이터는 책의 메타데이터로 추가됩니다.

·       사용자 정의 EPUB 만들기에서 임의 형식을 지정한 경우 Sigil은 이 형식을 따라 EPUB 구조를 구성합니다.

·       정리 후에도 XHTML 파일이 유효하지 않은 경우, Sigil은 오류를 보고하지만 파일을 불러오지 않을 수 있습니다. 이 경우 Sigil 외부에서 오류를 수정해야 합니다.

텍스트 파일

·       텍스트 파일이 XHTML로 변환됩니다. 단락은 공백 행으로 구분되어야 합니다.

파일 추가

현재 편집하고 있는 EPUB에 다른 파일을 추가하려면 기존 파일 추가 버튼을 사용합니다. 메뉴에서 파일=>추가=>기존 파일을 누르거나, or 책 탐색기에서 오른 쪽 버튼을 누른 후 기존 파일 추가를 눌러 추가할 수 있습니다.

XHTML 파일

·       파일을 열 때와 달리 메타데이터는 불러오지 않습니다.

·       이미지, 스타일시트 등 참조된 파일을 불러옵니다.

·       파일 종류에 따라 적절한 폴더에 배치됩니다.

이미지 파일

·       이미지 파일은 이미지 폴더에 배치됩니다.

비디오 파일

·       비디오 파일은 비디오 폴더에 배치됩니다.

오디오 파일

·       오디오 파일은 오디오 폴더에 배치됩니다.

스타일시트 파일

·       스타일시트 파일은 스타일시트 폴더에 배치됩니다.

폰트 파일

·       폰트 파일은 폰트 폴더에 배치됩니다.

그 외 파일

·       다른 모든 파일은 일반적으로 EPUB에서 사용되지 않기 때문에 책 브라우저의 Misc 폴더에 표시됩니다. 텍스트 파일 등 일부 파일은 Sigil에서 편집할 수 있습니다.

빈 파일 추가

Sigil에서 새 빈 파일을 만들 수도 있습니다. 메뉴 항목의 파일 => 추가에서 선택하고 빈 HTML 파일, 빈 스타일 시트, 빈 Javascript 또는 빈 SVG 이미지 4가지 형식의 파일을 추가할 수 있습니다. 책 탐색기에서 마우스 오른쪽 버튼 클릭 후 바로가기 메뉴를 사용하거나 환경 설정에서 키보드 단축키를 추가하여 이 작업을 수행할 수도 있습니다.

HTML과 스타일시트 파일은 사용자가 미리 지정한 형식으로 탬플릿을 만들어 빈 파일 대신 추가할 수 있습니다. EPUB2 탬플릿은 “user-template2.xthml”와 “user-template2.css”입니다. EPUB3 탬플릿은 “user-template3.xhtml”와 “user-template3.css” 입니다. 이 파일 명으로 탬플릿 파일을 만든 후 편집=>설정(맥 OS는 Sigil=>설정) 창을 열고 왼쪽 하단의 기본 설정 위치 열기 를 누릅니다. 기본 설정 폴더가 열리면 탬플릿 파일을 복사합니다. 이제 빈 HTML 파일, 빈 스타일시트 파일을 추가하면 탬플릿 파일이 추가됩니다.

EPUB 저장

도구 상자의 저장 버튼을 눌러 EPUB을 저장할 수 있습니다. 메뉴의 파일=>저장을 누르거나 단축키를 이용할 수 있습니다. 중요한 수정을 진행하기 전에 반드시 문서를 저장하여 필요할 경우 되돌릴 수 있도록 하는 것이 좋습니다.

저장된 EPUB 파일에는 텍스트, 이미지, 스타일시트, 삽입된 글꼴, 목차, 메타데이터 등 책을 구성하는 모든 항목이 포함되어 있습니다.

EPUB 파일이 조금이라도 변경하고 저장을 하지 않았다면 제목 표시줄의 EPUB 파일명 옆에 곱하기 기호( * )가 표시됩니다.

도서를 저장하면 Sigil은 기본적인 오류를 검사하고 수정해야 할 사항이 있을 때 경고 메시지를 표시합니다. 하지만 항상 EpubCheck Sigil 플러그인으로 감사를 실행하여 일반적인 EPUB 문제를 확인해야 합니다. Sigil 구 버전에서 지원하는 FlightCrew 플러그인과 EPUB 문법 검사는 단순한 문법적 오류를 검사할 뿐 EPUB 적합성 검사 기능이 없습니다.

유통사 등록을 위해서는 반드시 최신 EPUBCheck로 검사를 해야하고 오류가 없어야 합니다.

Sigil은 파일을 저장할 때 문법적인 오류가 있으면 경고 문구를 표시합니다. 수시로 저장을 하면 보다 쉽게 오류가 있는지 확인할 수 있고 바로 수정을 할 수 있습니다.

사본으로 저장

파일의 백업을 원할 때 파일=>사본으로 저장을 누르면 현재 작업 중인 파일과 다른 이름으로 사본을 만들 수 있습니다. 다른 이름으로 저장과 다르게 사본 저장 후 현재 편집 중인 파일을 그대로 사용합니다. 이 기능은 만일을 위한 백업용 파일을 만들어 보관하는데 유용합니다.

파일=>사본으로 저장은 백업 파일을 만들 때 유용합니다.

개별 파일 저장

책 탐색기에서 특정 파일을 선택 후 오른쪽 버튼을 누르면 바로가기 메뉴에 다른 이름으로 저장이 표시됩니다. 이를 이용해 EPUB에 포함되어 있는 파일을 별도로 저장할 수 있습니다. 여러 파일을 선택하면 지정한 폴더에 여러 파일을 저장할 수 있습니다. 이 기능을 이용하면 특정 파일만 다른 사람과 공유할 수 있고 탬플릿을 만들 때도 편하게 이용할 수 있습니다.

전자책 제작 지원사업 발표가 난 것 같네요.

발표가 나면 장애인접근성 전자책 제작 관련 키워드가 확 늘어납니다.

지원 비용이 높으니 일단 신청하고,

장애인접근성 전자책이 뭔지도 모르면서 돈을 받으려고 하는 것이겠지요.

다른 편집이 전혀 없는 소설 정도면 잘 몰라도 만들 수 있을거예요.

그런데 조금만 복잡해 져도 아주 까다로운게 장애인접근성 EPUB3입니다.

검수도 까다롭기 때문에 저도 한번에 통과하는 경우가 거의 없어요.

보통 1회 검수 후 수정사항 반영해 끝을 내고,

복잡한 책은 2회 정도 검수를 받습니다.

돈만 생각하고 지원한 분들은...

할말 많지만 여기서 끝~~

검수 잘 받으시기 바라고,

통과 못하면 이후 지원사업 선정에서 제외된다는 조항도 잘 챙겨 읽으셨을거예요.

박스글은 내용에 따라 이미지로 넣기도 하고, 박스 스타일을 만들어 텍스트로 넣기도 합니다.

가변 화면에서 어떻게 보일 것인지가 이미지와 텍스트의 선택 기준이 됩니다.

아래 같은 내용이면 이미지로 넣을 때가 많습니다.

이런 편집을 이미지로 넣는 이유가 있습니다.

종이책은 판형이 고정되어 있기 때문에 페이지 크기에 맞춰 선 길이를 잡으면 끝이에요.

그런데 전자책은 폭이 일정하지 않습니다.

종이책 길이에 딱 맞게 밑줄을 그어 놓으면 화면이 작을 때 행갈이가 되거나 화면을 벗어나게 되고

화면이 크면 오른쪽 여백이 생깁니다.

하지만 이미지로 넣어도 문제는 있습니다.

화면이 작으면 글자 크기도 함께 작아진다는 것이지요.

이 책을 만들면서 편집자(종이책)가 요청을 햇습니다.

다음 페이지에 나오는 박스 글과 글자 크기가 다르게 보이는데 맞출 수 없냐고요.

다음 페이지에는 이런 내용이 나옵니다.

이 내용은 텍스트가 들어가 있기 때문에 밑줄이 있는 곳도 행갈이를 할 수 있습니다.

줄글이기 때문에 오른쪽이 비어도 어색하지 않지요.

내용도 캡처한 다음 페이지까지 계속 이어집니다.

그래서 이 부분은 이미지가 아닌 텍스트로 넣었습니다.

종이책 편집을 하면 별 것 아닌듯 보이지만, 화면 폭이 가변이라는 점 때문에 밑줄 하나를 긋더라도 전자책에서는 여러 가지를 생각해야 합니다.

줄만 그리는 거면 쉽습니다.

그런데 화면 폭이 클 때 이렇게 보입니다.

더 쉽게 그리는 방법도 있어요. 그낭 _______ 이렇게 특수문자를 사용할 수 있습니다.

하지만 이렇게 특수문자를 사용하면 화면 폭이 좁을 때 행갈이가 됩니다.

이런 문제를 해결하는 간단한 방법이 있습니다.

박스의 크기를 제한하는 것이지요.

이렇게 일정 크기를 넘어서면 박스 크기를 고정시킵니다.

화면이 작을 때는 행갈이가 되지 않도록 화면 크기에 100%를 맞워 주고요.

전자책 독자들의 불만 중 하나가

종이책에 비해 편집이 엉망이라는 내용이 있습니다.

전자책은 종이책 보다 더욱 다양한 편집을 할 수 있는데도 종이책 처럼 예쁘게 만들지 못한다는 오해를 받고 있어요.

이런 사소한 디테일만 잘 챙겨도 전자책에 대한 인식이 바뀔 거예요.