내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
#전자책_편집을_위한_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; }
...
아마도 위지윅 방식의 편집기에서 텍스트 하나를 선택해 스타일 지정, 다른 텍스트 선택 후 스타일 지정... 이런 식으로 편집을 했기 때문일거예요.
이것 역시 책 열리는 속도가 느려지거나 오류 가능성을 높이게 됩니다. 똑같은 스타일은 특별한 의미를 둔 스타일이 아닌 이상 하나만 있으면 되요.
이런 부분들만 주의를 해도 전자책의 코드가 깔끔하게 정리될거예요. 코드가 깔끔한 책은 뷰어에서 열리는 속도가 빨라지고, 오류도 적게 발생합니다. 그리고, 어떤 환경에서도 편집자가 원하는 모양으로 책이 보이고요 ^^
'Tip&Tech' 카테고리의 다른 글
| [TIP] 링크 상태(링크, 방문, 마우스오버)에 따른 스타일 적용 (0) | 2016.07.06 |
|---|---|
| [TIP] 전자책 제작을 할 때 가장 먼저 적용해야 하는 스타일 (3) | 2016.06.28 |
| 정규표현식 활용 - 태그는 무시하고 본문에 있는 영어단어만 찾기 (0) | 2016.06.11 |
| 사용하기 쉬운 EPUB 적합성 검사기(EPUB Validator) - 메뉴 한글화 (1) | 2016.06.10 |
| 전자책 주석 처리 방법(팝업 + 링크) (5) | 2016.02.26 |