posted by 내.맘.대.로 2017. 4. 28. 18:00

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

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

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




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


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


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

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


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


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


http://epubguide.net/134



반응형
posted by 내.맘.대.로 2017. 4. 28. 11:54

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.



수강 신청 http://www.nl.go.kr/nl/service/meet/edu_view.jsp?eduCode=240


국중 전자책 제작 교육 신청 공지가 올라왔습니다.

[이상한 나라의 앨리스]로 소설 수준의 쉬운 난이도 전자책을 처음부터 끝까지 직접 만들어 보는 수업입니다.

초급 수준의 편집으로 본문 제목을 어떻게 꾸밀지, 이미지는 어떻게 넣는지, 주석이나 인용구 등 본문과 다른 내용은 어떻게 꾸미는지 등의 간단한 스타일 편집을 익힐 수 있을거예요.


초급자 대상이지만 HTML과 CSS로 편집을 하기 때문에 전자책을 전혀 다뤄보지 않은 분들은 조금 힘들 수도 있어요. Sigil이나 윙크 등으로 전자책을 만들어보신 분들 중에 

1. 본문(제목, 이미지, 인용구 등)을 좀 더 보기 좋게 꾸며보고 싶다 생각하신 분들, 

2. 편집기에서 제공하는 편집 방식으로는 본인이 원하는 스타일을 표현하기 부족하다고 느끼신 분들, 

3. EPUBCheck에서 오류가 났는데 뭐가 문제인지 감이 안오는 분들

이런 분들이 들으면 초급에서 초중급, 중급으로 한단계 올라서실 수 있을거예요. 

아래 내용 보시고 관심있는 분들은 신청해주세요 ^^


 
              
 전자책 제작 실습-전자책으로 만드는 '이상한 나라의 앨리스'
 
국립중앙도서관에서는 전자책 제작에 대한 이해를 돕는 강좌를 다음과 같이 진행합니다.
관심 있는 분들의 많은 참석 바랍니다.
 
원활한 교육운영을 위해 교육신청서 작성시 아래의 질문에 답변 부탁드리겠습니다.
 1. 전자책 제작, 검수, 유통 등 현재 전자책 관련 업무를 하고 계신가요?
 2. 전자책 편집 프로그램(SIgil, Wink2.0, 이북스타일리스트 등)을 사용해 보신적이 있나요? 
  3. 잘 다루지는 못해도 HTML, CSS가 무엇인지 알고 계신가요?
ㅇ교육명: 전자채 제작 실습-전자책으로 만드는'이상한 나라의 앨리스'
ㅇ일  시: 2017.5.10/12/17/19/24/26(수,금) 6회 14:00~17:00
ㅇ장  소: 국립중앙도서관 디지털 도서관 소회의실(지하2층)
ㅇ대  상: 도서관 이용자 및 일반인(16세이상) 35명
ㅇ강  사: 박웅영(토네이도미디어그룹 기획팀장)
            - 교보문고 근무(2003~2014)
            - 전자출판 표준화포럼 EPUB PG에디터 및 간사
            - KERIS 주관 전자출판과 교육 기술 융합 표준(EDUPUB)동향 조사 및 분석 연구 참여
            - <교보문고가 제공하는 EPUB 제작 가이드> 저술    
ㅇ문  의: 02-3483-8846
ㅇ교육내용
   1일차(5.10) Sigil에 대한 소개 및 전자책 제작에 대한 전반적인 설명
   2일차(5.12) 편집기초-전자책을 위한 HTML (HTML 기초문법 및 주요 태그)
   3일차(5.17) 편집기초 전자책을 위한 CSS (CSS기초 문법 및 주요 속성)
   4일차(5.19) 전자책 편집-이상한 나라의 앨리스(1)-HTML과 CSS로 스타일 편집하기
   5일차(5.24) 전자책 편집-이상한 나라의 앨리스(2)-HTML과 CSS로 스타일 편집하기
   6일차(5.26) 고급 편집 기술 활용-Clips, 정규표현식, 플러그인 활용하기
※ 협조사항
   교육 신청이 승인되신 분에 한해 교육 참석이 가능합니다. (승인여부 확인 : 도서관 홈페이지>내서재>신청내역>이용자교육)


