수학방

전자책은 단순히 HTML문서와 CSS 문서로 되어있지만 그렇다고 문서만 몇 개 모아서는 책이라고 할 수 없잖아요. 그래서 이번에는 책을 책답게 만들어주는 여러 내용을 추가하는 방법을 알아볼 겁니다.

책에는 목차, 표지 등이 있는데요. Sigil에는 이걸 쉽게 만들어 주는 도구가 있어요. 클릭 몇 번으로 아주 간단하게 책을 조금 더 돋보이게 만들어주는 기능이니까 꼭 알고 있어야 하죠. 이걸 실행하지 않으면 나중에 오류가 생길 수도 있으니까 꼭 실행해야 하는 것도 있어요. 도구를 활용하지 않고 HTML 문서를 만들듯이 직접 코드를 입력할 수도 있지만 그래도 있는 건 써먹는 게 좋겠죠.

Sigil 도구 활용하기

책의 표지를 한 번 넣어볼까요? 도구 - Cover를 누르면 창이 열리는데 여기에서 책의 커버를 넣을 수 있어요. 원하는 그림이 있다면 삽입해 보세요.

차례를 한 번 만들어보죠. html 파일로 직접 만들 수 있지만 도구를 이용하면 간단하게 만들 수 있어요.

메뉴의 도구 - 차례 - Generate Table of Contents를 선택합니다.

아래 창이 열려요. 문서를 만들 때 사용했던 헤딩태그 h1, h2, h3, …를 이용해서 자동으로 차례를 만들어 줍니다. 여기서 필요없는 걸 빼고, 순서를 조정한 다음에 OK 버튼을 누르세요.

바뀐 게 아무것도 없는 것처럼 보이지만 왼쪽 "책 찾아보기"의 트리의 마지막 부분에 있는 toc.ncx 라는 파일에 이 저장한 내용이 기록됩니다. 원래 있던 파일인데 내용이 바뀐 겁니다. 따로 추가하거나 수정할 필요는 없으니까 그냥 두시면 됩니다.

다음은 도구 메뉴의 차례 - Create HTML Table of Contents를 선택합니다. 그러면 앞에서 저장했던 내용을 담은 목차 파일을 만들어 줍니다. 아래 그림처럼 책 찾아보기의 Text - TOC.xhtml 파일이 만들어진 걸 볼 수 있어요. 미리보기 화면에서 제대로 만들어졌는지 확인해 보세요.

이번에는 책의 제목이나 만든 사람, 날짜 등을 입력해 볼까요?

도구 - 메타데이터 편집기를 선택합니다.

여기서 제목, 저자, 언어 등을 입력하세요. "기본 항목 더하기" 버튼을 누르면 발행일, 설명 등 더 많은 메타데이터를 입력할 수 있습니다.

이외에도 색인을 만들어주는 Index, 사용하지 않은 파일 삭제 등의 기능이 있으니 한 번씩 사용해보시길 바랍니다.

특히, Generate Table of Contents와 메타데이터 편집을 하지 않으면 나중에 오류 검사를 할 때 오류가 생길 수도 있으니 다른 건 몰라도 이 두 가지는 꼭 실행하세요.

함께 보면 좋은 글

블로그를 전자책으로 1. 전자책의 종류
블로그를 전자책으로 2. EPUB을 만들기 위한 준비
블로그를 전자책으로 3. Sigil에 대한 소개
블로그를 전자책으로 4. HTML, CSS 파일 만들기

블로그를 전자책으로 만들기 쉬운 이유는 바로 둘 다 기본 형식이 HTML과 CSS로 되어 있어서예요. 물론 HTML로 된 문서가 아니더라도 전자책으로 만들 수 있긴 하지만 블로그의 글들은 이미 HTML로 되어 있으니 그 중간 과정을 많이 생략할 수 있죠.

Sigil에서 HTML, CSS 문서를 만드는 건 블로그의 스킨을 수정할 때나 글을 쓸 때 HTML, CSS를 사용하는 것과 완전히 같아요. 그러니까 스킨 수정을 많이 해봤거나 글을 쓸 때 HTML 모드를 이용해봤으면 별로 어렵지 않은 작업입니다. 물론 HTML, CSS에 대해서 전혀 몰라도 Sigil에서 문서를 만드는 건 가능하긴 한데 될 수 있으면 간단한 HTML, CSS에 대해서는 공부를 하는 것이 좋겠네요.

HTML, CSS 문서 만들기

CSS 문서 만들기

CSS 문서를 만드는 방법은 두 가지예요. 하나는 에디트플러스나 노트패드++ 등을 이용해서 CSS 파일을 만들어서 Sigil에 추가하는 거고요. 다른 하나는 Sigil에서 직접 만드는 거죠.

