내맘대로의 EPUB 제작 가이드

책 제목 : 분노유발 심리학

포인트 : 작은 부분에서 색다른 편집이 필요했던 책.

제목과 내용이 재미있는 책입니다. 분노유발자를 아홉가지 '또라이'로 분류해 대처하는 방법이 담긴 책이에요.

'또라이'라는 단어가 좀 과격하다 싶을 수 있는데, 책머리에 왜 '또라이'라는 단어를 선택했는지 설명이 나옵니다. 그리고 책을 보면 왜 '또라이'인지 알게 되고요.

어려운 스타일은 없었지만 처음 시도해 본 재미있는 편집이 몇가지 있습니다.

가장 고민을 많이 했던게 목차였네요 ㅡ.ㅡ;;

종이책 목차가 이렇게 되어 있습니다. 

[차례]라는 글자 아래로 청록색 선이 있고, 선의 반대쪽 끝에는 이미지가 있어요. [차례]의 아랫쪽, 이미지의 중간에 선이 오도록 하는게 포인트라 이 부분을 살려봤습니다. 

전자책에서는 이렇게 보입니다. 페이지가 없는 전자책이다 보니 종이책에서 2페이지로 구분된걸 한페이지에 몰아넣었습니다. 딱 한번 들어가는데 공을 들여야 하나 싶은 생각도 들었지만, 이 포인트를 살려야겠다는 생각이 들더라구요.

화면이 큰 PC나 태블릿에서 본 화면입니다. 본문, 제목 스타일은 어렵지 않게 작업할 수 있습니다.

스마트폰처럼 작은 화면에서 보면 이렇게 보입니다. 제목 상단 이미지를 본문 크기에 맞췄는데 큰 화면에서 보면 제목과 비교해 너무 커져서 화면 폭의 40%로 맞췄습니다. 

이 책의 재미있는 스타일이 나옵니다. 소제목 아래에 선이 있는데 청록색과 검정색이 겹쳐지는 점선느낌입니다. 한가지 색의 선이나 점선이라면 border를 썼을거예요. 그런데 이런 선은 이미지로 들어가야합니다. 

저는 이 이미지를 썼습니다. 이 이미지를 배경으로 넣었어요.

배경으로 이미지를 넣으면 문장 길이에 맞춰 줄이 조절됩니다. 

문장 길이에 딱 맞추기 위해 display속성을 추가했어요.

여기 쓰인 선은 위에 쓰인 선과 모양이 다릅니다. 

display 속성을 없애고, 좌우에 여백을 줘서 아랫쪽 회색 글상자보다 안쪽으로 들어가도록 했지요.

대화문에 사람 이름을 다른 색으로, 내어쓰기, 이런건 설명 안드려도 쉽게 할 수 있을거예요^^

이 책에서 독특했던 부분이 또 있습니다. 영문 병기 글자가 위쪽이나 아랫쪽이 아닌, 글자 가운데 정렬을 했더라구요. 그래서 영문 병기 표기가 글자의 중간에 배치되도록 상하 정렬을 맞췄습니다. 

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

어렵고 까다로운 스타일은 없었는데 배경이미지로 밑줄을 넣고, 영문 병기를 글자 가운데로 맞춘건 처음이라 소개해 봤습니다.

제작 기간 : 2일

포인트 : 편집자가 신경을 많이 쓴 장 제목을 최대한 살리자.

이 책은 시간이 오래 걸릴 것 같지 않았는데 생각보다 오래 걸렸습니다. 이미지가 많이 들어있기도 했고, 인디자인에서 편집한 이미지라 원본 이미지를 쓰지 못하고 PDF에서 편집된 최종 이미지를 추출하는데 시간이 좀 걸렸지요. 그런데 가장 시간이 많이 걸린건 제목입니다. 4개 파트로 구성되어 있고, 각 파트별로 10 ~ 14개의 챕터로 나눠진 책입니다. 챕터가 40개 조금 넘게 구분되어 있습니다.

전자책 샘플 이미지 세번째 그림에 육각형 글머리 기호가 있고, 제목은 1줄 혹은 2줄로 세로로 늘어서 있는 장 제목 스타일이 있습니다. PDF(종이책)에는 이렇게 편지돼 있습니다.

