posted by 내.맘.대.로 2016. 7. 6. 16:42

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

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

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

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

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

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.


링크 태그 <a...>는 3가지 스타일을 갖고 있습니다.



링크가 걸려있는 텍스트는 파란색에 밑줄, 방문한 링크는 갈색에 밑줄이 기본 스타일이고 마우스가 위로 올라가도 스타일이 변하지 않습니다. 



전자책을 만들 때 주석을 링크로 연결하는 경우가 있는데 별도의 스타일을 지정하지 않으면 링크 기본 스타일이 적용되지요.

링크 스타일을 변경하는 방법은 2가지가 있습니다.


1. <a...>태그 스타일을 변경

2. a:link, a:visit, a:hover 스타일을 변경


1번은 링크의 상태(링크, 방문, 마우스오버)와 상관 없이 동일한 스타일이 적용됩니다.


a {

   color : inherit;

   text-decoration : none;

}


이렇게 스타일을 적용하면 링크가 걸린 텍스트가 본문과 똑같이 보입니다.

링크의 상태에 따라 서로 다른 스타일을 지정하고 싶다면 선택자(selector)를 구분해서 스타일을 지정해 주면 됩니다.


a:link {

   color : red;

   text-decoration : underline;

}


a:visit {

   color : grey;

   text-decoration : none;

}


a:hover {

   background-color: yellow;

}


이렇게 스타일을 지정하면 링크 텍스트는 빨간 글씨에 밑줄, 방문한 링크는 밑줄 없는 회색, 마우스가 올라가 있으면 노란색 배경이 적용됩니다.


링크가 걸려있는데 본문과 똑같아 구분이 가지 않는다면 독자들이 불편하겠지요? 하지만 주석은 1)처럼 본문과 구분이 되기 때문에 독자들이 주석이라는 것을 알 수 있습니다. 이럴 때는 파란색에 밑줄을 그을 필요는 없을거예요. 


상황에 맞게 a 태그나 3가지 선택자에 스타일을 적용할 수 있으니 편집할 때 활용하세요~

반응형
posted by 내.맘.대.로 2016. 6. 28. 10:46

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

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

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

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

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

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.


전자책 제작을 할 때 가장 먼저 적용해야 하는 스타일을 소개합니다. 가장 기본적인 내용인데 정말 많은 분들이 질문을 하시더라구요.

1번 이미지를 보세요. 문단과 문단 사이 간격이 줄간격보다 넓습니다. 아무 스타일도 적용하지 않고 텍스트를 본문에 넣으면 이런 모양이 됩니다. 




문단 사이의 간격을 줄이는 방법은?

스타일시트에 아래 스타일을 추가해 보세요.


* {

margin : 0;

padding : 0;

}


그러면 아래 이미지처럼 문단 간격이 사라집니다. 



그런데 줄 간격이 너무 좁지요? 책을 보기 답답합니다. 줄 간격을 넓히고 싶을 때 아래 스타일을 추가하세요.


p {

line-height : 1.8em;

}


이렇게 해주면 줄 간격이 넓어져 가독성이 좋아집니다. 줄 간격을 1.8em으로 해줬는데 제가 좋아하는 간격이에요. 이 부분은 편집하는 책에 맞게 조정을 해 주면 됩니다.



여백을 0으로 주면 상하좌우 여백이 사라져 Sigil의 미리보기에서는 답답해 보일 수 있습니다. 이미지 보시면 뷰어의 상하좌우 여백이 너무 좁지요? 하지만 걱정하지 않으셔도 되요. 뷰어들은 기본적으로 상하좌우 여백을 갖기 때문에 유통사의 뷰어로 보면 적당한 여백이 생깁니다.


그리고 여백이 0이 되면 다른 스타일을 적용할 때 편합니다. 독자들은 책에 적용된 여백 + 전자책 뷰어에서 기본으로 설정한 여백으로 책을 보게 되거든요. 이 계산을 잘못해서 전자책에 여백을 주면 독자이 볼 때 좌우 여백이 너무 넓어질 수 있습니다. 여기에 글상자 같은 편집을 적용해 여백을 추가하면 좌우 폭이 아주 좁아줄 수 있어요. 기준 여백을 0으로 두고 편집을 하면 이런 문제를 줄일 수 있습니다. 


이 스타일은 모든 전자책에 적용을 할 수 있습니다. 전자책 제작할 때 반드시 추가해 주는 스타일이에요.

참고 : margin, padding, line-height 에 대한 자세한 내용은 EPUB을 위한 CSS를 참고하세요~ 

반응형
posted by 내.맘.대.로 2016. 6. 27. 10:58

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

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

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

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

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

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 
전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^
편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.


오늘은 전자책 편집 중 많이 하는 '실수'를 정리하겠습니다. 이런 실수를 해도 뷰어에서는 정상적으로 보입니다. 그래서 많은 분들이 이런 편집을 잘못이라고 생각하지 않어요. 하지만 잘못 사용한 코드는 언젠가 오류로 보답을 합니다. 아주 조금만 신경쓰면 되니까 아래 몇가지만 지켜보세요.


1. 제목은 반드시 헤딩 태드(h1 ~ h6)를 사용한다.

IDPF의 EPUB3 권고안에는 제목을 헤딩 태그를 사용하도록 강력하게 권하고 있습니다. 현재 유통되고 있는 전자책 중 제목을 헤딩 태그가 아닌 CSS 스타일과 p 태그로 지정한 책이 많습니다. 이런 책들은 뷰어에 정상처럼 보이지만 표준을 지키지 않은 편집이에요. 

시중에 유통되는 편집기 중에서도 제목을 헤딩 태그가 아닌 p태그에 스타일을 적용해 표현하는 경우가 많습니다. 편집기가 제공하는 기능이라고 표준에 맞는건 아니니 편집할 때 주의를 하세요.


