[제작 샘플링]대통령의 글쓰기 장 제목

여기서 설명한 내용들이 전자책 제작에 도움이 될까?

라고 생각하는 분들도 계시겠지요? 그래서 샘플링을 통해 전자책 제작에 어떻게 적용되는지 보여드리겠습니다. 제가 직접 제작하는 책들은 종수가 한정되어 있어 다양한 편집을 보여드릴 수 없잖아요. 그래서 베스트셀러나 재미있는 편집을 해볼만한 책을 샘플로 뽑아 스타일을 만들어 보려고 합니다.

'이런 편집은 스타일을 어떻게 만들까?' 고민하고 계신 책이 있으면 방명록이나 댓글로 남겨주세요. 저도 고민해 보고 제가 생각한 방법을 올리겠습니다 ^^

시국이 어수선해 지면서 다시 조명을 받게 된 '대통령의 글쓰기' 장제목 스타일을 만들어 봤습니다.

교보문고 종이책 미리보기로 보면 본문 글자 폭에 맞게 글상자를 그리고, 그 안에 제목을 넣었습니다. 리디북스 전자책 미리보기를 보니 이미지로 제목을 넣었습니다. 쉽고 깔끔하게 처리할 수 있는 방식입니다. 

* 교보문고 종이책 미리보기

* 리디북스 전자책 미리보기

* 리디북스 전자책 미리보기

판매중인 전자책은 이미지로 들어가긴 했지만 일정 폭을 넘어서면 더이상 확대되지 않도록 했습니다. max-width : 95%; 속성을 줘서 가로 폭이 이미지보다 작을 때는 폭에 맞추고, 이미지보다 폭이 넓어지면 이미지 크기의 95%에서 확대를 멈춥니다.일부 전자책을 보면 태블릿처럼 큰 화면에서 이미지가 화면 폭에 맞게 커져 보기 좋지 않은데, '대통령의 글쓰기'는 태블릿에서도, 스마트폰에서도 깔끔하게 보입니다.

저는 이 스타일을 이미지가 아닌 border 속성으로 만들어 봤습니다. 

전자책이 잘못되서 만드는게 아닙니다. 이미지로 처리한 것도 편집이 간단하고 깔끔하다는 장점이 있습니다. 편집자의 선택이지 하나는 옳고 다른건 틀리기 때문에 샘플을 만드는건 아닙니다.

border로 이 스타일을 만들면 아래와 같은 장점과 단점이 있습니다. 장점은 이미지로 넣었을 때 단점이 될 수 있고, 단점은 이미지 제목의 장점이 됩니다. 어떤게 더 좋고 나쁘다 라고 말할 수는 없습니다.

장점 

1. 대통령의 글쓰기는 40개 이상의 장 제목이 있습니다. 이미지로 만들면 40개의 이상의 장제목 이미지가 필요합니다. 전자책 용량이 그만큼 늘어날 수 있습니다. border로 테두리를 만들면 전자책 용량을 줄일 수 있고, 40여개의 장제목 이미지를 만드는 시간도 절약됩니다.

2. 이미지로 제목을 넣으면 목차를 자동으로 만들 수 없습니다. hidden 속성을 이용해 제목을 숨기면 자동 생성이 가능하지만, 이미지와 텍스트로 된 제목을 각각 넣어야 하는 불편이 있습니다. border를 이용하면 제목을 텍스트로 넣기 때문에 제목 편집이 쉽습니다.

3. 화면 크기와 상관 없이 본문 폭에 맞게 테두리를 그릴 수 있습니다. 제목 글자 크기는 본문과 맞춰져 있기 때문에 글상자 가로 폭이 아무리 넓어져도 이미지처럼 깨지지 않습니다. 종이책과 조금 더 비슷한 느낌을 낼 수 있습니다. 

단점

1. 장점 3번이 단점이 될 수 있습니다. 화면이 가로로 아주 넓어지면 보기 좋지 않을 수 있습니다. 이미지로 넣어 일정 크기에서 멈추는게 더 좋을 수도 있습니다.

2. 이미지로 넣을 때보다 코드가 복잡해집니다. 

3. CSS3를 지원하지 않을 경우 원하는 편집 결과를 얻을 수 없습니다.(알라딘, 예스24 전자책 뷰어)

▶ CSS와 HTML 코드

h3 {

font-size : 1.4em;

font-weight : bold;

line-height : 1.6em;

text-align : center;

border : solid 10px #AB9B41;

padding : 2em 0 1em 0;

position : relative;

}

.title_small {

font-size : 0.6em;

font-weight : normal;

display : block;

}

.title_no {

font-weight: normal;

font-size: 2em;

text-align : center;

text-decoration : underline;

display: table;

color: #AB9B41;

background-color : #ffffff;

width: 50%;

margin: 0 auto -50px auto;

z-index : 1;

position : relative;

}

<div class="title_no">

1

</div>

<h3>비서실로 내려온 '폭탄'<span class="title_small">-글쓰기가 두려운 이유"</span></h3>

스타일은 세부분으로 나눠져 있습니다. 

이 스타일에서 가장 까다로운 부분이 제목 번호예요. border로 테두리를 그리면 사각형이 되는데 윗쪽 가운데는 색이 들어가지 않습니다. 이 부분 처리가 조금 까다롭습니다. 

저는 .title_no 로 흰색 배경의 글상자를 하나 더 만들었습니다. 황색 테두리를 그리고, 그 위에 흰색 배경의 글상자를 올려놓은거예요. 그러다보니 z-index를 썼습니다.

z-index는 레이어(글상자)의 순서를 변경할 수 있는 속성입니다. 장 제목이 제일 앞에 놓이고, 그 뒤에 테두리가 그려진 h3가 놓여야 되서 z-index로 글상자의 순서를 변경했습니다. 

이렇게 스타일을 적용한 결과물입니다.

참고로, 이 스타일은 교보문고, 리디북스는 잘 표현이 됩니다. 하지만 알라딘과 예스24는 제대로 표현되지 않습니다. CSS3 문제는 아닌 것 같고, 고해상도와 저해상도 디스플레이에 맞게 픽셀 기준이 조정되지 않는 것 같네요. 저해상도에서는 제대로 보일 수 있습니다.

제일 아랫쪽에는 캘리버를 이용해 화면 폭이 넓을때와 좁을 때 캡처한 이미지를 추가했습니다. 글자 크기는 변함 없이 글상자 크기만 폭에 맞춰 조정됩니다. 제목 크기를 비교하기 위해 본문 2단락 정도 추가했습니다.(샘플에는 본문 내용 없이 제목만 있음)

교보문고 eBook 뷰어

알라딘, 예스24 뷰어

리디북스(리디북스는 화면 캡쳐가 막혀있어 캡쳐를 위해 윗쪽에 공백을 넣음)

캘리버(폭이 넓은 화면)

캘리버(폭이 좁은 화면)

Sample_대통령의 글쓰기.epub