도구 메뉴에 있는 "+" 모양의 아이콘을 선택하거나 책 찾아보기의 Style 폴더에 마우스 오른쪽을 클릭해서 "기존 파일 추가"를 하면 이미 만들어진 css 파일을 추가할 수 있어요. Sigil에서 직접 css 파일을 만들고 싶으면 위 그림의 마우스 오른쪽 메뉴에서 "빈 스타일시트 추가"를 선택하면 돼요. 그러면 빈 스타일시트 문서가 만들어지는데 거기에 css를 작성하세요.

CSS는 블로그를 전자책으로 2. EPUB을 만들기 위한 준비에서 간단히 다뤘던 수준이면 됩니다. body, p, ul, ol, blockquote 등에 사용할 것만 있으면 돼요.

body {
color:#333;
font-size: 14px;
font-family: NanumGothic, Sans-serif;
padding:20px 10px
}

h1 {
font-size: 2em;
margin: 15px
}

뭐 이런 식이 되겠죠.

나는 CSS가 뭔지 전혀 모르겠다 하시는 분은 간단한 방법이 있어요. 티스토리 스킨 편집의 HTML/CSS 편집에서 CSS를 그대로 가져다 쓰는 거예요. 다 가져올 필요는 없고, body 부분을 가져오세요. 그리고 스킨마다 다르긴 하겠지만 대부분 스킨에 .article 어쩌고 {  } 하는 부분이 있을 거예요. 여기를 다 복사해오는데 .article 부분은 삭제하고 복사하는 겁니다. 예를 들어 .article p {   } 이렇게 되어있다면 .article을 지우고 p {  }만, .article a {  }이라면 a { }만 복사하는 거죠.

나는 이마저도 모르겠다 하시는 분은 그냥 빈 문서 그대로 놓으세요. 따로 방법이 있어요.

HTML 문서 만들기

HTML 문서를 만드는 방법도 CSS 문서 만드는 방법과 별로 다르지 않아요. CSS 파일을 추가하는 것과 똑같습니다. 이미 만들어진 문서를 추가하거나 빈 HTML 문서를 추가하는 거죠.

HTML 문서를 만들 때는 WYSIWYG 방식인 책 보기와 HTML 소스를 직접 편집하는 코드 보기 두 가지 방식이 있어요. 편한 대로 골라서 사용하세요. 하지만 EPUB에서는 HTML에 문법 오류가 있으면 안 되니까 어찌 됐든 코드 보기 방식을 통해서 오류를 바로잡고, 자잘한 수정을 많이 해야 해요.

블로그의 글을 화면에 보이는 그대로 복사해서 "책 보기" 방식에 붙여넣으면 CSS를 style로 그대로 적용해요. 그러니까 CSS를 전혀 모르는 분들은 글을 그대로 복사해다 붙여넣는 방법을 이용하면 편리합니다.

그런데 그냥 그대로 붙여넣으면 CSS 한 줄이면 될 것도 모든 문단, 모든 요소에 style이 붙어서 코드 보기에서 편집하기에 좋지 않아요. 그래서 그냥 블로그의 텍스트만 복사해서 붙이고 CSS는 CSS 파일에 넣는 게 좋죠.

스타일이 적용되지 않은 단순한 글만 가져다 붙이고, 나머지 편집은 도구 모음의 아이콘을 이용하거나 직접 HTML을 이용해서 작성하면 작성하는 도중은 귀찮지만 나중에 보정을 할 때 훨씬 편해집니다.

주의해야 할 점은 사진이나 동영상도 모두 EPUB 안에 포함되어야 한다는 거예요. 그러니까 HTML 문서를 만들기 전에 해당 글에 있는 그림 파일은 모두 내려받아 놓으세요. 그냥 글 전체를 복사해서 붙이면 웹 주소에 있는 그림을 가져다가 보여주니까 제대로 된 거처럼 보이지만 나중에 EPUB을 만든 후에는 보이지 않으니까 꼭 직접 하나씩 다 넣어줘야 해요.

그림 파일은 넣을 때는 아래 그림의 아이콘을 이용해서 넣으면 됩니다. 그림을 추가하면 그 그림 파일은 자동으로 EPUB 안에 포함돼요. "책 찾아보기"의 Images의 하위 메뉴에 그림이 추가된 걸 볼 수 있을 거예요.

그림도 문서처럼 전체를 "책 찾아보기"에 한 번에 추가한 다음에 문서를 편집할 때 넣을 수 있지만 그림을 하나씩 삽입하는 게 빠뜨리지 않고 실수를 줄이는 방법이죠.