반응형
posted by 내.맘.대.로 2017. 4. 24. 12:49

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

모 출판사의 요청으로 오류가 있는 EPUB을 수정을 했습니다.

유통사에 등록을 하는데 오류가 생긴 콘텐츠 20여종을 봐달라고 하더라고요.

대부분 구글 플레이북 등록시 오류가 나는 콘텐츠였고, 일부는 리디북스 같은 국내 유통사에서도 문제가 됐다고 합니다. 


구글은 EPUB2, EPUB3 모두 등록 가능한데 IDPF에서 제공하는 EPUBCheck에 오류(Error, Warning)가 없어야합니다. 오류가 하나라도 있으면 등록이 되지 않습니다. 반면 국내 유통사는 오류가 나도 뷰어에서 보는데 문제가 없다면 받아주기 때문에 EPUBCheck에서 오류가 있어도 정상등록되는 파일이 많습니다. 그래서 국내 유통사에 정상 등록 됐는데 구글에 등록하면서 오류가 발생한 파일들이 대부분 수정 대상이었습니다.


구글과 국내 유통사의 정책 중 어느게 옳다고 단정지을 수는 없어요. 까다롭게 표준을 지키느냐(구글), 표준에 벗어나더라도 일정 부분은 허용을 하느냐(국내 유통사)의 문제인데 양쪽 모두 수긍할 만한 이유가 있습니다.


구글은 표준에 위배되면 등록 자체를 막습니다. 구글 뷰어에서 아무 이상이 없어도 등록을 할 수 없습니다. 표준을 우선으로 하는 건데, 필요에 의해 표준에서 벗어난 편집을 하면 구글에는 등록할 수 없습니다. 예를 들어 국내 유통사 중 EPUB3 파일을 받아주지 않는 유통사가 많습니다. 그래서 ruby, mark, epub:type 같은 EPUB2에서 허용하지 않는 태그나 속성을 EPUB2에 쓰는 경우가 있습니다. 이렇게 만든 EPUB2 파일은 구글에 등록할 수 없는 것이지요. 국내 뷰어가 EPUB3를 지원하면 문제가 해결된다고 볼 수 있지만, 그리 쉬운 얘기가 아닙니다. 구글도 EPUB3를 제대로 지원하지 않는 반쪽짜리인데 EPUB3 파일을 받아주고 있어요. 복잡한 스크립트, mathML, SVG 등을 포함한 EPUB3 파일을 구글 플레이북 뷰어에서 열면 제대로 구현되지 않는 경우가 많습니다. EPUB3를 제대로 지원하지 못하면서 EPUB3 파일을 받아들이는 것도 EPUB2 표준에서 허용하지 않지만 필요에 의해 뷰어에서 허용하는 것과 별 차이가 없습니다. 

양쪽 모두 필요에 의해 양쪽 모두 필요에 의해 기능을 제한한 EPUB3를 받거나, EPUB2의 기능에 일부 EPUB3를 허용하는 등의 반쪽짜리 뷰어입니다.


얘기가 딴 방향으로 벗어났는데, 구글은 받아주지 않는데 국내 뷰어는 받아준다고 해서 어느쪽이 더 좋다고 말할 수 없다는 거예요.


어째든, 오류가 나는 콘텐츠는 수정을 해야합니다. 

빈번하게 발견되면서 간단히 수정 가능한 오류를 몇가지 알려드릴게요.


1. <br/> <img...>


이 두 태그는 단독으로 사용할 수 없습니다. 반드시 다른 태그 안에 포함이 되야하는 태그예요. 그런데 많은 편집자들이 이 태그를 단독으로 사용합니다. 


<p>본문 내용</p>

<br/>

<p>본문 내용</p>

<img src="sample.jpg" alt="sample" />


위 코드는 문법에 어긋나있습니다. 이 코드가 아무 문제 없다고 생각하는 분들이 생각 외로 많아요. 심지어 HTML 을 공부했다는 분들조차 저게 문제가 아니라고 얘기하는 경우가 있습니다. 뷰어에서 보면 아무 문제 없는 코드예요. 



*** Col: 57: ERROR(RSC-005): Error while parsing file 'element "img" not allowed here; expected element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")'.


