내맘대로의 EPUB 제작 가이드

미리보기(Sigil에서는 Preview로 되어 있음)는 편집자가 편집한 내용을 실시간으로 볼 수 있는 창이다. 책 보기 화면에서는 편집 내용을 눈으로 확인할 수 있지만 코드 보기에서는 확인이 어렵기 때문에 편집 내용을 확인할 수 있는 미리보기 화면이 도움이 된다.

책 보기 화면에서 편집을 하더라도 모바일 기기에서 어떻게 보이는지 알고 싶다면 미리보기 화면을 스마트폰이나 태블릿 크기로 맞춰놓고 작업할 수 있다.

미리보기에서 제공되는 또하나의 강력한 기능 중 하나는 Inspector Window이다. 이 기능은 편집에는 아무런 영향을 주지 않지만 특정 영역에 어떤 스타일이 적용되어 있는지를 확인하고, 스타일을 임시로 제거하거나 변경해 볼 수 있다. 

CSS로 스타일을 적용했는데 원하는 대로 표현되지 않고 다른 스타일이 적용됐을 때 Inspector Window가 아주 유용하다. Inspector Window를 통해 문단에 적용된 스타일을 보면 부모로부터 상속된 스타일과 자식 스타일이 중복됐을 때 어떤 스타일이 문단에 적용됐는지 확인할 수 있다. 

예를 들어 글자 크기를 2em으로 지정했는데 미리보기 화면에서 3em으로 보인다면 Inspector Window에서 어떤 스타일이 영향을 줘서 2em이 아닌 3em으로 보이는지 쉽게 찾을 수 있다.

그리고 스타일을 임시로 제거하거나 수정해서 원하는 편집이 나오는지도 확인을 할 수 있다. Inspector Window에서 수정한 내용은 실제 문서에는 영향을 주지 않아 원하는 스타일을 찾아냈다면 반드시 CSS 파일에 적용을 해 줘야 한다. 

• 마우스 오른쪽 버튼 메뉴
• Inspect Element : 선택한 단어나 단락의 세부 사항을 Inspector Window에 표시한다.
• Inspector Window

Inspector Window는 미리보기 화면 아래에 표시되는 창으로 크롬 웹 브라우저의 개발자 도구와 같은 기능을 한다.

분석이 필요한 단어나 문장을 선택한 후 마우스 오른쪽 버튼을 누르고 Inspect Element를 선택하면 Inspector Window에 해당 영역의 세부 정보가 표시된다. 이중 전자책을 편집할 때 유용하게 활용할 수 있는 기능이 CSS Style 분석이다. 이 분석에서는 전자책 파일에 직접 영향을 주지 않은 상태에서 스타일을 임의로 변경해 볼 수 있다. 뿐만 아니라 다른 태그로부터 상속되는 사트일도 모두 확인을 할 수 있어 원하는 대로 편집 결과가 나오지 않았을 때 다른 상속값이 있는지도 쉽게 파악이 가능하다.

• CSS Stylesheet Preview

미리보기 화면은 HTML의 변경 뿐 아니라 CSS의 변경도 실시간으로 보여준다. Sigil에서 Stylesheet 파일을 열어 셀렉터의 속성을 수정하면 즉시 미리보기 화면에서 결과를 확인할 수 있다.

코드보기는 편집된 모양이 아닌 HTML 코드를 보여주는 화면이다. 코드 보기 화면에서는 편집자가 HTML을 이용해 책보기 편집에서 제공하지 않는 고급 편집을 할 수 있다. 책보기 화면에서는 좌우 정렬, 진하게, 밑줄, 기울임, 들여쓰기, 이미지 삽입 등 가장 기본적인 편집 기능만 제공하는데 이보다 복잡한 편집 기능이 필요하다면 코드 보기에서 HTML로 직접 편집을 하면 된다.

코드 보기 화면을 표시하려면 기본 메뉴에서 [보기>코드 보기]를 누르거나 도구상자에서 책 보기 아이콘을 선택하면 된다.

Sigil의 장점은 코드보기 편집이다. 대부분의 EPUB 편집기가 코드 보기 기능을 제공하고, Sigil보다 다양한 책 보기 편집 기능을 제공하지만, 대부분의 편집기는 코드가 깔끔하게 정리되지 않는다. 그리고 편집과는 필요 없는 코드를 반복적으로 삽입하거나 간단히 표현할 수 있는 코드 대신 복잡한 코드를 사용하기도 한다. 이렇게 편집한 EPUB은 뷰어에서 보기에는 잘 편집된 것 처럼 보이지만 책이 열리는 시간이 오래 걸리고, 뷰어에서 오류가 발생하거나, 뷰어에 따라 편집이 깨지는 등 다양한 문제를 만든다.

