내맘대로의 EPUB 제작 가이드

https://sigil-ebook.com/2020/07/24/sigil-1-3-0-release/

Sigil 1.3.0 버전이 공개됐습니다.

2가지 기능이 추가됐어요.

Added FontTab to show a specific font by double-clicking in BookBrowser

Added Index Toolbar

FotnTab은 아주 유용하겠네요.

Sigil에 포함시킨 폰트를 확인할 수 있습니다.

검은고딕과 코펍돋움 보면, 검은고딕은 영문이 안보입니다.

이 글꼴은 전자책에서도 영문이 안보일 거예요.

폰트 구현이 안될 때(https://cafe.naver.com/bookfactory/93240)

폰트 탭에서 글꼴을 확인할 수 있습니다.

그리고 색인 탭이 추가됐어요.

색인은 넣어도 빼달라는 분들이 많아 거의 안쓰지만,

색인 생성 할 때 아주아주 편한 기능입니다.

메뉴에만 들어가 있다 도구상자로 빠져나왔네요.

테두리에 이미지 넣는 방법은 여러번 올렸는데, 묻는 분들이 많네요.

이런 테두리 그릴 때 이미지를 씁니다.

물론 border를 그릴 수도 있지만.... 생각 하기도 싫네요 ㅎㅎ

이 테두리는 이 이미지로 만들었습니다.

이미지 크기는 상관 없어요.

모양만 같으면 돼요.

테두리 이미지는 border-image를 씁니다.

.box_TOC {

border : 10px solid transparent ;

border-image: url("../Images/TOC_border.png") 50 stretch;

padding : 10px;

}

이때 테두리의 두께는 이미지 두께와 전혀 상관 없어요.

border로 두께를 주면 됩니다.

border : 10px solid transparent;

border 두께에 따라 모양은 유지한 채 테두리 두께가 달라집니다.

투명한 테두리를 만들 때 transparent 속성을 씁니다.

그런데 간혹 border-image 태그를 안먹는 뷰어가 있더라구요.

이런 뷰어는

border : 10px solid #FF0000;

이렇게 넣어줘도 돼요. border-image가 적용되면 이미지로, 적용 안되면 빨간 테두리가 그려집니다.

요즘은 웬만한 뷰어가 border-image 적용이 되니 투명하게 그려줘도 됩니다.

전자책에서는 이렇게 보여요.

https://goodereader.com/blog/reviews/unboxing-the-hisense-q5-rlcd-android-tablet

주류를 이루는 전자책 단말기는 EPD, e-ink라는 상표명으로 더 알려진 전자잉크 디스플레이 제품입니다. 킨들, 리디 페이퍼, 크레마 등이 EPD를 사용하지요.

EPD는 인쇄와 유사한 방식, 그리고 해상도를 제공해 책을 볼 때 좋지만 반응속도가 느리고 화면에 잔상이 많이 남습니다. 책 보는 용도 외에 다른 목적으로 사용하기 어렵지요. 20~30만원대 기기를 책만 보자고 살 사람은 그리 많지 않습니다.

Hisense Q5는 EPD의 대안이 될 수 있을 것 같습니다.

화질이 어떨지 궁금하네요.

Hisense Q5는 LCD입니다. 그런데 백라이트가 없어요. 지금 보고 있는 모니터나 휴대폰에 백라이트를 꺼보세요. 그래도 희미하게 내용이 보일거예요. LCD나 LED도 백라이트 없이 내용을 표시합니다. 다만, 읽기 힘들 정도로 어두울 뿐이지요.

요즘은 많이 쓰이지 않지만, LCD 전자시계 기억하는 분들이 계실거예요. LCD 계산기는 지금도 많이 쓰지요.

LCD 전자시계, 계산기의 LCD 화면은 백라이트가 없어도 글자가 잘 보입니다. 흰색을 표현하지 않아도 되기 때문에 디스플레이의 배경을 검은 색으로 만들 필요가 없어 가능한 방식입니다.

LCD 배경이 은빛에 가깝고, 글자는 굵은 검정색으로 되어 있지요. 

화소도 엄청 크지요. 200ppi, 300ppi 수준이 아니에요. 회사원들이 많이 쓰는 탁상용 계신기는 화소 하나가 가로 2~3mm, 세로 5~10mm 정도로 일반 디스플레이의 화소와 비교하면 축구공과 축구장 만큼 차이가 납니다. 

그래서 백라이트 없이 밝은 곳에서도 글자가 잘 보입니다.

제가 차고 있는 Suunto Ambit의 디스플레이도 RLCD예요. 이건 화소가 전자계산기 보다 작아요. 그래도 200ppi에는 턱없이 부족합니다. 이 LCD를 디스플레이로 만든게 RLCD입니다. 중국의 한 업체가 이 기술을 발전시켰나봅니다.

RLCD는 백라이트가 없어 책을 볼 때 눈이 편안하고, 반응 속도도 EPD보다 빠릅니다. 동영상도 볼 수 있는 수준이지요. 백라이트가 없으니 EPD만큼은 아니어도 배터리가 오래 갈 것 같습니다. EPD보다 더 선명한 컬러 지원도 됩니다. 다만, 얼마나 밝게 보일지는 의문입니다. LCD 특성상, 어두운 새벽녘에 글자를 보는 듯한 느낌이 아닐까 싶어요.

이 기술이 적용 된 기기가 출시되었으니 확인해 볼 수 있겠지요.

지원사업 때문에 일이 몰려서 한동안 정신 없었네요.

많이 쓰는 스타일이 들어와 소개합니다.

이런 세로 제목 스타일이에요.

유통 중인 책을 보면 이런 제목은 이미지로 많이 넣던데,

텍스트로 간단히 스타일을 잡을 수 있습니다.

전자책으로는 이렇게 보여요.

CSS 속성은 이렇습니다.

h3 {

    writing-mode: vertical-lr;

    font-family: "제목";

    font-size: 1.3em;

    color: #EC7289;

    ...

    ...

}

writing-mode라는 속성을 사용했어요.

이 속성이 글자를 세로로 표현해 줍니다.

그런데 영문이나 문장부호는 가로로 놓일 거예요.

그래서

.txt_eng_spacing {

letter-spacing : 0;

writing-mode: initial;

}

이렇게 영문 스타일은 writing-mode가 적용되지 않도록 스타일을 잡았지요.

Writing-mode는 국내 유통사 뷰어에서 문제가 생겨 거의 안썼는데

지금은 리디북스 안드로이드 뷰어 외에는 잘 표현됩니다.

리디 안드로이드 뷰어도 몇가지 설정만 해 주면 잘 나오고요.

세로로 글자를 표현하고 싶을 때 writing-mode를 잊지 마세요~

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다. 

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

===========

제작 문의

   - byword77@gmail.com 로 메일 주시면 빠르게 답변 드립니다.

제작 기간

   - 초급 : 3일 이내

   - 중급 : 3일 ~ 5일

   - 고급 : 5일 ~ 7일

      * 제작 기간은 책의 분량, 이미지 수, 편집 스타일에 따라 달라질 수 있습니다.

제작 비용

   - 일반 제작 : 내부 단가표에 따름

      * 제작 견적을 요청하시면 단가표와 제작 견적서를 보내드립니다. 

   - 제작 지원 : 출판문화산업진흥원의 제작 지원 지급 기준에 따름

      * 한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정도서는 추가 비용 없이 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작비를 산정하고 계산서를 발급해 드립니다.

===========

내맘대로의 EPUBGUIDE.NET은?

1. 오랜 경험과 제작 노하우

내맘대로의 EPUBGUIDE.NET은 10년 넘게 전자책 포멧에 대해 연구하여 EPUB 뿐 아니라 PDF, 카카오페이지 등 다양한 전자책 제작 노하우를 보유하고 있습니다. 

국내 최초로 EPUB 전자책 포멧의 상업화(교보문고)를 주도하고 전자책 뷰어를 직접 설계/개발한 경험이 있으며, EPUB 상업화 초기부터 EPUB 제작 및 편집 기술을 전수하고 있습니다. 전자책 제작 방법을 찾으면 마지막은 언제나 내맘대로의 EPUBGUIDE.NET으로 연결될 정도로 많은 데이터가 축적되어 있습니다. 

2. 종이책 편집을 그대로 전자책으로 표현 

전자책과 종이책은 서로 다릅니다. 그렇기 때문에 전자책으로 표현할 수 없는 스타일이 있습니다. 하지만 이는 아주 작은 부분이고 종이책에 담은 편집은 대부분 전자책에도 담을 수 있습니다. '전자책이라서 안돼'라는 말을 들으셨다면 '내맘대로의 EPUBGUIDE.NET'에 문의하세요. 전자책이기 때문에 안되는지, 편집자의 경험 부족인지 정확히 알려드립니다.

3. 유통사 전자책 뷰어를 아는 전자책 제작자

전자책을 제대로 만들려면 전자책 뷰어를 제대로 이해하고 있어야 합니다. 내맘대로의 EPUBGUIDE.NET은 유통사 뷰어 별로 스타일이 어떻게 적용되는지 각 유통사의 전자책 뷰어를 연구합니다. 

4. EPUB 표준을 연구하는 표준위원

장애인 접근성 표준, EDUPUB(현재 EPUB for Education으로 변경) 등 TTA, KERIS 등에서 연구하고 발표하는 전자책 표준위원으로 활동하였습니다. 전자책 표준을 제대로 이해하고 전자책을 제작하기 때문에 전자책 제작시 발생하는 다양한 문제를 제대로 이해하고 해결할 수 있습니다.

5. 전자책 편집자를 키우는 편집자

'내맘대로'는 국립중앙도서관, 전자출판협회, 여성인력센터 등 다양한 기관에서 전자책 제작 강의를 하며 전자책 편집자를 키우는 편집자입니다. "제대로 된 전자책 한권 잘 만들기 Sigil Using Bible", "교보문고가 제공하는 EPUB 제작가이드" 등의 책을 저술한 저자이기도 합니다. 

회원 중 한분이 문의 주시면서

전자책으로 표현한 여러 스타일을 보고싶다(대충 이런 의미)는 의견을 주셨어요.

그래서 전자책책을 만들면서 재미있는 스타일이 있으면 자주 올리겠습니다.

오늘 소개할 스타일은, '나는 장례식장 직원입니다'라는 여름에 잘 어울릴 것 같은 제목의 책이에요.

제목 아래에 밑줄이 있고, 유령(?) 2명이 제목 옆에 붙어있는 스타일입니다.

그냥 보면 쉬워보이지만, 생각보다 까다로와요.

오른쪽 끝에 이미지 넣음 되겠지 생각하셨다면, 넣어보세요. 

화면 폭에 따라 문제가 생기거든요.

그리고 이미지를 넣어야 하니 태그가 엄청 길어지겠지요.

뷰어 폭이 좁아도 자연스럽게 줄바꿈이 됩니다. 유령은 밑줄에 계속 붙어있고요.

스타일과 HTML 코드는 이렇습니다.

h3 제목 태그가 아주 깔끔하지요? 대신 CSS는 좀 복잡해요.

<h3>내 눈에만 보이는 게 있다면</h3>

h3 {

    margin-bottom: 5em;

    font-family: "제목바탕";

    color: #A264A6;

    border-bottom: 2px solid #43403E;

    padding-bottom: 0.7em;

    padding-right: 4em;

    font-size: 1.2em;

    background-image: url("../Images/title_bullet.png");

    background-size: 4em 1.5em;

    background-repeat: no-repeat;

    background-position: bottom right;

    font-weight: normal;

}

목차는 몇가지 재미있는 스타일이 들어있어요.

먼저, [차례]라는 목차 페이지 제목입니다.

둥근 테두리에 글자를 넣었지요.

이건 여러번 소개한적 있지요? 

border-radius를 이용합니다.

그런데 세로 정렬이 안될거예요.

'차례'라는 글자의 상하 가운데 정렬이 안될 때는 

display : table-cell; 속성을 써보세요.

vertical-align은 inline 속성 태그만 적용됩니다.

inline 속성은 height를 적용할 수 없지요.

flex나 grid를 적용해 정렬을 할 수도 있지만, CSS코드가 엄청 복잡해지고

box 속성을 주고, box-orient를 주기에도 좀 거창해집니다. 

이럴 때 display : table-cell을 꼼수처럼 쓸 수있어요.

.TOC_title {

    border: 1px solid #9F6EAF;

    color: #9F6EAF;

    display: table-cell;

vertical-align : middle;

box-sizing : border-box;

    font-size: 0.8em;

    width: 2.5em;

    height: 2.5em;

    border-radius: 1.5em;

    text-align: center;

}

그리고, 장 제목과 절 제목을 좌우로 배치한건,

간단하게 table을 썼습니다.

grid를 쓰려다가, 배보다 배꼽이 더 커지는 것 같아서

쉽게 갈 수 있는 table을 사용했어요.

왼쪽 셀은 고정, 오른쪽 셀은 가변으로 두면 폭이 바뀌더라도 장 제목으 흐트러지지 않지요.