내맘대로의 EPUB 제작 가이드

전자책을 만들다 보면 상자 안에 문단이나 본문을 넣어 다른 내용과 구분을 해야 할 때가 있다. 이 글에서도 코드는 본문과 구분할 수 있도록 네모난 글상자를 만들고 그 안에 코드를 작성한다. 상자를 만드는 방식에는 테두리와 글상자가 있다(테두리, 글상자는 설명을 돕기 위해 임의로 정한 이름임). 테두리는 텍스트 주위에 선을 그어 네모난 상자를 만드는 것이고, 글상자는 네모난 개체를 만들고 그 안에 텍스트를 채워 넣는 방식이다. 테두리는 텍스트에 종속되기 때문에 텍스트가 사라지면 테두리도 함께 사라지지만, 글상자는 텍스트와 독립돼 있는 완성된 개체기 때문에 텍스트가 없어도 글상자는 사라지지 않는다. 

▶ 테두리 예제

테두리는 문단 주위에 선을 그리는 것으로 문단과 하나로 움직인다. 문단 내용이 사라지면 테두리도 함께 사라진다.

▶ 글상자 예제

테두리와 글상자 예제를 보면 결과가 동일하고 테두리를 그리기 위해 사용하는 CSS 속성도 같다. 다만 테두리는 <p>태그에 바로 속성을 적용하고, 글상자는 <div>태그에 테두리를 적용한 후 그 안에 <p>태그를 넣은 차이만 있을 뿐이다. 

테두리는 한 문단을 상자 안에 넣을때 간단하게 사용할 수 있다. 위 예에서 처럼 자주 반복되지 않고 한 문단으로 끝나는 상자를 만들 때 테두리 클래스를 만들어 두면 편집을 쉽게 할 수 있다.

글상자는 한번에 여러 문단에 테두리를 치거나 반복적으로 테두리를 적용해야 할 때 사용할 수 있다. 이 문서에서 태그를 표현하기 위해 자주 사용하는 테두리는 모두 글상자로 만들었다.

▶ 테두리와 글상자 비교

테두리는 한 문단씩 적용된다

테두리는 한 문단씩 적용된다

테두리는 한 문단씩 적용된다

테두리를 이용하면 한 문단을 상자에 넣을 수 있지만 여러 문단을 넣을 수는 없다. 반면 글상자는 <div>태그로 여러 문단을 하나의 상자에 넣을 수 있다. 테두리와 글상자는 쓰임이 다르기 때문에 전자책을 편집할 때 필요에 따라 선택해서 사용하면 된다. 

글꼴(폰트) 속성은 텍스트 속성에 포함될 수 있지만 부가적인 설명이 필요해서 별도로 정리한다.

글꼴 속성은 크게 두 부분으로 이루어진다. 하나는 글꼴 자체를 지정하는 @font-face, 그리고 글꼴을 꾸미는 font-family, src, font-style 속성 등이다. font-face 앞에는 @ 표시가 붙어 다른 속성과 구별된다.

@font-face는 사용할 글꼴의 위치와 글꼴의 이름을 정하고 글꼴에 부가적인 속성(스타일, 두께)을 지정하는 속성이다. @font-face에 사용할 수 있는 하위 속성으로 글꼴 이름과 위치를 지정하는 font-family,src와 글꼴에 속성을 부여하는 font-style, font-weight 등의 부가 속성이 있는데 한글 글꼴에는 적용되지 않는 경우가 많아 부가적인 속성은 거의 사용하지 않는다. 

CSS 파일에는 1개 이상의 @font-face가 올 수 있다. 여러개의 글꼴을 사용하는 책이라면 사용하는 글꼴 갯수만큼 @font-face가 와야한다.

font-family는 글꼴의 이름을 정하는 속성이다. 많은 편집자들이 글꼴의 이름을 글꼴 파일 이름과 동일하게 지정하는데 이는 고쳐야 할 습관이다. 보다 명확한 CSS를 만들기 위해서는 글꼴의 이름만 봐도 어떤 목적으로 사용되는지를 알 수 있도록, 혹은 어떤 글꼴인지 명확히 알 수 있도록 이름을 지어야 한다. 

