EPUB3로 구현한 D3.js Polar Clock

EPUB 편집 가이드 2021. 1. 28. 13:38

d3_sample_PolarClock.epub
0.36MB

 

EPUB3는 공식적으로 HTML5, JavaScript, CSS3에 대한 제한을 거의 두지 않았습니다.

그러니 EPUB3는 Web에서 표현 가능한 거의 모든 기능을 다 구현할 수 있습니다.

Sigil 역시 EPUB3를 완벽히 지원합니다.

제한 없이 JavaScript를 사용할 수 있고, HTML5, CSS3로 자유롭게 기능을 구현할 수 있습니다.

단!!!!!

기능 구현에 대한 제한은 두지 않았지만,

뷰어가 지원해야 하는 최소 기준은 아주 아주 관대해요.

EPUB3 뷰어는 비디오나 오디오를 지원하지 않을 수 있습니다.

JavaScript도 지원하지 않을 수 있습니다.

MathML이나 SMIL도 지원하지 않아도 됩니다.

이런 기능들은 MUST가 아닌 MAY나 RECOMMENDED입니다.

그래서 많은 EPUB3 지원 뷰어들이 이런 기능을 지원하지 않지요.

D3.js를 사용한 복잡한 기능은 EPUB3에서 제한 없이 구현할 수 있습니다.

다만, 지원하는 뷰어가 많지 않아 구현하지 않는 것 뿐이지요.

D3.js가 무엇인지 궁금하신 분들, EPUB3로 어디까지 가능한지 궁금하신 분들은

첨부파일을 다운받아 calibre나 Sigil PageEdit로 열어보세요.

Calibre에서는 이렇게 보입니다.

Sigil PageEdit에서는 이렇게 보입니다.

소스 원본은 여기서 확인할 수 있습니다.

http://bl.ocks.org/mbostock/1096355

교보ebook(모바일), iBooks는 jquery는 '거의' 지원을 합니다.

중급 정도의 복잡한 인터렉션 까지는 js로 구현해 유통할 수 있습니다.

설정

트랙백

댓글

EPUBCheck 4.2.4 오류 - Sigil에서 해결 방법

Sigil 사용 설명서 2021. 1. 27. 15:30

EPUBCheck는 W3C에서 관리/배포하는 EPUB 적합성 검사 프로그램입니다.

github.com/w3c/epubcheck/releases/

현재 4.2.4 버전이 최신인데, 이 버전에 약간의 문제가 있습니다.

EPUB에 첨부하는 파일은 한글명, 띄어쓰기 등을 사용할 수 없습니다.

파일명은 영문, 숫자, 특수문자 몇개 뿐이에요.

그래서 이미지 파일에 띄어쓰기나 한글 파일명이 있으면 EPUBCheck에서 오류가 생깁니다.

 

EPUBCheck 플러그인은 Sigil에서 EPUBCheck를 쉽게 사용할 수 있도록 도와주는 프로그램입니다.

EPUBCheck 0.4.5.1버전이 최신입니다.

www.mobileread.com/forums/showthread.php?p=2950625#post2950625

 

epubcheck plugin for Sigil - MobileRead Forums

 

www.mobileread.com

EPUBCheck와 EPUBCheck 플러그인을 혼동하지 마세요.

 

EPUBCheck 플러그인 최신버전에는 EPUBCheck 4.2.4가 포함되어 있습니다.

한글 파일명 오류를 제대로 체크하지 못합니다.

그래서 오류가 없는 버전으로 바꿔야합니다.

EPUBCheck 4.2.2 버전에는 이 오류가 없습니다.

 

EPUBCheck 플러그인 최신 버전을 설치한 후

EPUBCheck 4.2.2로 수정을 하면 문제를 해결할 수 있습니다.

오류가 수정된 버전이 나오기 전까지는 4.2.2 버전을 쓰는게 좋지요.

 

1. Sigil에서 최신 버전 EPUBCheck 플러그인을 설치합니다.

2. EPUBCheck 4.2.2 버전을 다운로드합니다.

     github.com/w3c/epubcheck/releases/tag/v4.2.2

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

[편집>설정>기본 설정 위치 열기]를 누르면 쉽게 이동할 수 있습니다.

4. [Sigil>Plugins>EpubCheck] 폴더로 이동합니다.

5. EPUBCheck 4.2.2 압축을 풀고

     - lib 폴더, epubcheck.jar 파일을 [Sigil>Plugins>EpubCheck] 폴더에 복사합니다.

