내맘대로의 EPUB 제작 가이드

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 태그를 사용할 때 필요하다는 의미지요.

일본어 책 세로쓰기를 하면 페이지를 오른쪽에서 왼쪽으로 넘깁니다.

EPUB에서 세로쓰기를 한 후 뷰어로 열면, 세로쓰기는 제대로 보이지만 페이지가 왼쪽에서 오른쪽으로 넘어가지요.

정확히는,

오른쪽 화살표를 누르면 페이지가 왼쪽으로 넘어가는 형태입니다.

그래서 뭔가 어색합니다.

이럴 때 opf에 아래 옵션을 추가하면 왼족 화살표를 누를 때 왼쪽으로 페이지가 넘어가도록 수정할 수 있습니다.

page-progression-direction="rtl"

spin에 사용할 수 있는 속성은 3개입니다.

id, toc, page-progression-direction

이 중 페이지를 넘기는 방향 옵션이 page-progression-direction입니다.

기본은 ltr이고, 일본어 처럼 오른쪽에서 왼쪽으로 넘기는 책일 때는 rtl 속성을 적용하면 됩니다.

자세한 설명은 아래를 참고하세요.

https://www.w3.org/publishing/epub3/epub-packages.html#sec-spine-elem

EPUBCheck 5.0이 올해 안에 공개될 예정입니다.

EPUB3.3 권장사항에 대한 지원이 추가될 예정이라고 하네요.

그래서 120 여개의 새로운 번역도 추가되었습니다 ㅜ.ㅜ

도움을 주실 분들은 아래 사이트에 들어가 번역 자원해 주세요~

https://www.transifex.com/idpf/epubcheck/dashboard/

Hi EPUBCheck translators!

The next major release of EPUBCheck (v5.0.0) will be published in a few weeks, in 2022. This new version adds support for the upcoming EPUB 3.3 W3C Candidate Recommendation.

EPUBCheck의 다음 주요 릴리스(v5.0.0)는 몇 주 후인 2022년에 게시될 예정입니다. 이 새 버전은 곧 출시될 EPUB 3.3 W3C 후보 권장 사항에 대한 지원을 추가합니다.

Several messages have been changed, and new messages have been introduced. They all require new translations.

** Translations will be accepted until December 19! **

여러 메시지가 변경되었으며 새로운 메시지가 도입되었습니다. 그들은 모두 새로운 번역이 필요합니다. ** 번역은 12월 19일까지 받습니다! **

Give your local community a treat and update the translations for your favorite language, we'll make sure to include them in the final release! But don't worry, any translations received after December 19 will still be published in a later maintenance release…

지역 커뮤니티에 도움을 주고 좋아하는 언어로 번역을 업데이트하면 최종 릴리스에 포함하도록 하겠습니다! 그러나 걱정하지 마십시오. 12월 19일 이후에 받은 번역은 이후 유지 관리 릴리스에서 계속 게시됩니다…

You can find more information on the latest v5.0.0 preview in the release notes:
https://github.com/w3c/epubcheck/releases/tag/preview

As always, if you have questions about a specific message or part of a message, feel free to open a new GitHub issue:
https://github.com/w3c/epubcheck/issues

Many thanks for your help!

Best,
Romain.

이런 분들은 전자책 제작 강의 듣기 전에 컴퓨터 기초부터 배우세요.

컴퓨터 기초도 모르면 전자책 제작 할 수 없습니다.

최소한, 저는 전자책 제작 방법을 가르칠 수 없습니다.

컴퓨터 기초도 모르면서 전자책 제작을 배우려는 분들은

전자책 제작이 쉽다고 가르치는 분들께 배우세요. 저는 그정도 실력이 안되거든요.

​

강사. 파일 다운로드 하세요. 다운로드 한 파일을 Sigil에 추가하세요.

수강생. 다운받은 파일이 어디있나요?

​

강사. 이 파일을 ...에 있는 폴더에 복사하세요.

수가생. 파일 어떻게 복사해요?

​

강사. 파일 저장하세요.

