내맘대로의 EPUB 제작 가이드

1. 플러그인(Plugin)이란?

플러그인은 말 그대로 필요한 기능을 플러그에 꼽듯이 해서 사용하는 부가기능이에요. 스마트폰에 메모리가 부족하면 추가 메모리를 꼽는 것과 비슷하다고 생각하시면 됩니다. 플러그인을 잘 활용하면 복잡하게 해야 하는 작업이 아주 편해져요. 그런데 스마트폰에 추가 메모리를 설치하려면 메모리 슬롯이라는게 필요하잖아요. 컴퓨터 프로그램도 비슷해요. 플러그인을 지원하는 프로그램만 플러그인을 쓸 수 있습니다. Sigil은 플러그인을 지원하고 있어요.

2. 어떤 기능을 추가할 수 있지?

Sigil은 34개의 공개(공식이 아니에요) 플러그인이 있습니다. 개인이 사용하는 것까지 찾아보면 더 많겠지만, Sigil 플러그인 페이지에서 정리한 목록에 나와있는게 32개예요. Sigil에서 추천을 한다고 이 플러그인이 공식 지원한다는 얘기는 아닙니다. Sigil에서 공식 지원하는 플러그인은 2개예요.

이 두개의 공식 플러그인 외에 32개가 더 있어요. Sigil이 공식 지원을 하는건 아니지만 많은 사람들이 사용하고, 지속적인 업데이트가 이루어 지거나 업데이트는 없지만 더 이상 수정할 필요도 없는 완성도 높은 플러그인을 Sigil 사이트를 통해 정리해 놨습니다. 목록을 보려면 아래 링크를 클릭해 보세요.

이 중 제가 쓰는 플러그인은 3개예요.

다른 플러그인들은 영문(문법 플러그인)만 지원하거나 업데이트가 안돼 Sigil v0.9.x 이후 버전에서 오류가 나는게 많아요. 그리고 EPUB3 output plugin, cssRemoveUnusedSelector 같은 일부 플러그인은 Sigil이 업데이트 되면서 필요 없어졌습니다.

다음 글에서는 플러그인을 사용하는 방법을 알려드릴게요.

플러그인 파일을 다운받아 Sigil에서 불러오면 사용할 수 있어요... 라고 간단히 설명할 수 있으면 좋겠지만, Sigil은 파이썬(Python)이라는 언어를 사용하기 때문에 파이썬을 먼저 설치하고, Sigil에 파이썬을 연결해 줘야하거든요. 

'Sigil에 Python이 내장돼 있는데.'라고 딴지걸고 싶은 분이 계시겠지만, 제대로 쓰려면 이번 기회에 확실히 배우는게 좋지 않겠어요^^?

오랜만에 글을 올리네요.

한달 좀 넘게 여행을 다녀와서 현실 적응을 하느라 한참 제정신이 아니었어요.

오늘은 고난도 기술을 소개하려고 합니다.  

만약 이 잡지 표지를 한장의 이미지가 아닌, 이미지 위에 텍스트를 얹어 편집해야 한다면?

가운데 인물이 있고, 좌우에 텍스트를 배치해야 되요. 그런데 글자가 인물 안으로 들어가면 안되고 인물 주위에 자연스럽게 배치되야 합니다. 그리고 가장 중요한거. 글자 크기가 변경되도 편집이 틀어지면 안되고요. 어깨 아랫쪽으로 글자가 내려가는것 까지는 막을 수 없지만, 글자 크기가 커져도 얼굴 쪽으로 글자가 넘어가면 안됩니다. 가능할까요?