하지만 Sigil은 사용자가 원하는 코드 외에는 불필요한 코드를 거의 사용하지 않는다. 그리고 Sigil이 강제로 추가하는 코드도 아주 간결하게 삽입되기 때문에 대부분은 수정을 하지 않고 그대로 사용할 수 있다.

코드 보기는 아주 강력한 편집 방식이지만 반드시 HTML을 먼저 익혀야 한다. HTML을 제대로 모른 상태에서 코드 보기로 책을 편집할 경우 원하는 결과를 얻기 어렵다. 코드 보기 화면으로 전환을 하면 책 보기 처럼 지금 작업하고 있는 내용이 어떻게 표현되는지 알 수 없기 때문에 미리보기(Preview)화면을 함께 열고 작업하면 편하다.

코드 보기 화면에서는 HTML 코드와 속성, 속성의 값 등을 다른 색으로 보여줘 편집을 쉽게 할 수 있도록 도와준다. 그리고 코드 보기 화면에서 책보기 화면으로 전환하거나 저장을 할 때 코드 편집이 잘못된 부분이 있으면 이를 알려주고 자동/수동으로 수정을 할 수 있는 기능도 함께 제공된다.

• 편집 기능

편집 도구 상자에 있는 기능을 코드 보기 화면에서 적용할 수 있다.

• 오른쪽 버튼 메뉴

책 보기 화면에서 마우스 오른쪽 버튼을 누르면 텍스트나 이미지 등 선택한 내용에 따라 유용한 기능을 사용할 수 있다.

• 텍스트를 선택하고 마우스 오른쪽 버튼 클릭
• Clips : Clips에 저장해 놓은 텍스트나 스타일을 지정함
• Add To Clips : 선택한 텍스트를 Clips에 저장함
• Go To Link Or Style : 선택된 스타일이나 링크로 이동
  * HTML 태그나 스타일 속성에서만 사용할 수 있음. 본문 텍스트는 사용할 수 없음
• Mark Selected Text : 선택한 텍스트에 형광펜 표시/해제(Marked 텍스트를 선택하면 Unmarked Marked Text로 표시됨)
• Reformat HTML
• Clean Source : [설정]에서 지정한 방식으로 편집중인 파일의 코드를 정리함
• Clean Source - All HTML : [설정]에서 지정한 방식으로 모든 파일의 코드를 정리함
• To Valid HTML : 편집중인 파일의 코드 중에 오류가 있는 부분을 수정함
• To Valid HTML - All HTML : 모든 HTML 파일의 코드 중 오류가 있는 부분을 수정함
• 맞춤법이 틀린 단어를 선택하고 오른쪽 버튼 클릭
• Suggestion : Sigil이 제안하는 단어 중에서 선택
• Add To Default Dictionary : 사전에 단어 추가(맞춤법 검사할 때 틀린 단어로 표시되지 않음)
• Add To Dictionary : 사용자가 선택한 사전에 단어 추가(맞춤법 검사할 때 틀린 단어로 표시되지 않음)
• Ignore : 선택한 단어의 맞춤법 표시를 무시함(Sigil을 다시 시작하면 맞춤법이 틀린 것으로 표시됨)
• 이미지를 선택하고 마우스 오른쪽 버튼 클릭
• View Image : 이미지 크기를 변경할 수 있는 View Image 창을 열어 이미지를 표시함. CTRL을 누르고 파일 이름을 마우스로 클릭하거나 Go To Link Or Style을 눌러도 됨
• Open Tab For Image : 이미지를 새로운 탭으로 열어줌
• 공통 메뉴
• 되돌리기
• 다시실행
• 잘라내기
• 복사하기
• 붙여넣기
• 모두선택

책 보기(WYSIWYG 모드 : What You See Is What You Get의 약자로 화면을 보고 편집한 그대로 결과가 보이는 편집 방식)는 Sigil에서 제공하는 두 가지 편집 방식 중 하나이다. 책 보기는 Sigil을 처음 시작하는 사람들이 쉽게 책을 편집할 수 있도록 해 준다. 한글이나 MS 워드 같은 문서 편집 프로그램을 사용해 본 사람이라면 책 보기 화면으로 쉽게 전자책을 만들 수 있어 HTML이나 CSS같은 웹 편집 기술을 익히지 못한 초보 편집자라도 책 보기 화면에서 글자 크기, 정렬, 이미지 삽입 등의 기본적인 편집기능을 활용할 수 있다.

