같은 패턴의 시리즈물 - 심야책방 세계문학

오늘은 같은 패턴을 가진 시리즈물 편집입니다.

심야책방 세계문학 시리즈로 책의 내용에 따라 달라지는 점은 있지만 기본 형식은 동일합니다.

이런 시리즈물은 양식 하나만 잘 만들어 놓으면 1~2시간에 전자책 한권씩 만들 수 있습니다.

심야책방 세계문학은 편집이 간결합니다. 소설 중심이어서 복잡한 스타일은 많지 않습니다. 대신 시리즈의 정체성을 살려주는 포인트를 강조했습니다. 

1. 책은 표지, 속표지, 목차, 본문 순으로 편집해 3페이지만 넘기면 본문을 볼 수 있게 한다.

2. 속표지, 목차 스타일은 종이책 편집을 살리고 모두 통일시킨다.

크게 보면 이 두개를 기준으로 작업을 했습니다.

    

(기본적인 틀은 동일하고 책에 따라 조금씩 달라지는 시리즈물 스타일)

1. 주요 편집 스타일

이번 글은 금방 끝나겠네요 ^^;

시리즈물은 기본 양식 하나로 편집하기 때문에 작업 효율이 좋습니다. 전자책 만들 때 스타일 잡는 시간이 전체 편집 시간의 1/3 이상인데 스타일이 정해져 있기 때문에 제작 시간을 확 줄일 수 있습니다.

심야책방 세계문학 시리즈는 3가지 스타일이 반복적으로 사용됩니다. 

1.1. 속표지

저는 전자책을 만들 때 속표지는 넣지 않습니다. 속표지는 겉표지와 똑같이 만드는데 종이책에서는 형식상 필요하지만 전자책에서는 본문까지 가는데 한 페이지 더 넘겨야 하는 불편 외에는 다른 기능이 없거든요.

하지만 심야책방 세계문학 시리즈는 속표지를 넣었습니다. 표지 -> 목차 -> 본문 순으로 가면 조금 허전한 느낌이 들더라구요. 그리고 겉표지에서는 강조할 수없는 작품의 제목을 도드라져 보이도록 하는 역할도 합니다.

1.2. 목차

목차 스타일은 간단합니다. 다만 종이책과는 조금 다르게 가져갔습니다. 종이책처럼 뷰어 50% 지점에서 목차를 정렬할 수 있지만 전자책은 페이지도 없고, 다수의 책이 1장, 2장 처럼 간결하더라구요. 그래서 전자책에 맞게 오늘쪽 정렬을 시켰습니다. 

1.3. 본문

본문도 특별한 스타일은 없네요. 제목을 가운데정렬 한 것 외에는 신경쓸만한 스타일이 없습니다. 책에 따라 조금씩 다른 부분이 있긴 한데 그건 그때 그때 스타일을 만들어 적용했습니다.

2. 전자책 편집 스타일

2.1 속표지

[CSS]

h1

{

text-indent:0 !important;

text-align:center;

font-size:3em;

font-family: "Times New Roman", Times, serif;

display : table;

border-bottom : solid 1px #000000;

margin : 20% auto 10px auto;

padding-bottom : 10px;

}

h2

{

text-indent : 0 !important;

text-align:center;

font-size:1.6em;

font-family:"강조글꼴";

margin : 0 0 15% 0;

}

[HTML]

<h1 class="sigil_not_in_toc">Pride and Prejudice</h1>

<h2 class="sigil_not_in_toc">오만과 편견</h2>

심야책방 세계문학이 통일된 느낌을 갖게 만들기 위해 속표지에 신경을 썼습니다. 종이책은 표지에서 통일감을 부여할 수 있지만, 전자책은 표지를 볼 일이 썸네일 외에는 없습니다. 속표지 역시 마찬가지겠지만, 표지를 넘기자 마자 나오는 책 제목 영역을 강조하고 싶었습니다.

종이책 느낌은 살리면서 전자책에 맞게 편집을 하기 위해 몇가지 고민을 해야했습니다. 

첫째. 영문 제목 아랫쪽에 그어진 밑줄은 어디에 속하는가?

이 밑줄이 영문제목에 그어진 것이라면 영문제목의 줄이 바뀌더라도 단어별로 줄이 그어져야 합니다. 그렇지 않고 한글 제목과 영문제목을 구분해 주는 선이라면 줄바꿈과 상관 없이 한글제목과 구분되는 선 하나만 그어져야 합니다.

저는 이 선을 한글 제목과 구분하는 선이라고 봤습니다. 그래서 영문제목이 줄바꿈을 해도 한글제목 사이에 하나만 나타나도록 했습니다.

둘째. 제목 글자 크기

제목의 길이는 작품마다 모두 다릅니다. L'Etranger 처럼 짧은 제목도 있고 Throught the Looking-Glass 처럼 긴 제목도 있습니다. 제목 글자 크기를 화면 폭에 맞출 것인지, 아니면 일정 크기로 고정시킬 것인지를 고민했습니다. 책을 펼쳤을 때 제목이 눈에 확 들어오려면 화면 폭에 맞추는 것 보다는 줄바꿈이 된다 하더라도 일정 정도의 크기를 유지하는게 좋다고 생각했습니다.

뷰어는 기본적으로 영어 단어 단위로 줄바꿈을 합니다. 영어 단어를 폭에 맞춰 잘라내는 방법도 있지만 영문은 단어 단위로 움직이는게 좋기 때문에 뷰어 설정을 그대로 따랐습니다.

여기서 한가지 알아두면 유용한 속성이 있습니다.

