내맘대로의 EPUB 제작 가이드

책을 위한 가이드 북을 만들어 달라는 제안이 와서 작업을 했습니다.

디자인이 독특해서 소개해드려요.

제목 스타일은 이렇게 생겼어요.

이걸 어떻게 표현할까 고민하다, 아이디어가 떠올라 만들어 봤습니다.

처음엔 간단할 줄 알았는데, 생각보다 시간이 많이 걸렸어요. 

스타일 잡는데만 거의 30분 정도? 

물론, 방향을 잡기까지가 그 정도라는 것이지요.

글자 세로쓰기는 글상자 폭을 좁힐까 하다 세로쓰기 스타일을 적용했지요.

방향을 확정하고 스타일을 잡으니 이렇게 보입니다.

글자를 키워도 이렇게 깨지지 않고 잘 보여요.

그 다음 스타일은 책을 만들다 보면 종종 접하는 디자인이에요.

이건 간단히 테이블로 작업했습니다.

테이블은 생각할게 많지 않지만, 태그가 복잡해 편집하는 시간이 오래 걸리지요.

그래도 이런 디자인을 작업 할 때 가장 깔끔합니다.

테이블을 쓰지 않는다면 flex를 쓰면 됩니다.

grid는 몇몇 뷰어에서 깨질 때가 있어요. 가장 좋은 방식이지만, 현실적으로 문제가 있으니 뷰어 테스트를 제대로 해야되요.

이 스타일은 EPUB에서 이렇게 보입니다.

글자 크기를 키우면 이렇게...

어떤 편집자는 주소 끝에 줄바꿈 되어 있는 '마'자를 올려달라고 하는데,

이건 전자책이지 종이책이 아니에요.

'마'자를 올리고 싶다면 글자 크기를 줄이거나, 뷰어의 폭을 넓히면 됩니다.

출판계 사정을 아는 사람은 다 아는 사실인데 북토피아는 출판사들이 모여 만들었다.

그리고 이 때, 아래 기사에도 나오지만  "저작권 인식이 제대로 갖춰지지 않았을 당시의 과도기에 만들어진 회사였다"

이 당시에 운영 주체가 누구인지 잘 확인해 봐야 한다. 이 당시에도 이미

"과거 북토피아에 자신의 동의 없이 자신의 작품이 올라간 것을 발견하고 ‘삭제하라’고 출판사에 말한 후 확인서까지 받은 자료가 해당 말뭉치 사업 피해 작품 리스트에 포함된 것을 발견하였다."

는 문제가, 이런 류의 문제가 수없이 제기되고 있었다.

두 기사를 잘 읽어 보면 문제의 중심에 있는 단체가 어디인지 쉽게 파악할 수 있는데, 이걸 파악하지 못하는 출판인들이 참 많은 것 같다.

https://www.donga.com/news/Culture/article/all/19990416/7434131/1

출판인회의「인터넷서점 북토피아」설립

글자크기 설정 레이어 열기 뉴스듣기 프린트
출판사들이 힘을 합쳐 사이버서점을 세운다. 단행본 출판사들의 모임인 한국출판인회의는 오는 8월부터 인터넷 서점 ‘북토피아’를 운영한다고 최근 밝혔다.
북토피아는 국내 최초의 출판사 연합 전자서점. 연말까지 참여한 2백50개 출판사의 홈페이지를 모두 연결시킬 수 있는 시스템을 갖춰 본격적인 고객서비스를 시작하고 세계최대 전자서점 아마존에도 대항할 계획이다.

북토피아에서 독자들은 바로 책을 살 수 있고 책구입과 관련된 구체적인 정보도 확인할 수 있다. 또 해당 출판사의 홈페이지도 방문가능하다. 북토피아에는 △저자와의 대화방 △책에 얽힌 뒷이야기 △편집자와 관련 평론가들의 서평 등 각종 도서정보가 제공된다.

북토피아의 출범은 인터넷 최대 서점인 아마존의 국내 진출에 맞서고 도서판매 질서를 바로잡기 위한 고육지책. 출판인회의 인터넷소위 박정모위원장은 “아마존의‘할인판매’는 한국출판계를 와해시키는 행위다”라고 비난하고 신간만은 철저히 정가제를 지켜나갈 것이라고 밝혔다.02―393―1133

〈정은령기자〉ryung@donga.com



=====

https://m.khan.co.kr/opinion/column/article/202209130300045#c2b
[직설] 출판 저작권 좀먹는 낡은 인식

