내맘대로의 EPUB 제작 가이드

https://www.hankyung.com/article/202409033210i

기사가 나간 후 문의 메일을 여러번 받았습니다.

누가 볼까 싶었는데 생각 보다 많은 분들이 보셨나봐요.

전자책 편집자는, 

기사에서 처럼 시간 여유 많고, 웬만한 직장 월급 보다 많이 벌 수 있습니다.

제 나이대 평균 연봉 기준으로 상위 30% 안에는 여유있게 들어갑니다.

참고 : https://brunch.co.kr/@koyohada/273

매월 1000만원씩 버는 것은 아니에요. 그리고 1000만원 넘게 버는 달은 일도 많이 합니다.

일이 많으면 아침 8시 부터 일을 시작해 저녁 10시 넘어서 까지 일을 할 때도 있습니다.

하루 5~6시간일하는 달도 많이 있습니다. 일주일씩 놀기도 해요. 대신 이런 달은 수입이 그만큼 줄지요.

기사를 보고, 적게 일하고 여행도 마음대로 다니며 금전적 여유도 있으니 나도 해 봐야겠다 싶은 분들이 계신것 같아요.

전자책 편집은 정말 아무나 할 수 있습니다.

그런데 아무나 할 수 없는 일이 있나요?

노래도 아무나 부를 수 있어요.

피아노도 아무나 칠 수 있습니다.

최근에 흑백요리사가 화제였지요. 요리도 아무나 하면됩니다.

하지만,

아무나 노래를 부른다 해서 누구나 빌보드 1위를 차지할 수 있는건 아닙니다.

피아노도 아무니 칠 수 있지만, 카네기홀에서 연주할 수 있는 것은 아니에요.

요리 역시, 누구나 할 수 있습니다. 하지만 예약이 한달 씩 밀리는 식당은 아무나 운영할 수 없습니다.

TV에 나오는 가수들은 그 자리에 서기까지 피나는 노력을 합니다.

카네기홀에서 연주하는 피아니스트는 손가락에서 피가 날 때 까지 건반을 두드리겠지요.

흑백요리사에 나온 요리사들은, 동네 식당 주인들은 상상 할 수 없을 만큼 요리를 연구합니다.

전자책 제작은

인기 가수가 되는 것 보다 훨씬 쉬워요.

카네기홀에 연주할 피아노 실력을 갖추는 것 보다 훨씬 쉽고요.

흑백요리사에 나올 정도의 요리사에 비하면, 아무 것도 하지 않는 수준입니다.

그래도 엄청난 노력을 해야돼요.

오랜 시간 많은 공부를 해야하고,

수백권의 책을 만들며 스타일 편집 실력을 키워야 하고

빠른 편집을 위해 수백가지 프로그램을 써가며 자신에게 맞는 방법을 찾아야합니다.

전자책 제작자로 독립하기 까지 10년 가까이 공부를 했습니다.

독립 후 월 매출 300만원 이상 올릴 때 까지 다시 3년이라는 시간이 걸렸고요.

이 일 뿐 아니라 어떤 일이든

직장인 월급 보다 많이 벌려면

직장 다니면서 회사에 들이는 노력 보다 10배, 100배의 공을 들여야합니다.

공부도 열심히 해야 하고, 경쟁자들 보다 앞서기 위해 끊임 없이 노력을 해야합니다.

그러려면, 이 일이 정말 좋아야해요.

TV를 보다가도 재미 없이면, 전자책이나 만들지. 그게 더 재미있으니까.

이정도로 좋아해야 그만큼 노력을 할 수 있습니다.

끝으로, 전자책 제작을 제대로 공부하고 싶은 분들은 아래 정보를 보세요.

공부에 도움이 되는 내용을 모았습니다.

전자책 제작에 관심 있으시면 제가 운영하는 블로그 추천드립니다.
10년 가까이 정리한 전자책 제작 관련 내용이 모두 담겨있습니다.

내맘대로의 EPUBGUIDE.NET

아래는 EPUB에 대한 모든 것이 담겨있는 문서입니다.

처음부터 끝까지 한번은 정독을 해보세요.

https://www.w3.org/TR/epub-overview-33/

전자책 편집 프로그램 사용법은 아래 책을 보시면 됩니다.

