내맘대로의 EPUB 제작 가이드

이미지는 주로 가운데, 왼쪽, 오른쪽 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.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

sigil-ebook.com/2020/11/16/sigil-1-4-1-critical-fix-release/

Sigil 1.4.1 긴급 업데이트입니다.

CTRL+F 키가 잘못 연결됐나봅니다. 

OPF 관련 버그도 수정되었다고 합니다.

1.4.0 사용하시는 분들은 꼭 업데이트 하세요.

EPUBGUIDE.NET의 무료 전자책 도서관 - 직지 도서관에 

한국문학 장편 2종이 추가됐습니다.

김동인의 대수양대수양(大首陽)

이광수의 도산 안창호

보러 가기 : jikji.duckdns.org/shelf/2

무료로 EPUB을 다운로드 받을 수 있고,

웹브라우저에서 직접 책을 볼 수 있습니다.

이용 방법 : www.epubguide.net/326

Sigil 1.4.0 버전이 발표됐습니다.

이번 버전에는 UI가 크게 변경됐습니다.

테마 기능이 추가됐고, 새로운 아이콘이 3개 등록되었네요.

아이콘은 SVG로 제작돼 확대를 해도 깨지지 않습니다.

기본 아이콘 외에 2개 커스텀 UI가 추가되었습니다.

UI 보다 더 반가운건,

사전을 2개 사용할 수 있게 변경된 맞춤법 검사 기능입니다.

한국어, 영어 사전을 동시에 등록해 맞춤법 검사를 사용할 수 있습니다.

인디자인 같은 원고를 변환하는 분들께는 큰 도움이 안되겠지만

전자책만 출간하는 분들께는 Sigil에서 맞춤법 교정까지 가능합니다.

전자책을 제작할 때 서지정보 3개를 요청드립니다.

1. 전자책 출간일

2. 전자책 정가

3. 전자책 ISBN

이 정보를 요청하는 이유는, 국립중앙도서관에서 온라인자료를 납본받을 때

EPUB 같은 전자책 파일인 경우 이 중 하나라도 없으면 반려를 하기 때문입니다.

ISBN은 [국립중앙도서관 자료수집규정]에 표시하도록 되어 있습니다.

납본 불가 사유서에 보면 [자료명, 저자명, 발행처, 발행일, 가격, ISBN] 항목이 있습니다.

이 중 하나라도 표기가 안돼있으면 반려하는 것 같아요.

자료명, 저자명, 발행처는 판권면에 항상 표시돼 있어

책에서 확인할 수 없는 출간일, 정가, ISBN을  추가로 요청드립니다.

이 중 정가를 표기하지 않는 경우가 많이 있는데

이런 무서운 규정이 있어요.

물론, 지금까지 이 규정으로 과태료 받았다는 출판사는 보지 못했지만, 조심해서 나쁠건 없지요.

단종애사 보러가기

무료 전자 도서관에 단종애사 EPUB 올렸습니다.

다운로드와 브라우저로 바로 보기 가능합니다.

한국문학 장편 : jikji.duckdns.org/shelf/3

한국문학 단편 : jikji.duckdns.org/shelf/2

아이디어회관 직지 프로젝트 : jikji.duckdns.org/shelf/1

이미지른 넣다 보면 float : left, float: right로는 해결이 안되는 경우가 생깁니다.

이렇게 공간이 애매하게 남을 때가 있어요.

이미지가 하나로 연결돼 있어 중간을 잘라 float을 쓸 수도 없는 이미지.

이렇게 텍스트가 들어가면 조금 더 깔끔하게 편집을 할 수 있습니다.

ㅓ처럼 여러 각도로 꺾인 이미지

이런 대각선 이미지도 애매하지요.

종이책에서는 전체 이미지인데 float으로 넣으면 작아보이고

그렇다고 center로 넣자니 빈 공간이 너무 많아 보기 좋지 않습니다.

​

이런 그림도 마찬가지지요.

오른쪽 부분만 잘라 float : right을 쓰고 싶지만 그림이 붙어 있어 자르기 어렵습니다.

​

이럴 때 쓸 수 있는 속성이 shape-outside예요.

shape-outside는 크롬 브라우저에서 사용하려면 webkit 속성을 추가해야합니다.

​

-webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);

shape-outside: polygon(0 0, 100% 100%, 0 100%);

​

국내 전자책 뷰어는 대부분 webkit을 사용하니 두 코드를 같이 넣어줘야돼요.

