제작이 까다로운 책. 친절한 국어 문법 ①

시간은 오래 걸리고, 결과는 만족스럽지 않은 경우가 있습니다. 아무리 고민을 해도 '아! 이거야.'하는 스타일이 떠오르지 않고, 자잘한 스타일을 여러개 만들어야하는 책이 있어요. 편집할 내용의 많고 적음의 문제는 아닙니다. 편집할 내용이 많아도 패턴만 있으면 생각보다 시간이 오래 걸리지 않습니다.

편집 패턴이 불규칙하고 1~2번 쓰이는 스타일을 많이 만들어야 할 수록 전자첵 제작이 어려워져요.

이 책, 친절한 국어 문법이 딱 이런 책입니다.

EPUB 파일을 만들어 유통사에 등록한 후에 마음에 들지 않아 다시 편집을 했어요. 그런데 여전히 마음에 들지 않네요.

그래도 전자책 제작을 하며 쓸 수 있는 다양한 기술이 들어갔습니다. 전자책 제작 공부를 하는 분들에게는 도움이 될만한 내용이 많을거예요.

내용이 길어서 몇번에 나눠 올립니다.

1. 주요 편집 스타일

1.1 장, 절 번호

장 번호를 보면 이미지 배경 위에 텍스트가 올라와 있습니다. 이럴때는 이미지로 처리하는 경우가 많지요. 하지만 여러 장이나 절로 구분돼 있는 책은 이미지를 삽입하는 것도 일입니다. 

이 책에서는 장번호를 이미지 하나로 처리할 수 있는 스타일을 사용했습니다.

1.2 첫 글자

여기도 장 번호가 있습니다. 이 부분도 이미지로 처리를 했습니다. 그리고 장의 첫 글자가 큰 글씨에 다른 색으로 스타일이 지정돼 있습니다. 첫 글자를 강조하는 책이 많지요? 

1.3 이미지 가운데 정렬

이미지 가운데 정렬은 쉽지요? 일반 이미지면 가운데 정렬로 해서 width : 100%를 적용하면 됩니다. 그런데 텍스트가 들어간 이미지는 어떨까요? 

아래 영역은 글상자를 만들어 텍스트로 처리를 할 수 있습니다. 그런데 다양한 기기에서 보면 제대로 정렬이 되지 않을 수가 있어요. 글상자가 2줄이나 3줄로 내려온다던가, 글상자 안의 텍스트가 줄바꿈이 되는 문제가 생길 수 있습니다. 그래서 이미지로 넣었어요. 

이 이미지를 width : 100%;로 하면 스마트폰에서는 잘 보이지만 아이패드에서는 엄청나게 커집니다. 이럴 때 어떻게 처리를 해야할까요?

1.4 이미지 테두리 글상자

회색 테두리와 배경으로 된 글상자입니다. border로 만들면 쉽지요. 그런데 위, 아랫쪽을 보세요. 이미지로 처리되어 있습니다. 

모든 글상자 크기가 일정하다면 배경 이미지로 처리할 수 있습니다. 하지만 현실에서는 상황에 따라 크기가 달라지는 글상자가 더 많습니다. 윗쪽, 아랫쪽은 크기가 변하지 않으면서 가운데 부분만 늘어나는 글상자로 만들어야 합니다. 

2. 전자책 편집 스타일

2.1 장, 절번호

장과 절 번호 스타일을 묶은건, 두 스타일에 사용한 속성이 유사하기 때문입니다. 장 번호는 포스트잇을 배경으로 1단계, 2단계, 3단계 처럼 글자가 들어가 있습니다. 절 역시 접힌 종이 모양의 이미지가 배경으로 들어가 있고, Chapter 1, Chapter 2...로 번호가 들어갑니다.

먼저 장 번호부터 보겠습니다.

2.1.1 장 번호

[CSS]

.part_no_bg {

background-image : url("../Images/part_no_bg.png");

background-repeat: no-repeat;

background-size: 80%;

background-position: center;

width : 300px;

height : 102px;

margin : auto;

display : box;

}

.part_no {

font-family: "강조글꼴";

font-weight : bold;

font-size : 20px;

color : #00ADEE;

width: 100%;

height : 100%;

text-indent : 0;

text-align : center;

display: box;

box-orient: horizontal;

box-pack: center;

box-align: center;

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

-webkit-box-align: center;

}