이융희 문화연구자
지난 한 달, 출판콘텐츠 시장에 한 출판 물류 회사가 1만5000종의 도서 저작권을 위반한 사례가 드러나 큰 이슈가 되었다. 출판물류회사인 웅진북센이 국립국어원이 진행하는 ‘말뭉치 사업’ 중 ‘문어 말뭉치 사업’에 작가와 출판사의 저작물을 허락 없이 무단으로 사용한 것이다. 웅진북센은 2010년 인수한 북토피아의 콘텐츠 1만5933종에서 6억2271만7166개 어절을 빅데이터로 활용했는데, 문제는 이 과정에서 북토피아에 콘텐츠를 제공한 1188개 출판사의 허가 없이 무단으로 콘텐츠를 사용했다.

한국출판인회의는 문제 해결을 위해 지난달 23일 간담회를 개최했다. 그 자리에서 웅진북센은 북토피아 콘텐츠 제공업체와 저작권 관련 정산을 진행 중이며 해당 금액을 전자책 정가의 70%의 3copy로 책정했다고 알린 후 이것은 정산일 뿐 피해보상이 아니라고 입장을 밝혔다.

웅진북센의 대응은 여러모로 문제적이다. 한 장르 전문 출판사는 이 사태를 접한 직후 도서 리스트가 공개되지 않았을 때 웅진북센 측에 자신들의 작품이 포함되었는지 질의하였고, 그때 장르소설은 대상이 아니었다는 답변을 들었지만, 후일 확인 결과 로크미디어나 디앤씨미디어 등 수많은 장르 전문 출판물도 포함된 것을 확인하였다. 이는 웅진이 피해 사례를 제대로 파악조차 하지 못하였음을 여실히 보여준다.

더욱 심각한 건 웅진북센이 보여준 저작권에 대한 인식 그 자체다. 정산이란 결국 해당 자료를 사용한 이후에 그 대가를 지불하는 것이다. 하지만 이미 사건이 벌어진 이후 저작권 사용료를 자신들의 기준에 맞춰 정산하는 것은 강매에 다름 아니다. 올바른 저작권 인식이란 저작권자에게 저작물을 사용할 것인지 동의를 구하는 것부터 시작되어야 하지 않나.

거기에 망한 출판사가 많다는 점, 그리고 북토피아가 인터넷 전자책 시작의 초창기 모델이라 저작권 인식이 제대로 갖춰지지 않았을 당시의 과도기에 만들어진 회사였다는 것도 문제를 가중시킨다. 모 작가는 과거 북토피아에 자신의 동의 없이 자신의 작품이 올라간 것을 발견하고 ‘삭제하라’고 출판사에 말한 후 확인서까지 받은 자료가 해당 말뭉치 사업 피해 작품 리스트에 포함된 것을 발견하였다. 그 누구도 허락한 적 없는데 유령처럼 사용된 자료에 대한 응대가 어떻게 정산처리로 일축될 수 있겠는가. 피해를 입은 1118개 출판사 중 501개 출판사가 이미 폐업한 상태이기 때문에 작가들이 자기 저작물이 도용당했다는 사실을 알기조차 어려운 실정이다. 해당 피해 자료는 국립국어원 자료실에 있는 2020년 4월27일자 <문어 말뭉치 원문 자료 수집>에 붙어 있는 최종보고서에 올라와 있다.

최근 콘텐츠 업계에선 불법웹툰 문제나 웹소설 등의 저작권 문제를 해결하고 인식을 개선하는 것이 콘텐츠 생태계를 더욱 발전할 수 있다는 것에 합의하고 공동협의체나 대응팀을 적극적으로 만들고 있다. 시대가 변화하는 이때, 더 이상 출판 저작권에 대한 낡은 인식으로 인한 사건과 대응이 거대한 출판유통 업체에 의해서 주도되고 있다는 건 경악스러운 일이다. 이러한 낡은 인식을 타파하고 보다 건강한 시장을 만들기 위해서라도 해당 사건 당사자들의 반성과 올바른 후속 조치가 이어져야 할 것이다.

초보 편집자는 단순하지 않은 것을 단순하게 생각할 때가 있습니다.

예를 들면 이런 스타일이요.

제목 위/아래로 이렇게 패턴처럼 보이는 선이 들어가 있습니다.

이 선은 어떻게 넣을까요?

가로로 긴 이미지를 width : 100%;로 넣으면 되지 않아?

이렇게 생각하는 분들이 많을거예요.

가로 폭에 맞춰 넣어도 문제는 없습니다.

그런데 가로 폭에 맞추면, 태블릿에서 가로보기를 하는 독자는 어떻게 보일까요?

잘못된 것은 없지만, 뭔가 아쉽지 않으세요?

그럼 아래 스타일은 어떤가요?

가로보기를 해도 일정 크기를 유지합니다.

스마트폰 처럼 화면 폭이 좁을 때는 화면 폭에 맞춰 100%을 유지하지만,

