내맘대로의 EPUB 제작 가이드

홈페이지에 전자책 뷰어를 만들어 전자책을 올리고 싶다는 문의가 종종 들어오네요.

다양한 목적이 있기 때문에 목적에 딱 맞는 방법을 모두 설명드리긴 어렵겠지만,

간단히 전자책 뷰어를 만들어 올리는 방법을 소개해 드리려고 합니다.

제가 이용하려는 뷰어는 Readium에서 개발하고 있는 Cloud Reader입니다.

Readium 뷰어는 다양한 환경에 적용 가능한 EPUB3 표준 뷰어입니다.

많은 전자책 뷰어가 리디움 소스를 활용하고 있고,

W3C EPUB PUB 워킹그룹에 적극적으로 활동하며 EPUB3 표준을 준수하고 있습니다.

그리고 오픈소스여서 무료로 누구나 쉽게 뷰어를 만들 수 있지요.

물론, 상업적인 용도로 쓰려면 어마어마한 회원 가입비가 들긴 하지만요 ^^

홈페이지에 전자책 뷰어를 만들어 전자책을 올리고 싶다는 문의가 종종 들어오네요.

다양한 목적이 있기 때문에 목적에 딱 맞는 방법을 모두 설명드리긴 어렵겠지만,

간단히 전자책 뷰어를 만들어 올리는 방법을 소개해 드리려고 합니다.

제가 이용하려는 뷰어는 Readium에서 개발하고 있는 Cloud Reader입니다.

Readium 뷰어는 다양한 환경에 적용 가능한 EPUB3 표준 뷰어입니다.

많은 전자책 뷰어가 리디움 소스를 활용하고 있고,

W3C EPUB PUB 워킹그룹에 적극적으로 활동하며 EPUB3 표준을 준수하고 있습니다.

그리고 오픈소스여서 무료로 누구나 쉽게 뷰어를 만들 수 있지요.

물론, 상업적인 용도로 쓰려면 어마어마한 회원 가입비가 들긴 하지만요 ^^

리디움 뷰어 공식 샘플

https://readium.firebaseapp.com/?

리디움 Cloud Reader 를 이용하면 누구나 이런 홈페이지를 만들 수 있습니다.

기본 세팅 하는데 30분도 안걸려요. 물론 책 목록을 넣으려면 시간이 좀 걸리지만요.

1. Readium Cloud Reader 소스 파일을 다운로드 받습니다.

https://github.com/readium/readium-js-viewer/releases

2. 다운 받은 파일을 압축을 풀어 홈페이지에 올립니다. Cloud-Reader, Readium 등 폴더를 만들어 올리는게 좋아요.

3. http://homepageurl/cloud-reader/index.html을 입력합니다.

4. 그럼 리디움 뷰어가 보일거예요.

참 쉽지요 ^^

그런데 Readium Cloud Reader는 아직 책 업로드를 지원하지 않습니다.

크롬 뷰어를 쓰면 업로드가 될것 같긴 한데... 나중에 시간 되면 Worker 파일을 뜯어볼까 생각중이에요.

하지만 아직은 파일 업로드가 되지 않아요.

그래서 책을 넣으려면 추가 작업이 필요합니다.

5. EPUB파일 하나를 압축 해제합니다.

6. Cloud-Reader 하위 폴더에 epub_content 라는 폴더를 만드세요.

   - cloud-reader 대신 다른 폴더명을 썼다면 그 폴더에 풀면 돼요.

   - epub_content일 필요는 없습니다. 하지만 폴더명을 바꾸면 다른 설정도 바꿔야 하니 편히 가려면 epub_content 로 만드세요 ^^

7.epub_content 펄더에 압축 해제한 파일을 업로드 합니다.

여기까지 했다면

http://homepageurl/Cloud-Reader/index1.html?epub=epub_content/Content-Folder

브라우저 주소 창에 이렇게 입력해 보세요.

당연히 Clound-Reader와 Content-Folder명은 제대로 입력을 해 줘야되요.

이렇게 입력하면 책이 보일거예요.

http://lesiles.synology.me/cloud-reader/index1.html?epub=epub_content/MO_mobydick

이렇게요.