그리고 또 주의해야 할 게 링크예요. 글을 그냥 그대로 복사해서 붙이면 링크 주소도 그대로 복사되죠. 예를 들어 블로그의 글에 있는 글을 복사했는데, 내용 중에 내부링크 http://mathbang.net/123이 들어있다면 이 http://mathbang.net/123이라는 글도 123.html이라는 이름으로 만들어서 EPUB 안에 넣어주고 링크 주소를 바꿔줘야 해요.

http://mathbang.net/123 → ./123.html

이 문서를 EPUB 안에 포함하지 않을 거라면 클릭이 되지 않도록 http://mathbang.net/123이라고 그냥 단순한 문자로 표시하는 게 좋아요.

링크 주소를 수정하는 게 어렵다면 일단 문서를 다 만들어서 책 목록보기에 파일을 다 추가한 후에 도구 메뉴를 이용해서 링크만 따로 연결해도 괜찮아요. 링크를 수정하는 건 위 그림에서 오른쪽 끝에 있는 클립모양의 아이콘을 이용합니다.

EPUB 안에서 사용하는 그림, 동영상, 링크된 문서는 모두 EPUB 안에 포함되게 하는 것이 좋습니다. 그 안에서 모든 것을 다 할 수 있도록 말이죠. 반대로 말하면 EPUB 안에서 사용하는 그림, 동영상, 링크된 문서가 모두 EPUB 안에 있어야 해요. 파일이 없다면 아래 같은 오류 메시지가 나와요.

This OPS document is reachable but not present in the OPF <spine>. "Reachable" means that a reference of some kind that points to this resource exists in the epub.

• 본문을 그대로 복사해서 붙이거나 문자만 붙인 후에 HTML 코드를 직접 편집
• 사진, 동영상, 링크된 문서는 모두 EPUB 안에 포함시키고 그 링크도 EPUB 내부 링크로 수정

이 두 가지만 기억하면 되겠네요.

함께 보면 좋은 글

블로그를 전자책으로 1. 전자책의 종류
블로그를 전자책으로 2. EPUB을 만들기 위한 준비
블로그를 전자책으로 3. Sigil에 대한 소개

전자책을 만드는 방법에 따라 사용하는 프로그램은 여러 가지가 있을 수 있습니다. 전자책은 기본적으로 HTML과 CSS를 이용해서 만드니까 이 둘을 지원하는 프로그램은 무엇이든 상관없죠. 심지어 아래아 한글에서 문서를 만들고 이걸 HTML로 저장해도 괜찮습니다. HTML 파일을 EPUB으로 변환하기만 하면 되니까요.

하지만 직접 HTML과 CSS를 이용해서 만든다면 사용하기 쉽고 가장 많이 사용하는 프로그램이 바로 Sigil일 겁니다. 오픈소스로 무료인데가 전자책을 만들 때 도움을 주는 기능 (목차, 오류 검사)을 다 사용할 수 있으니까요.

이 글에서는 일반적인 편집기와 다른 점 위주로 해서 Sigil에 대해서 간단히 설명할게요.

Sigil - EPUB 제작, 편집 프로그램

Sigil은 오픈소스로 누구나 무료로 사용할 수 있어서 EPUB 전자책을 만들 때 많이 사용하는 프로그램입니다. 한글도 지원하니까 사용하기에 불편하지는 않을 거예요. 처음 접하는 프로그램이지만 대부분은 일반적인 편집기나 티스토리 글쓰기에서 사용하는 기능과 비슷해서 문서를 만드는 것 자체는 어렵지 않을 겁니다.

문서를 만든 다음 이걸 전자책으로 바꾸는 과정에서 몇 가지가 추가되는데, 이런 기능도 몇 번 해보면 금방 익숙해질 거예요.

Sigil 내려받기
Sigil 사용법(영어)

Sigil을 처음 실행시키면 가장 위에 메뉴, 왼쪽에 책 찾아보기(파일 목록), 가운데 편집창, 오른쪽에 미리보기 창이 나와요. 나중에 따로 나오겠지만 하단에는 오류를 알려주는 창이 나옵니다.

먼저 제일 위의 메뉴부터 보죠.

도구 메뉴입니다. 일반 문서 편집기와 아이콘만 다를 뿐 기능은 별반 다르지 않아요. 아이콘 위에 마우스를 올리면 풍선 도움말이 나오니까 확인해보세요. 물론 가장 기본적인 글자의 크기와 색을 지정하는 아이콘이 없는데, 이건 CSS에서 직접 적어줘야 합니다.

