본문 바로가기

콘텐츠/강좌

[전자책 연재 2/3] 전자책 ePub의 특징과 제작

 

2. 전자책 ePub의 특징과 제작


이 시간에는 전자책 표준인 ePub에 대해서 좀 더 자세하게 알아보려고 한다. ePub의 가장 큰 특징인 리플로우에 대해서 살펴보고 ePub을 구성하는 HTML에 대해서 알아보겠다. 그리고 ePub 저작 도구인 Sigil을 이용하여 전자책을 만들어보면서 ePub의 구조에 대해서 이해하는 시간을 가져보도로 하겠다.

sub epub 특징 살펴보기


ePub의 전자책 표준이 된 이유는 다양한 모바일 디바이스에서 최적의 환경을 제공해주고 제작하기 편리하기 때문이다. 여기서는 ePub의 이러한 특징에 대해서 자세하게 알아보도록 하겠다.

● 탁월한 리플로우 기능

ePub의 가장 큰 장점 중 하나는 리플로우 기능이다. 리플로우(Reflow)란 화면 크기에 관계없이 내용을 화면 상에 자연스럽게 흐르도록 해주는 것을 말한다. epub은 디바이스의 환경에 맞게 프레임별로 내용을 최적화하여 배치해서 뿌려준다. 예를 들어 태블릿 PC에서 1개의 프레임에 보이던 내용을 액정 크기가 작은 스마트폰으로 열어보면 내용이 넘치게 되는데 이때 액정 크기에 맞게 내용을 분리하여 다음 프레임에 표시해준다. PDF처럼 정해진 페이지의 내용을 하나의 프레임에 보여주는 경우 화면 크기가 달라지면 내용을 축소하거나 확대해서 보여주기 때문에 가독성이 떨어지지만 epub은 확대 축소없이 내용을 자연스럽게 분리해주기 때문에 다양한 디바이스에도 유사한 환경으로 내용을 보여준다. 특히 가로 보기를 하면 세로 보기시 2 프레임의 내용을 책처럼 펼침 페이지로 보여주는 기능도 매력적인 요소이다.

● HTML을 이용하는 epub

epub의 구조는 생각보다 간단하다. 웹페이지의 표준 파일 형식인 HTML을 이용하기 때문이다. 그런데 막상 epub의 파일 확장자는 .epub를 가지고 있는데 그 이유는 epub는 전자책에 사용된 데이터의 집합 파일이기 때문이다. epub가 HTML로 구성되어 있는지 확인하려면 epub 파일의 확장자를 zip으로 바꾼 후 알집과 같은 프로그램을 이용해서 압축을 풀어보면 알 수 있다. 다음은 ‘나는 개러지밴드로 음악한다’ 전자책에 사용했던 epub 파일을 zip으로 변경해서 압축을 해제해서 열어 본 화면이다.
많은 폴더로 구성되어 있지만 [OEBPS] 폴더에는 여러 개의 html 파일을 볼 수 있을 것이다. html이 바로 전자책의 프레임에 보여지는 내용을 담고 있는 파일이다. 이외에 [CSS] 폴더에는 스타일 파일을 담고 있고 [fonts]에는 문서에 사용된 글꼴 파일을 담고 있고 [image] 폴더에는 문서에 사용된 이미지 파일을 담고 있다.
무척 복잡해보이는 구성을 가지고 있지만 동작하는 순서를 알아두면 epub의 구조를 잘 파악할 수 있을 것이다.
epub을 로딩하면 [META-INF] 폴더에서 [container.xml] 파일을 먼저 로딩한다. 이 파일은 문서 구조를 정의하고 [OEBPS] 폴더에 있는 [content.opf] 파일을 실행하도록 해준다.
[OEBPS] 폴더의 [content.opf]에는 전자책의 동작 순서를 정의한다. 에는 도서 정보가 기록되어 있고 태그에는 전자책에 사용되는 요소를 정의하고 로딩한다. 먼저 여러 개의 HTML 문서들의 로딩 순서를 정의해주는 [toc.ncx] 파일을 로딩시킨다. 이 파일은 도서의 목차 구성에 사용된다. 그런다음 표지 이미지와 표지 문서를 로딩하여 표지를 출력하게 해주고 별도의 글꼴을 포함하는 경우 [font] 폴더에 있는 폰트 파일을 로딩하거나 전자책 문서에 삽입된 이미지들을 정의해준다. 태그에는 분리되어 있는 전자책 문서인 HTML 파일 목록을 로딩 순서대로 등록되어 있다.

