내맘대로의 EPUB 제작 가이드

책을 만들다 보면 만들기 까라로워 보이는 글상자가 종종 나옵니다.

한쪽 모서리에 불릿 이미지가 들어가거나, 테두리 선이 특이한 경우도 있습니다.

이럴 때 border-image를 사용하면 복잡한 테두리도 쉽게 만들 수 있습니다.

아래처럼 테두리 선이 겹쳐 있고 아래쪽에 돋보기 불릿이 들어있는 스타일 역시 border-image로 만들 수 있습니다.

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

이런 테두리는 border-image로도 만들 수 있고, border와  border-radius를 이용해 만들 수도 있습니다.

둘 중 어떤게 더 좋은가라고 질문을 하는 분들이 있는데, 그때 그때 다릅니다.

전자책에서는 이렇게 보입니다.

이렇게 한쪽 면만 다른 선으로 되어 있는 테두리도 있습니다. 이것 역시 border-image를 사용해 만들었습니다.

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

테두리 상자 디자인이 복잡하다고 border를 이용해 단순하게 만들거나 이미지로 잘라 넣는 것 보다는 테두리 안에 들어 있는 내용이 독자들에게 필요한지 생각해야 합니다. 그리고 디자이너가 왜 이런 디자인을 선택했는지도 고민해 봐야지요.

책을 만든 경험이 풍부한 전문 편집 디자이너라면 쓸데 없이 예뻐보이려고 디자인을 하지는 않습니다. 위에 두 상자만 봐도, 하나는 독자가 의견을 생각해야 할 때와, 질문에 부가 정보를 제공하는 상자가 다른 모양입니다. 상자 디자인만 봐도 둘의 차이를 쉽게 파악할 수 있지요. 그러니 살릴 수 있는 디자인은 최대한 살려서 전자책을 편집해야 합니다. 

우리가 폭력이라 부르는 것들(해냄에듀)은 학습서라 그런지 다양한 박스가 들어있습니다.

이런 상자들은 대부분 border, background, background-image 등의 속성으로 그릴 수 있습니다.

다양한 모양의 상자가 전자책에서는 어떻게 보이는지 샘플을 보여드리겠습니다.

종이책에서 이렇게 보입니다.

전자책에서는 이렇게 보입니다.

전자책에 맞춰 약간 변형을 했지만, 기본 디자인은 최대한 살렸지요.

이 스타일은 background-image, border 속성을 사용했습니다.

종이책에서 이렇게 보이는 스타일입니다.

이 상자는 테두리가 특이하지요?

전자책에서 이 테두리는 border-radius 속성을 사용해 그렸습니다.

이미지를 써도 되지만, border 속성만 이용해도 충분히 그릴 수 있어요.

간혹 각주를 상자로 처리할 때가 있습니다. 

이 책에도 각주를 상자로 처리했어요.

전자책에서도 상자로 처리했습니다.

다만, 문단 단위로 각주가 들어가 있어, 각 문단의 시작 부분에 각주를 넣었습니다.

각주 표시가 있는 줄에 맞춰 넣을 수도 있습니다. 하지만 그러기 위해서는 인라인 태그를 블럭 태그로 바꾸고, 문단 사이에 각주 설명을 넣어야 해서 태그가 지저분해집니다. 그리고, [사회계약으로 국가가...]  부분을 복사 하면 [사회계약으로 사회계약 시민과 국가 사이의...] 이렇게 각주 내용이 복사되지요. 물론, 검색도 문제가 생기고요.

상자가 조금만 복잡해도 무조건 이미지로 넣은 편집자가 많이 있습니다.

웬만한 상자는 박스 모델로 처리가 가능하니, 이미지 보다는 박스 모델을 사용하기를 권해드립니다.

스타일이 재미있는 책이라 소개합니다.

shape-outside를 써야 느낌이 사는 내용이 많이 있고, 이 외에도 다른 재미있는 스타일이 몇가지 있습니다.

Previous imageNext image