책보기 화면을 표시하려면 기본 메뉴에서 [보기>책 책보기]를 누르거나 도구상자에서 책 보기 아이콘을 선택하면 된다. 

위 이미지에서 보는 것 처럼 책보기 화면에서는 글자, 이미지 등이 편집자가 입력한 그대로 표시된다. 텍스트나 이미지를 선택해서 수정, 삭제, 편집을 할 수 있고, 이미지도 원하는 위치에 추가하거나 삭제할 수 있다. 그리고 편집한 그대로 전자책으로 볼 수 있다.

Sigil에서 기본으로 제공하는 편집 기능으로 책 보기에서 편집을 적용하면 대부분 의도한 대로 편집이 반영되지만 간혹 의도한 결과와 다른 결과가 나타날 수 있다. 이때는 [편집>되돌리기]로 적용한 편집을 취소시킨 후 다시 적용하면 된다. 하지만 정확한 편집을 위해서는 코드 보기를 사용해야 한다. 책 보기와 코드 보기는 언제든 자유롭게 전환이 가능하고 편집 내용이나 편집 위치도 그대로 유지된다.

• 책 보기와 코드 보기 화면은 도구상자의 전환 아이콘을 이용하거나 F2 버튼을 눌러 전환이 가능하다.

Sigil에서 제공하는 일부 기능은 코드 보기에서만 사용이 가능하다. 예를 들어 맞춤법 검사나 찾기 기능은 코드 보기에서만 사용할 수 있기 때문에 책 보기 화면에서 이런 기능들을 실행시키면 자동으로 코드 보기 화면으로 전환되거나, 기능을 실행시킬 수 없는 경우도 있다.

• 편집 기능

편집 도구 상자에 있는 기능을 책보기 화면에서 적용할 수 있다.

• 오른쪽 버튼 메뉴

책 보기 화면에서 마우스 오른쪽 버튼을 누르면 텍스트나 이미지 등 선택한 내용에 따라 유용한 기능을 사용할 수 있다.

• 텍스트를 선택하고 마우스 오른쪽 버튼 클릭
• Clips : Clips에 저장해 놓은 텍스트나 스타일을 지정함
  * Clips는 반복해서 사용하는 스타일을 저장해 두고 클릭 한번으로 편집에 반영할 수 있는 유용한 기능이다. Clips 설명을 참고하기 바란다.
• Add to Clips : 선택한 텍스트를 Clips에 저장함
• Insert File : 컴퓨터나 책에 있는 이미지, 오디오, 비디오 파일을 선택해 추가할 수 있음
• Inspect Element : 미리보기(Preview) 화면에서 스타일 속성이 어떻게 반영되는지 확인할 수 있다. 미리보기 창이 열려있지 않더라도 이 메뉴로 열 수 있다.
• 이미지를 선택하고 마우스 오른쪽 버튼 클릭
• Open Tab For "이미지 파일 이름" : 이미를 새 탭에서 열어줌
• Open With : 이미지를 외부 편집 프로그램으로 열어줌
• Save As : 선택한 이미지를 컴퓨터에 저장
• Copy Image : 이미지를 클립보드에 복사
• 공통 메뉴
• 되돌리기
• 다시실행
• 잘라내기
• 복사하기
• 붙여넣기
• 모두선택

Sigil은 전자책 편집을 시작할 때 '새로'와 '열기' 두가지 옵션을 제공한다.

• 새로

'새로'는 아무 내용도 없는 편집 상태로 EPUB에 필요한 기본 구성 요소들을 자동으로 생성해 새로운 편집 작업이 가능하다.

• 열기

'열기'는 기존 파일을 불러올 수 있는 기능이다. '열기'를 이용해 EPUB, HTML, 텍스트(TXT) 파일을 불러올 수 있다. 인디자인에서 HTML 형태로 내보내기를 한 후 EPUB에서 HTML 불러오기로 불러와 EPUB으로 편집을 할 수 있는 것이다. 어떤 형식의 파일을 불러오더라도 저장을 할 때는 EPUB 파일 형식으로 저장이 된다.