*** Col: 6: ERROR(RSC-005): Error while parsing file 'element "br" not allowed here; expected the element end-tag or element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")'.


EPUBCheck로 오류 검사를 하면 이런 오류가 나옵니다.

오류 메시지 내용은 '여기에는 허용되지 않는 태그'라는 것인데, p, h1~h6, blockquote, address, div 등의 태그 사이에만 허용되기 때문이에요. 저 코드는 이렇게 고칠 수 있습니다.



<p>본문 내용</p>

<p><br/></p>

<p>본문 내용</p>

<p><img src="sample.jpg" alt="sample" /></p>

<div><img src="sample.jpg" alt="sample" /></div>


img 태그는 p나 div로 묶어줄 수 있고, br 태그도 div를 사용해도 오류는 나지 않지만 div를 사용해야 하는 이유가 없다면 문단 태그인 p 태그로 묶어주는걸 권합니다.


이 외에도 비슷한 오류가 나는 태그가 있어요. 단독으로 사용할 수 없고 다른 태그 안에 반드시 포함되야 하는 태그입니다.


* 짝이 있는 태그

<li> - 반드시 <ol> 태그 안에 붂여야 함

<tr> <td> - 반드시 <table> 태그 안에 묶여야 함


* 잘못된 코드

<div>

<li>리스트1</li>

<li>리스트2</li>

</div>


* 수정된 코드

<ol>

<li>리스트1</li>

<li>리스트2</li>

</ol>



* 텍스트 편집 태그

<i>, <em>, <strong> 등 - 반드시 p, div, blockquote 등 단독으로 사용 가능한 태그 안에 포함되야 함.


*잘못된 코드

<em>제목1</em>

<p>본문 내용</p>


*수정된 코드

<p><em>제목1</em></p>

<p>본문 내용</p>



2. 필수 메타데이터


국내 유통사 뷰어는 메타데이터를 필수로 요구하지 않습니다. 그래서 EPUB2 표준에서 '필수(must, should)'로 추가하라고 나와있는 메타데이터가 없어도 받아줍니다. 편집자들이 메타데이터를 입력하지 않아서이기도 하고, 책을 등록할 때 서지정보를 별도로 받아서이기도 합니다. 메타데이터만 제대로 입력되어 있어도 책을 등록할 때 책 제목, 저자명, 출간일, ISBN 등의 정보는 자동으로 서지에 입력할 수 있을텐데, 유통사가 요구를 하지 않으니 출판사는 메타정보를 신경쓰지 않고, 유통사도 메타정보에 대해 까다롭게 굴면 출판사에서 귀찮아 하고 서지정보를 별도로 받으니 필요를 느끼지 못해 제대로 관리를 안하는 것 같아요.


필수 메타데이터를 제대로 입력하지 않으면 이런 오류가 나옵니다. 이 정보 없어도 책 보는데 아무 문제 없습니다. 하지만 이 정보는 책의 '판권면' 같은 역할을 합니다. 판권면 관심 갖는 독자가 없어도 판권면을 넣는 것처럼 책 보는데 아무 지장 없어도 메타데이터는 꼭 입력을 해야되요.


*** Col: 14: ERROR(RSC-005): Error while parsing file 'element "metadata" incomplete; missing required elements "dc:language" and "dc:title"'.


메타데이터 오류는 입력을 하지 않아 생기는 문제, 잘못 입력해 생기는 문제 두가지로 나옵니다. Sigil 같은 편집 프로그램은 오류를 막기 위해 언어 설정과 제목을 무조건 추가합니다. 그런데 '설정'에서 한국어(ko)가 아닌 영어(en)로 두는 경우가 있어요. 


전자책 만든 후 테스트를 하려고 iBooks에 넣었는데 책 제목이 [No data]로 보였다면 책 제목을 수정하지 않은거예요.

그리고 일부 뷰어(외국에서 만든)에서 한글이 깨진다면 언어설정 문제일 수 있습니다. 


언어, 책 제목에 추가로 ISBN이 들어가야 합니다. 대부분의 편집 프로그램에서 UUID라는 identifier를 강제로 추가하기 때문에 오류는 나지 않지만, ISBN도 반드시 들어가야 하는 정보입니다.


