내맘대로의 EPUB 제작 가이드

글꼴에 따라 꺽쇠, 괄호 같은 약물이 눈에 거슬릴 때가 있습니다. 제가 즐겨 사용하는 구글 Noto Serif 글꼴은 약물의 간격이 넓어 전자책을 만들고 나면 이렇게 보여요. 글자와 약물 사이에 공백이 없는데 공백이 들어간 것 처럼 보이지요.

공백을 없애면 이렇게 깔끔해집니다.

어떤 분들은 약물 간격을 전자책 특성이겠거니 생각하고 그냥 지나가고, 어떤 분들은 아래처럼 약물 간격을 조정해 달라고 하세요.

약물이 가끔 나오는 책은 저도 별로 신경쓰지 않았습니다. 하지만 약물이 많이 나오는 조정이 필요합니다. 그리고 제작을 맡기는 분들에 따라 약물에 민감한 경우가 있어요. 약물 때문에 글자 간격이 벌어지면 가독성이 좋지 않으니 조정하는게 좋지요.

하지만 약물을 조정하려면 다른 글꼴을 적용해야 합니다.

약물 간격 조정할 일이 많지 않기 때문에 저도 별 생각 없이 늘 하던대로 약물 간격을 조정했습니다.

이렇게요.

약물 몇개 없을 때 이렇게 조정을 해 놓고, 그 뒤로 습관이 돼서 계속 이 방법을 사용했습니다.

그러다 약물이 엄청나게 많이 포함된 책을 편집하게 됐어요.

그 책의 코드를 보니 너무 지저분하더라구요.

이때 갑자기 깨달았어요. 내가 아무 생각 없이 약물을 처리했구나.

훨씬 편한 방법이 있는데 생각 없이 습관 대로 편집을 했구나... 하고요.

편집자가 요청하지 않아도 약물 처리를 해야 하는데 

요청이 없을 때는 아무 생각 없이 신경을 쓰지 않았지요.

습관이 돼서 습관대로 하다 보니 더 좋은 방법이 있어도 찾아 볼 생각도, 고칠 생각도 안하게 된거였어요.

안좋은 습관을 깨닫고 나니, 해결 방법이 바로 떠오르더라구요. 그래서 적용해 봤습니다. 

span 태그를 없애고, 약물 간격도 정리한 코드예요.

이렇게 하면 훨씬 편하고, 편집자가 요청하지 않아도 약물 간격을 조정해 편집을 할 수 있습니다.

당연히 이렇게 해야하는 건데 습관 때문에 관성에 밀려 신경을 쓰지 못한거였지요.

이렇게 편집하는 방법?

저처럼 습관에 길들지 마시고, 직접 찾아보세요.

생각보다 간단합니다.

이 코드는 전자책 제작 강의에서 알려드릴게요^^

생각해 봐도 방법을 찾지 못한 분들은 전자책 제작 강의 신청하세요~

어떻게 스타일 잡을까 고민하느라 시간이 한참 걸렸네요.

​

PDF로 보면 이런 모양입니다.

​

이 스타일이 까다로왔던 이유는

상단 굵은 줄과 장제목, 제목 사이의 빨간 줄이 글자 크기가 바뀔 때 같이 움직여야 해서였어요.

글자 크기 바꾸면 장번호도 크거나 작아져야 하는데, 그에 맞춰 상단 줄과 중간 빨간 줄이 같이 움직여야 하지요.

​

거기에 폭이 바뀌면 제목쪽만 움직여야 하니 여러 조건을 한번에 맞춰야 했습니다.

​

요즘 grid를 많이 쓰네요.

처음에 table로 작업할까 했는데, 제목 처리 하려면 헤딩 태그를 써야하니 테이블은 제외시켰고,

몇가지 방법을 생각해 하나씩 적용해 보다 그나마 코드가 간단한 방식을 찾은게 grid입니다.

​

<div class="ChapLine">

<div class="ChapLineRed"></div>

<div class="ChapLineGrey"></div>

</div>

​

<h3><span class="ChapTXT">CHAPTER</span><span class="ChapNo">10</span> <span class="ChapTitle">첫 번째 파이프라인<br/> PDF 전자책</span></h3>

​

===

​

h3 {

display : grid;

grid-template-areas :

"ChapTXT ChapTitle"

"ChapNo ChapTitle";

grid-template-columns : 2.5em auto;

grid-template-rows : 0.5em;

font-size : 2em;

align-content: center;

margin-bottom : 5em !important;

}

​

.ChapLine {

display : grid;

grid-template-areas :

'ChapLineRed ChapLineGrey';

grid-template-columns : 2.5em auto;

grid-template-rows : 5px auto;

font-size : 2em;

margin-bottom : 15px;

}

​

.ChapLineRed {

grid-area: ChapLineRed;

background-color : #EA5A4F;

}