6. [Sigil>plugins_prefs>EpubCheck] 폴더로 이동합니다.

     - EpubCheck.json파일을 메모장이나 텍스트 편집기로 엽니다.

     - update_check를 false로 수정합니다.

    {
  "update_check": false,
  "clipboard_copy": false,
  "usage": false,
  "github": true,
  "last_time_checked": "2021-01-05 22:15:58.495676",
  "check_interval": 7,
  "java_path": "java",
  "is32bit": false
}

 

이제 EPUBCheck로 검사를 하면 한글 파일명을 제대로 찾아 줄 거예요.

설정

트랙백

댓글

EPUBCheck 플러그인 구버전 Java 1.6 지원

Sigil 사용 설명서 2021. 1. 27. 10:01

EpubCheck_v0.4.0.zip
7.44MB

맥 OS Sierra는 Java 1.6버전만 사용할 수 있습니다.

Java 1.7 버전은 설치를 할 수 없지요.

 

그런데 EPUBCheck 최신 버전은 Java 1.7 이상 설치돼야 실행이 가능합니다.

Sigil EPUBCheck 플러그인 최신버전도 당연히 Java 1.7 이상 설치돼야겠지요.

 

맥 OS X Sierra처럼 구 버전 Java를 써야만 하는 상황이면

EPUBCheck를 실행할 수 업겠지요?

 

EPUBCheck_v0.4.0 플러그인은 Java 1.6 버전에서 돌아가는 EPUBCheck(4.0.2) 버전이 포함돼 있습니다.

Java 1.6버전을 사용해야 하는 환경이라면 이 플러그인을 사용하세요.

 

Sigil에서 EPUBCheck 오류가 나면 Java를 설치하면 됩니다.

java.com/ko/

 

Java | Oracle

 

java.com

Java 최신 버전을 설치할 수 없을 때(맥 OSX Sierra 말고는 거의 없을거예요)

첨부한 플러그인을 다운받아 실행해 보세요.

 

설정

트랙백

댓글

전자책을 위한 편집 수정 - 앞으로 10년 부를 끌어당기는 100가지 블루오션 by 동양북스

종이책을 전자책으로 변환할 때 고민하는 부분 중 하나는

종이책 편집을 그대로 두느냐, 전자책에 맞게 수정을 하느냐입니다.

가능하면 편집자의 의도를 살려 종이책 편집을 그대로 가져가려고 하지만

종이책 편집이 전자책에서 가독성을 떨어트리는 일도 종종 있습니다.

 

동양북스의 앞으로 10년 부를 끌어당기는 100가지 블루오션는

다음 10년간 블루오션이 될 수 있는 시장을 100개 선정하고

시장의 개요와 공략 포인트를 박스로 넣어 정리를 했습니다.

시장 개요는 앞면에, 공략 포인트는 뒷면에 배치했지요.

 

종이책은 박스글을 본문 위, 아래에 배치해도 본문의 흐름을 해치지 않습니다.

박스글 위치가 고정되어 있기 때문에 본문은 본문 대로, 설명은 설명 대로

자연스럽게 읽을 수 있지요.

 

이렇게 전면으로 내용이 들어갈 때는 배치를 조절해서 본문이 다음쪽에 나오도록 할 수 있습니다.

하지만 전자책은 화면 크기가 변하기 때문에 이런 고정 편집을 하기 어렵습니다.

그래서 시장 개요와 공략 포인트 같은 박스 글을 종이책 본문 기준으로 넣지 않고 앞으로 뺐습니다.

종이책 편집을 그대로 옮긴다면 시장 개요는 2번째 단락 뒤에 와야 하는데

시장 개요와 2번째 단락은 연관성이 깊지 않습니다.

그래서 아예 시장개요, 공략포인트를 제일 앞쪽에 배치를 했습니다.

시장 개요, 공략 포인트를 먼저 보고, 두 박스글의 의미를 본문을 통해 이해할 수 있도록 배치한 것이지요.

 

종이책에서 전면으로 나온 부분은 

전자책 화면 크기가 바뀌기 때문에 전면으로 처리를 할 수 없습니다.

장을 나누면 가능하겠지만, 그런 편집은 또 다른 문제를 만들지요.

그래서 시장규모, 시장개요, 공략 포인트를 나란히 놓고, 이어서 본문이 나오도록 처리를 했습니다.

화면 크기가 어떻게 바뀌든, 독서의 흐름은 동일하게 유지를 했지요.

이렇게 길게 빼놓고 보니 제목과 시장개요 상자 크기를 이미지 크기에 맞게 조절해도 좋을 것 같네요.

화면 크기가 좁을 때는 이미지가 화면 폭에 맞게 보이고,

