posted by 내.맘.대.로 2016. 7. 14. 13:28

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

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

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

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

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

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

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

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

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


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

 

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

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

https://www.epubguide.net/notice/309


본문 혹은 본문의 특정 단어에 밑줄을 긋고 싶을 때 <u> 태그를 쓸 수 있습니다. 그런데 <u>태그를 쓰면 밑줄이 예쁘지 않아요. 두께나 스타일을 줄 수도 없습니다. 텍스트에 딱 달라붙은 밑줄이 그어져요. 

이럴 때 <u> 태그 스타일을 바꿔보세요. HTML 태그의 스타일은 편집자가 원하는 대로 바꿔 사용할 수 있습니다. 글자와 밑줄 간격을 조절할 수 있고, 밑줄 종류도 점선, 실선, 이중실선 등 다양하게 바꿀 수 있습니다. 색깔, 선의 두께도 편집자가 원하는 대로 지정할 수 있지요. 

선택자를 만들어 처리해도 되지만 태그에 스타일을 적용하면 코드가 깔끔해져요.


<span class="underline_selector">밑줄 단락</span>

<u>밑줄 단락</u>


이렇게 코드도 깔끔해 지고, 편집 시간도 줄일 수 있습니다. 물론 <u>태그의 기본 스타일로 다른 곳에 사용했다면 쓸 수 없지요.


아래처럼 <u>태그에 스타일을 적용해 보세요. <u>태그를 쓸 수 없다면 선택자에 스타일을 적용하고 span 태그를 사용해도 되요.


u {

   text-decoration : none;

   border-bottom : 1px solid #FF0000;

   padding-bottom : 2px;

}


text-decoration : none;을 해 준건 u 태그의 기본 스타일인 밑줄을 없애기 위함입니다. 이걸 해주지 않으면 border로 그어준 밑줄에 u태그의 밑줄이 겹쳐 그려지거든요.

border-bottom(border)는 다양한 속성이 있습니다. 1px는 밑줄의 두께예요.


border 밑줄 기본 두께

1px 밑줄 두께

2px 밑줄 두께

5px 밑줄 두께


solid는 1줄 실선을 뜻합니다. double(2줄 실선), dotted(1줄 점선), dashed(긴 점선), groove, ridge, inset, outset 등의 밑줄 종류를 선택할 수 있어요. 마지막에 붙은 #FF0000은 색입니다. 원하는 밑줄 색을 지정하면 됩니다.


padding-bottom으로 글자와 밑줄의 간격을 조절할 수 있습니다. padding을 주지 않아도 적당한 간격이 벌어지지만 섬세한 편집이 필요할 때 유용하게 사용할 수 있어요. 단, padding 값을 너무 크게 주면 아래쪽 줄에 영향을 줄 수 있으니 주의해야 합니다. 


padding-bottom을 주지 않았을 때

padding-bottom : 2px

padding-bottom : 10px(밑줄이 아래 문장에 그어짐)

padding-bottom 값이 너무 크면 윗쪽 단어에 그은 밑줄이 아래 문장과 겹칠 수 있어요.

반응형
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 검사기가 필요하신 분들은 이 프로그램을 사용하시면 도움이 될거예요.


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

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

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


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





반응형