[실전! 전자책 제작]에서는 전자책 제작의 실제 사례를 보여드립니다. 책 한권에 담겨있는 다양한 스타일을 소개하고, 이 스타일을 어떻게 만들었는지 알려드립니다. 스타일을 적용했을 때 각 유통사 뷰어에서 어떻게 보이는지 확인하실 수도 있습니다.
* 본 글에 사용된 책 및 스타일에 대한 내용은 출판사의 사용 허락을 받았습니다.
책제목 : 내 인생 10년 후
출판사 : 토네이도
제작 시간 : 5시간
이 책은 편집이 간단했습니다. 복잡한 스타일이 없고 본문 내 이미지도 없는 책입니다. 하지만 장, 절, 소단락이 여러개로 나뉘어 있어 반복적으로 제목 스타일을 지정해 줘야하는 책입니다. 또한 괄호 설명과 인명 등에 영문표기가 포함되어 있어 편집 시간이 오래 걸렸습니다.
편집은 간단하지만 다양한 기술이 적용된 책이기도 합니다. 배경이미지를 설정 div 태그 글상자, :before / :after 선택자, border로 선처리 등 편집이 복잡한 책에서 사용하는 스타일이 모두 담겨 있습니다.
Point
1. 100개 이상의 소단락이 있어 제목 스타일 지정이 번거로움
2. 괄호설명, 영문 표기 등은 일괄변경이 어려워 시간이 오래 걸림
3. 다양한 스타일 적용
1. 주요 편집 스타일
이 책에는 6개의 스타일이 필요합니다. 본문, 주석, 목차 등 다른 책에 공통으로 사용되는 기본 스타일은 제외한 것입니다.
추가로 수백개가 넘는 괄호 설명과 영문표기에 스타일을 적용하려면 시간이 많이 필요합니다.
1.1 프롤로그
'프롤로그'라는 굴림/고딕 글자 오른쪽에 세로 긴 줄이 있고, 본문보다 큰 글씨체로 프롤로그의 제목이 들어갑니다.
1.2 장 제목
장 제목은 2페이지로 구성돼 있습니다. 세로보기 이용자가 많은 전자책에 이 편집을 그대로 넣으면 보기 좋지 않을거예요. 그래서 전자책에 맞춘 스타일이 필요했습니다.
1.3 장 요약 글상자
회색 바탕에 흰색 본문 영역으로 된 글상자입니다. 글상자 안에 문단별로 스타일을 적용하면 되지만, 이런 글상자가 5번 반복되고, 글상자 안에 굵은 글씨와 설명으로 된 문단이 계속 반복됩니다. 글상자 안쪽 편집을 최소화 하는 스타일이 필요합니다.
1.4 중간 페이지??
장이 시작되면 명언이 들어가는 페이지가 있습니다. 따옴표 크기를 고정하면 간단합니다. 하지만 해상도가 높아지면 따옴표가 글자 크기보다 작아질 수 있습니다. 화면 크기에 맞게 따옴표 크기가 바뀌도록 스타일을 적용했습니다.
1.5 절 제목
위 아래로 선이 있습니다. 간단한 방법은, 제목 위, 아래로 이미지를 넣는 것입니다. 그런데 이런 절이 30번 이상 반복됩니다. 제목 편집 시간을 최소로 줄일 수 있는 스타일이 필요합니다.
1.6 소단락 제목
소단락은 100번 이상 반복됩니다. 이 경우 사람이 직접 위치를 확인하고 수정을 해야합니다. 제목 앞에 길게 그어진 줄이 본문 앞까지 이어지는 것도 처리해야합니다. 편집이 복잡하면 시간이 오래 걸리기 때문에 간단히 작업할 수 있는 스타일이 필요합니다.
아울러, 종이책 목차에는 소단락이 정리되어 있지 않습니다. 필요 없어서일 수도 있지만 종이책 목차 페이지의 한계 때문인 경우가 많습니다. 전자책에서는 소단락까지 목차를 표시하려고 합니다. 100개를 전부 수작업으로 추가하기는 힘들기 때문에 목차 작업을 한번에 할 수 있어야 합니다.
1.7 괄호 설명, 영문 표기
아래처럼 괄호로 단어의 뜻이나 설명을 추가한 책이 많습니다. 책 한권에 이런 설명이 수십에서 수백개가 나올 수 있어 본문을 보며 찾으려면 시간이 아주 오래 걸립니다.그리고 보지 못해 빼먹는 경우도 생깁니다.
괄호로 묶여있으면 찾기 쉽습니다. [찾기]기능으로 괄호[( ]만 찾아 확인하면 되니까요. 찾아바꾸기로 일괄 변경도 가능합니다. 그런데 이런 영문인 경우는?
영문이 모두 해당하는 것도 아닙니다. 이렇게 부가 설명이나 표기가 아닌, 본문에도 영문이 사용될 수 있습니다. 이를 구분해야 하기 때문에 편집 시간이 오래 걸리지요. 방법은 없습니다. 직접 눈으로 확인을 해야합니다. 하지만 조금 편한 방법은 있습니다.
2. 스타일 편집
[1. 주요 편집 스타일]에 설명한 스타일을 적용해 보도록 하겠습니다. 여기 소개한 스타일이 정석은 아닙니다. 전자책 편집에 정석이란 없습니다. 편집자별로 고유의 방식이 있고, 그 방법이 가장 좋다고 생각합니다.
이 글은 전자책 제작 공부를 하는 분들, 편집을 하는데 막힌 부분이 있어 해결책을 찾는 분들, 그리고 자신이 쓰는 방법이 최선이 아니라는 생각이 들어 보다 편한 방법을 찾는 분들이 참고하실 수 있도록 제가 사용하는 방법을 정리한 것입니다.
여기 적힌 스타일을 보다가 '내가 쓰는 방식이 더 편하고 효율적이네' 라는 생각이 드시면 언제든 댓글을 남겨주세요. 저도 다른 분들이 사용하는 방식을 보면 큰 공부가 됩니다^^
2.1 프롤로그
[CSS]
.prologue {
height: 4em;
text-indent: 0;
text-align : left;
display: -webkit-flex;
display: flex;
}
.prologue_small {
font-family: "고딕";
font-size: 0.7em;
padding : 0 0.5em 4em 0;
margin-right : 0.5em;
border-right : 1px solid #000000;
flex : 1;
}
[HTML]
<h3 class="prologue"><span class="prologue_small">프롤로그</span> 빛나는<br/>10년 후를 소망하며</h3>
<p>선택의 기로에서는 누구나 설렘과 두려움을 동시에 마주한다. 처음 이 책의 출간 제안을 받을 때 나 역시 그랬다....</p>
프롤로그의 포인트는 단어와 단어 사이에 있는 세로줄입니다. 줄에 맞춰 시작되는 본문(첫 단락에만 들여쓰기 3em 적용)도 있지만, 이건 소단락에서 설명드리겠습니다.
단어와 단어 사이에 긴 세로줄을 긋는 가장 쉬운 방법은 폭 1px 짜리 이미지입니다. 단어와 단어 사이에 이미지를 넣고 vertical-align : text-top 스타일을 지정하면 됩니다.
img.top { vertical-align : text-top; }
<h3>프롤로그 <img class="top" alt="h_line_50" src="../Images/h_line_50.png"/>빛나는 10년 후를 소망하며</h3>
프롤로그 스타일은 본문 전체에 2번 적용되고 본문에 세로줄 이미지를 사용하고 있으니 이렇게 해도 괜찮습니다. 그런데 문제가 하나 있어요. 아래처럼 제목 줄바꿈을 하면? 이건 직접 해보세요^^
저는 프롤로그 제목 영역을 세로 4줄 크기 글상자로 생각했습니다. 아래 빨간색 테두리처럼 상자를 만든거지요.
.prologue 클래스에 height : 4em; 스타일이 이를 위한 것입니다. 세로줄을 더 길게 혹은 짧게 하고 싶다면 이 부분을 수정하면 됩니다.
그리고 display : flex; 라는 스타일을 적용했습니다. 여기는 CSS를 설명하는 곳이 아니니 flex 속성에 대한 설명은 하지 않습니다. 이곳을 참고하세요 : http://www.w3schools.com/cssref/css3_pr_flex.asp
flex를 넣은 이유는 <br /> 태그로 제목을 2줄로 만들기 위해서입니다. flex를 빼보면 이해하실거예요^^
[프롤로그]라는 글자는 본문보다 작습니다. 그래서 클래스명도 단순하게 prologue_small이라고 붙이고, 여기에 세로줄을 추가했습니다.
border-right : 1px solid #000000;
여기서 잠깐! 그냥 prologue_small에 height : 4em;을 추가하면 되는거 아냐? 라는 생각이 들었다면 박수를 쳐드리고 싶네요. 이렇게 하면 prologue라는 스타일을 만들지 않아도 되니 훨씬 간단해 질 수 있거든요. CSS 속성만 보고도 머릿속에 스타일이 그려질 정도의 고수가 아니라면 이런 생각을 해야합니다. 저도 예전에 이렇게 접근을 한 적이 있어요.
그런데 span 태그의 특성이 있습니다. span 태그는 부모 속성의 영향을 받습니다. 그래서 자신이 속해있는 부모 속성을 벗어난 경우 속성이 적용되지 않아요.
.t_height { height : 4em; border : solid 1px red; margin : 4em; }
<p><span class="t_height">프롤로그</span> 빛나는 10년 후를 소망하며</p>
이 코드로 확인을 해보세요. height는 적용되지 않고, margin도 좌우 4em은 적용되지만 위아래는 적용되지 않습니다. margin 대신 padding을 쓰면 위아래 여백을 넣을 수 있어요. 하지만 이것도 문제가 있습니다. 어떤 문제인지는 직접 실습을... ^^;
.prologue_small에 있는 다른 속성은 세로줄과 글자 사이에 간격을 주고 글자 크기, 글꼴 등을 지정하는 속성입니다. flex : 1;은 prologue 선택자에 있던 display : flex; 속성과 한 세트입니다. 여기서는 없어도 되지만, 세트로 움직이기 때문에 넣어줬습니다.
스타일의 결과물입니다. 종이책과 비교해 보세요.(클릭하면 큰 이미지로 볼 수 있습니다)
왼쪽이 전자책, 오른쪽이 종이책
Tip : 전자책을 보지 않는 분들이 하는 실수!
PC에서 전자책 이미지를 보면 '좀 이상한데'라고 느껴질 수 있습니다. 당연합니다. 해상도도 다르고, 화면 크기도 다르니 이상할 수 밖에요. 전자책 이미지 결과물은 스마트폰에서 캡쳐했습니다. 그러니 스마트폰으로 봐야 전자책으로 어떻게 보이는지 알 수 있습니다.
2.2 장 제목
.ch_bg {
background-image : url("../Images/Chapter_bg.png");
background-repeat : no-repeat;
background-size: 100%;
}
h2 {
font-family: "기본글꼴";
text-align : right;
font-size : 1.6em;
}
.ch_no {
font-family: "고딕";
font-size : 0.6em;
border-bottom : 1px solid #000000;
}
[HTML]
<body class="ch_bg">
<p><br/></p>
<p><br/></p>
<h2><span class="ch_no">Chapter 5</span><br/><br/>당당히 내딛는<br/>10년 후</h2>
</body>
전자책 이용자는 세로로 책을 보는 경우가 많습니다. 그래서 종이책 2페이지에 걸쳐 담긴 이미지나 편집은 전자책으로 만들 때 편집 자체를 새로 하는게 좋아요. 책의 느낌은 살리면서 가로, 세로 모드에서 자연스럽게 보일 수 있도록 해야합니다.
이 책의 장 제목 페이지를 보세요.
두 페이지에 걸쳐 있습니다. 이렇게 똑같이 만들 수는 있어요. 그런데 스마트폰에서 세로로 보면 어떻게 될지 생각해보세요.
이 스타일을 종이책 느낌은 살리면서 가로, 세로에서 문제없이 보이도록 하려면 어떻게 해야하나 고민을 했습니다. 사실 스타일을 만드는건 어렵지 않아요. 스타일을 어떡게 만들지 결정하는게 더 어렵습니다.
전자책 만드는 시간이 5시간이라면, 스타일 고민하는 시간이 2~3시간 정도 되요. 스타일만 잡으면 나머지는 단순작업입니다. 종이책과 똑같이 만들 수도 있어요. PDF처럼 위쪽 페이지에는 꽃 이미지가, 아랫쪽 페이지에는 챕터 제목이 들어가도록 할 수 있습니다. 이렇게 만들기는 어렵지 않으니 고민할 필요도 없지요.
제가 선택한 방법은, 꽃 이미지를 그대로 배경에 쓰는거였습니다. 하지만 가로로 보는 독자도 생각을 해야하니 이미지로 넣을 수는 없었습니다.
세로로 볼 때
가로로 볼 때
종이책과 똑같지 않습니다. 그럴 수도 없고요. 전자책은 종이책이 아니기 때문에 똑같이 만들 필요도 절대 없습니다. 다만, 종이책 편집자가 담으려는 느낌을 표현해 줄 수 있으면 됩니다.
이미지를 그냥 넣으면 세로일 때는 화면 크기에 맞겠지만 가로로 돌아가면 이미지가 작아지거나 한쪽으로 늘어나버립니다. 뷰어에 따라서는 2페이지에 걸쳐 이미지가 나타날 수도 있습니다. 그래서 가로로 돌려도 자연스럽게 표현이 되도록 배경으로 처리를 했습니다.
.ch_bg {
background-image : url("../Images/Chapter_bg.png");
background-repeat : no-repeat;
background-size: 100%;
}
이미지 크기는 가로 화면 기준으로 100%로 보이도록 하고, 화면 크기에 상관 없이 이미지가 보이도록 no-repeat 속성을 부여했습니다.(속성 설명은 http://www.w3schools.com/css/css_background.asp 참고)
장 번호에 밑줄을 살리기 위해 border-bottom을 썼습니다. 그리고 <br/> 태그로 간격을 벌렸고요. 줄간격 속성이나 여백을 쓸 수도 있지만, 장 제목 페이지는 5개밖에 되지 않아 <br/>태그로 처리를 했습니다.
div 태그나 p 태그를 사용해 장 번호와 제목을 2단락으로 나눌 수도 있습니다. 하지만 제목은 가급적 제목태그로 묶는게 좋습니다. 나중에 목차 편집이 편해지거든요.
어려운 스타일은 없습니다. 하지만 다른 부분은 종이책 그대로 표현을 하면 되는데 장 제목은 그대로 표현을 할 수 없어 이런 방법을 생각해 내기 까지 시간이 걸렸네요.
2.3 장 요약 글상자
body.bg_grey {
background-color : #E7E7E8;
}
.bg_grey p {
font-family: "고딕";
font-size : 0.9em;
text-indent : 0;
margin-bottom : 1em;
text-align : justify;
}
div.bg_white {
background-color : #FFFFFF;
padding : 0.5em;
margin : 1em;
}
p.gothic_140 {
font-size : 1.2em;
margin-bottom : 0;
font-weight : bold;
}
<body class="bg_grey">
<div class="bg_white">
<p class="gothic_140">일자리가 사라지다</p>
<p>인간의 일자리가 위태롭다. 기계가 인간의 일터를 ‘점령군’처럼 접수한다. 2020년까지 5백만 개, 2030년까지 20억 개의 일자리가 사라진다. 고용 시대의 종언 징후는 곳곳에서 감지되고 금융은 ‘우버 모멘트’ 문턱을 서성댄다. ‘일자리 없는 문명의 도래’가 가시권으로 들어오고 있다. 바뀐 생태계에 당신을 어떻게 최적화할 것인가?</p>
회색 테두리에 흰색 바탕, 글자는 본문과 다른 고딕체입니다.
그리고 각 절의 제목이 강조되어 있는 스타일.
회색 테두리를 치는 방법은 다양합니다.
제가 종종 쓰는 방식 두가지를 보여드리면...
첫째. div 태그로 회색 배경, 안쪽에 흰색 바탕을 넣는 방식입니다. 바깥쪽 div 상자에 padding을 줘서 테두리처럼 보이게 합니다.
.bg_grey {
background-color : #E7E7E8;
padding : 1em;
}
.bg_white {
background-color : #FFFFFF;
}
<div class="bg_grey">
<div class="bg_white">
<p>인간의 일자리가 위태롭다. ...</p>
</div>
</div>
두번째 방법으로 간단한 테두리 글상자를 만들 때 사용합니다. border로 선을 긋고 필요한 만큼 두께를 주는 방식이에요. 코드가 간결합니다.
.bg_border {
border : solid 15px #E7E7E8;
}
<div class="bg_border">
<p>인간의 일자리가 위태롭다. ...</p>
</div>
이것 외에도 무수히 많은 방법이 있습니다.
그런데 이 책을 만들 때는 첫번째 방식을 조금 변형시켰습니다.
왜 그럴까요?
위 두 방식을 보시면 테두리 바깥으로 흰색 여백이 보입니다. 전자책 뷰어는 기본 여백이 있기 때문에 이보다 여백이 더 클거예요. 이 책에는 회색 테두리 바깥쪽에 여백을 두고 싶지 않았습니다.
그래서 해결 방법은?
<body class="bg_grey">
body 태그에 회색 배경색을 입혔습니다. 이 단락은 페이지 전체가 글상자로 되어 있기 때문에 본문을 고려하지 않아도 됩니다. 만약 본문 중간에 회색 테두리가 필요하다면 이런 방식은 피해야합니다.
그리고 많은 편집자들이 비슷하겠지만, 문단 기본 태그 p에는 항상 대표 스타일을 적용해 놓습니다.
p {
font-family: "기본글꼴";
text-align : justify;
text-indent : 1em;
line-height : 1.8em;
}
CSS를 구분해 만들지 않았으니 글상자의 본문도 이 스타일이 적용됩니다. 그래서 CSS의 가족관계를 이용해 bg_grey 스타일이 적용된 곳의 p 태그는 대표 스타일이 아닌 다른 스타일이 적용되도록 했습니다. 절 제목이요? 그건 그냥 클래스로 지정해 주는게 편해요 ^^
.bg_grey p {
font-family: "고딕";
font-size : 0.9em;
text-indent : 0;
margin-bottom : 1em;
text-align : justify;
}
책에는 여백이 없는데 전자책으로 보니 답답하더라구요. 그래서 전자책은 여백을 살짝 줬습니다.
몇번을 강조하지만, 전자책과 종이책은 다릅니다. 종이책 스타일을 무조건 지키기 보다는 전자책을 볼 때 독자들이 더 편하게 느낄 수 있는 스타일을 선택하세요.
아래 이미지로 전자책 최종 스타일과 종이책 스타일을 비교해 보세요.
2.4 중간 페이지
bg_grey_01 {
background-color : #E7E7E8;
}
blockquote {
margin : 1em 0 1em 0;
}
blockquote > p {
text-align : center;
font-family: "기본글꼴";
text-indent : 0;
}
.gothic_100_b {
font-family: "고딕";
font-wieght : bold;
}
.img_quote {
width : 20%;
max-width : 10%;
}
<body class="bg_grey_01">
<p><br/></p>
<p class="txt_center quote_block"><img class="img_quote" alt="quote_up" src="../Images/quote_up.png"/></p>
<blockquote>
<p>미래는 여러 가지 이름을 가지고 있다....</p>
</blockquote>
<p class="txt_center"><img class="img_quote" alt="quote_down" src="../Images/quote_down.png"/></p>
</body>
종이책 출판에 깊은 지식이 없어서 이런 영역을 뭐라 부르는지 모르겠네요. 장이나 절이 시작되는 부분에 주로 들어가는 페이지입니다.
이 책에는 명언 위 아래로 따옴표가 들어갑니다. 배경은 회색이고, 명언을 남긴 사람들은 고딕체로 되어 있습니다.
배경 회색은 2.3에서 만든게 있는데 본문 태그에 스타일을 적용해서 사용할 수 없었습니다. 그래서 새로 회색 배경 스타일을 만들었어요. 실제 코드는 조금 다릅니다. 똑같은 스타일을 2개 이상의 클래스에 지정할 때는 따옴표를 이용할 수 있거든요.
body.bg_grey, .bg_grey_01 {
background-color : #E7E7E8;
}
이렇게 2.3과 2.4에서 쓰일 회색 배경 스타일을 한번에 지정했습니다.
이미지는 화면 비율에 따라 달라지도록 했습니다. 스마트폰의 텍스트 크기와 아이패드의 텍스트 크기가 다르잖아요. 화면이 커지면 따옴표도 커집니다. 얼마나 크게 할건지는 따옴표 이미지의 실제 크기에 따라 달라집니다.
특별한건 전혀 없는데 스타일은 많고 코드는 복잡한 페이지였네요.
* 아래 이미지의 사람 이름에 고딕체를 적용하기 전 화면입니다. 나중에 수정했는데 귀차니즘이...^^;;
2.5 절 제목
h3 {
font-family: "기본글꼴";
text-align : center;
margin-bottom : 2em;
}
h3:before {
content : url("../Images/h_line_50.png");
display : block;
}
h3:after {
content : url("../Images/h_line_100.png");
display : block;
}
h3 + p {
text-indent : 3em;
}
<h3>일자리가 사라지다</h3>
<p>인간의 일자리가 위태롭다. ...</p>
절 제목 스타일의 포인트는 위, 아래에 그어진 세로선과 첫문단 들여쓰기입니다.
위, 아래에 이미지를 직접 넣어도 되는데, 60번 넘게 <p><img src....> 태그를 반복하고 싶지 않았어요. 30개가 넘는 절로 구성되어 있고, 위, 아래에 이미지를 넣어야 하니 60번 이상 반복을 해야합니다.
대신 h3 태그에 스타일을 모두 집어 넣었습니다.
:before 선택자는 h3 앞쪽에, :after는 뒤쪽에 특정 문장이나 이미지를 넣을 수 있게 해줍니다. 그냥 사용하면 이렇게 표현이 되요.
[앞쪽 콘텐츠] h3 텍스트 [뒷쪽 콘텐츠]
그래서 display : block; 속성을 추가했습니다. 이 속성은 '무조건 다음줄로' 쯤으로 이해하시면 되요.
그리고 가족관계를 이용해 h3 바로 다음에 나오는 p 태그(+p)는 무조건 3em 들여쓰기가 되도록 했습니다. +는 '바로 다음에 나오는' 태그만 영향을 줍니다.
2.6 소단락 제목
h4 {
font-family: "고딕";
font-weight : bold;
font-siz : 1em;
border-left : 1px solid #000000;
height : 6em;
margin : 2em 0 -1.5em 1em;
padding-left : 0.5em;
line-height : 1.8em;
}
h4 + p {
text-indent : 1.5em;
}
100번 넘게 반복이 되는 소단락. 그래서 편집이 복잡하면 편집시간이 길어질 수 밖에 없습니다. 편집을 간단하게 하려면 태그 하나에 스타일을 모두 집어넣어야겠지요? 그래서 h4 태그에 스타일을 모두 담았습니다.
소단락 제목의 핵심은 제목 옆에 있는 세로줄. 세로줄이 본문 영역까지 내려가 있는걸 표현해야 합니다.
여기엔 중요한 Tip이 하나 사용됐습니다.
margin : -1.5em;
유용하게 사용할 수 있는 속성인데 모르는 분들이 많더라구요.
마진에 음수 값을 쓰면 두 영역을 겹치게 할 수 있어요. 아래 이미지 보시면 제목 영역에 음수를 써서 본문과 겹칩니다. 저 점선은 제가 그려 넣은게 아니고 제목과 본문 영역에 border로 테두리를 친거예요. 제목 영역의 빨간 테두리가 본문 영역까지 내려가 있습니다.
그럼 테두리를 모두 지우고 제목 영역의 왼쪽 테두리 점선을 검정 실선으로 바꿔보세요. 표현하려는 스타일이 딱 나오지 않나요?
참고로 margin은 음수 값 사용이 가능한데, padding은 음수 값을 사용할 수 없습니다. 이건 스타일의 속성 때문인데, 다음에 기회 되면 설명할게요 ^^;;
이 Tip은 다양한 활용이 가능합니다.
아래 예제를 보세요. 이미지 위에 텍스트가 있습니다. 이미지 하나라고 생각하시겠지만, 이미지 위에 '포스트잇'이라는 텍스트를 올려놓은 거예요.
만약 저런 형태로 포스트잇 001 ~ 포스트잇 100까지 있는 책이라 생각해보세요. 이미지로 만들려면 100개의 포스트잇 이미지가 필요합니다. 그런데 margin 음수 값을 이용하면 이미지 하나로 포스트잇 001 ~ 100까지 표현할 수 있습니다.
.img_postit {
margin-bottom : -65px;
text-align : center;
}
.txt_center {
text-align : center;
}
<body>
<p class="img_postit"><img alt="postit" src="../Images/postit.png"/><br/></p>
<p class="txt_center"> 포스트잇</p>
</body>
다른 스타일은 특별한게 없으니 설명을 생략합니다. 최종 결과물 참고하세요.
2.7 괄호 설명, 영문 표기
sub {
font-size : 0.8em;
vertical-align : baseline;
}
<p>인간의 일자리가 위태롭다. 기계는 제조업 일자리를 하나둘 꿰차더니 이제는 호시탐탐 전문직까지 노린다. 인공지능<sub>(AI)</sub>으로 무장한 기계는 인간의 뇌를 능가한다. 빅데이터<sub>Big Data</sub>를 순식간에 분석하고, 고객에게 맞춤형 금융 포트폴리오를 짜주고, 지진과...</p>
괄호 설명과 영문 표기는 sub 혹은 sup 태그를 사용하길 권해드립니다. span 태그를 쓰는 분들이 있는데 sub/sup를 쓰면 코드가 훨씬 깔끔해요.
sub, sup는 스타일 업이 사용하면 위나 아래로 튀어나옵니다. 기본 속성이기 때문에 사용 전에 스타일을 지정해 주는게 좋아요.
위, 아래로 튀어나오지 않고 본문 텍스트에 잘 어울리게 하려면 vertical-align 속성을 사용합니다. (속성 설명은 여기를 참고하세요 http://www.w3schools.com/cssref/pr_pos_vertical-align.asp)
vertical-align : baseline;
저는 아랫첨자에 baseline 값을 주로 쓰는데 편집하는 책에 맞춰 원하는 속성을 사용하시면 되요.
이제 괄호 설명과 영문 표기 항목을 찾아야하네요.
눈으로 쫓기엔 너무 많고, 놓칠 수도 있습니다.
이 책은 본문 내에 괄호 설명 외에는 괄호가 사용된 곳이 없습니다. 그래서 찾아바꾸기로 간단히 처리했어요.
찾기 : (
바꾸기 : <sub>(
찾기 : )
바꾸기 : )</sub>
이렇게 두번으로 끝냈습니다.
문제는 영문 표기예요.
세보니 딱 138개네요. 하나씩 찾아서 세지는 않았겠지요^^?
영문 표기에는 패턴이 있습니다. 이게 본문 내에 쓰인 영어단어와 영문 표기를 구분해 주는 역할을 합니다.
한글English
한글 옆에 붙어 영문이 시작됩니다. 본문 내 영어단어는 [한글 English] 이렇게 한칸 띄어쓰기가 되어있어 구분을 할 수 있습니다.
한글 옆에 영어 단어가 한 단어만 나오는건 아닙니다. 이 책에서는 3개까지 나옵니다. 이럴 때는 3개, 2개, 1개 순으로~
한글English English English
한글English English
한글English
위 문장을 찾는다고 생각해 보세요.
한글English로 검색을 하면 결과는 3번 찾습니다.
한글English English English로 검색을 하면 1번 찾지요. 2번, 1번 반복되는 단어는 찾지 않습니다.
이 패턴을 정규표현식에 대입해 영문표기를 바꿔보겠습니다.
찾기 : ([가-힣])([a-zA-Z]+) ([a-zA-Z]+) ([a-zA-Z]+)
바꾸기 : \1<sub>\2 \3 \4</sub>
정규표현식은 따로 설명을 했기때문에 여기서 자세히 다루지는 않겠습니다. 이렇게 찾아바꾸기를 하면 이런 결과가 나옵니다.
한글<sub>English English English</sub>
한글English English
한글English
다시한번 찾아바꾸기를 합니다.
찾기 : ([가-힣])([a-zA-Z]+) ([a-zA-Z]+)
바꾸기 : \1<sub>\2 \3</sub>
그럼 이렇게 바뀝니다.
한글<sub>English English English</sub>
한글<sub>English English</sub>
한글English
원리를 이해 하셨나요?
중요!!!
이건 완벽한 바꾸기 식이 아닙니다. 변수가 너무 많기 때문에 영문표기를 한번에 완벽하게 바꾸는 공식을 Sigil의 정규표현식으로 표현하기는 불가능해요. 영문 표기 중간에 다른 기호가 들어갈 수도 있고, 한글English인데 영문 표기가 아닐 수도 있고, 변수가 많습니다.
그래서 이 식을 쓰려면 [찾아 바꾸기]가 아니라 [찾기]로 바꿀 부분을 확인한 후 [바꾸기]로 바꿔야되요. 눈으로 찾는 것 보다 시간은 많이 절약할 수 있지만, 그래도 시간이 많이 걸리는 작업입니다.
이렇게 해서 '내 인생 10년 후' 전자책 제작이 끝났네요 ^^
설명하다 보니 엄청 길어졌어요 ㅜ.ㅜ
다음엔 좀 더 쉬운 책을 소개해야겠네요 ^^
