내맘대로의 EPUB 제작 가이드

국내에 유통되는 전자책은 대부분 EPUB 2이다. EPUB 2는 텍스트와 이미지 기반의 전자책을 만들기 위한 포멧이기 때문에 최신 모바일 기기에서 활용 가능한 다양한 유형의 전자책을 제작할 수는 없다. 일부 출판사는 모바일 앱을 만들어 ‘앱북'이라는 형태로 전자책 만드는 시도를 했다. 앱북은 다양한 기능을 추가할 수 있지만 책 한 권이 앱 하나로 만들어진 경우가 많고, 전자책 서점에서 판매를 할 수 없으며, 제작비가 비싸기 때문에 전자책의 대안으로는 적합하지 않았다.

EPUB 3은 정지된 이미지와 텍스트로 이루어졌던 책이 멀티미디어, 인터렉션, 심지어 프로그래밍까지 요구하는 수준으로 발전하면서 이에 대응하기 위해 제안됐다. EPUB 3은 HTML5와 CSS3를 기반으로 하는 전자책 표준이다. EPUB 2에서 제한을 두었던 동영상, 오디오 같은 멀티미디어를 지원하고, SVG와 스크립트를 이용해 플래시 같은 애니메이션 구현이 가능하다. 뿐만 아니라 HTML5와 CSS를 활용해 간단한 게임이나 문제 풀이(답을 찍으면 맞는지 확인해 주고, 틀리면 설명을 보여주는 등)도 할 수 있다. 앱으로만 구현하던 기능도 EPUB 3로 가능해 졌다. 여행용 책에 실시간으로 길을 안내해 주는 지도를 추가하고, 요리책을 쇼핑몰과 연결해 요리에 필요한 재료를 주문하게 만들 수도 있다. 아동용 책에는 동영상과 움직이는 이미지뿐 아니라 간단한 게임을 넣을 수 있다.

하지만 EPUB 3에 한계가 있다. EPUB 3 콘텐츠는 일부 뷰어에서만 지원한다. 국내 전자책 서점들이 EPUB 3을 지원한다고 발표했지만 동영상과 오디오를 포함하는 수준이고 고정 레이아웃(Fixed Layout), 스크립트, MathML, 미디어 오버레이 등을 제대로 지원하는 뷰어는 없다.

펍트리, 깃든 뷰어 등 EPUB 3을 지원하는 뷰어도 모든 기능을 사용할 수 있는 수준은 아니다. 수학 공식을 표현하는 언어인 mathML은 지원을 하지만 제대로 구현할 수 있는 뷰어가 없다. mathML을 지원한다는 뷰어에 복잡한 수학공식을 한페이지 분량만 넣으면 로딩에 오랜 시간이 걸리고, 경우에 따라 뷰어가 강제종료되기도 한다. Media Overlay를 콘텐츠에 구현하기 위해서는 전자책 제작 비용이 기하급수적으로 높아진다. 따라서 EPUB 3의 기능에 집중할 것이 아니라 지금 바로 사용 가능한 기능을 전자책에 어떻게 적용할 것인지를 고민해야 한다.

EPUB 3을 만들기 전에 가장 먼저 뷰어가 EPUB 3의 어떤 기능을 지원하는지 확인해야 한다. 국내 유통사 중 EPUB 3을 지원하는 뷰어는 공통적으로 HTML5, CSS3, 동영상, 오디오, SVG, aside, Script, Fixed Layout를 지원한다. 그 외의 기능은 뷰어에 따라 다르기 때문에 국내 유통을 고려한다면 이 외의 기능은 가급적 사용하지 않아야 한다.

이번 장에서는 국내 유통사에서 바로 사용할 수 있는 EPUB 3 기능을 살펴보고 어떻게 적용할지 설명한다. 여기서 설명하는 기능 중에 뷰어에 따라 지원하지 않을 수 있다. 그래서 앞부분은 대부분의 유통사에서 지원하는 항목을, 뒤쪽은 교보문고, 예스24 등 일부 유통사에서 지원하는 항목으로 설명을 하니 전자책 제작시 참고하기 바란다.

1. EPUB 3 만들기

EPUB 2 파일을 EPUB 3파일로 바꾸려면 모든 내용을 수정하지 않고 파일 몇개만 수정하면 된다. 여기서는 EPUB 2와 EPUB 3 파일의 차이점을 설명하고 EPUB 2 편집자가 EPUB 3을 만들 때 주의할 부분을 살펴보겠다.

가. OPF version=“3.0”

EPUB 파일이 2.0인지 3.0인지는 OPF 파일에서 확인할 수 있다. 여기서 지정한 정보에 따라 뷰어는 EPUB 2인지 EPUB 3인지를 구분한다.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="uid" version="3.0">

OPF 파일의 제일 위쪽에 있는 package 정보를 보면 EPUB 2.0 문서는 version=”2.0”으로 되어 있다. 이 부분을 version=“3.0”으로 수정해 주면 뷰어는 이 전자책 파일을 EPUB 3.0으로 생각한다.

나. 책 창작자를 세분화한 메타데이터

제대로 된 EPUB 3.0 편집기가 없던 때에 EPUB 2.0 파일을 텍스트 편집기로 EPUB 3.0 파일로 바꾸면서 가장 당혹스러웠던 부분이 메타데이터 오류였다. 분명 제대로 정보가 입력되어 있는데 EPUB Checker에서 계속 오류가 보였다. 한참을 EPUB 3 표준 문서를 본 후에야 원인을 찾을 수 있었다. EPUB 3은 opf:role이라는 속성을 사용하지 않는다. 시길로 EPUB을 만들었다면 아래처럼 메타데이터가 들어간다.

<dc:creator opf:role="aut">홍길동</dc:contributor>

이 메타데이터는 콘텐츠의 창작자(dc:creator) 정보를 담는다. 책의 창작자는 여러 종류일 수 있다. 책을 썼다면 저자가 되고, 삽화를 그렸다면 아티스트나 일러스트레이터가 된다. EPUB 3은 이를 자세히 구분한다. 아래 메타데이터는 EPUB 3에서 사용하는 방식으로 opf:role을 사용하지 않고 porperty 속성을 사용했다.

<dc:creator id="creator">Gildong Hong(영문 표기)</dc:creator>

<meta refines="#creator" property="role" scheme="marc:relators" id="role">aut</meta>

<meta refines="#creator" property="alternate-script" xml:lang="ko">홍길동(한글 표기)</meta>

<meta refines="#creator" property="file-as">Hong, Gildong</meta>

다. manifest의 properties

manifest 항목에서 가장 크게 달라진 점은 properties 속성일 것이다. EPUB 2에서는 메타데이터에서 표지 이미지를 지정했다면 EPUB 3에서는 manifest의 item에서 properties로 지정이 가능하다. properties는 EPUB 내에 있는 파일이 목차인지, 스크립트가 사용됐는지 등의 속성을 지정해 준다. ncx가 navigation으로 대체되면서 아래처럼 반드시 properties="nav"가 지정되야 한다. nav 속성이 없으면 뷰어는 목차 파일을 불러올 수 없게 된다.

이 외에도 몇가지 수정 항목이 있지만 EPUB 2 파일에서 위에 언급한 내용만 수정해도 EPUB 3 파일이 된다. 그리고 나모의 펍트리(Pubtree), 오렌지디지트의 뷰포터(ViewPorter) 같은 EPUB 3 에디터를 사용하면 손쉽게 메타데이터나 manifest가 자동으로 만들어지기 때문에 이정도만 알고 있어도 EPUB 3를 만들 수 있을 것이다. 그렇지만 EPUB 2 파일을 EPUB 3로 변환할 때는 오류가 발생할 수 있으니 EPUB 2와 EPUB 3 파일의 구조적인 차이점을 알아두는게 좋다.

2. EPUB 3 기능 활용하기

EPUB 3하면 멀티미디어를 삽입하거나 인터렉션 기능을 생각해서 어렵다고 느끼는 편집자가 많은 것 같다. 동영상 파일을 추가하고 EPUB 3라고 얘기하거나 종이책을 전자책으로 전환할 때는 EPUB 3로 만들 필요가 없다고 생각하기도 한다. 하지만 간단한 몇가지 기능들을 활용하면 멀티미디어보다 효과적이고 독자들이 편리하게 사용할 수 있는 EPUB 3 전자책을 만들 수 있다.

가. CSS 3를 활용한 전자책 편집

CSS3를 사용하면 움직이는 글자, 모서리가 둥근 글상자, 한 페이지에 여러장의 이미지를 보여줄 수 있는 이미지 앨범처럼 보다 풍부한 표현이 가능해 진다. 4장에서 설명했던 글상자 모서리를 둥글게 만들어 주는 border-radius도 CSS3에서 추가된 속성이다. CSS3는 대부분의 유통사 뷰어에서 지원하기 때문에 바로 사용할 수 있다. 그리고 EPUB 2로 제작된 전자책에서도 사용할 수 있어 EPUB 3이 아니라도 CSS3를 활용한 다양한 편집이 가능하다.

1) border-image 속성

테두리를 보다 멋지게 꾸미고 싶다면 border-image를 써보자. border-image는 이미지 하나로 속성을 어떻게 주느냐에 따라 다양한 형태의 테두리를 꾸밀 수 있게 해준다. border-image 속성의 값을 어떻게 주느냐에 따라 배경 이미지 하나로 전혀 다른 모양의 글상자를 만들 수 있다.

테두리 배경 샘플

▷ CSS 예제

.border_img {

border: 9px solid transparent;

padding: 15px;

border-image: url("../Images/border.png") 30 round;

}

테두리 배경 샘플 이미지와 CSS 예제를 사용하면 위와 같은 글상자를 만들 수 있다.

2) transform 속성

transform 속성을 사용하면 EPUB 2에서는 이미지로 넣을 수 밖에 없던 글자나 글상자 모양을 만들 수 있다. 글상자 모양을 회전시키거나 찌그러진 모양, 상하가 뒤집히거나 거울에 비친 글자처럼 거꾸로 쓰인 글자 표현이 가능해 진다.

3) animation 속성

@keyframes, animation-name, animation-duration 등 animation 속성을 사용하면 글상자의 색을 바꾸고 위치를 이동시키는 애니메이션을 구현할 수 있다. CSS 만으로 마우스를 클릭하면 실행되는 애니메이션을 표현할 수 있기 때문에 JavaScript를 사용하지 않고 사진 앨범이나 애니메이션이 들어간 아동용 동화책을 만들 수 있게 됐다.

아래 예제는 스크립트 없이 CSS만 이용해서 글상자가 왼쪽에서 오른쪽으로 100px씩 천천히 이동하면서 글자 색이 노랑에서 빨강, 파랑, 초록으로 바뀌는 애니메이션이다.

왼쪽에서 오른쪽으로 글상자 색이 바뀌며 이동한다.

▷ CSS 예제

div {

    width: 120px;

    height: 50px;

    text-align : center;

    background-color: yellow;

    position: relative;

    animation-name: example;

    animation-duration: 15s;

}

/* Standard syntax */

@keyframes example {

    0%   {background-color:yellow; left:0px; top:0px;}

    25%  {background-color:red; left:100px; top:0px;}

    50%  {background-color:blue; left:200px; top:0px;}

    75%  {background-color:green; left:300px; top:0px;}

}

이 외에도 글자에 그림자를 주는 text-shadow, 화면 크기에 맞춰 글자와 이미지 배치를 자동으로 조절해 주는 media queries 등 간단하지만 다양한 효과를 줄 수 있는 CSS3 속성을 사용할 수 있다. CSS3에 대한 내용은 관련 서적이나 www.w3schools.com 같은 사이트를 참고하기 바란다.

나. aside를 활용한 주석 처리

EPUB 2에서는 주석을 본문 아래쪽에 넣거나 책의 제일 뒤쪽에 챕터를 추가해서 링크를 걸었다. 전자책은 종이책처럼 페이지를 쉽게 이동할 수 없기 때문에 이런 형태의 주석은 가독성을 떨어트린다.

EPUB 3에서는 EPUB 2에 없던 주석(annotation) 처리에 대한 규칙을 마련해 놓았다. 그리고 이 규칙을 바탕으로 대부분의 EPUB 3 뷰어가 팝업 주석을 지원하고 있다.

리디북스(왼쪽)와 교보문고(오른쪽) 전자책 뷰어는 aside를 사용한 주석을 지원한다.(img_004-1, img_004-2)

국내 유통사 뷰어 중 IDPF에서 권고하는 방식의 주석을 팝업으로 보여주는 것은 리디북스와 교보문고 뷰어가 있다. 다른 업체들도 팝업 주석을 지원한다고 되어 있지만 aside를 사용하는 방식이 아닌 뷰어에서 지정한 방식을 사용하기 때문에 여기서는 IDPF에서 샘플로 제공하고 교보문고, 리디북스, 구글 플레이북, 애플 iBooks 등 대부분의 뷰어에서 지원하는 aside 방식으로 설명을 하겠다.

<aside> 태그는 HTML5에 새로 추가된 태그다. 단어 의미 그대로 본문과 관련되었지만 본문과 구분해야 하는 내용을 추가할 때 사용한다. 가장 대표적인 예가 주석이다.

<p> … <a  epub:type="noteref" href="#n1">1</a> …  </p>   

…

<aside epub:type="footnote"  id="n1">

…   

</aside>

(IDPF의 EPUB 3 콘텐츠 문서 3.0 주석(footnote) 예제)

