내맘대로의 EPUB 제작 가이드

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브라우저를 이용하길 권합니다. 

전자책을 보면 본문은 텍스트가 가득해서 스타일이 많이 필요할 것 같지 않지만 유통되고 있는 콘텐츠의 CSS를 확인해 보면 본문에 들어가는 스타일이 가장 많다. 본문을 편집하다 보면 주석이나 설명 문구, 단락의 소제목, 단어나 문장 강조 등 다양한 스타일이 필요하다. 

CSS를 만들 때 본문 스타일을 제대로 잡아주지 않으면 전자책 소스가 아주 지저분해 지게 된다. 편집자는 책을 보는 독자만 고려해서는 안되고 유통사의 뷰어에서 얼마나 가볍고 빠르게 열릴지, 오류 가능성은 없는지, 편집이 틀어지지 않는지 등을 모두 고려해야 한다. 그렇기 때문에 뷰어에 보이는 화면 뿐 아니라 태그와 스타일이 어떻게 적용되었는지도 확인을 해야 한다. 

이번 장에서는 전자책 편집시 가장 많이 사용되는 스타일을 깔끔하게 편집에 적용할 수 있는 CSS 스타일을 설명하도록 한다. 

* 아래에 설명한 스타일은 그대로 사용하기 보다는 원하는 스타일에 맞춰 스타일을 변경해 사용하기를 권한다.

1. 본문 기본 스타일

본문 기본 스타일은 문서 전체에 영향을 주는 스타일이다. 그렇기 때문에 가급적 간단한 스타일을 적용하는 것이 좋다. *는 모든 클래스를 대표한다. *로 설정한 스타일은 모든 하위 스타일에 적용된다. 여기서는 상하좌우 여백만 0으로 뒀다. 뷰어에 따라 기본 여백이 있기 때문에 책을 편집할 때 다시 여백을 주게 되면 여백이 너무 많아질 수 있어 여백을 0으로 두는 것이 좋다.

<p> 태그는 문단 태그로, 거의 모든 텍스트 편집에 사용한다. 제목과 일부 특수한 경우를 제외하면 모든 글자는 <p> 태그 스타일에 영향을 받는다고 말할 수 있다. 따라서 <p> 태그에는 가장 많이 쓰이는 스타일만 간단히 적용해야 한다. 

2. 기본 편집 스타일

2.1 들여쓰기 해제 스타일

본문 기본 스타일에 적용한 들여쓰기를 해제해야 할 때 사용하는 스타일이다. 이 스타일은 <p> 태그에 직접 적용하고 <sapn> 태그에 적용하지 않는다. 

2.2 오른쪽, 왼쪽 정렬 스타일

오른쪽, 가운데 정렬에 사용한다.

들여쓰기가 되어 있으면 들여쓰기가 된 지점부터 오른쪽 끝의 중간을 가운데로 보기 때문에 뷰어에서는 오른쪽으로 치우쳐 보인다. 그래서 화면 정 가운데에 맞추기 위해 가운데 정렬 스타일에 text-indent : 0;을 넣었다.

2.3 주석 관련 스타일

HTML의 기본 태그 중에 주석을 처리할 수 있는 태그가 많이 있다. 주석이 있음을 표시할 때는 윗첨자<sup>, 단어 옆에 괄호를 치고 간단한 설명을 추가하기 위해서는 <cite>나 <sub>를 사용할 수 있다. 그리고 이보다 많은 스타일이 필요하다면 클래스를 지정해 사용할 수 있다. 

주석 스타일이 여러개가 필요한 경우가 아니라면 HTML 태그 사용을 권한다. 아래 코드를 보면 HTML 태그를 사용했을 때 코드가 간결해 지는 것을 볼 수 있다.

2.4 문단 단위의 인용구

문단 단위의 인용구나 본문과 구분을 해야하는 단락에 사용하는 스타일이다. 본문과 구분을 두기 위해 여백, 글자색, 글자크기 등 다양한 효과를 줄 수 있다. 본문과 구분을 주기 위해 배경색, 문단 테두리 등을 적용하고자 할 때는 <div> 태그를 사용한 text_box 스타일을 참고하기 바란다. 