[toc.ncx]는 목차 파일로 사용자가 지정한 목차 목록을 해당 문서 파일에 연결시켜주는 역할을 한다. 전자책에서 목차 메뉴를 누르면 나타나는 내용이 [toc.ncx] 파일에 의해 동작하게 된다.

sub epub 제작시 알아두어야 할 주의 사항

epub 제작시 가장 중요한 부분은 다양한 크기의 디바이스에서 최적의 환경으로 내용을 보여주도록 해주는 것이다. 여기서는 실제로 전자책 제작시 겪었던 경험을 토대로 전자책을 제작할 때 꼭 알아두어야 할 사항을 정리해 보았다.

● 글꼴 크기 개념 이해하기

전자책은 글을 읽기 편해야 하므로 글자 크기를 지정할 때 가독성이 우수한 크기로 디자인해야 한다. 특히 모바일은 스마트폰이나 태블릿 PC 등 액정 크기가 다양하기 때문에 모든 환경에서도 가독성이 우수해야 한다. 이러한 문제를 해결하기 위해서 브라우저에서 적합한 글자 크기를 16px, 12pt, 1em, 100%로 지정해두었다. 이 크기는 단위가 다를 뿐 모두 같은 글자 크기이며 이 크기를 기준으로 수치를 높이거나 낮추어서 글자 크기를 조절한다. 이중에서 전자책은 em과 % 단위를 사용하는데 그 이유는 이 단위를 이용해야만 전자책 뷰어에서 사용자가 임의로 글자 크기를 변경할 수 있기 때문이다.

보통 em 단위를 많이 사용하며 1em을 본문 글자 크기로 사용한다. 그리고 이 크기를 기준으로 소제목은 1.2em, 부연 설명글은 조금 작게 표시하기 이해서 0.8 또는 0.9em을 사용하도록 한다. 가급적 1em보다 수치를 낮추면 가독성이 많이 떨어지므로 사용시 주의하도록 한다.

● 이미지 크기 개념 이해하기

글자와 마찮가지로 문서에 이미지를 삽입할 때 이미지 크기를 지정하는 것도 꽤나 골치 아픈 작업 중 하나이다. 그 이유는 액정 크기가 제각기 다른 모바일 기기에서 적합한 크기로 이미지를 보여주어야 하기 때문이다. 이미지는 크게 표지에 사용하는 이미지와 본문에 삽입하는 이미지로 나눌 수 있다. 우선 표지 이미지에 대해서 알아보도록 하자. 표지 이미지는 전자책을 처음 실행할 때 나타난다. 표지 이미지는 태블릿 PC나 액정이 작은 스마트폰에서 적합한 크기로 보이게 하는 것이 관건이다. 보통 전자책 서비스 업체에서 제안하는 크기를 이용하는 것이 좋다. 리디북스 업체에서 제안하는 표지 이미지 크기는 최소 560×800px이고 고화질의 권장 이미지 크기는 1120×1600px이다. 이미지는 액정 크기에 맞게 사이즈가 자동 조절되므로 권장 이미지 크기로 작업하면 스마트폰과 태블릿 PC 모두 적합한 크기로 나타나게 될 것이다.

다음은 본문에 삽입하는 이미지 크기에 대해서 알아보겠다. 액정을 구성하는 작은 점 단위인 픽셀 크기는 액정 크기가 다양한 모바일 기기에서는 적합하기 않다. 액정 크기에 따라 이미지 크기가 제각기 나타나기 때문이다. 그래서 % 단위를 이용하는 것이 좋다. 이때 또 하나 주의할 점은 이미지의 너비와 높이 수치 중 한 방향만 설정하는 것이 좋다. 너비와 높이를 모두 설정해두면 환경에 따라 이미지가 늘어나 보일 수 있기 때문이다.
다음 코드를 예를 들어 보자. 이미지를 삽입하는 태그를 사용해서 a.jpg 이미지를 삽입해주는 코드이다. 이곳에 WIDTH 속성을 이용하여 화면 너비의 60% 정도 차지하도록 설정했다. 이렇게 설정해두면 액정 크기에 상관없이 전체 너비의 60%를 차지하는 크기의 이미지가 삽입되게 된다.

                                                              <img style="WIDTH: 60%" src="image/a.jpg" />