먼저 shape-outside를 써서 느낌을 살린 스타일입니다. PDF(종이책)는 위처럼 되어 있습니다.

​

Previous imageNext image

Shape-outside를 써서 느낌을 살려봤습니다. 전자책은 가변적이기 때문에 100% 살리진 못하지만, 다양한 화면에서 깨짐 없이 스타일이 표현이 됩니다.

​

​

그리고 gradient 스타일도 있어요.

본문 글자 색을 gradient로 적용했습니다.

오래 전에 '요리하는 도시 농부'라는 책에서 글자에 gradient 넣는 방법을 설명한적이 있지요.

그 속성을 변형해 사용했습니다.

PDF는 이렇습니다.

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

폭이 가변적이라 스마트폰 같이 좁은 곳에서 보면 한 문단이 2페이지 정도 넘어갑니다.

그럼 gradient 범위가 너무 넓어져요.

그래서 2문단에 gradient를 적용하지 않고 한문단만 적용했어요.

폭이 넓으면 조금밖에 적용되지 않지만, 폭이 좁을때는 1페이지 전체에 gradient가 적용됩니다.

​

​

이런 스타일도 있었네요.

어떻게 할까 고민하다, 간단한 방법으로 해결을 했습니다.

​

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

​

​

아래 PDF는 뒤집힌거 아닙니다.

이렇게 본문 중간에 글자가 뒤집혀있어요.

​

EPUB에서도 이렇게 뒤집었습니다.

종이책처럼 페이지 전체를 뒤집은건 아니고,

전자책은 페이지를 특정할 수 없기 때문에 일정 범위의 문단을 뒤집은거예요.

​

​

​

독특한 스타일이 많다보니 이런건 애교 수준이네요.

​

​

​

이런 것도 있습니다.

위쪽 사선은 쉽게 처리할 수 있지만, 아래쪽 사선은 가변적이기 때문에 처리하기가 정말 어려워요.

그래서 가변 적용까지는 포기하고, 일정 폭에서라도 비슷하게 보이도록 만들었습니다.

일정한 폭에서는 종이책과 똑같은 지점에서 스타일이 적용됩니다. 하지만 폭이 바뀌면 문단 범위가 조금 달라져요. 아래 문단이 사선 안쪽에 들어올 수도 있고, 사선 안쪽 문단이 벗어날 수 있지요.

​

간만에 재미있는 책을 만들어 스타일 몇개 소개해 드렸습니다.

​

전자책은 텍스트와 이미지 대충 얹힌 수준이라 생각하는 분들이 여전히 많습니다.

전자책은 제대로 표현만 하면 종이책보다 더 다양한 형태로 편집이 가능합니다.

가변적이기 때문에 표현할 수 없는 것도 존재하지만

팝업 주석 처럼 종이책에서는 불가능한 것들을 적용할 수 있지요.

​

'그건 전자책에서는 안돼요' 라는 사람이 있으면

왜 안되는지, 표현할 방법은 없는지 물어보세요.

진짜 안되는 것 몇가지를 제외하면,

종이책에서 편집 가능한 건 전자책도 다 표현 가능해요.

싱크어게인 EPUB 스타일입니다.

아래는 왼쪽이 EPUB, 오른쪽이 PDF예요. 테두리 디자인을 그대로 살렸습니다.

목차는 전자책에 맞게 수정을 했어요.

종이책은 좌/우수가 구분되서, 좌측에 THINK AGAIN이, 오른쪽에 ADAM GRANT가 들어갑니다.

전자책은 좌우측 페이지가 의미가 없지요. 그래서 위, 아래로 넣어봤습니다.

종이책은 이렇게 되어 있어요.

본문에 있는 인용구 상자입니다. 

인용구 상자 앞에 파란 줄이 들어있어 그대로 표현을 했습니다.

종이책은 이렇게 되어 있습니다.

위와 비슷한 스타일이에요. 인용구 앞에 사람 이름이 강조되어 있습니다.

부록으로 들어가 있는 행동지침 페이지예요. 