2.5 글자에 선을 긋는 스타일

글자에 취소선이나 밑줄을 그어야 할 때 사용할 수 있다. 이 중 txt_midline과 txt_underline은 각각 <del>, <ins>태그를 활용할 수 있다.

2.6 첫 글자

3. 본문 내어쓰기

워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다.

들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다. 

여백은 margin이 아니라 padding을 사용한다. margin과 padding의 차이는 http://epubguide.net/43 여기서 확인하기 바란다. 

margin이 아닌 padding으로 여백을 주는 이유는 글자가 테두리 안에 들어오는게 제대로 된 편집이기 때문이다. margin으로 내어쓰기의 여백을 설정하면, 눈에는 보이지 않아도 글상자 밖으로 글자가 나가게 된다. 

위에서 작성한 코드의 결과를 보면 이렇게 나온다. padding을 여백으로 설정하면 글상자 안에 글자가 들어가는데 margin으로 여백을 설정하면 글상자 밖으로 글자가 나온다. 테두리가 없으면 똑같이 보이지만 테두리가 보이면 차이를 알아볼 수 있다. 

기본 탬플릿은 말 그대로 가장 기본이 되는 스타일이다. 기본 탬플릿으로 전자책을 만들면 나쁘진 않지만 그저 그런 정도의 결과물 밖에 얻을 수 없다. 기본 탬플릿은 초콜릿을 만들 때 쓰는 몰드 역할을 한다. 프랄린의 모양을 예쁘게 잡아 주지만 초콜릿을 녹여 몰드에 넣고 찍어내면 아무 의미가 없다. 프랄린의 진짜 가치는 프랄린 안에 들어가는 필링(프랄린 초콜릿 안에 들어있는 부드럽고 다양한 맛을 내는 재료)에 있기 때문이다.

기본 탬플릿은 틀에 불과하다. 이 틀을 어떻게 변형시키느냐에 따라 다양한 스타일을 얻을 수 있다. 이번 챕터에서는 몇가지 예를 통해 기본 탬플릿을 활용하는 방법을 설명하려고 한다.

이 스타일은 이미지가 가로 가운데 정렬이 되고, 화면 크기에 맞춰 이미지가 확대된다. 그러나 세로는 항상 위쪽에 붙기 때문에 뷰어가 세로로 길어질 경우 이미지가 위쪽으로 치우치게 된다. 최근에 나오는 모바일 기기들은 3:4 비율은 거의 없고 9:16 이상의 비율을 갖는 경우가 많아 이미지가 위쪽으로 치우치면 좋아보이지 않는다. 그래서 상하 좌우 가운데 정렬이 되도록 하는 스타일을 소개한다. 이 스타일은 필자가 만든게 아니고 넥서스 출판사에서 만든 EPUB의 표지이미지 스타일을 참고한 것임을 밝힌다. 

예제2) 상하 좌우 가운데 정렬된 표지 이미지 스타일

* 표지 이미지를 화면에 가득 채우기 위해 페이지 전체 높이(height)를 100%로 줘야 한다. 그래서 html과 body에 스타일을 지정했다. 하지만 html과  body에 스타일을 지정하는건 표지에 한정되어 있기 때문에 인라인 스타일이나 내부 스타일로 지정을 하였다. 

2. 제목 스타일 꾸미기

책의 제목 스타일은 다양하다. 여기서는 시중에 판매되고 있는 책의 제목 스타일을 CSS로 어떻게 표현할 수 있는지 설명을 하려고 한다. 전자책을 종이책과 똑같은 스타일로 맞추는 것은 권하지 않는다. 전자책과 종이책은 각각의 특성이 있기 때문에 똑같이 만들기 보다는 특성에 맞춰서 독자들이 편하게 읽을 수 있도록 편집을 해야한다. 

여기서 책의 제목 스타일을 그대로 구현하는 것도 책 스타일을 전자책에 옮기려는 목적에 있는게 아니고 CSS 스타일을 어떻게 적용하는지 설명을 위해서일 뿐이다. 