2. 본문은 반드시 <p> 태그를 사용합니다.

Sigil로 편집한 책 중에 보면 <div>태그로 분문을 묶은 것을 종종 볼 수 있습니다. Sigil의 빈 화면에서 백스페이스를 마구 누르면 HTML 코드가 이렇게 되요.


<html>

<head>

<title></title>

</head>

<body>

</body>

</html>


이 상태에서 엔터를 치면 이렇게 됩니다.


<html>

<head>

<title></title>

</head>

<body>

<div><br/></div>

<div><br/></div>

</body>

</html>


여기에 텍스트를 붙여넣으면 본문 태그가 <p>가 아닌, <div>태그로 감싸지게 됩니다. 역시 뷰어에서는 아무 문제가 없어 보이지만, 아주 심각한 '실수'입니다. 본문은 반드시 <p>태그로 묶여야 하거든요. 

간혹 글상자를 만들때 이렇게 편집하는 분들도 있습니다. 


<div>글상자에 들어갈 텍스트</div>

<a href=...>링크</a>

<img src=... />


이건 표준에 벗어나지는 않지만 좋은 코드라고 보기 어려워요. 본문 내용은 <p> 태그로 묶어줘야 합니다.


<div><p>글상자에 들어갈 텍스트</p></div>

<p><a href=...>링크</a></p>

<p><img src=... /></p> (p 태그 대신 div 태그도 됨)


3. 본문 스타일은 클래스를 지정하지 마세요.

본문을 클래스를 이용해 편집하는건 제약이 있는 것도, 표준에 어긋나는 것도 아닙니다. 하지만 그래야 할 필요가 없는데 불필요한 작업을 반복해서, 그것도 수천번을 반복해서 해줄 필요는 없잖아요.

무슨 소리냐고요?

CSS에 스타일을 적용할 때 본문 전체를 대표하는 스타일을 클래스로 지정하는 분들이 의외로 많이 있습니다. 이런 식이지요.


<style>

.maintext {본문 기본 스타일}

</style>

...

<body>

<p class="maintext">본문</p>

<p class="maintext">본문</p>

<p class="maintext">본문</p>

...

</body>


책 내용의 90%가 넘는 본문 스타일을 클래스로 지정하게 되면 class="maintext" 스타일이 수천번 들어갑니다. 이렇게 편집해야 할 이유는 전혀 없습니다. 그냥 p 태그에 스타일을 적용하면 되요.


p {본문 기본 스타일}


그럼 <p> 태그로 묶여있지만 다른 스타일을 적용해야 할 때는 어떻게 해야하냐구요? 그 스타일만 클래스를 지정하면 되지요. CSS는 스타일 상속을 받지만, 마지막에 상속받은 스타일로 표현이 되기 때문에 <p> 태그에 기본 스타일을 적용한다 해도 다른 스타일을 적용하는데 아무 문제가 없습니다.


4. 불필요한 스타일은 넣지 마세요.

CSS 스타일을 만들 때 불필요한 스타일을 반복해서 쓰는 분들이 많이 있습니다. 전자책 편집기의 CSS 생성 프로그램을 이용해 만들었다고 강하게 의심이 되지만, 그래도 이런 편집은 피하는게 좋습니다.


p { 

font-family:굴림; 

font-style:normal; /*필요 없는 스타일*/

font-weight:normal; /*필요 없는 스타일*/

font-size:1em; 

margin:0pt; /*필요 없는 스타일*/

padding:0pt; /*필요 없는 스타일*/

text-align:left; /*필요 없는 스타일*/}


/*필요 없는 스타일*/이라고 표시한 항목들은 뷰어 기본 설정을 따르도록 되어 있습니다. 뷰어 기본 설정을 따르는 스타일이나 적용해도 의미 없는 스타일은 추가할 필요가 없습니다. 넣지 않아도 뷰어에서 보이는건 똑같습니다. 

그럼 넣어도 상관 없잖아 라고 생각하실 수 있는데, 저런 코드가 들어가면 뷰어는 '아무것도 아닌 스타일'로 적용을 하느라 단말기 자원을 사용하게 됩니다. 쉽게 말해 뷰어에서 책이 열리는 속도가 느려지거나, 오류가 생길 가능성이 높아진다는 얘기에요.

* 참고로 들여쓰기가 필요 없는 스타일은 text-indent : 0; 을 추가해 주는게 좋아요. 강제 들여쓰기를 하는 뷰어가 많이 있어 들여쓰기 하면 안되는데 들여쓰기가 되는 경우가 종종 있거든요.


5. 똑같은 스타일은 재활용하세요.

시중에 유통되는 전자책 중에 아래처럼 똑같은 스타일이 무한반복되는 책들이 있습니다.


.textstyle001 { font-size : 1.2em; }

.textstyle002 { font-size : 1.2em; }

.textstyle002 { font-size : 1.2em; }

...

아마도 위지윅 방식의 편집기에서 텍스트 하나를 선택해 스타일 지정, 다른 텍스트 선택 후 스타일 지정... 이런 식으로 편집을 했기 때문일거예요.

이것 역시 책 열리는 속도가 느려지거나 오류 가능성을 높이게 됩니다. 똑같은 스타일은 특별한 의미를 둔 스타일이 아닌 이상 하나만 있으면 되요.

이런 부분들만 주의를 해도 전자책의 코드가 깔끔하게 정리될거예요. 코드가 깔끔한 책은 뷰어에서 열리는 속도가 빨라지고, 오류도 적게 발생합니다. 그리고, 어떤 환경에서도 편집자가 원하는 모양으로 책이 보이고요 ^^

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


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

반응형