내맘대로의 EPUB 제작 가이드

연 초부터 재미있는 스타일(?)로 편집된 책이 많이 들어오네요.

스타일을 어떻게 잡을까 고민하는 재미는 있지만, 제작 시간(ㅜ.ㅜ)이 늘어나 납기 맞추느라 애먹고 있습니다.

책 한권을 2~3일에 끝내야 하는데 스타일 고민하며 장난(?)하다 보면 한두시간이 금방 지나가네요.

PDF에서 캡쳐한 이미지입니다.

이렇게 제목 좌우를 커다란 중괄호로 감싼 스타일이에요.

이미지로 넣으면 간단하겠지만, 이미지 보다는 텍스트가 깔끔하기 때문에 어떻게 넣을가 고민해 봤습니다.

고민 결과는 이렇습니다.

HTML 코드는 간단해요.

<h3 class="title_prologue"><span class="title_prologue_body">프롤로그</span></h3>

참 쉽지요^^?

이렇게 쉬운데 방법을 생각하는데까지 시간이 오래 걸리네요.

비슷한 스타일이 또 있습니다.

목차 페이지에서는 장 제목을 이렇게 감쌌어요.

PDF 캡쳐 이미지입니다.

이 스타일 역시 HTML 코드는 간단합니다.

<p class="TOC_chap_title_orange"><span class="TOC_chap_title">1장_ <br/>여기 여자들도 일하고 있습니다</span></p>

이런 스타일을 만들 때 신경써야 할 부분은 상하 중앙 정렬이에요.

중앙 정렬은 한번 설명한 적이 있으니 궁금하신 분은 참고하세요.

https://www.epubguide.net/290

HTML 코드가 단순하다는 것은 CSS가 복잡하다는 뜻입니다.

보기엔 간단해 보이지만 CSS는 좀 복잡해요.

어려운 CSS 속성이 들어가지는 않았습니다.

제가 한번 이상 설명한 속성들 뿐이지요.

그런 속성을 어떻게 조합하느냐에 따라 다양한 효과를 낼 수있어요.

전자책 책공장 회원님들은 이런 스타일을 어떻게 표현하시겠어요?

올해도 전자책 제작 지원 사업이 초기화(?) 됐습니다.

텍스트형 전자책 지원 사업은 많이 아시고, 분기에 한번씩 지원을 하니 설명드릴 필요가 없겠지요?

장애인접근성 전자책 제작 지원사업을 아시나요?

https://www.kpipa.or.kr/ebook/disabledSummary.do

매년 40여종의 도서를 선정해 제작비를 지원하고 있습니다.

지원 형식은 2가지예요.

1. 기존 전자책의 접근성 전자책으로의 변환 : 최대 100만원, 30종 지원

2. 신규 접근성 전자책 기획안 발굴 및 제작 : 최대 500만원, 10종 지원

이 중 1번은 [독서장애인을 위한 전자 책 접근성 가이드라인]을 적용한 EPUB3로 제작을 하면 되기 때문에 어떤 책이든 지원을 할 수 있습니다. EPUB으로 유통하고 있는 전자책을 변환해도 되고요.

장애인 접근성 EPUB은 기존 EPUB과 편집 방식이 많아 다릅니다.

스타일 다 빼고, 텍스트와 이미지만 놓여 있어 처음 보는 분들은 이게 뭔 책이야 싶을 정도로 단순하지요.

하지만 아주 까다로운 조건을 충족시켜야 하기 때문에 제작 시간은 일반 도서에 비해 더 오래 걸려요.

책과 동일하게 페이지를 넣어 줘야 하고, 이미지는 [두 남녀가 서로 바라보고 서서 악수를 하는 사진] 처럼 모든 이미지에 자세한 설명(대체 텍스트)을 담아야 합니다. 그러다 보니 지원 비용도 텍스트형 전자책 제작비 보다 높지요.

직접 제작을 해보고 싶어 제작 지침이 필요하신 분은 여기를 참고하세요.

https://www.epubguide.net/252

그리고 장애인접근성 지원사업에 참여하고 싶지만 제작이 byword77@gmail.com으로 연락주세요. 매년 3~4종씩 제작을 하고 있는데 올해는 더 많은 책들이 장애인접근성 도서로 제작됐으면 합니다. 지원 비용 내에서 제작을 해 드리니 접근성도서 제작할 곳을 찾지 못하셨다면 연락주세요. 

Sigil 1.0.0 버전을 설치하면 메뉴가 영문으로 나옵니다.

열심히 한국어 메뉴 번역을 하고 있는데 혼자 하려니 벅차네요 ㅜ.ㅜ

가끔 전자책 유통이나 제작과 관련해서 쓴소리를 하면

'네가 뭘 아느냐', '네가 전자출판에 기여한게 뭐냐' 운운 하며 욕하는 분들이 있는데

이런 분들이 좀 나서서 Sigil 메뉴 번역을 도와주면 참 좋을 것 같습니다.

https://www.transifex.com/zdpo/sigil/language/ko/

번역에 동참하고 싶은 분들은 여기 들어가서 번역해주세요.

저보다 앞서 노력해 주신 분이 있고, 제가 뒤를 이어받아 50% 정도 번역을 해 놓았어요.

Pageedit는 메뉴가 몇개 안돼 번역을 마쳤어요.

그래서 Pageedit는 설치하면 한글 메뉴가 나옵니다.

EPUBCheck도 열심히 번역을 해서 한글화 해 놨고요.

EPUB2.0, EPUB3.x, 장애인접근성 표준안 등도 참여해서 번역하고, 한글 표준안 만드는 정도의 노력을 하고 있습니다.

