내맘대로의 EPUB 제작 가이드

인용에 사용하는 태그 : <cite> </cite>

<cite></cite> 태그는 문단 내에 영화나 책의 제목이나, 인용, 주석이 필요할 때 사용한다. <blockquote>가 독립된 문단으로 인용할 때 주로 사용한다면 <cite>는 단독으로 쓰이는 경우는 거의 없고 <p>태그 안에서 단어 등을 꾸밀 때 주로 사용한다. <cite> 태그의 기본 스타일은 기울임 글꼴이며 CSS에서 다양한 스타일을 지정할 수 있다.

◈ <span> </span>태그 문법◈

cite_tag_style_sample.html

인용에 사용하는 태그 : <blockquote> </blockquote>

<blockquote></blockquote> 태그는 문단 단위의 인용문에 사용한다. 인용문 같은 텍스트 편집은 CSS에서 클래스를 지정해서 사용할 수 있다. 하지만 HTML에서 기본적으로 제공하는 텍스트 편집 태그를 사용하면 태그 정리를 보다 깔끔하게 할 수 있다. 

<blockquote>는 별도의 스타일을 지정하지 않아도 대부분의 브라우저에서 본문 들여쓰기가 적용된다. CSS에서 스타일을 지정하면 다양한 편집 스타일을 적용할 수도 있다.

<blockquote>태그는 HTML과 XHTML에서 사용법이 다르다. HTML에서는 <blockquote> 인용 문구 </blockquote>로 쓸 수 있지만 XHTML에서는 반드시 <blockquote><p>인용 문구 </p></blockquote>처럼 태그 안쪽에 다른 태그를 추가해야 한다. 

◈ <span> </span>태그 문법◈

blockquote_tag_style_sample.html

□ 사용 가능한 속성

CSS 스타일을 적용해 주는 태그 : <span> </span>

<span></span> 태그는 문단 내에 특정 단어나 문장에 스타일을 변경해야 할 때 사용한다. <span></span>태그 자체는 아무 속성이 없어 단독으로 사용할 경우 문단에 아무런 영향을 주지 않고 <span style="color:red"></span> 처럼 스타일 속성과 함께 사용해야 한다. 

전자책을 편집할 때 가장 많이 사용하는 태그 중 하나로 CSS에서 정의한 속성으로 문서를 꾸밀 때 사용할 수 있다. 또한, 뷰어의 설정이 바뀌더라도 변경이 되면 안되는 스타일이 있을 경우 <span>태그로 인라인 스타일을 적용할 수 있다.

◈ <span> </span>태그 문법◈

span_tag_sample.html

□ 사용 가능한 속성

◈편집에 적용한 예◈

span_tag_style_sample.html

레이어, 그룹 태그 : <div> </div>

<div></div> 태그는 블럭을 지정해서 스타일을 적용하거나 레이어를 만들 때 사용한다. 

여러개의 문단에 동일한 스타일을 지정할 필요가 있을 때 각각의 문단에 스타일을 적용할 수도 있지만 여러개의 문단을 <div>태그로 묶어 한번에 스타일을 적용할 수 있다. 또한 테두리 여백과 색 등의 스타일을 지정하여 레이어를 만들 수도 있다. 아래 예제 박스가 <div>태그의 사용 예라고 할 수 있다.

일부 편집자들은 <div>태그를 문단 태그인 <p>태그를 대신해서 사용하기도 한다. 이는 아주 잘못된 습관이다. <div> 태그는 <p>태그나 <hx> 태그 등 텍스트에 사용되는 태그 없이 텍스트를 <div>태그를 묶어도 뷰어에서 택스트가 문제 없이 나타날 수 있다. 그리고 동일한 CSS스타일을 지정하면 <div>와 <p> 태그가 똑같이 표현될 수도 있다. 하지만 아무런 태그를 사용하지 않고 <br/>로 줄바꿈만 해도 아무 문제 없이 뷰어에 내용이 나타난다. 