예를 들어 코펍폰트로 전자책을 만든다고 하면 

@font-face {

font-family :kopubbatangmedium; 

src : url(kopubbatangmedium.ttf); }

처럼 글꼴 명을 그대로 적을 경우 폰트 이름도 길어질 뿐 아니라 무슨 용도로 사용하는지 파악하기도 힘들다. 

책을 만들때 바탕체를 은바탕, 나눔바탕, 코펍바탕 등 서로 다른 글꼴을 쓰는 경우는 드물기 때문에 아래처럼 간단하게 이름을 정하는게 더 명료하다.

@font-face {

font-family :바탕; /* 혹은 '코펍바탕' 처럼 어떤 폰트인지 알 수 있게 해도 좋다 */

src : url(kopubbatangmedium.ttf); }

글꼴 이름을 사용 목적에 맞게 지정하는 것도 좋다. 만약 제목, 본문, 주석 3개의 글꼴을 사용하고 서로 섞어 쓰지 않는다면 글자 그대로 "본문 글꼴", "제목글꼴", "주석 글꼴" 처럼 사용 목적에 따라 이름을 지정해도 된다. 단, 글꼴 이름을 정할 때 띄어쓰기를 한다면 반드시 따옴표("본문 글꼴")로 묶어 하나의 글꼴 이름이라는 것을 표시해야 한다. 

@font-face {

font-family :"본문 글꼴"; /* 띄어쓰기를 한다면 반드시 따옴표로 묶어준다. */

src : url(kopubbatangmedium.ttf); }

src : url(글꼴 파일 경로)은 사용하고자 하는 글꼴 파일의 경로를 정해주면 된다. CSS 파일과 글꼴 파일이 같은 경로에 있다면 글꼴 파일명을 넣어주면 되고 서로 다른 경로에 있다면 글꼴 파일이 위치한 경로를 입력해 주면 된다. EPUB은 콘텐츠 파일이 있는 OEBPS 폴더가 루트(root)폴더다. 만약 글꼴 파일 위치가 [ EPUB > OEBPS > Fonts >글꼴.ttf ]라고 한다면 경로는 [ ../Fonts/글꼴.ttf ]가 된다.

글꼴은 OTF, TTF, WOFF 등 여러 종류가 있는데 가급적이면 OTF나 TTF 글꼴을 사용하도록 하고 용량이 큰 묶음 글꼴보다는 용량이 작은 개별 글꼴을 사용하는게 좋다. 나눔글꼴이나 코펍폰트 등은 Bold, Medium, Light 등을 폰트 하나에 넣지 않고 개별 폰트로 나눴다. 전자책은 용량이 낮은 사양의 기기부터 PC까지 다양한 환경을 지원해야 하기 때문에 저사양의 기기에 맞춰 제작해야한다. 

font-family는 @font-face에서도 사용하지만 선택자에서도 사용된다. @font-face에서 사용할 때는 글꼴의 이름을 지정할때 쓰이고 선택자에서 사용할 때는 지정된 이름의 글꼴을 적용하기 위해 사용한다. 

만약 font-family로 글꼴을 지정했는데 @font-face에서 이름을 정하지 않았다면 기본 글꼴이 지정된다. 기본 글꼴 중에 시스템에서 이름이 지정된 경우도 있다. 굴림, 바탕 등은 시스템에 동일한 글꼴 이름이 있을 경우 @font-face에서 지정하지 않아도 적용될 수 있다. 다만 시스템에 따라 큰 차이가 있기 때문에 @font-face로 이름을 지정한 후 font-family를 사용하는게 좋다.

font-size는 글꼴의 크기를 지정할 때 사용한다. font-size에는 em, %, px 등의 값이 올 수 있다. 하지만 글꼴의 크기를 뷰어의 설정에서 조정하는 경우가 많기 때문에 크기를 변경할 수 있는 가변 사이즈(em, %) 사용을 권장한다. 뷰어에 따라 처리하는 방식이 다른데 일부 뷰어는 강제로 px를 뷰어 설정에 맞추는 경우가 있고, px는 글자 크기를 변경하지 않을 수도 있다. 그래서 px를 사용하게 되면 일부 글자가 아주 작거나 아주 크게 나올 수 있다. 