아래처럼 화면 폭이 아주 넓어지면 이미지는 더 이상 늘어나지 않습니다.

시장개요나 공략포인트도 그렇게 편집을 할 수 있습니다.

전자책 스타일의 최종 결정은

이 책을 만든 편집자의 몫입니다.

저는 제 의견을 검수용으로 제안을 하고,

편집가가 전자책을 검수하면서 스타일을 언제든 바꿀 수 있습니다.

제가 제안한 스타일을 편집자가 검수하며 받아주셨고, 이 스타일이 최종이 됐습니다.

 

이 책의 까다로운 부분은 목차와 제목입니다.

종아책(PDF)에서는 이렇게 보입니다.

구조가 단순해 보이지만 이 스타일을 구현하려면 생각보다 많은 노력이 필요합니다.

스타일 자체가 복잡한건 아닌데, 장 제목과 절 제목을 나누고, 선을 긋고, 장 제목이 줄바꿈 되었을 때를 생각해야 하지요. 그래서 본문 스타일 잡는 것 만큼 목차 스타일 잡는데 시간이 들었습니다.

 

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

 

장 제목은 이렇게 되어 있습니다.

이런 스타일에서 가장 까다로운 부분은 상하 정렬이지요.

그리고 전자책에서 글자 크기가 바뀌고 뷰어 폭이 바뀔 때 깨지지 않아야합니다.

종이책 스타일을 전자책에 옮기면 이렇습니다.

글자 크기가 커져 줄바꿈이 생겨도 모양이 유지돼야 합니다.

이 스타일을 grid를 이용해 만들었는데

리디북스 PC 뷰어에서 grid가 제대로 안보이네요.

구버전에서는 문제가 없는데 새 버전에서 margin이 엉망이 됩니다.

이것 외에도 뷰어가 강제로 margin을 조정하며 생기는 다양한 문제가 있습니다.

그래서 어쩔 수 없이 table로 수정을 했습니다.

 

table로 넣으면 제목이 생성에 문제가 되는데...

제 나름의 방법으로 해결을 했지요.

 

단순해 보이지만 구석 구석 까다로운 부분이 많아 시간이 많이 걸렸어요.

하지만 내용도 재미있고, 다양한 스타일을 건드려 볼 수 있어서

재미있게 제작한 책, 

동양북스의 앞으로 10년 부를 끌어당기는 100가지 블루오션

이었습니다.

설정

트랙백

댓글

[질문&답변] 다양한 형태의 제목 밑줄 스타일

전자책 Q&A 게시판에 올라온 질문이 있어 스타일 만들어 봤습니다.

제목 아래에 다양한 형태의 밑줄을 넣는 방법입니다.

연필로 그린 선, 점선, 사선 등등...

 

옛날에 올렸다고 생각했는데 찾아 봐도 안나오네요.

그래서 샘플 파일을 하나 만들어 올립니다.

아래에 설명한 내용은 샘플 파일에서 확인할 수 있어요.

 

line-sample.epub
0.01MB

 

기본 스타일은 이렇습니다.

h3 {

font-size : 1.3em;

background-image: url(../Images/line1.png);

background-position : left bottom;

background-repeat : repeat-x;

padding-bottom : 1em;

margin-left : 0;

margin-right : auto;

display : table;

}

<h3>제목 아래 다양한 밑줄 스타일 </h3>

background-image의 이미지만 수정하면 이렇게 다양한 모양의 밑줄을 그릴 수 있습니다.

그런데, 여기서 문제가 하나 생겨요.

제목이 짧을 때는 별 문제 없는데 제목이 길어 2줄 이상 줄바꿈이 되면 어떻게 될까요?

이렇게 제목이 몇 줄로 늘어나든 밑줄은 하나만 그려집니다.

이렇게 편집한 책도 많이 있어요.

그런데 어떤 책에는 2줄이면 2줄 다 밑줄을 그려야 돼요.

h3 {

font-size : 1.3em;

}

h3 > span {

background-position : left bottom;

background-repeat : repeat-x;

padding-bottom : 0.5em;

margin-left : 0;

margin-right : auto;

background-image: url(../Images/line4.png);

line-height : 1.8em;

}

<h3><span>줄이 바뀌어도 줄마다 밑줄이 생기는 스타일 </span></h3>

이건 블럭 태그와 인라인 태그의 특성을 이용한 거예요.

기본 스타일은 똑같습니다. 대신 줄을 블럭 태그가 아닌 인라인 태그에 그려줬어요.

블럭 태그와 인라인 태그의 특성을 이해하면 쉽게 만들 수 있어요.

설정

트랙백