<div>태그는 <p>태그보다 쓰임이 더 다양하다. <div>에는 위치를 지정하는 스타일이을 적용할 수 있다. 흔히 '레이어'라고 부르는,  화면의 어느 위치에든 배치할 수 있는 사각형 박스를 만들수 있는 것이다. 이런 특징 때문에 <div>태그를 이용하면 보다 다양한 편집을 할 수 있게 된다. 이미지 위에 텍스트를 올린다던가, 텍스트가 서로 겹치는 편집. EPUB3.0에서는 텍스트나 이미지를 터치해서 다른 위치로 이동시키는 등의 작업을 <div>태그로 처리할 수 있다. 아무런 스타일을 적용하지 않은 <div>와 <p>태그는 다른 점이 없어 보이지만, 뷰어는 <div>를 처리하기 위해 <p>보다 더 다양한 정보를 분석하기 때문에 목적에 맞게 사용해야 편집자가 원하는 표현을 보다 정확히 끌어낼 수 있다.

◈ <div> </div> 태그 문법 ◈

div_tag_sample.html

◈ 편집에 적용한 예 ◈

div_tag_style_sample.html

* 문법과 예는 복사해서 html 파일에 붙이면 결과를 확인할 수 있습니다.

* 첨부된 *sample.html 파일을 다운로드 해서 웹브라우저로 열어도 태그가 적용된 내용을 확인할 수 있습니다. 

문단 내 줄바꿈 태그 : <br />

밑줄 태그 : <hr />

문단과 문단은 <p></p> 태그로 구분이 된다. <p> 태그로 묶인 내용은 하나의 문단을 이루며 문단끼리는 줄바꿈이 된다. 워드에서 엔터를 쳐서 다음 줄로 내려가는 것과 동일하다. 문서 작성 중에 엔터를 치면 앞 문단과 '문단간격'이 벌어지고 들여쓰기가 되면서 새로운 문단이 시작된다. 그런데 문단 내에서도 줄바꿈이 필요할 때가 있다. 워드에서는 Shift+Enter를 쳐서 줄을 바꾼다. 문단 내에서 줄을 바꾸게 되면 문단 간격이 아닌 '줄간격' 만큼 간격이 벌어지고 들여쓰기가 적용되지 않는다. 

HTML에서 이런 역할을 하는 태그가 <br />태그다. <br />은 문단 내에서 줄을 바꿀 필요가 있을 때 사용한다. HTML은 엔터키로 줄을 많이 내리더라도 모두 무시하기 때문에  문단 내에서 줄을 바꿀 필요가 있을 때에는 <br />태그를 사용한다.

<hr />은 위쪽과 아래쪽을 구분할 때 사용한다. 문단과 문단 사이, 혹은 문단 내에서 가로로 줄을 그어 위쪽과 아래쪽을 구분할 수 있다. 

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

◈ <br /> <hr /> 태그 문법 ◈

br_hr_tag_sample.html

◈ 편집에 적용한 예 ◈

br_hr_tag_style_sample.html

* 문법과 예는 복사해서 html 파일에 붙이면 결과를 확인할 수 있습니다.

* 첨부된 *sample.html 파일을 다운로드 해서 웹브라우저로 열어도 태그가 적용된 내용을 확인할 수 있습니다. 

어떤 사람들에게는 너무나 명확해서 설명이 필요 없는 얘기지만, 여전히 많은 사람들이 PDF와 EPUB의 차이점, 장단점을 모르고 있습니다. PDF가 보기 더 좋은데 왜 전자책을 PDF로 서비스하지 않느냐는 사람도 있고, EPUB에서 좋았던 문장이 있어 페이지를 기억했다가 종이책에서 찾았더니 다른 내용이라고 불평을 하는 사람도 있습니다. PDF와 EPUB의 장단점을 한번에 설명할 수 있는 이미지를 먼저 보여드리겠습니다. 

왼쪽이 PDF이고 오른쪽이 EPUB입니다. 