<aside> 태그로 주석을 표현하려면 본문 주석 제목에 <a> 태그로 링크를 걸고 이 링크의 속성이 주석을 참고한다는 epub:type=”noteref” 속성을 지정해 줘야 한다. 그렇지 않을 경우 뷰어는 단순 링크로 생각하고 링크로 이동을 할 수 있다. 그리고 링크 주소는 주석 제목이 어떤 주석을 참고해야 하는지 알려주는 ID를 추가한다. 이때 ID 앞에는 반드시 #이 들어가야 한다.

<p>EPUB은 <a epub:type="noteref" href="note.html#note01">IDPF</a>에서 제정한 전자책 표준이다.</p>

(주석 제목 ‘IDPF’를 링크로 연결한 코드)

주석 제목이 연결되었다면 주석 설명을 <aside>태그로 묶어준다. 주석 설명에도 역시 이 내용이 주석 설명이라는 epub:type="footnote" 속성과 주석 제목과 연결되는 주석 ID를 추가한다. 이때 주석 ID는 반드시 하나여야 한다. <aside> 안에는 HTML 태그를 사용해 자유롭게 내용을 추가할 수 있는데 뷰어에 따라 스타일이 적용되지 않을 수 있다.

<aside epub:type="footnote" id="note01">

<h4>IDPF</h4>

<p> International Digital Publishing Forum</p>

<p> 국제 전자 출판 포럼</p>

</aside>

(주석 설명 코드)

여기까지 하면 팝업 주석이 표현된다. 하지만 팝업 주석을 지원하지 않는 뷰어에서는 링크에 epub:type:”noteref”를 추가해도 단순 링크로 인식해 주석 설명 영역으로 넘어갈 수 있다. 국내에서는 EPUB 2만 지원하는 뷰어도 많기 때문에 EPUB 2, EPUB 3 뷰어에서 모두 사용해야 하는 전자책이라면 양쪽 모두 불편 없이 사용할 수 있도록 해야 한다.

<a epub:type="noteref" id=”anno01” href="note.html#note01">

EPUB 2를 위해서 주석 제목에 되돌아 올 수 있는 ID를 추가했다. 그리고 주석 설명에 주석 제목 위치로 돌아올 수 있는 링크를 추가해 준다.

<aside epub:type="footnote" id="note01">

<h4><a href=”section.html#anno01”>IDPF</a></h4>

...

</aside>

이렇게 주석 제목에 ID를 추가하고 주석 설명에 링크를 걸어 주면 팝업 주석을 지원하는 EPUB 3 뷰어는 팝업을 띄우고 지원하지 않는 EPUB 2 뷰어는 링크로 이동하게 한다.

5.2.3 동영상, MP3 삽입하기

동영상과 MP3는 가장 손쉽게 추가할 수 있는 멀티미디어 요소이다. EPUB 2에서는 사용을 권장하지 않았는데 EPUB 3에서 공식적으로 지원한다.

<audio controls="controls">

<source src=".sample.mp3" type="video/mp3”/>

Mp3를 지원하지 않는 뷰어입니다.

</audio>

<audio src="sample.mp3"  controls="controls">MP3을 지원하지 않는 뷰어입니다.</audio>

오디오는 이렇게 두가지 방식으로 추가할 수 있다. controls="controls" 속성을 추가하면 오디오 파일을 실행하나 볼륨을 조절하는 컨트롤러가 자동으로 추가되는데 뷰어에 따라 모양이 다를 수 있다. 오디오를 지원하지 않는 뷰어는 ‘MP3를 지원하지 않는 뷰어입니다'라는 메시지를 표시하는데 이 메시지는 편집자가 원하는 내용으로 수정을 할 수 있다.

컨트롤러는 뷰어에 따라 모양이 다를 수 있다.(img_005-1, img005-2)

비디오는 화면 크기를 지정하는 속성이 추가되는 것 외에는 오디오와 비슷하다. 비디오 역시 컨트롤러가 자동으로 제공되지만 뷰어에 따라 처리하는 방식이 다르다. 어떤 뷰어는 동영상을 책 안에서 재생하고 어느 뷰어는 전체화면으로 재생한다.

<video width="640" height="480"  controls autoplay loop>

  <source src="sample.mp4" type="audio/mp4">

  비디오를 지원하지 않는 뷰어입니다.

</video>

<video width="640" height="480" src="sample.mp4"  controls="controls">동영상을 지원하지 않는 뷰어입니다.</video>

기본 코드는 오디오나 비디오를 처음부터 실행한다. 그리고 컨트롤러도 뷰어에서 제공하는 것을 사용해야 한다. 컨트롤러를 보다 예쁘게 꾸미고 싶다면 JavaScript나 epub:trigger를 사용할 수 있다. epub:trigger는 자바스크립트를 사용하지 않고도 비디오, 오디오를 제어할 수 있게 해준다. trigger에 대한 내용은 [IDPF EPUB 3 콘텐츠 문서 3.0]을 참고하기 바란다.

JavaScript를 사용하면 MP3파일의 듣고싶은 부분만 실행되도록 할 수도 있다. 아래 코드는 컨트롤러 모양을 바꾸고, 초 단위로 원하는 구간을 실행시킬 수 있는 JavaScript의 예제다. playSegment(3,8)의 괄호 안의 숫자는 3초 ~ 8초 사이 구간을 실행시라는 의미이다. 이 부분을 수정하면 원하는 구간을 실행할 수 있다. 버튼 모양은 텍스트나 이미지로 바꿀 수 있다.

<audio controls="controls">

<source src=".sample.mp3" type="vmp3”/>

MP3를 지원하지 않는 뷰어입니다.

</audio>

<audio src="sample.mp3"  controls="controls">MP3를 지원하지 않는 뷰어입니다.</audio>

<p>모두 듣기

    <button onclick="playAll()">▶</button>

    <button onclick="playStop()">■</button>

    <button onclick="volUp()">+</button>

    <button onclick="volDown()">-</button></p>

<p>3초 ~ 8초 사이

    <button onclick="playSegment(3,8)">▶</button></p>

<p>10초 ~ 15초 사이

    <button onclick="playSegment(10,15)">▶</button></p>

<p>

    <button onclick="playStop()">stop</button></p>

</p>

…

<script>

var myAudio=document.getElementById("sample1");

var segEnd;

myAudio.addEventListener("timeupdate", function () {

        if (myAudio.currentTime >= segEnd) {

                myAudio.pause();

        }  

        console.log(myAudio.currentTime);

}, false);

function playSegment(startTime, endTime) {

        segEnd = endTime;

        myAudio.currentTime = startTime;

        myAudio.play();

}

function playAll() {

        myAudio.currentTime=0;

        myAudio.play();

}

function playStop() {

        myAudio.currentTime=0;

        myAudio.pause();

} 

function volUp() {

        myAudio.volume+=0.2

}

function volDown() {

        myAudio.volume-=0.2

}

</script>

5.2.4 ruby

루비 문자는 일본어에서 단어나 글자(주로 한자)의 읽는 법을 표기할 때 사용하는 문자이다. 일본어 책을 보면 한자 위에 작은 글씨체로 히라가나나 가타카나로 발음이 표기되어 있는데 이런 인쇄물에 붙은 글자를 루비라고 불렀다. 웹이나 전자책에서 이런 글자를 표기하는 태그가 루비 태그<ruby>이다. 루비 태그는 일본어 표기 이외에도 활용도가 높다. 한국어 고어나 중국어 한자의 성조를 표현하거나 외국어 발음,간단한 주석 등을 루비 태그로 표현할 수 있다.

▷ <ruby> 태그 문법

<ruby>원문 글자<rt>발음(혹은 설명)</rt></ruby>

<ruby>태그는 <rt>와 한 쌍으로 사용한다. 발음이나 설명이 필요한 단어 옆에 <rt>태그로 발음이나 설명을 달고 <ruby> 태그로 전체를 감싸면 된다. 아래는 세종대왕의 묘호와 시호를 한글로 적고 한자를 <ruby> 태그로 추가한 예제이다. ‘영문예무인성명효대왕(英文睿武仁聖明孝大王)’처럼 괄호를 이용할 때보다 깔끔하게 표현되고 가독성이 높다. 다만 안드로이드 4.0 이전 버전에서는 제대로 표현되지 않을 수 있다.

<p>세종은 <ruby>묘호<rt>廟號</rt></ruby>이며, <ruby>시호<rt>諡號</rt></ruby>는 <ruby>영문예무인성명효대왕<rt>英文睿武仁聖明孝大王</rt></ruby>이고, 명에서 받은 시호는 <ruby>장헌<rt>莊憲</rt></ruby>이다.</p>

<p><br/></p>

(img_008)

이번 장에서 설명한 내용은 시중에 유통되고 있는 책에 적용할 수 있는 EPUB 3 기능이다. 소개한 기능은 교보문고, 예스24, 리디북스 등의 유통사 뷰어에서 구현된다. 편집 방법도 간단하여 EPUB 2를 만들어 본 사람은 쉽게 익힐 수 있을 것이다.

8월부터 지금까지 EPUB의 개념부터 만드는 법과 스타일 편집까지 훑었다. 깊이있게 들어가지 못했지만 EPUB 제작에 필요한 내용은 모두 담았다고 생각한다. 지면의 한계로 담지 못한 내용은 www.epubguide.net을 방문하면 볼 수 있다. EPUB 전자책을 전문적으로 편집하고 싶다면 IDPF의 표준 문서(www.odpf.or.kr에서 한글 번역본을 볼 수 있다)를 참고하고 HTML과 CSS를 살펴보길 바란다.

