posted by 내.맘.대.로 2016. 6. 11. 15:26

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

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

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

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

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

내용 보충


1. Sigil 0.9.8에서 문자열+ 형식이 문자열++로 해야 찾아집니다. 

예를 들어 이전에는 \d+ 로 1,12,123,1234,12345....를 찾을 수 있었는데 \d++로 해야 제대로 찾아지네요. Sigil 오류인지 이렇게 수정된건지 모르겠어요. 아래에서 +가 하나 붙은 식이 문제가 생긴다면 ++로 수정해 보세요.


2. 식을 조금 업그레이드 했습니다. 전자책을 사랑하는 사람들 모임(http://cafe.naver.com/ebookpublisher) 부씽님의 식을 보고 조금 수정했어요.


찾기 : \b(?<=[가-힣])([\w\s]++)

바꾸기 : <sub>\1</sub>


이 식으로 한글abc한글, 한글abc abc한글, 한글abc abc abc한글.... 의 패턴을 모두 찾을 수 있습니다. 

이 식의 문제는 한글abc 한글 처럼 영문표기 뒤에 한글이 바로 붙지 않으면 공백까지 포함시킵니다. 이 부분도 해결해 보겠습니다 ^^



<p class="ddf">가나다 abc 입니다</p>
영문 단어만 찾아서 변경하고 싶었습니다. 특정 단어같은 패턴이 없어서 본문 내용에서만 찾고 싶었는데 영어는 태그를 구분하지 않고 검색하는것 같아서 아쉽더라고요.


골드님이 주신 질문입니다.

Sigil 에서 정규표현식을 이용하다 보면 원하지 않는 값까지 찾게 되는 경우가 있습니다.

한자나 한글은 조금 덜한 편인데 영문이나 숫자를 찾을 때 이런 문제가 자주 발생하지요.


예를 하나 들어보겠습니다.


스티브 잡스Steven Paul Jobs는 애니메이션 영화 《인크레더블The Incredibles》과 《토이 스토리Toy Story》 등을 제작한 컴퓨터 애니메이션 제작사인 픽사의 소유주이자 CEO였다.


이 문장을 정규표현식으로 찾아 스티브 잡스, 인크레더블, 토이스토리 뒤에 붙은 영문에만 스타일을 주고 싶다면 어떻게 해야 할까요?


먼저 정규표현식으로 영어 단어를 찾아보겠습니다. Sigil 찾기 창에서 정규표현식을 선택한 후 ([a-zA-Z]+) 를 입력합니다. 한 단어씩 찾기 위해 +를 추가했습니다. 그리고 찾기 버튼을 누르면 어떻게 될까요?


<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

</head>

<body>

<p>스티브 잡스Steven Paul Jobs는 애니메이션 영화 《인크레더블The Incredibles》과 《토이 스토리Toy Story》 등을 제작한 컴퓨터 애니메이션 제작사인 픽사의 소유주이자 CEO였다.</p>

</body>

</html>


EPUB의 본문은 HTML로 되어 있어 본문의 단어를 찾기 전에 HTML 코드에 있는 xml이라는 영어를 먼저 찾아줍니다. 다음 찾기를 아무리 눌러 봐야 HTML에 영문이 너무 많아서 수작업으로 하는 것 보다 효율이 나지 않습니다.


이런 문제를 해결하려면 정규표현식을 사용하기 전에 무슨 목적으로 사용하느냐를 본인이 정확히 알아야 합니다.

이런것도 모르고 할 사람이 있을까 싶겠지만, 많은 사람들이 자신이 원하는게 뭔지 모르는 상태에서 막연한 개념만 갖고 시작하는 경우가 많습니다. 그러면 식을 세울 수가 없게 되지요.


전자책을 편집할 때 영어 단어를 찾아야 하는 이유가 뭐가 있을지를 먼저 생각해 보겠습니다.

제가 전자책을 만들면서 언제 정규표현식을 쓰는지를 정리하고,  각각의 상황에 맞는 식을 하나식 설명드리겠습니다.


저는 아래와 같은 이유로 정규표현식을 많이 사용합니다.


윗첨자 패턴의 영문, 한자, 일본어 단어에 스타일을 적용해야 할 때


주로, 단어 뒤에 붙은 설명을 윗첨자 형태로 스타일을 적용해야 할 때 많이 이용합니다. 


스티브 잡스Steven Paul Jobs

인크레더블The Incredibles

논어論語


책을 편집하다 보면 이런 편집을 많이 사용합니다. 책 한권에 수백개 이상 들어있는 윗첨자를 하나씩 찾아내 수정하려면 시간이 오래 걸리기 때문에 정규표현식을 사용합니다.


이런 편집에는 '패턴'이 있습니다. 이 패턴을 찾는게 정규표현식을 세우는데 가장 중요합니다.


예로 든 텍스트들은 전자책으로 편집하기 전에는 윗첨자가 적용돼 있지 않습니다. 그렇기 때문에 윗첨자는 패턴이 될 수 없습니다.


스티브 잡스Steven Paul Jobs


이 문장에서 찾을 수 있는 가장 확실한 패턴은 한글영어단어, 한글한자, 한글일본어 등 한글 뒤에 바로 단어가 온다는 점입니다. 윗첨자 형으로 설명이 들어간 단어는 괄호 같은 구분기호를 붙이든, 구분기호 없이 바로 단어를 붙이든 한글에 붙어 영문이나 한자가 나오는게 일반적입니다.


한글영문 패턴은 책을 편집할때 많이 나오지 않습니다. 윗첨자 설명 같은 특수한 경우가 아닌 이상 한글과 영문은 띄어쓰도록 되어 있습니다. 그래서 한글영문은 정규표현식으로 사용하기 좋습니다. 그렇다고 본문의 모든 윗첨자만 이 패턴이 적용되고, 다른 내용에는 이런 패턴이 없다는 보장은 할 수 없으니 편집자가 책의 내용에 따라 패턴을 확인할 필요는 있습니다.


한글영문 패턴일 때는 이런 식을 쓸 수 있습니다.



([가-힉]+)([a-zA-Z]+)



스티브 잡스Steven Paul Jobs


그런데 결과가 이상하지요? 찾기를 원하는건 영문인데 선택은 한글 단어와 영문이 함께 됩니다. 


여기서 다시 '목적'을 생각해야 합니다. 만약, 영문 단어를 확인하려는 목적이라면 이렇게 선택된다 해도 아무 문제 없습니다. 눈으로 확인하면 되니까요. 그런데 영문 단어에만 스타일을 적용하고 싶다면, 다시 말해 찾아바꾸기를 하고 싶다면 이렇게 선택되서는 곤란합니다.


정말 곤란할까요?


만약 아래와 같은 단어라면 전혀 곤란할 일이 없습니다.


잡스Jobs


이렇게 한글 단어 하나에 영문 단어 하나짜리라면 위에 설명한 식으로 찾아바꾸기가 가능합니다.


찾기 : ([가-힉]+)([a-zA-Z]+)

바꾸기 : \1<sup>\2</sup>


찾기와 바꾸기 영역에 이렇게 해보세요. 그러면 결과는 이렇게 나옵니다.


잡스<sup>Jobs</sup>


Sigil은 정규표현식으로 단어를 찾을 때 괄호를 하나의 묶음으로 처리합니다. (표현식1)(표현식2) 처럼 식을 괄호로 묶어 주면 바꾸기를 할 때는 \1, \2로 찾은 단어를 넣어줄 수 있습니다. 찾기 영역에서 (표현식1)이 찾은 단어는 바꾸기 영역에서 \1로, (표현식2)가 찾은 단어는 \2로, 표현식이 3, 4, 5개로 늘어나면 \3, \4, \5로 대치를 할 수 있습니다. 그렇기 때문에 한글abc으로 선택됐다 해도 abc에만 스타일을 적용할 수 있게 됩니다.


참고로, ([가-힉]+)를 ([가-힉])으로 바꿔도 이 식에서는 지장이 없습니다. 잡스Jobs를 찾든, 스Jobs를 찾든 결과는 동일하니까요.


이번에는 조금 더 확장을 해 보겠습니다.


스티브 잡스Steven Paul Jobs는

애니메이션Animation 제작사


이런 패턴 역시 한글영문 패턴입니다. 다만 한글영문, 한글영문 영문... 의 패턴이 되는거지요.


이런 형태는 조금 까다롭습니다. 패턴이 분명하다면 문제가 되지 않는데 패턴이 2개 이상으로 복잡해집니다. 먼저 '스티브 잡스Steven Paul Jobs는' 패턴을 비교하면 이렇습니다.


한글영문 공백 영문 공백 영문...... 영문한글


이런 패턴이라면 이렇게 처리할 수 있습니다.


([가-힉])([a-zA-Z].+?)([가-힉])


패턴의 중요한 포인트는 [한글영문....영문한글]입니다. 영문을 찾는 식에 물음포(?)를 넣어 준건 패턴을 너무 넗게 잡는걸 방지해주기 위해서입니다.


([a-zA-Z].+?)


이 식으로 찾은 영문단어에만 스타일을 지정하고 싶다면 바꾸기 영역에 아래처럼 넣어주면 됩니다.


\1<sup>\2</sup>\3


스티브 잡스<sup>Steven Paul Jobs</sup>는



그런데 이 식을 사용하면 '애니메이션Animation 제작사'가 문제가 됩니다. '《인크레더블The Incredibles》' 같은 패턴도 문제가 되고요.


애니메이션Animation 제작사


이 패턴은 \2가 대체하는 단어 영역이  'Animation '까지입니다. 공백이 포함되지요. 


《인크레더블The Incredibles》


여기서는 'The Incredibles》'까지 포함을 하게 됩니다. 


이런 문제를 해결할 방법이 아주 없는건 아닙니다. 하지만 식이 점점 복잡해지고, 식이 복잡해 지면 엉뚱한 결과가 나올 수 있습니다.


지금까지 설명도 상당히 복잡했는데 더 복잡해진다면 이 글도 보기 싫어지시겠지요^^?

그래서 제가 쓰는 아주 단순 무식한 방법이 하나 있습니다.

한번에 끝낼 수는 없지만 결과는 확실한 방법입니다.


먼저, 본문에 윗첨자가 달려야 하는 단어의 최대 갯수를 확인합니다. 인명이나 지명 같은 명사라면 많아야 4~5개 단어로 끝납니다. 만약 단어의 최대 갯수가 4개라면 아래 식을 반복합니다.


찾기 : ([가-힉])([a-zA-Z]+ [a-zA-Z]+ [a-zA-Z]+ [a-zA-Z]+)

바꾸기 : \1<sup>\2</sup>


찾기 : ([가-힉])([a-zA-Z]+ [a-zA-Z]+ [a-zA-Z]+)

바꾸기 : \1<sup>\2</sup>


찾기 : ([가-힉])([a-zA-Z]+ [a-zA-Z]+)

바꾸기 : \1<sup>\2</sup>


찾기 : ([가-힉])([a-zA-Z]+)

바꾸기 : \1<sup>\2</sup>


단순 무식한 방법이지만, 패턴을 단순화시켜 다양한 예외들을 모두 차단해 버렸습니다.

위 식의 패턴은 이렇습니다.


먼저 '한글영문1 영문2 영문3 영문4'을 찾습니다.


이 패턴은 한글영문, 한글영문1 영문2 패턴은 무시합니다. 만약 한글영문1 영문2 영문3 영문4 영문5라는 패턴이 있다면 문제가 됩니다. 그래서 가장 긴 영어단어 수를 확인해야 합니다. 


그 다음 영어단어를 하나씩 줄여가며 찾아줍니다. 


한글영문1 영문2 영문3은 영문4까지 있는 단어라면 문제가 되지만, 영문4까지 있는 단어는 이미 교체했기 때문에 영문3까지 있는 패턴에는 걸리지 않습니다. 영문2까지 있는 패턴 역시 영문3을 처리한 후라면 문제가 되지 않고요.


이 방식이 가능한 이유는, 대부분의 책이 윗첨자 설명을 문장 보다는 인명이나 지명 같은 단어를 처리하기 위해 사용하기 때문입니다. 그리고 인명이나 지명은 길어야 4~5단어 정도로 짧기 때문에 많아야 5번 내외로 반복해 주면 윗첨자형 설명은 모두 바꿀 수 있습니다.


본문 내에 있는 영어 단어만 찾아야 할 때도 있습니다.

윗첨자 같은 설명이 아닌, 본문 내의 영어 단어로, 한글과 다른 폰트를 적용하고 싶다면 '한글영문'이 아닌 '한글 영문' 형태의 패턴이 됩니다. 


이런 형태 역시 패턴을 먼저 찾는게 중요합니다.

본문 내에 쓰인 영문 단어라면 이런 패턴일 가능성이 높습니다.


한글 영문 한글

한글 영문1 영문2.... 한글


스티브 잡스는 Toy Story 등을 제작한 Computer Animation 제작사인 픽사의 소유주이자 CEO였다.


이런 패턴은 위의 식을 약간 수정해서 처리할 수 있습니다.


([가-힉]) ([a-zA-Z]+ [a-zA-Z]+ [a-zA-Z]+ [a-zA-Z]+...)


이런 패턴은 한글이 앞에 나오고, 한칸 공백을 띈 후 영문 단어가 여러개 나옵니다. 영문 단어 뒤에는 'CEO였다'cjfja 한글이 붙을 수도 있고, 'Toy Story 등을' 처럼 공백이 올 수도 있습니다.


공통되는 패턴은 한글+공백+영문, 영문이 몇개가 오든 시작은 이렇습니다. 그렇다면 윗첨자를 바꿀 때처럼 가장 긴 영어 단어 수에 맞춰 반복을 할 수 있습니다.




태그 사이에 영문만 들어있는 경우도 있습니다. 


위에 두 예는 한글이 들어있어 태그를 무시할 수 있었는데 태그와 태그 사이에 영문만 있을 경우에는 찾기 어렵습니다.

그럴 때는 태그 자체를 이용합니다. 


<p class="title">Toy Story</p>



(?sU)<p([^>]*>)



이 식은 <p...>태그를 찾아줍니다. <p> 태그 안에 어떤 클래스나 스타일, ID가 추가되든 상관 없습니다. 만약 <p class="title">...</p>로 묶인 영역을 <p>태그 대신 제목 태그인 <h2>로 바꾸고 싶다면 이 식을 활용할 수 있습니다.


찾기 : (?sU)<p([^>]*>)(.*)</p>

바꾸기 : <h2>\2</h2>


<p> 태그 안에 영문만 있는 문단을 찾고 싶다면 (.*) 부분을 수정해 주면 됩니다. ([a-zA-Z].+) 처럼요.

원하는 패턴에 맞게 식을 세워주면 다양하게 활용할 수 있습니다.



정규표현식을 제대로 활용하려면 두가지를 꼭 기억하세요.


1. 내가 찾고자 하는 내용의 패턴을 알아낸다. 이 패턴이 정규표현식이 됩니다.

2. 사용할 목적을 확실히 알고 있어야 한다. 찾아바꾸고 싶은지, 확인만 할건지, 전부 바꿀건지, 부분만 바꾸고 싶은지 등에 따라 식이 달라지고, 바꿀 영역에 들어갈 내용도 달라집니다.


이 두가지만 정확히 알고 있어야 정규표현식의 도움을 받을 수 있습니다.



반응형
posted by 내.맘.대.로 2016. 6. 10. 15:34

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

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

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

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

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


이북스펍 최피디님 덕에 알게된 EPUB 검사기입니다. IDPF에서 배포하고 있는건 터미널에서 명령을 입력해야 하는 방식이고, 윈도우 터미널에서는 오류가 많을 경우 전부 확인하기 어려운 문제가 있습니다. 웹으로 제공하는 validator 역시 10mb라는 용량 한계가 있어 이미지가 많이 들어있는 파일은 검사가 어려웠고요.

이 프로그램은 설치 없이 실행할 수 있고, 로그를 저장할 수도 있습니다. 사용법도 간단합니다. 검사할 파일을 선택 후 validate 버튼만 눌러주면 되거든요.

Sigil에서 Validator가 플러그인 형태로 바뀌며 빠졌는데 EPUB 검사기가 필요하신 분들은 이 프로그램을 사용하시면 도움이 될거예요.


조금 사용을 편하게 해보려고 한글화 작업을 해봤습니다.

오류 메시지까지 모두 번역을 해보려고 하는데 시간이 좀 걸리겠네요.

기본 메뉴와 간단한 오류메시지는 한글로 번역했습니다.


프로그램을 수정한게 아니고 영문 메뉴를 한글로 바꾼거여서 이 파일을 사용하면 영문 메뉴를 사용할 수 없습니다.





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

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

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

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

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

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




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


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


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


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


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


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


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


□ 전자책 주석 표현 방법


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


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

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


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


2. 주석 추가 코드


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

.

.

.

<blockquote>

<aside epub:type="footnote" id="note01">

<p><a href="#anno01">1 불필 때: 저녁을 위해 불을 지필 때.</a></p>

</aside>


<aside epub:type="footnote" id="note02">

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

</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 태그에 직접 스타일을 적용해도 됩니다. 


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

반응형
posted by 내.맘.대.로 2016. 2. 3. 09:30

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

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

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

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

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

Sigil에 Add Cover라는 기능이 있습니다.

어떤 분이 왜 이런 기능이 들어있냐고 물어보시네요.

전자책 만들 때 꼭 한번씩 쓰는 기능입니다. 

그런데 왜 필요하냐고 물어보니 왜 그런 생각을 하게 됐는지 궁금해졌습니다.

 

"Add Cover 기능을 써서 표지를 넣으면 유통사 뷰어에서 문제가 생겨요."

 

이 말을 들으니 이해가 가더군요.

 

Add Cover를 사용하면 상하좌우 가운데에 표지가 들어갑니다. 화면 크기에 따라 표지 이미지 크기도 자동으로 조절이 되서 좋습니다. 하지만 문제가 하나 있습니다. SVG 태그를 사용하거든요. SVG를 지원하는 뷰어에서는 최적의 코드지만 SVG를 지원하지 않으면 문제가 생깁니다.

 

<body>

<div style="text-align: center; padding: 0pt; margin: 0pt;">

<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1024 1440" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

<image width="1024" height="1440" xlink:href="../Images/cover.jpg"/>

</svg>

</div>

 

</body>

 

Add Cover로 표지를 넣은 책들을 수정해 달라는 요청을 받다보니 쓸 수도 없는 기능은 넣어서 뭐하냐고 불만이 생기겠지요.

 

EPUB2 뷰어에서는 SVG를 지원하지 않아도 되기 때문에 유통사 뷰어 문제는 아닙니다. SVG를 지원할 의무는 없지만 사용할 수 없는 것도 아니기 때문에 Sigil 문제도 아닙니다. 

 

불만이 이해는 갔지만 Sigil은 아무 잘못이 없습니다. Sigil은 '완벽한' 표지 추가 기능을 제공하고 있거든요. 그런데 사용법을 모르니 이런 불만이 생기는 것입니다.

 

Sigil 사용 설명서 [표지 이미지 삽입] 편에서 설명을 한적이 있는데 다시 한번 자세히 설명을 하겠습니다.

 

표지는 편집자라면 항상 같은 코드를 사용할거예요. 특별한 경우가 아니라면 표지를 삽입하는 코드가 변경될 일은 없습니다. 

 

Sigil의 Add Cover를 사용하면 위에 보이는 코드가 삽입됩니다. 항상 똑같은 코드를 사용합니다.

그런데 표지마다 표지 파일명이 다르고 표지의 가로*세로 크기가 다릅니다. Add Cover 할 때마다 이미지 크기를 확인해서 추가해 줘야 하지만 Sigil은 이를 자동으로 계산해 넣어줍니다.

 

  <div style="text-align: center; padding: 0pt; margin: 0pt;">

    <svg xmlns="http://www.w3.org/2000/svg" height="100%"

    preserveAspectRatio="xMidYMid meet" version="1.1" 

    viewBox="0 0 SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT" width="100%" 

    xmlns:xlink="http://www.w3.org/1999/xlink">

      <image width="SGC_IMAGE_WIDTH" height="SGC_IMAGE_HEIGHT

      xlink:href="SGC_IMAGE_FILENAME"/>

    </svg>

  </div>

 

이 코드가 Sigil의 Add Cover 기본 코드라고 보시면 됩니다. 

빨간 글자 부분이 이미지에 따라 바뀌어야 하는 곳입니다. 이미지의 가로, 세로 크기와 이미지 파일 명이 들어가야 하는 자리입니다. 이 부분을 빨간 글자로 표시한 그대로 사용하면 Sigil이 알아서 이미지에 맞게 추가를 해 줍니다.

 

이 빨간 글자 외에는 모두 수정할 수 있습니다. 어떤 식으로 수정을 하든 편집자 마음입니다. 

Sigil에서 편집가가 원하는 모양으로 표지 이미지를 삽입되도록 Add Cover 코드를 수정해 보겠습니다.

 

1. cover.xhtml 파일을 만들어 주세요.

 

2. cover.xhtml 파일에 아래 코드 혹은 본인이 사용하는 표지 이미지 코드를 추가합니다.

  이 코드를 사용하면 이미지가 상하좌우 가운데에 정렬됩니다. 

  표지 스타일을 CSS파일에 정리하고 싶다면 <style>영역 대신 CSS 파일을 연결해 주면 됩니다.

  어떤 코드라도 상관 없습니다. 편집자가 표지를 삽입할 때 사용하는 코드면 됩니다.

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xml="http://www.w3.org/XML/1998/namespace">

<head>

  <title></title>

    

<style type="text/css">

html, body { height:100%; margin: 0; padding: 0; }

.cover {

width: 100%;

 height : 100%;

text-indent : 0;

text-align : center;

 

display: box;

box-orient: horizontal;

box-pack: center;

box-align: center;

 

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

-webkit-box-align: center;

 

display: -moz-box;

-moz-box-orient: horizontal;

-moz-box-pack: center;

-moz-box-align: center;

}

 

img.cover {

width : 100%;

height : auto;

}

</style>

</head>

 

<body>

  <div class="cover"><img alt="표지 중앙정렬" class="cover" src=".../Images/cover.jpg" /></div>

</body>

</html>

 

3. 이미지 파일명, 이미지 크기를 수정합니다. 

   위 예제 코드는 이미지 크기를 수정할 필요가 없습니다.

   이미지 크기를 실제 이미지 크기로 고정시키려면 width와 height를 수정하면 됩니다.

 

<div class="cover"><img alt="표지 중앙정렬" class="cover" src="SGC_IMAGE_FILENAME" /></div>

 

width, height를 이미지 크기에 맞추고 싶다면 아래처럼 수정

width: SGC_IMAGE_WIDTH;

height : SGC_IMAGE_HEIGHT;

 

4. cover.xhtml 파일을 Sigil의 설정 폴더로 복사합니다. 

   Sigil 설정 폴더 찾는 방법은 간단합니다.

    - [편집 > 설정] 혹은 F5를 눌러 [기본설정] 창을 열어주세요.

    - [기본 설정] 제일 아래에 있는 [Open Preferences Location] 버튼을 눌러주세요.

 

 

    - 폴더가 열리면 아래처럼 3번에서 만든 cover.xhtml 파일을 복사해 줍니다.

 

 

 

5. 이제 Sigil에서 Add Cover를 합니다. 

   svg 태그를 사용한 Sigil 기본 코드가 아닌 편집자가 수정한 코드로 이미지가 들어갑니다 ^^

 

 

 

반응형
posted by 내.맘.대.로 2016. 1. 29. 18:26

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

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

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

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

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

Sigil 최신버전(0.9.2 기준) 은 EPUB 3를 제한적으로 지원합니다. 하지만 EPUB 3 파일을 만들려면 수정해 줘야 하는 곳이 있습니다. 여러곳을 수정해야 하기 때문에 번거롭기는 하지만 Sigil의 강력한 편집기능을 이용할 수 있어 자주 사용하게 되네요. EPUB 3 편집기를 사용할 때보다 결과물이 깔끔하다는 장점도 있습니다.


여기서는 Sigil로 EPUB3 고정 레이아웃(Fixed-layout) 전자책을 만드는 방법을 설명하겠습니다.

여기에 설명한 부분만 고쳐준다면 EPUB 3 뷰어에서 문제 없이 열립니다 ^^




◆ Sigil로 EPUB 3고정 레이아웃(Fixed-layout) 을 만들 때 확인해야 하는 사항입니다.


* 이 내용 중 고정 레이아웃 항목을 제외하면 EPUB 3 파일 제작에 그대로 적용됩니다.


1. EPUB 3 파일로 만들어 줍니다.


<package version="3.0" unique-identifier="BookId" xmlns="http://www.idpf.org/2007/opf">



2. content.opf 파일에서 고정레이아웃을 선언해 줘야합니다. (고정 레이아웃)

   property="dcterms:modified", dc:title, dc:language 도 1개 이상 있어야 합니다. (EPUB 3)


  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">


    <dc:identifier id="BookId">urn:uuid:21d050a8-9c85-4d61-b84a-4161b721d5f6</dc:identifier>


    <meta content="0.9.2" name="Sigil version" />


    <meta property="rendition:layout">pre-paginated</meta>


    <meta property="rendition:spread">none</meta>


    <meta property="rendition:orientation">portrait</meta>


   <meta property="dcterms:modified">2016-01-29T12:00:00Z</meta>


    <dc:title>고정 레이아웃 샘플</dc:title>


    <dc:language>ko</dc:language>


  </metadata>



3. HTML 파일에서 고정 레이아웃 판형을 설정해 줍니다.(고정 레이아웃)


<head>


  <title></title>


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


  <meta name="viewport" content="width=720, height=1098"/>


</head>



4. CSS 혹은 인라인 스타일로 body 크기를 정해줍니다. (고정 레이아웃)

body{


position:absolute; /*옵션*/


margin:0;


padding:0;


width:720px;


height:1098px;


}



5. 메타데이터 입력할 때 content.opf 파일에서 opf:role 등 opf: 속성을 수정해야 합니다.(EPUB 3)


EPUB 2 : <dc:creator opf:role="aut">홍길동</dc:creator>


* opf: 속성을 id로 변경해 줍니다.


EPUB 3 : <dc:creator id="creator01">홍길동</dc:creator>


메타데이터 속성은 EPUB 3.0.1 EPUB Publication 문서 참조 http://www.idpf.org/epub/301/spec/epub-publications.html#sec-metadata-elem



6. opf 파일에 반드시 하나 이상의 nav 속성이 있어야 합니다. (EPUB 3)

<item href="Text/nav.xhtml" id="nav.xhtml" media-type="application/xhtml+xml" properties="nav"/>



7. HTML 파일에 반드시 하나 이상의 Navigation 파일이 있어야합니다.

  <nav epub:type="toc" id="toc">


<ol>

   <li><a href="Section0001.xhtml">설명1</a></li>




    <li><a href="Section0002.xhtml">설명2</a></li>


    <li><a href="Section0003.xhtml">설명3</a></li>


  </ol></nav>


네비게이션은 <nav>태그로 감싸여야 하고 <ol><li>태그로 목록을 만든 후 <a> 태그로 링크를 걸어야 합니다. http://www.idpf.org/epub/301/spec/epub-contentdocs.html#sec-xhtml-nav-content-conf


8. ncx 파일의 doctype을 삭제해 주세요. 

EPUB 3에서는 ncx 파일이 필요 없습니다. 하지만 Sigil에서는 NCX 파일이 필요하기 때문에 삭제할 수 없습니다. Sigil이 자동으로 선언한 doctype만 삭제하면 EPUB 2와 호환되는 파일을 만들 수 있습니다.(고정 레이아웃을 지원한다면요^^)


<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"

 "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">


이 부분을 삭제해 주세요




9. 끝으로 &nbsp;&#160;로 바꿔줍니다. EPUB 3에서는 &nbsp;를 사용할 수 없습니다. 공백 문자는 &#160;으로 대체 가능합니다. 




반응형
posted by 내.맘.대.로 2016. 1. 27. 11:30

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

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

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

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

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

교보문고 뷰어가 EPUB 3를 지원합니다.

기능은 오래 전부터 들어 있었는데 UI가 제대로 정리되지 않아 사용을 하지 못했지요.

그런데 이번에 EPUB 3를 공식 지원하는 업데이트가 있었습니다.

그리고 베스트 1위 자리에서 내려올 생각을 하지 않는 '미움받을 용기'를 EPUB 3로 만들어 판매를 하고 있습니다. 


미움받을 용기(EPUB3)   (무료 체험판)


이 책을 보다가 본문을 스크롤로 보는 방식에 관심이 생겼습니다.

웹소설은 모두 스크롤로 보는데 장르 단행본은 페이지 넘김으로 봐야하잖아요.

웹소설에 익숙한 독자라면 단행본도 스크롤로 보고싶지 않을까 하는 생각이 들었어요.



'미움받을 용기'에서 본문을 스크롤로 읽는 방식은 마음에 들었는데

고정레이아웃이라 글자 크기를 조절할 수 없는 부분이 아쉬웠습니다.

그래서 본문을 스크롤로 읽지만, 고정레이아웃에서 글자 크기를 변경할 수 있는 샘플을 만들어 봤습니다. 


쉽게 사용할 수 있도록 최대한 간단히 만든거라 샘플 파일 보고 조금만 연습하면 이해할 수 있을거예요.

(참... sigil로 작업을 하다보니 opf:role 속성을 수정하지 않았습니다. 그래서 검증을 하면 opf 오류가 보일거예요. 기능상의 이상은 없습니다.)



◇ 샘플 파일 설명


1. EPUB 3 고정 레이아웃 제작에 대한 부분은 따로 설명하지 않습니다. 이 부분은 EPUB 3 설명할 때 자세히 다루겠습니다.


2. 고정레이아웃에서 본문을 화면 스크롤로 보기


- 화면 스크롤은 CSS에서 지원이 됩니다. 간단히 화면 스크롤을 적용할 수 있습니다.

- 이 CSS가 제대로 작동을 하려면 EPUB 3 고정 레이아웃으로 제작되야 합니다. 


- 고정 레이아웃에서 화면 스크롤 CSS

div.txt_scroll {

overflow-y:scrole;

overflow-x:hidden;


-webkit-overflow-scrolling: touch;

overflow-scrolling: touch;


width:720px;

height:1098px;

}


- 화면 스크롤 적용 방법


<div class="txt_scroll">


    <p>여자는 자신을 돌아봤다.</p>


    <p><br/></p>


    <p>'나'라는 가장 직시하고 싶지 않은 자신을 봐 버린 여자. 사랑은 안되고 섹스는 되는 쉬운 여자라는 걸 오늘 또 한 번 깨닫게 되었다.</p>


    <p>회사 안에서 몇 번 마주쳤지만 그는 자신을 알아보지 못했고 자신 또한 그와 자신이 대학 동기였다는 것을 알리고 싶지 않았다.</p>


    <p>두 달 전 대학 동기들 모임 안내를 받고 망설였다.</p>


    <p>해외 지사에 있다가 얼마 전에 돌아온 그가 동창 모임에 얼굴을 내밀 것이라고는 생각하지 못한 여자는 오늘 무슨 일이 있어도 남자와 얽히고 싶지 않아 조심했다.</p>


    <p>어떻게 된 걸까?</p>

 ...

</div>



3. 글자 크기 변경 스크립트

- 고정 레이아웃은 글자크기를 조절할 수 없습니다. PDF처럼 화면을 확대/축소해서 글자를 키웁니다.

- 그러다보니 폰에서는 글자가 너무 작은데 태블릿에서는 글자가 너무 크게 보이는 등의 문제가 생깁니다.

- 스크롤 방식의 텍스트 도서라면 고정레이아웃이어도 글자 크기를 변경할 수 있습니다. 화면이 틀어지지 않아요.


- 글자 크기 조절 스크립트

function fontResize(font_size) {

if (document.body.style.fontSize == "") {

document.body.style.fontSize = "100%";

}

document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (font_size) + "%";

}

* 인터넷에 공개된 스크립트를 약간 수정했습니다.


- 스크립트 적용 방법

<body>

<div class="chap_title">

<h3>1. 어떻게 된 걸까?</h3>


<div class="button_up" onclick="fontResize(20)" role="button">

<p>A</p>

</div>


<div class="button_down" onclick="fontResize(-20)" role="button">

<p>A</p>

</div>

</div>


<div class="txt_scroll">


<p>여자는 자신을 돌아봤다.</p>


<p><br/></p>


<p>'나'라는 가장 직시하고 싶지 않은 자신을 봐 버린 여자. 사랑은 안되고 섹스는 되는 쉬운 여자라는 걸 오늘 또 한 번 깨닫게 되었다.</p>

 ...

</div>

</body>


- 스크립트를 js파일로 연결하거나 <script> 영역에 삽입합니다.

- 텍스트 크기 조절 버튼을 <div...>여기</div>에 넣습니다. 이미지여도 좋고, 텍스트여도 좋습니다. 저는 텍스트를 추가하느라 <p> 태그를 사용했는데 <img../> 태그를 사용하면 이미지를 넣을 수 있습니다. (p 태그에 있는 A를 스타일로 글자크기를 축소버튼 15px, 확대버튼 35px로 주어 확대/축서 버튼을 구분합니다.)

- onclick="fontResize(20)"은 글자 크기를 20%씩 키웁니다. 10%씩 키우고 싶다면 20 대신 10을 넣으면 됩니다. 

- onclick="fontResize(-20)"은 글자 크기를 20%씩 줄입니다. -10%씩 키우고 싶다면 20 대신 10을 넣으면 됩니다. 

반응형