내맘대로의 EPUB 제작 가이드

전자책을 편집할 때 여백은 다양한 목적으로 활용할 수 있다. 제목과 본문을 구분하기 위해 간격을 띄거나 인용구를 구분하기 위해 들여쓰기를 하는데 사용할 수도 있다. 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

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

▶ 테두리 예제

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

▶ 글상자 예제

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

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

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

▶ 테두리와 글상자 비교

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

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

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

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

저는 

4년동안 인터넷 서점에서

취미실용, 여행, 컴퓨터, 자연과학 등의 분야 MD를 하고

북로그라는 단어를 국내에서 처음 사용했으며

책속의 한문장 서비스를 처음 도입하고

휴대폰에서 책을 구입할 수 있는 모바일 서점을 기획하고

다음 책서비스를 기획하고

인터넷 서점 사업 기획을 총괄했습니다.

1년동안 휴식을 갖고 여행을 하다 돌아와

다시 인터넷서점에 입하를 하게 되었고

1년동안

국내 최초 온오프라인 통합 서비스인 '바로드림 서비스'를 총괄 기획하여 성공적으로 론칭시키고

6년동안

삼성전자와 전자책 서비스를 제휴하고

국내에 최초로 EPUB을 상용 전자책 포멧으로 적용했고

아이리버 스토리 시리즈에 전자책 서비스를 제공하였고

다양한 전자책 전용 디바이스의 뷰어 및 OS를 관리하고

eBook 앱을 기획했으며

EPUB에 대해 전문적으로 연구를 하였습니다.

지금은 '내맘대로의 EPUBGUIDE.NET'을 운영하며

전자책 제작 전문 출판사인 '내맘대로 출판사'를 운영합니다.

이와 함께

전자출판협회 강의

국립중앙 도서관 전자책 제작 강의

중부 여성인력센터 전자출판 동향 및 전자책 제작 강의

EPUB PG 활동을 하면서 TTA에서 주관하는 EPUB 접근성 표준 지침 제작

등 전자책 제작 방법을 알리는 일을 하고 있습니다.

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

글꼴 속성은 크게 두 부분으로 이루어진다. 하나는 글꼴 자체를 지정하는 @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 속성을 적용해도 본문에서 변화가 없는 경우가 많다. 모든 기기에서 동일한 스타일로 보이도록 하고 싶다면 이런 속성은 피하는게 좋다.