왼쪽 이미지는 신문 지면을 그대로 이미지로 스캔한 것 같습니다. 반면 오른쪽은 신문 지면에서 텍스트만 뽑아냈습니다. 위 두 사진만 보면 PDF가 더 좋아 보일 수 있습니다. 그런데 왼쪽 이미지는 헤드라인조차 읽기 어려울 정도로 글자가 작습니다. 본문은 읽을 수 조차 없고요. 반면 왼쪽은 텍스트만 나열되어 있어도 무슨 내용인지 정확히 알 수 있습니다. 하지만 신문 지면과 달리 텍스트만 나열되어 있어 어떤 기사가 중요한지 알 수 없습니다.

PDF와 EPUB은 각각 장단점이 있습니다. POD를 고려하거나, 편집이 책의 중요한 요소인 경우, 다시말해 편집 자체가 책의 내용을 전달하는데 아주 중요한 역할을 하는 경우라면 EPUB보다는  PDF가 좋습니다. 주요 타겟이 8인치 이상의 태블릿을 사용하는 사람이라도 EPUB보다는 PDF를 권합니다. 반대로 무협지나 로멘스 소설처럼 편집 보다는 가독성이 더 중요하고, 전자책으로만 출간을 하거나 작은 화면에서 큰 화면까지 다양한 화면을 지원하고 싶다면 EPUB이 더 효율적입니다.

PDF와 EPUB의 장단점을 보고 자신이 만드는 콘텐츠에 더 적합한 포멧을 생각해 보시기 바랍니다. 물론 가장 좋은건 두가지 포멧을 모두 보유하고 있는 것이지요.

▶ PDF의 장점

① PDF는 책과 완전히 똑같습니다. PDF를 제본소에 맏겨 책과 동일한 재질로 인쇄하고 제본하면 책이 됩니다.(인쇄용 PDF와 PC에서 보기 위한 PDF가 차이가 있다는 점은 무시하고 넘어가겠습니다.) 그리고 종이책의 페이지와 동일한 페이지(지면에 적힌 페이지 기준)에 동일한 내용을 볼 수 있습니다. 

② 종이책의 편집이 그대로 살아 있습니다. 1번의 반복이지만 이점은 아주 중요합니다. 편집이 복잡한 잡지나 토익책 같이 여러 레이어가 복잡하게 들어간 편집도 그대로 살릴 수 있습니다. 

③ 다른 파일로 전환이 가능합니다. 다른 포멧도 마찬가지라고 생각할 수 있습니다. EPUB은 PDF보다 텍스트나 AZW(mobi)같은 포멧으로 전환하기 쉽습니다. 하지만 EPUB을 PDF로, 종이책과 동일한 형태의 PDF로 변환할 수는 없습니다. 위 신문 이미지를 보면 왼쪽의 지면에서 텍스트와 이미지만 뽑아 오른쪽의 텍스트 기사를 만들 수는 있지만, 오른쪽의 텍스트 기사만 갖고 왼쪽의 지면을 재구성하기는 매우 어렵습니다. 

④ 거의 모든 기기에서 특별한 설정 없이 파일을 열 수 있습니다. PDF는 아주 오래 사용되었고, ISO에서 문서 보관을 위한 표준으로 사용되기 때문에 거의 모든 기기에서 기본으로 지원을 합니다. 윈도우 PC나 리눅스, 유닉스, 맥OS 뿐 아니라 스마트폰, PMP, 심지어 디스플레이가 달린 MP3에서도 PDF를 지원하는 경우가 있습니다. 단, 열수 있다는 것이지 보기 편하다는 의미는 아닙니다. 

⑤ 만들기 쉽습니다. 오랫동안 사용된 포멧이다 보니 무료/유료로 제공되는 변환(인쇄)프로그램이 많이 있고, 원본 문서를 그대로 변환해 주기 때문에 2차 수정 작업이 거의 필요하지 않습니다. 인디자인이나 쿽에서 간단히 PDF로 출력을 할 수 있고, 이렇게 출력된 PDF는 인쇄용으로도 사용이 가능합니다. 물론 전자책용으로 사용하려면 해상도 등을 조정해야 하지만 인쇄용 PDF를 전자책용으로 전환하는 작업도 간단합니다. 