HTML이 글자와 이미지를 뷰어에 나타나도록 해준다면 CSS는 글자와 이미지를 어떤 모습으로 보여줄지 결정한다. 이 장의 제목을 [CSS, 전자책 편집의 시작과 끝]이라고 지은 것은 CSS를 다루는 게 편집자의 편집 능력을 결정짓는 중요한 요소이기 때문이다. 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.(https://ko.wikipedia.org/wiki/종속형시트 참조)

초보 전자책 편집자가 실수를 가장 많이 하는 부분이 CSS이고, 전자책의 코드가 지저분해지는 이유 역시 CSS 때문인 경우가 많은데 이번 장에서는 CSS를 사용할 때 주의할 내용과 전자책 편집에 많이 쓰이는 CSS 속성과 사용법을 알아본다.

CSS란

CSS는 웹문서를 꾸미기 위한 서식, 도구모음이다. 다만 워드프로세서의 서식은 마우스로 선택해서 지정하지만 CSS는 {font-size : #112233;}처럼 코드로 입력한다는 차이가 있다.

웹문서 편집기도 이런 기능을 제공한다. 그러나 종이에 인쇄를 목적으로 스타일이 고정된 일반 문서와 달리 웹문서는 화면 크기, 해상도, 다양한 액션(마우스 클릭, 슬라이드, 터치 등)에 따라 스타일이 달라지기 때문에 서식과 도구모음으로 표현하기에 한계가 있다. 전자책 역시 웹문서처럼 다양한 기기에서 다양한 스타일이 적용되기 때문에 기본 제공 서식으로는 표현할 수 없는 스타일이 많이 있다. 그래서 Sigil같은 전자책 편집 프로그램은 최소한의 기본 서식만 제공하고 코드창에서 편집자가 CSS를 직접 편집하는 기능을 제공한다.

CSS 사용시 주의사항

● 기본 편집 기능에 의존하지 말자 컴퓨터 프로그래밍을 해보지 않은 전자책 편집자들은 CSS의 개념을 이해하기 어려워한다. 그 때문에 기존 문서 프로그램과 비슷한 위지윅 기반의 전자책 편집 프로그램을 사용하는 편집자가 있는데 HTML과 CSS를 모르고 편집 기능에만 의존하면 아래 그림처럼 코드가 엉망이 된다. 이런 코드는 뷰어에서 오류를 일으키며 뷰어의 사용자 지정 스타일과 충돌한다.

스타일 지정이 잘못된 코드의 예

● 코드는 간결하게! CSS는 최대한 간결하게 정리하는 것이 좋다. 거듭해 말하지만, 코드가 간단할수록 문제가 발생할 가능성이 줄어들기 때문이다. 그리고 편집시간도 준다. 코드가 복잡하다고 해서 편집이 정교해지는 것이 아니며, 간결할수록 편집 결과물이 정교하다.

여러 태그에 3개 스타일 사용, 2개 태그에 2개 스타일 사용

● 다양한 기기를 고려하자 전자책 편집이 어려운 이유 중 하나는 다양한 환경을 고려해야 한다는 점이다. 4인치 스마트폰에서 40인치 TV까지 어떤 기기에서도 전자책을 볼 수 있다. 20대 학생은 10포인트로 읽을 테고 60대 독자는 20포인트로 글자를 본다.

책 편집자라면 텍스트에 담긴 의미 뿐 아니라 텍스트가 어떻게 보이는지도 책 내용을 전달하는데 중요하다는 걸 알 것이다. 스타일을 잘못 지정하면 편집자가 전달하고자 하는 책의 모양을 제대로 담을 수 없다. 여기서 또 한번 스타일이 간결해야 하는 이유가 나온다. 위에서 예로 든 복잡한 스타일과 간결한 스타일의 결과를 보면 아래와 같다.

스타일이 잘못 지정하면 같은 책이라도 다르게 보인다.(같은 스타일, 뷰어 글자 크기 변경)

화면이나 글자 크기가 바뀌더라도 일정한 패턴을 보여준다.

● 기본 태그를 최대한 활용하자 HTML은 다양한 기능의 태그를 제공한다. 제목(h1~h6), 본문(p), 첨자/주석(sup, sub), 인용(cite, blocquote), 강조(strong, em) 등 책 편집에 필요한 태그가 있다. 이 태그는 기본 스타일이 지정돼 있지만 CSS로 스타일을 바꿀 수 있다. 기본 태그를 사용하면 편집 시간을 줄이고 코드를 간결하게 할 수 있다.

● 외부 스타일을 사용하자 스타일을 인라인, 내부, 외부 스타일 이렇게 세가지 방법으로 지정할 수 있다. 인라인 스타일은 태그 안에 직접 스타일을 지정한다. 태그별로 스타일을 지정해야 하기 때문에 편집 시간이 오래 걸린다. 내부 스타일은 HTML 파일의 헤더<head> 영역에 스타일을 지정해 사용한다. 각각의 HTML 파일에 스타일을 지정해서 인라인 스타일보다 편집하기 쉽다. 외부 스타일은 별도의 CSS 파일을 만들어 쓰는데 이 CSS파일 하나만 수정하면 문서 전체의 스타일이 바뀐다.

스타일은 책이 열리는 속도에도 큰 영향을 준다. 외부스타일은 뷰어가 한번만 분석하면 되기 때문에 인라인이나 내부 스타일보다 빠르고 안정적으로 책이 열릴 수 있다. 그렇기 때문에 특별한 경우가 아니라면 외부스타일을 사용하기를 권한다.

▷ 인라인 스타일

<p style="font-size : 1em;">글자 크기 1em</p>

▷ 내부 스타일

<head>

<style>

p {font-size : 1em;}

</style>

</head>

<body>

<p>글자 크기 1em</p>

</body>

▷ 외부 스타일

●style.css

p {font-size : 1em;}

●sample.html

<p>글자 크기 1em</p>

CSS 기본 문법

CSS는 구조가 간단하다. 선택자, 속성, 값 세 개의 구성 요소로 되어 있고, 하나의 선택자에 여러개의 값과 속성이 올 수 있다.

CSS 구조(016)

선택자는 여러개의 속성과 값을 문서에 반영하는 역할을 한다. HTML 태그나 사용자가 임의로 만든 클래스를 사용하는데 클래스를 만들 때는 점(.)으로 시작하고 영문, 숫자, 하이픈(-), 언더바(_) 등을 사용할 수 있다. 속성은 글자 모양, 줄간격, 색, 배경 등 180여개가 있다. 값 역시 속성별로 정해져 있는데 값에도 규칙이 있어 속성별로 어떤 값이 들어가야 하는지는 CSS를 몇 번 이용해 보면 쉽게 알 수 있다. 크기, 간격에 해당하는 속성이라면 1em, 1px, 1cm, 1%등 길이나 크기에 대한 값이 오고, 색이 필요한 속성이라면 blue, #0000FF처럼 색에 대한 값이 온다.

● @font-face 전자책에서 쓸 글꼴을 정하는 속성으로 font-family는 글꼴의 이름을 지정하고 영문, 한글, 숫자에 모두 사용 가능하고 공백을 포함할 수 있다. 공백을 포함할 때는 반드시 따옴표(“”)로 묶어줘야 한다. src: url(...)은 글꼴 파일의 위치를 알려주는데 경로와 파일명은 영문, 숫자를 사용하고 반드시 대소문자를 구분해서 쓴다.

@font-face {

font-family: “기본 글꼴”;

src: url(../Fonts/NanumPen.ttf);

}

●font-size : 글자 크기를 조절 크기를 조절하는 값은 %, em, px, cm 등을 사용할 수 있다. 기기의 기본 글꼴에 따라 크기가 조절되는 %나 em을 사용을 권한다.

▷ 사용 방법

p { font-size : 1.5em; }

▷ 본문에 사용

<p>기본 글자보다 1.5배 커집니다.</p>

●text-align : 글자를 왼쪽, 가운데, 오른쪽, 양쪽 정렬

▷ 사용 방법

p { text-align : justify; }

.txt_left { text-align : left; }

.txt_center { text-align : center; }

.txt_right { text-align : right; }

▷ 본문에 사용

<p>문단의 오른쪽 끝이 균일하게 정리됩니다. 문단의 기본 스타일로 지정하는 것을 권합니다. </p>

<p class="txt_left">단어나 문장이 왼쪽으로 정렬됩니다. </p>

<p class="txt_center">단어나 문장이 가운데로 정렬됩니다.</p>

<p class="txt_right">단어나 문장이 가운데로 정렬됩니다.</p>

● text-indent : 들여쓰기 들여쓰기는 내어쓰기로 활용할 수 있다. CSS에서는 들여쓰기(text-indent) 속성만 있고 내어쓰기 속성은 없는 대신 들여쓰기에 마이너스(-1em) 값을 줄 수 있다. 단, 내어쓰기를 할때는 왼쪽에 padding으로 여백을 둬야한다. 여백을 두지 않거나 margin으로 여백을 둘 경우 독자들 눈에는 보이지 않지만 뷰어는 아래와 같은 편집 오류가 발생한다.

▷ 사용 방법

p { text-indent : 1em; }

.txt_outdent { text-indent : -1em; padding-left : 1em; }

▷ 본문에 사용

<p>들여쓰기를 하면 문단이 처음 시작되는 부분에 편집자가 지정한 간격만큼 들여쓰기 됩니다. </p>

<p class="txt_outdent">들여쓰기 속성으로 내어쓰기를 할 수도 있습니다. 내어쓰기를 할 때는 마이너스 값(-1em;)을 줍니다.</p>

margin을 적용하거나 여백을 두지 않으면 테두리를 그렸을 때 편집 오류를 확인할 수 있다.

● line-height : 줄 간격을 조절함

▷ 사용 방법

p { line-height : 1.8em; }

▷ 본문에 사용

<p>HTML의 기본 줄간격은 가독성이 좋지 않습니다. 뷰어에 따라 차이가 나지만 1.5em ~ 1.8em으로 줄간격을 설정하면 가독성이 높아집니다.</p>

4.4.2 글상자에 사용하는 속성

● margin, padding 글상자 바깥쪽, 안쪽 여백을 규정하는 margin과 padding은 쓰임이 완전히 다르다. 이 차이를 잘 구분해야 하는데 HTML 태그로 글자를 표현하면 가상의 글상자 안에 글자가 들어간다. 이 글상자는 border 속성을 사용해 테두리를 그리면 눈에 보이는데 margin은 글상자 바깥쪽, padding은 글상자 안쪽 여백을 지정한다. 위에서 설명한 text-indent에서 padding을 사용해 여백을 줘야 하는 이유도 이 때문이다.

margin은 상하좌우 4가지 속성으로 구분해서 쓴다. margin-top, margin-bottom, margin-left, margin-right으로 원하는 방향만 여백을 줄 수 있다. 또한 margin 하나에 2개, 3개, 4개 값을 사용할 수도 있다.

▷ 사용 방법

.box_margin_2 { margin : 2em; }

.box_padding_2 { padding : 2em; }

▷ 본문에 사용

<p class="box_margin_2">margin은 글상자 바깥쪽의 여백을 지정하는 속성입니다.</p>

<p class="box_padding_2">padding은 글상자 안쪽의 여백을 지정하는 속성입니다.</p>

테두리를 그려 보면 margin과 padding의 차이를 알 수 있다.

● border : 글상자 바깥쪽, 안쪽 여백 border는 여러 값이 모두 포함되야 하는 속성이다. 이중 선의 종류는 반드시 넣어야 한다. 두께, 색은 기본값이 정해져 있지만 선은 정해져 있지 않기 때문에 선 종류를 지정하지 않으면 테두리가 표현되지 않는다.

▷ 사용 방법

.txt_box { border : solid 2px red; }

▷ 본문에 사용

<div class="txt_box">

<p>글상자는 선 종류, 두께, 색깔 이렇게 3가지 값을 갖습니다.</p>

</div>

border는 각각의 값을 나눠서 표현할 수 있다. border-color, boder-style, boder-width로 구분해 표현이 가능하다. 이렇게 구분을 하면 margin에서처럼 상하좌우 값을 다르게 적용하는 것도 가능하다. 또한 이 속성들은 border-left-color처럼 상하좌우를 개별적으로 지정할 수 있다.

▷ 예제

.txt_box { border-style : solid dotted dashed double; }

<div class="txt_box">

<p>border-style을 사용하면 상하좌우 스타일을 다르게 지정할 수 있다.</p>

</div>

(024-1)

●border-radious : 둥근 모서리 border-radius는 글상자 테두리를 둥글게 처리해 주는 속성이다. border-radius의 값을 조절하면 모서리의 둥근 정도를 조절할 수 있다.

▷ 사용 방법

.txt_box_round { border : solid 2px red; border-radius : 25px }

▷ 본문에 사용

<div class="txt_box_round">

<p>글상자의 모서리를 둥글게 처리하고 싶다면 border-radius를 사용한다.</p>

</div>

CSS 활용법. 나만의 템플릿 만들기

● style.css 파일 만들기 메모장이나 sigil 등 텍스트 파일일 편집할 수 있는 프로그램으로 style.css 파일을 만든다. 메모장을 열고 [파일 > 새이름으로 저장]을 하거나 sigil에서 [빈 스타일 시트 추가]를 한다. 파일이름은 원하는대로 지정하되 영문과 숫자만 사용한다. 새로 만든 스타일 시트(여기서는 style.css)에 다음에 설명하는 속성들을 모두 추가한다.

● 공통 속성 공통 속성으로 margin과 padding을 0으로 설정한다. HTML의 기본 문단 간격은 줄간격보다 넓다. 공통속성으로 margin과 padding을 0으로 설정하면 이 문제를 해결할 수 있다. 선택자 *를 사용하면 모든 태그에 속성이 상속된다.

* { margin : 0; padding : 0;}

HTML의 기본 문단 간격은 줄간격보다 넓다. 공통 속성으로 margin과 padding 간격을 조절해 해결할 수 있다.

● 기본 글꼴 설정 많은 편집자들이 글꼴을 지정할 때 [font-family : “나눔명조”]처럼 글꼴 이름으로 설정한다. 이렇게 하면 ‘코펍바탕’으로 글꼴을 바꿀 때 CSS의 다른 항목들도 모두 바꿔야 한다. 글꼴 이름을 “기본 글꼴”, “본문 글꼴‘, ”강조 글꼴’처럼 쓰임에 따라 지정을 하면 글꼴을 변경하고 CSS를 수정하는 불편을 해결할 수 있다.

@font-face {

font-family: “기본 글꼴”;

src: url(../Fonts/NanumMyeongjo.ttf);

}

● 제목 스타일 제목은 h1 ~ h6 태그 중 하나를 선택한다. 책 제목은 h1을, 장 제목은 h2나 h3를 절이나 소단락 제목은 h4~h6를 쓰면 좋다. 제목과 본문 간격을 두기 위해 빈 문단(<p><br></p>)을 4~5칸 삽입하는 편집자가 많은데 제목 태그에 margin-bottom을 주면 간단히 해결할 수 있다. 글꼴이나 글자 크기 등은 제목 모양에 따라 변경하자.

h2 {

font-family : “기본 글꼴”;

font-size : 1.5em;

text-align : center;

margin-bottom : 5em;

margin-top : 2em;

}

● 본문 기본 스타일 시중에 유통되는 전자책들이 들여쓰기, 양쪽 정렬을 하지 않아 뷰어에서 강제로 스타일을 적용한다. 뷰어가 처리해 주니 편해 보이지만, 들여쓰기, 양쪽정렬을 하면 안되는 편집까지 강제로 적용되는 문제가 생긴다. 책을 만들 때 본문 들여쓰기, 양쪽 정렬이 필요한 책이라면 반드시 본문 기본 스타일을 추가해 주도록 하자. 줄간격 1.8em은 국내 유통사 뷰어에서 가독성이 가장 좋다고 생각하는 수치다. 책의 성격이나 편집자 취향에 따라 수정하면 된다.

p {

font-family : “기본 글꼴”;

text-indent : 1em;

line-height : 1.8em;

text-align : justify;

}

● 텍스트 정렬 편집을 하다 보면 텍스트 정렬은 수시로 사용하게 된다. 이런 스타일은 기본으로 CSS에 추가해 두면 편집이 편해진다. 왼쪽 정렬과 오른쪽 정렬은 [text-indent : 0;] 속성을 추가했다. 본문 기본 스타일에 들여쓰기를 설정했기 때문에 정렬 스타일에 들여쓰기를 0으로 하지 않으면 왼쪽으로 약간 치우친다. 가운데 정렬을 했는데 중앙에서 약간 벗어나 보이면 들여쓰기를 했는지 확인해 보자.

.txt_left { text-indent : 0; text-align : left; }

.txt_center { text-indent : 0; text-align : center; }

.txt_right { text-align : right; }

들여쓰기를 0으로 주지 않으면 왼쪽으로 치우친다.

● 글상자 이 스타일을 이용하면 테두리와 배경색이 있는 글상자를 쉽게 만들 수 있다. 스타일을 CSS 파일에 복사해 넣고 원하는 속성 값만 수정하면 된다. 속성이 필요 없다면 값을 0으로 주거나 삭제를 하면 된다.

.txt_box {

border : solid 1px #999999; /* 선 종류, 두께, 색 */

background-color: #dddddd; /* 배경색 */

border-radius : 20px; /* 모서리 둥글게 처리 */

padding : 1em; /* 안쪽 여백 */

}

● 나만의 style.css 템플릿 이제 위에서 설명한 내용들을 하나의 style.css 파일에 정리를 해 보겠다. 이 스타일만 있어도 소설처럼 편집이 간단한 전자책을 만들 수 있다. 아래 스타일시트 파일은 위에서 설명한 내용에 파란색 테두리 글상자 하나를 추가한 파일이다. 이처럼 기본 스타일에 약간씩 변형을 가하면 누구나 새로운 스타일 시트 탬플릿을 만들 수 있다.

▷ style.css 탬플릿 파일

* { margin : 0; padding : 0;}

/* 폰트를 추가하고 싶다면 이 항목을 복사한 후 url을 변경한다 */

@font-face {

font-family: “기본 글꼴”;

src: url(../Fonts/NanumMyeongjo.ttf); }

h2 {

font-family : “기본 글꼴”;

font-size : 1.5em;

text-align : center;

margin-bottom : 5em;

margin-top : 2em; }

p {

font-family : “기본 글꼴”;

text-indent : 1em;

line-height : 1.8em;

text-align : justify; }

.txt_left { text-indent : 0; text-align : left; }

.txt_center { text-indent : 0; text-align : center; }

.txt_right { text-align : right; }

.txt_box {

border : solid 1px #999999; /* 선 종류, 두께, 색 */

background-color: #dddddd; /* 배경색 */

border-radius : 20px; /* 모서리 둥글게 처리 */

padding : 1em; /* 안쪽 여백 */ }

/* 파란색 테두리에 흰색 배경의 글상자 추가 */

.txt_box_blue {

border : solid 1px #000099;

background-color: #ffffff;

border-radius : 5px;

padding : 1em; }

▷ style.css 탬플릿을 적용한 HTML 코드

<h2>4.5.7 나만의 style.css 템플릿</h2>

<p>이제 위에서 설명한 내용들을 하나의 style.css 파일에 정리를 해 보겠다. 이 스타일만 있어도 소설처럼 편집이 간단한 전자책을 만들 수 있다. </p>

<p>아래 스타일시트 파일은 위에서 설명한 내용에 파란색 테두리 글상자 하나를 추가한 파일이다. 이처럼 기본 스타일에 약간씩 변형을 가하면 누구나 새로운 스타일 시트 탬플릿을 만들 수 있다. </p>

<div class="txt_box">

<p class="txt_left">왼쪽 정렬</p>

<p class="txt_center">가운데 정렬</p>

<p class="txt_right">오른쪽 정렬</p>

</div>

<p><br/></p>

<div class="txt_box_blue">

<p>간단한 수정으로 새로운 글상자를 만들 수 있다.</p>

</div>

style.css 탬플릿을 적용한 결과

180개 정도의 CSS 중에 style.css 템플릿에 있는 속성만 잘 활용해도 소설, 인문 같은 텍스트 중심의 책은 대부분 편집이 가능하다. 그림을 글자와 자연스럽게 배치해 주는 float, 글자의 수직 정렬을 해주는 vertical-align, 글상자에 입체감을 주는 box-shadow처럼 몇 가지 고급 속성을 익힌다면 종이로 인쇄된 책은 대부분 전자책으로 편집할 수 있다. 전자책 전문 편집자가 되고 싶다면 3회와 이번 회에 소개한 HTML과 CSS를 익히고 지면 관계상 소개하지 못했지만 책 편집에 사용할 수 있는 몇가지 태그와 스타일 속성을 공부하기 바란다. 

3. EPUB 제작을 위한 쉽고 간단한 HTML

3.1 HTML이란?

HTML은 Hyper Text Markup Language의 약어로 웹페이지를 만들 때 사용하는 언어다. 컴퓨터 언어지만 다른 언어들 보다 구조가 간단해서 쉽게 익힐 수 있다. 웹페이지에 보이는 내용들은 모두 HTML로 편집을 한다.

HTML은 100개가 넘는 태그로 이루어져 있다. 각각의 태그들은 제목, 본문, 강조, 기울임 등 문서 편집에 필요한 속성이 담겨있고, 이 속성을 이용해 편집자가 원하는 형태로 문서를 만들 수 있다.

HTML 태그의 구조

HTML 태그는 [여는 태그]와 [닫는 태그]가 한 쌍으로 구성된다. 여는 태그와 닫는 태그 사이에 있는 [본문 내용]이 뷰어에 표시되는 부분이다. [속성]은 본문 내용을 꾸밀 때 사용하는데 필요에 따라 넣거나 뺄 수 있다.

태그는 항상 여는 태그와 닫는 태그가 함께 와야 하지만 혼자 사용하는 태그도 있다. 이미지 태그<img />나 줄바꿈 태그<br />는 혼자 사용한다. 닫는 태그가 없는 대신 태그 끝에 슬래시(/)를 넣는다.*

여는 태그와 닫는 태그 사이에는 콘텐츠의 내용이나 다른 태그를 넣을 수 있다. 태그 사이에 다른 태그를 넣을 때는 열고 닫는 순서가 매우 중요하다. 반드시 여는 태그와 닫는 태그 사이에 다른 태그가 포함 되야 하며 태그가 서로 교차되서는 안된다.

다른 태그를 넣을 때는 열고 닫는 순서가 매우 중요하다

잘못된 태그 사용

* HTML에서는 <br>처럼 태그 끝에 슬래시(/)를 넣지 않지만 EPUB은 XHTML을 사용하기 때문에 혼자 사용하는 태그 끝에 항상 슬래시(/)를 넣어 줘야 한다.

3.2 EPUB 편집을 위한 태그

EPUB 편집에 사용하는 HTML 태그는 그리 많지 않다. 아무리 편집이 복잡한 책이라도 10개 안팎의 태그만 알면 만들 수 있다. 소설처럼 편집이 단순한 책이라면 본문 태그인 <p>와 표지를 넣을 때 필요한 이미지 태그 <img>만 있어도 충분하다.

여기에서는 EPUB 편집에 주로 사용되는 태그와 특징을 알아보고 각 실제 편집에서 어떻게 활용할 수 있는지를 알아보려고 한다.

EPUB 제작에 많이 사용하는 태그 목록

* 일부 태그의 EPUB 제작을 기준으로 설명을 했기 때문에 웹페이지를 제작할 때와 쓰임이 다를 수 있다.

3.2.1 제목 태그 <h1> ~ <h6>

HTML은 제목을 표현하기 위해 6단계의 제목 태그(Heading)를 제공한다. 큰 제목 <h1>부터 작은 제목 <h6>까지 사용할 수 있고, 단계별로 글자 크기가 달라진다.

제목 태그는 기본 스타일이 지정돼있어서 다양한 스타일로 제목을 꾸미지 못한다고 생각하는 편집자들이 의외로 많다. HTML의 태그는 대부분 역할에 따른 스타일이 지정되어 있지만, CSS를 통해 스타일을 쉽게 변경할 수 있다.

제목 태그를 사용하면 문서 구조가 명확해져 편집 시간을 줄일 수 있다. <h1>을 책 제목, <h2>를 장 제목, <h3>를 절 제목으로 정해 놓으면 제목을 편집할 때 아무 고민 없이 장에는 <h2>, 절에는 <h3>를 사용하면 된다. 그리고 전자책 편집 프로그램들은 대부분 제목 태그로 목차를 자동으로 만들어 주기 때문에 <p> 태그에 제목 스타일을 지정할 때보다 목차 정리를 쉽게 할 수 있다.

시중에 유통되고 있는 전자책을 열어보면 <p>태그에 스타일을 지정해 제목으로 사용한 것을 많이 볼 수 있다. <p> 태그를 제목으로 사용하려면 제목 스타일의 CSS 클래스를 만들어야 하고, 이를 다시 태그에 추가해야 한다.

뷰어 화면에 보이는 결과만 확인하면 원하는 대로 잘 편집된 것처럼 보여도 아래 그림처럼 코드가 복잡해 진다. 코드가 복잡하다는 것은 편집 시간이 오래 걸리고, 뷰어에서 열리는데 시간이 오래 걸리며, 오류가 발생할 가능성이 높다는 의미이다.

3.2.2 문단 태그 <p></p>

문단 태그는 주로 책의 한 문단을 표현할 때 사용한다. HWP나 MS 워드에서 엔터로 줄을 바꿔 문단을 새로 시작하는 것과 같다. 전자책 편집에서 가장 기본이 되는 태그로 가장 많이 사용하는 태그이기도 하다.

일부 ePUB 편집자는 문단을 <div></div>태그로 구분을 하는데 <div></div>태그는 여러 문단을 묶어 스타일을 적용하거나 레이어를 만들때 사용하는 태그이기 때문에 뷰어에서 심각한 오류가 발생할 수 있다. 문단을 구분하는 태그는 반드시 <p></p>를 사용하고 <div></div>는 사용을 하면 안된다.

<p></p>태그에 스타일을 붙여 제목, 주석 등을 표현하는 것도 가급적 피하는게 좋다. <p></p>태그를 꾸미는 CSS가 무한정으로 늘어나고, 다른 사람이 수정을 할 때 CSS만 보고 용도를 알 수 없는 경우가 많기 때문에 제목이나 주석 등 제공되는 기본 태그가 있다면 <p></p>태그보다는 해당 목적의 태그를 사용하는 것이 좋다.

3.2.3 줄바꿈 태그 <br />

<br />은 문단 내에서 줄을 바꿀 필요가 있을 때 사용한다. HWP나 MS 워드에서 시프트(Shift)+엔터로 강제 줄바꿈을 하는 것과 같다. <p>태그와 <br/>태그는 모두 줄을 바꿔주기 때문에 간혹 <br/>태그로 문단을 구분하는 경우가 있는데 절대로 사용하면 안되는 잘못된 편집이다.

<br /> 태그는 닫는 태그 없이 단독으로 사용한다. HTML에서는 <br> 슬래시(/) 없이 사용할 수 있고 XHTML에서는 <br />처럼 여는 태그이면서 동시에 닫는 태그임을 표시해주는 슬래시(/)를 넣어야 한다. EPUB은 XHTML을 기반으로 하기 때문에 슬래시를 넣어 닫는 태그 표시를 해줘야 한다.

3.2.4 강조/꾸밈을 위한 태그

메모장 같은 기본적인 편집기에도 굵게, 기울임, 밑줄 같은 편집 기능이 포함돼 있다. HTML에서도 이런 기본 태그를 제공한다. 이 태그들은 고유의 속성이 포함되어 있어 쓰임이 제한되 보일 수 있지만 CSS를 활용해 잘 활용하면 전자책 편집 시간을 크게 절약할 수 있다.

- 윗첨자, 아랫첨자 태그 ^윗첨자 _아랫첨자

쓰임이 명확한 태그다. 윗첨자는 주석 표시를 할 때 많이 사용하고, 아랫첨자는 H₂O처럼 특수한 기호를 표현할 때 많이 사용한다. 하지만 이 용도로 사용할 필요는 없다. ‘아래첨자용 태그(<sub> 태그)’처럼 간단한 설명을 붙일 때 사용하면 편리하다.

<참고>

기본 태그 사용을 권하는 이유

기본 태그를 사용하면 불필요한 스타일이나 코딩을 줄여 편집 시간을 절약할 수 있다. 아래 예는 같은 편집을 기본 태그와 CSS 선택자로 코딩한 것이다.

<p>HTML^{Hyper Text Markup Language}</p>

<p>HTML<span class="superscript">Hyper Text Markup Language</span></p>

기본 태그를 사용했을 때 코드도 간결해지고, 입력해야 하는 내용도 짧아진다. <spu>와 superscript의 CSS 속성이 같다면 결과는 완전히 동일하다.

- 강조용 태그 <strong></strong>, <em></em>, <u></u>, <mark></mark>

본문 내에서 단어나 문장을 강조할 때 사용하는 태그들이다. 이 태그 역시 기본 속성은 있지만 CSS로 속성을 변경할 수 있다.

<참고>

다양한 강조/꾸밈을 위한 태그

HTML에서는 이 외에도 다양한 편집용 태그를 제공한다. <pre>, <code>, <samp>, <kbd>, <ins>, <del> 등이 있는데 스타일이 유사하거나(<del>과 <u>는 밑줄을 긋는다) 일부 뷰어에서 편집이 깨지는 태그(<pre>태그는 잘못 사용하면 편집이 틀어진다)가 있어 사용할 때 주의해야 한다. 보다 상세한 태그 목록은 IDPF 표준 문서를 참고하기 바란다.

3.2.5 CSS 스타일을 지정해 주는 태그 <span></span>

<span>태그는 전자책을 편집할 때 CSS 스타일 지정에 많이 사용되지만 보다 다양한 기능을 갖고 있다. 여기서는 전자책 편집시 많이 사용하는 기능에 대해 설명하려고 한다.

<span>태그는 기본 속성이 없고, 다른 태그 안에 제한 없이 사용할 수 있다. 그래서 CSS에 사용자가 지정한 속성을 그대로 본문에 반영된다. 예를 들어 밑줄 태그인 <u>에 기울임 속성을 부여했다면 <u> 태그는 밑줄+기울임 속성을 갖게 된다. 하지만 <span>태그로 기울임 속성을 부여하면 다른 속성 없이 기울임만 적용된다.

<span>태그는 다양한 형태로 사용되기 때문에 태그 자체에 속성을 부여할 수 없다. <span> 태그로 속성을 지정하려면 style 속성을 사용하거나 CSS에서 선택자에 속성을 지정한 후 <span> 태그에 클래스를 추가해야 한다. 선택자와 클래스에 대해서는 CSS 장에서 자세히 설명할 예정이다.

3.2.6 그룹, 글상자용 태그 <div></div>

<div>태그는 <p>와 <span>태그 다음으로 많이 사용한다. <div>는 <span>처럼 기본 속성은 없지만 다른 태그 안쪽에 사용하지 않고, 반대로 태그들을 그룹으로 묶는 역할을 한다.

전자책을 편집할 때 <div>태그는 두가지 용도로 많이 쓰인다. 하나는 여러 태그를 그룹으로 묶어 스타일을 지정하는 것이다. 그룹으로 묶으면 여러 단락에 같은 스타일을 지정할 수 있어 편집 시간을 줄일 수 있다.

다른 하나는 테두리와 배경색을 지정해서 글상자를 만드는 것이다. 글상자는 전자책을 편집할 때 빈번하게 사용되기 때문에 <div>태그의 사용법을 알아두는게 좋다.

<div>태그는 CSS와 함께 사용해야 한다. <div>태그만으로는 그룹 스타일을 지정하거나 글상자를 만들 수 없다.

3.2.6 이미지 태그 <img src="URL" alt="설명“ />

<img /> 태그는 문서에 이미지를 삽입할 때 사용하고 <br />처럼 닫는 태그 없이 단독으로 사용된다. <img> 태그는 반드시 src="url" 속성을 함께 사용해야 하며 이미지를 표현할 수 없을 때 나타나는 대체 설명인 alt=“설명” 속성을 함께 사용하는 것이 좋다.

전자책을 편집할 때는 <p>태그나 <div>태그로 묶어 다양한 스타일을 지정할 수 있다. 단독으로 사용이 가능하지만 가급적 <p> 태그나 <div>태그와 함께 사용하기를 권한다.

3.2.7 링크 태그 <a href="URL"></a>

<a> 태그는 책 밖에 있는 다른 문서 혹은 책 안에 있는 다른 위치로 이동을 할 수 있도록 링크를 거는 태그다. <a> 태그는 파란 글자색에 밑줄이 기본 속성으로 되어 있지만 CSS에서 속성을 변경할 수 있다.

전자책에서 <a>태그는 링크 외에 내부 링크에 필요한 식별자(앵커)를 추가하거나 주석을 표현할 때 사용한다. 주석을 링크로 연결하면 팝업주석이 지원되는 뷰어는 링크를 따라 이동하지 않고, 팝업창에 링크를 표시한다.

<참고>

팝업 주석은 HTML5에서 새로 추가된 <aside> 태그를 이용해 EPUB3로 제작을 해야하기 때문에 여기서는 자세히 다루지 않는다. 팝업 주석에 대한 내용은 IDPF의 EPUB3 문서를 참고하기 바란다.

지금까지 전자책 편집을 위한 HTML 태그의 용도와 사용법을 알아봤다. 종이책을 전자책으로 변환하거나 로맨스 같이 단순한 구조의 전자책이라면 여기에 설명한 태그만 알아도 충분히 만들 수 있다. 다음 연재에서는 전자책 편집의 꽃인 CSS를 이용해 편집자가 원하는 형태로 본문을 편집하는 방법에 대해 알아보도록 하겠다.

2. EPUB 제작시 유의사항

EPUB이 표준인데 “표준이 없다”는 말이 나오는 현실

IDPF는 EPUB이 기기나 환경에 영향을 받지 않고 동일한 형태로 책을 볼 수 있도록 여러가지 규칙을 정리했다. 이를 표준이라고 한다. 그런데 많은 편집자는 EPUB이 표준화되지 않아 유통사마다 EPUB을 별도로 제작해야 한다고 불평한다. 표준이 있는데도 표준이 없다는 볼멘 소리가 나오는 까닭은 다음과 같다.

IDPF는 EPUB에 대해 두 가지 규칙을 정리했다. EPUB을 만들 때와 EPUB 뷰어(IDPF 문서에는 리딩시스템이라고 되어있지만 편의상 ‘뷰어'라고 부르겠다)를 만들 때 지켜야 하는 규칙이다. 그런데 규칙에 세부적인 사항까지 규정하지 않았다. 공개 패키징 포맷(OPF) 2.0 문서에 보면 이런 말이 있다.

유니코드(UTF-8, UTF-16)는 컴퓨터에서 글자를 표현하는 방식 중 하나다. 글자를 표현하는 방식은 아스키, EUC-KR 등 여러개가 있는데 자세히 알 필요는 없다. 중요한건 EPUB은 유니코드를 사용한다는 점이다.

여기서 문제가 되는 부분은 제일 마지막 문장이다. 뷰어(리딩시스템)은 그림문자를 제공할 의무가 없다는 부분 말이다. HWP를 많이 사용하는 국내 편집자들은 편집을 하는 과정에서 그림문자를 많이 사용한다. 원문자나 괄호, 키보드로 쉽게 입력할 수 있는 @, $, % 같은 문자는 큰 문제가 되지 않는다. 특정 폰트로만 표현 가능한 그림문자(☂☃☖☣☤☚☜)를 입력했을 때 문제가 된다.

어떤 뷰어는 이런 문자들이 문제 없이 표현되도록 해준다. 그런데 어떤 뷰어에서는 이런 문자들이 제대로 표현되지 않는다. EPUB을 편집할 때 주로 사용하는 컴퓨터용 뷰어는 그림문자가 표현될 가능성이 높다. 그러나 컴퓨터보다 성능이 떨어지고, 기본 폰트가 적은 모바일기기에서는 그림문자가 표현되지 않을 가능성이 높다.

여기서 표준 얘기가 나온다. 그림문자를 포함한 EPUB도 표준을 지켰고, 그림문자를 표현하지 못하는 뷰어도 표준을 지켰다. 그런데 EPUB파일을 뷰어에서 열면 글자가 깨진다. 하지만 A 유통사의 뷰어는 그림문자가 보이고, B 유통사의 뷰어에서는 그림문자가 보이지 않는다고 B 유통사 뷰어보다 A 유통사 뷰어가 좋다고 말할 수도 없다.

이 때문에 애플, 구글, 아마존은 EPUB 제작 가이드를 배포해서 전자책 파일을 까다롭게 검수한다. EPUB 표준을 완벽하게 지킨 전자책이어도 자기들이 세운 규칙과 어긋나면 되돌려 보낸다. 국내에는 전자책 서점이 많아도 전자책 제작 가이드를 배포하는 업체가 많지 않다.

2.1 EPUB으로 책을 보기 위한 최소 사양

전자책을 만들 때엔 사양 낮은 기기를 염두해야

EPUB을 제작할 때 컴퓨터(컴퓨터는 여러 의미를 갖고 있지만 모바일 기기와 구분하기 위해 윈도우, 혹은 OSX같은 운영체제를 사용하는 데스크톱, 노트북 형을 컴퓨터라고 부르겠다)를 많이 이용한다. 컴퓨터는 수백 개의 폰트가 들어있고, 용량이 큰 동영상이나 이미지 파일도 문제없이 열 수 있다. 하지만 전자책을 읽는 독자들은 컴퓨터보다 상대적으로 성능이 떨어지는 모바일 기기를 주로 사용한다. 그래서 컴퓨터에서는 문제없이 볼 수 있었던 EPUB파일이 모바일 기기에서는 제대로 열리지 않거나 열리는 시간이 오래 걸리기도 한다.

전자책을 만들 때는 독자들이 이용하는 모바일 기기의 성능을 고려해야 한다. 내가 만든 EPUB을  유통사의 전자책 뷰어에서 여는데 뷰어가 강제종료된다면 유통사의 뷰어 문제 보다는 EPUB이 모바일 기기에서 보기에 적합하지 않을 가능성이 높다.

독자들은 다양한 모바일 기기를 사용한다. 편집자가 갖고 있는 기기가 아이폰 6이고 만들고 있는 EPUB이 문제없이 잘 열렸다고 해서 독자의 휴대폰에서 잘 열린다는 보장은 없다. 왜냐하면 독자들은 아직도 아이폰3를 사용할 수 있기 때문이다. 그렇다고 아이폰3에 맞춰 전자책을 만들 수도 없다. 모바일 기기의 성능이 좋아지면서 보다 풍부한 표현이 가능해졌는데 아이폰3에 맞추려면 이런 부분을 포기해야 하기 때문이다.

EPUB3  전자책을 만들 때 고려해야 하는 최저 사양은 아래와 같다. 이는 EPUB2 전자책을 열 때도 크게 문제가 되지 않는 성능이다.

이보다 성능이 낮은 기기를 쓰는 독자들도 있다. 하지만 한 유통사의 통계 자료에 의하면 위에서 제시한 최저 사양보다 낮은 모바일 기기를 쓰는 독자는 전체 전자책 독자 10명 중 1명도 안 된다. 안드로이드 OS 버전이 다양한 건 문제인데 아직 많은 사용자가 2.3대 버전(진저브레드)을 쓴다. 안드로이드 2.3대 버전 기기는 EPUB2 전자책을 표현하는 데에 무리가 없지만, EPUB3 파일을 지원하지 못한다. 따라서 EPUB3 전자책을 만든다면 이런 사용자를 포기해야 한다.

2.2. 파일의 크기

2.2.1. EPUB파일의 크기

전자책 한 권당 파일 크기는 300MB 밑으로

국내 유통사 뷰어로 문제 없이 보게 하려면, 전자책 한 권당 용량이 300MB를 넘지 않는 게 좋다. 위에서 최저 사양 기기로 언급한 단말기에서 보이려면 말이다. 300MB는 그림과 같은 글을 제외한 다른 데이터를 포함한 크기다. 경험상 300MB로 전자책을 만들었을 때에 유통사 뷰어 대부분에서 문제 없이 책을 볼 수 있었다.

기기와 뷰어마다 지원하는 EPUB 파일 크기가 제각각이다. 어느 업체 뷰어는 책 한 권당 2GB를 지원하는가 하면, 어느 업체는 용량이 100MB인 전자책을 제대로 열지 못한다. 고사양 스마트폰에서 잘 열리는 책이 저사양 스마트폰에서 오류가 나기도 한다.

스마트폰을 살 때 2GB램, 16GB 저장공간 이라는 말을 본 적이 있을텐데 많은 사람들이 이 말의 의미를 잘 모르고 있다.

컴퓨터나 모바일 기기는 작업공간과 저장공간이 구분돼 있다. 작업공간은 책상 위쪽 공간이라고 생각하면 된다. 사무실에서 일을 할 때 책상 위에 컴퓨터가 올라가 있고, 펜, 스테이플러, 칼 같은 자잘한 도구들도 있다. 그리고 한쪽에는 책과 서류가 꽂혀있다. 업무에 필요한 이런 도구들이 쌓이다 보면 책상 위에 작업할 공간이 부족해진다. 그러면 새로운 작업을 시작하려고 할 때 공간을 확보하기 위해 정리를 하느라 작업 시간이 느려질 수 있다. 이런 책상 위의 공간이 램이다. 스마트폰이나 컴퓨터에서 램 2GB, 8GB하는 공간이 이런 작업공간이다.

1년 전 결재 서류, 업무용으로 회사가 구입한 책들, 덩치가 큰 도구들은 창고에 쌓아둔다. 이런 도구들은 많이 사용하지 않지만 필요할 때를 위해 넓은 창고를 마련해 보관한다. 이런 공간이 저장공간이다. 16GB, 32GB처럼 작업공간인 램보다 몇 배 이상 용량이 많고, microSD처럼 외장메모리를 끼워 확장을 할 수도 있다.

뷰어에서 용량이 큰 전자책 파일이 열리지 않을 때 ‘메모리 부족'이 문제라고 얘기하면 많은 사람들이 저장공간이 충분하다는 얘기를 한다. ‘내 폰은 32GB짜리고 공간이 충분히 남아있다'라는 식이다. ‘메모리 부족' 문제는 저장공간이 아닌 작업공간 문제다. 회사 창고가 아무리 넓고 충분한 여유가 있다 해도 내 책상이 가득 차 있으면 일을 할 수 없다. 모바일기기도 마찬가지다. 저장공간이 많이 남아 있어도 작업공간인 ‘램'이 부족하면 전자책이 열리는 속도가 오래 걸리거나, 책이 열리다 뷰어가 강제 종료 될 수 있다.

최신 스마트폰의 작업 공간은 2GB정도이다. 구형 스마트폰은 1GB보다 적을 수도 있다. 전자책 파일이 2GB라고 해서 이 파일이 모두 작업공간에 올라가는 것은 아니지만 1GB 작업공간인 스마트폰에서 2GB 전자책을 열면 문제가 생길 가능성이 아주 높다. 그리고 많은 사용자들이 여전히 램 1GB인 스마트폰을 사용한다.

전자책 사용자 중 50% 이상이 스마트폰을 이용하고 있기 때문에 전자책 파일은 스마트폰에 맞춰 만들어야 한다. PC에서 잘 열린다고 전자책 파일 용량을 생각하지 않고 제작하면 50%가 넘는 독자들은 책을 볼 수 없다.

2.2.2. HTML 파일의 크기

챕터 하나(또는 HTML 파일 하나)의 용량은 200KB 밑으로

전자책 용량이 300MB보다 작다고 하여 문제가 전혀 없는 건 아니다. EPUB 파일은 첫 회에서 얘기했던 것처럼 여러 파일을 압축해서 만든 파일이기 때문에 압축파일에 있는 이미지, 폰트, 동영상, 음성 등 각각의 파일 크기도 살펴야 한다.

HTML 파일 크기는 편집자들이 가장 많이 실수를 하는 부분이다. 유통되고 있는 전자책 중에 책 한권 전체가 하나의 HTML파일에 들어있는 경우도 있다. 수십 페이지짜리 책이라면 문제가 되지 않겠지만, 종이책 기준으로 300쪽이 넘는 책을 HTML 파일 하나에 담으면 뷰어에서 문제가 생긴다. 편의상 EPUB 파일 내의 HTML 파일을 챕터라고 부르겠다. 많은 편집자들이 한 챕터를 HTML 파일 하나로 구분을 하기 때문에 EPUB 파일에 대해 설명하는 책을 보면 HTML 파일을 챕터로 부르는 경우가 많다.

HTML 파일은 200KB 이하여야 한다. 아마존이나 애플은 300KB로 제한하는데 이들 회사는 전자책을 볼 환경을 제한한다. 반면 국내 독자는 수십 개가 넘는 다양한 기기로 전자책을 읽는다. 이 때문에 가능한 한 낮은 사양에 맞춰 위와 같은 기준을 제시한다. 200KB는 아래아한글에서 글자 크기 10, 줄간격 160으로 설정하여 50쪽으로 작업한 분량이다.

HTML 파일이 아주 크면 뷰어에서 책을 여는데 시간이 오래 걸린다. 페이지를 넘길 때 바로 넘어가지 않고 약간 시간이 걸린다는 느낌이 드는 것도 HTML 파일 크기 때문일 수 있다. 챕터가 넘어갈 때마다 로딩 표시가 오래 보인다면 HTML 파일 크기가 크기 때문이다.

2.2.3. HTML 파일의  갯수

전자책 한 권에 HTML 파일은 300개까지만

한 챕터를 200kb로 나눴다면, 몇개 챕터가 들어갈 수 있는지 궁금할 것이다. 한 챕터 200kb가 A4 50장 분량이라고 하면 한 챕터 분량으로는 넉넉하지만 책 한권으로는 턱없이 부족하다. 2014년 상반기 기준으로 국대 전자책 독자들의 사용비중이 높았던 넥서스S, 갤럭시 S2, 아이폰4 이전 모델로 테스트를 했을 때 200kb 용량의 HTML파일 300개 정도가 적당했다. HWP로 50페이지 분량 챕터를 300개까지 넣을 수 있는 분량이라 책 한권을 만드는데 부족함이 없을 것이다. HTML 파일이 400개가 넘어가면 초기 로딩 시간이 길어지고 페이지를 넘길 때 속도가 현저히 떨어졌다.

판형을 고정한 EPUB(Fixed Layout EPUB)은 HTML 파일이 300개 이상 필요할 수 있다. 판형을 고정한 EPUB은 PDF 파일과 비슷하다. 독자가 글자 크기를 바꿀 수 없다. 말 그대로 고정형이다. 이와 같은 판형을 고정한 EPUB 전자책은 챕터가 아니라 페이지 하나가 HTML 파일 하나가 된다. HTML 파일이 300개가 있다는 건 이 책이 300쪽 분량이란 의미가 된다. 이 때에 HTML 파일 하나의 용량은 200KB 보다 현저하게 낮다. 현재 판형을 고정한 EPUB을 지원하는 뷰어가 제한적이어서 정확한 판단을 내리기는 어렵지만, 몇몇 뷰어에서 테스트해 본 결과 600페이지 정도는 무리 없이 표현했다.

2.2.4. 표지 이미지 품질과 파일 크기

표지 이미지는 300DPI 1400픽셀이면 충분

표지 이미지는 가능한 좋은 품질에 큰 크기를 사용해야 한다. 아래 이미지는 7인치 아이패드와 4인치 스마트폰에서 본 같은 책의 표지이미지다. 4인치 스마트폰에서는 화면 가득 표지 이미지가 표시되지만 아이패드에서는 오른쪽과 아래쪽 여백이 많이 남는다.

스마트폰과   아이패드에서 본 표지

<그림01> 화면 크기에 따른 표지 이미지(img001_표지이미지)

책을 볼 수 있는 모바일 기기 성능은 빠른 속도로 발전을 하고 있다. 1년 전에는 1280 해상도면 최신형 고해상도 기기였지만 지금은 5인치 스마트폰도 2160 * 4096까지 해상도가 높아졌다. 예로 든 책을 2160 해상도의 기기에서 보면 표지 이미지 크기는 화면의 1/4도 되지 않을 정도로 작게 보인다.

그렇다고 표지 이미지를 무한대로 크게 넣을 수는 없다. 낮은 성능의 기기에서도 문제없이 보이고, 2~3년 후에 나올 기기에서도 깨져 보이지 않을 정도의 이미지가 적당하다.

표지 이미지는 아무리 작더라도 세로(긴쪽) 사이즈를 기준으로 96DPI에 1024 픽셀보다 커야 한다. 1024 픽셀 이미지라면 고해상도 디스플레이에서 확대를 해도 심하게 깨져 보이지 않는다. 권장하는 크기는 300DPI에 1400 픽셀 이상의 이미지이다. 그리고 최대 300DPI에 4000픽셀보다는 작은 게 좋다. 이보다 커지면 낮은 성능의 기기에서는 이미지를 불러오는데 문제가 생길 수 있다. 그리고 이미지 파일 크기는 5MB를 넘지 않는 게 좋다.

2.2.5. 본문 이미지 품질과 파일 크기

본문 이미지는 72DPI이면서 5MB 넘지 않게

본문 이미지는 표지 이미지보다 낮은 품질(DPI)을 사용한다. 전자책 본문에 들어가는 이미지는 96DPI나 72DPI 정도의 웹용 이미지가 적당하다. 이미지 크기는 세로(긴쪽) 기준 4000px 미만, 이미지 크기는 최대 5MB를 넘기지 않아야 한다.

간혹 인디자인이나 쿽으로 작업한 이미지를 전자책에 그대로 사용하는 경우가 있다. 실제로 이미지가 100장 정도 들어간 전자책 파일 용량이 400MB가 넘어 이미지 해상도를 보니 600DPI급 인쇄용을 사용한 경우가 있었다. 이 이미지를 72DPI로 줄였더니 400MB용량의 전자책이 25MB로 줄어들었다. 독자 테스트를 해본 결과 20인치 모니터에서 두 이미지를 따로 보여줬을 때는 전혀 변화를 느끼지 못했다. 스마트폰이나 태블릿에서도 독자는 이미지의 차이를 느끼지 못했다. 이미지를 확대하거나 두 이미지를 동시에 펼쳐 놓고 보면 600DPI 이미지가 더 선명하다고 느끼지만, 독자들 대부분이 책을 보는데 600DPI와 72DPI이미지의 차이는 의미가 없다고 생각했다.

간혹 인디자인이나 쿽으로 작업한 이미지를 전자책에 그대로 쓰는 모습을 본다. (얼마 전 사내에서 테스트하는데 책이 뷰어에서 잘 열리지 않았다. 용량이 400MB가 넘었다. 이미지가 100장이 들어간 책이었다. 혹시나 하여 이미지 해상도를 보니 600DPI급 인쇄용이었다. 인디지안이나 쿽으로 작업한 이미지를 전자책에 그대로 썼던 것이다. 이 책에 든 이미지를 72DPI로 바꿨더니 용량이 400MB에서 25MB로 줄었다. 독자에게 같은 이미지를 600DPI와 72DPI로 보여주어 차이를 느끼는지 실험한 적이 있는데 다들 차이를 느끼지 못했다. 20인치 모니터와 태블릿, 스마트폰에서 각각 테스트했지만 결과는 같았다.

이미지에 글자가 들어가 있다면 확대를 해도 글자가 선명하게 보이도록 큰 이미지를 사용해야 한다. 대부분의 뷰어에서 본문 이미지를 확대할 수 있는 기능을 지원하기 때문에 표처럼 글자가 들어있는 이미지가 있다면 확대를 했을 때 글자가 선명하게 보일 수 있도록 해야 한다.

전자책 본문에 들어가는 이미지는 96DPI나 72DPI 정도의 웹용 이미지가 적당하다. 이미지 크기는 세로(긴쪽) 기준 4000px 미만, 이미지 크기는 최대 5MB를 넘기지 않아야 한다.

2.2.6. 폰트 파일의 종류와 파일 용량

폰트는 용량이 크지 않고 모바일에 적합한 것으로

폰트는 모바일에 적합한 걸 써야 한다. IDPF는 TTF, OTF, WOFF등의 폰트를 허용하고 있는데 모바일 기기에 따라 OTF와 WOFF를 지원하지 않을 수 있다. 시간이 지나면 이 부분도 개선이 되겠지만 현재 환경에서 가장 적합한 폰트는 TTF이다. OTF나 WOFF 폰트를 쓰면 기기에 따라 시스템 폰트로 대체될 수 있다.

폰트 파일 하나의 용량은 10MB를 넘지 않도록 하고 여러 개의 폰트를 사용할 경우 폰트 파일 용량의 합이 30MB를 넘지 않도록 해야 한다. 폰트 파일은 전자책을 열때 작업공간(램)에 모두 올라간다. 30MB파일이 한 번에 올라가려면  시간이 오래 걸리기 때문에 책을 여는 시간이 오래 걸리고, 낮은 사양의 기기에서는 공간이 부족해 강제 종료가 될 수도 있다.

2.2.7. 오디오 파일 종류, 품질과 파일 용량

오디오 파일은 AAC, MPEG3, VBR

오디오파일 하면 MP3를 많이 떠올릴 것이다. MP3는 확장자가 하나여서 모두 같은 종류인 것 같지만 AAC, MPEG3, VBR등 다양한 인코딩 방식이 있다.

인코딩이란 소리를 디지털 데이터로 바꾸는 방식이다. 아날로그 시절 카세트, 레코드(LP), CD, LD처럼 저장매체에 따라 저장 방식이 달라지는 것과 비슷하다고 생각하면 된다. 어떤 방식으로 소리를 인코딩 했는지에 따라 디코딩 방식도 달라진다. 디코딩은 인코딩과 반대로 디지털 데이터를 소리로 바꾸는 과정이다.

인코딩 방식이 중요한 이유는 기기에 따라 디코딩 형태가 정해져 있기 때문이다. 컴퓨터에서는 수십가지 디코딩 방식을 사용하는데 모바일 기기에서는 3~4가지 방식만 지원을 한다. 컴퓨터에서는 지원하지 않는 방식의 파일이 있으면 ‘코덱'이라는 것을 설치해 문제를 해결할 수 있지만 모바일 기기에서는 해결이 어렵다.

아이폰과 안드로이드 그리고  컴퓨터에서 공통으로 사용할 수 있는 형식이 AAC, MPEG3, VBR이다. 이 세 형식 모두 MP3라고 불리는 형식이다.

오디오 품질은 콘텐츠의 내용에 따라 달라질 수 있으나 96kbps ~ 192kbps의 품질을 권한다. 최신 기기에서는 그 이상의 품질도 지원이 가능하지만  EPUB을 볼 수 있는 최소사양의 기기를 고려해야 한다. 음질이 중요하지 않은 토익 듣기 문제라면 96kbps정도면 충분하다. 클래식 음악을 소개하는 책이라면 192kbps 정도의 고음질을 사용한다.

2.2.8. 비디오 파일 종류, 품질과 파일 용량

비디오 파일은 H.264 MPEG4로 인코딩

비디오 파일 역시 인코딩 방식에 따라 디코딩 방식이 결정되고, 모바일 기기에서 지원하는 디코딩 형식이 정해져 있다. H.264, MPEG-4로 인코딩 된 파일이면 iOS와 안드로이드 기기에서 모두 사용할 수 있다. 두 형식의  확장자는  MP4, AVI이다.

화면 크기는 640(720)*480 혹은 720p 해상도를 권장한다. EPUB3로 제작을 한다면 풀HD급인 1080p를 사용해도 된다. 이보다 작을 경우 영상의 품질이 떨어지고, 너무 커지면 용량이 크게 증가할 수 있다.

<용어 설명>

● HTML(XHTML)
EPUB 파일은 XHTML을 기반으로 한다. XHTML과 HTML은 기술적인 차이가 있지만 EPUB을 제작하는데 둘을 구분해야할 필요는 없다. 이 문서에서는 XHTML과 HTML을 구분해야 하는 경우가 아니라면 많은 사람들에게 익숙한 HTML이라는 용어를 쓰기로 한다.

● 이미지 해상도
해상도는 DPI와 가로*세로 픽셀로 표현한다. 여기서 DPI는 이미지 품질을 나타내며 DPI가 높을수록 인쇄에 적합하다. 책이나 고급 이미지 인쇄에는 600DPI 이상을 사용하며, 웹이나 PPT 등 모니터 보는 이미지는 96DPI면 충분하다.

● 이미지 품질
표지 이미지와 본문 이미지의 해상도 품질(DPI)을 달리 하는 이유는 모바일 기기의 스펙, EPUB 파일 용량, 가독성 등을 고려해야 하기 때문이다. 최근에 나오는 모바일 기기는 200DPI(가로*세로 1인치당 찍히는 픽셀 수로 DPI와 유사한 개념) 이상이기 때문에 표지처럼 큰 이미지는 해상도 품질(DPI)가 낮을 경우 이미지가 흐릿해지거나 깨져 보일 수 있다. 반면 본문에 들어가는 이미지는 96DPI만 되도 가독성에 영향을 주지 않는다. 만약 사진집 같은 이미지의 품질이 중요한 전자책이라면 본문 이미지라도 300DPI를 사용할 수 있다.

● 오디오 파일의 품질
오디오 파일의 품질을 표시하는 방법은 다양하나 여기서는 MP3 파일의 품질을 표현하는 kbps(Kilobits per second)를 사용한다. kbps는 단순히 말해 1초동안 전달할 수 있는 소리(데이터)의 양이다. 전달 가능한 소리(데이터)의 양이 많을수록 품질이 좋지만, 일정량을 넘어서면 귀로 구분하기 어려워진다.

2.3. 파일명

파일 이름은 영어로 시작(권장)

EPUB내에 포함된 모든 파일의 이름은 영문, 숫자, 언더바(_) 하이픈(-)만 사용하기를 권한다. 그리고 영문명으로 시작하도록 권한다. 파일 이름을 한글로 적는 편집자가 많은데 주의해야 한다. 대소문자 구분도 확실히 해야한다. 컴퓨터에게 word라는 단어와 WORD라는 단어는 서로 다르다. 당연히 Section.html과 section.html도 서로 다른 파일이다.

펀집자들이 많이 하는 실수를 몇가지 소개한다. 아래 파일 이름은 윈도우 PC에서 문제가 되지 않더라도 iOS, 안드로이드, 리눅스 등 다양한 환경에서는 문제를 일으킬 수 있다.

파일명의 길이도 확인을 해야한다. 파일명은 확장자를 포함해서 255byte를 넘어서는 안된다. 1byte는 영문과 숫자 한글자에 해당하고, 한글은 2byte가 한글자다. 파일명은 영문과 숫자를 포함해서 255byte를 넘을 수 없다.

파일명에 대해서는 IDPF의 설명을 참고하기 바란다.

파일명의 길이도 확인을 해야한다. 파일명은 확장자를 포함해서 255byte를 넘어서는 안된다. 영어와 숫자는 글자 하나가 1byte이고, 한글은 글자 하나가 2byte이다. 파일명에 대해서는 IDPF의 설명을 참고하자. (http://www.idpf.org/epub/30/spec/epub30-ocf.html#sec-container-filenames)

2.4. 인코딩, 언어설정 및 네임스페이스

HTML 파일에 빠뜨리면 안 되는 것들

EPUB안에 포함된 모든 HTML 파일에는 정확한 인코딩, 언어설정과 네임스페이스 설정이 필요하다.

인코딩은 오디오파일에서 설명한 바와 같이 글자를 어떤 방식으로 디지털화 시키는지를 결정한다. 인코딩 방식이 잘못 설정되면 글자가 깨질 수 있다. 인터넷을 하다보면 글자가 이렇게 보일 때가 있다.

이는 인코딩이 잘못되 생기는 현상이다. 뷰어에서 책을 열었는데 본문이 이렇게 보인다면 인코딩 설정을 변경해야 한다. EPUB은 UTF-8 인코딩을 사용하고 HTML파일 상단에 아래 내용을 포함시켜 줘야한다.

뷰어에서 책을 열었는데 본문이 위와 같이 보인다면 HTML 파일 상단에 아래 내용을 포함해야 한다.

언어설정은 사람의 관점에서 보는 콘텐츠의 언어이다. 한글로 된 책이라면 뷰어한테 이 책은 한글로 된 책이라는 표시를 해 줘야한다. 그렇지 않을 경우 글자가 아래처럼 깨져 보일 수 있다.

위와 같이 하였는데 아래의 예시처럼 글자가 제대로 표시가 안 된다면

언어설정 역시  HTML  파일 상단에 아래처럼 표시를 해줘야 한다.

인코딩은 EPUB편집 프로그램이라면 기본으로 UTF-8로 설정이 된다. IDPF에서 권고하는 사항이기 때문에 다른 설정이 들어가지 않는다. 하지만 언어설정은 편집자가 반드시 지정을 해 줘야한다. 편집 프로그램 별로 환경설정에서 기본 언어설정을 지정할 수 있게 되어 있다.

EPUB 제작기는 HTML 파일을 기본으로 UTF-8로 설정한다. 하지만 언어설정은 편집자가 반드시 지정을 해 줘야한다. 편집 프로그램 별로 환경설정에서 기본 언어설정을 지정할 수 있게 되어 있다.

네임스페이스는 HTML 파일 안에 포함된 내용이 어떤 종류인지를 뷰어가 이해할 수 있도록 알려주는 역할을 한다. 예를 들어 HTML 안에 SVG이미지가 포함되어 있다면 이 파일에는 SVG가 포함되어 있다고 뷰어에게 알려줘야 한다. 그렇지 않으면 EPUB Checker에서 오류가 발생하고 뷰어에서 제대로 보이지 않을 수 있다. 네임스페이스는 아래처럼 지정을 한다.

EPUB에서 많이 사용하는 네임스페이스는 아래와 같다.

참고로 속성별 네임스페이스는 IDPF 문서에서 확인할 수 있다.

인코딩은  HTML파일 상단에서 설정을 해 주고, 언어설정과 네임스페이스는 <html>태그에서 지정한다. HTML파일 내용에 따라 언어 설정과 네임스페이스는 달라질 수 있으니 주의해야 한다. 그리고 언어설정과 네임스페이스는 모두 <html> 태그에서 지정해 주기 때문에 아래처럼 둘을 동시에 지정할 수 있다.

1. EPUB이란?

들어가며

10년 가까이 전자책 뷰어를 만들고 전자책 포맷을 연구하며 밥벌이를 했다. 뷰어와 포맷을 연구하면서 ‘출판사는 콘텐츠를 왜 이렇게 만들까?’라며 욕했다. 출판사가 보낸 전자책은 겉으로 멀쩡하지만, 파일을 까보면(코드를 본다는 소리다) 쓰레기(흔히 쓰는 용어이니 양해 바란다)가 가득했기 때문이다. 이런 전자책을 열면 뷰어가 죽어버린다. 출판사에 전자책 파일에 문제가 있다고 말하면, 출판사는 저작도구로 책을 만들 때 아무 문제가 없었다며 유통사의 뷰어가 안 좋아서 대꾸하기 일쑤다. 말이 좀 거칠었다. 하지만 실제로 저런 말을 써가며 출판사와 유통사가 책임을 떠넘기기를 하는 모습을 종종 봤다.

그랬던 내가 출판사로 직장을 옮겼다. 이곳에서도 전자책을 담당하는데 출판사의 처지를 이해하게 됐다. 출판사는 종이책을 전자책으로 쉽게 바꾸길 바란다. 그런데 인디자인이나 쿽 같은 훌륭한 편집 프로그램이 없다. 책 한 권 편집하는 데에 들어가는 돈과 시간이 얼마인데 그만큼의 시간과 노력을 전자책에도 들여야 한다. 전자책 제작을 전문 업체에 맡기면 이미지 몇 장만 넣어도 제작비가 50만 원이 훌쩍 넘는다. 그런데 전자책 팔아 수수료 떼고 인세 떼고서 제작비 50만 원을 벌려면 몇 개월이 걸릴지 모른다. 국내의 한 전자책 유통사는 전자책 저작도구를 무료로 배포한다. 그런데 이 저작도구로 만든 전자책이 다른 유통사의 뷰어에서 제대로 열리지 않는다. EPUB이 표준이라는데 유통사마다 다른 EPUB을 보내줘야 한다. 유통사에 파일을 보내면 ‘이미지가 크다’, ‘목차를 나눠야 한다’, ‘폰트가 이상하다’며 다시 만들어 보내란 말을 듣는다. 전자책 파일을 보내기 전까지 아무런 말을 안 하다가 파일을 받고서 트집이다.

이 글은 위에서 얘기한 저런 논쟁에 불을 붙일 의도가 전혀 없다. 이 글을 쓰는 이유는 전자책에 관심이 있지만 ‘전자’ 소리만 들어도 피곤해지는 출판 편집자들에게 ‘전자책’이 무엇인지 최대한 쉽게 설명하기 위해서이다. EPUB 파일 하나로 국내 모든 유통사의 뷰어에서 문제없이 보이게 하려면 어떻게 해야 하는지, 종이책처럼 전자책은 편집자가 원하는 대로 만들려면 어떻게 해야 하는지 설명하려고 한다. 프로그래밍을 모르는 사람도 이해하기 쉽게 쓰려고 노력하겠다.

전자책 편집은 종이책 편집과 쓰는 말부터 다르다. 종이책 편집자가 이해하는 기획과 전자책 편집자가 이해하는 기획은 화성어와 금성어 차이만큼 의미가 다르다. 종이책 편집자에게는 생소한 HTML¹⁾[각주:1]이나 CSS 같은 용어를 써야 한다. 그래서 이 글을 끝까지 읽으려면 스스로 공부를 해야 한다. 그래도 한 가지 약속은 할 수 있다. 공부를 하면서 이 글을 끝까지 읽은 사람이라면 유통사의 전자책 검수 담당자가 하는 말이 외계어처럼 들리지 않을 것이다. 제작업체에 맡긴 전자책이 50만 원의 제작비만큼 가치가 있는지, 아니면 10만 원도 안 되는 수준인지를 판단할 수 있을 것이다. 조금 더 노력하면 제작비 30만 원 수준의 전자책은 직접 만들 수 있을 것이다.

1. EPUB 소개

1.1 EPUB이란

국내 출판계에 있는 사람 가운데 EPUB을 제대로 아는 사람이 얼마나 있을까? 대부분 ‘EPUB이 전자책 표준이다’ 정도만 알고 있는 것 같다. EPUB이 무언지 묻는 사람에게 IDPF²⁾[각주:2]의 표준 문서를 보라고 하면, IDPF가 무엇인지를 설명해야 한다. 그리고 IDPF의 표준문서가 무엇인지도 설명을 해야 한다. 간혹 IDPF와 EPUB 표준문서를 아는 사람들을 만난다. 그들에게 EPUB 만드는 법을 설명하다 보면 ‘IDPF 표준에 맞느냐’는 질문을 받을 때가 있다. 몇 마디 대화를 나누면 알게 된다. IDPF 표준 문서를 대충이라도 읽어본 사람은 아주 드물다는 것을.

시작부터 IDPF이니, 표준문서이니 하는 말을 꺼낸 건 이런 문서들을 보고 공부를 하라는 얘기를 하려는 게 아니다. EPUB을 제대로 알려면 IDPF의 표준 문서를 공부하면 된다. EPUB 2.0 문서 3개, EPUB 3.0 문서 5개를 처음부터 끝까지 들여보면 EPUB에 대해서 누구보다 잘 안다고 자신 있게 얘기할 수 있다. 그런데 나조차 EPUB 표준문서를 처음부터 끝까지 정독한 적이 없다.

EPUB은 국내 유통사 대부분이 쓰는 전자책 포맷이다. 이거면 충분하다. EPUB 표준이 어떠니, DRM이 어떠니, EPUB 3이 어떠니 이런 건 말하기 좋아하는 사람들끼리 떠들면 된다. 그들은 페이스북이나 무슨 무슨 출판모임 사이트 게시판에서 EPUB에 대해 열띤 토론을 벌이겠지만, 전자책을 만들고 판매하는 데 아무 도움이 되지 않는다. EPUB이 국내 유통사 대부분이 쓰는 전자책 포맷이니 오류 없이 잘 열리면 다른 부분은 신경 쓰지 않아도 된다. 그래도 말은 꺼냈으니 EPUB이 무엇인지 5가지로 정리해 보겠다.

1. EPUB은 IDPF(International Digital Publishing Forum)에서 제안한 전자책 포맷이다.

2. 현재 EPUB 3.0이 ISO의 기술 표준(TS)으로 등록되어 있다.

3. 국내에서 가장 많이 쓰이고, 아마존을 제외한 해외 전자책 사업자 대부분이 쓴다.

4. EPUB 3.0 버전까지 나왔는데 출판계는 EPUB 2.0 버전을 많이 쓴다.

5. HTML, CSS와 같은 웹 기술을 사용한다.

더 간단히 줄여보자. EPUB은 IDPF가 제안하고 세계에서 가장 많이 쓰이며 홈페이지 만드는 것처럼 HTML로 책을 편집하는 전자책 파일 형식이다. 전자책에 관심 있는 출판 편집자라면 이 정도만 알아도 EPUB으로 전자책을 만드는 데 어려움이 없다.

1.2 EPUB의 특징

EPUB 나오기 전 한국은 XML이나 텍스트 방식의 전자책 포맷을 많이 썼다. 해외는 MOBI(아마존의 AZW와 같은 형식이다), PDB, LIT 등 수십 종의 전자책 파일 형식을 썼다. PDF도 전자책 파일의 한 형태다.

다양한 전자책 파일 형식이 지금은 EPUB 하나로 통일되고 있다. 국내의 거의 모든 유통사가 EPUB을 선택했고, 아마존을 제외한 애플, 구글, 반즈앤노블, 코보, 토리노 등 세계 전자책 사업자들 역시 EPUB 선택했다. 아마존만 유일하게 강력한 시장지배력을 등에 없고 AZW, KF8이라는 독자적인 포맷을 사용하고 있다. 그런데 아마존이 사용하는 포맷도 EPUB과 유사한 형태로 바뀌고 있다.

1.2.1 화면 크기에 상관 없이 책을 볼 수 있다

스마트폰이 나오기 전에는 전자책을 볼 수 있는 기기가 많지 않았다. 컴퓨터 모니터 화면은 14인치, 15인치가 대부분이었고, 소수의 얼리어답터가 사용한 모바일 기기도 3.5인치~4인치가 대부분이었다.

지금은 전자책을 볼만한 사람들이라면 대부분 스마트폰을 쓴다. 스마트폰의 화면 크기는 3.5인치부터 5인치 이상, 태블릿까지 포함하면 10인치가 넘어가는 것도 있다. 그리고 컴퓨터 화면 크기도 10인치부터 30인치가 넘는 것까지 다양하다.

10년 전에는 전자책을 만들 때 3.5인치, 4인치, 14인치, 15인치에만 맞추면 됐기 때문에 PC 사용자를 대상으로 한 업체는 PDF로, 작은 화면 사용자를 대상으로 한 업체는 텍스트로 서비스했다. 그런데 지금은 화면 크기가 수백 개가 넘는다. 크기가 다르고, 가로 세로 비율이 다르고, 같은 크기라도 해상도가 다르다. 화면 크기가 10개도 되지 않을 때는 화면 크기에 맞게 전자책을 만들었지만 지금은 불가능하다.

EPUB은 이런 문제를 해결한다. 종이책처럼 글자 크기나 위치가 고정되지 않고 화면 크기에 따라 자동으로 바뀐다. 이것이 만들기 쉽고, 종이책과 똑같은 모양으로 보이는 PDF 대신 EPUB을 쓰이는 이유다.

EPUB은 화면 크기에 따라 글자 크기, 이미지 크기가 자동으로 바뀐다.

PDF는 화면 크기에 따라 확대/축소가 되기 때문에 작은 화면에서는 글자를 읽기 어렵다.

<그림01>EPUB과 PDF 파일 비교(img001_EPUB PDF 비교 01~06.png)

1.2.2 표현력이 풍부하다

책 편집은 이미지와 텍스트를 배치하는 것 이상의 의미를 지닌다. 책에 따라 글자 크기나 색, 이미지의 위치, 글상자와 글상자의 배경색 등 모든 편집 요소가 책의 내용이 되기도 한다. 글자색이 바뀌거나 배경이 바뀌면 똑같은 문장도 다른 의미를 띠게 될 때가 있다. 똑같은 이미지라도 왼쪽에 배치하느냐 오른쪽에 배치하느냐에 따라 이미지의 느낌이나 독자에게 전달하려는 의미가 달라질 수 있다. XML이나 텍스트 기반의 전자책 파일 형식은 이런 점에서 표현력이 부족했다.

EPUB은 HTML과 CSS를 그대로 사용한다. EPUB 2에서는 HTML 4와 CSS 2를, EPUB 3에서는 HTML5와 CSS3를 지원한다. 웹페이지에서 보여줄 수 있는 형태의 편집이라면 EPUB도 할 수 있다. 다시 말해 출판 편집자가 많이 쓰는 인디자인이나 쿽으로 표현할 수 있다면 EPUB으로도 표현할 수 있다는 의미다.

EPUB은 이보다 한 발 더 나아가 종이책에서는 표현할 수 없는 것을 표현할 수 있다. 한 페이지에 사진 수백 장을 담을 수 있고, EPUB으로 된 문제집을 푸는 학생은 정답을 확인하려고 답안지를 볼 필요가 없다. [정답 확인] 단추를 누르면 자동으로 채점하고 틀린 문제의 해설을 볼 수 있다. 종이책으로 토익 공부를 하려면 MP3 플레이어가 필요하지만 EPUB은 파일 안에 MP3를 담을 수 있다.

이 두 가지 특징 외에도 알아둬야 할 점들이 몇 가지 있다.

1.2.3 페이지가 고정되지 않는다

많은 사람이 ‘20페이지 셋째 줄에 오타가 있어요’라며 EPUB서 발견한 문제점이나 오타 수정을 요청할 때 페이지를 얘기해 준다. 어떤 사람은 ‘80페이지에 있는 좋은 문장을 종이책에서 찾아봤는데 같은 페이지에 전혀 다른 내용이 있다. 전자책이 파본 아니냐’라는 얘기를 하는 사람이 있다. 작가 10명 중 9명은 전자책 오류를 지적하며 ‘몇 페이지 몇 번째 줄에 오타가 있다’고 말한다. 이 모습은 출판 편집자라고 크게 다르지 않다. 여전히 많은 편집자가 가로세로 비율을 종이책처럼 4:3으로 맞춰달라거나 한 페이지에 들어가는 글자 수, 한 줄에 들어가는 글자 수를 맞춰달라고 요구한다. 종이책으로 300페이지인 책이 1,500페이지짜리 전자책으로 나오면 이유를 묻기도 한다.

EPUB은 화면 크기에 따라 한 화면에 표시되는 글자 수가 달라진다. 종이책은 한 페이지에 담긴 글자가 옆 페이지로 옮겨갈 일이 전혀 없지만 EPUB은 화면 크기가 작아지면 2페이지에 있는 글자가 4페이지로 옮겨갈 수 있다. 300페이지짜리 종이책은 아이패드에서는 200페이지가 되고, 아이폰에서는 1,000페이지가 된다. 내 아이패드에서는 200페이지짜리 책이 눈이 안 좋은 친구의 아이패드에서는 400페이지가 되기도 한다.

종이책 편집자들에게 페이지는 아주 중요하다. 한 페이지 차이로 좌우 페이지가 바뀌고, 인쇄할 때 8페이지씩 늘어나거나 줄어들기도 한다. 오타가 ‘20페이지 셋째 줄’에 있다고 알려주지 않으면 첫 페이지부터 읽어야 한다. 그래서 페이지가 의미 없는 전자책에서도 페이지를 찾는지도 모르겠다. 하지만 전자책을 편집하려면 페이지에 대한 집착을 버려야 한다.

1.2.4 독자가 편집할 수 있다

모 출판사에서 아주 정성 들여 전자책을 만들었다. 다른 출판사보다 전자책에 정성을 기울이는 곳이었다. 이 출판사는 전자책용 폰트를 사고 768*1024(가장 많이 사용되는 종이책 비율인 3:4) 판형에 최적화했다. 종이책의 느낌을 최대한 전자책에 담아보겠다고 노력했다.

독자는 출판사의 이 노력을 느꼈을까. 내 경험상 독자는 출판사의 노력을 거의 느끼지 못한다. 같은 책이라도 어느 기기로 읽느냐에 따라 가독성이 달라지기 때문이다. 전자책을 읽는 독자는 글꼴, 여백, 배경색, 줄 간격 등을 바꿀 수 있다.

아이패드에서 가독성이 좋은 글꼴로 전자책을 만들었다고 하여 이 글꼴이 아이폰에도 최적이라고 장담할 수 없다. 전자책을 볼 수 있는 기기의 화면 해상도는 600*800부터 2160*3840까지 다양하다. 편집자가 모든 디스플레이에서 선호도가 제각각인 독자 모두를 만족할 글꼴을 찾아냈다면 모를까, 독자는 책을 펴는 순간 입맛에 맞게 설정을 바꿔버린다.

전자책의 편집은 종이책 편집과 다르다. 종이책은 편집자가 만든 그대로 독자들이 봐야 하지만 전자책은 독자가 원하는 형태로 편집을 바꿀 수 있으므로 책을 편집할 때에도 이런 점들을 고려해야 한다. 종이책처럼 보이는 전자책을 만들고 싶다면 10인치 태블릿에서 보기 편한 PDF나 Fixed Layout³⁾[각주:3] EPUB을 만드는 방법밖에 없다.

1.3 EPUB의 구조

EPUB 파일은 [전자책.epub]처럼 파일 하나로 되어 있다. 그렇지만 EPUB은 파일 여러 개를 하나로 모은 압축파일이다.

EPUB 파일은 책가방과 구조가 비슷하다. 학교 다닐 때 들고 다녔던 책가방을 상상해 보자. 책가방 안에는 책과 필통, 그리고 학습에 필요한 여러 가지 도구들과 스마트폰이나 MP3 플레이어(나와 비슷한 나이라면 워크맨과 CD플레이어)가 들어있다. 넓은 공간에 이 모든 게 다 들어가는 책가방도 있지만, 책을 넣는 공간, 공책을 넣는 공간, 자나 콤파스 같은 도구들을 넣는 공간이 나뉘어 있기도 하다. 책가방을 열어 책가방 안에 있는 책, 필통, MP3 플레이어를 꺼내 책상 위에 올려놓을 수 있다. 이를 모두 챙겨 책가방 안에 넣고 가방 뚜껑을 닫으면 ‘책가방’ 하나가 된다. EPUB도 비슷하다.

[전자책.epub]이라는 파일은 책가방 역할을 한다. [전자책.epub]이라는 파일 안에는 chapter001.xhtml처럼 책의 본문이 담긴 파일과 본문의 글자 모양인 Batang.ttf(글꼴 혹은 폰트), 본문의 모양새를 정해주는 style.css, 표지나 본문 속에 담겨있는 이미지(cover.jpg) 파일들이 들어있다. 이 파일들을 [전자책.epub]에서 꺼내면 이미지는 이미지대로, 글꼴은 글꼴대로, 본문은 본문대로 모두 열어볼 수 있다.

<그림02>EPUB 파일의 구조(img002_EPUB 파일 구조.png)

[전자책.epub]을 여는 방법은 아주 간단하다. 컴퓨터를 만져본 사람이라면 압축파일(zip)을 한 번쯤은 사용해 봤을 것이다. 파일 여러 개를 하나로 묶어 이메일에 첨부하거나 사진 수백 장을 보관할 때 [압축파일.zip]이라는 압축파일을 만들어 사용한다. [전자책.epub] 파일도 [압축파일.zip]과 같은 압축파일이다.

[전자책.epub]이라는 파일 이름을 보면 [전자책]이라는 부분과 [epub]이라는 부분이 있다. [전자책]에 해당하는 앞부분을 파일명이라 하고 [epub]에 해당하는 뒷부분을 확장자라고 부른다. 파일명은 사용자가 원하는 이름을 붙일 수 있지만 확장자는 파일의 성격에 따라 음악(MP3), 동영상(AVI, MP4), 이미지(JPG, PNG), 폰트(TTF, OTF) 처럼 정해진 규칙을 따라야 한다. 만약 음악파일(MP3)의 확장자를 이미지 파일(JPG)로 바꾸면 두 파일의 성격이 달라 파일을 열 때 오류가 발생한다. 그런데 일부 확장자는 파일의 성격이 똑같은데 역할이 달라 확장자가 달라지는 경우가 있다. EPUB 파일이 그런 파일 중 하나다.

전자책 파일 형식인 EPUB은 epub이라는 확장자를 붙여야 하고, 압축파일은 ZIP이라는 확장자를 붙여야 한다. 그런데 epub이라는 확장자가 붙은 파일은 압축파일인 ZIP과 성격이 똑같다. 그래서 epub이라는 확장자를 zip으로 수정하면 압축프로그램으로 파일을 열 수 있다.

EPUB파일을 압축프로그램으로 열어 압축을 풀면 여러 개의 폴더와 파일을 볼 수 있다. 각 파일과 폴더별로 고유의 역할이 있고 몇몇 파일과 폴더들은 EPUB 파일 안에 반드시 있어야 한다. 각 폴더와 파일을 하나씩 살펴보자.

<EPUB을 구성하는 필수 파일과 폴더>

EPUB3에서는 EPUB2에서 사용하던 TOC를 없애고 Navigation이라는 HTML 기반의 목차를 사용한다. Navigation은 일반 HTML 파일과 동일하게 편집을 하면 되지만 목차 목록을 정리하기 위해서는 <ol>과 <li> 태그를 사용하게 된다. <ol><li> 태그는 목록 편집을 간편하게 해 주지만 기본 스타일이 정해져 있어 원하는 글머리 숫자가 붙고, 하위 목록은 들여쓰기가 된다.(참고 : http://epubguide.net/27)

아래에서는 목록에서 유용하게 사용할 수 있는 스타일을 설명하도록 하겠다.

1. 글머리 없애기

글머리가 자동으로 붙으면 편할 수도 있지만 편집에 제약이 생긴다. 글머리 스타일을 없애고 편집자가 직접 글머리를 붙이고 싶을 때 사용할 수 있는 스타일이다. ol 태그에 직접 스타일을 적용하면 스타일이 적용된 페이지의 모든 글머리가 사라진다. 목차 같은 특정 항목에만 글머리를 없애려면 클래스를 지정해서 스타일을 적용한다.

2. 들여쓰기 간격 조절

글머리 스타일은 기본으로 왼쪽 여백이 지정돼 있다. 편집자가 여백을 조절하고 싶다면 ol 태그에 padding을 0으로 준다. 그러면 기본으로 설정되어 있는 여백이 사라진다. 이후 사용자가 원하는 만큼 왼쪽 여백을 li 태그에 지정해서 사용할 수 있다.

이렇게 ol 태그에서 padding을 0으로 설정하고 li 태그에 margin-left를 1em 설정하면 기본 여백 대신 단계별로 1em씩 여백이 생긴다. margin 대신 margin-left를 사용한 이유는 margin을 사용하면 상하좌우 여백이 함께 지정되기 때문에 상하 간격도 벌어지기 때문이다. 필요에 따라 margin,margin-left 등을 선택해서 사용하면 된다. li 태그에 margin-left를 1em 적용하면 하위 목록으로 내려가면서 보두 1em 씩 여백이 생기고, .nav_li 처럼 클래스를 지정하면 클래스가 지정된 항목에만 1em의 여백이 적영된다.

참고로 padding을 0으로 하고 다른 여백을 두지 않으면 글머리는 아래처럼 기본 영역 바깥에 위치하기 때문에 기본으로 붙는 글머리가 표시되지 않을 수 있다. 그렇기 때문에 padding을 0으로 설정할 때는 list-style-type : none;을 함께 지정하기를 권한다.

* ol 스타일 중 일부는 브라우저에 따라 다르게 표현될 수 있습니다. 정확한 스타일 확인을 위해서는 PC브라우저를 이용하길 권합니다.