• EPUB 파일 불러오기
• EPUB 파일 내에 있는 모든 내용을 불러온다.
• 자동으로 Sigil의 파일 정렬 형태로 재구성된다.
• 기존 파일의 구성과 상관 없이 HTML 파일은 Text, CSS 파일은 Style, 폰트 파일은 Fonts 폴더로 재구성됨
• EPUB 내에 일반적인 오류가 있을 경우 이를 자동으로 수정한다.
• EPUB3 파일인 경우 EPUB2 형태로 강제로 변경되기 때문에 주의가 필요함
• HTML 파일 불러오기
• HTML 파일과 이 파일에 연결된 스타일시트 파일을 함께 불러온다.
• 단, 스타일시트 파일이 HTML 파일에서 지정한 위치에 없을 경우 불러오기 할 수 없음
• HTML 내에 메타데이터가 있다면 EPUB의 메타데이터에 추가함
• EPUB 표준에 맞지 않을 경우 자동으로 수정함
• Sigil에서 자동으로 수정할 수 없는 오류가 있을 경우 불러올 수 없는 경우가 있음. 이때는 텍스트 편집기 같은 외부 편집기를 이용해 수정한 후 불러와야함
• TXT 파일 불러오기
• HTML 형태로 자동으로 변환됨
• 줄바꿈은 <p> 태그로, 강제 줄내림은 <br/> 태그로 정리하기 때문에 문단 구분이 제대로 되지 않는다면 사전에 확인을 해야 함

• 주의 : EPUB은 자동 저장 기능을 지원하지 않는다. 그리고 종이책으로 수백페이지에 달하는 내용을 편집해야 하는 특성상 하드웨어 성능과 작업 파일의 크기에 따라 수십분씩 응답을 하지 않는 등의 오류가 발생할 수 있다. 따라서 작업 중간에 자주 저장하고 백업 파일을 만들어 두기를 권한다.

• 추가

'추가' 기능은 작업에 필요한 파일을 추가할 수 있는 기능이다.

HTML, CSS 스타일, 이미지, 폰트, 오디오, 비디오 등을 추가하면 해당 폴더에 자동으로 추가되며 이 외의 파일은 Misc(miscellaneous) 폴더에 추가된다.

기존 파일 뿐 아니라 빈 HTML, 빈 스타일시트, 빈 SVG 이미지 추가도 가능하다.

• HTML 파일
• 스타일시트 파일이 연결되어 있으면 함께 불러옴
• 메타데이터는 추가되지 않음('열기'와 다름)
• 이미지 파일
• Images 폴더에 추가됨
• 비디오 파일
• Video 폴더에 추가됨
• Audio 파일
• Audio 폴더에 추가됨
• Stylesheet 파일
• Styles 폴더에 추가됨
• Font 파일
• Fonts 폴더에 추가됨
• 그 외 파일
• 위에서 열거한 파일 이외에는 Misc 폴더에 추가됨
• TXT 파일은 '열기'에서는 HTML 파일로 변환되지만 '추가'에서는 텍스트 파일 그대로 Misc 폴더에 추가됨
• 이미지나 비디오, 오디오 파일이라 하더라도 IDPF의 EPUB 지원 형식이 아니라면 Misc 폴더에 추가될 수 있음

• 저장

작업중인 파일을 EPUB으로 저장한다. HTML, 텍스트파일을 열었거나 작업중인 파일을 한번도 저장하지 않았다면 저장할 위치와 이름을 물어보고, EPUB파일을 열었거나 한번 이상 저장을 했던 파일이라면 기존 파일에 저장을 한다.

• 다른 이름으로 저장

한번 저장했던 파일을 기존 파일을 그대로 둔 채 다른 이름으로 저장할 때 사용한다. 파일을 처음 저장할 때처럼 파일 저장 위치와 파일명을 물어본다. 그리고 이후 작업은 모두 새로 만든 파일에 저장된다.

• 사본 저장

만약 이전 작업 내용을 남겨둔 채 임시로 저장을 원한다면 '사본 저장'을 선택한다. '사본 저장'은 파일명_copy.epub이라는 이름으로 새로운 파일이 만들어진다.

사본 저장이 '다른 이름으로 저장'과 다른 점은 현재 작업중인 파일의 상태를 바꾸지 않는다는 점이다.

• 사본 저장 : 파일명_copy.epub이라는 이름으로 사본을 저장. 사본 저장 후 '저장'을 누르면 사본 파일이 아닌 원본 파일에 저장됨
• 다른 이름으로 저장 : 파일명과 저장 위치를 지정한 후, 새로운 작업은 모두 새로 만든 파일에 저장됨