내맘대로의 EPUB 제작 가이드

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

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

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

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

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

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

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을 사용했어요.

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

Sigil의 모든 메뉴를 번역한 파일입니다.

번역율 99.9%입니다.

모든 항목을 번역했다 생각했는데 몇개 메뉴가 영문으로 뜨네요.

번역 내용을 다시 확인해 봐야 할 것 같습니다. 

첨부파일을 다운로드 받은 후 

C:\Program Files\Sigil\translations

이 폴더에 복사하면 메뉴를 한글로 선택할 수 있습니다.

Sigil의 [편집 > 설정 > 언어]에서 [사용자 인터페이스 언어]를 [한국어]로 선택하면 메뉴가 한글로 변경됩니다.

번역이 잘못됐거나 어색한 곳이 있으면 알려주세요.

재미있는 스타일을 문의 주신 분이 있어 만들어 봤습니다.

스타일은 이렇게 2종류예요.

프롤로그 제목은 위에처럼 화살표가 있고 제목이 들어갑니다.

장제목은 화살표 앞에 번호가 붙어야 하고요.

제목 옆에 선이 들어간 스타일은 많이 만들어봤는데, 

선 끝에 화살표 처럼 포인트가 들어간 스타일은 선을 넣는 스타일과 다릅니다. 

선을 넣는 것 보다 까다롭지요.

전자책이기 때문에 화면 크기가 늘었다 줄었다 할 수 있지요.

그리고 장 제목 글자 수도 일정하지 않습니다.

책에 따라 장 번호가 1, 01, 001 처럼 여러 자리일 수도 있어요.

스타일을 만드는 방법은 수백가지예요.

편집자에 따라 중요하게 생각하는 포인트가 다를거고,

그에 따라 스타일도 달라집니다.

저 제목 스타일을 봤을 때 제가 중요하게 생각한 부분은 장제목이었어요.

화살표 길이는 폭에 따라 늘었다 줄었다 해도 되지만, 제목은 가능한 한줄로 표시되야 한다고 생각했습니다.

장 제목과 장 번호는 글자 수에 따라 늘었다 줄었다 하지만, 뷰어 폭에는 영향을 받지 않아야 합니다.

뷰어 폭이 제목의 폭보다 좁다면 줄이 바뀌어야 하지만, 

한 줄에 제목이 들어갈 정도의 폭이라면 제목은 한 줄로 표시하고 싶었습니다.

그리고 제목 글자 수가 바뀌더라도 화살표 길이가 알아서 조절돼야겠지요.

각 장 제목마다 폭을 하나씩 맞추기는 귀찮으니까요.

화살표도 중요합니다. 처음엔 간단히 이미지를 넣으면 되겠지 생각했는데

화살표 길이를 뷰어 폭에 자동으로 맞추려면 이미지로 넣으면 안되더라구요.

이미지 가로 길이를 100%로 하면 화살표 머리 부분이 가로로 찌그러지고, 가로, 세로를 100%로 맞추면 선의 폭이 두꺼워지면서 화살표 머리가 커집니다.

제가 생각한 해결책은, 화살표를 아주 길게 만들어 웬만한 뷰어 가로 폭에서도 잘리지 않도록 하고

배경으로 넣는 방법입니다.

이 외에도 다른 여러 방법이 있어요.

삼각형을 오른쪽 끝에 정렬하고, 삼각형 왼쪽에 이미지로 선을 넣은 후 글자 간격을 없애던가,

테이블 속성을 이용해 상자 2개를 붙여 왼쪽은 선을, 오른쪽은 삼각형을 넣던가,

border로 선을 만들고, 선 끝에 삼각형을 넣은 후 margin으로 겹치게 해도 되겠네요.

제가 만든 스타일은 이렇습니다.

  <style>

div.box_title {

width : 100%;

display : flex;

}

.arrow {

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

background-position : right top;

background-repeat : no-repeat;

flex-basis : 100%;

min-width : 2em;

height : 1em;

-ms-flex: 1;

flex: 1;

}

.txt_chap_title {

    text-align: right;

margin-left : 1em;

}

.txt_chap_No {

font-size : 2em;

color : grey;

    font-style: italic;

margin-right : 0.5em;

}

.txt_grey_small {

    color: grey;

    font-weight: bold;

    font-size: 0.8em;

}

</style>

flex를 이용해 div 박스 3개를 가로로 놓고, 가운데 상자 크기가 자동으로 조절되도록 했습니다.

장 번호와 제목 상자는 글자 양에 따라 폭이 알아서 바뀌고요.

스타일을 적용하면 이렇게 보입니다.

가로 폭이 넓으면 화살표만 길어져요.

그리고 화살표 상자에 min-width를 둬서가로 폭이 아주 좁아져도 화살표가 사라지지 않게 했습니다.

화살표가 남으면 제목이 줄바꿈 되지요.

드디어 메뉴와 설명 번역을 모두 끝냈습니다.

번역 하는데 1년도 넘게 걸린 것 같네요.

제 앞에 1,000개 정도 먼저 번역을 하신 분이 계시고,

제가 뒤를 이어 나머지를 번역했습니다.

다음 업데이트에는 한글 메뉴가 포함되길 기대해 봅니다^^