여기까지 따라왔다면 90% 끝났습니다.

이제 서재 목록을 만들어 줘야되요.

8. 첨부 파일을 다운받으세요

   - epub_lib_test.opds : 제가 테스트용으로 사용한 모비딕 서재 목록

   - epub_library.opds : 리디움 공식 샘플(https://readium.firebaseapp.com/?)에 사용한 서재 목록

9. 파일명은 epub_library.opds  이걸 사용하세요. 저처럼 파일명을 바꾸려면 index.html 파일을 수정해 줘야합니다.

<entry>

  <title>Mobydick</title>

  <author>

    <name>test</name>

  </author>

  <link type="image/jpeg" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/OEBPS/Images/Moby-Dick_FE_title_page.jpg" rel="http://opds-spec.org/image/thumbnail"/>

  <link type="application/epub" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/" rel="http://opds-spec.org/acquisition"/>

  <updated>2016-02-12T00:00:00Z</updated>

  <id>READIUM_OPDS_0123456789_1</id>

</entry>

이게 책 하나의 세트입니다.

- 책 제목

<title>Mobydick</title>

- 저자 명

  <author>

    <name>test</name>

  </author>

- 서재의 섬네일 표지 이미지

<link type="image/jpeg" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/OEBPS/Images/Moby-Dick_FE_title_page.jpg" rel="http://opds-spec.org/image/thumbnail"/>

- 콘텐츠 URL

<link type="application/epub" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/" rel="http://opds-spec.org/acquisition"/>

- 업데이트 날짜(등록 날짜를 쓰면 됩니다. 안써도 돼요)

  <updated>2016-02-12T00:00:00Z</updated>

- 책 ID(ISBN이나 UID를 쓰면 됩니다)

  <id>READIUM_OPDS_0123456789_1</id>

10. opds 파일을 만들었다면 'epub_content' 폴더에 업로드 하세요.

11. 이제 서재 목록을 다시 들어가 보세요.

    http://homepageurl/cloud-reader/index.html

    이렇게 입력하면 책 표지가 보일거예요. 그리고 표지를 누르면 책이 열립니다.

    http://lesiles.synology.me/cloud-reader/index1.html

    이렇게 보이면 제대로 만든거예요^^

홈페이지에 서재 만들기 어렵지 않지요^^?

오랜만에 팁 하나 올립니다^^

전자책 편집 하면서 독자들이 신경쓰지 않을것 같은 페이지는

가독성만 보장 되면 편집은 신경을 많이 쓰지 않습니다.

그래서 이런 스타일이 나오면 그냥 상단에 가운데 정렬 정도로 편집을 했어요.

독자들이 신경쓸 것 같지 않고,

이 페이지는 1초도 안보고 넘길테니 전달하려는 내용만 확실히 전달 되면 편집 스타일은 중요하지 않다고 생각한 것이지요.

그런데 이런 부분에 신경을 쓰는 편집자가 생각보다 많더라구요.

이런건 어떻게 해야 하냐고 여러번 문의를 받았는데 그때 마다 '간단히 처리하세요' 정도로 알려드렸어요.

종이책과 비교하며 보지 않는 이상

페이지 위쪽에 나와도 어색하지 않아요.

페이지 위에 놓는게 싫다면 빈줄<p><br/></p> 5개 정도 추가하면 되지요.

이정도만 해도 별 문제 없다고 생각을 합니다. 

하지만 질문이 많이 들어온다는건 그만큼 신경쓰는 분들이 많다는 뜻이라

'간단히 처리하세요' 정도로는 부족한게 아닐까 생각이 들더라구요.

얼마 전에도 비슷한 문의가 들어와서 이번엔 제대로 스타일을 잡아봤습니다. 

이런 스타일은 중요한 포인트가 있어요.

어떤 경우라도 글자가 다음 페이지로 넘어가서는 안된다.

물론, 글자 크기를 엄청나게 키워서 한 페이지에 글자가 모두 담길 수 없다면 다음 페이지로 넘어갈거예요.

뷰어 높이가 아주 좁아서 한번에 2줄만 표시된다고 해도 다음페이지로 넘어가겠지요.

이런 특수한 경우가 아니라면 다음 페이지로 넘어가지 않아야 되요.

이런 스타일은 쉬워 보이지만 생각보다 까다롭습니다.

CSS를 잘 모르는 사람들은 vertical-align을 쓰면 된다고 생각해요.

vertical-align으로도 가능하지만, 그냥 되지는 않아요.

vertical-align로 직접 편집해 보세요.

팁을 드리자면 table 관련 스타일을 함께 적용해야 합니다.

저는 box-orient라는 속성을 사용했어요.

이 속성은 문제가 하나 있습니다. 표준 CSS 속성이 아니에요.

하지만, 국내 유통사 뷰어는 대부분 이 속성을 지원합니다.

box-orient는 수평 혹은 수직으로 레이어를 관리할 수 있도록 하는 속성이에요.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

box-pack이라는 속성과 함께 사용하면 글상자 안의 도다른 글상자나 block 속성의 태그를 좌우, 혹은 상하로 정렬할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack

그런데 세로 속성을 줄 때 문제가 생겨요.

글상자에 테두리를 그리고 높이 100%(height : 100%)을 하면, 페이지가 가득 찰 것 같은데 텍스트가 있는 부분 까지만 테두리가 생기지요.

이 문제를 해결하려면 vh라는 단위를 써야되요.

vh는 현재 디스플레이 크기에 따른 비율이에요.

현재 디스플레이 해상도의 높이가 100vh지요.

그래서 width : 100vh;  하면 화면 가득 테두리가 그려집니다.

하지만, 이 역시 문제가 있어요.

리디북스는 100vh가 여백을 제외하고 현재 화면 높이에 맞게 그려지는데 교보뷰어는 100vh로 할 경우 여백까지 포함해 버리지요. 현재 화면 크기가 100이고, 뷰어 기본 여백이 5라면 교보 뷰어는 105가 되는거예요. 그래서 100vh로 놓으면 교보 뷰어에서는 일부 내용이 다음페이지로 넘어갑니다.

이 문제는 간단한 트릭으로 해결할 수 있어요.

100vh가 아닌 80vh 정도로 놓으면 되요. 80vh ~ 85vh 정도면 문제 없을거예요.

그래서 이런 스타일이 나옵니다.

<body>

<div class="box_license">

<div class="box_bottom">

<p>화면 하단에 놓일 내용</p>

</div>

</div>

</body>

.box_license {

height : 80vh;

display: box;

box-orient: vertical;

box-pack: end;

box-align: center;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-box-pack: end;

-webkit-box-align: center;

display: -moz-box;

-moz-box-orient: vertical;

-moz-box-pack: end;

-moz-box-align: center;

}

높이의 80%만 적용되서 화면 아래가 살짝 뜨긴 해요.

그래도 빈 줄을 10개씩 넣어가며 화면 아래에 맞추는 것 보다는 깔끔하게 처리될거예요.

Sigil 0.9.15 버전에서 책보기 편집 기능이 빠졌습니다.

대신 외부 편집기를 연결하도록 바뀌었지요.

그리고 책보기 편집 기능은 PageEdit라는 별도의 편집 프로그램으로 제공합니다.

https://github.com/Sigil-Ebook/PageEdit/releases/tag/0.7.0 

PageEdit는 Sigil에서 분리해 새로운 프로젝트로 진행하려는 것 같습니다.

기존 편집 기능은 미리보기와 큰 차이가 없어 이를 좀 더 발전시키려는 거지요.

그런데 아직은 별 기능이 없이 Sigil에서 떨어져 나와 불편한 점이 많습니다.

그래서 대안으로 쓸만한 편집기를 하나 소개해 드립니다.

http://bluegriffon.org/

Blue Griffon은 HTML 편집기 입니다.

유료 버전을 사면 EPUB 도 편집 가능하지만 인디자인을 EPUB으로 변환하기엔 불편한 점이 많아요.

무료 버전은 HTML 편집만 제공합니다. 대신 Sigil의 PageEdit를 대신할 만한 좋은 편집기예요.

초보자가 Sigil을 사용하려면 아주 어렵습니다.

HTML과 CSS가 익숙하지 않기 때문에 스타일 하나 잡으려고 해도 힘이 들지요.

BlueGriffon은 CSS 편집기를 제공합니다.

원하는 속성을 선택하면 속성에서 지정 가능한 다양한 설정을 알려주고 쉽게 스타일을 꾸밀 수 있습니다.

이전 Sigil에서도 외부 편집기를 사용할 수 있었지만 WYSIWYG 편집기가 필요 없어 텍스트 편집기에 연결해놨어요.

그런데 책보기 편집 기능이 빠지면서 아이콘이 하나 생겨 WYSIWYG 편집기를 연결해 사용하기 쉬워졌습니다.

BlueGriffon을 설치한 후 Sigil 설정에서 외부 편집기를  BlueGriffon으로 연결을 하세요.

그리고 기본적인 스타일을 BlueGriffon에서 잡은 후 Sigil로 돌아와 편집을 하면

초보자도 까다로운 스타일을 쉽게 만들 수 있습니다.

유료 버전을 구입해 EPUB을 바로 만들어도 좋지만, 유료 버전 구입할 정도가 아닌, 가끔 한권 만드는 초보자라면

BlueGriffon + Sigil도 괜찮은 조합이에요.

시간 날 때 BlueGriffon + Sigil로 전자책 만드는 방법을 올리겠습니다^^

https://sigil-ebook.com/2019/06/25/sigil-0-9-15-beta-release/

Sigil 0.9.15 버전이 공개됐습니다.

0.9.14 버전 공개할 때 언급했던 대로 Book View가 빠졌어요.

Book View가 외부로 빠지면서 다른 HTML 편집기와 연결해 작업할 수 있게 되었습니다.

그리고 Book View의 기능을 개선할 거라고 하니 지금 당장은 불편하지만 앞으로 개선될 것 같아요.

Sigil 0.9.15 버전 사용하기 전에 아래 내용을 꼭 확인하세요.

업데이트를 안할 분들은 0.9.10 버전이나 0.9.14 버전을 사용하세요.

1. Book View가 외부로 빠졌다.

   이제 편집 내용을 확인할 수 있는건 미리보기 뿐입니다. 미리보기는 업데이트 되면서 강제종료 이슈가 있네요. Book View가 편한 분은 업데이트를 안하는게 좋아요.

1.0.0 이후 미리보기가 구 버전과 비교해 월등히 개선되었습니다. 그리고 책보기가 없어 불편하신 분이라면 코드 편집이 익숙하지 않은 분일테니 Sigil이 아닌 다른 편집기를 권해드려요. Sigil을 사용하시려면 업데이트 후 이용하세요. 이전 버전과 비교할 수 없을 정도로 많은 기능이 개선되었습니다.

Book View 기능을 하는 PageEdit가 필요한 분은 여기서 다운로드 하세요.

https://github.com/Sigil-Ebook/PageEdit/releases/tag/0.7.0

   대신 외부 편집기를 쉽게 사용할 수 있습니다. 사용하는 HTML 편집기가 있다면 Sigil에 연결해 쓸 수 있습니다. 잘 활용하면 Book View 보다 편하네요.

2. 한글 메뉴가 지원되지 않는다.

   한글 번역율이 낮아서 메뉴가 지원되지 않습니다. 현재 번역율이 50%정도여서 한동안 메뉴는 영문으로 봐야합니다. 한글 메뉴가 편한 분은 0.9.10 버전을 사용하세요.

1.2.0 버전까지 한글 메뉴가 필요한 분은 https://www.epubguide.net/305 이 글을 참고하세요.

1.2.0 다음 버전 부터는 한글 메뉴가 추가될 예정입니다.

3. 플러그인 도구 아이콘이 10개로 늘었다.

   플러그인 도구 아이콘을 5개 단위로 10개까지 쓸 수 있습니다. 플러그인을 많이 안쓰는 분은 5개만 열어둘 수 있고, 쓰는 플러그인이 많으면 10개까지 아이콘으로 등록해 사용할 수 있습니다.

4. Windows x64 버전만 지원합니다. 물론 컴파일을 통해 x86 버전을 쓸 수 있지만 소스를 컴파일해 쓸 분은 많지 않으니 사실상 X64만 지원한다고 봐야겠지요.

큰 변화는 이정도입니다. 

물론 이보다 큰 변화가 있습니다.

개발 환경이 QtWebKit에서 QtWebEngine으로 바뀌었습니다.

0.9.15에서 가장 중요한 변화인데, 사실 편집자들은 신경 안써도 되지요.

녕하세요^^

국립중앙 도서관에서 출판인을 위한 전자책 제작 교육을 진행합니다.

Sigil을 이용해 인디자인 파일을 EPUB으로 변환하는 과정입니다.

출판계에 종사하고 전자책 제작 경험이 있는 초/중급을 대상으로 하는 교육입니다.

관심있는 분들 많이 신청해주세요^^

상세정보 보기 http://nl.go.kr/nl/service/meet/edu_view.jsp?eduCode=289

■ 교육개요 
ㅇ 제 목 : (출판인을 위한) 전자책 제작 교육 - 인디자인 to EPUB 변환 실습
ㅇ 일 시 : 2019. 6. 17.(월), 18.(화), 19.(수), 20.(목), 25.(화), 27.(목) 14:00~17:00 (총 6일)
ㅇ 장 소 : 국립중앙도서관 디지털도서관 대회의실(지하3층)
ㅇ 대 상 : 도서관 이용자(출판업계 종사자), 30여 명 선발

▪ Sigil의 기본 사용법을 알고 전자책 제작 경험이 있는 편집자 혹은 인디자인으로 종이책 편집을 해 본 경험이 있는 편집 디자이너
▪ 1인 출판사, 출판편집자, 편집 디자이너, 작가 등 출판업계 종사(희망)자

ㅇ 교육비 : 무료
ㅇ 준비물 : (필수) 개인 노트북
               (권장) 전자책 제작을 위한 인디자인 혹은 콘텐츠 원고
ㅇ 강 사 : 박웅영 (내맘대로 출판사 대표)
               - 내맘대로의 EPUBGUIDE.NET 운영
               - 전자출판학회 상임이사
               - 저서 <교보문고가 제공하는 EPUB 제작가이드>
               <제대로 된 전자책 한권 잘 만들기 Sigil Using Bible 초급자편>
ㅇ 문 의 : 02-3483-8846

■ 선발절차
ㅇ 교육 신청 방법 : 참가신청서 작성 후 담당자에게 이메일 신청 skalib@korea.kr
ㅇ 접수기간 : 2019. 5. 17.(금) ~ 5. 31.(금), 15일간
ㅇ 교육대상자 발표 : 2019. 6. 10.(월) 홈페이지 공지 및 개별 통보
- 국립중앙도서관 www.nl.go.kr > 소통·참여 > 도서관소식 > 공지공고 > 교육/영화

※ 상기 일정은 추진 과정에서 변경될 수 있음

얼마 전부터 사용하던 Sigil 맞춤법 검사 dic 파일입니다.

자료 출처 : https://github.com/spellcheck-ko/hunspell-dict-ko/

hunspell이라는 방식의 맞춤법 검사 DB입니다.

Sigil에서 기본 제공되는 맞춤법 검사가 hunspell 방식이기 때문에 수정 없이 사용할 수 있습니다.

사용법

1. 압축을 해제한 후

2. Sigil 설정 폴더 > hunspell_dictionaries 폴더에

3. ko.aff, ko.dic 두 파일을 복사합니다.

4. 설정>Spellcheck Dictionaries>사전:한국어  를 선택합니다.

5. Higlight Misspelled Words를 체크합니다.

이렇게 설정한 후 코드보기 창에 들어가면 맞춤법에 문제가 있는 글자에 빨간 밑줄이 보입니다.

Alt+Q를 누르면 맞춤법에 문제가 있는 단어 목록을 볼 수 있습니다.

F4를 누르면 한 단어씩 찾아가며 맞춤법을 수정할 수 있습니다.

빨간 줄 글자에서 마우스 오른쪽 버튼을 누르면 추천 단어, 오류 표시 무시, 사용자 사전에 추가 등의 기능을 쓸 수 있습니다. 

100%는 아니지만, 기본적인 맞춤법은 다 찾아주니

개인 출판 하시는 분들께 도움이 될 것 같아 공유드립니다.