3. img 태그에 alt는 필수 항목


img 태그는 2가지 속성이 반드시 포함되야 합니다. src는 이미지의 위치를 지정하는 속성이기 때문에 이 속성이 없으면 이미지가 보이지 않습니다. 그래서 이 속성을 빼먹을 일은 없지요. 하지만 alt 속성은 빼먹는 분들이 많더라구요. alt 속성이 없어도 문제는 없지만 표준에 어긋나기 때문에 반드시 포함시켜야 합니다.



*** Col: 79: ERROR(RSC-005): Error while parsing file 'element "img" missing required attribute "alt"'.


alt 속성이 없다면 이런 오류가 납니다. alt의 값은 이미지에 대한 설명입니다. 이 이미지가 어떤 내용을 담고 있는지를 구체적으로 적어야 합니다. alt는 첫째, 이미지에 문제가 생겨 표시되지 않았을 때 alt의 설명이 이미지 위치에 표시돼 이미지가 없더라도 어떤 내용인지 알 수 있게 해주고, 두번째는 장애인 등 이미지를 볼 수 없는 사람이 TTS등을 통해 이미지 내용을 확인할 수 있게 해주는 역할을 합니다. 하지만 열악한 제작비용(?)으로 이미지에 대한 설명을 담기는 힘들지요. 그래서 Sigil은 이미지를 삽입할 때 이미지 파일명을 alt 값으로 추가합니다. 장애인 접근성을 고려한다면 이 값을 이미지가 담고 있는 의미를 풀어 수정해 주는게 좋습니다....만 저도 현실과 타협을 하게 되네요 ㅜ.ㅜ


* 잘못된 코드

<p><img src="../Images/img5.jpg"/></p>


* 수정된 코드

<p><img src="../Images/img5.jpg"/ alt="광화문 사거리에서 경복궁 방향으로 찍은 세종대왕 동상 사진"></p>



4. p 태그 대신 div 태그 사용


이건 엄밀히 말해 오류라고 할 수 없고, 오류로 표시되지도 않습니다. 하지만 문단 태그<p>대신 그룹 태그<div>를 쓰는건 웹 표준에 위배됩니다. Sigil에서 이런 오류를 종종 볼 수 있어요. 아래 이미지처럼 Sigil에서 body 태그 사이에 아무 것도 넣지 않은 상태에서 '책보기' 창에 텍스트를 입력하면 <p>태그 대신 <div>태그로 내용이 들어갑니다.



1. body 태그 사이를 공백으로 둔다.


2. 책보기 화면에서 내용을 입력한다.


3. 코드보기 화면을 보면 p태그 대신 div 태그로 문단이 추가된 것을 볼 수 있다.


이런 책이 생각보다 많습니다. 텍스트 중심의 로맨스, 판타지, 무협 같은 편집이 간단한 책에서 이런 오류를 자주 보게 됩니다. 텍스트 원고를 복사 > 붙여넣기하고 코드를 확인하지 않고 저장해서 이런 문제가 생긴다고 짐작이 되요. 이게 왜 문제가 되냐고 되묻는 분들도 계시더라구요. 뷰어에서 아무 문제 없이 보이고 EPUBCheck로도 오류가 없습니다. 독자들이 책을 보는데 아무 지장이 없습니다. 그러면 문제 없는거 아니냐... 하면 할 말은 없는데, HTML의 규칙이 그렇습니다. 문단 태그는 <p> <div>태그는 그룹이나. 특정 영역을 분할(division)할 때 사용하도록 되어 있습니다. 

Sigil에서 복사 > 붙여넣기로 작업을 하는 분들은 p태그 대신 div태그가 사용되지 않았는지 꼭 확인을 해보세요.


5. <p>본문 <p>본문 </p>본문 </p>

모 유통사 뷰어에서 주석을 처리하는데 p태그 안에 다시 p태그를 쓰는 변형된 규칙을 사용하도록 했습니다. 개발자가 HTML을 모르지는 않았을 테고, IDPF에서 제안하는 <aside epub:type="footnote">를 쓰자니 EPUB2에서는 오류가 나서 그러지 않았을까 하는 생각이 들더라구요. 