댓글

  • 차정삼 2021.01.08 12:13 ADDR 수정/삭제 답글

    sigil 1.4.3을 써보려고 하는 데 책보기도 코드보기도 차례에 없어 못쓰고 있습니다.
    sigil 0.9.6을 쓸때는 책보기로 원고를 붙여넣고 편집을 했었습니다.
    새로운 버젼을 써보려고 하는 데 사용법을 몰라서 질문합니다.

    제 이메일은 yscha58@daum.net입니다.
    답변 부탁으립니다.

아마존 킨들(Amazon Kindle)은 EPUB을 지원합니다.

참고 Site 2020. 12. 28. 16:30

https://kdp.amazon.com/en_US/help/topic/GU72M65VRFPH43L6

 

Kindle Publishing Guidelines

 

kdp.amazon.com

아마존 KDP용 전자책은 어떻게 제작하냐는 문의를 종종 받습니다.

구 버전 킨들은 mobi라는 포멧을 사용했기 때문에 EPUB으로 제작을 한 후 mobi로 변환을 했습니다.

하지만 지금은 EPUB으로 등록을 하면 됩니다.

아마존도 mobi 보다는 EPUB을 권장하고 있습니다.

 

아마존 KDP에 전자책을 등록하고 싶다면

Kindle Create로 KPF 파일을 만들거나,

아마존의 권장 가이드에 맞춰 MS워드로 만들거나,

EPUB으로 만들어 등록하면 됩니다.

설정

트랙백

댓글

Sigil 사용 설명서 - 기능편

Sigil 사용 설명서 2020. 12. 17. 15:18

jikji.duckdns.org/book/128

 

Sigil 사용 설명서 기능편을 공개합니다.

 

Sigil 1.4.x 버전의 모든 기능을 담았습니다.

 

Sigil 공식 가이드인 Dave Heiland의 Sigil User Guide 0.9.15+를 뼈대로

부족한 설명을 보완하고 새로 추가된 기능을 포함해 

Sigil 1.4.x 버전으로 개정을 했습니다.

 

이 책은 최종 완성본이 아닌, 편집 원고 버전입니다.

기능편을 시작으로 HTML&CSS, 실습편, 예제편을 추가할 예정입니다.

 

이 책은 Sigil로 만들었습니다.

Sigil로 EPUB을 편집하고, Sigil 플러그인으로 PDF 변환을 한 책입니다.

설정

트랙백

댓글

Sigil 초보자를 위한 CSS 편집기

http://selfcss.org/

 

selfCSS - WYSIWYG CSS Editor

Impressum Angaben gemäß § 5 TMG: Kontakt: Name:Simon Waldherr Straße:Kloepfstrasse 2 Wohnort:94522 Ettling Telefon:0049 151 11309488 Telefax:0049 32 224178618 E-Mail:contact@selfcss.org

selfcss.org

CSS로 원하는 스타일 만드는게 어려운 분들께 추천을 합니다.

Sigil은 코딩 편집기여서 CSS를 모르면 스타일을 만들기 어렵습니다.

이 페이지는 CSS를 몰라도 CSS를 쉽게 만들 수 있게 도와줍니다.

사이트에 들어가면 이런 화면이 보입니다.

책 제목 스타일을 만들고 싶다면 오른쪽 위에 있는 HTML 버튼을 누릅니다.

편집 창에 있는 내용을 모두 지우고 편집하고 싶은 html 내용을 넣습니다.

저는 이렇게 넣었어요.

<h2 class="selfCSS">책 제목 스타일</h2>

선택자는 selfCSS입니다. 태그는 바꿔도 선택자는 selfCSS를 넣으세요.

이제 오른쪽 메뉴에서 CSS를 누릅니다.

CSS 코드가 보이고, 아래에 edit CSS라는 버튼이 보입니다.

edit CSS를 누르세요.

edit CSS를 누르면 선택자를 수정할 수 있습니다.

선택자는 Sigil에서 사용할 선택자를 넣으세요.

html 창에서 제목을 h2 태그로 지정했으니 선택자도 h2로 수정합니다.

스타일을 처음부터 새로 만들고 싶다면 CSS 속성을 모두 지워도 됩니다.

이제 오른쪽 위의 메뉴에서 Preview를 선택하세요.

그럼 html에서 입력한 스타일이 보입니다.

배경을 바꾸고 싶다면 오른쪽 아래에 있는 background를 수정하세요.

저는 흰색으로 하고, 기본 CSS 스타일을 모두 삭제한 후 수정을 하겠습니다.

CSS 스타일을 모두 삭제하고, 배경을 흰색으로 놓으면 이렇게 보여요.

