[TIP] 전자책 편집 중 많이 하는 '실수'

Tip&Tech 2016.06.27 10:58

‪#‎전자책‬ ‪#‎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; }

...

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

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

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

설정

트랙백

댓글

사용하기 쉬운 EPUB 적합성 검사기(EPUB Validator) - 메뉴 한글화

Tip&Tech 2016.06.10 15:34


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

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

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


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

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

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


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





설정

트랙백

댓글

초보자들도 쉽게 사용할 수있는 EPUB 편집기. Wink에디터(베타)

전자책 출판정보 2016.04.22 10:50

국내에서 출시한 가볍고 깔끔한 EPUB 에디터를 소개해 드립니다.

전자책 전문 출판사인 '이새의나무 '에서 준비한 전자책 편집 프로그램입니다.

EPUB 형태로 전자책을 편집할 수 있고, EPUB 뿐 아니라 안드로이드 앱(apk)으로도 내보낼 수 있는 기능이 담겨있습니다.


Wink 공식 홈페이지 : http://winkeditor.modoo.at/

이새의나무 출판사 : http://jessebook.cafe24.com/



Wink는 [정말 쉬운 ePub 전자책 에디터! Wink!]라는 소개에 걸맞게 정말 쉽고 간결한 구성으로 되어 있습니다. 쉽다는건 장점일 수도, 단점일 수도 있습니다. 쉽기 때문에 누구나 사용할 수 있다는 장점이 있지만, 기능적인 면에서도 간단하다는 것은 단점이 됩니다.


Wink는 이 단점을 '정말 쉬운' 사용으로 극복을 합니다. 정말 사용하기 쉽기 때문에 전문가 보다는 처음 전자책 제작을 시작하는 분들에게 초점이 맞춰져 있습니다. HTML도 모르고, CSS도 모르고, EPUB이 뭔지도 모르고, 원고를 HWP나 텍스트파일로 갖고 있는 분들이 EPUB으로 책을 만들어야 한다면 Wink가 큰 도움이 될 것입니다. 



기본화면도 직관적이고 간결합니다. EPUB의 기본 구조인 목차, 책구조(책 본문이 담겨있는 HTML 파일), 폰트, 스타일, 이미지, 멀티미디어 그리고 본문을 편집하는 화면으로 구성되어 있습니다.


각 항목에는 파일을 추가하거나 삭제할 수 있게 되어 있어 PC를 조금 다뤄본 사람이라면 누구나 '아하!' 하고 사용법을 알 수 있을 정도로 직관적이고 사용이 쉽습니다.



Wink에서 가장 공을 들인 부분이 CSS인 것 같습니다. 코딩 없이도 책 편집에 필요한 대부분의 CSS를 간단히 작성할 수 있습니다. 180개 정도 되는 CSS 항목 중 전자책 편집에 많이 쓰이는 23개 항목들을 CSS를 처음 접하는 분들도 쉽게 사용할 수 있게 WYSIWYG 방식으로 제공합니다.



전자책 편집을 해보지 않은 사람들이라면 '이런게 필요해?' 라고 생각할 수도 있는 float이나 border-radius 같은 설정도 담겨 있어 '전자책을 만들어 본 사람'이 만들었다는 생각을 하게 됐습니다. 전자책 편집자가 아닌 Web 편집자나 개발자라면 이런 섬세한 부분을 신경쓰지 못합니다. 

국내에 출시된 여러 전자책 편집 프로그램을 보면서 '이건 책을 모르는 사람들이 만들었구나.'하고 생각을 했었는데 Wink는 책을 만들던 사람들이 자신이 느낀 불편함을 편집 프로그램에 담은 편집 프로그램입니다.



WYSIWYG 방식이 중심이긴 하지만 코딩을 위한 HTML 편집기도 제공을 합니다. 그런데 이 부분은 아쉬움이 많이 남습니다. 코드 정리도 깔끔하지 않고 본문에 해당하는 <body></body>만 보여줍니다. 

이 역시 초보자를 위한 배려라는 생각이 들지만, 중급 이상 사용자를 위해서는 너무 제한을 둔게 아니었나 하는 아쉬움이 남습니다. 



내보내기는 3가지를 지원하는데 아직은 완전히 작동하지 않는 것 같습니다. EPUB으로 내보내기는 잘 되고, 안드로이드 앱(apk)은 설정 문제가 있는지 오류가 났습니다. 그래서 설정을 하려고 갔더니 java SDK 위치만 등록할 수 있고 다른 설정은 없었습니다. 

안드로이드 앱으로 내보내는 기능은 잘 활용하면 쓸모가 많을 것 같습니다. 다른 편집 프로그램들도 apk로 내보내는 기능을 제공하는 경우가 있었지만 번거로운 점이 많았습니다. Wink는 간단한 설정으로 apk를 만들 수 있게 해주는 것 같아 제대로 작동만 한다면 EPUB을 쉽게 apk 파일로 변환할 수 있을 것 같습니다. 