https://sigil-ebook.com/sigil/guide/ (영문)
http://jikji.duckdns.org/book/172(한글)
시중에 나와 있는 그 어떤 책보다 Sigil에 대해 설명이 잘 되어 있습니다.

그 외에 아래와 같은 책이 있습니다.

https://bit.ly/3LLsR9I
https://bit.ly/3ncjs0W

경기도 사이버도서관 등 주요 도서관에서 무료 대출 가능하니 구매 전에 내용 확인해 보시기 바랍니다.

https://www.hankyung.com/article/202409033210i

제 얘기가 기사로 나다니 영광이네요.

전자책 제작자로 살면서 매년 여행을 다녔습니다.

제작년엔 그리스를 돌고,

작년엔 이탈리아 중부와 몰타,

올해는 포르투갈과 알함브라...

직장 생활을 했으면 꿈도 꾸지 못할 삶이지요.

제주도는 2~3개월에 한번씩 들릅니다.

일주일 정도 제주도에서 일하다 와요.

늘 1000만원을 버는건 아니에요.

일년에 2달 정도?

적게 벌 때는 수입이 많이 적어요.

그래도 연 평균은 웬만한 월급쟁이보다 높습니다.

이런 직업이 기사로 소개가 되여 영광이기도 하고

많은 분들이 이 시장에 들어와서 시장 규모가 커졌으면 하는 소망도 생기네요.

이 오류는 EPUB에서 사용할 수 없는 HTML 태그를 사용했을 때 표시됩니다.

Col: 10: ERROR(RSC-005): "ruby" 요소는 어디에도 사용할 수 없습니다.; end-tag 요소, text 또는 "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" 또는 "var" (with xmlns:ns="http://www.w3.org/2000/svg") 요소이(가) 예상됨 파일을 분석하는 동안 "오류"가 발견되었습니다.

ruby, aside, mark, header, footer, section 같은 태그를 EPUB2.0 버전에서 사용했을 때 이런 오류가 표시됩니다.

HTML5.0 이후 버전에서 추가된 태그를 EPUB2에서 사용할 때 이런 오류가 표시될 가능성이 높습니다.

u 태그는 구 버전에서 밑줄(underline)을 표시하기 위해 사용하였으나 HTML5.0 이후 버전에서 비텍스트 주석(non-textual annotation) 처리를 위한 태그로 변경되었고, 더 이상 밑줄을 긋기 위한 태그로 사용하지 않습니다. 그래서 EPUB2에서는 u 태그를 사용하면 이 오류가 표시됩니다.

이 오류를 해결하려면 EPUB에서 사용할 수 없는 html 태그를 파악하고 사용을 피해야합니다.

EPUB2에서 이런 오류가 자주 발생을 하기 때문에 아래와 같은 태그는 EPUB2 편집을 할 때 사용을 하지 않아야 합니다.

● ruby: 루비 문자를 표현하는 데 사용됩니다. (예: 한자 위에 발음을 표기)
● mark: 텍스트의 특정 부분을 강조하는 데 사용됩니다.
● section, footer, header: 문서의 구조를 나타내는 데 사용됩니다.
● aside: 본문 내용과 관련된 추가 정보를 제공하는 데 사용됩니다.
● figure: 이미지, 다이어그램 등을 포함하는 데 사용됩니다.

EPUBCheck는 오류 내용에 이 태그 대산 사용할 수 있는 태그 목록을 보여줍니다.

"a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" 또는 "var"

이 태그는 모두 EPUB3에서 사용 할 수 있습니다.

따라서 이 태그를 반드시 사용해야 한다면 EPUB3로 제작을 해야합니다.

이 중 몇몇 태그는 국내 주요 유통사(교보문고, 예스24, 알라딘, 리디북스)에서 EPUB2에 사용할 수 있도록 하고 있습니다.

EPUBCheck에서 오류가 나면 유통사에 등록을 할 수 없으나 ruby, aside 등 일부 태그에 한해서 등록을 허용합니다.

유통사 별로 이용 가능한 태그 목록은 유통사 담당자에게 확인하시기 바랍니다.

EPUB을 편집하다 보면 EPUB에 포함되지 않은 리소스를 사용했다는 오류를 자주 볼 수 있습니다.

Col: 64: ERROR(RSC-007): EPUB 파일에 포함되지 않은 "OEBPS/Images/bullet_check.PNG" 리소스를 사용하였습니다.