똑같이 표준을 위반하지만 허용 가능한게 있고 허용하면 안되는게 있습니다. 


예를 들어 EPUB2에서 ruby 태그를 썼다면 이건 EPUBCheck에서 오류가 나도 이해할 수 있습니다. 웹 표준은 지켰지만 EPUB2에서 허용하지 않기 때문에 발생한 오류, 그리고 ruby가 아니면 표현할 수 없는 편집의 충돌이니까요. 


EPUB2는 네트워크에 연결되지 않은 흑백 화면에서 텍스트 콘텐츠를 보는데 아무 문제 없도록 표준을 만들었기 때문에 항상 네트워크에 연결된 스마트폰에서 볼 수 있는 콘텐츠를 만드는데 제약이 아주 심합니다. 그래서 저도 상위 표준을 지키면서 일부 EPUB2의 표준을 어길 때가 있어요. ruby 태그나 주석 처리를 위한 epub:type 속성이 그렇습니다. 


EPUB2의 제한으로 생긴 오류는 EPUB3에서는 허용하기 때문에 파일 형식만 EPUB3로 바꾸면 아무 문제가 생기지 않아요. 


하지만 <p>태그 안에 다시 <p>태그를 쓰는건 웹 표준 자체를 위반합니다. p태그 안에 p태그를 쓰면 EPUB2 뿐 아니라 EPUB3에서도 오류가 발생해요. 그래서 이런 위반은 반드시 피해야 합니다. 


*** Col: 7: ERROR(RSC-005): Error while parsing file 'element "p" not allowed here; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg")'.


* 잘못된 코드

<p>본문 내용<p>본문 내용</p>본문 내용</p>

<p>본문 내용<div>본문 내용</div>본문 내용</p>


p태그 안에 P태그를 사용하면 이런 오류가 발생해요. 위에 예로 들었던 주석 처리가 아니더라도 이런 오류가 있는 콘텐츠가 종종 보입니다. <p>태그 얘기를 했는데 div태그 역시 p태그 안에 들어갈 수 없습니다. div 안에 p가 들어갈 수 있어도 p 안에 div는 들어갈 수 없습니다. 업데이트 된 Sigil에서는 이런 오류 자체를 허용하지 않기 때문에 문제가 생기진 않겠지만 혹시라도 이런 코드를 썼다면 꼭 수정을 해주세요.



편집하면서 종종 봤던 오류를 몇개 정리해 봤습니다. 

전자책 편집하면서 오류가 생겼는데 해결이 안되신다면 오류 메시지와 함께 코드를 알려주세요. 오류 원인과 해결 방법을 알려드릴게요 ^^




반응형
posted by 내.맘.대.로 2017. 4. 17. 07:00

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

한글epubcheck.zip

EPUBcheck 한글화 파일입니다.

Sigil 플러그인 사용법은 압축파일 안에 포함되어 있습니다.

자세한 사용법은 아래 내용을 참고하세요.


플러그인이란?

Sigil에 없지만 있으면 유용할 만한 기능을 Sigil개발자가 아닌 제3자가 개발하고 제공해 Sigil에 추가할 수 있도록 하는 기능입니다. 물론 Sigil 개발자도 플러그인을 개발하긴 하지만 공식적인 Sigil 개발이 아닌, 개인 자격으로 만드는거예요. 플러그인은 편리한 기능을 제공하지만, 개발자는 공식적인 Sigil 개발자가 아니기 때문에 플러그인을 사용할 때 문제가 생길 수도 있습니다. 그렇기 때문에 사용자가 플러그인 설치와 사용 여부를 직접 판단해야 하고, 만약 문제가 생기더라도 Sigil 개발팀이나 이 글을 쓰는 저도 책임을 지지 않습니다^^ 그래도 여기서는 제가 검증한 플러그인을 소개해 드려요. 책임은 지지 않지만, 써보고 문제가 없는 것들을 소개해 드린다는....


[Note About Plugins 원문]Plugins are developed and provided by third parties. Some Sigil developers are also plugin developers but this is separate from Sigil itself. Plugins can be open source as well as proprietary. No vetting by a Sigil developer (unless a Sigil developer wrote the plugin) is performed. Use your judgment if you install and use a plugin. We cannot be held responsible for what a third party plugin that you the user actively installed and ran.  from https://sigil-ebook.com/plugins/



