내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
Sigil에 Add Cover라는 기능이 있습니다.
어떤 분이 왜 이런 기능이 들어있냐고 물어보시네요.
전자책 만들 때 꼭 한번씩 쓰는 기능입니다.
그런데 왜 필요하냐고 물어보니 왜 그런 생각을 하게 됐는지 궁금해졌습니다.
"Add Cover 기능을 써서 표지를 넣으면 유통사 뷰어에서 문제가 생겨요."
이 말을 들으니 이해가 가더군요.
Add Cover를 사용하면 상하좌우 가운데에 표지가 들어갑니다. 화면 크기에 따라 표지 이미지 크기도 자동으로 조절이 되서 좋습니다. 하지만 문제가 하나 있습니다. SVG 태그를 사용하거든요. SVG를 지원하는 뷰어에서는 최적의 코드지만 SVG를 지원하지 않으면 문제가 생깁니다.
<body>
<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1024 1440" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="1024" height="1440" xlink:href="../Images/cover.jpg"/>
</svg>
</div>
</body>
Add Cover로 표지를 넣은 책들을 수정해 달라는 요청을 받다보니 쓸 수도 없는 기능은 넣어서 뭐하냐고 불만이 생기겠지요.
EPUB2 뷰어에서는 SVG를 지원하지 않아도 되기 때문에 유통사 뷰어 문제는 아닙니다. SVG를 지원할 의무는 없지만 사용할 수 없는 것도 아니기 때문에 Sigil 문제도 아닙니다.
불만이 이해는 갔지만 Sigil은 아무 잘못이 없습니다. Sigil은 '완벽한' 표지 추가 기능을 제공하고 있거든요. 그런데 사용법을 모르니 이런 불만이 생기는 것입니다.
Sigil 사용 설명서 [표지 이미지 삽입] 편에서 설명을 한적이 있는데 다시 한번 자세히 설명을 하겠습니다.
표지는 편집자라면 항상 같은 코드를 사용할거예요. 특별한 경우가 아니라면 표지를 삽입하는 코드가 변경될 일은 없습니다.
Sigil의 Add Cover를 사용하면 위에 보이는 코드가 삽입됩니다. 항상 똑같은 코드를 사용합니다.
그런데 표지마다 표지 파일명이 다르고 표지의 가로*세로 크기가 다릅니다. Add Cover 할 때마다 이미지 크기를 확인해서 추가해 줘야 하지만 Sigil은 이를 자동으로 계산해 넣어줍니다.
<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%"
preserveAspectRatio="xMidYMid meet" version="1.1"
viewBox="0 0 SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT" width="100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="SGC_IMAGE_WIDTH" height="SGC_IMAGE_HEIGHT"
xlink:href="SGC_IMAGE_FILENAME"/>
</svg>
</div>
이 코드가 Sigil의 Add Cover 기본 코드라고 보시면 됩니다.
빨간 글자 부분이 이미지에 따라 바뀌어야 하는 곳입니다. 이미지의 가로, 세로 크기와 이미지 파일 명이 들어가야 하는 자리입니다. 이 부분을 빨간 글자로 표시한 그대로 사용하면 Sigil이 알아서 이미지에 맞게 추가를 해 줍니다.
이 빨간 글자 외에는 모두 수정할 수 있습니다. 어떤 식으로 수정을 하든 편집자 마음입니다.
Sigil에서 편집가가 원하는 모양으로 표지 이미지를 삽입되도록 Add Cover 코드를 수정해 보겠습니다.
1. cover.xhtml 파일을 만들어 주세요.
2. cover.xhtml 파일에 아래 코드 혹은 본인이 사용하는 표지 이미지 코드를 추가합니다.
이 코드를 사용하면 이미지가 상하좌우 가운데에 정렬됩니다.
표지 스타일을 CSS파일에 정리하고 싶다면 <style>영역 대신 CSS 파일을 연결해 주면 됩니다.
어떤 코드라도 상관 없습니다. 편집자가 표지를 삽입할 때 사용하는 코드면 됩니다.
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<head>
<title></title>
<style type="text/css">
html, body { height:100%; margin: 0; padding: 0; }
.cover {
width: 100%;
height : 100%;
text-indent : 0;
text-align : center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
}
img.cover {
width : 100%;
height : auto;
}
</style>
</head>
<body>
<div class="cover"><img alt="표지 중앙정렬" class="cover" src=".../Images/cover.jpg" /></div>
</body>
</html>
3. 이미지 파일명, 이미지 크기를 수정합니다.
위 예제 코드는 이미지 크기를 수정할 필요가 없습니다.
이미지 크기를 실제 이미지 크기로 고정시키려면 width와 height를 수정하면 됩니다.
<div class="cover"><img alt="표지 중앙정렬" class="cover" src="SGC_IMAGE_FILENAME" /></div>
width, height를 이미지 크기에 맞추고 싶다면 아래처럼 수정
width: SGC_IMAGE_WIDTH;
height : SGC_IMAGE_HEIGHT;
4. cover.xhtml 파일을 Sigil의 설정 폴더로 복사합니다.
Sigil 설정 폴더 찾는 방법은 간단합니다.
- [편집 > 설정] 혹은 F5를 눌러 [기본설정] 창을 열어주세요.
- [기본 설정] 제일 아래에 있는 [Open Preferences Location] 버튼을 눌러주세요.
- 폴더가 열리면 아래처럼 3번에서 만든 cover.xhtml 파일을 복사해 줍니다.
5. 이제 Sigil에서 Add Cover를 합니다.
svg 태그를 사용한 Sigil 기본 코드가 아닌 편집자가 수정한 코드로 이미지가 들어갑니다 ^^
'Tip&Tech' 카테고리의 다른 글
| 사용하기 쉬운 EPUB 적합성 검사기(EPUB Validator) - 메뉴 한글화 (1) | 2016.06.10 |
|---|---|
| 전자책 주석 처리 방법(팝업 + 링크) (5) | 2016.02.26 |
| Sigil로 EPUB 3 고정 레이아웃(Fixed-layout) 만드는 방법 (3) | 2016.01.29 |
| EPUB3 본문 스크롤로 보기 + 고정 레이아웃 글자크기 변경 (0) | 2016.01.27 |
| 정규표현식 - 1시간짜리 작업을 1분에 끝내기 (11) | 2016.01.21 |