▶ PDF의 단점

① 화면 크기의 제약 받습니다. 이점이 PDF가 전자책의 메인 포멧으로 사용되기 어려운 d이유입니다. 일반적인 종이책 판형의 PDF는 10인치 크기의 아이패드나 안드로이드 태블릿으로는 보기 좋지만 5인치 미만의 스마트폰에서는 보기 어렵습니다. 전자책을 가장 많이 이용하는 디스플레이가 스마트폰인 점을 생각하면 PDF는 전자책 기본 포멧으로는 적합하지 않습니다. 

② 포멧 전환이 어렵습니다. 장점에서는 다른 파일로 전환이 가능하다고 했는데 상반되는 내용인 것 같습니다. 하지만 포멧 전환이 가능하다는 것이 전환이 쉽다는 의미는 아니지요. 출판 편집에서 많이 사용하는 인디자인이나 쿽 프로그램으로 PDF를 만들면 한 페이지에 많은 레이어가 들어가게 됩니다. 편집이 복잡할 경우 한 문단, 한 문장마다 레이어를 사용하는 경우도 있습니다. 그리고 2차, 3차 교정을 하면서 레이어 순서도 뒤섞이게 됩니다. 이런 PDF 파일을 텍스트로 전환하면 문단 순서가 뒤섞일 가능성이 높습니다. 그리고 쪽번호, 쪽제목 등이 매 페이지 마다 들어가고, 이미지 위치도 달라집니다. 이렇게 뒤섞인 텍스트는 프로그램으로 정리가 어려워 사람이 직접 수정을 해야합니다. EPUB이나 mobi 파일은 변환 프로그램으로 몇분이면 전환이 가능하지만  PDF를 EPUB으로 만들려면 간단한 책이라 하더라도 3시간 이상 걸립니다. 

③ EPUB과 비교해 용량이 큰 편입니다. 물론 안에 들어있는 콘텐츠의 속성에 따라 용량이 달라질 수 있지만 텍스트 중심의 PDF와 EPUB을 비교하면 PDF가 적게는 2배에서 10배 이상 큰 용량을 갖게 됩니다. 2~3년 전만 해도 모바일 기기에서  PDF와 EPUB을 다운로드하는 속도가 크게 차이났지만 최근에는 이런 문제가 거의 해결 되었습니다. 하지만 전자책 사업자라면 저장공간을 생각해야하니 그냥 무시할 수는 없습니다. 100mb로 해결할 수 있는데 1TB가 필요하게 될 수 있으니까요.

④ 다양한 형태의 전자책을 만들기 어렵습니다. PDF에도 스크립트를 넣어 문제의 답을 선택하면 맞았는지 확인해 줄 수 있고, DB와 연동해서 여러 정보를 입력받을 수 있습니다. 동영상이나 MP3도 추가할 수 있습니다. 하지만 만들기가 까다롭고 자유로운 표현은 어렵습니다. 

⑤콘텐츠의 편집이 고정되어 있습니다. 이는 편집자에게는 장점일 수 있지만 모바일 환경에 익숙한 사용자에게는 단점이 되기도 합니다. 책의 내용을 가장 잘 전달할 수 있게 편집된 책을 읽을 수 있다는 것은 장점인 대신 사용자가 원하는 글꼴이나 줄간격이 아닌 편집자가 정한 것을 그대로 봐야 한다는 것이 모바일이나 인터넷에 익숙한 사용자들에게는 단점이 될 수 있습니다. 

▶ EPUB의 장점

① 화면의 크기에 구애를 받지 않습니다. EPUB이 전자책 포멧으로 빠르게 자리를 잡는 가장 큰 이유중 하나입니다. 화면 크기에 따라 화면이 재구성 되고 글자 크기를 임의로 조절할 수 있기 때문에 다양한 디바이스에서 활용이 가능합니다. 