​

.ChapLineGrey {

grid-area: ChapLineGrey;

background-color : #BFC0C0;

}

​

.ChapTXT {

font-size : 0.4em;

color : #EA5A4F;

justify-content: left;

}

​

.ChapNo {

display: flex;

grid-area: ChapNo;

box-sizing: border-box;

font-size: 1.8em;

color : #EA5A4F;

line-height : 1em;

​

align-items: flex-start;

justify-content: left;

}

​

.ChapTitle {

display : flex;

grid-area : ChapTitle;

box-sizing: border-box;

font-family: "제목고딕";

border-left : 1px solid #EA5A4F;

padding-left : 0.5em;

line-height : 1em;

}

일본어 세로쓰기 문의주신 분이 있어 스타일 샘플 올립니다.

Sigil 1.3.0 버전에서 일본어 세로쓰기 편집을 완벽히 지원합니다.

제발 Sigil 구버전 사용하지 마시고, 최신버전을 이용하세요.

Sigil을 이용한다는 것은 HTML과 CSS를 편집할 수 있다는 뜻이겠지요.

HTML과 CSS를 모르면 Sigil이 아닌, 

이펍스타일리스트나 윙크 같은 WYSIWYG 편집 기능 제공하는 편집기를 사용하세요.

이펍스타일리스트나 윙크도 Sigil 못지 않게 아주 좋은 편집기입니다.

일본어 세로쓰기는 이렇게 보입니다.

하지만 문제가 있어요.

첫째, 일본어 세로쓰기는 EPUB3에서 제대로 지원합니다. EPUB2 표준에서는 공식적으로 지원하지 않기 때문에 EPUB3로 편집하는게 좋습니다.

둘째, 교보, 예스24, 알라딘, 리디 뷰어에서는 EPUB3를 지원하나 모든 뷰어가 세로쓰기를 지원하지 않습니다.

리디 뷰어만 세로쓰기 속성을 무시하고 가로쓰기로 표현하고, 그 외 유통사는 볼 수 없습니다.

국내 유통사에 판매할 생각 없다면 세로쓰기로 편집해도 됩니다.

국내 유통사에 판매할 생각이라면, 세로쓰기는 포기하세요.

언젠가 지원이 될거예요. 그때 까지는 유통하고 싶어도 방법이 없습니다.

세로쓰기 방법은 샘플 파일로 대신하겠습니다.

심플 파일 다운 받아 Sigil 최신 버전으로 보세요.

그리고,

일본어 교재여서 모든 내용을 세로쓰기 할 필요는 없지만, 본문 내에 박스 처리해서 세로쓰기를 하는건 가능합니다.

교보, 리디, 예스24, 알라딘은 박스 처리한 세로쓰기는 볼 수 있습니다.

세로쓰기를 하면 영문, 숫자는 90도 돌아갑니다. 영문과 숫자는 horizontal 스타일을 적용해야 제대로 보이니 참고하세요.

테두리에 이미지 넣는 방법은 여러번 올렸는데, 묻는 분들이 많네요.

이런 테두리 그릴 때 이미지를 씁니다.

물론 border를 그릴 수도 있지만.... 생각 하기도 싫네요 ㅎㅎ

이 테두리는 이 이미지로 만들었습니다.

이미지 크기는 상관 없어요.

모양만 같으면 돼요.

테두리 이미지는 border-image를 씁니다.

.box_TOC {

border : 10px solid transparent ;

border-image: url("../Images/TOC_border.png") 50 stretch;

padding : 10px;

}

이때 테두리의 두께는 이미지 두께와 전혀 상관 없어요.

border로 두께를 주면 됩니다.

border : 10px solid transparent;

border 두께에 따라 모양은 유지한 채 테두리 두께가 달라집니다.

투명한 테두리를 만들 때 transparent 속성을 씁니다.

그런데 간혹 border-image 태그를 안먹는 뷰어가 있더라구요.

이런 뷰어는

border : 10px solid #FF0000;

이렇게 넣어줘도 돼요. border-image가 적용되면 이미지로, 적용 안되면 빨간 테두리가 그려집니다.

요즘은 웬만한 뷰어가 border-image 적용이 되니 투명하게 그려줘도 됩니다.

전자책에서는 이렇게 보여요.

지원사업 때문에 일이 몰려서 한동안 정신 없었네요.

많이 쓰는 스타일이 들어와 소개합니다.

이런 세로 제목 스타일이에요.

유통 중인 책을 보면 이런 제목은 이미지로 많이 넣던데,

텍스트로 간단히 스타일을 잡을 수 있습니다.

전자책으로는 이렇게 보여요.

CSS 속성은 이렇습니다.

h3 {

    writing-mode: vertical-lr;

    font-family: "제목";

    font-size: 1.3em;

    color: #EC7289;

    ...

    ...

}