이 오류는 EPUB 파일에 없는 이미지, 폰트, CSS 파일 등을 사용했을 때 표시되는 오류입니다.

이 오류의 원인은 EPUB안에 지정한 경로의 파일이 없을 때 생깁니다.

제일 먼저 저 파일이 있는지 확인을 해야돼요.

저 파일이 있는데 오류가 나타나기도 합니다.

** 이미지 파일을 예로 들었지만, 글꼴, html, css 등 EPUB에 포함할 수 있는 파일은 모두 동일하게 해결할 수 있습니다.

파일이 있는데 오류가 생기는 가장 많은 이유는 오타예요.

예를 들어 이미지 파일명이 "sample.jpg" 인데 이미지를 삽입 할 때 "smaple.jpg"처럼 오타를 쳐서 넣는 것이지요.

실제 파일명은 sample.jpg 인데, smaple.jpg라고 입력하면, smaple.jpg라는 이미지(리소스)가 없다고 오류가 표시됩니다.

이 오류가 표시되면 우선 오타가 있는지 확인해 보세요.

뭐, 이정도 몰라서 인터넷 검색해 여기까지 찾아온 분은 없을거예요.

파일도 있고 오타도 없는데 이 오류가 나타날 때 문제가 되지요.

두 번째로 많은 원인은 대소문자입니다.

EPUB은 대소문자를 구분해요.

sample.jpg와 sample.JPG는 같은 파일이라 생각을 하지만,

EPUB은 이 두 파일을 서로 다른 파일로 인식을 합니다.

윈도우 같은 대소문자를 구분하지 않는 운영체제에서는 대소문자 구분 안해도 이미지가 표시됩니다.

이미지 파일의 실제 이름과 상관 없이

<img alt=" sample " src="../Images/ sample.jpg "/>

이렇게 넣으나,

<img alt="sample" src="../Images/ sample.JPG "/>

이렇게 넣으나 

모두 이미지가 제대로 표시돼요.

그런데 EPUBCheck는 이미지가 제대로 표시되는 것과 상관 없이 파일명의 대소문자가 정확히 일치해야 같은 파일로 인식합니다.

EPUB의 규칙 상 sample.jpg는 sample.JPG와 다른 파일이에요.

sample.jpg를 EPUB에 넣고, sample.JPG를 다시 추가하려고 하면 "같은 파일이 있습니다."라고 Sigil이 오류메시지를 보내도

EPUBCheck는 sample.jpg와 sample.JPG를 다른 파일로 인식합니다. 

그러니 이미지 파일도 EPUB에 있고, 미리보기에서 이미지도 잘 보이는데 이런 오류가 나온다면 이미지 파일명의 대소문자를 확인해 보세요.

그 다음 원인은 파일의 정확한 위치가 잘못 되었을 때 입니다.

EPUB root 폴더에 Images 폴더를 만들고 이 폴더 안에 이미지 파일을 넣었다면 이미지 파일 위치는 아래와 같습니다.

../Images/sample.jpg

이건 Sigil의 기본 폴더 경로이기도 해요.

그런데 인디자인 같은 프로그램에서 EPUB으로 저장하면 어떨까요?

인디자인에서 EPUB으로 저장을 하면 이미지 파일의 폴더 경로가 달라져요.

image/sample.jpg

이런 식으로 EPUB을 편집한 프로그램 마다 고유의 파일 경로가 있지요.

이럴 때는 실제 파일 경로를 찾아서 넣어 줘야 합니다.

파일 경로도 대소문자를 구분하니 정확히 대소문자를 구분해 넣어줘야 합니다.

Sigil에는 실제 파일 경로를 확인할 수 있는 옵션이 있으니 이를 활용하면 됩니다.

아니면 [Sigil 표준 양식으로 재구성] 하고 편집을 해도 되지요.

이것 외에도 다른 이유가 있을지 몰라요.

어떤 이유든 이 오류가 생기는 이유는 항상 같습니다.

EPUB에 제대로 된 파일이 있가, 파일명은 실제 파일 명과 대소문자를 포함 해서 완전히 똑같은가, 그리고 그 경로가 정확한가.

이 기준만 정확히 알고 있다면 어떤 원인으로 생긴 문제든 쉽게 해결 할 수 있는 오류입니다.

