내맘대로의 EPUB 제작 가이드

기초부터 전자책 제작 실습까지

http://paedros.byus.net/sfjikji/book/body.html

전자책이 무엇인지, 어떻게 읽는지 궁금하다면 이 웹사이트에 가보자. ‘한국 구텐베르크 프로젝트’는 전자책 제작을 전문으로 하는 ‘다이피아’가 운영한다. 훈민정음 언해본부터 SF 소설, 아이작 아시모프의 ‘로봇머신X’까지 60여 종을 웹브라우저에서 보여준다. 블로그 글과 달리 전자책 표준 규격인 EPUB을 사용했다. 교보문고나 예스24, 알라딘, 리디북스에서 파는 전자책의 형태를 여기에서 가늠하면 된다.....[더 보기]

영미권에서는 저작권이 말소된 책을 모은 프로젝트 구텐베르크(https://www.gutenberg.org)가 있습니다. 이 곳에 들어가면 수많은 책들을 EPUB, 텍스트, mobi(azw) 등의 다양한 포멧으로 무료로 만날 수 있는데, 영어에 약한 사람들은 그림의 떡입니다.

국내에도 이런 비슷한 프로젝트가 있습니다. 직지, SF직지입니다. 모르는 사람이 더 많지만, 그래도 꾸준히 관리를 하고 있습니다. 국내 직지는 웹으로만 서비스를 하고, SF직지는 PDF와 HWP로 제공을 했는데, EPUB 서비스도 등장을 했네요.

서비스가 분산되는게 조금 아쉽습니다. jikji.org에 EPUB을 제공해 주는 형태였다면 조금 더 신뢰가 갔을거예요. 그래도 의미 있는 시도입니다.

http://www.jikji.org/

'전자책 출판정보 > 출판계 소식' 카테고리의 다른 글

출판 편집자/기획자면 필독! [김DB의 최종분석] (0)	2016.03.08
클릭만으로 책이 되나? 된다! (0)	2016.03.07
[스마트폰 몰입도 UP…'웹소설' 웹툰보다 더 재밌다] (0)	2016.03.02
[VR인사이드] VR 산업은 언제쯤 눈앞에 펼쳐질까? (0)	2016.02.04
There's no way you're getting printed copies of these books. (0)	2016.02.04

스타일시트 추가 및 연결

Sigil 사용 설명서/Sigil로 전자책 제작하기

posted by 내.맘.대.로 2016. 3. 3. 08:37

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

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

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

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

EPUBGUIDE.NET의 핵심만 모았다. 전자책 편집자를 위한 필독서!

클릭 편집 탬플릿 제공,

기초부터 전자책 제작 실습까지

장별로 파일 정리가 끝나면 본격적으로 스타일 편집이 시작된다. 스타일 편집은 장별로 나누기 전에 해도 되지만 편집 내용이 많을 경우 속도가 느려지거나 오류가 발생해 강제 종료가 될 수 있어 주의해야 한다.

편집 순서도 본문부터 편집을 하든, 표지부터 편집을 하든 편집자 취향대로 하면 된다. 여기서는 설명의 편의상 표지부터 순서대로 스타일 편집을 하려고 한다.

앞 장에서 표지 이미지를 삽입했다. 하지만 Sigil 책보기 화면으로 보면 표지가 화면에 제대로 표시되지 않는다. EPUB 전자책을 보는 기기는 크기가 다양하기 때문에 표지는 화면 크기에 맞게 확대/축소되도록 편집을 해야한다.

표지 스타일을 편집하기 위해 먼저 CSS 파일을 추가한다. CSS 파일은 EPUB 파일에서 하나면 충분하지만 필요에 따라 하나 이상 추가할 수도 있다.

빈 스타일시트(CSS 파일) 추가

[파일 > 추가 > 빈 스타일시트]를 이용하거나 [책보기] 창의 Styles 폴더에서 마우스 오른쪽 버튼을 클릭 후 [빈 스타일시트]를 추가한다.

만약 사용하는 CSS 파일이 있다면 [파일 > 추가 > 기존파일]을 눌러 CSS 파일을 추가할 수 있다.

추가된 스타일시트 파일을 열면 아무런 내용도 없는 빈 화면이 나타난다. 여기에 필요한 스타일을 추가한 후 HTML 파일에 연결하면 스타일이 반영된다.

스타일 편집 전에 HTML 파일에 스타일시트를 연결한다. 스타일시트를 연결하지 않으면 편집이 반영되지 않기 때문에 편집 전에 연결하는 것이 좋다.

스타일시트 연결

2.1 스타일시트를 연결할 HTML 파일을 선택한다. 여기서는 모든 파일을 선택한다.

2.2 선택한 파일 위에서 마우스 오른쪽 버튼을 누른 후 [Stylesheets를 연결…]을 클릭한다.

2.3 스타일시트 연결 창이 나오면 원하는 스타일시트를 선택 후 [OK]를 클릭한다.

2.4 스타일시트를 연결 후 cover.xhtml 파일의 코드보기를 하면 아래처럼 스타일시트 파일이 연결된 것을 볼 수 있다.
* 스타일시트 연결 코드. <head>태그 사이에 <link…>로 파일이 연결된 것을 볼 수 있다.

<head>

<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />

</head>

* 스타일시트 연결 전

<head>

</head>

스타일시트가 연결됐으면 이제 책의 스타일을 편집해야 한다. 다음 장에서는 스타일 편집에 대해 설명한다.

'Sigil 사용 설명서 > Sigil로 전자책 제작하기' 카테고리의 다른 글

기본 파일 추가하기 (0)	2016.03.16
HTML 및 CSS 스타일 편집 - ① 필요한 스타일 목록 정하기 (0)	2016.03.16
장 나누기 (4)	2016.02.22
표지 이미지 삽입 (2)	2015.12.24
책 정보(메타데이터) 입력 (0)	2015.12.24

[스마트폰 몰입도 UP…'웹소설' 웹툰보다 더 재밌다]

전자책 출판정보/출판계 소식

posted by 내.맘.대.로 2016. 3. 2. 09:11

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

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

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

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

EPUBGUIDE.NET의 핵심만 모았다. 전자책 편집자를 위한 필독서!

클릭 편집 탬플릿 제공,

기초부터 전자책 제작 실습까지

스마트폰 몰입도 UP…'웹소설' 웹툰보다 더 재밌다

...중략...

2000년대 초반 웹소설 전문사이트로 문을 연 조아라는 2008년 최초로 웹소설 유료판매를 시작했다. 2009년 2억원이던 연매출이 지난해 125억원으로 가파르게 상승했다. 스마트폰의 보급률 상승과 겹친다. 이수희 조아라 대표는 “지난해 사용자 분석결과 스마트폰으로 웹소설을 본 사람은 92%지만 PC로 본 사람은 8%에 그쳤다”며 “웹소설은 스마트폰으로 보는 것이 공식화된 듯하다”고 밝혔다.

조아라 집계에 따르면 웹소설 독자층은 20대가 42%로 가장 큰 비중을 차지하고 있다. 이어 30대(21%), 40대(14%), 10대(12%) 순으로 나타났고 50대 이상도 11%를 차지한다. 전 연령대가 웹소설을 거부감없이 받아들이고 있는 것으로 풀이된다. 성별도 남녀가 51대 49로 큰 차이가 없다.

...중략...

스마트폰이 보급되면서 남성-판무(판타지/무협) 중심이던 전자책 시장이 로맨스로 확대됐습니다. 2012년을 기준으로 이전에는 남성이 주요 독자였고 판무 중심으로 소비되던 장르 콘텐츠가 교보문고의 디키스토리(지금은 잊혀진 이름이지만...)를 시작으로 북팔, 네이버 웹소설로 이어지며 로맨스 강세 현상이 나타납니다. 독자층도 로맨스 쪽은 30대~40대 여성이 주를 이루고 있습니다.
조아라, 문피아 등 판타지와 무협이 중심이고 연재형 콘텐츠가 주요 상품인 곳은 여전히 연령대가 낮네요. 여성독자가 크게 늘긴 했지만 남성 비중이 약간 높습니다.

순수문학과 장르문학을 구분하며 순수문학 작가만 작가 취급을 하던 심하게 왜곡된 한국 소설 시장이 이제 제 모습을 찾으려나봅니다.

'전자책 출판정보 > 출판계 소식' 카테고리의 다른 글

클릭만으로 책이 되나? 된다! (0)	2016.03.07
전자책 체험 사이트 '한국 구텐베르크 프로젝트' (0)	2016.03.04
[VR인사이드] VR 산업은 언제쯤 눈앞에 펼쳐질까? (0)	2016.02.04
There's no way you're getting printed copies of these books. (0)	2016.02.04
예스24, 열린 스토리 플랫폼 'e연재 PLUS+' 새단장 (0)	2016.02.03

전자책 주석 처리 방법(팝업 + 링크)

Tip&Tech

posted by 내.맘.대.로 2016. 2. 26. 16:00

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

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

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

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

EPUBGUIDE.NET의 핵심만 모았다. 전자책 편집자를 위한 필독서!

클릭 편집 탬플릿 제공,

기초부터 전자책 제작 실습까지

주석처리 sample.epub

전자책에 주석을 삽입하는 방법입니다.

전자책이 종이책보다 편리해야 하는 기능 중 하나가 주석입니다. 그런데 지금까지는 전자책으로 주석 보는게 더 불편했었습니다. 주석을 장, 혹은 책의 제일 마지막 부분에 몰아 넣어 책을 보면서 주석을 보기 힘들게 만들거나, 본문 중간에 쌩뚱맞게 주석이 들어가기도 하고, 조금 편하게 신경을 쓰면 링크를 걸었습니다.

최근에는 유통사들이 이런 불편을 줄이고자 '팝업 주석' 기능을 도입했습니다. 교보eBook, 리디북스, 알라딘 eBook에서 팝업주석이 지원됩니다.

교보문고 주석리디북스 주석알라딘 주석

* 왼쪽부터 교보eBook, 리디북스, 알라딘 eBook의 팝업 주석

그런데 각 업체의 제작가이드를 보면 서로 제각각이라 유통사별로 전자책을 다시만들어야하나 하고 생각하시는 분들이 많더라구요. 그리고 팝업주석을 지원하지 않는 뷰어용도 별도로 제작해야 한다고 생각하는 분들이 계시네요.

주석을 처리하는 방식이 유통사별로 조금씩 달라 100% 호환되게 만들 수는 없지만 많은 뷰어에서 주석이 제대로 보이도록 만들 수는 있습니다. 아래에 설명하는 방식은 교보eBook, 리디북스, 알라딘 eBook에서 팝업 주석이 표시되고 예스24 뷰어에서는 링크로 주석을 확인할 수 있습니다. 칼리브레에서도 잘 적용됩니다.

□ 전자책 주석 표현 방법

1. 주석을 표현할 때 주의해야 하는 사항.

주석은 본문 내용의 일부를 터치했을 때 표시됩니다. 그런데 터치 영역이 너무 작다면 주석을 터치하려다 페이지가 넘어가는 불편이 생길 수 있습니다. 뷰어별로 설정이 다르기 때문에 터치 영역을 넓게 잡아주는게 좋습니다.

1) 처럼 주석 번호에 링크를 걸지 말고, 단어에 링크를 걸어주세요.