● 이미지 제작시 주의할 점

전자책에서는 JPG, GIF, PNG, BMP 등의 이미지 파일 형식을 이용할 수 있다. 단, 컬러 스타일은 RGB이어야 한다. 만일 CMYK 컬러 스타일로 설정되어 있다면 이미지가 나타나지 않으므로 주의하도록 한다. 그리고 이미지 파일 이름은 가급적 대소문를 구분하는 영문으로 설정하도록 한다.

그리고 이미지를 사용할 때 주의할 점은 파일 크기이다. 특히 이미지가 많이 들어가는 전자책을 작업할 경우에는 이미지 크기에 신경써야 한다. 전자책 서비스 업체에서 epub 파일 크기를 30MB 이내로 제작하기를 권장하고 있기 때문이다. 이미지가 많이 들어가는 전자책을 제작할 때는 JPG 파일 형식으로 저장하고 압축율을 8~10으로 조절한다. 이미지 압축율을 조절하면 파일 크기를 많이 줄일 수 있는 최상의 방법이다.

그리고 이미지를 삽입할 때 이미지가 차지하는 영역도 생각해야 한다. 만일 이미지가 세로로 길게 들어가는 경우 리플로우로 인해 이미지가 다음 페이지로 넘어가고 내용 사이에 빈 공백이 발생하는 문제가 발생할 수 있다. 리플로우로 인해 빈 공백이 생기는 것을 최대한 줄이려면 이미지의 높이를 최대한 줄이도록 한다. [나모 이북 에디터]와 같은 전자책 저작 도구를 이용하면 이미지 편집창을 열어 별도의 그래픽 편집 프로그램 실행없이 바로 원하는 부분을 잘라내는 작업을 할 수 있다.


sub Sigil로 전자책 만들기

[Sigil]은 대표적인 전자책 저작 도구 중 하나이다. 여기서는 [Sigil] 사용법에 대해서 알아보고 전자책을 만드는 과정에 대해서 간략하게 살펴보도록 하겠다.

● Sigil 살펴보기