② 글꼴, 줄간격, 여백, 문단간격 등 보기 설정을 자유롭게 조절할 수 있습니다. 4인치 화면과 10인치 화면은 서로 다른 보기 설정을 제공해야 합니다. 4인치에 맞춰진 설정을 10인치로 보면 텍스트가 너무 빽빽하게 차서 가독성이 떨어집니다. 반대로 10인치에 맞춰진 설정을 4인치로 보면 글자 크기가 너무 작거나 줄간격이 넓어 역시 가독성이 떨어지게 됩니다. 그리고 개성이 다양한 독자들은 자기가 선호하는 글꼴로 독서를 원하기도 합니다.

③ 비교적 만들기가 쉽고 무료로 사용할 수 있습니다. 1번, 2번의 장점은  mobi 포멧에도 동일하게 적용됩니다. 하지만 mobi 포멧을 사용하기 위해서는 사용 권한(라이선스)를 먼저 얻어야합니다. EPUB은 사용 권한이 자유롭습니다. 그리고 인터넷 사용자들에게 익숙한 HTML을 기본으로 하기 때문에 만들기가 쉽습니다.

④ 다양한 형태의 전자책을 만들 수 있습니다. EPUB3.0은 HTML5를 기반으로 하며 멀티미디어, 스크립트, SVG 등 최근 추세에 맞춰 확장성이 강화되었습니다. 그래서 인터렉티브한 전자책을 만들 수 있고 이를 위한 기술들이 대부분 공개되어 있습니다. EPUB3.0을 통해 어플리케이션으로 제작을 해야하던 기능들을 전자책에 포함시킬 수 있다는 점은 전자책 시장에 큰 영향을 줄 것이라고 생각됩니다. 

▶ EPUB의 단점

① 종이책과 다릅니다. 전자책은 종이책과 독자나 선호 콘텐츠가 다르기 때문에 큰 문제가 되지 않을 수도 있습니다. 하지만 OSMU^[각주:1]를 고려하면 PDF에 비해 활용도는 낮습니다. PDF는 EPUB으로 전환이 가능하지만 EPUB은 PDF로 전환이 매우 어렵다는 점은 출판 편집자들에게는 아주 큰 단점이 됩니다. 

② PDF보다 제작이 어렵습니다. PDF는 추가 편집 없이 파워포인트, 워드, 엑셀 등으로 만든 자료를 프린터로 출력한 모양 그대로 생성할 수 있습니다. 인디자인이나 쿽으로 만든 종이책 인쇄용 편집파일도 PDF로 전환이 쉽습니다. 하지만 EPUB은 후보정 작업을 거치는 경우가 많습니다. 

③ 동일한 콘텐츠도 뷰어에 따라 다르게 보일 수 있습니다. 뷰어에 따라 허용하는 HTML이나 CSS 범위가 다릅니다. 책을 불러오는 속도에 초점을 맞춘 뷰어는 EPUB의 스타일을 무시하고 뷰어가 정한 스타일을 강제로 적용하기도 합니다. 그래서 편집자가 아무리 정성스럽게 편집을 하더라도 텍스트-이미지로만 표현되는 경우가 생길 수 있습니다. 그리고 사용자의 기호에 따라 글꼴, 줄간격, 여백 등을 자유롭게 조정할 수 있는 장점이 편집자에게는 단점이 될 수도 있습니다. 

④ 표준이 완성되지 않았습니다. EPUB은 표준화 작업을 하는 중이고, 이 작업이 짧은 시간 안에 끝날 가능성은 없어보입니다. 그래서 3번같은 문제가 계속 논란이 될 것으로 보입니다. 이미 애플에서 IDPF의 EPUB2.0 표준을 확장한 형태의 EPUB을 iBooks에서 제공하고 있고, IDPF에서 확정되지 않은 미디어파일이나 스크립트를 사용해서 EPUB3.0이라고 선전하는 경우도 있습니다. 그래서 성급하게 확정되지 않은 기술로 EPUB을 만들 경우 뷰어에서 제대로 보이지 않을 수 있습니다.