1em과 100%는 기기의 기본 글꼴 크기에 맞춰진다. 1em이나 100%를 기준으로 하면 크기나 해상도에 관계 없이 가독성이 보장된다. 하지만 px로 크기를 맞추면 5인치의 고해상도 기기에서는 글자가 아주 작게 표현되고, 10인치의 저해상도에서는 글자가 아주 크게 표현되는 등 일정한 크기를 보장할 수 없기 때문에 글자 크기가 내용에 직접적인 영향을 주는 경우가 아니라면 px는 피하는게 좋다.

이 두 속성 외에 글꼴을 꾸며주는 몇가지 속성이 있는데 한글 글꼴에서는 사용하지 않는다. 그리고 한 글꼴에 medium, light, bold 등 여러 서체가 들어가면 글꼴 파일의 용량이 커져 파일 하나에 하나의 속성만 넣어 글자 용량을 줄인 글꼴 파일을 많이 사용해서 font-weight 속성을 적용해도 본문에서 변화가 없는 경우가 많다. 모든 기기에서 동일한 스타일로 보이도록 하고 싶다면 이런 속성은 피하는게 좋다. 

CSS 속성은 170여개가 넘는다. 글자, 링크, 테이블, 테두리, 이미지 등 본문에 사용할 수 있는 모든 요소들에 맞는 CSS가 존재한다. 모든 CSS의 사용법은 수십년간 웹퍼블리싱을 전문으로 하는 사람이 아니라면 알기 어렵다. 그리고 전자책을 편집하기 위한 속성은 그리 많지 않다. 여기서는 전자책을 편집하는데 많이 사용되는 속성과, 각 속성을 템플릿에 어떻게 적용하면 되는지를 설명하려고 한다. 

1. 글자를 꾸미는 속성들

text-indent는 들여쓰기를 하는 속성이다. 값으로는 1em; 10%; 5px; 등이 올 수 있는데 em;을 권한다. em;은 현재 사용하고 있는 폰트의 1글자 크기다. 그래서 글자 크기를 키우거나 줄여도 들여쓰기 간격이 문단과 잘 어울린다. %를 사용하면 화면 크기에 따라 들여쓰기 폭이 크게 변하고 px는 해상도에 따라 의도한 간격과 크게 차이날 수 있다.

text-indent는 마이너스 값을 적용할 수 있어 내어쓰기를 할 때도 사용할 수 있다. 아래처럼 값을 마이너스 값을 넣으면 내어쓰기로 표현된다. 하지만 내어쓰기를 할때는 반드시 여백(padding)을 반드시 지정해야 한다. 테두리가 없으면 margin과 padding의 차이를 구분할 수 없어 margin을 쓰는 경우가 있는데 margin을 지정하면 테두리 밖으로 글자가 나가기 때문에 잘못된 편집이다. 

padding으로 왼쪽 여백을 2em(두글자 정도의 여백)을 두고 들여쓰기를 -1em을 지정하면 들여쓰기가 된다. em을 사용한 이유는 화면 크기나 글자 크기가 바뀌어도 해당 글자에 맞춰 여백이 지정되기 때문이다. 

padding 대신 margin을 사용하면 글상자의 배경이나 테두리를 그렸을 때 글자가 글상자 밖으로 나가는 것을 볼 수 있다. 

여백을 적용하지 않으면 글자가 뷰어 화면 밖으로 나가 글자를 읽을 수 없게 된다. 

