단순하지만 재미있는 편집 - 요리하는 도시 농부

어떤 책은 전자책을 만들면서 재미 없고 지루하고 짜증이 납니다. '친절한 국어 문법'이 그런 책이었어요. 책 내용 때문은 절대 아닙니다. 제작하며 내용을 보는 경우는 거의 없거든요. 책 내용이 아무리 좋아도 편집이 정돈되지 않으면 짜증이 납니다. 

시간도 오래 걸려요. '정돈 됐다'는 상대적인 의미입니다. 종이책으로 보면 아주 잘 만든 책인데 전자책 관점에서 정돈되지 않을 수도 있어요. 그러니까 정돈 됐다는 의미가 종이책을 엉망으로 만들었다는 얘기는 아닙니다. 물론... 인디자인 파일이 엉망일 수는 있겠지요.

예를 들면, 대부분의 사전은 잘 정돈된 편집입니다. 편집이 아무리 복잡해도 정해진 패턴이 있어요. 잡지는 대부분 '정돈되지 않은' 편입니다. 이미지와 텍스트가 불규칙하게 놓입니다. 전자책을 만들 때 편집이 불규칙하면 편집 시간이 오래 걸리고, 새로운 스타일을 계속 추가해야 합니다. 스타일이 많으면 독자들이 책을 볼 때 편집이 깨질 가능성이 높습니다. 그리고 뷰어에서 로딩이 오래 걸립니다. 오류가 발생할 가능성도 높아지고요. 뷰어마다 다르게 보일 수도 있고.... 등등의 문제들 때문에 정돈되지 않은 종이책은 전자책으로 만들 때 재미가 없습니다.

이 책, 요리하는 도시 농부는 아주 깔끔하게 정돈되어 있는 책입니다. 그래서 편집도 쉬웠고, 스타일 잡는 재미도 있었어요. 특히 지금까지 소개하지 않았던 재미있는 스타일이 포함돼 있습니다. 

대표적인 스타일 4가지를 뽑아서 정리해 볼게요. 다른 책에도 많이 쓰이는, 활용도 높은 스타일 2개, 이미지로 처리를 하지만 CSS로 표현 가능한 스타일 2개입니다.

먼저 종이책에 표현된 스타일을 볼까요?

1. 주요 편집 스타일

1.1 서문 제목

설명을 몇번 했는데 실전에서 활용한 예를 보여드리기 위해 선택했습니다.

위, 아래에 2중 실선이 있는, 제목을 표현할 때 사용하는 스타일입니다. 2중 실선 뿐 아니라, 실선, 점선, 긴 점선 등 다양한 선을 활용할 수 있어요. 이미지를 넣을 수도 있습니다.

1.2 상하 위치 차이 나는 텍스트, 그라데이션 텍스트

아래 이미지는 2개의 스타일이 있습니다. '스스로 자라는 상추'라는 제목을 보세요. 상추가 아래로 내려가 있습니다. 보자 마자 '이거 간단한건데'라고 생각하실 분도 계실거예요. 아주 간단한 스타일입니다.