일부 뷰어는 서로 다른 파일에 있는 주석도 표현되지만 일부 뷰어는 같은 파일 안에 있는 주석만 표현이 됩니다. 유통하려는 뷰어를 확인하고 작업하세요. 같은 파일 안에 주석 설명을 넣으면 모든 뷰어에서 문제가 없고, 다른 파일에 주석 설명을 담으면 일부 뷰어에서 문제가 됩니다.

2. 주석 추가 코드

<a epub:type="noteref" href="#note01" id="anno01">불필 때1)</a> <a epub:type="noteref" href="#note02" id="anno02">끈적나긋한2)</a> <a epub:type="noteref" href="#note03" id="anno03">토브3)</a>들이

.

</aside>

<a href="#anno02">2　끈적나긋한: ‘끈적끈적한’과 ‘나긋나긋한’이 합쳐진 합성어.</a>

</aside>

.

</blockquote>

2.1 빨간 글자는 팝업 주석을 위한 코드입니다.

팝업주석이 지원되는 뷰어에서는 빨간 글자 부분만 있으면 됩니다.

팝업 주석의 원리는 간단합니다. a 태그로 링크를 걸고, 링크가 걸린 부분을 팝업으로 보여주는 형식입니다. 그래서 주석 설명이 필요한 단어에 주석 설명을 링크로 걸어줍니다.

