내맘대로의 EPUB 제작 가이드

이미지른 넣다 보면 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%는?

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

심훈의 상록수 무료로 보세요~

jikji.duckdns.org/book/113

아이디어회관 SF / 직지 프로젝트 도서(등록 완료)

jikji.duckdns.org/shelf/1

한국문학-단편(등록중)

jikji.duckdns.org/shelf/3

한국문학-장편(등록중)

jikji.duckdns.org/shelf/2

전자책 뷰어가 없어도, PC에서도, 스마트폰에서도 볼 수 있습니다.

무료 전자도서관에 들어가 책을 선택하면 오른쪽 위에 다운로드와 책보기 버튼이 있어요.

전자책 뷰어가 뭔지, 전자책을 어떻게 보는지 모르는 분은 책보기 버튼 눌러 보시고,

내 기기에서 보고싶다 하는 분들은 다운로드 받아 보세요.

몇번 소개를 했는데, 오늘 [ㄱ] 까지 작업을 끝낸 기념으로 다시 공유합니다.

단편 목록에서 1/4정도 작업을 한 것 같아요.

속도는 느리지만 중/장편까지 모두 올리는걸 목표로 하고 있습니다.

아이디어회관 직지 프로젝트(https://sf.jikji.org/) 도서는 모드 등록했고,

위키문헌의 한국 근대문학 단편을 EPUB으로 재편집해 등록합니다.

jikji.duckdns.org/discover/new/

보고싶은 책 선택 후 오른쪽을 보면 작은 아이콘 2개가 있습니다.

하나는 EPUB 다운로드. 다른 하나는 브라우저에서 바로 볼 수 있는 아이콘입니다.

바로 보기는 PC와 모바일 모두 지원하니 전자책 체험하고 싶은 분들 이용하세요.

아이디어회관이 명맥만 유지하고 있어 이를 계속 유지할 생각으로 시작했는데 혼자 작업하려니 느리네요.

전자책 원고 출처는 아이디어회관과 위키문헌입니다.

아이디어회관 SF - 직지 프로젝트 1999

http://sf.jikji.org

위키문헌 원고를 EPUB으로 만들어 보내주시면 서재에 등록하겠습니다.

작은 프로젝트지만 참여하곳 싶은 분들은 언제든 쪽지나 메일 보내주세요.

https://ko.wikisource.org/wiki/%EB%B6%84%EB%A5%98:%EB%8B%A8%ED%8E%B8%EC%86%8C%EC%84%A4

참....

생각하고 계신 그 ID와 패스워드로는 절대 로그인 안됩니다.

로그인 안해도 100% EPUB으로 다운로드 되고, 책도 볼 수 있어요.

로그인 하려고 괜한 고생 하지 마세요.

Q: 문단 안에 있는 글자에 여백을 주려고 하는데

좌우(margin-left, margin-right) 여백은 적용되지만 상하 여백이 적용되지 않습니다.

​

​

<p><span>문단 내 상하 여백</span> 문단 내 글자의 상하 여백 설정은 display:inline-block; 속성으로</p>

​

span {

color : #00F;

margin-right : 5em;

}

이렇게 margin-left, margin-right는 잘 적용되지요.

하지만 상하 마진을 주면 어떨까요?

​

span {

color : #00F;

margin-bottom : 5em;

margin-top : 5em;

}

​

상하 5em을 줬는데 아무 변화가 없습니다.

코드를 아무리 들여다 봐도 문제가 없는데 스타일이 적용되지 않지요.

​

이건 태그의 속성 때문입니다.

display 속성을 기준으로 보면 태그는 인라인 태그와 블럭 태그 2종류가 있어요.

블럭 태그는 <p>, <div>, <h1> 같은 태그고

인라인 태그는 <span>, <sub>, <b> 같은 태그입니다.

​

태그 종류만 봐도 둘의 차이가 무엇인지 파악되시나요?

​

블럭 태그는 독립적으로 사용할 수 있는 태그예요.

​

<p>본문</p> (O)

​

이렇게 사용할 수 있습니다.

​

인라인태그는 독립적으로 사용을 할 수 없어요.

​

_아래첨자 (X)

이렇게 쓰면 오류가 납니다.

반드시 블럭 태그 안에 써야합니다.

​

<p>_아래첨자</p> (O)

​

진하게, 기울임, 밑줄 등 글자를 꾸미는 태그는 대부분 인라인 태그예요.

블럭 태그는 <div>처럼 블럭 안에 다시 블럭을 사용할 수 있는 태그와 불럭 안에 블럭을 넣을 수 없는 태그로 구분돼요.

​

<div><div><p>문단</p></div></div> (O)

div는 이렇게 태그 안에 여러개의 블럭 태그를 쓸 수 있습니다.

​

<h1><p>제목</p></h1> (X)

​

h1이나 p태그는 div처럼 블럭 태그지만 태그 안에 블럭 태그를 쓸 수 없습니다.

​

블럭태그와 인라인 태그를 설명하려는게 아니니 여기서 마무리 하고.

​

블럭 태그는 상하좌우 마진을 적용할 수 있습니다.

하지만 인라인 태그는 좌우 마진은 적용할 수 있지만 상하 마진은 적용할 수 없습니다.

왜?

그렇게 하기로 약속이 되어 있어서 그렇습니다.

블럭 태그와 인라인 태그는 기본 속성이 다르고 지정할 수 있는 속성도 다릅니다.

블럭 태그는 강제로 줄바꿈을 하지만 인라인 태그는 줄바꿈이 없지요.

이 외에도 블럭 태그 안에는 인라인 태그를 쓸 수 있지만, 인라인 태그 안에는 인라인 태그만 써야 하고

상하정렬(vertical-align)은 인라인 태그만 적용되고 블럭 태그는 쓸 수 없는 등의 여러가지 차이가 있습니다.

​

그럼 인라인 태그에 상하 정렬을 꼭 해야한다면 어떻게 할까요?

인라인 태그를 블럭태그로 만들어 주면 됩니다.

span {

color : #00F;

display : block;

margin-bottom : 5em;

margin-top : 5em;

}

​

이렇게 하면 span 태그는 블럭태그 속성을 갖게 됩니다.

하지만 블럭 태그는 강제 줄바꿈이 기본 속성이기 때문에 이런 문제가 생기지요.

​

줄바꿈은 없이 상하 여백을 주고 싶을 때,

다시 말해 블럭 속성이면서 인라인 속성을 함께 부여하고 싶을 때가 있을거예요.

그럴 때 inline-block 속성을 사용할 수 있습니다.

​

span {

color : #00F;

display : inline-block;

margin-top : 5em;

margin-bottom : 5em;

}

​

inline-block 속성은 블럭 속성이기 때문에 margin을 적용할 수 있지만

inline 속성도 함께 갖고 있어 줄바꿈은 되지 않습니다.

​

display 속성은 여러개가 있습니다.

block, inline, inline-block, flex, grid, lint-item 등 다양합니다.

전자책 만들 때 display 속성 사용 빈도도 아주 높습니다.

잘 활용하면 제작 시간을 단축하고 다양한 스타일을 만들 수 있습니다.

전 세계에서 가장 인기있는 뷰어 중 하나인 캘리버 전자책 뷰어가 메이저 업데이트를 했습니다.

뷰어 화면이 많이 바뀌었어요.

좌측에 배치됐던 메뉴가 사라져 깔끔해 졌습니다.

주석창도 보기 좋게 바뀌었습니다.

메뉴는 오른쪽 버튼을 누르면 튀어나옵니다.

검색 기능이 강력해졌다고 공식 업데이트 설명에 나오네요.

정규식을 완벽히 지원해서 원하는 내용을 쉽게 찾을 수 있다고 합니다.

이번 업데이트에서 가장 큰 변화는 형광펜 기능인 것 같아요.

형광펜과 메모를 간단히 추가할 수 있습니다.

이 외에도 다크모드 지원, 콘텐츠서버의 브라우저 뷰어 동기화 기능이 추가되었습니다.

그리고 Python3 업데이트가 되었습니다.

이로 인해 일부 플러그인이 작동하지 않을 수 있다고 하네요.