중간에 '쑥쑥 잘 크는 채소를 꼽으라면...'을 보면 왼쪽에서 오른쪽으로 갈 수록 글자 색이 달라집니다. 그라디언트(gradient), 혹은 그라데이션 효과라고 하지요. Tip[http://epubguide.net/199]으로 설명을 했는데, 실전에서 어떻게 활용하는지 보여드릴게요.

1.3 이미지 좌우 정렬 & 크기 자동 조절

이것 역시 간단한 속성입니다. 이미지를 왼쪽, 오른쪽에 보이도록 하는 스타일이에요. 이미지를 왼쪽, 오른쪽에 넣기는 아주 쉽지요? 여기에 화면 크기에 따라 이미지 크기가 조절되도록 했습니다. 간단한 속성인데 생각 외로 이미지를 화면에 맞게 확대/축소해 주는 책이 많지 않네요. 그래서 넣어봤습니다.

1.4 액자 느낌의 제목 테두리

이 스타일은 고민을 조금 했습니다. 재료와 설명 부분을 어떻게 처리할까? 제목은 이미지를 사용할까? 스마트폰 이용율이 높기 때문에 폰에 맞게 다시 구성을 했습니다. 재료를 윗쪽에 놓고 아래에 설명을 넣었어요. 

제목은 역시 텍스트로 처리를 했습니다. 뒷쪽 그림자까지 그대로 표현을 했어요. 물론 조금 차이는 나지만 느낌은 최대한 살렸습니다.

2. 전자책 편집 스타일

2.1 서문 제목

h2 {

font-family : "기본글꼴";

font-size : 1em;

border-top : double 4px #000000;

border-bottom : double 4px #000000;

display : table;

margin : 1em 0 5em 0;

padding : 1em 0.5em;

}

<h2>서<br/>문</h2>

팁으로 몇번 설명을 했던 스타일입니다. 책에 직접 적용하면서 어떻게 활용이 되는지 보실 수 있을거예요.

간단한 스타일이지만 스타일 자체는 조금 복잡합니다. 텍스트 상자를 만들어 보신 분들은 스타일이 복잡한 이유를 아실거예요. border 속성만 주면 화면 폭을 가득 채운 테두리가 그려집니다. 

border 속성만 주면 이렇게...

이걸 글자 폭에 딱 맞춰야합니다. width를 쓰면 안되요. 글자 수가 정해져 있다면 width로 맞출 수 있어도, 제목이 항상 같은 글자 수로 들어가지는 않잖아요. 글자 수에 따라 폭이 자동으로 조절되야 합니다. 그래서 display : table 속성을 줬습니다. 여기서는 margin-left, margin-right를 0으로 줬는데 스타일에 따라 auto로 줘야할 수도 있습니다. 

속성을 적용하면 뷰어에서 이렇게 보입니다.

2.2.1 절 제목

h4 {

font-family : "기본글꼴";

font-size : 1.4em;

font-weight : bold;

text-align : center;

margin-top : 3em;

margin-bottom : 3em;

}

h4 > sup {

vertical-align : 60%;

font-size : 1em;

}

<h4 class="h4_spring">^자연에 물들다</h4>

이렇게 글자 위치를 상하 다르게 표현하는 방법은 여러가지가 있을거예요. 저는 sup를 써서 앞쪽 글자의 높이를 높여줬습니다. sup는 글자 크기가 본문 기본 글씨체보다 작기 때문에 font-size 속성을 줘서 글자 크기를 맞췄습니다. vertical-align은 퍼센트(%) 값을 이용해 높이를 조절할 수 있어요. sup가 갖고 있는 기본 속성도 기본 줄보다 약간 높게 올라가지만 vertical-align을 사용해 종이책에서 표현한 정도로 높이를 맞췄습니다. 

h4 > sup를 쓴건 sup를 다른 곳에도 활용하기 위해서예요. sup는 본문 인용 등에도 사용할 수 있어서 h4 태그 안에서만 vertical-align : 60; font-size : 1em; 속성이 적용되도록 했습니다. h4 태그 바깥에서는 이 속성이 적용되지 않습니다. 

2.2.2 텍스트 그라데이션

.txt_center, .txt_green, .txt_pink, .txt_pink_2, .txt_green_2, .txt_green_3,.txt_brown_3, .txt_brown_4, .txt_blue_4 {

text-align : center;

text-indent : 0;

}

/*spring*/

.txt_green {

font-size : 1.2em;

background: -webkit-linear-gradient(left, #7FD08B, #A1BE90);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color : #A1BE90;

}

.txt_pink {

font-size : 1.2em;

background: -webkit-linear-gradient(left, #A1BE90, #EE6C92);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color : #EE6C92;

margin-bottom : 2em;

}

<p class="txt_green">이 모든 시작이</p>

<p class="txt_pink">정말 우연이었을까.</p>

이 속성이 재미있어요. 저도 이 책을 만들면서 알게 됐습니다.

background: -webkit-linear-gradient(left, #7FD08B, #A1BE90)

이건 기본 속성으로 글상자에 그라데이션을 줄 때 사용합니다. 특별한 속성은 아니에요. 

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

이 두 속성이 중요합니다. background 속성은 글상자, 즉 텍스트의 배경에 그라데이션을 주는데 이 두 속성이 적용되면서 배경이 아닌 글자에 그라데이션이 적용됩니다. 

이 속성은 웹킷에서만 사용할 수 있습니다. 익스플로러나 오페라, 파이어폭스 같은 브라우저에서는 속성이 표현되지 않습니다. 웹킷을 사용하는 브라우저는 크롬과 사파리가 있습니다. 

네. 안드로이드폰의 기본 브라우저 엔진, 아이폰의 기본 브라우저 엔진이 웹킷이에요. 그리고 이 두 폰에 들어가는 국내 유통사 뷰어는 웹킷 엔진을 사용합니다. 그러니 두 뷰어에서 표현이 되는 것이지요. 

color : #A1BE90;

이건 보험입니다. 혹시라도 텍스트 그라데이션 속성이 적용되지 않을 때는 이 색이 글자색이 됩니다.

속성이 적용되면 이렇게 보여요. 그라데이션은 색상 차이가 크지 않아서 자세히 보셔야되요^^

2.3 액자 느낌의 제목 테두리

h5 {

font-family : "기본글꼴";

font-size : 0.7em;

text-align : center;

line-height : 3em;

}

h5:after {

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

display : block;

margin-top : 2em;

}

.recipe_title_box {

font-size : 1.4em;

font-weight : bold;

border : 1px solid #000000;

background-color : #ffffff;

padding : 0.5em 1em;

display : box;

box-shadow: 7px 7px 5px #888888;

}

<h5>recipe 01<br/><span class="recipe_title_box">매크로바이오틱 샌드위치</span></h5>

이 스타일은 고민을 많이 했어요. 

유통되고 있는 책들은 대부분 이미지로 처리를 했습니다. 이미지로 처리하면 간단하긴 해요. 그런데 예쁘지는 않아요. 글자 크기도 조절할 수 없고, 스마트폰에서는 잘 보여도 태블릿에서는 이미지가 확대되 깨질 수 있거든요. 글자 크기가 본문과 어울리지 않을 수도 있고... 이미지로 넣었을 때 단점이 정말 많습니다.

제목 테두리를 넣는 방법은 다양합니다. 종이책과 똑같이 그림자를 점으로 처리하려면 배경만 이미지로 넣을 수도 있어요. 

[제작이 까다로운 책. 친절한 국어 문법 http://epubguide.net/197] 이 글에 2.4.1, 2.4.2를 참고하시면 되요. 여기서는 배경이미지를 상하로 넣었지만, 동일한 방식으로 좌우에 넣을 수도 있습니다.

그런데 이렇게 넣으면 코드가 너무 복잡해져요. 제목이기 때문에 h5 태그 안에 제목을 모두 넣어야 했습니다. 그래야 제목 자동 생성이 되거든요.

그래서 span을 이용해 테두리 상자를 만들고 그림자 효과를 줬습니다. 

background-color : #ffffff;

그림자 효과를 넣을 때는 글상자의 배경색을 넣어줘야되요. 배경색이 흰색으로 보여도 border-color를 주지 않으면 투명한 색이 적용됩니다. 배경이 투명해지면 그림자와 테두리가 겹쳐보이거든요.

display : box;

2.1에서 글자에 맞게 크기가 조절되도록 하기 위한 display : table;과 비슷한 목적으로 부여한 속성입니다. display:box;와 table;은 약간 차이가 나요. 2.1에서는 왜 table을 쓰고 여기서는 box를 썼는지는 직접 확인해 보세요 ^^

box-shadow: 7px 7px 5px #888888;

이건 그림자 효과를 주는 속성입니다. 글상자 뒤에 그림자가 보이도록 해줍니다. 종이책 처럼 점으로 된 그림자는 아닌데, 편집을 위해 이 부분을 포기하고 아래처럼 바꿨어요.

이 책에서는 하나를 더 바꿨습니다. 종이책은 재료를 왼쪽에, 설명을 오른쪽에 넣었어요. 종이책이라면 괜찮습니다. 태블릿도 문제 없을거예요. 그런데 스마트폰에서는 어떻게 보일까요? 폭이 좁은 스마트폰에서는 재료와 설명을 좌우에 배치하면 엄청난 줄바꿈이 생길거예요. 그래서 재료를 위로, 설명을 아래로 내렸습니다. 

스타일을 적용하면 이렇게 보입니다.

1.3 이미지 좌우 정렬 & 크기 자동 조절

.img_70_left {

margin : 1.5em 0;

text-aling : left;

text-indent : 0;

}

.img_70_right > img, .img_70_left > img {

width : 60%;

}

.img_70_right {

margin : 1.5em 0;

text-align : right;

text-indent : 0;

}

<p class="img_70_right"><img alt="img007" src="../Images/img007.jpg"/></p>

<p class="img_70_left"><img alt="img008" src="../Images/img008.jpg"/></p>

이미지 배치는 정말 '별거 없습니다.'

그냥 좌우 정렬 해주고, 적당히 여백 별려준 것 뿐입니다. 하지만 이미지 크기는 60%로 맞췄어요. 태블릿에서는 이미지가 크게 보이고 스마트폰에서는 작게 보입니다. 그런데 두 기기에서 모두 본문 가로 폭의 60%로 일정하게 보입니다. 

이미지 크기를 고정시킬 수도 있지만 화면 크기에 따라 자연스럽게 크기가 조절되도록 하면 다양한 기기에서 이용하기 편해집니다. 이미지는 가로 사이즈가 아주 커요. 이미지 크기가 작다면 최대 크기를 설정해 줬을거예요. 해상도 낮은 이미지가 너무 확대되면 깨지거든요.

이 이미지는 가로 폭이 상당히 큽니다. 가로 1000픽셀정도 되요. 그래서 풀HD 모니터에서 최대 화면으로 봐도 이미지가 깨지지 않습니다. 만약 이미지 해상도가 낮다면 max-width 속성으로 이미지의 최대 크기보다 화면이 더 커지면 확대되지 않도록 했을거예요.

스마트폰 크기에서, 그리고 태블릿 크기에서 이미지가 어떻게 보이는지 넣었습니다. 종이책과는 느낌이 조금 달라지지만 스마트폰이나 태블릿 등 화면 크기에 관계 없이 전자책을 볼 수 있는 편집이에요.