border-bottom으로 선을 그리고, 텍스트를 가운데 정렬 하면 화면 왼쪽 끝에서 오른쪽 끝으로 선이 그어집니다. 아래 왼쪽 이미지가 boder-bottom으로 선을 그었을 때 결과입니다. 이럴 때 display:table 속성과 margin-left, margin-right에 auto 값을 넣어 주면 오른쪽처럼 단어나 문장에 딱 맞는 크기로 선이 그려집니다. 

display : table;

border-bottom : solid 1px #000000;

margin : 20% auto 10px auto;

(display : table; 속성을 추가하면 글자 크기에 맞게 선을 그을 수 있습니다)

스타일을 적용한 결과입니다. 화면 크기에 따라 제목 줄바꿈이 되고, 밑줄은 영문과 한글 제목을 구분해 주는 역할을 합니다. 뷰어에서 보면 영문 제목이 도드라져 보입니다. 심야책방 세계문학을 전자책으로 펼치면 제일 먼저 만나는 속표지입니다.

2.2 목차

[CSS]

.nav_title {

text-align : center;

text-indent:0 !important;

font-family:"강조글꼴";

display : table;

border-bottom : solid 1px #000000;

border-top : solid 1px #000000;

margin : 10% 5px 10% auto;

padding : 10px 0 10px 0;

}

.nav_list {

text-align : right;

line-height : 1.8em;

font-family:"기본글꼴";

list-style-type : none;

margin : 10% 5px 10px auto;

}

[HTML]

<p class="nav_title">차례</p>

<ol class="nav_list">

<li><a href="../Text/Section_0001.xhtml">제1부</a></li>...</ol>

종이책 목차는 페이지의 1/2 지점에 책 제목이 있고, 오른쪽으로 페이지 번호가 나옵니다. 

하지만 전자책은 페이지 번호가 없습니다. 그래서 1/2 지점에 목차를 정렬시킬 수는 있지만 그렇게 하면 목차가 아주 이상해집니다. 그래서 허전해 보여도 목차를 오른쪽 정렬 시켰습니다.

여기서도 2.1에서 설명했던 display:table 속성을 사용했습니다.

[차례] 위, 아래에 border-top과 boder-bottom으로 줄을 긋고 dispaly : table, margin-left : auto 속성으로 글자 크기에 맞췄습니다. 

목차 스타일은 이렇게 적용이 됩니다.

목차가 짧아 허전한 감이 있지만, 통일감을 주기 위해 없애지 않고 남겨뒀습니다.

2.3. 본문

본문 제목 스타일

h3

{

text-indent : 0 !important;

font-size:1.2em;

text-align : center;

font-family:"기본글꼴";

margin : 10% 0 15% 0;

}

.no {

font-size:0.8em;

margin : 0 0 1em 0;

display : block;

}

<h3><span class="no">1장</span>&nbsp;토끼 굴속으로</h3>

기타 본문 편집 스타일

sub /* 아랫첨자 */

{

font-size:0.8em;

vertical-align : baseline;

}

blockquote /* 문단 단위 인용문에 사용 */

{

text-indent : 1em;

padding : 1em 0 1em 1.5em;

}

blockquote > p {

font-size : 0.9em;

text-indent : 0;

}

strong /* 특정 단어나 문장 강조가 필요한 경우 사용.*/

{

font-family:"강조글꼴";

}

본문 역시 특별히 강조할 만한 내용은 없습니다. 

목차가 장 번호로만 이루어진 책이 있고, 장 번호와 제목이 함께 있는 책이 있는데 이럴 때 장 번호를 display:block을 써서 제목과 줄바꿈을 해줬습니다. 

본문에는 반복적으로 들어가는 스타일이 있습니다. 본문 내 인용구는 blockquote 태그를, 강조해야 하는 단어는 strong 태그를, 괄호 설명 항목은 sub 태그를 사용해 편집을 합니다. 종이책에서는 조금씩 다르게 표현되었더라도 전자책은 통일감을 주기 위해 스타일을 일치시켰습니다. 희곡처럼 다른 책들과 확연히 구분될 때만 몇가지 스타일을 추가해 줬습니다.

이번에는 복잡한 스타일이 들어가지는 않았습니다.

하지만 스타일이 비슷할 때는 기본 탬플릿을 만들고 이를 바탕으로 여러 책을 편집하는 방식을 설명드렸습니다. 같은 출판사의 책이라면 본문 글꼴, 줄간격, 인용구, 괄호나 영문/한자 등 외국어 표기를 통일시키는 것도 좋습니다. 편집 시간을 절약할 수 있고 출판사 스타일에 통일감을 줍니다.

2.4 편집시 자주 사용하는 기본 스타일

아래 스타일은 어떤 책을 편집하든 사용할 수 있는 스타일입니다. 

상황에 따라 조금씩 수정해 사용하시면 됩니다.

* {

margin : 0;

padding : 0;

}

p /* 본문 기본 스타일 */

{

font-family:"기본글꼴";

text-indent:1em;

text-align:justify;

line-height:1.8em;

font-size:1em;

}

.txt_center /* 가운데 정렬 */

{

text-align : center;

}

.txt_right /* 오른쪽 정렬 */

{

text-align : right;

}

sub /*괄호나 영문 한자 등 외국어 표기*/

{

font-size:0.8em;

vertical-align : baseline;

}

이미지를 왼쪽, 혹은 오른쪽에 어울림 배치하는 스타일

img {

max-width : 100%;

}

.img_right_box {

text-align : right;

text-indent : 0;

width : 50%;

float : right;

}

.img_left_box {

text-align : left;

text-indent : 0;

width : 50%;

float : right;

}

<p class="img_left_box"><img src="../Images/img004.jpg" alt=""/></p>