내맘대로의 EPUB 제작 가이드

https://github.com/Sigil-Ebook/Sigil/releases

Sigil 2.3.1 버전 업데이트가 올라왔습니다.

이번엔 버그 수정을 위한 마이너 업데이트로 기능 추가/개선은 없습니다.

​

이번 버전에서 가장 큰 변화는 이 부분입니다.

​

Also note that the Microsoft VC++ runtime redistributable is no longer being bundled in the Sigil Windows installer starting with version 2.3.1. This should already be installed on any Windows PC that Sigil is supported on.

​

Windows 운영체제에서는 Sigil을 사용하려면 [Visual C++ 재배포 가능 패키지]라는 것이 반드시 필요합니다.

Sigil 외에도 이 패키지를 사용하는 프로그램이 많아 윈도우 PC를 오래 사용한 분들은 이런 프로그램이 설치돼 있을거예요.

Sigil 2.3.0 버전까지는 이 패키지가 설치돼 있지 않으면 먼저 설치를 하고 Sigil을 설치했습니다. 그런데 2.3.1 버전 이후 부터는 PC에 재배포 패키지를 먼저 설치해야 합니다.

​

그 외에 EPUB을 불러올 때 생기는 오류를 몇개 수정했네요.

그리고 [OPF 메니패스트 ID 재생성] 메뉴 이름도 반영했습니다.

이 오류는 추가 설명이 필요 없습니다.

오류 메시지만 읽어 봐도 문제의 원인과 해결 방법을 쉽게 알 수 있습니다.

Col: -1: WARNING(PKG-010): 파일명 "***"에 공백이 포함되어 있습니다. 구형 판독 시스템과 상호 운용성 문제가 발생할 수 있습니다.

EPUB에 포함된 파일 명에 공백이 포함되어 있을 때 표시되는 오류입니다.

file name.jpg

file name.xhtml

file name.otf

이렇게 파일 명 중간에 공백이 있으면 오류가 표시됩니다.

EPUB은 파일 명 사이에 공백을 허용하지 않습니다.

해결 방법은 설명 안해도 되겠지요?

Sigil의 어원은 '인장'을 의미하는 라틴어 sigillum에서 따왔다고 합니다.

서양 중세 시대 '사본'을 의미했던 sigla와 발음이 비슷하기도 하고요.

Sigil의 개발자는 Sigil이란 단어를 선택한 이유를 아래와 같이 설명합니다.

1. Sound good;(좋아 보이고)
2. Easily pronounceable in Croatian and English;(크로아티아 어와 영오로 발음하기 쉬우며)
3. Have something to do with books. (책과 연관된 의미를 담고 있어서)

Sigil은 이 세가지를 모두 포함하는 단어입니다. 적어도, 제작자가 보기엔 그렇다고요.

Sigil의 발음에 대해서 논쟁이 있습니다.

"시길(sig-il)이다", "시즐(si-g(j)il)이다"로요.

사람들 참, 힘들게 살아요. 뭐로 발음하면 어때요. 그냥 부르기 편하면 되는데.

그래도 논쟁을 좀 더 들여다 볼까요?

영어 사전에서 sigil(인장)을 검색해 발음을 들어보면 Si-g(j)il로 읽어줍니다.

그래서 시길이 아닌 시즐이라는 것이지요. 시즐파는 이를 이유로 시즐이라고 주장을 합니다.

Sigil은 영어단어고, 영어 사전에서 시즐이라고 발음하니 시즐이 맞다는 원리주의적인 주장입니다. 

그런데 sigillum의 발음은 시길리움에 더 가깝습니다.

sigla도 시길라에 가까운 발음이지요.

원작자가 sigillum, sigla에서 어원을 찾고 있으니 이를 보면 시길이 맞습니다.

그럼 원작자의 발음을 볼까요?

원작자는 크로아티아 사람이에요. 

크로아티아에서 sigil은 sixil 또는 sihil로 발음한다고 하네요.

시실, 시힐 정도 될거예요.

시길, 시즐, 시실, 시힐....

원작가자 처음 만들고 발음했으니 시실 또는 시힐이라고 발음해야 맞나요?

영어사전에서 시즐이라고 발음하니 시즐이 맞을까요?

아니면 지금까지 시길로 써 왔으니 시길로 가야 할까요?

(왜 이런 논쟁이 일고 있는지 지금 이 글을 쓰면서도 이해가 되지 않습니다)

이 논쟁을 정리해 줄 원작자의 얘기로 마무리 할게요.(https://www.mobileread.com/forums/showthread.php?p=541317)

The preferred pronouncement would be /ˈsɪdʒəl/, in IPA.(선호하는 발음은 IPA에서 /ˈsˈdʒəl/입니다.)

- 여기까지 보면 시즐파 승리로 보입니다
But I'm not anal about it. You are free to pronounce it differently if you speak a foreign language (or even if you don't) and something else feels more natural. (그러나 저는 그렇게 엄격하지 않습니다. 외국어를 사용하거나 (또는 사용하지 않더라도) 다른 발음이 더 자연스럽게 느껴진다면 다른 발음을 사용해도 괜찮습니다.)

- 그 나라에 정착한 발음을 사용하면 된다는 것이지요. Sigil은 국내에서 시길로 자리를 잡았습니다. 그런데 일부 소수가 사전 발음 시즐이 맞다고 우기면, 그들은 그렇게 발음하면 됩니다. 시길로 발음하고 싶으면 시길로, 시즐로 발음하고 싶으면 시즐로 하면 됩니다.

