Web/eBook

Fixed Layout처리하기 (iBooks용)

saltdoll 2012. 10. 8. 17:59
반응형

아이북스 만들기-Fixed layout epub(1): Overview



1.ePub기초

2.필요한 툴

3.샘플파일 다운받기

4.컨텐츠 작성

5.ePub압축

6.유효성 검사



그림책 만들기의 필수- Fixed layout epub에 대해서 소개하려고 합니다. 그동안 경험과 자료를 공유해 주신 많은 분들의 도움을 받았기에 제 경험도 도움이 되었으면 하는 마음입니다. 


이제는 애플에서 퍼블리셔들에게 샘플파일도 제공하고 있고 인터넷 상에 꽤 많은 정보들이 올라와 있기는 하지만, 제가 처음 시작할 때에는 자세한 정보가 많지 않았습니다. 

게다가 Mac으로 만들려다 보니  Fixed layout epub에 대한 한글 자료가 많지 않았습니다. 

따라서 이 포스트는 Mac을 중심으로한 Fixed layout epub 의 기초적이고 전반적인 내용입니다. 

자세한 작성법은 다음 번에 올리도록 하겠습니다. 




  1. epub기초


-epub 전반적인 개념 알기


Fixed layout epub를 제작하기 전에 epub의 개념과 전반적인 사항을 알고 들어가는 것이 수월합니다. 

epub에 관한 자료는 인터넷 상에 아주 많이 있습니다. 

링크 사이트 참고하세요.


오렌님의 블로그  -지난 번에 살짝 소개 했었지만 한글로 되어있는 epub제작 강좌입니다. 

Threepress Consulting blog -영문이긴 하지만 개념부터 퍼블리싱까지 완벽 정리입니다. 게다가 필요한 툴들과 샘플파일을 받을 수 있는 링크까지 제공합니다.





2. 필요한 툴


-Text Editor

-Zip 프로그램



Text Editor :

에디터는 UTF-8을 지원하는 수많은 에디터(메모장, 나모 웹 에디터 등등) 중의 하나를 고르면 되는데 많은 개인 퍼블리셔들이 Sigil을 사용하시더군요.  일단 디자인뷰(미리보기)가 가능한 것이 장점이겠네요. 무료로 다운로드할 수 있고 맥용과 윈도우용, 리눅스용이 있습니다.

Sigil 다운로드 : http://code.google.com/p/sigil/downloads/list



제 경우는 단순한 구조의 그림책이라 하드코딩이 더 편해서 mac용 에디터 Text Wrangler를 사용했습니다. 인터페이스가 매우 단순, 깔끔합니다. 

Text Wrangler 다운로드 : http://www.barebones.com/products/textwrangler/ 



Zip 프로그램 :

맥의 경우, epub 파일의 압축을 풀 때에는 맥에있는 내장 압축기로 잘 풀립니다. 단 컨텐츠 작성 후 epub로 저장시 맥과 윈도우가 약간 다른데요. mimtype 파일은 압축없이 넣어야 하기 때문에 일일이 지정하기 번거롭고 에러가 잘 나는 면이 있습니다. 이런 경우 압축을 쉽게 해주는 epub전용 압축기 ePub zip을 사용하면 편합니다. 전체 epub폴더를 끌어다 넣기만 하면 epub 파일이 생성됩니다. 

ePub zip 다운로드http://www.mobileread.com/forums/showthread.php?t=55681





3.샘플파일 받기


-샘플파일을 다운 받는다  (단,DRM FREE인지 확인할 것)

-확장자명을 .epub에서 .zip으로 바꾼다

-파일을 연다


컨텐츠 작성의 가장 손쉬운 방법은 샘플 파일을 받아서 열어보는 것이겠죠? 먼저 Fixed layout으로 제작된 ePub파일 하나를 아이북스 스토어에서 다운한 뒤 아이튠즈에서 가져옵니다. 퍼블리셔 등록이 되어 있다면 애플에서 제공하는 샘플 파일을 가져와도 됩니다.  알고계시겠지만 ePub파일은 사실상 Zip파일이기 때문에 확장자를 zip으로 바꾸고 압축을 풀면 풀립니다. 

--->단 DRM Free 가 아닌 경우 열리지 않습니다, DRM Free 인 Sample file 을 찾거나 DRM removal 프로그램을 찾아서 해제해 주어야합니다.


