여기서 설명한 내용들이 전자책 제작에 도움이 될까?
라고 생각하는 분들도 계시겠지요? 그래서 샘플링을 통해 전자책 제작에 어떻게 적용되는지 보여드리겠습니다. 제가 직접 제작하는 책들은 종수가 한정되어 있어 다양한 편집을 보여드릴 수 없잖아요. 그래서 베스트셀러나 재미있는 편집을 해볼만한 책을 샘플로 뽑아 스타일을 만들어 보려고 합니다.
'이런 편집은 스타일을 어떻게 만들까?' 고민하고 계신 책이 있으면 방명록이나 댓글로 남겨주세요. 저도 고민해 보고 제가 생각한 방법을 올리겠습니다 ^^
몸이 달다 - 강백수
교보문고
예스24
알라딘
* 교보문고 미리보기 캡쳐
어쩌다 보니 계속 비슷한 패턴의 스타일을 고르게 되네요. 이 책은 최근에 편집을 마쳐 소개를 해봅니다. 샘플 이미지에서 제목과 글자 위에 찍힌 점(점선 테두리 부분)을 어떻게 구현할까요?
아마 제목은 이미지로 넣으면 된다고 생각하실거예요.
이미지로 넣어도 괜찮은데, 이 책의 목차는 100개가 넘습니다. 제목이 100개가 넘는거고, 이미지를 한페이지씩 잘라가며 100개를 만들어야되요. 태블릿까지 고려해서 제목 이미지를 잘라보니 제목 하나당 20kb~30kb 정도 나오네요. 25kb로 놓고 100개면 용량은 크지 않습니다. 그래도 이미지 100개를 자르고, 목차 하나씩 맞춰가며 100개의 이미지를 삽입하는건 시간을 많을 잡아먹습니다.
이 스타일을 만들기 위해 2가지를 검토했습니다. div 태그를 사용한 방법. 만약 제목이 가운데 위치해야 한다면 div 태그를 쓰는게 좋습니다. 테이블을 사용하는 방법. 이 책은 제목이 왼쪽정렬 되어 있습니다. 그래서 테이블을 이용하면 div 태그보다 깔끔하게 표현할 수 있습니다.
이미지는 아래 3개를 사용합니다.
1. div 태그를 사용한 코드
<head>
<style>
.ch_title {
display : table;
margin-left : auto;
margin-right : auto;
background-image : url("../Images/title_M.jpg");
background-size : 100px 100px;
background-repeat : repeat-x;
}
.title_L, .title_R {
height : 100px;
vertical-align : -55px;
}
.title_R {
marign-left : 50px;
}
</style>
</head>
<body>
<div class="ch_title">
<img class="title_L" alt="title_L" src="../Images/title_L.jpg"/>귀신같은 나의 몸<img class="title_R" alt="title_R" src="../Images/title_R.jpg"/>
</div>
</body>
여기서 px로 잡아준건 이 책은 편집이 중요한 요소이기 때문입니다. 실제 출간은 100px가 아닌 60px로 맞췄어요. 스마트폰에서 책과 비슷하게 표현되는건 100px인데, 그러다보면 제목 부분이 너무 부각되서 본문이 안들어오더라구요. 그래서 제목 크기를 본문 크기보다 20%정도 크게 작업을 했습니다.
어째든 이렇게 해 주면 제목을 가운데 정렬할 수 있습니다.
뷰어에서는 이렇게 보입니다. 글꼴이나 다른 요소는 스타일에 적용하지 않았으니 제목 상자만 봐주세요.
<head>
<style>
/*본문 제목*/
.title {
height : 60px;
border-collapse: collapse;
font-family : "제목글꼴";
letter-spacing : 2px;
font-size : 20px;
margin-bottom : 2em;
}
.bg_M {
background-image : url("../Images/title_M.jpg");
background-size : 5px 100%;
background-repeat : repeat-x;
padding-bottom : 10px;
line-height : 1em;
}
.bg_L {
background-image : url("../Images/title_L.jpg");
background-size : 100% 100%;
background-repeat : no-repeat;
width : 14px;
}
.bg_R {
background-image : url("../Images/title_R.jpg");
background-size : 100% 100%;
background-repeat : no-repeat;
width : 25.5px;
}
</style>
</head>
<body>
<table class="title">
<tbody>
<tr class="title">
<td class="bg_L"></td>
<td class="bg_M">
귀신같은 나의 몸
</td>
<td class="bg_R"></td>
</tr>
</tbody>
</table>
</body>
이 코드는 테이블을 이용한거예요. 실제로 적용한 코드는 div가 아니라 이 테이블입니다. 모바일 화면에서 제목이 너무 커보이지 않게 높이를 조절했습니다. 높이는 60px로 고정되어 있어도 폭은 글자 수에 따라 늘었다 줄었다 합니다.
언제 테이블을 쓰고 언제 div를 쓰는지에 대한 규칙은 없습니다. 편집자의 판단에 따라 어떤 것을 써도 상관 없어요.
위 두 예는 디자인을 위해 제목 크기를 고정한 코드입니다. 본문 글자 크기를 조정해도 제목 크기는 변하지 않아요. 그럼 '난 본문 글자 크기가 변하면 제목도 바꾸고싶은데... 하는 분이 계시겠지요?
위 코드를 조금만 수정하면 가능합니다.
실제로 위 두 코드는 알라딘과 예스24에서는 이상하게 보일거예요. 알라딘과 예스24 뷰어는 폰에 따라 픽셀 계산을 실제 픽셀 크기로 합니다. 설명을 하자면 복잡한데, 최신 폰에서는 60px가 엄청 작게 보인다는거예요. 그래서 제목을 픽셀이 아닌 글자 크기에 맞게 보이도록 수정한 코드가 있습니다.
<head>
<style>
/*본문 제목*/
.title {
border-collapse: collapse;
font-family : "제목글꼴";
letter-spacing : 2px;
font-size : 1.2em;
margin-bottom : 2em;
}
.bg_pink {
background-color : #FFECEF;
}
.bg_M {
background-image : url("../Images/title_M.jpg");
background-size : 5px 100%;
background-repeat : repeat-x;
padding : 0.5em 0.5em 0.8em 0.5em;
line-height : 1em;
}
.bg_L {
background-image : url("../Images/title_L.jpg");
background-size : 100% 100%;
background-repeat : no-repeat;
width : 14.4px;
}
.bg_R {
background-image : url("../Images/title_R.jpg");
background-size : 100% 100%;
background-repeat : no-repeat;
width : 25.5px;
}
</style>
</head>
<body>
<table class="title">
<tbody>
<tr class="title">
<td class="bg_L"></td>
<td class="bg_M">
귀신같은 나의 몸
</td>
<td class="bg_R"></td>
</tr>
</tbody>
</table>
</body>
이렇게 수정을 하면 글자 크기에 맞게 제목 글상자 크기가 바뀝니다. 그런데 제목이 너무 커지면 본문과 어울리지 않더라구요. 글자 크기 변화에 따른 글상자 크기 변화 이미지예요.
코드가 길어서 그런지 스크롤 압박이 생기네요. 오늘은 여기서 마무리 할게요.
글자 위에 점을 찍는건 ruby 태그를 쓰는 간단한 작업인데 모르는 분들이 많더라구요.
이건 다음 글로 올리겠습니다 ^^
Sample_대통령의 글쓰기.epub
