내맘대로의 EPUB 제작 가이드

요즘 일에 치여서 글을 올리지 못했네요.

게시판이 너무 오래 쉬고 있으면 안되겠기에...^^;;

간만에 스타일 하나 올립니다.

형광펜 중간에 십자가 표시 보이시나요?

하나는 파란색, 하나는 파란색 테두리입니다.

파란색은 쉽지만, 테두리는 어떻게 할까요?

​

테두리를 그리는 스타일은 없습니다. 글자 테두리 색과 안쪽 색을 지정하는 스타일도 없고요.

이건 그림자 속성을 활용한거예요.

​

상하좌우 그림자를 1px로 주고, 그림자 색을 원하는 것으로 지정하면 되지요.

​

text-shadow: -1px 0 #0181C6, 0 1px #0181C6, 1px 0 #0181C6, 0 -1px #0181C6;

color : #FFFFFF;

눈에는 파란색 테두리 처럼 보이지만, 사실 그림자입니다.

안쪽 글자는 흰색으로, 글자 안쪽은 흰색으로 넣었어요.

​

그런데 회색 바탕이라 티가 안나지만, 글자 안쪽 색을 지정하지 않고 투명하게 하려면 어떻게 하면 될까요?

​

이건 퀴즈로 남겨봅니다.

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로 구현해 유통할 수 있습니다.

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

​

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

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

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

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

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

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

​

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>

​

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

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

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

​

http://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를 공부하세요.

이미지는 주로 가운데, 왼쪽, 오른쪽 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을 사용하는 이유는

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%는?

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