실제로 Sigil 번역에 참여하는 많은 나라 자원봉사자들이 시길, 시실, 시힐, 시즐 등 다양한 발음으로 Sigil을 번역하고 있어요.

그럼 여시거, Sigil 메뉴를 번역하는 제 입장을 정리해 볼게요.

제가 시즐로 번역하느냐, 시길로 번역하느냐에 따라 메뉴에서 시길이 될지 시즐이 될지 결정되거든요.

저는 국내에 Sigil을 소개하기 위해 노력했던 선구자를 따르기로 결정했습니다.

Sigil 메뉴를 처음으로 번역하신 분, 이름은 모르지만 처음으로 Sigil 메뉴를 한글화 하던 CLUB706이라는 분이 있어요.

이 분이 국내에 Sigil이 알려지기 훨씬 전인 0.6 버전대에서 Sigil 오류 메시지를 다음과 같이 번역을 했습니다.

Sigil has encountered a problem. -> 시길에 문제가 발생하였습니다

아마 이 번역이 공식적인 Sigil의 첫 발음이 아니었을까요?

원 저작자는 원하는 대로 발음하면 된다고 했고, 그래서 Sigil의 한글화를 위해 처음으로 노력한 CLUB706이란 분이 시길이라고 발음을 했으니, 이정도면 공식 발음을 시길로 정해도 될 충분한 이유가 있다고 봅니다.

시중에 스스로 자타공인 전문가라는 사람이 이상한 헛소리를 하던데, 그건 진짜 헛소리예요.

자기 입으로 자타공인 전문가라고 얘기하는 것 부터가...

링크(팝업) 주석, 또는 내부 링크를 연결한 책에서 이런 오류가 생길 수 있습니다.

인디자인 같은 조판 프로그램에서 EPUB으로 추출한 후 파일을 합치거나 해도 이런 오류가 생길 수 있지요.

Col: 18: ERROR(RSC-005): Duplicate "IDname" 파일을 분석하는 동안 "오류"가 발견되었습니다.

이 오류는 HTML의 ID 생성 규칙을 알아야 해결 할 수 있습니다.

ID는 프래그먼트 식별자를 이용해 다른 위치를 가리키기 위한 고유 식별자입니다.

말이 어렵지요?

프래그먼트 식별자는 URL 또는 소스의 경로(파일 위치 표시할 때 src="../path/file.xhtml"로 쓰는)를 지정할 때 사용하는 규칙이에요. html 파일은 수백 줄 이상 내용이 들어갈 때가 많습니다. 링크를 걸면서 특정 위치, 예를 들어 특정 소제목이나 본문 중간 어디쯤에 있는 단어나 이미지를 가리키고 싶을 때 쓰는 것이지요.

홈페이지 주소라면 이렇게 표시합니다.

https://example.com/content.html#fragmentID

EPUB에서 내부 링크를 걸었다면 이렇게 되지요.

<a href="../Content/Conteht.xhtml#fragmentID">

경로 뒤에 붙은 #fragmentID를 프래그먼트 식별자라고 합니다.

그리고 프래그먼트 식별자가 가리키는 곳에 고유 식별자, ID가 있습니다.

'고유'란 단어의 뜻을 아시지요? 국어시간이 아니니 설명은 넘어가고...

고유식별자는 HTML 태그에 id="fragmentID" 처럼 붙입니다.

<p id="fragmentID ">.....</p>

만약 content.xhtml 파일에 fragmentID가 두개라면 어떻게 될까요?

<p id="fragmentID">여기에 링크를 걸어야 합니다.</p>

....

<p>id="fragmentID">여기에도 링크를 걸어야 합니다.</p>

이렇게 되어 있다면 <a href="../Content/Conteht.xhtml#fragmentID">이 링크는 어디로 이동할까요?

같은 파일 안에 동일한 ID가 두개 이상 있을 경우 링크로 연결을 할 수 없습니다. 둘 중 어디를 가리키는지 확인할 수 없으니까요.

그래서 같은 파일 안에 ID 이름은 반드시 하나만 존재해야 합니다.

fragmentID01, fragmentID02, fragmentID03...이렇게요.

그런데 편집을 하다 몇 번까지 만들었는지 잊고 같은 ID를 썼다면

fragmentID01, fragmentID02, fragmentID03, fragmentID03, fragmentID04

EPUBCheck가

Duplicate "fragmentID03" 파일을 분석하는 동안 "오류"가 발견되었습니다.

Duplicate "fragmentID03" 파일을 분석하는 동안 "오류"가 발견되었습니다.

라는 오류를 표시합니다.

이 오류는 항상 2개 이상 표시가 됩니다. fragmentID03이 최소 2개가 있는데 둘 중 어느 ID가 제대로 된 값인지 EPUBCheck는 알 수 없거든요. 그래서 두개(혹은 그 이상) 위치를 모두 오류메시지에 표시를 합니다. 

수정 방법은 간단합니다. ID 이름을 바꾸면 돼요.

단, ID 이름을 바꾼 후 프래그먼트 식별자의 ID도 함께 수정을 해 줘야돼요.

그렇지 않으면 Col: 37: ERROR(RSC-012): Fragment 식별자가 정의되지 않았습니다.라는 오류가 표시되거든요.이 오류는 다음 글에서 설명하겠습니다.

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