div 태그와 display : box; display :table; 등의 속성을 이용하면 비슷한 위치에 글자 배치는 가능해요. 그런데 글자를 키우면 틀어질거예요. 글자 크기가 변경 가능하면서 얼굴 선을 따라 곡선형으로 글자 배치하는건 정말 어렵고요. 이럴 때 쓸 수 있는 CSS속성이 있습니다. 예전에 한번 소개한 적이 있는 속성(http://epubguide.net/207)인데 어렵긴 하지만 활용도는 아주 높아요.

이 속성이 어떤건지 바로 이해를 하고 싶다면 아래 사이트에 들어가 보세요.

http://galjot.si/css-exclusions#examples-print

아랫쪽으로 쭉 내려가면 텍스트를 네모, 세모, 동그라미 모양으로 배치한걸 볼 수 있습니다. 텍스트를 이렇게 배치할 수 있게 해주는 속성이 shape-outside예요.

속성에 대한 설명은 모질라 재단 홈페이지에 나와있는걸 그대로 보여드릴게요. 속성에 대한 값이 너무 많아 다시 설명드리는건 낭비입니다!라는 핑계를 대며... ^^;;

/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> value */
shape-outside: url(image.png);

/* Gradient value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

여러가지 속성이 있는데 오늘 설명드릴건 polygon이라는 값이에요.

이 값을 잘 활용하면 전자책 편집하다 난감했던 문제들을 풀 수 있습니다.

오늘 예제는 '이상한 나라의 앨리스'예요. 

아래 이미지를 보세요.

이 이미지가 있는 부분을 제대로 편집한 전자책은 보기 힘들어요. 저도 예전에 한참을 고민하다가 앨리스와 체셔고양이 부분을 나눠서 편집한 적이 있습니다. 독자들은 별로 신경쓰지 않겠지만(ㅡ.ㅡ;) 그래도 전자책 제작 전문가라는 자부심이 있는데 이것 하나 해결 못하나 하는 자괴감이 들기도 하고...

왜 예전에는 shape-outside를 안썼냐고 하시면, 변명으로 들리시겠지만(^^;;) 안드로이드 구형 버전에서는 이 속성이 제대로 구현하지 못했어요. 안드로이드 4.4 이후 버전부터 구현이 되다가 5.0 버전 이후부터는 아무 문제 없이 적용이 됩니다. 그러다 보니 몇년 전에는 이 속성을 편집에서 쓸 생각조차 하지 않았습니다.

잡담은 그만 하고, 이제 본론으로 들어가서...

앞에서도 말했지만 오늘 소개할 속성은 이거예요.

shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

polygon 속성을 사용하면 다각형을 그릴 수 있습니다. 3각, 4각, 5각, 6각형 등을 표현할 수 있고, 별처럼 복잡한 도형도 그릴 수 있어요.

shape-outside : polygon(X좌표 X좌표 Y좌표, X좌표 Y좌표, X좌표 Y좌표);

이 스타일을 보면 좌표값이 3개 있습니다. polygon은 최소 3개의 좌표가 필요해요. 도형은 최소한 3개의 좌표를 필요로 하기 때문에 그래요. 사각형이라면 4개, 5각형이라면 5개의 좌표를 추가해 주면 됩니다. 좌표는 X축과 Y축이 한 쌍이에요. 그래서 2개가 한 쌍으로 콤마로 구분을 합니다. 화면 크기에 따라 변경되게 하고 싶다면 %단위를 쓸 수 있어요.

설명은 아무리 들어도 어렵지요^^?

이 속성은 직접 사용해 보기 전까지는 이해하기 어려워요. 저도 아직 X좌표가 가로축인지 세로축인지 자주 헛갈려요.

그럼 좀 더 이해하기 쉽게 예제로 설명을 드릴게요. 조금 많이 복잡하니 잘 따라오세요.

체셔고양이가 나오는 이미지는 오른쪽 중간부터 텍스트가 나옵니다. 이미지는 사각형이기 때문에 이미지를 넣고 float을 쓰면 오른쪽 중간 부분은 흰색으로 나와요. 이 부분을 채우려면 어떻게 해야 할까요? 컴퓨터가 이미지를 텍스트가 들어간 부분이 비어있는 다각형이라고 생각하도록 만들면 됩니다.

컴퓨터가 이미지를 이런 다각형이라고 생각하면 이미지가 들어간 영역을 제외한 나머지 부분에 텍스트를 채울거예요. 텍스트 크기가 변경되도 상관 없어요. 이미지 모양에 맞춰 텍스트가 알아서 채워지거든요.

이 이미지는 6각형이에요. 그러니 좌표가 6개여야 합니다. 좌표값은 이미지에 표시해 뒀으니 참고하세요.

이미지를 저렇게 만들기 위해 shape-outside 속성과 polygon 값을 아래같이 설정했어요.

좌표를 찾는게 어려워요. 한번에 찾을 수는 없고 눈대중으로 이쯤 되겠다 싶은 좌표를 찍은 다음 조정을 해줘야 되요. 정확한 이미지의 가로/세로 길이를 알면 계산을 해서 값을 잡아도 되지만, 그렇게 하는게 시간이 더 걸리더라고요.

참고로, Sigil에서는 shape-outside 속성이 표현되지 않습니다. Sigil에서 작업하기는 어렵습니다. 저는 텍스트 편집기와 브라우저를 열어놓고 작업했어요.

제가 설명을 건더뛰며 했기 때문에 설명만으로는 이해하기 어려울거예요. 모질라 사이트에 나와있는 예제와 이상한 나라의 앨리스 샘플을 직접 적용해 보면서 좌표가 바뀌면 도형이 어떻게 변하는지 확인해 보세요.

이 속성을 잘 활용하면 이미지와 텍스트가 복잡하게 얽힌 책도 편집을 할 수 있습니다. 시간이 많이 걸리긴 하겠지만요 ^^;

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

Sigil이 오랜만에 업데이트를 했네요.

사용자들이 느끼기엔 큰 변화가 없지만 몇가지 중요한 기능이 업데이트 되었습니다.

1. PyQt5 적용 : 플러그인을 제작하는 분들께는 중요한 업데이트인데, 일반 사용자에게는 중요하지 않습니다. 플러그인을 만들 때 사용하는 파이선이라는 프로그램이 있어요. 이걸로 플러그인을 만들 때 PyQt5라는 GUI방식의 프로그램을 쓸 수 있게 됐습니다. 

2. 설정 > 모양 에서 [Menus]라는 탭이 추가됐습니다.

이 탭은 메뉴 아이콘의 크기를 조절하는 기능입니다. 아래 이미지를 참고하세요.

<아이콘을 작은 크기로>

<아이콘을 큰 크기로>

3. 윈도우에서 발생하는 몇가지 이슈(템프 폴더, 중복 파일 등)를 수정했습니다.

EPUB3 기능이 조금 개선되었습니다. 며칠 전에 EPUB2를 EPUB3로 바꿀 일이 있어 편집을 하는데 문제가 좀 있었거든요. 잠깐 작업하는데도 발생한 문제여서 누구나 느꼈을텐데 이 부분이 개선되었다네요. 여전히 EPUB3는 베타 버전 느낌이지만 Sigil로도 EPUB3 파일을 만드는게 가능해졌어요.

아래는 세부적인 오류 수정, 새로운 기능 목록이에요. 자세한 내용은 Sigil 폼페이지에서 확인하세요~

Bug Fixes

• Make sure when new empty epub3's are created that the toc does not use a doctype (Issue #250)
  
• Make GetUniqueFilenameVersion work even on Case-Insensitive filesystems (Issue #247)
  
• Properly urlencode/decode all hrefs in plugin's ResultXML in launcher/PluginRunner to prevent parse errors
• Enable Basic Cut Copy Paste Icons/Actions in OPF, NCX, XML, SVG, and other Misc Text Tabs
• Add proper detection for minimum service pack requirements in Windows installer
• Include workaround for bug in KDE Qt5 plugin on Linux that keep plugins from launching from menu
• Prevent splitting Section0001.xhtml (Split at Cursor) needlessly rewrite the file's manifest id with a uuid
• Fix issue where merging files when non-xhtml tabs were open was causing Python errors or crashes
• Fix segfault in Image Reports when deleting unused image files
• Fix bug in prettyprint_xhtml in sigil_bs4 (put back inadvertently dropped is_void_tag routine)
• Fix gumbo serialize to better handle injected newlines
• Harden bundled Python isolation on Windows and add subset of PyQt5 to bundled modules
• Harden plugin interface code to properly unquote/quote hrefs
• Stop Sigil from nagging about unsupported mimetypes when epubs with Adobe xpgt page-templates are opened
• Fix Book Browser highlighting issue when editable XML files from the "Misc" folder are opened
• Pull upstream bug fixes from google's gumbo parser for Sigil
• Force formatting buttons in BookView to generate inline-styled spans instead of "strike", "b", etc
• Fix bug from deprecated use of jquery $.browser.msie introduced when jQuery was updated
• Fix temp folder specification on Windows systems that delete the system temp folder for every login (Issue #285)
• Fix typos in metadata descriptions to allow better translations

New Features

• New preference setting (Appearance section) which allows user to adjust the size of the main menu icons
• Add manifest properties to Book Browser tooltips and to All Files Reports Widget for epub3
• Make Sigil's UI and spellchecker language settings available to plugins
• Add support for PyQt5 for plugin gui widgets
• Internal builds now use Qt 5.6.2 with Webkit added back
• Windows structural changes to eliminate file duplication and to accommodate PyQt5 requirements
• Update all build it yourself from source documentation for new requirements

안녕하세요^^

국립중앙도서관에서 전자출판협회와 연계한 전자책 제작 실습 교육을 진행합니다.

전자책을 만들고 싶은데 무엇부터 해야할지 조차 모르는 초보분들을 대상으로 하며, 수업이 끝나면 소설 처럼 텍스트 위주로 된 전자책은 유통 가능한 수준으로 만들 수 있을거예요.

실습 위주로 수업을 하지만 전혀 경험이 없는 분들도 따라올 수 있도록 쉽게 진행을 하니 전자책 제작에 관심있지만 아무것도 몰라 시작이 두려우셨던 분들이라도 신청하세요.

'이상한 나라의 앨리스'를 샘플로 해서 EPUB 제작, 이미지 삽입, 제목/본문 편집 등 책 한권을 만드는데 필요함 기초를 모두 익힐 수 있습니다. 

초급 강의지만 출판 가능한 수준의 제작 기술을 전달하는 과정이기 때문에 하루로 끝나지 않습니다.

일 3시간씩 주 2회, 3주 과정으로 총 6일 18시간 교육입니다. 

긴 시간 전문적인 내용을 교육하는 만큼 취미로 생각하시는 분들 보다는 깊이있게 공부하고 싶은 분들이 많이 오셨으면 좋겠네

전자책을 제작하는데 비용이 들지 않도록 무료 프로그램(Sigil)을 사용합니다.

수업 신청하신 분들은 수업 전에 Sigil(https://sigil-ebook.com/)을 한번 설치해 보시면 도움이 될거예요,.

교육 내용 확인 : http://www.nl.go.kr/nl/service/meet/edu_list.jsp

** 실습 14일 전(4월 말)부터 온라인으로 신청 가능

5월 이후 중고급자 분들을 위한 전자책 제작 교육도 준비하고 있습니다..

이번 강의는 초급자를 위한 강으로 중고급자 분들을은 쉬운 내용일 수 있으니 보다 다양한 편집 기술에 관심있는 분들은 전자출판협회 강의를 이용해 주세요 ^^