내맘대로의 EPUB 제작 가이드

안녕하세요~

오늘은 전자책으로 해결할 수 없는 문제를 짚어보려고합니다.

메일로 어떤 분이 문의를 주셨어요.

왼쪽 페이지 아래에 이미지가 들어가야 하는데 왼쪽엔 공백이 생기고 이미지가 오른쪽으로 넘어가는 문제였습니다. 

조금 다급하셨던 것 같은데 해결 방법이 없어 이미지를 줄이거나, 왼쪽/오른쪽 어울림 처리로 편집을 수정하시라는 답변을 드렸습니다.

오늘은 왜 이런 형태는 해결 방법이 없는지 설명드리려고 합니다.

해결 방법이 아주 없는건 아니에요. @media 룰을 이용해 화면 크기에 따라 다르게 대응하거나 Javascript 를 이용해 해결할 수 있습니다. 하지만 @media룰도, Javascript도 모두 EPUB3에서 사용할 수 있습니다. EPUB2에서는 사용할 수 없어요. 

결론은 편집을 바꾸는 방법 외에 EPUB2로는 해결할 수 없습니다.

이미지는 텍스트에 따라 위치가 바뀝니다. 종이책도 마찬가지예요. 모든 편집자들이 이렇게 텍스트와 텍스트 사이에 이미지가 배치되기를 원합니다.

그런데 텍스트가 많아 이미지가 들어갈 수 있는 영역이 이렇게 작다면 어떡해야 할까요?

종이책에서는 텍스트를 옮겨 해결할 수 있습니다. 텍스트를 오른쪽 페이지로 옮기고 이미자가 들어갈 위치를 만들 수 있지요.

종이책을 편집하던 분들은 전자책에서도 이렇게 해달라고 요구를 합니다. 저도 이런 요구를 많이 받았어요.

그런데 EPUB은 '가변적'입니다.

종이책은 편집이 끝나 종이에 인쇄를 하면 우주가 멸망해도 편집이 바뀌지 않습니다. 신이 장난을 친다면 모를까 절대 편집이 바뀔 일이 없지요.

종이책 편집자의 요구를 반영해 텍스트를 페이지 오른쪽에 옮겨봅니다.

그런데 독자가 글자 크기를 키운다면?

똑같은 문제가 다시 생깁니다.

독자가 글자 크기를 줄이면 문제가 있던 부분이 해결이 될 수 있습니다.

독자는 전자책을 볼 때 글자 크기를 몇으로 놓고 볼까요?

100명의 독자가 전자책을 본다면 100명 모두 다른 형태로 전자책을 봅니다. 똑같은 전자책을 보는 독자는 단 한명도 없습니다.

글자 크기, 줄간격, 화면 여백, 글꼴 배경색 등 독자가 원하는 형태로 바꿔 보기 때문에 특정 뷰어에서 특정 글자크기로 볼 때 편집이 이상해도 99%의 독자는 아무 이상 없이 볼 수 있고, 특정 뷰어, 특정 글자 크기에서 아무 문제가 없어도 99%의 독자는 편집이 엉망인 책을 볼 수 있습니다.

오늘 문의를 받은 이미지는 위에 설명한 상황보다 더 안좋았습니다. 이미지가 화면 한 페이지를 거의 차지할 정도로 컸거든요.

이런 상황이면 거의 모든 뷰어에서 이렇게 보일거예요. 뷰어 위쪽에 1~2줄만 텍스트가 들어가도 이미지는 다음 페이지로 넘어갈 수 밖에 없습니다.

이럴 때 저는 제작을 의뢰한 분께 설명을 드립니다.

이미지가 얼마나 중요하냐, 이미지의 편집을 바꿔도 되냐?

이미지의 위치를 바꿔도 문제가 없느냐?

편집자를 설득하기 어려운 경우도 있지만, 결과물을 보여주고 글자 크기를 조절해 가며 어떤 문제가 생기는지를 설명하면 대부분은 이해를 해줍니다. 

본문 중간에 들어가는 이미지는 이렇게 왼쪽/오른쪽 어울림 처리를 하거나, 이미지 크기를 줄여서 해결합니다. 이미지 크기를 줄여도 본문 아래에 공백이 나오는 문제는 생깁니다. 하지만 텍스트가 화면의 1/2 이상 들어가기 때문에 위에 1~2줄 텍스트가 보이고 나머지는 텅 빈 공백으로 남는 것 보다는 보기 좋지요.

이렇게 편집한 책이 있습니다. 얼마 전에 제작 과정 소개해 드린 책이에요.

여름오후 출판사에서 나온 '나에게 어울리는 삶을 살기로 했다'는 책의 본문 중간에 한페이지 짜리 삽화가 들어갑니다. 

하지만 위와 같은 문제가 생길 수 있어 본문 제일 끝에 삽화를 넣었습니다.

삽화가 본문의 특정 내용과 연결이 되지만, 본문 전체 맥락과도 연결되어 있어 본문 끝부분어 넣오도 어색하지 않았습니다. 

두 페이지로 보면 이렇고, 스마트폰으로 본다면 '갖다 놓으면 더 좋고요.'를 보고 다음 페이지에 삽화가 나오겠지요.

만약 이 삽화가 본문 중간에 나온다면 고민을 해야합니다. 이 이미지는 1/2 크기로 줄일 수도, 오른쪽/왼쪽 어울림 처리도 할 수 없거든요.

이런 상황이면 이미지 부분을 자르고 텍스트는 캡션으로 넣었을 것 같아요. 삽화 위에 텍스트가 얹힌 부분을 잘라내면 이미지 높이(height)가 1/2로 줄어듧니다. 그럼 왼쪽 빈 공간에 이미지가 들어가겠지요. 텍스트는 캡션 스타일을 잘 만들어 이미지 아래에 넣으면 어떨까요?

아니면 왼쪽 공백을 무시하고 한 페이지로 들어가는 것도 하나의 해결 방법입니다.

EPUB2에서는 이런 문제들이 종종 생깁니다. EPUB은 HTML로 구조를 만드는데 HTML은 페이지가 아닌 스크롤을 고려해 만든 언어예요. 그래서 스크롤 화면에서는 문제가 없지만 페이지 화면에서는 생기는 문제가 있습니다.

이런 문제를 해결하는 방법은 '그에 맞는 편집을 찾는다'인 것 같아요.

그래도, HTML과 CSS로 저 문제를 해결할 방법을 고민해 봐야겠네요 ^^

성공하면 공유하겠습니다~

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

출판사 : 여름오후

제작기간 : 2일

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

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

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

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

역시 색은 보라색이에요.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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