예제1) 

* 100명 중 98명이 헷갈리는 우리말 우리문장 중에서

▷ 위 스타일에서 필요한 속성

1. 원형 테두리가 있는 장 번호 : border, radious, background-color

2. 필기체 스타일의 글꼴 : font-family

3. 점선 밑줄 : border-bottom

4. 가운데 정렬 : text-align

* 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다.  

필요한 스타일이 정해졌다면 CSS로 각 스타일을 정리하고 적절한 값을 찾는다.

위 제목 스타일을 적용하기 위해서는 2개의 스타일이 필요하다. 하나는 원형의 장 번호, 다른 하나는 제목 텍스트의 스타일이다. 원형의 장 번호를 이미지로 처리하면 텍스트에 필요한 스타일만 적요하면 된다. 

CSS만으로 원형 장번호에 말풍선처럼 화살표를 넣기는 어렵다.말풍선 화살표가 필요하다면 이미지를 배경으로 사용하는게 좋다.

예제2)

▷ 위 스타일에서 필요한 속성

1. 글자 색 지정 : color

2. 아래쪽 점선 : border-bottom

* 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다. 

예제3)

▷ 위 스타일에서 필요한 속성

1. 원 안에 든 글번호 : border, border-radious

2. 글번호 우측 정렬 : display : flex, flex-flow

2. 제목 줄 바꾸기 : display : block

3. 슬래시(/) 자동으로 넣기 : ::before

    * 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다. 

예제4)

아래 예제는 '예제3'에서 아래쪽에 본문과의 여백을 두는 스타일이다. 본문과 여백을 두는 스타일은 쓰임이 많기 때문에 따로 설명을 한다. 

▷ 위 스타일에서 필요한 속성

1. 여백 설정 : margin 혹은 margin-bottom

    * 제목이나 문단에 여백을 줄 때는 padding보다 margin을 사용하는 것이 좋다.

* 전자책은 스마트폰, 태블릿, PC 등 하나의 파일로 여러 기기에서 사용을 한다. 그래서 상하 여백을 둘 때 화면 크기를 고려해야 한다.

상하 여백을 비율(%, em)로 설정하면 화면 크기에 맞춰 간격이 조절된다. 아이패드 처럼 큰 화면에서는 상하 간격이 넓어지고, 스마트폰에서는 상하 간격이 줄어든다. 하지만 화면에 따라 간격이 항상 바뀌기 때문에 편집 의도와 다른 결과를 보여줄 수도 있다. 

상하 여백을 고정값(px)으로 적용하면 제목과 본문 사이의 간격이 일정하게 유지된다. 하지만 화면 해상도에 따라 간격이 크게 벌어질 수 있고, 화면 크기에 따라 차이가 심하게 날 수 있다. 

예제5)

아주 간단하지만 많이 사용하는 스타일이다. 본문과 다른 글씨체를 사용하고, 위와 아래 여백을 둔다. 주의해야할 점은 들여쓰기이다. 기본 설정으로 들여쓰기가 되어 있으면 제목에도 영향을 줄 수 있다. 그렇기 때문에 제목에 들여쓰기를 할 것인지 확인하고 들여쓰기가 필요 없다면 들여쓰기 스타일을 빼줘야 한다.

▷ 위 스타일에서 필요한 속성

1. 글꼴 : font-family

2. 들여쓰기 설정 : text-indent

3. 상하 여백 : margin 혹은 margin-top, margin-bottom

예제6)

아래같이 두단의 서로 다른 스타일 제목을 표현할 때는 <p> 태그로 묶은 후 다른 클래스로 스타일을 지정하는 방식을 많이 사용한다.

<p class="title_top">삶을 위한</p>

<p class="title_bottom">선택</p>

이렇게 표현을 하면 쉽게 스타일을 적용할 수 있는 반면, 제목 텍스트가 2개로 나뉜다는 문제점이 있다. 만약 이 페이지를 목차에 포함시키고 싶다면 어떻게 될까? 이 페이지의 목차는 '삶을 위한'이 된다. TOC를 수정한다 해도 권할 만한 방식은 아니다. 