화면이 일정 크기 이상 늘어나면 더 이상 늘어나지 않도록 스타일을 잡았습니다.

이렇게 하면 PC/태블릿/스마트폰 어떤 기기로 봐도 더 깔끔해 보이지요.

이미지나 다른 패턴을 넣을 때도 무조건 100%로 하거나 고정 크기로 넣기 보다는

작은 화면과 큰 화면 모두 '잘 보이도록' 고민을 해야합니다.

Sigil은 특별한 기능을 갖고 있는 클래스/태그/속성이 몇개 있습니다.

Sigil에서만 쓰는 이런 코드를 잘 활용하면 전자책을 편하게 만들 수 있습니다.

1.  표지 추가 기능에 사용하는 속성

표지는 이미지를 선택해 추가합니다.

이미지는 폭과 높이가 제각각이기 때문에 이미지의 폭과 높이를 지정하고 싶을 때 이 속성을 사용할 수 있습니다.

width="SGC_IMAGE_WIDTH"   - 이미지의 폭을 자동으로 계산하여 픽셀 값으로 추가합니다.
height="SGC_IMAGE_HEIGHT" - 이미지의 높이를 자동으로 계산하여 픽셀 값으로 추가합니다.
href="SGC_IMAGE_FILENAME" - 이미지의 파일 경로를 자동으로 추가합니다.

예를 들어, 표지 스타일을 자신만의 코드로 만들고 싶을 때

<div class="cover">

<img class="cover_img" src="SGC_IMAGE_FILENAME" alt="SGC_IMAGE_FILENAME"/>

</div>

<style>

.cover_img {

   width : SGC_IMAGE_WIDTHpx

   height : SGC_IMAGE_HEIGHTpx

}

</style>

이렇게 사용할 수 있지요.

2. class="sigil_not_in_toc"

제목 태그를 사용하면 차례 만들기 기능으로 자동으로 TOC(Table of Contents)를 추가합니다.

그런데 제목 태그를 써도 제목에 넣고 싶지 않을 때가 있습니다.

예를 들어, 부(h1), 장(h2), 절(h3), 소단락(h4)으로 되어 있는 책에 절과 소단락을 TOC에서 빼고 싶다.

<h3 class="sigil_not_in_toc">

<h4 class="sigil_not_in_toc">

제목에 이렇게 클래스를 추가하면 h3, h4 태그가 차례 만들기에 포함되지 않습니다.

3. 장 나누기 표시 : <hr class="sigil_split_marker" />

부, 장, 절 등에서 새로 단락이 시작하는 책이 있습니다.

EPUB으로 책을 편집할 때 책의 구분에 따라 파일을 나누게 되는데

주석 같은 작업은 통으로 작업하고 마지막에 파일을 나누는게 편하지요.

이럴 때 파일을 나눠야 하는 위치에 장나누기 표시를 하면 

[장 나누기 표시 분할] 기능을 이용해 한번에 장을 나눌 수 있습니다.

4. title="..." 

이건 Sigil의 속성은 아니지만 Sigil에서는 특별한 방법으로 사용할 수 있습니다.

1장 좋은 질문을 던지지 못하는 이유 우리는 왜 뻔한 질문을 주고받을까?

장 제목이 이렇게 되어 있을 때 본문에서는

글자색, 글자 모양, 줄바꿈 등으로 제목을 편집할 수 있지만

TOC에서는 이대로 들어갑니다.

본문 제목은 그대로 두고 TOC에서만 제목을 이렇게 수정하고 싶다면?

1장 - 좋은 질문을 던지지 못하는 이유 | 우리는 왜 뻔한 질문을 주고받을까?

이럴 때 title을 사용합니다.

<h1 title="1장 - 좋은 질문을 던지지 못하는 이유 | 우리는 왜 뻔한 질문을 주고받을까?">

1장 좋은 질문을 던지지 못하는 이유 우리는 왜 뻔한 질문을 주고받을까?

</h1>

이렇게 하면 본문에서 제목이 어떤 구조로 되어 있든, 차례 편집기는 title의 정보를 가져옵니다.

5. 차례를 위한 ID : id="sigil_toc_id_*"

나는 추가한 적이 없는데 전자책 편집을 끝내면 이런 ID가 들어갈 때가 있습니다.

이 ID는 차례를 만들 때 자동으로 추가된 ID입니다.

같은 파일 안에서 같은 레벨의 제목이 여러개 있을 때,

<h4>소제목1</h4>

<h4>소제목2</h4>

<h4>소제목3</h4>

차례를 만들면

<h4 id="sigil_toc_id_1">소제목1</h4>

<h4 id="sigil_toc_id_2">소제목2</h4>

<h4 id="sigil_toc_id_3">소제목3</h4>

이렇게 ID가 추가됩니다.