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

1. EPUB이란

2. EPUB 만들 때 이것만은

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

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

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

이번 회부터는 EPUB 제작에 필요한 HTML에 대해 알아본다. EPUB은 홈페이지를 만들 때 사용하는 웹 기술(HTML, CSS)을 사용한다. EPUB으로 책을 만든는 과정은 홈페이지에 책을 올리는 과정과 비슷하다.

다양한 편집 프로그램이 있고 편집프로그램이 제공해 주는 기본 편집 기능만 사용해 책을 만들 수 있다. 하지만 편집 디자이너가 인디자인으로 다양한 편집을 하듯이 전자책을 편집하기에는 기본 편집 프로그램이 부족하게 느껴질 것이다. 이때 간단한 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 제작에 많이 사용하는 태그 목록

구분	태그	설명
제목	<h1>제목</h1> * h1 ~ h6 사용 가능	부, 장, 절 등의 제목에 사용한다.
본문	<p>문단</p>	본문의 문단을 감싸는 태그다. 문단은 반드시 <p> 태그로 감싸야 한다.
	<br />	문단 내에서 강제로 줄바꿈이 필요할 때 사용한다.
강조/꾸밈	<sup>위첨자</sup>	각주나 미주 같은 주석표시에 많이 사용한다.
	<sub>아래첨자</sub>	H2O처럼 아래첨자를 표현할 때 사용한다.
	<strong>진하게</strong> <em>기울임</em> <u>밑줄</u> <mark>형광펜</mark>	본문 내 단어나 문장을 강조할 때 사용한다.
스타일	<span></span>	기능이 없는 태그지만 활용도가 높다. 스타일을 적용하거나 ID를 부여하는 등 다양한 용도로 사용된다.
그룹/글상자	<div></div>	여러 문단이나 태그를 그룹으로 묶어 스타일을 적용하거나 글상자를 만들 때 사용한다.
이미지	<img src="img.jpg" alt="설명“ />	이미지를 넣을 때 사용한다.
링크	<a href="링크 주소“>링크</a>	이미지나 글자에 링크를 연결할 때 사용한다. EPUB에서는 팝업 주석을 추가할 때 사용한다.

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

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

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

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

▷ 태그 사용법

<h1>h1은 가장 큰 제목에 사용합니다.</h1>

<h2>h2는 두번째 큰 제목에 사용합니다.</h2>

<h3>h3은 세번째 큰 제목에 사용합니다.</h3>

<h4>h4는 소 제목에 사용합니다.</h4>

<p>본문 글자 크기입니다.</p>

<h5>h5는 본문보다 글자 크기가 작습니다.</h5>

<h6>h6이 가장 작은 제목 태그입니다.</h6>

▷ 결과

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

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

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

시중에 유통중인 <p> 태그로 제목을 편집한 전자책

같은 책을 제목 태그를 이용해 한줄로 수정한 코드

<p>태그와 <h3>태그에 같은 CSS 스타일을 지정하면 뷰어에서 보이는 결과는 동일하다.

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

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

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

시중에 유통중인 <div>태그로 문단을 편집한 전자책

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

▷ 태그 사용법

<p>문단을 표현하는 태그입니다.</p>

<p>문단과 문단 사이는 뷰어(브라우저)의 설정에 따라 지정된 문단 간격이 있으며 CSS로 간격을 조절할 수 있습니다.</p>

▷ 결과

3.2.3 줄바꿈 태그 <br />

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

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

▷ 태그 사용법

<p>&lt;br /&gt;은 문단 내에서 줄을 바꿀 필요가 있을 때 사용한다. <br />HWP나 MS 워드에서 시프트(Shift)+엔터로 강제 줄바꿈을 하는 것과 같다. </p>

▷ 결과

3.2.4 강조/꾸밈을 위한 태그

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

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

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

▷ 태그 사용법

<p>sup는 윗첨자로 E=MC² 처럼 본문 글자의 위쪽에 붙고, sub는 아랫첨자로 H₂O 처럼 본문 글자의 아랫쪽에 붙는다.</p>

<p>태그를 반드시 제시된 용도로 사용할 필요는 없다. HTML^{(Hyper Text Markup Language)} 처럼 필요에 따라 다양하게 활용이 가능하다. </p>

▷ 결과

<참고>

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

기본 태그를 사용하면 불필요한 스타일이나 코딩을 줄여 편집 시간을 절약할 수 있다. 아래 예는 같은 편집을 기본 태그와 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로 속성을 변경할 수 있다.

▷ 태그 사용법

<p>본문에서 <strong>굵은 글씨</strong>나 <em>기울임 글씨</em>로 강조를 할 때는 강조용 태그를 사용한다.</p>

<p>단어나 문장에 <u>밑줄</u>을 긋거나 <mark>형광펜</mark> 스타일로 강조를 할 수도 있다.</p>

▷ 결과

<참고>

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

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 장에서 자세히 설명할 예정이다.

▷ 태그 사용법

<p>span 태그는 <span>기본 속성이 없고, 다른 태그 안에 제한 없이 사용할 수 있다.</span></p>

<p>span 태그에 속성을 지정하려면 <span style="color:blue;">style 속성을 사용</span>하거나 <span class="txt_color_red">클래스를 추가</span>해야 한다.</p>

▷ 결과

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

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

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

   

그룹으로 묶으면 여러 단락에 동일한 스타일을 적용할 수 있다.

그룹으로 묶지 않으면 단락마다 스타일을 적용해 편집 시간이 오래 걸린다.

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

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

▷ 태그 사용법

<div class="txt_box red">

<p>div 태그는 단락을 그룹으로 묶어준다.</p>

<p>그룹으로 묶어 글상자를 만들 수 있다.</p>

</div>

<div>

<p>div 태그는 기본 속성이 없어 CSS와 함께 사용한다.</p>

</div>

▷ 결과

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

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

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

▷ 태그 사용법

<p>이미지 태그는 이미지 경로를 지정하는 src와 이미지 설명을 포함하는 alt 속성을 반드시 지정해야 한다. </p>

<p><img src="sample.png" alt=""샘플이미지. ODPF 로고"></p>

<p>alt 속성은 이미지가 없거나 이미지를 표시할 수 없을 때 표시되는 설명이다.</p>

<p><img src="noimage.png" alt="이미지를 표시할 수 없을 때“></p>

▷ 결과

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

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

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

<a> 태그는 팝업 주석에 사용할 수 있다.

<참고>

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

▷ 태그 사용법

<p>링크를 클릭하면 <a href="https://www.imaso.co.kr/">마이크로소프트웨어 홈페이지</a>로 이동할 수 있다.</p>

<p>주석 처럼  <a name="special_location">특정 위치</a>에 링크를 걸기 위해 식별자(앵커)를 표시할 때도 사용할 수 있다.</p>

<p>URL 대신 #식별자를 이용하면 <a href="#special_location">특정 위치로 이동</a> 이 가능하다.</p>

▷ 결과

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