(제목 아래에 본문 여백을 안줬네요 ㅜ.ㅜ EPUB은 수정. 캡처가 귀찮아서...^^)

종이책은 이런 모양입니다.

에필로그가 독특했습니다.

어떻게 표현을 할까 하다 이렇게 넣었어요.

종이책은 이런 모습입니다. 완전히 똑같이 작업을 하려면 고려해야 할 사항이 정말 많아요. 할 수는 있겠지만, 너무 복잡하면 뷰어별로 이상하게 보일 수 있어서, 느낌만 살렸습니다.

종이책을 전자책으로 변환할 때 고민하는 부분 중 하나는

종이책 편집을 그대로 두느냐, 전자책에 맞게 수정을 하느냐입니다.

가능하면 편집자의 의도를 살려 종이책 편집을 그대로 가져가려고 하지만

종이책 편집이 전자책에서 가독성을 떨어트리는 일도 종종 있습니다.

동양북스의 앞으로 10년 부를 끌어당기는 100가지 블루오션는

다음 10년간 블루오션이 될 수 있는 시장을 100개 선정하고

시장의 개요와 공략 포인트를 박스로 넣어 정리를 했습니다.

시장 개요는 앞면에, 공략 포인트는 뒷면에 배치했지요.

종이책은 박스글을 본문 위, 아래에 배치해도 본문의 흐름을 해치지 않습니다.

박스글 위치가 고정되어 있기 때문에 본문은 본문 대로, 설명은 설명 대로

자연스럽게 읽을 수 있지요.

이렇게 전면으로 내용이 들어갈 때는 배치를 조절해서 본문이 다음쪽에 나오도록 할 수 있습니다.

하지만 전자책은 화면 크기가 변하기 때문에 이런 고정 편집을 하기 어렵습니다.

그래서 시장 개요와 공략 포인트 같은 박스 글을 종이책 본문 기준으로 넣지 않고 앞으로 뺐습니다.

종이책 편집을 그대로 옮긴다면 시장 개요는 2번째 단락 뒤에 와야 하는데

시장 개요와 2번째 단락은 연관성이 깊지 않습니다.

그래서 아예 시장개요, 공략포인트를 제일 앞쪽에 배치를 했습니다.

시장 개요, 공략 포인트를 먼저 보고, 두 박스글의 의미를 본문을 통해 이해할 수 있도록 배치한 것이지요.

종이책에서 전면으로 나온 부분은 

전자책 화면 크기가 바뀌기 때문에 전면으로 처리를 할 수 없습니다.

장을 나누면 가능하겠지만, 그런 편집은 또 다른 문제를 만들지요.

그래서 시장규모, 시장개요, 공략 포인트를 나란히 놓고, 이어서 본문이 나오도록 처리를 했습니다.

화면 크기가 어떻게 바뀌든, 독서의 흐름은 동일하게 유지를 했지요.

이렇게 길게 빼놓고 보니 제목과 시장개요 상자 크기를 이미지 크기에 맞게 조절해도 좋을 것 같네요.

화면 크기가 좁을 때는 이미지가 화면 폭에 맞게 보이고,

아래처럼 화면 폭이 아주 넓어지면 이미지는 더 이상 늘어나지 않습니다.

시장개요나 공략포인트도 그렇게 편집을 할 수 있습니다.

전자책 스타일의 최종 결정은

이 책을 만든 편집자의 몫입니다.

저는 제 의견을 검수용으로 제안을 하고,

편집가가 전자책을 검수하면서 스타일을 언제든 바꿀 수 있습니다.

제가 제안한 스타일을 편집자가 검수하며 받아주셨고, 이 스타일이 최종이 됐습니다.

이 책의 까다로운 부분은 목차와 제목입니다.

종아책(PDF)에서는 이렇게 보입니다.

구조가 단순해 보이지만 이 스타일을 구현하려면 생각보다 많은 노력이 필요합니다.