[HTML]

<div class="part_no_bg">

<p class="part_no">• 1 단계 •</p>

</div>

이런 스타일은 이미지로 넣어도 됩니다. 이미지가 훨씬 간단할 거예요. 장 제목 전체를 이미지로 넣을 수도 있습니다. 그런데 장번호가 많아지면 이미지로 처리하기 힘듧니다. 만약 1단계 ~ 100단계까지 있다고 생각해 보세요. 장 번호 이미지나 장 제목 페이지만 100개를 만들어야 해요.

CSS로 처리를 하면 장 번호가 몇번 나오든 이미지 하나로 처리할 수 있다는 장점이 있습니다. 그리고 HTML 코드도 깔끔하게 정리할 수 있어요. 

part_no_bg는 글자 뒤에 보이는 이미지를 배경으로 처리한 속성입니다.

.part_no_bg {

background-image : url("../Images/part_no_bg.png");

background-repeat: no-repeat;

background-size: 80%;

background-position: center;

width : 300px;

height : 102px;

margin : auto;

display : box;

}

300*102 픽셀짜리 가상의 글상자를 화면 가운데 만들어 놓고 그 안에 part_no_bg.png 파일을 배경으로 넣었어요. 글상자 크기는 배경이미지나 들어가야 하는 텍스트 크기에 따라 조절하면 됩니다. 

여기서 중요한건, 글상자 크기와 글자 크기를 픽셀(px)로 설정했다는 거예요.

전자책 만들 때 고정 단위는 가급적 피해야합니다. 제가 쓴 다른 글에서도 px나 cm 같은 고정 단위는 사용하지 말라고 보셨을거예요. 그런데 여기서는 px를 사용했습니다.

px를 절대로 사용하면 안되는게 아니에요. 크기가 고정되어 있어야 하면 px를 사용해도 됩니다.

화면 크기에 따라 비율을 맞출 수도 있습니다. width를 30%나 50% 처럼 화면 비율에 따라 달라지게 하면 됩니다. 하지만 그럴 경우 가로나 세로 보기에 따라 장 제목만 화면에 가득 찰 수도 있습니다.

part_no의 font-size 역시 20px로 고정을 시켰어요. 만약 글자 크기가 커지면 어떻게 될까요? 배경 이미지를 벗어나거나, 배경이미지에 비해 글자가 너무 작아질거예요. 그래서 글자 크기도 고정을 시켰습니다. 뷰어에서 글자 크기를 변경해도 장 번호는 크기가 변하지 않아요.

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

2.1.2 절 번호

[CSS]

.ch_no_bg {

background-image : url("../Images/co_no_bg.png");

background-repeat: no-repeat;

background-size: 100%;

width : 115px;

height : 110px;

margin : auto;

display : box;

}

.ch_no {

font-family: "강조글꼴";

font-weight : bold;

font-size : 15px;

width: 100%;

height : 100%;

text-indent : 0;

text-align : center;

display: box;

box-orient: horizontal;

box-pack: center;

box-align: center;

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

-webkit-box-align: center;

}

[HTML]

<div class="ch_no_bg">

<p class="ch_no">1</p>

</div>

장 번호와 절 번호는 스타일이 똑같아요. 이미지 크기가 달라 width와 height만 조금 다릅니다. 이 스타일을 복사해 이미지 크기에 맞게 조절을 하면 다른 책에도 똑같이 적용할 수 있어요.

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

2.2 첫 글자

[CSS]

strong {

color : #00ADEE;

font-size : 1.5em;

margin-left : 15%;

}

[HTML]

<p><strong>국어가</strong> 어떤 특성을 ...</p>

첫 글자에는 특별한 스타일이 들어가지 않았습니다. 여기서 팁으로 알려드릴건, span 태그를 쓰지 않고 strong 태그를 쓴 것과, margin-left를 사용한 부분입니다. 이런 스타일을 표현할 때 아래처럼 코드를 짜는 분들이 많이 있더라구요.

[CSS]

.first_letter_indent {

text-indent : 3em;

}

.first_letter {

color : #00ADEE;

font-size : 1.5em;

}

[HTML]

