내맘대로의 EPUB 제작 가이드

어떤 책은 전자책을 만들면서 재미 없고 지루하고 짜증이 납니다. '친절한 국어 문법'이 그런 책이었어요. 책 내용 때문은 절대 아닙니다. 제작하며 내용을 보는 경우는 거의 없거든요. 책 내용이 아무리 좋아도 편집이 정돈되지 않으면 짜증이 납니다. 

시간도 오래 걸려요. '정돈 됐다'는 상대적인 의미입니다. 종이책으로 보면 아주 잘 만든 책인데 전자책 관점에서 정돈되지 않을 수도 있어요. 그러니까 정돈 됐다는 의미가 종이책을 엉망으로 만들었다는 얘기는 아닙니다. 물론... 인디자인 파일이 엉망일 수는 있겠지요.

예를 들면, 대부분의 사전은 잘 정돈된 편집입니다. 편집이 아무리 복잡해도 정해진 패턴이 있어요. 잡지는 대부분 '정돈되지 않은' 편입니다. 이미지와 텍스트가 불규칙하게 놓입니다. 전자책을 만들 때 편집이 불규칙하면 편집 시간이 오래 걸리고, 새로운 스타일을 계속 추가해야 합니다. 스타일이 많으면 독자들이 책을 볼 때 편집이 깨질 가능성이 높습니다. 그리고 뷰어에서 로딩이 오래 걸립니다. 오류가 발생할 가능성도 높아지고요. 뷰어마다 다르게 보일 수도 있고.... 등등의 문제들 때문에 정돈되지 않은 종이책은 전자책으로 만들 때 재미가 없습니다.

이 책, 요리하는 도시 농부는 아주 깔끔하게 정돈되어 있는 책입니다. 그래서 편집도 쉬웠고, 스타일 잡는 재미도 있었어요. 특히 지금까지 소개하지 않았던 재미있는 스타일이 포함돼 있습니다. 

대표적인 스타일 4가지를 뽑아서 정리해 볼게요. 다른 책에도 많이 쓰이는, 활용도 높은 스타일 2개, 이미지로 처리를 하지만 CSS로 표현 가능한 스타일 2개입니다.

먼저 종이책에 표현된 스타일을 볼까요?

1. 주요 편집 스타일

1.1 서문 제목

설명을 몇번 했는데 실전에서 활용한 예를 보여드리기 위해 선택했습니다.

위, 아래에 2중 실선이 있는, 제목을 표현할 때 사용하는 스타일입니다. 2중 실선 뿐 아니라, 실선, 점선, 긴 점선 등 다양한 선을 활용할 수 있어요. 이미지를 넣을 수도 있습니다.

1.2 상하 위치 차이 나는 텍스트, 그라데이션 텍스트

아래 이미지는 2개의 스타일이 있습니다. '스스로 자라는 상추'라는 제목을 보세요. 상추가 아래로 내려가 있습니다. 보자 마자 '이거 간단한건데'라고 생각하실 분도 계실거예요. 아주 간단한 스타일입니다.