강사. Sigil 종료하고, 다시 실행시킨 다음 저장한 파일 불러오세요.

수강생. 저장한 파일 어디 있어요?

​

강사. 편집 메뉴에서 설정 누르세요.

수강생. 설정이 어디있어요?

강사. 편집 메뉴에 있어요.

수강생. 편집이 뭐예요?

​

강사. 압축파일에 있는 *** 파일을 여세요.

수강생. 파일이 안열려요.

강사. 압축울 푸세요.

수강생. 압축 풀었는데요.

강사. 탐색기에서 압축 파일 목록 보여주는거 말고, 압축 파일을 푸세요.

수강생. ...

​

수강생. 시키는 대로 똑같이 했는데 스타일 적용이 안돼요.

강사. 똑같이 안해서 그래요.

수강생. 정말 똑같이 했어요.

강사. 오타 있나 보세요.

수강생. 오타 없어요.

강사. 정말 시키는 대로 했는데 안되면 오타가 있을거예요.

수강생. 오타 없다니까요.

강사. 시키는 대로 했고, 오타가 없으면 적용 될거예요.

수강생. 진짜 안돼요.

강사. (수강생 화면 보고) 여기 오타 있네요.

​

강사. A 하고, B 한 다음, C를 하세요.

강사. 다시 한번 설명합니다. A 하고, B 한 다음, C를 하세요.

강사. 천천히 다시 한번. A 하고, B 한 다음, C를 하세요.

강사. A 하고, B 한 다음, C 하셨어요?

수강생. 뭐 하라고요?

 
              
 전자책 제작 실습-전자책으로 만드는 '이상한 나라의 앨리스'
 
국립중앙도서관에서는 전자책 제작에 대한 이해를 돕는 강좌를 다음과 같이 진행합니다.
관심 있는 분들의 많은 참석 바랍니다.
 
원활한 교육운영을 위해 교육신청서 작성시 아래의 질문에 답변 부탁드리겠습니다.
 1. 전자책 제작, 검수, 유통 등 현재 전자책 관련 업무를 하고 계신가요?
 2. 전자책 편집 프로그램(SIgil, Wink2.0, 이북스타일리스트 등)을 사용해 보신적이 있나요? 
  3. 잘 다루지는 못해도 HTML, CSS가 무엇인지 알고 계신가요?
ㅇ교육명: 전자채 제작 실습-전자책으로 만드는'이상한 나라의 앨리스'
ㅇ일  시: 2017.5.10/12/17/19/24/26(수,금) 6회 14:00~17:00
ㅇ장  소: 국립중앙도서관 디지털 도서관 소회의실(지하2층)
ㅇ대  상: 도서관 이용자 및 일반인(16세이상) 35명
ㅇ강  사: 박웅영(토네이도미디어그룹 기획팀장)
            - 교보문고 근무(2003~2014)
            - 전자출판 표준화포럼 EPUB PG에디터 및 간사
            - KERIS 주관 전자출판과 교육 기술 융합 표준(EDUPUB)동향 조사 및 분석 연구 참여
            - <교보문고가 제공하는 EPUB 제작 가이드> 저술     
ㅇ문  의: 02-3483-8846
ㅇ교육내용
   1일차(5.10) Sigil에 대한 소개 및 전자책 제작에 대한 전반적인 설명
   2일차(5.12) 편집기초-전자책을 위한 HTML (HTML 기초문법 및 주요 태그)
   3일차(5.17) 편집기초 전자책을 위한 CSS (CSS기초 문법 및 주요 속성)
   4일차(5.19) 전자책 편집-이상한 나라의 앨리스(1)-HTML과 CSS로 스타일 편집하기
   5일차(5.24) 전자책 편집-이상한 나라의 앨리스(2)-HTML과 CSS로 스타일 편집하기
   6일차(5.26) 고급 편집 기술 활용-Clips, 정규표현식, 플러그인 활용하기
※ 협조사항 
   교육 신청이 승인되신 분에 한해 교육 참석이 가능합니다. (승인여부 확인 : 도서관 홈페이지>내서재>신청내역>이용자교육)