<p class="first_letter_indent"><span class="first_letter">국어가</span> 어떤 특성을...</p>

CSS가 익숙하지 않다면 first_letter에 text-indent : 3em;을 넣으면 되지 않나 생각하는 분들도 있을거예요. 이런 생각을 하신 분들께는 박수를 ^^//

이런 생각을 하는게 당연합니다. 생각하지 않은 분이라면 CSS가 익숙하거나, CSS에 소질이 없거나 둘 중 하나예요.

first_letter 속성에 text-indent : 3em;을 넣으면 코드가 깔끔해 질 수 있습니다. 하지만 아쉽게도 부모 태그 안에 들어간 자식태그는 text-indent 속성이 적용되지 않아요. 그래서 span 태그에 text-indent 속성을 지정할 수 없어 p 태그에 지정을 합니다.

margin-left는 자식 태그여도 여백이 적용됩니다. 그래서 text-indent 대신 margin-left를 쓴거예요. 속성은 조금 차이가 있지만 원하는 결과를 얻어낼 수 있습니다. 

적용된 모습은 2.1.2의 이미지를 참고하세요

2.3 이미지 가운데 정렬

[CSS]

.txt_center {

text-indent : 0;

text-align : center;

}

.img_center {

max-width : 100%;

margin-top : 2em;

margin-bottom : 2em;

}

[HTML]

<p class="txt_center"><img class="img_center" alt="img002" src="../Images/img002.png"/></p>

이미지 가운데 정렬은 정말 쉽지요. 그런데 이렇게 쉬운 부분에서 실수를 자주 합니다.

먼저, 가운데 정렬을 할 때 text-indent : 0; 속성을 주는게 좋아요. 이걸 안하는 분들이 의외로 많습니다. 이 글을 보는 분들 중에서도 왜 들여쓰기를 0으로 줘야 하지? 하고 의아해 하는 분들이 있을거예요.

아래 두 이미지를 보세요. 앞쪽은 들여쓰기가 되어 있고, 뒷쪽은 들여쓰기를 0으로 했습니다. 들여쓰기를 0으로 하지 않으면 이미지에도 들여쓰기가 적용되요. 화면의 가운데 들어가야 하는 이미지가 오른쪽으로 약간 치우쳐 보이게 됩니다. 아래 예는 이미지가 커서 그런데, 이미지가 작으면 균형이 틀어져 보여요. 그래서 이미지 가운데 정렬을 할 때는 의도한게 아니라면 들여쓰기를 0으로 주는게 좋습니다.

    

또 하나. width=100; 대신 max-width : 100;을 줬습니다. 사진이라면 width 100;을 해도 괜찮아요. 하지만 이 책에 있는 이미지는 텍스트를 대신해 사용했습니다. 그래서 일정 크기 이상 커지면 보기 좋지 않아요. 

이 이미지는 width : 100;을 한거예요. 태블릿 같이 가로로 넓은 화면으로 본다면 이미지가 너무 커집니다.

이건 max-width : 100;을 적용했을 때예요. 일정 범위 까지는 화면 크기에 맞게 조절이 되는데 화면이 너무 커지면 이미지 원본 크기보다 더 이상 커지지 않습니다.

max-width 를 쓸 때는 이미지 원본 크기가 중요해요. 이미지가 아무리 커져도 원본 크기보다 커지지 않는데 원본 크기가 너무 크거나 너무 작으면 보기 좋지 않을거예요.

화면 크기에 따라 본문 글자 크기가 달라져요. 스마트폰에서는 글자가 작고, 아이패드에서는 글자가 커집니다. 스마트폰하고 아이패드를 비교하면 3배~4배정도 글자가 클거예요. 이런걸 고려해서 이미지 크기를 적당히 잘라주면 본문 글자 크기와 비슷한 수준으로 이미지 속 글자가 보일거예요.

2.4 이미지 테두리 글상자

2.4.1 위, 아랫쪽 테두리만 있는 글상자

[CSS]

* { 

margin : 0;

padding : 0;

}

.box_top {

width : 100%;

line-height : 0;

}

[HTML]

<div class="box_top">

<img class="box_top" src="../Images/box_quote_top.png" alt="box_quote_top.png"/>

</div>

<div class="txt_out_3em">

<p><em>추상성</em>&nbsp;:실제 사물에...</p>