전자책 제작은 앞서 설명했듯이 HTML 형식을 쉬운 구조를 가지고 있지만 구조가 복잡한 편이다. 그래서 직접 코딩하기 보다는 전자책 제작 프로그램을 이용하는 것이 편리하다. 가장 많이 이용하는 저작도구로 [Sigil]이 있다. 이 프로그램은 코드를 입력해서 작성하는 툴이지만 조금만 규칙을 알면 매우 쉽게 epub 파일을 만들 수 있다. [Sigil] 홈페이지(https://code.google.com/p/sigil)에 접속하면 무료로 프로그램을 다운로드받을 수 있다.

[Sigil]의 실행 화면은 다음과 같다. 왼쪽에는 종류별로 요소 목록을 표시해주는 창이 있고 가운데는 편집창, 오른쪽에는 차례 목록을 보여주는 창이 나타난다.

기본적인 사용법은 왼쪽 창에서 [Text] 항목에 있는 문서 중 작업할 파일을 선택해서 가운데 창에 소스를 연 후 소스를 편집해서 문서를 작성한다. 편집 방법은 코드 편집과 부분적인 위지윅 방식의 편집을 제공한다. 도구 모음에서 2b-07.tif 버튼을 클릭하면 미리보기 창이 열린다. 이곳에서 글을 입력해서 꾸밀 수 있다. 2b-06.tif 버튼을 클릭하면 소스가 열리고 소스를 편집해서 작성할 수 있다.

● 문서 작성 요령
전자책은 보통 표지, 판권, 본문 순으로 작성한다. [Sigil]을 실행하면 [Text] 항목에 [Section0001.xhtml] 목록이 있다. 이 문서를 클릭해서 표지를 작성하고 [파일]-[추가]-[빈 HTML 파일] 메뉴를 클릭해서 새 문서를 추가한 후 판권을 작성한다. 같은 방법으로 본문 페이지도 작성하면 된다. 본문은 하나의 파일에 모두 담아서는 안된다. 목차 구성에 맞게 내용을 분류해서 각각 다른 문서 파일로 담아야 한다.

 

● 글 작성하기

글 작성은 코드 편집보다는 미리보기 편집을 이용하는 것이 편리하다. 2b-07.tif 버튼을 클릭해서 미리보기 모드로 변경한 후 문서에 추가할 글을 입력한다. 내용을 작성했다면 2b-06.tif 버튼을 눌러 편집 모드로 변경하여 글자 속성을 지정한다. 글이 입력되어 있는 태그에 태그를 이용하여 스타일을 지정할 수 있다. 가장 많이 사용하는 글자 속성 코드는 다음과 같다.

                                           <p><span style="COLOR: #8b8b00; FONT-SIZE: 1.2em">

● 그림 삽입하기

문서에 그림을 삽입하려면 그림을 삽입할 문서를 연 후 도구 모음에서 2b-08.tif 버튼을 클릭한 다음 [Others Files] 버튼을 클릭해서 삽입할 이미지를 선택한다. 이미지를 삽입하고 미리보기를 하면 이미지가 적당한 크기로 삽입되어 있지 않은 것을 볼 수 있다. 이미지 삽입에 사용하는  태그에 ‘width’ 속성을 이용하여 화면 크기 비율에 맞추어 이미지 크기를 조절한다. 특히 표지 이미지는 문서에 화면 전체에 꽉차는 이미지를 넣어서 만들어야 하므로 ‘width’ 속성값을 ‘100%’로 지정하도록 한다.

<p><img alt="CoverDesign" width="100%" src="../Images/CoverDesign.png"/></p>


● 차례 작성하기
차례란 전자책 내용을 목차로 정리하는 작업을 말한다. 일반적으로 목차 작성하려면 문서에서 <h1> 태그에 제목을 입력하면 된다. 만일 제목과 목차 제목을 다르게 표시하고 싶다면 [도구]-[차례]-[Generate Table Of Contents] 메뉴를 클릭한다. 차례 목록이 나타나면 [이름 바꾸기] 명령을 이용하여 차례 이름을 변경할 수 있다. 여기서 변경한 내용은 차례에만 반영될 뿐 본문에는 반영되지 않는다.

● 전자책 정보 입력하기
전자책에 대한 정보를 입력해야 한다. 정보를 입력하려면 [도구]-[메타데이터 편집기] 메뉴를 클릭한 후 제목, 저자 정보를 입력한다. [기본 항목 더하기] 버튼을 클릭해서 임의의 항목을 추가해서 작성할 수 있다.

● 오류 검사와 epub 저장
전자책 작성이 완료되었다면 문서에 오류가 있는지 검사하도록 한다. 도구 모음에서 2b-09.tif 버튼을 누르면 오류를 검사해준다. 오류가 발생한 경우 메시지를 참고해서 오류를 수정하도록 한다.
오류 메시지 중 ‘The element is missing’를 발견할 수 있을 것이다. 이 오류는 문서에 언어 지정이 되어 있지 않기 때문에 발생하는 오류로 각 문서에서 상단에 입력되어 있는 다음 코드를 찾아서 언어 코드를 입력해서 수정해주도록 한다.

                  <http://www.w3.org/1999/xhtml">​         <http://www.w3.org/1999/xhtml">​

오류를 모두 수정했다면 [파일]-[저장] 메뉴를 클릭해서 문서를 저장한다. 정상적으로 저장이 되면 해당 위치에 epub 파일이 만들어진 것을 볼 수 있다.

자! 그럼 전자책이 정상적으로 동작하는지 확인하기 위해서 epub 리더기로 열어 보도록 하자. PC에서 간단하게 확인하려면 PC용 epub 리더기를 이용해서 열어보아야 한다. [유페이퍼] 홈페이지(http://www.upaper.net)에 접속하면 epub 리더기를 다운로드받을 수 있다. 앞에서 제작한 epub 파일을 오른쪽 클릭한 다음 [연결 프로그램]-[UPaperPCViewer]를 클릭하면 전자책을 열어 볼 수 있다. 디바이스에서 사용하는 글꼴, 전자책 뷰어의 특성 등 여러가지 환경 요인에 따라 실제 모바일 기기에서 보이는 모습이 제각기 다르다. 특히 PC에서 보는 모습은 실제와 큰 차이가 있으므로 참고로만 이용하기 바란다.