​

shape-outside에 ploygon 속성을 적용하면 이렇게 편집할 수 있습니다.

△ 모양의 이미지

ㄱ, ㄴ 같은 이미지

shape-outside는 여러 속성이 있습니다.

삼각형, 별 등 다각형을 표현할 때 polygon

원형은 circle

타원형은 ellipse,

​

그리고 다각형 안쪽에 글자를 넣을 수도, 바깥 쪽에 넣을 수도 있습니다.

​

shape-outside에 대한 설명은 여기로

https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside

shape-outside를 적용한 스타일은 여기를 참고하세요.

https://www.epubguide.net/215

https://www.epubguide.net/207

Sigil을 사용하는 이유는

HTML4, 5, CSS2, 3, JavaScript, jQuery 등 거의 모든 코드를 다 받아주는 강력한 코드 편집 기능,

그리고 정규식을 완벽히 지원하는 찾기/바꾸기 때문입니다.

​

이 두 기능을 안쓴다면 궂이 Sigil을 사용할 이유가 없지요.

특히 정규식을 완벽히 지원하는 찾기/바꾸기 기능은 다른 EPUB 편집기에는 없는 Sigil만의 독보적인 기능입니다.

​

정규식은 어려워요.

저도 어렵습니다.

제가 아는 있는 20년 다 되어 가는 최상급 개발자도 정규식이 어렵다고 합니다.

이 어려운걸 전자책 만드는데 쓰는건 얼마나 어렵겠어요.

​

그런데 어렵지 않습니다.

전자책 편집은 앱 개발이 아니잖아요.

기껏 해야 텍스트나 코드를 찾아 다른 것으로 바꾸는 정도예요.

그래서 몇가지만 알면 됩니다.

​

먼저, 아주 기본적인 PC 상식은 알아야겠지요?

\가 입력이 안되요... 라는 분은 정규식 사용을 권하지 않습니다.

​

​

1. (.*)

무엇이든 다 찾습니다.

<p>(.*)</p>

이렇게 찾기에 넣고 검색을 하면 <p>와 </p> 사이에 있는 모든 내용을 다 찾아줍니다.

다 찾는게 무슨 의미가 있지? 하고 생각하셨다면, Sigil 보다는 윙크, ebook스타일리스트를 쓰세요.

오! 하며 느낌표가 팍 오는 분들께는 신세계가 열릴거예요.

​

2. (\d), (\d\d), (\d+)

숫자만 찾습니다.

\d는 숫자 하나, \d\d는 숫자 두개, \d+는 갯수와 상관 없이 연속된 숫자를 모두 찾습니다.

​

이 두개만 잘 활용하면 전자책 제작에 필요한 정규식 90%는 해결합니다.

여기에 몇가지만 더 기억하세요.

​

4. 찾기에는 ()로 그룹을, 바꾸기에는 \1, \2로 찾은 값을...

예를 들어 날짜 표기 형식을 바꾼다고 생각해 보세요.

​

2020년 1월 1일 -> 1일 1월 2020년

2021년 2월 2일 -> 2일 2월 2021년

2022년 3월 3일 -> 3일 3월 2022년

​

찾기에 (\d\d\d\d)년 (\d)월 (\d)일

바꾸기에는 \3일 \2월 \1년

​

이렇게 해주면 됩니다.

(\d{4))

이런 것도 가능하지만, 초보자를 위한거라 넘어가겠습니다.

​

5. 정규식에서 사용하는 예약어, 예약 코드

(), \, .(점), [ ], ^, ?, * 등은 예약된 코드입니다.

예약코드는, 정규식을 만들 때 쓰는 코드예요.

그래서 검색창에 (를 넣고 찾으면 못찾습니다.

예를 들어

정규식(Regex)

이런 내용에 (Regex)만 찾고 싶습니다.

(.*)

이렇게 하면 못찾아요.

((.*))

이렇게도 못찾습니다.

괄호는 예약코드기 때문이에요.

예약코드를 찾을 때는 \를 써야합니다.

\((.*)\)

이렇게 하면 괄호를 포함해 괄호 안에 있는 글자를 찾습니다.

점을 찾고 싶다면 \.

물음표는 \?

곱하기는 \*

이렇게 찾으면 됩니다.

​

이정도만 기억하면 전자책 만들 때 필요한 정규식 95%는 해결됩니다.

5%는?

열심히 공부 해야겠지요^^