중간에 '쑥쑥 잘 크는 채소를 꼽으라면...'을 보면 왼쪽에서 오른쪽으로 갈 수록 글자 색이 달라집니다. 그라디언트(gradient), 혹은 그라데이션 효과라고 하지요. Tip[http://epubguide.net/199]으로 설명을 했는데, 실전에서 어떻게 활용하는지 보여드릴게요.

1.3 이미지 좌우 정렬 & 크기 자동 조절

이것 역시 간단한 속성입니다. 이미지를 왼쪽, 오른쪽에 보이도록 하는 스타일이에요. 이미지를 왼쪽, 오른쪽에 넣기는 아주 쉽지요? 여기에 화면 크기에 따라 이미지 크기가 조절되도록 했습니다. 간단한 속성인데 생각 외로 이미지를 화면에 맞게 확대/축소해 주는 책이 많지 않네요. 그래서 넣어봤습니다.

1.4 액자 느낌의 제목 테두리

이 스타일은 고민을 조금 했습니다. 재료와 설명 부분을 어떻게 처리할까? 제목은 이미지를 사용할까? 스마트폰 이용율이 높기 때문에 폰에 맞게 다시 구성을 했습니다. 재료를 윗쪽에 놓고 아래에 설명을 넣었어요. 

제목은 역시 텍스트로 처리를 했습니다. 뒷쪽 그림자까지 그대로 표현을 했어요. 물론 조금 차이는 나지만 느낌은 최대한 살렸습니다.

2. 전자책 편집 스타일

2.1 서문 제목

팁으로 몇번 설명을 했던 스타일입니다. 책에 직접 적용하면서 어떻게 활용이 되는지 보실 수 있을거예요.

간단한 스타일이지만 스타일 자체는 조금 복잡합니다. 텍스트 상자를 만들어 보신 분들은 스타일이 복잡한 이유를 아실거예요. border 속성만 주면 화면 폭을 가득 채운 테두리가 그려집니다. 

border 속성만 주면 이렇게...

이걸 글자 폭에 딱 맞춰야합니다. width를 쓰면 안되요. 글자 수가 정해져 있다면 width로 맞출 수 있어도, 제목이 항상 같은 글자 수로 들어가지는 않잖아요. 글자 수에 따라 폭이 자동으로 조절되야 합니다. 그래서 display : table 속성을 줬습니다. 여기서는 margin-left, margin-right를 0으로 줬는데 스타일에 따라 auto로 줘야할 수도 있습니다. 

속성을 적용하면 뷰어에서 이렇게 보입니다.

2.2.1 절 제목

이렇게 글자 위치를 상하 다르게 표현하는 방법은 여러가지가 있을거예요. 저는 sup를 써서 앞쪽 글자의 높이를 높여줬습니다. sup는 글자 크기가 본문 기본 글씨체보다 작기 때문에 font-size 속성을 줘서 글자 크기를 맞췄습니다. vertical-align은 퍼센트(%) 값을 이용해 높이를 조절할 수 있어요. sup가 갖고 있는 기본 속성도 기본 줄보다 약간 높게 올라가지만 vertical-align을 사용해 종이책에서 표현한 정도로 높이를 맞췄습니다. 

h4 > sup를 쓴건 sup를 다른 곳에도 활용하기 위해서예요. sup는 본문 인용 등에도 사용할 수 있어서 h4 태그 안에서만 vertical-align : 60; font-size : 1em; 속성이 적용되도록 했습니다. h4 태그 바깥에서는 이 속성이 적용되지 않습니다. 

2.2.2 텍스트 그라데이션

이 속성이 재미있어요. 저도 이 책을 만들면서 알게 됐습니다.

background: -webkit-linear-gradient(left, #7FD08B, #A1BE90)

이건 기본 속성으로 글상자에 그라데이션을 줄 때 사용합니다. 특별한 속성은 아니에요. 

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

이 두 속성이 중요합니다. background 속성은 글상자, 즉 텍스트의 배경에 그라데이션을 주는데 이 두 속성이 적용되면서 배경이 아닌 글자에 그라데이션이 적용됩니다. 

이 속성은 웹킷에서만 사용할 수 있습니다. 익스플로러나 오페라, 파이어폭스 같은 브라우저에서는 속성이 표현되지 않습니다. 웹킷을 사용하는 브라우저는 크롬과 사파리가 있습니다. 

네. 안드로이드폰의 기본 브라우저 엔진, 아이폰의 기본 브라우저 엔진이 웹킷이에요. 그리고 이 두 폰에 들어가는 국내 유통사 뷰어는 웹킷 엔진을 사용합니다. 그러니 두 뷰어에서 표현이 되는 것이지요. 

color : #A1BE90;

이건 보험입니다. 혹시라도 텍스트 그라데이션 속성이 적용되지 않을 때는 이 색이 글자색이 됩니다.

속성이 적용되면 이렇게 보여요. 그라데이션은 색상 차이가 크지 않아서 자세히 보셔야되요^^

2.3 액자 느낌의 제목 테두리

이 스타일은 고민을 많이 했어요. 

유통되고 있는 책들은 대부분 이미지로 처리를 했습니다. 이미지로 처리하면 간단하긴 해요. 그런데 예쁘지는 않아요. 글자 크기도 조절할 수 없고, 스마트폰에서는 잘 보여도 태블릿에서는 이미지가 확대되 깨질 수 있거든요. 글자 크기가 본문과 어울리지 않을 수도 있고... 이미지로 넣었을 때 단점이 정말 많습니다.

제목 테두리를 넣는 방법은 다양합니다. 종이책과 똑같이 그림자를 점으로 처리하려면 배경만 이미지로 넣을 수도 있어요. 

[제작이 까다로운 책. 친절한 국어 문법 http://epubguide.net/197] 이 글에 2.4.1, 2.4.2를 참고하시면 되요. 여기서는 배경이미지를 상하로 넣었지만, 동일한 방식으로 좌우에 넣을 수도 있습니다.

그런데 이렇게 넣으면 코드가 너무 복잡해져요. 제목이기 때문에 h5 태그 안에 제목을 모두 넣어야 했습니다. 그래야 제목 자동 생성이 되거든요.

그래서 span을 이용해 테두리 상자를 만들고 그림자 효과를 줬습니다. 

background-color : #ffffff;

그림자 효과를 넣을 때는 글상자의 배경색을 넣어줘야되요. 배경색이 흰색으로 보여도 border-color를 주지 않으면 투명한 색이 적용됩니다. 배경이 투명해지면 그림자와 테두리가 겹쳐보이거든요.

display : box;

2.1에서 글자에 맞게 크기가 조절되도록 하기 위한 display : table;과 비슷한 목적으로 부여한 속성입니다. display:box;와 table;은 약간 차이가 나요. 2.1에서는 왜 table을 쓰고 여기서는 box를 썼는지는 직접 확인해 보세요 ^^

box-shadow: 7px 7px 5px #888888;

이건 그림자 효과를 주는 속성입니다. 글상자 뒤에 그림자가 보이도록 해줍니다. 종이책 처럼 점으로 된 그림자는 아닌데, 편집을 위해 이 부분을 포기하고 아래처럼 바꿨어요.

이 책에서는 하나를 더 바꿨습니다. 종이책은 재료를 왼쪽에, 설명을 오른쪽에 넣었어요. 종이책이라면 괜찮습니다. 태블릿도 문제 없을거예요. 그런데 스마트폰에서는 어떻게 보일까요? 폭이 좁은 스마트폰에서는 재료와 설명을 좌우에 배치하면 엄청난 줄바꿈이 생길거예요. 그래서 재료를 위로, 설명을 아래로 내렸습니다. 

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

1.3 이미지 좌우 정렬 & 크기 자동 조절

이미지 배치는 정말 '별거 없습니다.'

그냥 좌우 정렬 해주고, 적당히 여백 별려준 것 뿐입니다. 하지만 이미지 크기는 60%로 맞췄어요. 태블릿에서는 이미지가 크게 보이고 스마트폰에서는 작게 보입니다. 그런데 두 기기에서 모두 본문 가로 폭의 60%로 일정하게 보입니다. 

이미지 크기를 고정시킬 수도 있지만 화면 크기에 따라 자연스럽게 크기가 조절되도록 하면 다양한 기기에서 이용하기 편해집니다. 이미지는 가로 사이즈가 아주 커요. 이미지 크기가 작다면 최대 크기를 설정해 줬을거예요. 해상도 낮은 이미지가 너무 확대되면 깨지거든요.

이 이미지는 가로 폭이 상당히 큽니다. 가로 1000픽셀정도 되요. 그래서 풀HD 모니터에서 최대 화면으로 봐도 이미지가 깨지지 않습니다. 만약 이미지 해상도가 낮다면 max-width 속성으로 이미지의 최대 크기보다 화면이 더 커지면 확대되지 않도록 했을거예요.

스마트폰 크기에서, 그리고 태블릿 크기에서 이미지가 어떻게 보이는지 넣었습니다. 종이책과는 느낌이 조금 달라지지만 스마트폰이나 태블릿 등 화면 크기에 관계 없이 전자책을 볼 수 있는 편집이에요.

시간은 오래 걸리고, 결과는 만족스럽지 않은 경우가 있습니다. 아무리 고민을 해도 '아! 이거야.'하는 스타일이 떠오르지 않고, 자잘한 스타일을 여러개 만들어야하는 책이 있어요. 편집할 내용의 많고 적음의 문제는 아닙니다. 편집할 내용이 많아도 패턴만 있으면 생각보다 시간이 오래 걸리지 않습니다.

편집 패턴이 불규칙하고 1~2번 쓰이는 스타일을 많이 만들어야 할 수록 전자첵 제작이 어려워져요.

이 책, 친절한 국어 문법이 딱 이런 책입니다.

EPUB 파일을 만들어 유통사에 등록한 후에 마음에 들지 않아 다시 편집을 했어요. 그런데 여전히 마음에 들지 않네요.

그래도 전자책 제작을 하며 쓸 수 있는 다양한 기술이 들어갔습니다. 전자책 제작 공부를 하는 분들에게는 도움이 될만한 내용이 많을거예요.

내용이 길어서 몇번에 나눠 올립니다.

1. 주요 편집 스타일

1.1 장, 절 번호

장 번호를 보면 이미지 배경 위에 텍스트가 올라와 있습니다. 이럴때는 이미지로 처리하는 경우가 많지요. 하지만 여러 장이나 절로 구분돼 있는 책은 이미지를 삽입하는 것도 일입니다. 

이 책에서는 장번호를 이미지 하나로 처리할 수 있는 스타일을 사용했습니다.

1.2 첫 글자

여기도 장 번호가 있습니다. 이 부분도 이미지로 처리를 했습니다. 그리고 장의 첫 글자가 큰 글씨에 다른 색으로 스타일이 지정돼 있습니다. 첫 글자를 강조하는 책이 많지요? 

1.3 이미지 가운데 정렬

이미지 가운데 정렬은 쉽지요? 일반 이미지면 가운데 정렬로 해서 width : 100%를 적용하면 됩니다. 그런데 텍스트가 들어간 이미지는 어떨까요? 

아래 영역은 글상자를 만들어 텍스트로 처리를 할 수 있습니다. 그런데 다양한 기기에서 보면 제대로 정렬이 되지 않을 수가 있어요. 글상자가 2줄이나 3줄로 내려온다던가, 글상자 안의 텍스트가 줄바꿈이 되는 문제가 생길 수 있습니다. 그래서 이미지로 넣었어요. 

이 이미지를 width : 100%;로 하면 스마트폰에서는 잘 보이지만 아이패드에서는 엄청나게 커집니다. 이럴 때 어떻게 처리를 해야할까요?

1.4 이미지 테두리 글상자

회색 테두리와 배경으로 된 글상자입니다. border로 만들면 쉽지요. 그런데 위, 아랫쪽을 보세요. 이미지로 처리되어 있습니다. 

모든 글상자 크기가 일정하다면 배경 이미지로 처리할 수 있습니다. 하지만 현실에서는 상황에 따라 크기가 달라지는 글상자가 더 많습니다. 윗쪽, 아랫쪽은 크기가 변하지 않으면서 가운데 부분만 늘어나는 글상자로 만들어야 합니다. 

2. 전자책 편집 스타일

2.1 장, 절번호

장과 절 번호 스타일을 묶은건, 두 스타일에 사용한 속성이 유사하기 때문입니다. 장 번호는 포스트잇을 배경으로 1단계, 2단계, 3단계 처럼 글자가 들어가 있습니다. 절 역시 접힌 종이 모양의 이미지가 배경으로 들어가 있고, Chapter 1, Chapter 2...로 번호가 들어갑니다.

먼저 장 번호부터 보겠습니다.

2.1.1 장 번호

이런 스타일은 이미지로 넣어도 됩니다. 이미지가 훨씬 간단할 거예요. 장 제목 전체를 이미지로 넣을 수도 있습니다. 그런데 장번호가 많아지면 이미지로 처리하기 힘듧니다. 만약 1단계 ~ 100단계까지 있다고 생각해 보세요. 장 번호 이미지나 장 제목 페이지만 100개를 만들어야 해요.

CSS로 처리를 하면 장 번호가 몇번 나오든 이미지 하나로 처리할 수 있다는 장점이 있습니다. 그리고 HTML 코드도 깔끔하게 정리할 수 있어요. 

part_no_bg는 글자 뒤에 보이는 이미지를 배경으로 처리한 속성입니다.

.part_no_bg {

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

background-repeat: no-repeat;

background-size: 80%;

background-position: center;

width : 300px;

height : 102px;

margin : auto;

display : box;

}

300*102 픽셀짜리 가상의 글상자를 화면 가운데 만들어 놓고 그 안에 part_no_bg.png 파일을 배경으로 넣었어요. 글상자 크기는 배경이미지나 들어가야 하는 텍스트 크기에 따라 조절하면 됩니다. 

여기서 중요한건, 글상자 크기와 글자 크기를 픽셀(px)로 설정했다는 거예요.

전자책 만들 때 고정 단위는 가급적 피해야합니다. 제가 쓴 다른 글에서도 px나 cm 같은 고정 단위는 사용하지 말라고 보셨을거예요. 그런데 여기서는 px를 사용했습니다.

px를 절대로 사용하면 안되는게 아니에요. 크기가 고정되어 있어야 하면 px를 사용해도 됩니다.

화면 크기에 따라 비율을 맞출 수도 있습니다. width를 30%나 50% 처럼 화면 비율에 따라 달라지게 하면 됩니다. 하지만 그럴 경우 가로나 세로 보기에 따라 장 제목만 화면에 가득 찰 수도 있습니다.

part_no의 font-size 역시 20px로 고정을 시켰어요. 만약 글자 크기가 커지면 어떻게 될까요? 배경 이미지를 벗어나거나, 배경이미지에 비해 글자가 너무 작아질거예요. 그래서 글자 크기도 고정을 시켰습니다. 뷰어에서 글자 크기를 변경해도 장 번호는 크기가 변하지 않아요.

뷰어에서는 이렇게 보입니다. 

2.1.2 절 번호

장 번호와 절 번호는 스타일이 똑같아요. 이미지 크기가 달라 width와 height만 조금 다릅니다. 이 스타일을 복사해 이미지 크기에 맞게 조절을 하면 다른 책에도 똑같이 적용할 수 있어요.

뷰어에서는 이렇게 보입니다.

2.2 첫 글자

첫 글자에는 특별한 스타일이 들어가지 않았습니다. 여기서 팁으로 알려드릴건, span 태그를 쓰지 않고 strong 태그를 쓴 것과, margin-left를 사용한 부분입니다. 이런 스타일을 표현할 때 아래처럼 코드를 짜는 분들이 많이 있더라구요.

CSS가 익숙하지 않다면 first_letter에 text-indent : 3em;을 넣으면 되지 않나 생각하는 분들도 있을거예요. 이런 생각을 하신 분들께는 박수를 ^^//

이런 생각을 하는게 당연합니다. 생각하지 않은 분이라면 CSS가 익숙하거나, CSS에 소질이 없거나 둘 중 하나예요.

first_letter 속성에 text-indent : 3em;을 넣으면 코드가 깔끔해 질 수 있습니다. 하지만 아쉽게도 부모 태그 안에 들어간 자식태그는 text-indent 속성이 적용되지 않아요. 그래서 span 태그에 text-indent 속성을 지정할 수 없어 p 태그에 지정을 합니다.

margin-left는 자식 태그여도 여백이 적용됩니다. 그래서 text-indent 대신 margin-left를 쓴거예요. 속성은 조금 차이가 있지만 원하는 결과를 얻어낼 수 있습니다. 

적용된 모습은 2.1.2의 이미지를 참고하세요

2.3 이미지 가운데 정렬

이미지 가운데 정렬은 정말 쉽지요. 그런데 이렇게 쉬운 부분에서 실수를 자주 합니다.

먼저, 가운데 정렬을 할 때 text-indent : 0; 속성을 주는게 좋아요. 이걸 안하는 분들이 의외로 많습니다. 이 글을 보는 분들 중에서도 왜 들여쓰기를 0으로 줘야 하지? 하고 의아해 하는 분들이 있을거예요.

아래 두 이미지를 보세요. 앞쪽은 들여쓰기가 되어 있고, 뒷쪽은 들여쓰기를 0으로 했습니다. 들여쓰기를 0으로 하지 않으면 이미지에도 들여쓰기가 적용되요. 화면의 가운데 들어가야 하는 이미지가 오른쪽으로 약간 치우쳐 보이게 됩니다. 아래 예는 이미지가 커서 그런데, 이미지가 작으면 균형이 틀어져 보여요. 그래서 이미지 가운데 정렬을 할 때는 의도한게 아니라면 들여쓰기를 0으로 주는게 좋습니다.

또 하나. width=100; 대신 max-width : 100;을 줬습니다. 사진이라면 width 100;을 해도 괜찮아요. 하지만 이 책에 있는 이미지는 텍스트를 대신해 사용했습니다. 그래서 일정 크기 이상 커지면 보기 좋지 않아요. 

이 이미지는 width : 100;을 한거예요. 태블릿 같이 가로로 넓은 화면으로 본다면 이미지가 너무 커집니다.

이건 max-width : 100;을 적용했을 때예요. 일정 범위 까지는 화면 크기에 맞게 조절이 되는데 화면이 너무 커지면 이미지 원본 크기보다 더 이상 커지지 않습니다.

max-width 를 쓸 때는 이미지 원본 크기가 중요해요. 이미지가 아무리 커져도 원본 크기보다 커지지 않는데 원본 크기가 너무 크거나 너무 작으면 보기 좋지 않을거예요.

화면 크기에 따라 본문 글자 크기가 달라져요. 스마트폰에서는 글자가 작고, 아이패드에서는 글자가 커집니다. 스마트폰하고 아이패드를 비교하면 3배~4배정도 글자가 클거예요. 이런걸 고려해서 이미지 크기를 적당히 잘라주면 본문 글자 크기와 비슷한 수준으로 이미지 속 글자가 보일거예요.

2.4 이미지 테두리 글상자

2.4.1 위, 아랫쪽 테두리만 있는 글상자

글상자는 다양하게 활용을 합니다. 자기계발, 여행, 실용 등의 책에는 대부분 글상자가 들어갑니다. 간단한 글상자는 border로 만들 수 있습니다. 테두리를 넣고 배경 색을 지정하고 border-radius로 모서리를 둥글게 처리할 수 있습니다. box-shadow로 그림자 효과를 줄 수도 있고요.

조금 더 복잡한 디자인이 들어가면 이미지로 만들 수 있습니다. 이미지 패턴이 단순하다면 border-image를 쓸 수 있는데 복잡한 이미지라면 border로 한계가 있습니다.

이럴 때 div나 table를 활용할 수 있습니다.

글상자는 대부분 비슷한 패턴을 가집니다. 윗쪽에 글상자의 내용이 무엇인지 알려주는 부분, 아랫쪽, 그리고 본문 영역이지요.

그래서 div 태그를 3개 사용합니다. 

스타일은 의외로 간단합니다. div 안에 이미지를 넣는데 width를 100으로, 그리고 div와 div 사이에 간격을 없애기 위해 line-height를 0으로 줍니다. 저는 기본 스타일로 margin, padding을 0으로 주기 때문에 속성은 넣지 않았는데, 기본 여백이 설정되어 있다면 margin, padding을 0으로 주는게 좋습니다.

윗쪽과 아랫쪽에만 테두리가 있어 본문 영역은 텍스트를 위한 스타일만 들어갔습니다.

뷰어에서 보면 이렇게 보입니다. 

2.4.2 본문에 배경이 들어가는 글상자

위, 아래 테두리는 2.4.1에서 사용한 것과 동일합니다. 같은 스타일을 쓰기 때문에 새로 만들 필요가 없습니다.

본문에 배경을 넣는 스타일은 조금 복잡합니다.

본문은 세로 길이가 일정하지 않습니다. 본문 내용에 따라 세로 길이가 바뀌어야 하지요. 그럼 배경 이미지 길이가 얼마나 되야할까요?

이게 실제 사용된 본문 이미지입니다. 이미지가 이렇게 클 필요도 없습니다. 세로 1px면 충분한데, 그러면 편집할 때 불편해 조금 크게 만들었습니다. 

배경 이미지 크기를 가로 폭에 맞추기 위해 background-size : 100%; 속성을 줬습니다. 

그리고 5px 밖에 안되는 세로를 본문 길이에 상관 없이 넣기 위해 background-repeat : repeat-y; 라는 속성을 부여했습니다. 

repeat-y 속성은 배경 이미지를 세로축으로 계속 반복하라는 속성입니다. 5px 짜리 이미지가 세로로 무한 반복되는 것이지요. 그래서 본문 길이만큼 배경이 들어갑니다. 

이렇게 넣어 주면 위쪽 테두리와 본문이 딱 붙고, 본문 이미지가 반복되어 아래처럼 표현이 됩니다.

같은 속성으로 배경 이미지만 바꾸면 아래처럼 보입니다. 스타일은 똑같고, 이미지만 바꿨습니다. 

이 책은 스타일이 너무 많아 1,2회로 나눠 올립니다. 1회차부터 스크롤 압박이 심하네요 ㅜ.ㅜ 그런 만큼, 재미있는 스타일이 많이 사용되었으니 2회차도 기대해 주세요~~

연극 대본, 희곡 같은 책이 의외로 많습니다. 셰익스피어, 소포클레스, 인형의 집... 저도 전자책을 편집하거나 뷰어 테스트를 하다보면 심심치 않게 대본형 전자책을 봅니다. 최근에는 인기 드라마 대본을 전자책으로 판매하기도 합니다.

그런데 대본 원고를 편집하는 방식이 제각각이더라구요.

아래 이미지를 보세요. 리디북스 미리보기로 인형의 집 전자책을 열어봤습니다. 리디북스 미리보기는 스타일이 100% 적용되지는 않아요. 그래도 전자책 뷰어로 보면 어떻게 보일지를 짐작해 볼 수 있습니다.

(클릭하면 확대해 볼 수 있습니다)

이 3가지 방식이 대본류를 편집할 때 가장 많이 사용하는 스타일인것 같아요.

어떤 책이 보기 편하세요? 왼쪽이나 오른쪽이 가운데보다 보기 편할거예요. 종이책은 왼쪽 처럼 내어쓰기 편집을 많이 합니다. 개인적인 취향이긴 하지만, 오른쪽 처럼 등장인물 이름이 너무 도드라져 보이면 대본을 보는데 신경이 쓰여서 저는 왼쪽 편집을 좋아합니다.(제가 만들어서 그런건 아니에요 ^^;)

이번엔 인형의 집을 갖고 전자책을 위한 대본 스타일을 정리해 봤습니다. 

1. 주요 편집 스타일

1.1 본문

이 두 페이지 안에 오늘 필요한 스타일이 모두 나와 있습니다. 종이책 PDF를 캡쳐한거예요.

먼저 (대본류의 용어를 모르니 먼저 양해를...) 배경 설명을 하는 부분이 있습니다. 들여쓰기를 안했다는 것 빼면 일반적인 '본문' 스타일이 적용됐어요.

1.2 설명

그리고 등장인물의 행동을 설명하는 부분이 있습니다. 괄호로 묶여있고, 등장인물의 대사에도 쓰입니다. 본문보다는 작은 글씨체예요.

1.3 이름

그 다음 등장인물 이름입니다. 굴림/고딕 계열의 글꼴을 사용해 대사와 구분을 합니다.

1.4 대사

끝으로 대사 부분입니다. 이름과 대사는 하나로 묶여 내어쓰기가 되어 있습니다.

2. 전자책 편집 스타일

2.1 본문

본문 스타일을 잡을 때 고민을 했습니다. 본문은 p 태그에 기본 스타일을 지정하기 때문에 편집할 때 다른 속성을 넣을 필요가 없습니다. 그런데 대본은 한번 더 생각을 해야되요. 

본문이 많이 나오나요? 아니면 대사가 더 많이 나오나요? 당연히 대사가 더 많이 나옵니다. 그렇다면 기본 스타일은 대사가 되야하지 않겠어요? 본문이 나오는건 장과 장이 넘어갈 때 2~3 단락 정도입니다. 

그래서 본문 기본 스타일을 책의 대부분을 차지하는 대사에 맞추고, 본문에는 noindent 속성을 추가했습니다. 

본문 분량이 많다면 div나 blockquote로 블럭을 지정하고 한번에 스타일을 지정할 수도 있습니다. 가족관계 기억 하시지요? blockquote + p { }요.

2.2 설명

설명 항목은 새로운 스타일을 만들지 않았습니다. 이전 글에서 '기본 스타일'로 설명 드린 <sub> 태그를 그대로 사용했습니다.

설명도 몇가지 고민을 했습니다. 반복 횟수는 많은데 대사 중간에 들어가는 경우도 있거든요. p 태그에 클래스를 추가하는 방식이 더 깔끔하긴 하지만, 이렇게 하면 대사 중간에 들어가는 설명은 더 복잡해집니다. span 태그를 쓰거나, 똑같은 스타일을 선택자와 sub 2개로 만들어야 합니다.

그래서 저는 sub 태그로 통일시켰습니다.

스타일을 2개 만들어야 하는 이유 외에도 sub 태그를 쓴 이유가 하나 더 있습니다. 편집 시간 단축을 위해서예요.

설명은 모두 괄호( )로 묶여 있습니다. sub 태그로 통일시키면 찾아바꾸기로 한번에 스타일을 지정할 수 있습니다. 

몇번을 강조해도 부족함이 없지만, 아무리 강조해도 이해하지 못하는 것 중 하나가, 스타일은 '정답'이 없다는 거예요. 코드는 깔끔해야 하지만, 편집 시간을 확 줄일 수 있다면 조금 복잡한 코드는 눈감아 줄 수 있습니다. 경우에 따라서는 편집 시간을 줄일 수 있다 해도 깔끔한 코드를 선택해야 할 때가 있고요.

저는 이번엔 깔끔한 코드 보다는 짧은 편집 시간을 선택했습니다.

찾기 : (   / 바꾸기 : <sub>(

이거 한번으로 417번의 반복 작업을 끝낼 수 있었습니다. 

그리고, 이게 정답은 아닙니다. 제 선택이었을 뿐이에요.

3. 이름

이름 스타일은 특별한게 없어요. 본문과 다른 글꼴, 본문과 오른쪽 간격을 벌려주는 속성을 사용했습니다.

그런데 이름 스타일이 1304번 적용됩니다. 스타일 하나 적용하는데 1초씩 잡아도 20분이 넘게 걸려요. 1초에 가능할까요? 2~3초씩은 걸립니다. 그러다 보면 이름에 스타일 지정하는데만 30분~40분은 걸립니다.

이럴 때 패턴을 찾아보세요. 어떤 패턴이 보이세요?

<p>노라

<p>짐꾼

<p>헬미르

...

등장인물은 모두 9명입니다.

<p> 태그 다음에 사람 이름이 나오면 그건 등장인물인거예요. 무조건 그런건 아닙니다. 원고에 따라 다를 수 있어요. 하지만 이 책은 <p> 태그 다음에 이름이 나오면 그건 등장인물 이름입니다.

그럼 찾아바꾸기가 통하겠지요?

찾기 : <p>노라

바꾸기 : <p><span class="name">노라</span>

이렇게 등장인물 이름을 바꿔가며 9번 실행합니다. 5분도 안걸려요.

다른 대본 원고도 90% 이상은 이런 패턴일 거예요. 그럼 100번 중 90번을 수정하는게 편한지, 아니면 10번을 수정하는게 편한지 고민을 해보세요.

2.4 대사

마지막으로 대사입니다. [2.1 본문] 설명하면서, 본문보다 대사 분량이 월등히 많기 때문에 기본 스타일을 대사에 맞췄다고 설명했습니다. 기본 스타일로 만드니 대사 부분의 HTML 코드가 깔끔해졌어요. 1400번 반복되는 대사 내어쓰기를 p 태그 하나로 끝냈습니다. 본문에 noindent 클래스를 추가한 이유가 이것 때문이에요.

여기서 눈여겨 보실 부분은 마지막 2줄이에요.

text-indent : -3em;

padding-left : 3em;

padding : 0 0 0 3em;은 padding-left : 3em;과 똑같습니다. 

원리는 이래요.

1. padding-left : 3em; 눈에 보이지는 않지만, 상자를 하나 그리고 상자 안쪽 여백을 3em 만큼 줍니다.

2. text-indent : -3em; 그 다음 들여쓰기를 -3em 줍니다. 그럼 첫번째 줄만 3칸 앞으로 오게 되요. 들여쓰기의 반대입니다.

이 스타일은 대본 외에도 편집에 많이 사용이 되요. 특히 글머리 숫자나 글머리 기호를 표현할 때 유용합니다. 

이제 비교해 보세요. 본문과 등장인물 이름이 구분 없이 편집된 책, 등장인물 이름만 강조한 책, 들여쓰기를 하고 등장인물을 본문 글꼴과 구분시킨 책. 셋 중에 어떤 책을 읽고싶으신가요?

오늘은 같은 패턴을 가진 시리즈물 편집입니다.

심야책방 세계문학 시리즈로 책의 내용에 따라 달라지는 점은 있지만 기본 형식은 동일합니다.

이런 시리즈물은 양식 하나만 잘 만들어 놓으면 1~2시간에 전자책 한권씩 만들 수 있습니다.

심야책방 세계문학은 편집이 간결합니다. 소설 중심이어서 복잡한 스타일은 많지 않습니다. 대신 시리즈의 정체성을 살려주는 포인트를 강조했습니다. 

1. 책은 표지, 속표지, 목차, 본문 순으로 편집해 3페이지만 넘기면 본문을 볼 수 있게 한다.

2. 속표지, 목차 스타일은 종이책 편집을 살리고 모두 통일시킨다.

크게 보면 이 두개를 기준으로 작업을 했습니다.

(기본적인 틀은 동일하고 책에 따라 조금씩 달라지는 시리즈물 스타일)

1. 주요 편집 스타일

이번 글은 금방 끝나겠네요 ^^;

시리즈물은 기본 양식 하나로 편집하기 때문에 작업 효율이 좋습니다. 전자책 만들 때 스타일 잡는 시간이 전체 편집 시간의 1/3 이상인데 스타일이 정해져 있기 때문에 제작 시간을 확 줄일 수 있습니다.

심야책방 세계문학 시리즈는 3가지 스타일이 반복적으로 사용됩니다. 

1.1. 속표지

저는 전자책을 만들 때 속표지는 넣지 않습니다. 속표지는 겉표지와 똑같이 만드는데 종이책에서는 형식상 필요하지만 전자책에서는 본문까지 가는데 한 페이지 더 넘겨야 하는 불편 외에는 다른 기능이 없거든요.

하지만 심야책방 세계문학 시리즈는 속표지를 넣었습니다. 표지 -> 목차 -> 본문 순으로 가면 조금 허전한 느낌이 들더라구요. 그리고 겉표지에서는 강조할 수없는 작품의 제목을 도드라져 보이도록 하는 역할도 합니다.

1.2. 목차

목차 스타일은 간단합니다. 다만 종이책과는 조금 다르게 가져갔습니다. 종이책처럼 뷰어 50% 지점에서 목차를 정렬할 수 있지만 전자책은 페이지도 없고, 다수의 책이 1장, 2장 처럼 간결하더라구요. 그래서 전자책에 맞게 오늘쪽 정렬을 시켰습니다. 

1.3. 본문

본문도 특별한 스타일은 없네요. 제목을 가운데정렬 한 것 외에는 신경쓸만한 스타일이 없습니다. 책에 따라 조금씩 다른 부분이 있긴 한데 그건 그때 그때 스타일을 만들어 적용했습니다.

2. 전자책 편집 스타일

2.1 속표지

심야책방 세계문학이 통일된 느낌을 갖게 만들기 위해 속표지에 신경을 썼습니다. 종이책은 표지에서 통일감을 부여할 수 있지만, 전자책은 표지를 볼 일이 썸네일 외에는 없습니다. 속표지 역시 마찬가지겠지만, 표지를 넘기자 마자 나오는 책 제목 영역을 강조하고 싶었습니다.

종이책 느낌은 살리면서 전자책에 맞게 편집을 하기 위해 몇가지 고민을 해야했습니다. 

첫째. 영문 제목 아랫쪽에 그어진 밑줄은 어디에 속하는가?

이 밑줄이 영문제목에 그어진 것이라면 영문제목의 줄이 바뀌더라도 단어별로 줄이 그어져야 합니다. 그렇지 않고 한글 제목과 영문제목을 구분해 주는 선이라면 줄바꿈과 상관 없이 한글제목과 구분되는 선 하나만 그어져야 합니다.

저는 이 선을 한글 제목과 구분하는 선이라고 봤습니다. 그래서 영문제목이 줄바꿈을 해도 한글제목 사이에 하나만 나타나도록 했습니다.

둘째. 제목 글자 크기

제목의 길이는 작품마다 모두 다릅니다. L'Etranger 처럼 짧은 제목도 있고 Throught the Looking-Glass 처럼 긴 제목도 있습니다. 제목 글자 크기를 화면 폭에 맞출 것인지, 아니면 일정 크기로 고정시킬 것인지를 고민했습니다. 책을 펼쳤을 때 제목이 눈에 확 들어오려면 화면 폭에 맞추는 것 보다는 줄바꿈이 된다 하더라도 일정 정도의 크기를 유지하는게 좋다고 생각했습니다.

뷰어는 기본적으로 영어 단어 단위로 줄바꿈을 합니다. 영어 단어를 폭에 맞춰 잘라내는 방법도 있지만 영문은 단어 단위로 움직이는게 좋기 때문에 뷰어 설정을 그대로 따랐습니다.

여기서 한가지 알아두면 유용한 속성이 있습니다.

border-bottom으로 선을 그리고, 텍스트를 가운데 정렬 하면 화면 왼쪽 끝에서 오른쪽 끝으로 선이 그어집니다. 아래 왼쪽 이미지가 boder-bottom으로 선을 그었을 때 결과입니다. 이럴 때 display:table 속성과 margin-left, margin-right에 auto 값을 넣어 주면 오른쪽처럼 단어나 문장에 딱 맞는 크기로 선이 그려집니다. 

(display : table; 속성을 추가하면 글자 크기에 맞게 선을 그을 수 있습니다)

스타일을 적용한 결과입니다. 화면 크기에 따라 제목 줄바꿈이 되고, 밑줄은 영문과 한글 제목을 구분해 주는 역할을 합니다. 뷰어에서 보면 영문 제목이 도드라져 보입니다. 심야책방 세계문학을 전자책으로 펼치면 제일 먼저 만나는 속표지입니다.

2.2 목차

종이책 목차는 페이지의 1/2 지점에 책 제목이 있고, 오른쪽으로 페이지 번호가 나옵니다. 

하지만 전자책은 페이지 번호가 없습니다. 그래서 1/2 지점에 목차를 정렬시킬 수는 있지만 그렇게 하면 목차가 아주 이상해집니다. 그래서 허전해 보여도 목차를 오른쪽 정렬 시켰습니다.

여기서도 2.1에서 설명했던 display:table 속성을 사용했습니다.

[차례] 위, 아래에 border-top과 boder-bottom으로 줄을 긋고 dispaly : table, margin-left : auto 속성으로 글자 크기에 맞췄습니다. 

목차 스타일은 이렇게 적용이 됩니다.

목차가 짧아 허전한 감이 있지만, 통일감을 주기 위해 없애지 않고 남겨뒀습니다.

2.3. 본문

본문 제목 스타일

기타 본문 편집 스타일

본문 역시 특별히 강조할 만한 내용은 없습니다. 

목차가 장 번호로만 이루어진 책이 있고, 장 번호와 제목이 함께 있는 책이 있는데 이럴 때 장 번호를 display:block을 써서 제목과 줄바꿈을 해줬습니다. 

본문에는 반복적으로 들어가는 스타일이 있습니다. 본문 내 인용구는 blockquote 태그를, 강조해야 하는 단어는 strong 태그를, 괄호 설명 항목은 sub 태그를 사용해 편집을 합니다. 종이책에서는 조금씩 다르게 표현되었더라도 전자책은 통일감을 주기 위해 스타일을 일치시켰습니다. 희곡처럼 다른 책들과 확연히 구분될 때만 몇가지 스타일을 추가해 줬습니다.

이번에는 복잡한 스타일이 들어가지는 않았습니다.

하지만 스타일이 비슷할 때는 기본 탬플릿을 만들고 이를 바탕으로 여러 책을 편집하는 방식을 설명드렸습니다. 같은 출판사의 책이라면 본문 글꼴, 줄간격, 인용구, 괄호나 영문/한자 등 외국어 표기를 통일시키는 것도 좋습니다. 편집 시간을 절약할 수 있고 출판사 스타일에 통일감을 줍니다.

2.4 편집시 자주 사용하는 기본 스타일

아래 스타일은 어떤 책을 편집하든 사용할 수 있는 스타일입니다. 

상황에 따라 조금씩 수정해 사용하시면 됩니다.

이미지를 왼쪽, 혹은 오른쪽에 어울림 배치하는 스타일

책제목 : 내 인생 10년 후

출판사 : 토네이도

제작 시간 : 5시간

이 책은 편집이 간단했습니다. 복잡한 스타일이 없고 본문 내 이미지도 없는 책입니다. 하지만 장, 절, 소단락이 여러개로 나뉘어 있어 반복적으로 제목 스타일을 지정해 줘야하는 책입니다. 또한 괄호 설명과 인명 등에 영문표기가 포함되어 있어 편집 시간이 오래 걸렸습니다. 

편집은 간단하지만 다양한 기술이 적용된 책이기도 합니다. 배경이미지를 설정 div 태그 글상자, :before / :after 선택자, border로 선처리 등 편집이 복잡한 책에서 사용하는 스타일이 모두 담겨 있습니다.

Point

1. 100개 이상의 소단락이 있어 제목 스타일 지정이 번거로움

2. 괄호설명, 영문 표기 등은 일괄변경이 어려워 시간이 오래 걸림

3. 다양한 스타일 적용

1. 주요 편집 스타일

이 책에는 6개의 스타일이 필요합니다. 본문, 주석, 목차 등 다른 책에 공통으로 사용되는 기본 스타일은 제외한 것입니다. 

추가로 수백개가 넘는 괄호 설명과 영문표기에 스타일을 적용하려면 시간이 많이 필요합니다. 

1.1 프롤로그

'프롤로그'라는 굴림/고딕 글자 오른쪽에 세로 긴 줄이 있고, 본문보다 큰 글씨체로 프롤로그의 제목이 들어갑니다. 

1.2 장 제목

장 제목은 2페이지로 구성돼 있습니다. 세로보기 이용자가 많은 전자책에 이 편집을 그대로 넣으면 보기 좋지 않을거예요. 그래서 전자책에 맞춘 스타일이 필요했습니다. 

1.3 장 요약 글상자

회색 바탕에 흰색 본문 영역으로 된 글상자입니다. 글상자 안에 문단별로 스타일을 적용하면 되지만, 이런 글상자가 5번 반복되고, 글상자 안에 굵은 글씨와 설명으로 된 문단이 계속 반복됩니다. 글상자 안쪽 편집을 최소화 하는 스타일이 필요합니다.

1.4 중간 페이지??

장이 시작되면 명언이 들어가는 페이지가 있습니다. 따옴표 크기를 고정하면 간단합니다. 하지만 해상도가 높아지면 따옴표가 글자 크기보다 작아질 수 있습니다. 화면 크기에 맞게 따옴표 크기가 바뀌도록 스타일을 적용했습니다.

1.5 절 제목

위 아래로 선이 있습니다. 간단한 방법은, 제목 위, 아래로 이미지를 넣는 것입니다. 그런데 이런 절이 30번 이상 반복됩니다. 제목 편집 시간을 최소로 줄일 수 있는 스타일이 필요합니다.

1.6 소단락 제목

소단락은 100번 이상 반복됩니다. 이 경우 사람이 직접 위치를 확인하고 수정을 해야합니다. 제목 앞에 길게 그어진 줄이 본문 앞까지 이어지는 것도 처리해야합니다. 편집이 복잡하면 시간이 오래 걸리기 때문에 간단히 작업할 수 있는 스타일이 필요합니다.

아울러, 종이책 목차에는 소단락이 정리되어 있지 않습니다. 필요 없어서일 수도 있지만 종이책 목차 페이지의 한계 때문인 경우가 많습니다. 전자책에서는 소단락까지 목차를 표시하려고 합니다. 100개를 전부 수작업으로 추가하기는 힘들기 때문에 목차 작업을 한번에 할 수 있어야 합니다.

1.7 괄호 설명, 영문 표기

아래처럼 괄호로 단어의 뜻이나 설명을 추가한 책이 많습니다. 책 한권에 이런 설명이 수십에서 수백개가 나올 수 있어 본문을 보며 찾으려면 시간이 아주 오래 걸립니다.그리고 보지 못해 빼먹는 경우도 생깁니다.

괄호로 묶여있으면 찾기 쉽습니다. [찾기]기능으로 괄호[( ]만 찾아 확인하면 되니까요. 찾아바꾸기로 일괄 변경도 가능합니다. 그런데 이런 영문인 경우는?

영문이 모두 해당하는 것도 아닙니다. 이렇게 부가 설명이나 표기가 아닌, 본문에도 영문이 사용될 수 있습니다. 이를 구분해야 하기 때문에 편집 시간이 오래 걸리지요. 방법은 없습니다. 직접 눈으로 확인을 해야합니다. 하지만 조금 편한 방법은 있습니다.

2. 스타일 편집

[1. 주요 편집 스타일]에 설명한 스타일을 적용해 보도록 하겠습니다. 여기 소개한 스타일이 정석은 아닙니다. 전자책 편집에 정석이란 없습니다. 편집자별로 고유의 방식이 있고, 그 방법이 가장 좋다고 생각합니다.

이 글은 전자책 제작 공부를 하는 분들, 편집을 하는데 막힌 부분이 있어 해결책을 찾는 분들, 그리고 자신이 쓰는 방법이 최선이 아니라는 생각이 들어 보다 편한 방법을 찾는 분들이 참고하실 수 있도록 제가 사용하는 방법을 정리한 것입니다.

여기 적힌 스타일을 보다가 '내가 쓰는 방식이 더 편하고 효율적이네' 라는 생각이 드시면 언제든 댓글을 남겨주세요. 저도 다른 분들이 사용하는 방식을 보면 큰 공부가 됩니다^^

2.1 프롤로그

프롤로그의 포인트는 단어와 단어 사이에 있는 세로줄입니다. 줄에 맞춰 시작되는 본문(첫 단락에만 들여쓰기 3em 적용)도 있지만, 이건 소단락에서 설명드리겠습니다.

단어와 단어 사이에 긴 세로줄을 긋는 가장 쉬운 방법은 폭 1px 짜리 이미지입니다. 단어와 단어 사이에 이미지를 넣고 vertical-align : text-top 스타일을 지정하면 됩니다. 

프롤로그 스타일은 본문 전체에 2번 적용되고 본문에 세로줄 이미지를 사용하고 있으니 이렇게 해도 괜찮습니다. 그런데 문제가 하나 있어요. 아래처럼 제목 줄바꿈을 하면? 이건 직접 해보세요^^

저는 프롤로그 제목 영역을 세로 4줄 크기 글상자로 생각했습니다. 아래 빨간색 테두리처럼 상자를 만든거지요.

.prologue 클래스에 height : 4em; 스타일이 이를 위한 것입니다. 세로줄을 더 길게 혹은 짧게 하고 싶다면 이 부분을 수정하면 됩니다.

그리고 display : flex; 라는 스타일을 적용했습니다. 여기는 CSS를 설명하는 곳이 아니니 flex 속성에 대한 설명은 하지 않습니다. 이곳을 참고하세요 : http://www.w3schools.com/cssref/css3_pr_flex.asp

flex를 넣은 이유는 <br /> 태그로 제목을 2줄로 만들기 위해서입니다. flex를 빼보면 이해하실거예요^^

[프롤로그]라는 글자는 본문보다 작습니다. 그래서 클래스명도 단순하게 prologue_small이라고 붙이고, 여기에 세로줄을 추가했습니다.

border-right : 1px solid #000000;

여기서 잠깐! 그냥 prologue_small에 height : 4em;을 추가하면 되는거 아냐? 라는 생각이 들었다면 박수를 쳐드리고 싶네요. 이렇게 하면 prologue라는 스타일을 만들지 않아도 되니 훨씬 간단해 질 수 있거든요. CSS 속성만 보고도 머릿속에 스타일이 그려질 정도의 고수가 아니라면 이런 생각을 해야합니다. 저도 예전에 이렇게 접근을 한 적이 있어요.

그런데 span 태그의 특성이 있습니다. span 태그는 부모 속성의 영향을 받습니다. 그래서 자신이 속해있는 부모 속성을 벗어난 경우 속성이 적용되지 않아요.

스타일의 결과물입니다. 종이책과 비교해 보세요.(클릭하면 큰 이미지로 볼 수 있습니다)

왼쪽이 전자책, 오른쪽이 종이책

Tip : 전자책을 보지 않는 분들이 하는 실수!

PC에서 전자책 이미지를 보면 '좀 이상한데'라고 느껴질 수 있습니다. 당연합니다. 해상도도 다르고, 화면 크기도 다르니 이상할 수 밖에요. 전자책 이미지 결과물은 스마트폰에서 캡쳐했습니다. 그러니 스마트폰으로 봐야 전자책으로 어떻게 보이는지 알 수 있습니다.

2.2 장 제목

전자책 이용자는 세로로 책을 보는 경우가 많습니다. 그래서 종이책 2페이지에 걸쳐 담긴 이미지나 편집은 전자책으로 만들 때 편집 자체를 새로 하는게 좋아요. 책의 느낌은 살리면서 가로, 세로 모드에서 자연스럽게 보일 수 있도록 해야합니다. 

이 책의 장 제목 페이지를 보세요.

두 페이지에 걸쳐 있습니다. 이렇게 똑같이 만들 수는 있어요. 그런데 스마트폰에서 세로로 보면 어떻게 될지 생각해보세요.

이 스타일을 종이책 느낌은 살리면서 가로, 세로에서 문제없이 보이도록 하려면 어떻게 해야하나 고민을 했습니다. 사실 스타일을 만드는건 어렵지 않아요. 스타일을 어떡게 만들지 결정하는게 더 어렵습니다.

전자책 만드는 시간이 5시간이라면, 스타일 고민하는 시간이 2~3시간 정도 되요. 스타일만 잡으면 나머지는 단순작업입니다. 종이책과 똑같이 만들 수도 있어요. PDF처럼 위쪽 페이지에는 꽃 이미지가, 아랫쪽 페이지에는 챕터 제목이 들어가도록 할 수 있습니다. 이렇게 만들기는 어렵지 않으니 고민할 필요도 없지요.

제가 선택한 방법은, 꽃 이미지를 그대로 배경에 쓰는거였습니다. 하지만 가로로 보는 독자도 생각을 해야하니 이미지로 넣을 수는 없었습니다.

세로로 볼 때

가로로 볼 때

종이책과 똑같지 않습니다. 그럴 수도 없고요. 전자책은 종이책이 아니기 때문에 똑같이 만들 필요도 절대 없습니다. 다만, 종이책 편집자가 담으려는 느낌을 표현해 줄 수 있으면 됩니다. 

이미지를 그냥 넣으면 세로일 때는 화면 크기에 맞겠지만 가로로 돌아가면 이미지가 작아지거나 한쪽으로 늘어나버립니다. 뷰어에 따라서는 2페이지에 걸쳐 이미지가 나타날 수도 있습니다. 그래서 가로로 돌려도 자연스럽게 표현이 되도록 배경으로 처리를 했습니다.

.ch_bg {

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

background-repeat : no-repeat;

background-size: 100%;

}

이미지 크기는 가로 화면 기준으로 100%로 보이도록 하고, 화면 크기에 상관 없이 이미지가 보이도록 no-repeat 속성을 부여했습니다.(속성 설명은 http://www.w3schools.com/css/css_background.asp 참고)

장 번호에 밑줄을 살리기 위해 border-bottom을 썼습니다. 그리고 <br/> 태그로 간격을 벌렸고요. 줄간격 속성이나 여백을 쓸 수도 있지만, 장 제목 페이지는 5개밖에 되지 않아 <br/>태그로 처리를 했습니다.

div 태그나 p 태그를 사용해 장 번호와 제목을 2단락으로 나눌 수도 있습니다. 하지만 제목은 가급적 제목태그로 묶는게 좋습니다. 나중에 목차 편집이 편해지거든요. 

어려운 스타일은 없습니다. 하지만 다른 부분은 종이책 그대로 표현을 하면 되는데 장 제목은 그대로 표현을 할 수 없어 이런 방법을 생각해 내기 까지 시간이 걸렸네요.

2.3 장 요약 글상자

회색 테두리에 흰색 바탕, 글자는 본문과 다른 고딕체입니다. 

그리고 각 절의 제목이 강조되어 있는 스타일.

회색 테두리를 치는 방법은 다양합니다.

제가 종종 쓰는 방식 두가지를 보여드리면...

첫째. div 태그로 회색 배경, 안쪽에 흰색 바탕을 넣는 방식입니다. 바깥쪽 div 상자에 padding을 줘서 테두리처럼 보이게 합니다.

두번째 방법으로 간단한 테두리 글상자를 만들 때 사용합니다. border로 선을 긋고 필요한 만큼 두께를 주는 방식이에요. 코드가 간결합니다.

이것 외에도 무수히 많은 방법이 있습니다. 

그런데 이 책을 만들 때는 첫번째 방식을 조금 변형시켰습니다.

왜 그럴까요?

위 두 방식을 보시면 테두리 바깥으로 흰색 여백이 보입니다. 전자책 뷰어는 기본 여백이 있기 때문에 이보다 여백이 더 클거예요. 이 책에는 회색 테두리 바깥쪽에 여백을 두고 싶지 않았습니다.

그래서 해결 방법은?

<body class="bg_grey">

body 태그에 회색 배경색을 입혔습니다. 이 단락은 페이지 전체가 글상자로 되어 있기 때문에 본문을 고려하지 않아도 됩니다. 만약 본문 중간에 회색 테두리가 필요하다면 이런 방식은 피해야합니다.

그리고 많은 편집자들이 비슷하겠지만, 문단 기본 태그 p에는 항상 대표 스타일을 적용해 놓습니다.

CSS를 구분해 만들지 않았으니 글상자의 본문도 이 스타일이 적용됩니다. 그래서 CSS의 가족관계를 이용해 bg_grey 스타일이 적용된 곳의 p 태그는 대표 스타일이 아닌 다른 스타일이 적용되도록 했습니다. 절 제목이요? 그건 그냥 클래스로 지정해 주는게 편해요 ^^

책에는 여백이 없는데 전자책으로 보니 답답하더라구요. 그래서 전자책은 여백을 살짝 줬습니다. 

몇번을 강조하지만, 전자책과 종이책은 다릅니다. 종이책 스타일을 무조건 지키기 보다는 전자책을 볼 때 독자들이 더 편하게 느낄 수 있는 스타일을 선택하세요.

아래 이미지로 전자책 최종 스타일과 종이책 스타일을 비교해 보세요.

2.4 중간 페이지

종이책 출판에 깊은 지식이 없어서 이런 영역을 뭐라 부르는지 모르겠네요. 장이나 절이 시작되는 부분에 주로 들어가는 페이지입니다.

이 책에는 명언 위 아래로 따옴표가 들어갑니다. 배경은 회색이고, 명언을 남긴 사람들은 고딕체로 되어 있습니다.

배경 회색은 2.3에서 만든게 있는데 본문 태그에 스타일을 적용해서 사용할 수 없었습니다. 그래서 새로 회색 배경 스타일을 만들었어요. 실제 코드는 조금 다릅니다. 똑같은 스타일을 2개 이상의 클래스에 지정할 때는 따옴표를 이용할 수 있거든요.

이렇게 2.3과 2.4에서 쓰일 회색 배경 스타일을 한번에 지정했습니다.

이미지는 화면 비율에 따라 달라지도록 했습니다. 스마트폰의 텍스트 크기와 아이패드의 텍스트 크기가 다르잖아요. 화면이 커지면 따옴표도 커집니다. 얼마나 크게 할건지는 따옴표 이미지의 실제 크기에 따라 달라집니다.

특별한건 전혀 없는데 스타일은 많고 코드는 복잡한 페이지였네요.

* 아래 이미지의 사람 이름에 고딕체를 적용하기 전 화면입니다. 나중에 수정했는데 귀차니즘이...^^;;

2.5 절 제목

절 제목 스타일의 포인트는 위, 아래에 그어진 세로선과 첫문단 들여쓰기입니다.

위, 아래에 이미지를 직접 넣어도 되는데, 60번 넘게 <p><img src....> 태그를 반복하고 싶지 않았어요. 30개가 넘는 절로 구성되어 있고, 위, 아래에 이미지를 넣어야 하니 60번 이상 반복을 해야합니다.

대신 h3 태그에 스타일을 모두 집어 넣었습니다. 

:before 선택자는 h3 앞쪽에, :after는 뒤쪽에 특정 문장이나 이미지를 넣을 수 있게 해줍니다. 그냥 사용하면 이렇게 표현이 되요.

[앞쪽 콘텐츠] h3 텍스트 [뒷쪽 콘텐츠]

그래서 display : block; 속성을 추가했습니다. 이 속성은 '무조건 다음줄로' 쯤으로 이해하시면 되요.

그리고 가족관계를 이용해 h3 바로 다음에 나오는 p 태그(+p)는 무조건 3em 들여쓰기가 되도록 했습니다. +는 '바로 다음에 나오는' 태그만 영향을 줍니다.

2.6 소단락 제목

100번 넘게 반복이 되는 소단락. 그래서 편집이 복잡하면 편집시간이 길어질 수 밖에 없습니다. 편집을 간단하게 하려면 태그 하나에 스타일을 모두 집어넣어야겠지요? 그래서 h4 태그에 스타일을 모두 담았습니다.

소단락 제목의 핵심은 제목 옆에 있는 세로줄. 세로줄이 본문 영역까지 내려가 있는걸 표현해야 합니다. 

여기엔 중요한 Tip이 하나 사용됐습니다. 

margin : -1.5em;

유용하게 사용할 수 있는 속성인데 모르는 분들이 많더라구요.

마진에 음수 값을 쓰면 두 영역을 겹치게 할 수 있어요. 아래 이미지 보시면 제목 영역에 음수를 써서 본문과 겹칩니다. 저 점선은 제가 그려 넣은게 아니고 제목과 본문 영역에 border로 테두리를 친거예요. 제목 영역의 빨간 테두리가 본문 영역까지 내려가 있습니다.

그럼 테두리를 모두 지우고 제목 영역의 왼쪽 테두리 점선을 검정 실선으로 바꿔보세요. 표현하려는 스타일이 딱 나오지 않나요?

참고로 margin은 음수 값 사용이 가능한데, padding은 음수 값을 사용할 수 없습니다. 이건 스타일의 속성 때문인데, 다음에 기회 되면 설명할게요 ^^;;

이 Tip은 다양한 활용이 가능합니다. 

아래 예제를 보세요. 이미지 위에 텍스트가 있습니다. 이미지 하나라고 생각하시겠지만, 이미지 위에 '포스트잇'이라는 텍스트를 올려놓은 거예요.

만약 저런 형태로 포스트잇 001 ~ 포스트잇 100까지 있는 책이라 생각해보세요. 이미지로 만들려면 100개의 포스트잇 이미지가 필요합니다. 그런데 margin  음수 값을 이용하면 이미지 하나로 포스트잇 001 ~ 100까지 표현할 수 있습니다.

다른 스타일은 특별한게 없으니 설명을 생략합니다. 최종 결과물 참고하세요.

2.7 괄호 설명, 영문 표기

괄호 설명과 영문 표기는 sub 혹은 sup 태그를 사용하길 권해드립니다. span 태그를 쓰는 분들이 있는데 sub/sup를 쓰면 코드가 훨씬 깔끔해요.

sub, sup는 스타일 업이 사용하면 위나 아래로 튀어나옵니다. 기본 속성이기 때문에 사용 전에 스타일을 지정해 주는게 좋아요.

위, 아래로 튀어나오지 않고 본문 텍스트에 잘 어울리게 하려면 vertical-align 속성을 사용합니다. (속성 설명은 여기를 참고하세요 http://www.w3schools.com/cssref/pr_pos_vertical-align.asp)

vertical-align : baseline;

저는 아랫첨자에 baseline 값을 주로 쓰는데 편집하는 책에 맞춰 원하는 속성을 사용하시면 되요.

이제 괄호 설명과 영문 표기 항목을 찾아야하네요.

눈으로 쫓기엔 너무 많고, 놓칠 수도 있습니다.

이 책은 본문 내에 괄호 설명 외에는 괄호가 사용된 곳이 없습니다. 그래서 찾아바꾸기로 간단히 처리했어요.

찾기 : (

바꾸기 : <sub>(

찾기 : )

바꾸기 : )</sub>

이렇게 두번으로 끝냈습니다.

문제는 영문 표기예요.

세보니 딱 138개네요. 하나씩 찾아서 세지는 않았겠지요^^?

영문 표기에는 패턴이 있습니다. 이게 본문 내에 쓰인 영어단어와 영문 표기를 구분해 주는 역할을 합니다. 

한글English

한글 옆에 붙어 영문이 시작됩니다. 본문 내 영어단어는 [한글 English] 이렇게 한칸 띄어쓰기가 되어있어 구분을 할 수 있습니다.

한글 옆에 영어 단어가 한 단어만 나오는건 아닙니다. 이 책에서는 3개까지 나옵니다. 이럴 때는 3개, 2개, 1개 순으로~

한글English English English

한글English English

한글English

위 문장을 찾는다고 생각해 보세요.

한글English로 검색을 하면 결과는 3번 찾습니다.

한글English English English로 검색을 하면 1번 찾지요. 2번, 1번 반복되는 단어는 찾지 않습니다.

이 패턴을 정규표현식에 대입해 영문표기를 바꿔보겠습니다.

정규표현식은 따로 설명을 했기때문에 여기서 자세히 다루지는 않겠습니다. 이렇게 찾아바꾸기를 하면 이런 결과가 나옵니다.

한글_{English English English}

한글English English

한글English

다시한번 찾아바꾸기를 합니다.

그럼 이렇게 바뀝니다.

한글_{English English English}

한글_{English English}

한글English

원리를 이해 하셨나요?

중요!!!

이건 완벽한 바꾸기 식이 아닙니다. 변수가 너무 많기 때문에 영문표기를 한번에 완벽하게 바꾸는 공식을 Sigil의 정규표현식으로 표현하기는 불가능해요. 영문 표기 중간에 다른 기호가 들어갈 수도 있고, 한글English인데 영문 표기가 아닐 수도 있고, 변수가 많습니다.

그래서 이 식을 쓰려면 [찾아 바꾸기]가 아니라 [찾기]로 바꿀 부분을 확인한 후 [바꾸기]로 바꿔야되요. 눈으로 찾는 것 보다 시간은 많이 절약할 수 있지만, 그래도 시간이 많이 걸리는 작업입니다.

이렇게 해서 '내 인생 10년 후' 전자책 제작이 끝났네요 ^^

설명하다 보니 엄청 길어졌어요 ㅜ.ㅜ 

다음엔 좀 더 쉬운 책을 소개해야겠네요 ^^