1. @font-face를 자동으로 추가하자 



 전자책을 만들 때 항상 폰트를 추가합니다. Sigil에서는 폰트 파일을 추가한 후 CSS 파일에 @font-face를 매번 입력해야되요. 폰트가 추가되면 자동으로 스타일도 들아가면 좋겠지만, 편집자마다 선호하는 방식이 있으니 기능을 넣어 달라고 요구도 할 수 없습니다. 

저처럼 폰트가 추가되면 스타일이 자동으로 들어갔으면 좋겠다고 생각하는 사람이 있었나봐요. CSSFromFonts라는 제가 원하는 기능의 플러그인이 있습니다. 이 플러그인은 CSS에 폰트를 선언하는 CSS 코드를 추가해 줍니다. 특별히 설명할 내용도 없어요. 그냥 폰트를 추가하고, 플러그인을 실행하면 끝입니다. 그래도 몇가지 주의사항을 알려드릴게요.

1.1 실행 전에 폰트를 추가해 주세요. 

폰트 파일이 없으면 폰트 스타일을 만들 수 없다는건 너무 당연한거예요. 그런데 저도 가끔씩 폰트를 추가하지 않고 버튼을 누를 때가 있습니다. 폰트 폴더에 폰트를 추가한 후 실행을 시키세요. 


1.2 스타일 파일이 없으면 fonts.css 파일이 생성됩니다. 

폰트 스타일은 CSS 편집시 가장 먼저 이루어집니다. 그래서 CSS스타일 파일을 만들지 않고 버튼을 누를 때가 있어요. 그럼 자동으로 fonts.css파일이 생성됩니다. 폰트 스타일을 별도로 관리하고 싶다면 이 방법도 나쁘지 않아요. 하지만 CSS스타일에 넣고 싶다면 CSS파일을 먼저 만드세요.

   

 

1.3 생성된 코드 

플러그인을 실행하면 작업하던 내용이 있더라도 제일 상단에 폰트 코드가 추가됩니다. 

코드는 이렇게 되어 있어요. 


 @font-face { 

 font-family: 'KoPubBatang Bold'; 

 font-weight: normal; 

 font-style: normal; 

 src: url('../Fonts/KoPubBatangBold.ttf'); } 


 그대로 사용해도 되지만, 폰트 이름(font-family)은 사용하기 편한 이름으로 수정할 수 있습니다. 저는 제가 기억하기 쉬운 '기본글꼴' '제목글꼴' '강조용' 등으로 수정해서 사용합니다. font-weight와 font-style도 수정이 가능하고요.  


2. FlightCrew 대신 epubcheck를 사용하자. 



플러그인을 사용하려면 JAVA 1.6 혹은 상위 버전이 설치 되어 있어야 합니다. 대부분의 컴퓨터에 설치되어 있을거예요. 설치가 됐는지는 커맨드 창에서 java 를 치거나 java 다운로드 페이지에 들어가서 확인이 가능합니다. 


 java 다운로드 : https://java.com/ko/download/


 


epubcheck는 IDPF에서 제공하는 공식 EPUB 검증 프로그램입니다. EPUB2, EPUB3 파일을 자동으로 확인해서 버전에 맞는 검사를 실행합니다. 2017년 4월 15일자 기준으로 4.0.2 버전이 나와있고, epubcheck plugin 역시 이 버전의 epubcheck가 포함되어 있어요.


EPUBcheck 공식 다운로드 페이지 : https://github.com/IDPF/epubcheck 


 epubcheck 플러그인을 실행하면 오류가 있을 경우 아래처럼 메시지가 표시되요. epubcheck 결과를 볼 줄 모르는 분들이 많은 것 같은데, 이 부분은 나중에 정리를 할게요. 결과만 잘 읽어도 어디에 무슨 오류가 있는지를 파악할 수 있고, 이 내용을 인터넷으로 검색해 보면 어떻게 수정하는지 쉽게 찾을 수 있습니다. 


 아래 샘플 이미지의 오류를 보면 11번째줄에 있는 strong이라는 태그가 address, blockquote, del, div, p....등의 태그 안에 들어가 있어야 한다고 되어 있습니다. 쓸 수는 있지만 위치가 잘못 됐다(not allowed here)는 의미예요. 