본문에는 다른 포인트가 없어 이 부분을 살리다 보니 손이 만히 가서 편집하는 시간이 오래 걸렸습니다. 2일 중 1일은 40개의 제목을 넣는데 보냈네요.

아래는 편집이 끝난 '일개미 자서전' 캡쳐 화면입니다.

전자책 샘플 이미지

* 스마트폰에서는 제목과 본문 줄간격이 너무 벌어지면 보기 좋지 않아 종이책 보다 줄간격을 조금 벌렸다. 스마트폰을 통해 전자책을 보는 사람이 70% 정도 되기 때문에 PC나 태블릿 보다 스마트폰에 디자인을 맞췄다.  

오랜만에 스타일 팁 올립니다.

어떤 분이 테이블 안쪽 여백과 테이블 가운데 정렬 방법을 물으셨어요.

테이블(table) 태그는 기본 속성(attribute)을 몇개 갖고 있습니다.

글자 영렬(align), 테두리 모양(border), 배경색(bgcolor), 폭(width)...

전자책 만들 때 이런 속성은 사용하지 마세요!!!!!

태그 기본 속성을 사용해도 별 문제는 없습니다. 그런데 W3C에서도, IDPF에서도 스타일 편집은 CSS로, 그것도 외부 CSS로 하도록 하는 추세입니다. 

만들어 놓은거라 써도 상관은 없는데 앞으로는 이런거 전부 없앨거야~

그래서 이런 속성들 대부분은 HTML5에서 지원을 하지 않습니다.

그럼 이런건 어떻게 해야할까요? 

아래 표를 보세요. 위쪽 표는 테두리 색과 border-collapse 만 적용했습니다. 확인이 편하게 하려고 적용한 속성이고 이 두 속성을 제외하면 아무 스타일도 적용하지 않았을 때 테이블이 이런 모습으로 보여요.

이런 테이블을 아래쪽 표처럼 안쪽 여백을 주고, 테이블 자체를 가운데 정렬하려면 어떻게 해야할까요?

안쪽 여백이니 padding,가운데 정렬이니 text-align : center;를 주면 되겠지요?

그런데 이게 안먹힙니다.

여기서 2가지 문제가 생겨요. padding을 어디에 줘야 하는지, 그리고 text-align으로 가운데 정렬이 되지 않을 때 어떻게 가운데 정렬을 하는지.

먼저 스타일 코드를 보세요.

1. padding은 셀(td)에 적용한다.

테이블에서 글자가 들어가는 곳은 tr 태그 안쪽입니다. table, td는 테이블의 구조를 만드는 태그고, td가 텍스트가 들어가는 셀을 만드는 태그예요. 그러니 텍스트가 들어가는 셀에 여백을 주고 싶다면 td 태그에 스타일을 적용해야겠지요.

2. 테이블을 가운데 정렬하기

테이블이나 div같은 상자를 가운데정렬 할때는 text-align 속성이 제대로 적용되지 않습니다.

적용할 방법이 없는건 아닌데 그럼 코드가 복잡해져요.

이럴 때 margin-left : auto; margin-right : auto;를 사용해 보세요.

div 박스일때는 display : table; 혹은 display : box; 속성도 같이 지정해야 합니다.

여기서는 display :table;이 없어도 되지만, 확실히 해주기 위해 추가했어요.

끝으로... 테이블을 오른쪽 정렬 하고싶다면?

이렇게 스타일을 바꿔보세요. 그럼 가운데 있던 테이블으 오른쪽으로 정렬됩니다.

* 이 표는 2017년 9월 27일자 기준입니다. 이후 업데이트 등을 통해 수정될 수도 있으니 세부 사항은 반드시 위 링크로 들어가 확인을 해주세요.

CSS 속성을 제대로 지정한 것 같은데 뷰어에서 이상하게 보인 경험 있으시지요?

다른 뷰어에서는 잘 보이는데 특정 뷰어에서만 이상하게 나와 고생한 적도 있을거예요.

유통사 뷰어별로 문제가 있는 스타일을 정리하고 있습니다.

뷰어에서 표현이 되지 않는건데 CSS 스타일 수정하느라 쓸데없는 시간낭비 하지 마시고,

특정 유통사 뷰어에서만 이상하게 나오는 스타일이 있으면 알려주세요.

테스트를 해보고 해결 방법을 찾거나, 뷰어의 표현성 문제인지 확인해 드릴게요.