압축해제된 ePub 파일의 구조는 다음과 같습니다. 

  • mimetype
  • META-INF 폴더 
  • OEBPS 폴더 
    • CSS폴더
    • images 폴더
    • Font 폴더 
    • Content.opf 
    • toc.ncx 
    • xhtml 파일들




4.컨텐츠 작성


-디스플레이 옵션

-Xhtml

-CSS


디스플레이 옵션

디스플레이 옵션을 결정하는 파일은 META-INF폴더 내에 있는 com.apple.ibooks.display-options.xml 입니다. 여기서 플랫폼, orient- lock, fixed-layout 디스플레이 옵션 등을 설정합니다. 


com.apple.ibooks.display-options.xml 

 <?xml version="1.0" encoding="UTF-8"?>

<display_options>

 <platform name="*">


     <option name="fixed-layout">true</option>


 </platform>

</display_options>




XHTML

각 xhtml파일의 <head> 부분에는 다음과 같은 태그가 삽입됩니다. (모든 xhtml의 <head>부분에 정의해 주어야 합니다. )


 <meta name="viewport" content="width=1200, height=1700"/>


여기서 원하는 width와 height를 설정해 줍니다. 




CSS

CSS파일에서는 각 페이지의 레이아웃,이미지의 크기, 단락의 위치, 폰트 등을 설정해 줍니다. 

CSS작성시 염두에 두어야 할 점들을 정리해 보면,

-body의 width와 height는 viewport와 일치해야 합니다. 

-이미지<img>와 단락<p>은 절대위치(absolute-position)으로 고정할 수 있습니다.

-이미지가 배경으로 깔리게 하고 싶을 때에는 z-index를 이용합니다.

-폰트를 지정할 수 있고 폰트의 크기는 px단위로 지정합니다.

-단순한 CSS 를 사용합니다.  



-body의 width와 height는 viewport와 일치해야 합니다.

 body {

width: 1200px;

height: 1700px;

}



-이미지<img>와 단락<p>은 절대위치(absolute-position)으로 고정할 수 있습니다. 

 img {

position: absolute;

width: 500px;

height: 300px;

margin: 0;

top: 120;

left: 300;

}



이미지가 배경으로 깔리게 하고 싶을 때(이미지위에 글자가 올라오도록하고 싶을 때)에는 낮은 z-index를 이용합니다. 

 img {

z-index: -1;

}




폰트를 지정할 수 있고 폰트의 크기는 px단위로 지정합니다. 

 p { 

font-family: "Times New Roman";

font-size: 42px;

position: absolute;

color: #000000;


}




아이북스에서는 background 등을 제외한 대부분의 CSS를 지원하고 있는 것 같습니다. 하지만 일부리더기에서 읽히지 않을 수도 있으니 단순하게 만드는 것이 에러를 피하는 방법이라는 생각이 듭니다. 


다음은 지원하지 않는 CSS목록입니다. 

  • background image related:
    • background-image
    • background-repeat
    • background-attachment
    • background-position
    • background
  • word-spacing
  • letter-spacing
  • text-transform
  • list-style-image





5.epub 패킹


샘플 파일을 받아서 modify했다면 폴더 내에 있는 iTunesMetadata.plist 을 지운 후에 ePub로 압축합니다. 앞서 다운받은 ePub zip을 사용하면 편리합니다. 


http://www.mobileread.com/forums/showthread.php?t=55681



6. 유효성 검사


마지막으로 제작한 파일에 에러가 있는지 유효성 검사를 합니다. 

epub check 다운로드 http://code.google.com/p/epubcheck/

epub checker for MacOS http://www.macupdate.com/app/mac/35031/epubchecker

또는 http://www.threepress.org/document/epub-validate/에서 온라인 검사를 할 수 있습니다. 



이렇게 해서 Fixed Layout Epub의 전반적인 제작 과정을 훑어 보았습니다. 다음 번에는  CSS와 XHTML을 작성하는 방법을 예제와 함께 포스팅하도록 하겠습니다. 






아래는 Fixed Layout Epub 제작에 도움이 되는 사이트입니다. 참고하세요.


오렌님의 블로그 http://blog.naver.com/tumira/40139204126 

Understanding Apple’s fixed-layout EPUBs http://blog.threepress.org/2011/01/17/understanding-apples-fixed-layout-epubs

EPUB Straight to the Point 저자 LIZ CASTRO의 블로그 http://www.pigsgourdsandwikis.com/2011/02/fixed-layout-epubs-for-ipad-and-iphone.html






출처: http://blog.naver.com/PostView.nhn?blogId=tehrese&logNo=70119742149

반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)