EPUBCheck 오류 내용

"i" 요소는 여기에 사용할 수 없습니다 ; end-tag 요소 또는 "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" 또는 "ul" (with xmlns:ns="http://www.w3.org/2000/svg") 요소이(가) 예상됨 파일을 분석하는 동안 "오류"가 발견되었습니다.

Col: 10: ERROR(RSC-005): "p" 요소는 여기에 사용할 수 없습니다 ; end-tag 요소, text 또는 "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" 또는 "var" (with xmlns:ns="http://www.w3.org/2000/svg") 요소이(가) 예상됨 파일을 분석하는 동안 "오류"가 발견되었습니다.

EPUB 전자책을 편집하면서 가장 많이 보는 오류 메시지 중 하나일거예요.이 오류는 특정 태그 또는 요소를 잘못된 위치에 사용했을 때 표시됩니다.

이 오류를 이해하려면 태그의 기본 속성 중 하나인 "인라인 태그"와 "블럭 태그"에 대해 공부해야 합니다.더 정확히 이해를 하려면 HTML 구조를 이해하고, 섹션 루트, 콘텐츠 섹션, 텍스트 콘텐츠, 인라인 텍스트 등의 태그 별 구성과 역할을 알아야 하지만 간단히 "인라인 태그"와 "블럭 태그" 정도의 개념만 알아도 됩니다.

인라인과 블럭 요소는 CSS에서 콘텐츠(텍스트)를 어떻게 배치하는지를 정의하는 display 속성이지만 HTML 태그는 기본 값으로 인라인과 블럭 속성을 부여받습니다.

전자책 편집 할 때 가장 많이 쓰는 태그인 p, div, 제목 태그(h1 ~ h6) 등은 블럭 태그입니다. 블럭 태그는 새로운 행으로 시작하며 태그 하나 당 하나 씩 세로로 배치가 됩니다. 

문단 내에서 특정 글자를 꾸밀 때 사용하는 태그인 i, b, sup, sub, span 같은 태그는 인라인 태그입니다. 블럭 태그처럼 행갈이를 하지 않고 한 줄에 표시됩니다.

여기부터 중요!!!

블럭 태그는 인라인 태그를 대신해 사용 할 수 없습니다.div 같은 예외적인 태그가 있긴 하지만 p, h1 ~ h6 같은 블럭 태그는 다른 블럭 태그를 포함할 수 없고, 블럭 태그 안에 사용할 수도 없습니다.

<h1> 블럭 태그 안에 <p>다른 블럭 태그를</p> 사용할 수 없습니다.</h1>

이렇게 h1태그 안에 p태그를 쓸 수 없다는 의미입니다. 이렇게 쓰면 h1 태그 안에 p 태그가 올수 없기 때문에 아래 같은 오류가 표시됩니다.

Col: 10: ERROR(RSC-005): "p" 요소는 여기에 사용할 수 없습니다 ;

 해결 방법은 간단합니다. 

p 태그를 h1 태그 바깥으로 빼거나 p 태그를 span 같은 인라인 태그인로 수정하면 되지요.

반대로 인라인 태그는 반드시 블럭 태그 안에 포함되어야 합니다.

<i>블럭 태그 없이 인라인 태그를 사용할 수 없습니다.</i>

이렇게 블럭 태그 없이 인라인 태그를 쓰면 아래와 같은 오류가 표시됩니다.

"i" 요소는 여기에 사용할 수 없습니다

b, sup, sub 같은 인라인 태그는 모두 블럭 태그 안쪽에 사용해야 합니다.

이 오류를 수정하려면 인라인 태그 바깥쪽에 블럭태그를 감싸주면 됩니다.

<p> <i>블럭 태그 없이 인라인 태그를 사용할 수 없습니다.</i> </p>

오류 메시지 뒤에 나오는 설명은 이 오류를 수정하는 방법을 알려줍니다.

"address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" 또는 "ul" (with xmlns:ns="http://www.w3.org/2000/svg") 요소이(가) 예상됨

<i> 태그를 감쌀 수 있는 블럭 태그 목록이에요.

p 뿐 아니라 address, blockquote, div, h1 ~ h6 등의 요소가 i 태그를 사용할 때 필요하다는 의미지요.