빨간색으로 표시된 게 꼭 알아야 할 아이콘인데 자세히 알아보죠.

+ 모양의 아이콘은 파일을 추가하는 아이콘입니다. 이미 만들어진 HTML, CSS 파일은 물론 사진, 동영상 파일을 추가할 수 있어요.

바로 티스토리 글쓰기에는 두 가지 모드가 있죠? 하나는 글쓰기 모드, 하나는 HTML 모드죠. 두 번째 네모친 아이콘이 바로 그 기능이에요. 왼쪽에 있는 책을 펼친 모양의 아이콘이 일반 글쓰기 모드, 오른쪽에 있는 <> 아이콘이 HTML 모드예요. Sigil에서는 책 보기, 코드 보기라는 이름을 사용합니다. F2를 누르면 둘 사이를 왔다 갔다 할 수 있어요.

Sigil의 책 보기 모드는 위지윅(WYSIWYG)이라서 굳이 미리보기를 하지 않아도 실제 모습과 거의 비슷하게 나옵니다. 특히 CSS파일에 있는 내용까지 적용해서 보여주니까 더 좋죠. 티스토리 글쓰기 화면은 외부 CSS에서 사용하는 Style은 적용되지 않는데 비해 훨씬 직관적이라고 할 수 있어요.

또, 티스토리 글쓰기 화면의 HTML 모드에서는 도구바의 아이콘을 사용할 수 없지만 Sigil에서는 코드 보기에서도 도구바의 아이콘을 대부분 그대로 사용할 수 있어서 정말 편리합니다. 예를 들어 HTML 모드(코드 보기)에서 글자를 선택하고 링크를 넣을 수 있죠.

i 모양의 아이콘은 메타 데이터를 편집하는 아이콘으로 책의 제목, 저자, 언어 등 EPUB의 정보를 편집하는 창이 열립니다. 그 옆의 아이콘은 차례를 만들어주는 아이콘으로 본문에서 헤딩태그인 HX를 사용한 걸 찾아서 자동으로 목차를 만들어 줍니다.

제일 오른쪽에 있는 V자 모양의 아이콘은 만들어진 EPUB이 유효한 양식으로 만들어졌는지 검사해주는 아이콘입니다. 보통 HTML 문서는 사소한 오류가 있더라도 브라우저가 그 오류를 무시하거나 혹은 오류를 그대로 포함해서 보여주는 데 비해 EPUB은 아주 사소한 오류가 있으면 파일 전체가 열리지 않는 경우도 많아요. 따라서 이 오류 검사를 통해서 모든 오류를 제거해야 제대로 된 EPUB을 만들 수 있습니다. 오류를 검사하면 어떤 파일 몇 번째 줄에서 오류가 있는지를 자세히 알려주니까 그걸 보면서 하나씩 해결할 수 있어요.

그 외에도 도구 메뉴의 하위 메뉴에 "W3C로 스타일시트 검증하기"가 있는데, 이건 오류가 있다고 해서 특별히 문제를 일으키지는 않지만 되도록 검사해서 오류를 줄이는 게 좋겠죠? 그리고 사용하지 않는 미디어 파일을 삭제해서 EPUB 파일의 용량을 줄이는 것도 좋습니다.

왼쪽에 있는 파일 목록입니다. EPUB은 HTML, CSS, 사진, 동영상 등의 파일을 포함하는데요. 이 안에 들어있는 파일을 보여주는 창입니다. 파일을 선택해서 삭제할 수도 있고, 추가할 수도 있어요. 더블 클릭하면 수정, 편집할 수 있습니다. 가능하면 EPUB에서 사용하는 모든 파일을 이 안에 넣는 것이 좋아요. 사진, 동영상을 웹에서 링크할 수 있는데, 모바일 환경에서는 네트워크를 사용하지 못하는 경우도 있으니까요.

HTML, CSS 파일을 만들고 이 파일들과 함께 사용할 EPUB만의 추가 파일을 만든 후에 저장만 하면 끝이에요. EPUB에서만 사용하는 파일들은 도구 메뉴에 있는 하위 도구들을 이용해서 자동으로 만들 수 있으니 결국 HTML, CSS 파일을 어떻게 만드느냐가 제일 중요합니다. 따라서 블로그에 있는 좋은 글들만 잘 다뤄주면 되는 간단한 일입니다.

전자책 만드는 걸 직접 해보면 어렵지 않다는 걸 금방 느낄 수 있을 거예요.

함께 보면 좋은 글

블로그를 전자책으로 1. 전자책의 종류
블로그를 전자책으로 2. EPUB을 만들기 위한 준비