▷ 위 스타일에서 필요한 속성

1. 글자색 : color

2. 줄바꿈 : display : block;

** 시간이 오래 걸려 정리되는 대로 공개를 하겠습니다. 아래쪽도 계속 채울 예정입니다. **

예제7)

제목이나 제목 번호에 이미지로 글번호를 넣는 방법은 두가지이다. 하나는 이미지별로 번호를 넣어 사용하는 방식이다. 별다른 스타일을 적용할 필요 없어 편하긴 하지만, 목차가 100개쯤 되면 파일 용량도 커지고, 이미지가 많아 편집 시간이 오래 걸릴 수 있다. 

다른 하나는 배경에 이미지를 넣는 방식이다. 배경으로 이미지를 넣으면 이미지는 하나만 사용하고, 번호에 맞는 이미지를 찾는 시간도 절약할 수 있다. 하지만 편집이 복잡해 질 수 있기 때문에 글자를 확대/축소할 때 틀어질 수 있다.

이미지별로 글번호를 넣는 방법은 간단하기 때문에 여기서는 이미지를 배경으로 넣는 방법을 설명하겠다. 

▷ 위 스타일에서 필요한 속성

1. 배경이미지 : background-image

2. div 글상자에서 글자 정렬 : position, left, top

예제8)

아래 제목은 아주 단순하기 때문에 특별히 스타일을 적용할 필요는 없다. 그런데 제목 앞에 별표(★)가 있다. 제목에 항상 이런 특수한 기호나 단어가 들어간다면 CSS로 간단히 처리하는 방법이 있다. 제목을 쓸 때마다 별표를 하지 않아도 자동으로 추가되고, 표시를 변경할 때도 CSS만 수정하면 된다. 

▷ 위 스타일에서 필요한 속성

1. 앞쪽에 기호나 문장 삽입 :  ::before

* 뒤쪽에 들어가는 기호나 문장은 ::after를 사용한다.

예제9)

아래처럼 제목 앞에 큰 이미지가 오고 이미지의 상하 중앙에 제목을 넣어야 하는 경우가 있다. 간단한 스타일이지만 복잡하게 생각하는 편집자들이 많이 있는 것 같다. div로 이미지를 감싸고 float을 써서 텍스트에 어울림 처리를 생각했다면 아래 스타일을 참고하기 바란다. 

▷ 위 스타일에서 필요한 속성

1. 이미지와 텍스트 상하 정렬 : vertical-align

예제9)

아래 같은 편집은 전자책에서는 아주 까다롭다. 스타일 자체는 복잡하지 않은데 화면 크기도 제각각이고 글자 크기가 변경되기 때문에 본문 한줄만 이미지 아래에 걸치게 조절하기가 어렵다. 아래 코드는 글자 크기에 따라 처음 몇줄이 이미지 위에 걸치도록  했다. 글자 크기에 따라 이미지 위에 걸치는 본문 줄수가 1줄 ~ 3줄 이상이 될 수도 있다.

▷ 위 스타일에서 필요한 속성

1. 이미지 왼쪽으로 글자 배치 : float : left;

예제9)

아래 제목은 제목 아래에 이미지로 된 선이 그어져 있다. 이런 경우 간단히 표현을 하려면 이미지를 포기하고 비슷한 색으로 밑줄을 그어 주는 방법을 이용할 수 있다. 만약 밑줄 이미지가 편집에 중요하다면 이미지를 테두리로 표현할 수도 있다. 

▷ 위 스타일에서 필요한 속성

1. 텍스트 길이에 맞춰 글상자 크기 조절 : display : table;

2. 테두리 이미지 : border-image

3. 테두리 밑줄 : border-bottom

* border-image : border-image는 글상자 테두리를 이미지로 그려주는 스타일이다. 

border-image:url(underline.png) 0 0 5 0 round;

   앞쪽부터 이미지 url, 위 오른쪽 아래 왼쪽 테두리, 이미지 적용 방식으로 값을 지정한다.