그런데 어디에 링크를 걸어줘야 할까요?

'이 단어의 주석 설명은 이거다' 라고 알려주는게 ID입니다. 어떤 태그든 ID를 넣을 수 있습니다. p 태그에도 ID를 넣을 수 있고 주석 설명을 p 태그로 묶고 ID를 추가하면 팝업 주석을 불러올 수 있습니다.

하지만 p 태그로 주석을 넣으면 여러 문단을 쓸 수 없습니다. 주석 설명이 길어 여러 문단을 써야 한다면 다른 태그로 묶어줘야 합니다. <aside>태그가 이 역할을 합니다.

<aside> 태그는 HTML5 에서 추가된 태그이기 때문에 EPUB 2 형식에서는 오류가 날 수 있습니다. 하지만 교보, 리디, 알라딘에서는 이 태그를 지원합니다.

2.2 파란 글자는 팝업 주석을 지원하지 않는 뷰어를 위한 코드입니다.

팝업 주석이 지원되지 않는 뷰어에서는 링크를 누르면 해당 위치로 이동합니다. 빨간 글자만 넣어도 주석 설명 위치로 이동을 합니다. 그런데 주석 설명에서 다시 본문으로 돌아올 수는 없습니다.

그래서 파란 글자가 필요합니다. 파란 글자는 주석에서 본문으로 돌아올때 필요한 링크와 ID입니다. 원리는 주석 설명으로 넘어가는 링크와 동일합니다.

팝업 주석을 지원하는 뷰어에서는 파란 글자 부분이 필요 없습니다.

팝업 주석을 지원하지 않는 뷰어는 주석 단어를 누르면 주석 설명으로 이동을 하는데, 여기서 주석 설명을 누르면 다시 본문의 주석 단어가 있는 위치로 돌아갑니다.

2.3 <blockquote>는 주석과는 상관 없습니다.

다만, 주석과 본문을 구분해 주기 위해 주석 스타일을 처리하기 위한 코드입니다.

<blockquote>를 쓰지 않아도 됩니다. css로 footnote라는 클래스를 만들고 <div class="footnote">로 묶어줘도 됩니다. 주석을 본문과 구분할 필요가 없다면 이렇게 묶어줄 필요도 없고, 모든 주석이 <aside> 태그로 묶여있으니 aside 태그에 직접 스타일을 적용해도 됩니다.

이렇게 편집한 샘플 파일을 첨부했으니 다운받아 참고하시기 바랍니다.