스타일 자체가 복잡한건 아닌데, 장 제목과 절 제목을 나누고, 선을 긋고, 장 제목이 줄바꿈 되었을 때를 생각해야 하지요. 그래서 본문 스타일 잡는 것 만큼 목차 스타일 잡는데 시간이 들었습니다.

전자책에서는 이렇게 보입니다.

장 제목은 이렇게 되어 있습니다.

이런 스타일에서 가장 까다로운 부분은 상하 정렬이지요.

그리고 전자책에서 글자 크기가 바뀌고 뷰어 폭이 바뀔 때 깨지지 않아야합니다.

종이책 스타일을 전자책에 옮기면 이렇습니다.

글자 크기가 커져 줄바꿈이 생겨도 모양이 유지돼야 합니다.

이 스타일을 grid를 이용해 만들었는데

리디북스 PC 뷰어에서 grid가 제대로 안보이네요.

구버전에서는 문제가 없는데 새 버전에서 margin이 엉망이 됩니다.

이것 외에도 뷰어가 강제로 margin을 조정하며 생기는 다양한 문제가 있습니다.

그래서 어쩔 수 없이 table로 수정을 했습니다.

table로 넣으면 제목이 생성에 문제가 되는데...

제 나름의 방법으로 해결을 했지요.

단순해 보이지만 구석 구석 까다로운 부분이 많아 시간이 많이 걸렸어요.

하지만 내용도 재미있고, 다양한 스타일을 건드려 볼 수 있어서

재미있게 제작한 책, 

동양북스의 앞으로 10년 부를 끌어당기는 100가지 블루오션

이었습니다.

제목 : 나에게 어울리는 삶을 살기로 했다

출판사 : 여름오후

제작기간 : 2일

2도 인쇄용 PDF를 받아 이미지 색을 다시 설정하느라 이미지 편집 시간이 걸렸습니다. 본문에도 재미있는 스타일이 있어요.

목차는 단순해 보이지만 느낌을 그대로 살리려면 조금 까다로와요. 장 번호 모양을 그대로 살리면서 장 제목과 절 제목 배치를 해야되서 약간 트릭(?)을 썼습니다. 하늘색은 2도 인쇄용이라 실제 종이책 색상은 보라색이에요.

전자책에서는 이렇게 보입니다.

종이책에 2페이지로 편집된건 전자책에서 1페이지로 느낌을 살려야 합니다.

역시 색은 보라색이에요.

전자책에서는 이렇게 보입니다. 

2페이지로 된 테두리를 1페이지로 처리했어요. 테두리는 단순합니다. border로 만들면 되요.

본문은 약간 손이 가는 부분이 있었지만 스타일 자체는 다른 책과 큰 차이가 없습니다. 첫단락 들여쓰기 없고, 인용구, 목록 등 많이 쓰이는 스타일입니다.

그런데 절 제목 아래에 이런 점이 붙어있어요.

총 9장, 각 장마다 5개의 절이 있어 총 45개 절입니다.

제목 아래에 45번 똑같은 코드를 반복해서 넣어야 할 때 사용할 수 있는 스타일을 설명드린 적이 있어요.

의사클래스(Pseudo-class)를 활용하면 코드를 넣지 않아도 제목 아래에 자동으로 점이 들어갑니다.

의사 클래스는 여기를 참고하세요 

h3:after 클래스를 사용해 스타일을 잡으면 HTML 태그는 이렇게 됩니다.

아래 코드를 보면 <h3>내 삶을...</h3> 밑에 점을 넣는 코드가 보이지 않아요.

하지만 책보기나 미리보기로 보면 이렇게 점이 들어갑니다. 

점을 넣지 않아도 되고, 점 대신 다른 문장이나 기호로 바꿀 일이 생겨도 CSS에서 코드 한줄만 수정하면 모든 제목에 적용되기 때문에 편집 시간을 절약할 수 있어요.

전자책으로는 이렇게 보입니다.

복잡한 스타일은 아니지만 재미있는 속성을 사용한 책이에요.

여름오후 출판사의 첫번째 책이니 전자책으로도 많이 봐주세요 ^^