writing-mode라는 속성을 사용했어요.

이 속성이 글자를 세로로 표현해 줍니다.

그런데 영문이나 문장부호는 가로로 놓일 거예요.

그래서

.txt_eng_spacing {

letter-spacing : 0;

writing-mode: initial;

}

이렇게 영문 스타일은 writing-mode가 적용되지 않도록 스타일을 잡았지요.

Writing-mode는 국내 유통사 뷰어에서 문제가 생겨 거의 안썼는데

지금은 리디북스 안드로이드 뷰어 외에는 잘 표현됩니다.

리디 안드로이드 뷰어도 몇가지 설정만 해 주면 잘 나오고요.

세로로 글자를 표현하고 싶을 때 writing-mode를 잊지 마세요~

재미있는 스타일을 문의 주신 분이 있어 만들어 봤습니다.

스타일은 이렇게 2종류예요.

프롤로그 제목은 위에처럼 화살표가 있고 제목이 들어갑니다.

장제목은 화살표 앞에 번호가 붙어야 하고요.

제목 옆에 선이 들어간 스타일은 많이 만들어봤는데, 

선 끝에 화살표 처럼 포인트가 들어간 스타일은 선을 넣는 스타일과 다릅니다. 

선을 넣는 것 보다 까다롭지요.

전자책이기 때문에 화면 크기가 늘었다 줄었다 할 수 있지요.

그리고 장 제목 글자 수도 일정하지 않습니다.

책에 따라 장 번호가 1, 01, 001 처럼 여러 자리일 수도 있어요.

스타일을 만드는 방법은 수백가지예요.

편집자에 따라 중요하게 생각하는 포인트가 다를거고,

그에 따라 스타일도 달라집니다.

저 제목 스타일을 봤을 때 제가 중요하게 생각한 부분은 장제목이었어요.

화살표 길이는 폭에 따라 늘었다 줄었다 해도 되지만, 제목은 가능한 한줄로 표시되야 한다고 생각했습니다.

장 제목과 장 번호는 글자 수에 따라 늘었다 줄었다 하지만, 뷰어 폭에는 영향을 받지 않아야 합니다.

뷰어 폭이 제목의 폭보다 좁다면 줄이 바뀌어야 하지만, 

한 줄에 제목이 들어갈 정도의 폭이라면 제목은 한 줄로 표시하고 싶었습니다.

그리고 제목 글자 수가 바뀌더라도 화살표 길이가 알아서 조절돼야겠지요.

각 장 제목마다 폭을 하나씩 맞추기는 귀찮으니까요.

화살표도 중요합니다. 처음엔 간단히 이미지를 넣으면 되겠지 생각했는데

화살표 길이를 뷰어 폭에 자동으로 맞추려면 이미지로 넣으면 안되더라구요.

이미지 가로 길이를 100%로 하면 화살표 머리 부분이 가로로 찌그러지고, 가로, 세로를 100%로 맞추면 선의 폭이 두꺼워지면서 화살표 머리가 커집니다.

제가 생각한 해결책은, 화살표를 아주 길게 만들어 웬만한 뷰어 가로 폭에서도 잘리지 않도록 하고

배경으로 넣는 방법입니다.

이 외에도 다른 여러 방법이 있어요.

삼각형을 오른쪽 끝에 정렬하고, 삼각형 왼쪽에 이미지로 선을 넣은 후 글자 간격을 없애던가,

테이블 속성을 이용해 상자 2개를 붙여 왼쪽은 선을, 오른쪽은 삼각형을 넣던가,

border로 선을 만들고, 선 끝에 삼각형을 넣은 후 margin으로 겹치게 해도 되겠네요.

제가 만든 스타일은 이렇습니다.

  <style>

div.box_title {

width : 100%;

display : flex;

}

.arrow {

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

background-position : right top;

background-repeat : no-repeat;

flex-basis : 100%;

min-width : 2em;

height : 1em;

-ms-flex: 1;

flex: 1;

}

.txt_chap_title {

    text-align: right;

margin-left : 1em;

}

.txt_chap_No {

font-size : 2em;

color : grey;

    font-style: italic;

margin-right : 0.5em;

}

.txt_grey_small {

    color: grey;

    font-weight: bold;

    font-size: 0.8em;

}

</style>

flex를 이용해 div 박스 3개를 가로로 놓고, 가운데 상자 크기가 자동으로 조절되도록 했습니다.

장 번호와 제목 상자는 글자 양에 따라 폭이 알아서 바뀌고요.

스타일을 적용하면 이렇게 보입니다.

가로 폭이 넓으면 화살표만 길어져요.

그리고 화살표 상자에 min-width를 둬서가로 폭이 아주 좁아져도 화살표가 사라지지 않게 했습니다.

화살표가 남으면 제목이 줄바꿈 되지요.