12번째 줄에 있는 aside라는 태그는 EPUB2.0에서 쓸 수 없는(not allowed anywhere) 태그입니다. epub:type, aside 등은 epub2에서 사용할 경우 오류 메시지가 표시되는데 국내 뷰어에서는 허용을 하고 있어요. 이 외에도 ruby, mark 같이 epub3에서는 허용하지만 epub2에서는 사용할 수 없는 태그를 쓰면 오류가 납니다. 국내 유통용이면 오류를 무시해도 되는데 구글 등에 올리려면 이 파일을 epub3로 변경해야 오류를 없애고 등록할 수 있어요.  

EPUBCheck 오류 메시지를 한글로 보자~


1. 첨부 파일을 다운맏은 후 압축을 풀어 한글화 epubcheck.jar를 준비합니다.


2. Sigil 설정 폴더로 이동합니다.

1) Sigil 실행 > 설정 > Open Preferences Location 을 누르면 설정 폴더로 이동합니다.


3. 설정 폴더의 \plugins\EpubCheck 폴더로 이동합니다.

* 여기에도 epubcheck.jar 파일이 있습니다.


4. 한글화 epubcheck.jar 파일을 Sigil의 EpubCheck 플러그인 폴더에 덮어씁니다.


5. Sigil에서 EPUBCheck 플러그인을 실행해 오류 메시지가 한글로 표시되는지 확인합니다.


* EpubCheck 플러그인 한글화는 내맘대로의 EPUBGUIDE.NET에서 작업했습니다.

* 이 파일은 EPUBGUIDE.NET에서만 배포합니다.

* 한글화 파일 사용은 자유지만 무단 배포는 엄격히 금지합니다. 

* EPUBCheck 한글화 그룹 : https://www.transifex.com/idpf/epubcheck/language/ko_KR/



3. EPUB을 PDF로 저장하자. 



 **PrincePDF는 개인이 비 상업적인 목적으로 쓸 경우 무료지만 상업적인 목적으로 사용하려면 유료로 구입을 해야합니다. PrincePDF는 웹 페이지를 PDF로 출력해 주는 프로그램입니다. 커맨드라인으로 명령을 넣어야 하지만 놀라울정도로 강력한 기능을 갖고 있어요. 웹페이지를 그대로 PDF로 출력할 수도 있고, 사용자가 원하는 형태로 출력도 가능합니다. EPUB은 파일 기술적으로 '하나로 만든 홈페이지'입니다. 그래서 PrincePDF를 이용해 PDF로 출력이 가능해요. 먼저 PrincePDF를 설치합니다. 다운로드 : https://www.princexml.com/ 파일을 다운로드 받아 기본설치를 하면 PrincePDF 플러그인을 사용할 수 있습니다. 설치가 잘 됐는지 확인하고 싶다면 java처럼 커맨드 창에서 prince를 입력해 보세요.  


PrincePDF플러그인을 사용하는 이유는 카카오페이지 때문이에요. 

네이버, 교보문고, 리디북스 등에 콘텐츠를 올릴 때는 EPUB을 쓰지만 카카오에는 이미지 파일을 올리는데 카카오에서 전달 받은 제작 가이드는 시간이 오래 걸리고 오류도 많이 나더라구요. 카카오에서 받은 가이드는 HWP에서 카카오페이지 비율(720*1098) 이미지로 저장하고, 이를 포토샵에서 자동 변환 스크립트를 사용해 PNG로 변환하는 방식입니다. 제 컴퓨터에서는 한장 변환하는데 3초 정도 시간이 걸리더라고요. 20~30페이지짜리 연재물이라면 금방 끝나지만 같은 장르라도 단행본을 변환하면 3000~6000페이지 정도 나오는데 페이지당 3초면 몇시간을 작업해야 합니다. 그리고 EPUB으로 제작한걸 다시 HWP로 옮기는 불편함도 크고요. 그래서 Sigil에서 바로 이미지로 변환하는 방법을 찾다 보니 PrincePDF를 쓰게 됐습니다. 




반응형