글자가 안보이는게 정상입니다.

글자가 보이게 font-color를 바꿔보겠습니다.

왼쪽 메뉴 중 font를 선택해 보세요.

1. font를 on으로 놓고 colored를 선택합니다.

2. Red, Green, Blue를 원하는 색이 나오도록 조정합니다.

원하는 색의 rgb 값을 알고 있다면 그대로 맞춰주세요.

3. rgb 색을 조정하면 제목 스타일의 색이 반영됩니다.

폰트 크기도 바꿔보겠습니다.

Font 메뉴에서 Size를 On한 다음 EPUB에서 많이 사용하는 em을 선택합니다.

원하는 크기가 되도록 크기를 조정합니다.

테두리 스타일, 속성을 지정했습니다.

배경색, 안쪽 여백, 바깥 여백 등 원하는 스타일을 지정해 줍니다.

초보 편집자가 어려워 하는 그림자 스타일도 쉽게 추가할 수 있습니다.

스타일 편집이 끝났으면 오른쪽 위 메뉴에서 CSS를 누릅니다.

이게 CSS 코드예요.

이 코드를 복사해 Sigil의 CSS 파일에 붙여넣습니다.

복사한 코드를 Sigil의 CSS 파일에 붙여넣고, 전자책에서 사용할 선택자 이름을 붙여줍니다.

오른쪽 메뉴 Example을 누르면 이미지 스타일도 적용할 수 있습니다.

selfCSS로 간단한 스타일을 만들 수 있습니다.

하지만 100여개의 CSS 속성 중 많이 사용하는 기본적인 속성 몇개만 설정할 수 있지요.

초보를 넘어, 전자책 디자인을 원하는 대로 편집하고 싶다면 CSS를 공부하세요.

설정

트랙백

댓글

[CSS 스타일 샘플] 이미지 왼쪽에 캡션 넣기

이미지는 주로 가운데, 왼쪽, 오른쪽 3가지 스타일로 작업을 많이 합니다.

그런데 간혹 아래처럼 넣어달라고 요청하는 분들이 계세요.

이미지가 세로로 길어 가운데 넣기엔 너무 커지고,

이미지 설명이 많아 왼쪽이나 오른쪽으로 float을 하자니 캡션이 다음페이지로 넘어가 가독성이 떨어질 때가 있지요.

그래서 이미지를 가운데 넣지만, 50%로 줄이고, 남은 공간에 캡션을 넣는 스타일입니다.

화면 크기가 줄어들면 이렇게 이미지도 같이 작어져요.

캡션은 텍스트기 때문에 이미지가 작아져도 캡션을 보는데 문제가 없습니다.

이런 스타일은 grid나 flex를 쓰면 되지만, grid를 쓰면 태그가 복잡해져요.

img_center 스타일을 그대로 살리면서 캡션과 이미지 영역만 조절해 표현할 수 있습니다.

.img_left_center {

width: 95%;

box-sizing: border-box;

margin: 1em auto 1em auto;

text-align: center;

}

.img_left_center img {

width : 50%;

}

.img_left_center .img_caption {

display : inline-block;

font-size: 0.8em;

font-family: "약물고딕", "기본고딕";

text-align: justify;

width : 45%;

}

이 스타일의 핵심은 display : inline-block;이에요.

이미지 옆에 텍스트가 나오려면 inline 속성이어야 하는데, inline으로 텍스트를 넣으면 이미지 하단에 한줄만 나오고 나머지는 다음줄로 내려갑니다.

이걸 해결하려면 block 속성을 써야하는데 block은 이미지 아래로 설명을 내리지요.

그래서 inline-block이라는 속성을 씁니다.

나머지 속성들은 그저 도울 뿐....

설정

트랙백

댓글

Sigil 1.4.2 긴급 업데이트

Sigil 사용 설명서 2020. 11. 23. 13:00

Sigil 긴급 업데이트가 올라왔습니다. 

1.4.1에서 다시 업데이트가 되었습니다.

 

1.4.0, 1.4.1 쓰는 분들은 꼭 업데이트 하라고 합니다.

 

 

Bug Fixes Since Sigil-1.4.0:

  • critical bug fix for incorrectly xml encoding of opf metadata attributes that use entities
  • fix bug in "Add Existing" files when file names would require percent encoding
  • fix bug in multiple language spellchecking dialog word lookup when no language attributes used
  • update de, nl, sv, ko, ru translations that missed the Sigil 1.4.0 initial release
  • critical bug fix for over xml encoding html used inside metadata in the opf
  • revert ctrl-f to it long standing Find and Replace behaviour

설정

트랙백

댓글