그러니 '네가 뭘 아느냐', '네가 전자출판에 기여한게 뭐냐' 하는 분들(이정도 말할 정도면 저보다 더 열심인거잖아요)도 Sigil 번역자에 이름 한줄 남기는 노력 정도는 해주면 얼마나 좋을까요?

Sigil 제작자 그룹의 정책이 바뀌어서 0.9.5 이후 버전부터는 번역이 완료 돼야 Sigil 메뉴에 포함을 시켜줍니다.

지금은 한글 메뉴가 표시되지 않아요.

그래서 종종 Sigil 설치했는데 한글 메뉴가 안보인다는 문의를 받습니다.

한글 메뉴가 안보이는건 한글 메뉴가 포힘되지 않았기 때문이에요.

그러니 한글 메뉴 보고 싶으면 번역에 동참해 주세요....

라고 말하고 싶지만, Sigil을 처음 시작하는 분들은 영문 메뉴가 어려울거예요.

그래서 꼼수를 준비했습니다.

첨부한 sigil_ko.qm 파일을 다운로드 하세요.

이 파일을 Sigil 설치 폴더에 복사해 넣습니다.

C:\Program Files\Sigil\translations

기본 설치를 했다면 폴더 경로는 여기일거예요.

다른 경로에 설치했다면 설치한 경로를 찾아가세요.

이 파일을 복사해 넣은 후 [Sigil> 설정 > 언어]에 들어가면 한국어가 보일거예요.

사용자 인터페이스 언어를 한국으로 지정한 후 Sigil을 종료하고 다시 실행시키면 한글 메뉴가 보입니다.

이 메뉴는 50% 정도 밖에 한글화 되지 않은거예요. 많은 메뉴가 영문으로 나옵니다.

그래도 많이 사용하는 메뉴는 대부분 한글로 볼 수 있으니 처음 Sigil을 접하는 분들께는 도움이 될거예요.

오늘은 상하 중앙 정렬 문제 하나 드려봅니다.

저도 할 때 마다 잊어서 정리해 두고 필요할 대마다 찾아볼 생각으로 올리는거예요 ^^;

정렬은 2가지 형태가 있습니다.

좌 우 정렬. 이건 가운데 정렬이라 하고, center로 쓰지요.

text-align : center;

가장 많이 쓰는 스타일 중 하나이기도 합니다.

중앙 정렬은 영문으로는 있는데 한국어로는 이거다 하고 정해놓은 용어가 없는 것 같아요.

중앙인데 가운데라고 쓰기도 하고...

영문으로는 vertical-align이라는 스타일이 있고, 이 스타일의 중앙 값을 middle로 씁니다.

text-align은 좌우의 가운데(center)지만 vertical-align은 상하의 가운데(middle)를 뜻해요.

좌우 가운데, 상하 가운데 하면 헷갈리니까, 저는 좌우는 가운데 정렬로, 상하는 중앙 정렬로 쓸게요.

앞에 좌우, 상하 없이 가운데 하면 좌우, 중앙 하면 상하 정렬입니다. 

그런데 vertical-align은 적용이 잘 안될거예요.

예를 들어 이런거.

장 제목을 표현하려면 상하 중앙 정렬이 필요합니다.

EPUB에서는 이렇게 보입니다.

눈에 확 들어오도록 세로 길이를 크게 늘려봤어요.

이러면 중앙정렬이 어떤건지 딱 보이지요?

중앙 정렬은 생각보다 까다로와요.

vertical-align이 아무때나 쓸 수 없기 때문이지요.

vertical-align은 inline 속성에서만 쓸 수 있습니다.

그래서 box나 block 속성에서는 적용이 안되지요.

가장 쉬운건

display : table-cell;

vertical-align : middle;

속성을 줘서 inline화 시키는거예요.

하지만 인라인 속성화 시키면 display:block; 속성을 써서 줄바꿈을 못합니다. 

저는 주로 중앙정렬 할 때 box-orient를 썼어요.

display: box;

box-orient: horizontal;

box-align: center;

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-align: center;

근데 이렇게 하면 table-cell처럼 상자 안쪽에도 영향을 줘서 display : block; 이 적용되지 않아요.

물론, 줄바꿈을 블럭 태그로 나눠서 처리하면 되지요.

이러면 제목을 한 줄에 표현할 수 없다는 문제가 생기지만요.

이럴 때 flex를 쓸 수 있습니다.

display:flex;는 박스 모델에서 점전 비중이 높아지고 있어요.

box, talble, block 등의 속성들이 flex 하나로 모두 처리 가능해졌지요.

.title_sec {

height : 4em;

border-left : 2px solid #000000;

border-radius : 3em;

padding-left : 1em;

font-size : 1.2em;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-direction: column;

  flex-direction: column;

  -webkit-justify-content: center;

  justify-content: center;

text-indent : 0;

margin-bottom : 3em;

box-sizing : border-box;

}

.title_sec .title_sec_No {

display : block;

}

<h3 class="title_sec"><span class="title_sec_No">첫 번째 기술: </span>다른 여성과 경쟁하지 마라</h3>

사실 

.title_sec .title_sec_No {

display : block;

}

이 스타일도 필요 없어요. 이미 flex가 적용됐기 때문에 block을 주지 않아도 줄바꿈이 됩니다.

table-cell에서 쓸 수 없던 text-align:center;도 쓸 수 있어요.

text-align을 쓰면 상하좌우 가운데 정렬이 되지요.

상자 안에서 상하 중앙 정렬을 해야할 때 유용한 스타일이니 꼭 기억해 두세요.