color는 글자색을 지정할때 사용한다. 값으로는 색상 이름(red, blue, green 등), 16진수 코드(#FFFFFF), RGB(rgb(255,255,255), HSL(0-360 혹은 0% ~ 100% 사이의 값) 등을 사용할 수 있는데 16진수 코드나 색상 이름을 가장 많이 사용한다. 

# 참고 : 컬러 테이블

text-align은 문단 정렬에 사용하는 속성이다. 글자 뿐 아니라 이미지 등의 다른 요소들에도 적용할 수 있다. text-align은 3가지 값을 가질 수 있다.

line-height 속성은 줄간격을 조정할 때 사용한다. 필요에 따라 글자 겹침 등으로 활용할 수 있다. 사용할 수 있는 값은 1, 2, 3 같은 숫자, em; %, px가 있다. 

아래처럼 line-height의 값을 0으로 두거나 1보다 작게 하면 줄간격을 줄여 글자 겹침 효과를 낼 수 있다.

letter-spacing과 word-spacing은 글자 사이, 단어 사이의 간격이다. letter-spacing은 글자, word-spacing은 단어 사이의 간격을 조절한다. 

● letter-spacing 적용 예

● word-spacing 적용 예

letter-spacing은 개별 글자의 간격이 조정되고 word-spacing은 글자 사이의 간격은 변경되지 않고 단어와 단어 사이의 간격만 조절되기 때문에 필요에 따라 사용하면 된다. 

text-decoration은 단어나 텍스트에 밑줄이나 윗줄을 긋고 싶을때 사용할 수 있는 속성이다. 이 속성은 overline, underline, line-through 세 값 중 하나를 선택할 수 있다.

HTML 태그 중 <del></del>이 line-through와 같은 효과를 내지만, del은 특정 목적을 갖는 태그이기 때문에 텍스트에 줄을 긋기 위해서는 사용하지 않는게 좋다. 밑줄을 긋는 <u></u> 태그는 HTML5에서는 속성이 재정의되었기 때문에 역시 사용하지 않는게 좋다.

이 외에도 아래의 속성들을 텍스트를 꾸밀 때 사용할 수 있다.

CSS는 하나의 선택자에 여러개의 속성을 정의한 스타일의 묶음이다. 그리고 이 스타일의 묶음을 하나의 파일로 묶어 CSS 파일을 만들 수 있다. CSS 파일로 만든 스타일의 묶음을 앞으로는 CSS 템플릿이라고 하겠다. CSS 템플릿은 하나만 만들어 두면 모든 전자책에 사용할 수 있다. 문학전집처럼 같은 유형의 책이면 편집 스타일이 비슷하기 때문에 템플릿 하나로 동일한 편집 스타일을 유지하며 작업할 수 있고, 소설과 인문처럼 분야가 다르더라도 책의 구성 요소는 크게 차이나지 않아 스타일 속성만 변경하면 전혀 다른 느낌의 편집을 적용할 수 있다.

CSS 속성은 종류가 170가지가 넘어 모두 설명하기는 어렵다. 여기에서는 전자책 편집에서 많이 쓰이는 CSS를 중심으로 설명하고 여기서 설명하지 않은 속성이 필요하다면 책이나 w3c 등 웹사이트를 참고하기 바란다.

CSS를 만드는데 정해진 규칙은 없다. 기술적으로 문제가 없다면 만드는 사람이 원하는 형태로 만들면 된다. 혼자 사용하는 CSS라면 어떤 형태로 만들어도 문제되지 않는다. 하지만 템플릿 형태로 CSS를 만들어 반복해서 사용하거나 여러사람이 공동으로 사용하는 CSS라면 최대한 이해하기 쉽게 만들어야 한다. 

전자책을 편집할 때 가장 많이 사용하는 태그는 제목에 쓰이는 <h1> ~ <h6>과 <p>태그다. 이 외에 주석이나 설명을 위한 스타일이 필요하다면 이 역시 태그를 이용하는게 좋다. 많은 EPUB 편집자들이 태그보다는 클래스를 많이 사용한다. 하지만 클래스를 사용하려면 태그 내에 클래스를 적용해야 하기 때문에 편집이 불편하고 문서가 복잡해진다. 태그에 스타일을 적용할 수 있다면 클래스 보다는 태그를 사용하는게 좋다.

▶ 태그에 스타일 적용

▶ 클래스에 스타일 적용

위 예에서 볼 수 있듯이 태그에 스타일을 적용하면 태그만 사용해도 스타일이 적용된다. 문서도 간결해지고 편집하기도 편하다. 하지만 클래스로 스타일을 적용하면 문단의 수만큼 태그에 클래스를 지정해야 하기 때문에 편집하는데 시간이 오래 걸리고 문서가 복잡해진다. 

편집이 아주 복잡한 책이 아니라면 스타일이 많을 필요가 없다. 대부분의 책은 본문, 단어나 문장의 강조, 단어나 문장의 인용, 문단의 인용, 첨자 정도로 구성돼 있다. 여기에 문서 전체의 공통 스타일, 왼쪽/오른쪽/가운데 정렬, 주석, 글자색 등 책에 따라 필요한 몇가지 클래스만 추가하면 기본 CSS가 완성된다. 

클래스 이름은 용도를 한눈에 파악할 수 있게 쉽고 명확하게 작성해야 한다. 클래스 이름을 't_0001'로 만들었다면 클래스 이름만 보고 용도를 알 수 없다. 'text_align_center'로 클래스 이름을 만들면 명확하기는 하지만 이름이 너무 길어 클래스를 적용하기 불편하다. 'txt_center' 혹은 'txt_c', 'txt_l', 'txt_r' 등 규칙을 정해 이름을 만들면 이해도 쉽고 간결하게 사용할 수 있다. 

참고로 클래스 이름은 영문으로 시작해야하고 숫자를 사용할 수 있으며 공백은 포함하지 않아야 한다. 

스타일시트에 설명이 필요할 경우 /* ... */로 설명을 추가할 수 있다. /* ... */ 사이에 있는 내용은 문서에 아무런 영향을 주지 않는 설명을 위한 코드다. 

▶CSS 템플릿 기본 구조 예시

선택자를 정했다면 이제 선택자에 스타일을 적용해야 한다. CSS에서는 스타일을 적용하는 수십가지 속성이 있고, 각 속성별로 적용할 수 있는 값이 정해져 있다. 예를 들어 글자 크기를 지정하고 싶다면 font-size의 속성을 선택하고 원하는 크기(값)를 정의하면 된다.

속성은 글자, 색, 테두리, 여백, 위치 지정 등 다양한 속성이 정의되어 있으며 하나의 선택자에 여러개의 속성을 지정할 수 있다. 

속성에 따라 속성의 값은 달라진다. 그리고 하나의 속성에 여러 형태의 값이 있을 수 있다. font-size에는 em, %, px 등 일정 비율로 텍스트의 크기를 지정하는 속성이 올 수 있고, small, medium, large, x-large 처럼 특정 사이즈를 지정하는 값도 올 수 있다.

값은 속성의 특성에 따라 형태가 달라진다. 글자 크기(font-size) 속성이라면 값은 1em, 100%, 20px처럼 크기를 나타내는 숫자가 오고, 글자 색 속성이라면 blue, red, white, #FF00FF, rgb(255,0,255) 같은 색과 관련된 값이 올 수 있다. border-style처럼 선과 관련된 속성에는 solid, dotted, hidden 같이 선과 관련된 단어가 올 수 있으며 이런 단어들은 속성별로 정해져 있다.

하나의 속성에 여러개의 값이 올 수도 있다.

테두리를 구성하는 요소는 선의 두께, 종류, 색 등이 복합적으로 표현되야 한다. 이런 속성은 각 요소에 해당하는 값을 한번에 지정할 수 있다. 여러 값을 한번에 지정하려면 각 값을 공백으로 구분해 준다. 이렇게 한번에 여러개의 값을 가질때는 몇가지 값을 무시해도 된다. {border : 5px dotted red;}는 5픽셀의 빨간색 점선이 그려지고, {border : 5px dotted;}는 5픽셀의 점선(기본 색은 검정)이 그려진다. 하지만 선의 스타일(dotted) 값을 무시하면 다른 속성이 표현되지 않는다. 그리고 이런 속성은 대부분 각 요소에 해당하는 속성을 구분해서 지정할 수 있게 되어 있다.

CSS 스타일은 선택자와 스타일 속성, 그리고 속성에 대한 값으로 이루어진다. 이중 선택자는 스타일 속성의 묶음이다. 선택자 하나에 여러 스타일 속성-글자크기, 여백, 색, 테두리 등-을 지정할 수 있으며 문서에서는 이 선택자를 이용해 글자나 문단에 스타일을 적용할 수 있다. (CSS 기본 구조 참고)  선택자는 태그, 클래스, ID, 그룹 등 여러 방식으로 지정할 수 있다.

1. 태그 선택자

    - 태그를 선택자로 사용하면 HTML 태그 스타일을 변경할 수 있다. 예를 들어 <h1>태그의 기본 글자 크기와 줄간격은 뷰어에 따라 정해져 있다. 그런데 CSS 파일에서 <h1>태그에 스타일을 적용하면 본문에서 <h1> 태그에 아무런 스타일을 지정하지 않아도 CSS에서 지정한 스타일이 적용된다. 

CSS 스타일 시트를 만들때 h, p 태그 등 많이 사용하는 태그는 태그 선택자로 스타일을 적용해 두면 태그별로 스타일을 지정할 필요가 없기 때문에 편집하는데 시간을 절약할 수 있다. 모든 태그에 스타일을 지정할 수 있으며 동일한 스타일이 반복되는 텍스트 관련 태그(p, hx, cite, strong 등)에 스타일을 지정하면 편하게 사용할 수 있다.

2. 클래스 선택자

    - CSS에서 가장 많이 사용하는 선택자이다. 태그 선택자는 지정된 태그 명을 사용해야 하지만 클래스 선택자는 클래스의 이름을 성격에 맞게 정할 수 있다.(단, 영문과 숫자를 권장한다) 예를 들어 이미지와 관련된 클래스라면 앞에 img를, 텍스트와 관련된 클래스라면 txt를 붙이는 식이다. 이미지 편집을 위해 왼쪽정렬, 오른쪽 정렬, 가운데 정렬을 많이 사용한다면 img_left, img_right, img_center 처럼 클래스의 쓰임에 따라 이름을 지정하면 된다. 

클래스를 지정하려면 .(점dot)을 찍고 클래스 이름을 쓴 후 스타일을 지정하면 된다. 클래스 이름은 사용자가 해당 클래스의 쓰임을 쉽게 파악할 수 있게 지정하는게 좋다. 

.class_name { 스타일  }

클래스를 태그에 사용하기 위해서는 class라는 속성을 사용한다.

<p class="class_name">내용</p> 

3. 태그에 종속된 클래스

    - 클래스는 특정 태그에 종속된 형태로 사용할 수도 있다. <p> 태그와 <h1> 태그에 가운데 정렬을 적용하고 싶은데 <p> 태그는 글자 색을 빨간색으로, <h1>태그는 글자 색을 파란색으로 하고 싶다고 하자. 이럴때 클래스 명을 center로 지정하면서 <p>태그와 <h1>태그에 서로 다른 스타일이 적용되도록 할 수 있다. 

태그.class_name { 스타일  }

4. 그룹 선택자

    - 태그나 클래스에 동일한 스타일을 적용할 경우 그룹으로 묶을 수 있다. 만약 h1, h2, h3에 동일한 스타일을 적용하고 싶다면 각 태그에 스타일을 적용할 수도 있지만 그룹으로 지정해서 한번에 스타일을 적용할 수 있다. 그룹으로 선택자를 지정하려면 선택자를 ,(콤마)로 구분해서 나열한 후 스타일을 지정한다.

h1, h2, h3 { 공통 스타일 }

5. ID 선택자

    - ID 선택자는 클래스 선택자와 유사하지만 스타일을 적용할 때 class 대신 ID를 사용한다. 하나의 ID는 문서 내에서 반드시 한번만 사용할 수 있다. ID는 특정 위치로 이동하거나 특정 단어의 주석을 연결해 주는 역할을 하기 때문에 동일한 ID가 한 문서에 하나 이상 사용될 수 없다. 그래서 ID 선택자는 많이 사용하지 않는다. ID 선택자는 선택자 이름 앞에 #을 붙이고, 반드시 영문으로 시작해야 한다.

#selector_name { 스타일 }

<p ID="selector_name"> 내용 </p>

**

ID는 문서 내에 특정 위치나 특정 내용을 연결할 때 사용한다. 그렇기 때문에 하나의 단락에는 하나의 ID만 사용할 수 있다. 다만 해당 내용을 참고하거나 그 위치로 이동하는 링크에는 여러번 사용 가능하다.