내맘대로의 EPUB 제작 가이드

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, 위 오른쪽 아래 왼쪽 테두리, 이미지 적용 방식으로 값을 지정한다. 

이미지에 적용할 수 있는 스타일은 그리 많지 않다. CSS3를 활용하면 이미지 갤러리처럼 다양한 효과를 낼 수 있지만 일반적인 책 편집에는 간단한 스타일이 주로 사용된다. 

전자책 편집에서 많이 사용하는 스타일은 정렬과 float(HWP의 어울림 기능)이 있다. 

이미지 정렬 기능은 문단 정렬과 다르지 않다. 그래서 문단 정렬을 위해 만든 스타일을 그대로 사용할 수 있다. 만약 이미지에 테두리나 그림자를 두고 싶다면 border 속성을 사용할 수 있다.

▶ 문단 정렬 스타일 예시

왼쪽 정렬  <p class="text_left"><img src="sample.jpg /></p>

가운데 정렬 및 테두리 <p class="text_center"><img class="img_border" src="sample.jpg /></p>

오른쪽 정렬 <p class="text_right"><img src="sample.jpg /></p>

전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. float 스타일은 이미지에만 사용할 수 있는게 아니다. 문단의 왼쪽이나 오른쪽에 보충설명을 위한 텍스트상자를 넣고 싶을때도 유용하게 사용할 수 있다.

책을 편집하다 보면 이미지에 설명을 추가해야 하는 경우가 있다. 이때 caption 스타일을 미리 만들어 두명 유용하게 활용할 수 있다.

▶ float 스타일 예시

▶ float 스타일 적용 결과

이 외에도 이미지에 활용하기 좋은 스타일로 box-shadow가 있다. box-shadow는 이미지의 상하좌우에 그림자를 그려주는 스타일로 잘 활용하면 이미지에 멋진 효과를 줄 수 있다.

    box-shadow는 테두리 주위에 그림자를 나타내 주는 스타일이다. 

    그림자 효과를 잘 활용하면 보다 입체적인 편집을 할 수 있다.

지금까지 CSS의 구조와 전자책 편집에 많이 사용되는 CSS 속성을 살펴봤다. 여기에 설명된 내용만 이해하더라도 시중에 유통되는 수준으로 전자책을 편집할 수 있다. 제목과 소제목을 꾸미고, 본문과 인용구에 다른 스타일을 적용하고, 참고사항은 박스에 넣는 등의 편집을 하는 정도면 지금까지 설명한 스타일만으로 충분하다. 

앞으로는 지금까지 설명한 CSS 속성을 실제 편집에서 어떻게 활용하는지, 그리고 전자책 편집을 쉽게 하기 위한 템플릿을 어떻게 만드는지 설명하려고 한다. CSS  템플릿에 대해서는 [1.2.6.1 CSS 기초 - CSS 템플릿 기본 구조]에서 설명했듯이 하나만 제대로 만들어 두면 전자책 편집이 편해진다. 

CSS 탬플릿은 편집자가 자신의 편집 스타일에 맞게 만들면 된다. 정해진 룰은 없다. 필자가 좋아하는 편집 스타일은 EPUB을 편집할 때 불필요한 태그 사용을 최소로 하고, 편집 수정을 할 때 시간을 최대한 단축할 수 있는 방식이다. 이 방식은 화려한 편집을 하기에는 부족하지만 대부분의 뷰어에서 깔끔하게 보이고, 뷰어에서 도류도 적다는 장점이 있다. 

아래 예시는 필자가 Sigil에서 작업할 때 사용하는 기본 템플릿이다. 이 템플릿을 그대로 사용하는 경우는 거의 없다. 책에 따라 스타일을 조금씩 수정해야 하기 때문에 EPUB을 편집할 때 항상 조금씩 수정을 한다. 다른 편집자들도 이 템플릿을 토대로 자신만의 스타일을 만들 수 있을 것이다. 

* 스타일에 대한 설명은 CSS파일에 포함되서는 안된다. 아래 내용을 복사해서 사용하려면 설명 부분은 모두 지우기 바란다.  

▶CSS 기본 템플릿

전자책을 편집할 때 여백은 다양한 목적으로 활용할 수 있다. 제목과 본문을 구분하기 위해 간격을 띄거나 인용구를 구분하기 위해 들여쓰기를 하는데 사용할 수도 있다. HTML에서는 내어쓰기 태그가 없지만 여백과 함께 text-indent를 사용하면 내어쓰기 효과를 낼 수도 있다. 상하좌우 여백을 조절해서 책의 느낌을 바꿀 수도 있고, 테두리를 그릴 때는 내용이 테두리에 달라붙지 않게 여백을 두기도 한다.

여백에 사용하는 태그는 margin과 padding이 있다. margin과 padding은 전혀 다른 속성을 갖고 있지만 이를 구분하지 않고 쓰는 경우가 많다. 

HTML 태그를 써서 글을 작성하면 눈에 보이지 않는 가상의 글상자가 만들어 진다. margin은 이 글상자와 글상자 사이의 간격을 의미하고, padding은 글상자 안쪽 여백을 의미한다. 

첫번째 글상자는 바깥쪽 테두리와 안쪽 테두리 사이에 여백이 생긴 것을 볼 수 있다. 이는 안쪽 글상자의 margin이 30px 적용됐기 때문이다. 

두번째 글상자는 안쪽 글상자와 글상자 안에 있는 텍스트 사이에 여백이 30px 생겼다. 대신 바깥쪽 글상자와 안쪽 글상자 사이에 간격은 전혀 없다.(자세히 보면 파란 테두리 바깥으로 회색 점선을 볼 수 있다)

만약 문단 태그<p>에 margin과 padding으로 각각 여백을 준다면, 눈에 보이지 않더라도 저렇게 테두리가 쳐 지고, 테두리를 기준으로 margin은 테두리 바깥쪽, padding은 테두리 안쪽에 여백이 생긴다. 아래는 위 예제에서 배경색과 테두리만 없앤 결과이다. 

테두리와 배경색을 없애면 margin과 padding이 똑같은 스타일이 적용된 것 처럼 보인다. 그래서 둘을 서로 구분하지 않고 사용하는 경우가 많은데 테두리를 그렸을 때 결과를 보면 둘은 전혀 다른 스타일임을 알 수 있다. 

margin과 padding은 상, 하, 좌, 우 여백을 구분해서 적용할 수 있다. margin, padding 속성으로 네 영역에 각각 여백을 적용할 수도 있고, margin-top, margin-right, margin-bottom, margin-left 태그로 원하는 영역에 한정해서 여백을 지정하는 태그도 있다. 

paddin도 동일한 규칙이 적용된다. 

** 참고 : 여백과 관련된 Tip : http://epubguide.net/38