</div>

<div class="box_top">

<img class="box_top" src="../Images/box_quote_bottom.png" alt="box_quote_bottom.png"/>

</div>

글상자는 다양하게 활용을 합니다. 자기계발, 여행, 실용 등의 책에는 대부분 글상자가 들어갑니다. 간단한 글상자는 border로 만들 수 있습니다. 테두리를 넣고 배경 색을 지정하고 border-radius로 모서리를 둥글게 처리할 수 있습니다. box-shadow로 그림자 효과를 줄 수도 있고요.

조금 더 복잡한 디자인이 들어가면 이미지로 만들 수 있습니다. 이미지 패턴이 단순하다면 border-image를 쓸 수 있는데 복잡한 이미지라면 border로 한계가 있습니다.

이럴 때 div나 table를 활용할 수 있습니다.

글상자는 대부분 비슷한 패턴을 가집니다. 윗쪽에 글상자의 내용이 무엇인지 알려주는 부분, 아랫쪽, 그리고 본문 영역이지요.

그래서 div 태그를 3개 사용합니다. 

스타일은 의외로 간단합니다. div 안에 이미지를 넣는데 width를 100으로, 그리고 div와 div 사이에 간격을 없애기 위해 line-height를 0으로 줍니다. 저는 기본 스타일로 margin, padding을 0으로 주기 때문에 속성은 넣지 않았는데, 기본 여백이 설정되어 있다면 margin, padding을 0으로 주는게 좋습니다.

윗쪽과 아랫쪽에만 테두리가 있어 본문 영역은 텍스트를 위한 스타일만 들어갔습니다.

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

2.4.2 본문에 배경이 들어가는 글상자

[CSS]

.box_top {

width : 100%;

line-height : 0;

}

.box_ssok_bg {

background-image : url("../Images/box_ssok_middle.png");

background-repeat: repeat-y;

background-size: 100%;

padding : 0.5em 0.5em 0.5em 1em;

}

[HTML]

<div class="box_top">

<img class="box_top" src="../Images/box_ssok_top.png" alt="box_quote_ssok.png"/>

</div>

<div class="box_ssok_bg">

    <div class="txt_out_3em">

    <p class="txt_gothic_cyan">▶언어의 특성</p>

    <p><em>추상성</em> : 실제 사물에서 공통 개념을...</p>

</div>

</div>

<div class="box_top">

<img class="box_top" src="../Images/box_ssok_bottom.png" alt="box_ssok_bottom.png"/>

</div>

위, 아래 테두리는 2.4.1에서 사용한 것과 동일합니다. 같은 스타일을 쓰기 때문에 새로 만들 필요가 없습니다.

본문에 배경을 넣는 스타일은 조금 복잡합니다.

본문은 세로 길이가 일정하지 않습니다. 본문 내용에 따라 세로 길이가 바뀌어야 하지요. 그럼 배경 이미지 길이가 얼마나 되야할까요?

이게 실제 사용된 본문 이미지입니다. 이미지가 이렇게 클 필요도 없습니다. 세로 1px면 충분한데, 그러면 편집할 때 불편해 조금 크게 만들었습니다. 

배경 이미지 크기를 가로 폭에 맞추기 위해 background-size : 100%; 속성을 줬습니다. 

그리고 5px 밖에 안되는 세로를 본문 길이에 상관 없이 넣기 위해 background-repeat : repeat-y; 라는 속성을 부여했습니다. 

repeat-y 속성은 배경 이미지를 세로축으로 계속 반복하라는 속성입니다. 5px 짜리 이미지가 세로로 무한 반복되는 것이지요. 그래서 본문 길이만큼 배경이 들어갑니다. 

이렇게 넣어 주면 위쪽 테두리와 본문이 딱 붙고, 본문 이미지가 반복되어 아래처럼 표현이 됩니다.

같은 속성으로 배경 이미지만 바꾸면 아래처럼 보입니다. 스타일은 똑같고, 이미지만 바꿨습니다. 

이 책은 스타일이 너무 많아 1,2회로 나눠 올립니다. 1회차부터 스크롤 압박이 심하네요 ㅜ.ㅜ 그런 만큼, 재미있는 스타일이 많이 사용되었으니 2회차도 기대해 주세요~~