5. 편집하고 바로 읽는 EPUB 3

1. EPUB이란

2. EPUB 만들 때 이것만은

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

4. CSS, 전자책 편집의 시작과 끝

5. 편집하고 바로 읽는 EPUB 3

국내에 유통되는 전자책은 대부분 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를 살펴보길 바란다.