CSS 가져오기 기능도 편리합니다. 전자책 편집자라면 기본 CSS 하나쯤은 갖고 있을거예요. 많이 사용하는 CSS를 만들어 두고 책을 만들 때마다 사용하는데 편집 시간을 많이 절약해 줍니다. 전자책 편집 = CSS 편집이라고 해도 될 정도로 CSS 편집에 시간이 많이 들거든요. Wink는 편집자가 사용하는 CSS를 불러올 수 있습니다. 그리고 편집도 가능합니다. 


===


간단히 Wink에 대해 소개를 해봤습니다.

Wink의 사용 방법은 따로 설명을 할 필요가 없을 정도로 쉬웠습니다. 텍스트를 넣고, CSS로 원하는 편집을 텍스트에 적용하면 되서 HWP나 MS워드를 사용해 본 사람이라면 사용법을 보지 않아도 충분히 사용할 수 있습니다. 설치하고 1시간 정도면 누구나 사용법을 익힐 수 있을거라 생각합니다. 


'정말 쉬운' 사용이 Wink의 가장 큰 장점이라고 생각합니다. 이를 만든 분들도 여기에 초점을 맞춘 것 같습니다. 출판계에 계신 분들은 전자책 제작을 어렵다고 생각하고 HTML이나 CSS를 배우기 어려운데 Wink가 이런 분들도 전자책을 쉽게 제작할 수 있도록 해줍니다.


아쉬운 점도 있습니다. 아직 기능적으로 보완이 필요해 보입니다. 몇몇 기능들은 제대로 작동하지 않더라구요. 기능이 빠진게 아닌가 싶은 부분도 있었습니다. 심각한 문제는 아니라고 봅니다. 이제 막 나왔으니 안정화 될 때까지 시간이 필요합니다. 


초보자에게는 아주 편리한 프로그램이지만 중급 사용자에게는 조금 불편해 보입니다. 이는 단점이라고 할 수는 없습니다. '정말 쉬운' 사용을 위해서는 복잡함을 제거해야 하니까요. 그래서 단점이라 하지 않고 '아쉬운 점'이라고 해야할 것 같습니다. 중급 이상 사용자는 앞으로도 텍스트 에디터와 Sigil을 사용해야 하는 운명인 것 같네요 ㅜ.ㅜ

설정

트랙백

댓글

2014년 출판산업 실태조사

전자책 출판정보 2016.01.05 13:00

2014년 출판산업 실태조사 자료입니다. 

전자출판협회, 여성인력센터 등에서 3년 넘게 강의를 하고 있는데 출판계에 계신 분이나, 출판에 관심있는 분들은 '데이터'와 '숫자'에 많이 약하다는 것을 느낍니다. 회사에서 사업기획을 5년 넘게 하면서 산업 동향과 다양한 숫자에 많은 정보가 담겨있다는 것을 느끼고 있습니다. 그래서 강의를 할 때도 출판 뿐 아니라 출판과 관련된 다양한 정보와 숫자를 많이 보여주는 편입니다. 그러면 강의를 듣는 사람들은 '내가 알고싶었던게 저거야'라며 반겨주십니다. 이 정보들은 인터넷에서 조금만 시간을 투자하면 얻을 수 있는 것들인데도 말입니다.


출판계 정보를 가장 쉽게 찾을 수 있는 자료가 '출판산업 실태조사'입니다. 매년 3분기쯤, 한국출판문화산업진흥원에서 전년도 출판계 자료를 모아 자료집을 내고 있습니다. 다른 기관들에서 제시하는 자료보다 정확도가 높고, 다양한 정보를 담고 있어 출판계 분들이라면 꼭 읽어봐야 하는 자료입니다. 그런데 이런 자료가 있다는 것 조차 모르는 분들이 많더라고요.


아래 링크를 타고 들어가면 자료를 받을 수 있습니다.

2015년 자료는 아직 올라오지 않았습니다.


2013년 기준으로 작성한 2014년 출판산업 실태조사 자료가 현재까지 가장 최신 자료입니다.

출판과 관련된 일을 하는 분들께 무료로 제공되는 귀중한 정보이니 꼭 읽어보시기 바랍니다. 



게시글 보기 : http://www.kpipa.or.kr/intro/newsView.do?board_id=1&article_id=38682


2014년 출판산업 실태조사 자료 받기 http://www.kpipa.or.kr/info/studyrepotView.do?board_id=51&article_id=33206&pageInfo.page=&search_cond=&search_text=&list_no=34#

설정

트랙백

댓글


티스토리 툴바