Epub 전자책 제작의 소소한 노하우 공개
최소한의 노력으로 최대한 볼만한 epub 전자책 만들기
Epub 제작 노하우
Epub 제작 노하우라고 말하면 거창하지만 실제로 Epub 전자책 외주 작업을 수백권 하면서 경험한 소소한 노하우들에 대해 차근차근 설명드리겠습니다. 지금은 전자책 외주 작업을 하지 않고, 출판사에서 전자책 외주 작업에 대한 요청이 올 땐 전문 전자책 제작업체를 소개시켜드리고 완성된 전자책 Epub 파일에 대한 검수를 해드리고 있습니다. 그리고 저희 출판사에서 출간되는 전자책만 제가 직접 Epub 파일을 만들고 있습니다.
우선 제가 말씀드리는 제작 노하우는 심플한 전자책을 제작할 때 적합한 내용들입니다. 출판사에서 종이책을 전자책으로 변환할 때 적용하기에는 적합하지 않습니다. 완벽한 전자책을 만드는 방법이라기 보다는 시간과 노력을 최소화 하면서 볼만한 전자책을 만드는 방법입니다.
제목은 왼쪽 정렬, 본문은 양쪽 정렬을 추천합니다.
제목, 중제목, 소제목에서는 왼쪽 정렬을 사용하고, 본문에서는 양쪽 정렬을 사용하길 추천합니다. 종이책에서는 가운데 정렬을 사용하거나 오른쪽 정렬이 들어가는 경우가 있습니다. Epub 전자책에서는 가운데 정렬과 오른쪽 정렬이 문장이 길어지면 위의 예시 사진처럼 내가 원치 않는 위치에서 줄바꿈이 될 수 있습니다.
한 장의 이미지로 만들기
만약 오른쪽 정렬을 꼭 지키고 싶다면 해당 페이지를 한 장의 이미지로 사용하는 방법이 좋습니다. 사실 Epub에서 구현하기 어렵거나 구현이 되더라도 뷰어에 따라 내가 원치 않는 모습이 나타날 수 있을 때는 한 장의 이미지로 삽입하는 것이 깔끔하고 간편한 방법입니다.
전자책 제작 초기에 가장 골치가 아팠던 부분은 바로 표를 표현하는 것이었습니다. Epub에서도 테이블 태그를 사용해서 표를 만들 수 있지만 모바일에서 볼 때는 모양이 이상하게 보였습니다. 그럴 때면 디자이너 분에게 표를 이미지로 제작 요청 드렸고, 오히려 더 퀄리티가 높아졌습니다.
글과 어우러지는 이미지는 가로 이미지로
세로 이미지와 글을 그대로 이어지게 만들 경우, 모바일 화면에서 세로 이미지가 나오고, 맨 아랫 줄에 한 줄 정도만 글이 나와서 가독성이 떨어질 수 있습니다. 그래서 글과 어우러지는 이미지는 가로 이미지로 넣어주는 것이 좋습니다.
그리고 세로 이미지의 경우는 한 페이지에 한 장의 세로 이미지만 들어가도록 하는 것이 보기에 좋습니다. 그리고 종이책에서 들어가는 왼쪽 정렬해서 반페이지에만 들어가는 이미지 설정은 전자책에서는 지양하는 것이 좋습니다. 모바일에서 볼 때는 이미지가 너무 작아질 수 있습니다.
본문과 제목은 폰트 스타일보다는 글자크기와 색깔로 구분하기
종이책에서는 본문과 제목을 명조체와 고딕체로 구분하는 경우가 종종 있습니다. 그런데 전자책에서는 독자가 직접 폰트를 설정할 수 있기 때문에 폰트로 구분하는 방법은 지양하는 것이 좋습니다. 본문과 제목을 구분하고 싶을 때는 글자크기와 색깔로 구분하는 것이 좋습니다.
CSS 파일 적용하기
Epub전자책을 유려하게 보일 수 있는 방법은 바로 CSS파일을 적용하는 것입니다. 우선 CSS파일을 적용하기 전에 폰트파일을 추가해보겠습니다.
폰트 폴더를 우클릭해서 기존 파일 추가를 합니다. 저는 코펍 폰트 두가지 종류를 추가했습니다.
코펍 폰트는 아래 링크에서 다운로드 받으실 수 있습니다.
http://www.kopus.org/biz-electronic-font2/
폰트를 추가한 이후에 CSS 파일도 추가해보겠습니다. 아래 링크에 제가 미리 만들어둔 Stylesheet.css 파일을 다운로드 받으세요.
https://drive.google.com/file/d/1o_IqTUfxRiyzuWeLIQMSIsj-UCUfUq4L/view?usp=sharing
그리고 Styles 폴더를 우클릭하고 기존 파일 추가를 클릭합니다.
자, 이제 스타일시트 CSS 파일과 코펍 폰트 바탕체와 돋움체 두가지가 전자책 파일에 들어갔습니다.
스타일시트 파일을 클릭해보면 기본 태그들을 미리 적어놓았습니다.
이제 다시 Section0002.xhtml 파일로 돌아와서 우클릭을 하고 Stylsheets 연결을 클릭합니다.
<p> 태그에 본문 글자 서식 태그를 적용해줍니다. <p class=”text”> 라고 수정을 하면 p.text 에 적힌 서식들이 적용이됩니다. 그리고 제목과 본문 사이에 간격을 넓히기 위해서 공백 3줄을 넣어주었습니다.
한 줄 공백을 넣어줄 때 사용하는 태그입니다.
<p class="text"> </p>
코드 뷰에서 보이는 모습이고 이렇게 적용했을 때 미리보기에서는 아래와 같이 보입니다.
굉장히 단순하지만 제일 처음 모습보다는 조금 나아졌습니다. 문단마다 들여쓰기가 적용되었고, 미리보기에서는 적용이 안되었지만 폰트도 적용이 된 상태입니다.
이번에는 html 박스만들기와 색깔을 활용해서 제목에 약간의 효과를 만들어보았습니다.
<div class="box"><div class="line_pink"><div class="box2">
<h1 class="text_big green">전자책이란?</h1>
</div></div></div>
위의 제목에 준 효과들의 태그입니다. 이렇게 제목만 약간 꾸며주어도 조금 더 Epub 전자책의 느낌을 살릴 수 있습니다.
전자책 제작을 전문으로 하는 전문가가 되려는 것이 아니라면 전자책에 적용되는 디자인은 최소화하고 단순한 디자인으로 전자책을 만드는 것이 좋습니다.
전자책에서 좀 더 다양한 효과를 주고 싶으실 때는 html 박스만들기, html 밑줄 등등 html을 붙여서 원하는 효과에 대한 명칭 검색하면 많은 자료들을 참고하실 수 있습니다.
<책을 만들어보장> 독립출판 A-Z 올인원 프로젝트, 자유로운 1인 출판사 창업하기
https://tumblbug.com/makebook
<전자책을 만들어보장>의 후속작 <책을 만들어보장>을 텀블벅에서 펀딩 중입니다! 관심 부탁드려요. ^^
