[제작 샘플링] 자존감 수업

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

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

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

출간 후부터 베스트 상위 목록에 올라 있는 '자존감 수업'을 첫번째 책으로 골라봤습니다. 이 책의 장 제목 부분의 편집이 쉽지 않아 보이더라구요. 교보문고 미리보기로 종이책 편집을 보니 이렇습니다. 좌우에 커다란 대괄호가 있고, 가운데 제목 번호, 이미지, 제목이 들어가 있습니다.

전자책은 어떻게 만들었나 궁금해 리디북스 미리보기를 열어봤습니다. 리디북스 미리보기는 스타일이 100% 반영되지 않는 점을 고려해야합니다. 구매한 전자책은 이것과 다르게 보일 수 있어요. 샘플링 한 책들을 모두 사볼 수는 없으니 양해해 주세요 ^^;

미리보기로 보면 좌우 대괄호가 빠졌습니다. 이렇게 심플하게 가져가는 것도 좋은 방법이에요. 종이책과 똑같이 만들 필요는 없으니까요.

종이책에 있는 대괄호를 넣어보고 싶었습니다. 그런데 이걸 넣으려고 하니 스타일이 복잡해지네요. 미리보기를 통해 확인한 방법이 최선일 수도 있겠다는 생각이 들었습니다 ^^

그래도 시작을 했으니 끝을 봐야겠지요?

이 스타일의 포인트는 좌우 대괄호입니다.

좌우 끝에 대괄호를 넣고 제목을 가운데 정렬 시켜야 하는데 이 부분이 까다롭습니다.

2가지 방식이 떠오르는데 하나는 테이블을 쓰는거예요. 

[

제목

]

이런 형식이지요. 간단하게 적용할 수 있고, 글자 크기를 변경하면 테이블의 높이(height)도 자동으로 조절되기 때문에 제목 글자 크기를 변경할 수도 있습니다. 이 방법은 어렵지 않으니 상세 설명은 생략합니다.

다른 방법은 div를 쓰는거예요.

div를 쓰려면 flex라는 속성이 필요합니다. flex는 소개한 적이 없어서 이 속성으로 만들어 봤습니다. flex는 div 태그로 만든 글상자를 가로로, 혹은 세로로 붙일 수 있게 해줍니다. 

flex 속성 설명 : http://www.w3schools.com/cssref/css3_pr_flex.asp

자세히 알고싶은 분은 위 사이트 참고하세요.

div 태그를 쓰면 문제가 하나 생깁니다. div 태그의 높이에요. 

글자 크기에 따라 높이가 자동으로 조절되기 하는데 문제가 있습니다. 유통사 뷰어의 특성 때문인데, 기술적인 설명은 생략하고(몰라서 생략하는거 아니에요 ㅎㅎ), 간단히 정리하자면 뷰어마다 세로 높이의 기준이 다르기 때문입니다.

뷰어에서 div 상자 하나 만들고 height : 100%; 속성을 적용해 보세요. 편집자가 기대하는 것은 한 페이지에서 위/아래로 꽉 찬 글상자일거예요. 그런데 뷰어마다 다릅니다. 어떤 뷰어는 글자 한줄 크기일거고, 어떤 뷰어는 몇페이지에 걸쳐 나올 수도 있습니다. 

이런 이유로 높이를 일정 비율로 조절되게 하는게 어렵습니다. 특정 뷰어에만 적용하는건 가능한데 모든 뷰어에 적용하려면 아주 까다로와요.

전 이 문제를 간단히 해결해 버렸습니다.

제목 크기를 고정시켰어요.

이렇게 해서 아래 스타일이 나왔습니다.

.flex_title {

display: flex;

display: -webkit-flex;

text-llign : center;

height : 180px;

}

.flex_left {

 /*없어도 됨. 임시로 만든 클래스*/

}

.flex_right {

 /*없어도 됨. 임시로 만든 클래스*/

}

.flex_center {

width : 100%;

}

.bracket_img {

height : 180px;

}

h3 {

font-family : "기본글꼴";

text-align : center;

font-size : 30px;

line-height : 1.4em;

}

h3:before {

content : url("../Images/door.png");

display : block;

}

.title_no {

text-align : center;

font-size : 20px;

font-weight : bold;

}

<div class="flex_title">

<div class="flex_left">

<img class="bracket_img" alt="bracket_open" src="../Images/bracket_open.png"/>

</div>

<div class="flex_center">

<p class="title_no">2</p>

<h3>자존감에 대한<br/>오해와 편견</h3>

</div>

<div class="flex_right">

<img class="bracket_img" alt="bracket_closed" src="../Images/bracket_closed.png"/>

</div>

</div>

뷰어에서는 이렇게 보입니다.

교보문고 뷰어

리디북스 뷰어

(화면 캡쳐가 막혀있어서 제목을 아래로 내렸습니다)

알라딘 뷰어

(알라딘과 예스24 뷰어는 이미지 처리에 문제가 있어요. 언젠가는 고치겠지요.)

캘리버(PC)

대괄호는 화면 크기에 상관 없이 좌우 끝에 들어갑니다.

아래 이미지 2개는 Sigil 미리보기로 화면 가로 폭을 조절했을 때 어떻게 표현되는지를 보여줍니다.

스마트폰과 태블릿, 가로보기/세로보기에 상관 없이 자연스럽게 제목이 표현되도록 했습니다. 

제목을 표현하는데 코드가 복잡해 진다는 문제가 있습니다.

그리고 대괄호가 아주 중요한 의미가 담겨있지도 않습니다.

독자들도 대괄호가 있고 없고를 중요하게 생각할 것 같지도 않고요.

이정도라면 저도 판매하고 있는 전자책처럼 괄호를 포기하고 깔끔하게 코드를 정리했을 것 같아요.

그래도 flex 라는 스타일은 기억해 두세요. 아주 유용한 스타일이거든요.