표지, 속표지 스타일

  1. 표지 스타일


표지 스타일은 한번 만들면 모든 책에 사용할 있다. 간단하게 편집하고 싶다면 아래처럼 좌우 가운데 정렬을 주면 된다. 이미지 태그는 <div> <p>태그로 감싸는데 <p>태그로 감쌀 경우 들여쓰기가 되지 않도록 주의해야 한다.


<CSS 코드>

.img_cover {

text-indent : 0; /*div 태그를 경우 없어도 */

text-align : center;

tidth : 100%;

teight : 100%

}

 

<HTML 코드>

<p class="img_cover"><img src="../Images/cover.jpg" alt="cover" /></p>

 

이렇게 표지를 삽입하면 좌우는 가운데 정렬이 되지만, 세로로 화면에서 보면 표지가 화면 위쪽에 붙는다. 표지가 뷰어의 상하좌우 중앙에 오게 만들고 싶다면 아래 스타일을 사용할 있다.

 

<css 코드>

.cover {

width: 100%;

height : 100%;

text-indent : 0;

text-align : center;

 

display: box;

box-orient: horizontal;

box-pack: center;

box-align: center;

 

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

-webkit-box-align: center;

 

display: -moz-box;

-moz-box-orient: horizontal;

-moz-box-pack: center;

-moz-box-align: center;

}

 

img.cover {

width : 100%;

height : auto;

}

 

<html 코드>

<div class="cover"><img alt="표지 이미지" class="cover" src="../Images/cover.jpg" /></div>

 

표지 스타일 적용

 

표지 스타일 적용

 




  1. 속표지 스타일


전자책과 종이책은 읽는 방식이 다르다. 텍스트를 담는 그릇 자체가 종이와 디지털이라는 전혀 다른 성질이다. 종이책 편집에 익숙한 편집자들은 전자책에 종이책 감성을 담으려고 노력을 하는데, 그러다 보면 아래 같은 편집이 나오게 된다.

 


종이책과 똑같이 편집한 전자책

 


책은 필자가 시간상의 문제로 외주 제작을 의뢰해 받은 전자책 파일이다표지, 책등의 저자 소개, 저작권면 목차까지 6 페이지가 나온다. 스마트폰 같은 작은 화면에서 보면 저자 소개, 저작권면 등은 2~3페이지가 나오기 때문에 실제로는 10페이지가 넘는다.

독자의 입장에서 생각해 보자. 종이책이라면 책을 펼쳐 바로 본문으로 넘어갈 있다. 편집자에게는 책등과 속표지와 저작권면이 중요하겠지만, 독자에게는 의미가 없다. 특히 전자책은 바로 본문으로 넘어갈 없기 때문에 책을 열자 마자 필요 없는 페이지를 10페이지 이상 넘겨야 하는 불편이 생긴다.



저자소개와 판권면을 책의 뒤로 보내고, 속펴지를 없앤 편집

 


편집을 수정해 책에 포함되야 하는 저자소개와 판권면은 뒤로 넘기고, 속표지를 없앴다. 독자는 책을 본문까지 가는데 3페이지면 충분하다. 전자책을 편집할 때는 종이책과 달라야 한다는 생각으로 전자책에 필요하지 않은 부분은 과감히 없애고, 독자에게 불편할 있는 부분은 뒤쪽으로 넘기는게 좋다.

 

그래도 속표지가 필요한 경우가 있다. 그럴 때는 표지와 편집을 달리 가져가는게 좋다. 샘플로 사용하는 이상한 나라의 앨리스는 종이책으로 보면 목차까지 4페이지가 있다. 간지와 책날개 등을 포함하면 7페이지가 된다.




전자책으로 편집할 때는 표지, 속표지, 목차 이렇게 3페이지만 표현할 것이다.



속표지는 종이책 이미지를 그대로 가져와도 되지만 여기서는 표지 스타일을 적용해 텍스트 형식으로 제작하려고 한다.



왼쪽은 종이책 표지이고 오른쪽은 CSS 적용하기 EPUB 표지이다. 속표지에는 영문 제목, 한글 제목, 저자, 역자 그리고 출판사 로고 이렇게 5개의 스타일이 필요하다.

 


  1. 영문 제목
    영문
    제목은 h1 태그를 사용한다. 제목 아래에 밑줄이 있고, 글자 크기는 다른 글자보다 커야 한다. 태블릿 처럼 화면이 넓은 기기에서는 제목이 줄로 표현되지만, 스마트폰에서는 제목이 2 이상이 있어 밑줄은 화면 길이에 맞춰 폭이 조절되야 한다.
     

<h1>Alices Adventures in Wonderland</h1>

 

h1 /* 책 제목에 사용 */

{

text-indent:0 !important;

text-align:center;

 

font-size:3em;

font-family: "Times New Roman", Times, serif;

 

display : table;  /* 제목 밑줄*/

border-bottom : solid 1px #000000;

margin : 20% auto 10px auto;

padding-bottom : 10px;

}

 

 


스타일을 적용하면 아이패드의 넓은 화면과 스마트폰의 좁은 화면에 맞춰 글자가 자동으로 배열된다. 밑줄 역시 화면에 맞춰 길이가 조절된다.



  1. 한글 제목


한글 제목에는 h2 사용한다. 한글 제목은 글자 크기를 맞추고 가운데 정렬을 시켜준다. 그리고 한글 제목과 저자 사이에 간격이 벌어져 있으니 margin으로 폭을 조절해 준다.

 

<h2>이상한 나라의 앨리스</h2>

 

h2 {

text-indent : 0 !important;

text-align:center;

font-size:1.6em;

font-family:"강조글꼴";

margin : 0 0 15% 0;

}

 

 


  1. 저자와 역자


저자와 역자는 p 태그에 클래스로 스타일을 지정한다. 저자와 역자 역시 가운데 정렬에 글자 크기만 지정해 주면 된다.

 

<p class="sub_author">루이스 캐럴</p>

 

<p class="sub_translator">최지원 옮김</p>

 

.sub_author {

text-align : center;

text-indent : 0 !important;

font-size:1.2em;

font-family:"기본글꼴";

}

 

.sub_translator {

text-align : center;

text-indent : 0 !important;

font-size:0.8em;

font-family:"기본글꼴";

}

 



  1. 로고

로고 이미지가 준비돼 있다면 Images 폴더에 로고 이미지를 불러온다.

로고는 화면 크기에 따라 크기가 조절되야 한다. 아이패드처럼 화면에서는  크게, 스마트폰 같은 작은 화면에서는 작게 조절되야 한다. 화면 크기에 따라 로고는 가로 20% 크기로 하고, 최대 크기는 100% 넘지 않게 스타일을 지정한다.

 

<p class="logo"><img alt="logo" class="logo" src="../Images/logo.png" /></p>

.logo {

text-align : center;

text-indent : 0 !important;

}

 

img.logo {

margin-top : 10%;

width : 20%;

max-width : 100%;

}

 

 왼쪽은 종이책 속표지, 오른쪽은 전자책 CSS를 적용한 표지



스타일이 모두 적용이 되면 종이책 표지와 비슷한 느낌으로 속표지가 표현된다. 차이가 있다면 이미지형 표지는 화면 크기가 작아지면 글씨를 읽기 힘들어지고, 가로 화면에서도 세로형으로 표현되지만 텍스트로 편집한 표지는 가로/세로에 따라 표지 배열이 바뀌고 화면이 작아도 글씨 크기가 그에 맞게 조절된다는 점이다.

 

전자책 표지는 화면크기 및 비율에 맞춰 자동으로 조절됨



* Tip

스타일을 적용하다 보면 똑같이 반복되는 속성이 있다. 제목 스타일도 아래 속성이 계속 반복된다.

 

text-align : center;

text-indent : 0 !important;

font-family:"기본글꼴";

 

이렇게 반복되는 스타일은 한번에 지정을 있다.

 

h2 .sub_author .sub_translator {

text-align : center;

text-indent : 0 !important;

font-family:"기본글꼴";

 

}

 

h2 {

font-size:1.6em;

margin : 0 0 15% 0;

}

 

.sub_author {

font-size:1.2em;

}

 

.sub_translator {

font-size:0.8em;

}

 중복 스타일을 묶어 한번에 지정을 하면 CSS 파일을 조금 깔끔하게 정리할 있다.




속표지 스타일은 책마다 다양한 변형이 가능하다. 이미지로 표현할 수도 있고, 텍스트로 된 속표지라면 여기에서 처럼 CSS로 스타일을 지정해 표현할 수도 있다. 어떤 형태로 만들 든 전자책 화면은 종이책 처럼 고정되어 있지 않고 다양한 비율, 다양한 크기라는 점을 잊지 않는게 중요하다. 이미지로 속표지를 넣더라도 4인치 스마트폰부터 10인치 태블릿까지 고려해서 편집을 해야한다.

설정

트랙백

댓글

기본 파일 추가하기

스타일을 편집하기 전에 사용할 글꼴, 이미지 등을 먼저 불러오면 작업을 편하게 진행할 있다이미지는 편집 전에 모두 준비해 둬야 하고, 글꼴은 기본 글꼴을 추가한 편집하면서 필요한 글꼴을 추가해도 된다.

 

  1. 글꼴 추가
    1. 찾아보기의 Fonts 폴더에서 마우스 오른쪽 버튼을 누른다.

 

 

  1. 대화 상자에서 필요한 글꼴을 선택해 추가한다. 여기서는 무료로 사용할 있는 나눔고딕과 은바탕 글꼴을 사용할 것이다.

 


 

  1.  CSS 글꼴 추가

글꼴 파일을 추가했다면 이제 CSS 글꼴을 추가해야 한다.


@font-face {

font-family: "강조글꼴";

src: url("../Fonts/NanumGothicBold.ttf");

}

 

@font-face {

font-family: "기본글꼴";

src: url("../Fonts/UnBatang.ttf");

}


  1. 공통 스타일 지정

공통 스타일은 전체에 적용되는 스타일이다. 모든 단락(p 태그) 사이의 줄간격이 많이 떨어진 전자책을 적이 있을 것이다. 이는 편집자가 의도한 경우 보다는 스타일을 몰라 줄간격을 붙이지 않았을 가능성이 높다. 아래 공통 스타일을 추가하면 이런 문제를 간단히 해결할 있다.

 

*{

margin : 0;

padding : 0;

}

 

*는 컴퓨터에서 '모든 것'에 해당하는 와일드카드 문자다. 예를 들어 모든 jpg 이미지 파일을 찾고 싶다면 [찾기] 메뉴에서 *.jpg를 하면 된다. CSS에서는 모든 스타일에 상속되는 스타일을 의미한다. 

 

  1. 이미지 추가

글꼴을 추가했으면 이제 이미지를 추가한다. 이미지는 책에 들어갈 순서에 맞춰 미리 정리를 두는게 좋다. 이미지 역시 폰트를 추가하는 방법과 동일하게 진행한다.

여기서는 이미지가 들어갈 순서에 맞춰 img001, img002…로 이름을 정리했다. 이렇게 정리를 놓으면 이미지가 들어갈 위치를 찾아 쉽게 추가를 있다

설정

트랙백

댓글

HTML 및 CSS 스타일 편집 - ① 필요한 스타일 목록 정하기

전자책 제작의 90% 스타일 편집이다. 편집자는 독자들에게 전달하고자 하는 내용을 텍스트 아니라 행간, 여백, 이미지의 위치 등으로 책에 담는다. CSS 전자책을 편집자가 원하는 형태로 독자들에게 보이도록 해준다.

다른 편집 프로그램들은 HWP MS워드같은 문서편집기가 제공하는 수준의 편집 기능을 제공하기도 한다. 하지만 Sigil 이런 기능이 없고, 사용자가 직접 CSS 편집해야 한다. 방식은 각각 장점과 단점이 있다.


전자책 편집 프로그램의 CSS 편집기 



  1. 편집 기능과 코드 편집의 장단점


편집기능이 있으면 초보자도 쉽게 CSS 편집이 가능하다. CSS 적용 결과를 눈으로 확인하며 편집을 있기 때문에 원하는 스타일을 쉽게 만들 수도 있다. 하지만 이런 편집 기능으로 만든 전자책은 코드가 깔끔하지 않은 경우가 많고 기능도 제한적이다.

 

편집 프로그램으로 만든 CSS 코드

 


Sigil 직접 편집한 코드

 

Sigil처럼 직접 CSS 편집하는 방식은 초보들이 사용하기 어렵다. HTML CSS 대해 알고 있어야 편집이 가능하다. 그리고 HTML 어떻게 적용하는지, CSS 설정이 중복될 경우 어떤 순서대로 표현되는지 까다로운 조건을 편집자가 고려해야 한다.

까다로운 대신 제대로 활용하면 장점이 아주 크다. 편집 프로그램으로는 표현하기 어려운 다양한 스타일을 적용할 있고, 미세한 표현도 가능하다. CSS3 에니메이션 같은 강력한 기능도 지원하기 때문에 JavaScript 몰라도 간단한 에니메이션이나 인터렉티브형 표현도 가능하다. 편집 시간도 절약할 있다. Sigil 찾기/바꾸기 기능에서 정규표현식을 사용할 있어 제목, 주석처럼 형식이 정해져 있을 경우 클릭 한번으로 백개의 코드를 수정할 있다.

편집 기능과 코드 편집 어떤 방식이 좋다고 말할 수는 없다. 코드 편집이 강력한 기능을 제공한다 해도 초보자에게는 없느니만 못하고 고급 편집자라도 글꼴 크기를 바꾼다든지 적당한 색을 찾을 때는 코드 편집 보다 편집 기능에서 제공해 주는 미리보기로 스타일을 잡는게 편하다.

 

여기서는 코드 편집 중심인 Sigil 맞게 HTML CSS 사용한 편집 방법을 설명하려고 한다. CSS 편집기가 필요한 사람은 미투북스의 스타일리스트나 나모 펍트리 등을 이용하면 좋다.

 


  1. 기본 스타일 정하기

본문을 편집하기 위해 필요한 기본 스타일은 그리 많지 않다. 책의 구성 항목을 생각해 보면 소설류는 5 이내, 자기계발서는 10 안팎, 여행책 처럼 편집이 복잡해도 20 이내로 기본 스타일을 잡을 있다.

기본 스타일을 정하는 방법은 간단하다. 종이책이 있다면 책을 보면서 본문과 다른 형태의 편집 요소를 뽑아내면 된다. 대부분 (챕터) 살펴봐도 전체 스타일의 90% 이상 정리할 있다.

 

예제로 사용하는 '이상한 나라의 앨리스' 소설이지만 스타일이 많이 쓰이는 책이다. '이상한 나라의 앨리스' 필요한 기본 스타일을 정리하면 다음과 같다.

 

  1. 1. 표지 스타일
  2. 2. 속표지 스타일
  3. 3. 목차 스타일
  4. 4. 장 제목 스타일(11p)
  5. 5. 본문 스타일
  6. 6. 이미지 스타일
    1. 6.1. 한 페이지를 가득 채운 스타일(10p)
    2. 6.2. 왼쪽 어울림 스타일(16p)
    3. 6.3. 오른쪽 어울림 스타일(17p)
    4. 6.4. 가운데 정렬 스타일(30p)
  7. 6. 괄호 설명(11p)
  8. 7. 빈병 라벨(강조)(13p)
  9. 8. 시, 인용구(24p)
  10. 9. 가운데 정렬(18p)
  11. 10. 판권면

(페이지는 [ 인생을 위한 세계문학 14 이상한 나라의 앨리스(심야책방)] 기준으로 함)

 

1장에 필요한 스타일을 정리하면 4 ~ 9번까지 10개가 나온다. 여기에 표지, 속표지, 목차, 판권면 기본적인 스타일을 추가하고, 장별로 나오는 예외적인 스타일을 추가하면 '이상한 나라의 앨리스' 전자책이 완성된다. 표지, 속표지, 목차, 판권면은 한번 만들어 두면 반복해서 사용할 있기 때문에 실제 추가해야 하는 스타일은 4 ~ 9번까지이다.

설정

트랙백

댓글

스타일시트 추가 및 연결

장별로 파일 정리가 끝나면 본격적으로 스타일 편집이 시작된다. 스타일 편집은 장별로 나누기 전에 해도 되지만 편집 내용이 많을 경우 속도가 느려지거나 오류가 발생해 강제 종료가 있어 주의해야 한다.

 

편집 순서도 본문부터 편집을 하든, 표지부터 편집을 하든 편집자 취향대로 하면 된다. 여기서는 설명의 편의상 표지부터 순서대로 스타일 편집을 하려고 한다.

 

장에서 표지 이미지를 삽입했다. 하지만 Sigil 책보기 화면으로 보면 표지가 화면에 제대로 표시되지 않는다. EPUB 전자책을 보는 기기는 크기가 다양하기 때문에 표지는 화면 크기에 맞게 확대/축소되도록 편집을 해야한다.

 









 

 

표지 스타일을 편집하기 위해 먼저 CSS 파일을 추가한다. CSS 파일은 EPUB 파일에서 하나면 충분하지만 필요에 따라 하나 이상 추가할 수도 있다.

 

  1. 스타일시트(CSS 파일) 추가

[파일 > 추가 > 스타일시트] 이용하거나 [책보기] 창의 Styles 폴더에서 마우스 오른쪽 버튼을 클릭 [ 스타일시트] 추가한다.

만약 사용하는 CSS 파일이 있다면 [파일 > 추가 > 기존파일] 눌러 CSS 파일을 추가할 있다.

 

추가된 스타일시트 파일을 열면 아무런 내용도 없는 화면이 나타난다. 여기에 필요한 스타일을 추가한 HTML 파일에 연결하면 스타일이 반영된다.

스타일 편집 전에 HTML 파일에 스타일시트를 연결한다. 스타일시트를 연결하지 않으면 편집이 반영되지 않기 때문에 편집 전에 연결하는 것이 좋다.

 

  1. 스타일시트 연결

2.1 스타일시트를 연결할 HTML 파일을 선택한다. 여기서는 모든 파일을 선택한다.
 

2.2 선택한 파일 위에서 마우스 오른쪽 버튼을 누른 [Stylesheets 연결…] 클릭한다.

2.3 스타일시트 연결 창이 나오면 원하는 스타일시트를 선택 [OK] 클릭한다.

 

2.4 스타일시트를 연결 cover.xhtml 파일의 코드보기를 하면 아래처럼 스타일시트 파일이 연결된 것을 있다.
*
스타일시트 연결 코드. <head>태그 사이에 <link> 파일이 연결된 것을 있다.

<head>

<title></title>

<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />

</head>

* 스타일시트 연결

<head>

<title></title>

</head>

 

스타일시트가 연결됐으면 이제 책의 스타일을 편집해야 한다. 다음 장에서는 스타일 편집에 대해 설명한다.

설정

트랙백

댓글

장 나누기


권의 책은 여러 개의 챕터()으로 나눠져 있다. EPUB으로 책을 만들 때는 챕터를 하나의 HTML(xhtml) 파일로 구분해 주는 것이 좋다. 권을 HTML 파일 하나로 만들면 저사양 기기에서 오류가 발생하거나 페이지를 넘기는 시간이 오래 걸릴 있다.

전에는 챕터(HTML) 100kb ~ 300kb 정도로 제한을 두기도 했다. 챕터가 너무 크면 갤럭시 A, 아이폰 3 처럼 성능이 떨어지는 기기로 책을 뷰어가 강제로 종료되는 등의 문제가 생길 있고, 챕터가 넘어갈 시간이 오래 걸리기도 한다.

최근에 나온 모바일 기기에서는 이런 문제가 없지만, 여전히 저사양 모바일 기기를 사용하는 독자가 많기 때문에 다양한 독자층을 고려한다면 챕터가 300kb 넘지 않는게 좋다.

 

챕터를 나누면 편집도 쉬워진다. 책을 구성하는 단위 중에 챕터() 편집이 완성된 단위이다. 첫번째 챕터와 두번째 챕터의 편집을 완전히 다르게 하는 경우는 드물기 때문에 첫번째 챕터의 스타일을 잡아 놓으면 다음 부터는 스타일을 추가할 일이 많지 않다.

 

텍스트 파일이나 HTML 파일로 본문 전체를 불러왔다면 한권이 하나의 HTML 파일로 저장된다. Sigil에서는 이렇게 하나로 파일을 여러 개로 나눠주는 기능이 있다.

 

  1. 현재 커서 위치에서 나누기

[현재 커서 위치에서 나누기] 기능을 이용하면 커서가 위치한 곳에서 파일을 나눌 있다. 커서를 1장이 시작되는 곳에 놓고 아래 처럼 나누기 기능을 실행하면 Section0001.xhtml 파일이 Section0002.xhtml 파일이 생기면서 커서 뒷부분이 새로운 파일로 나뉘게 된다.

 

  1. 장을 구분할 위치에 커서를 놓는다.

 

  1. [편집 > 현재 커서 위치에서 나누기] 혹은  아이콘을 클릭한다

 

 

  1. Split Marker Split at Marker

챕터를 하나씩 나누지 않고 파일 하나로 책을 편집한 후에 한번에 나누고 싶다면 Split Marker 이용한다. Split Marker 파일로 나눌 위치를 표시하는 기능이다. Split Marker 표시된 부분은 Split at Marker 이용해 한번에 나눌 있다.

 

  1. 장을 구분할 위치에 커서를 놓는다.
  2. [삽입 > Split Marker] 클릭해 나눌 위치를 표시한다.
    Split Marker
    삽입하면 구분선이 그어진다. 부분을 코드 보기로 보면 아래 코드가 추가된 것을 있다.

<hr class="sigil_split_marker" />


코드보기에서 Split Marker 추가하고 싶은 위치에 코드를 삽입하면 [삽입 > Split Marker] 것과 동일하다



  1. [편집 > Split at Marker] 표시한 위치를 나눈다.

Split at Marker 챕터를 나누면 [Section0001_0001.xhtml]처럼 파일명 나누기 파일명 뒤에 _0001, _0002 번호가 붙는다. 파일을 나누기 전에 [Section.xhtml]처럼 파일명을 수정해 놓으면 챕터 파일명을 깔끔하게 정리할 있다.


 

챕터가 10 이내로 나눠진 책이라면 [현재 커서 위치에서 나누기] [Split Marker] 나누는게 어렵지 않다. 하지만 챕터가 30개쯤 된다면 하나씩 찾아 나누기 쉽지 않다. 이럴 정규표현식[Regex, Regular expression] 사용하면 단순한 반복 작업을 쉽게 끝낼 있다.

정규표현식을 이용하면 동일한 패턴으로 내용을 쉽게 찾을 있다. 예를 들어 본문 내에서 2자리 숫자를 찾고 싶을 정규표현식을 사용할 있다.

2자리 숫자는 00부터 99까지 100가지 경우의 수가 있다. 찾기 기능을 이용하면 00, 01, 02 하나씩 대입해서 100번을 찾아야 한다. 하지만 정규표현식을 이용하면 아래 식으로 한번에 00부터 99까지 2자리로 모든 수를 찾을 있다.

 

\d\d

 

예제로 '이상한 나라의 앨리스' 제목이 아래처럼 되어 있다.

 

<p>1장</p>

<p>토끼 굴속으로</p>

 

<p>2장</p>

<p>눈물 웅덩이</p>

 

<p>(숫자)</p> 반복적으로 나오고 바로 다음에 <p>장제목</p> 나오는 패턴이다.

책의 제목은 이와 똑같지 않더라도 패턴이 동일하게 반복된다. 이렇게 패턴이 반복되는 형태라면 정규표현식으로 찾거나, 찾아바꾸는게 가능하다.

 

<p>(\d+)장</p>

 

식을 [찾기] 넣은 찾기를 하면 번호를 모두 찾을 있다.

'(\d+)' 하나 이상의 숫자를 의미한다. 그래서 '(\d+)장' 정규표현식으로 찾으면 '1, 2, 3장…10, 11' 숫자 뒤에 '' 붙은 문자를 모두 찾을 있다.

앞뒤에 <p></p>태그로 묶인 숫자 뒤에 '' 붙은 문자는 번호밖에 없으니 정규표현식을 이용하면 번호만 모두 찾을 있게 된다.

 

찾기로 제목이 제대로 찾아진다면 이제 원하는 형태로 바꿀 차례다.

[바꾸기] 아래 내용을 추가한 [모두 바꾸기] 누른다.

 

<hr class="sigil_split_marker" /><h3>\1장</h3>

 

이제 책보기로 본문을 보면 장의 시작부분에 Split Marker 표시인 선이 추가되고 번호가 <h3> 태그로 묶인 것을 있다.

 

이상한 나라의 앨리스는 모두 12장으로 되어 있는데 정규표현식과 찾아바꾸기로 한번에 장의 시작부분에 Split Marker 추가하고 제목 태그까지 바뀐 것을 있다. 20 이상 반복해야 하는 단순 작업을 정규표현식으로 간단히 끝낸 것이다.

 

정규표현식을 자세히 익히는건 아주 어렵지만 전자책 편집에 필요한 식은 그리 많지 않다. 몇가지 간단한 식만 기억해도 수백번 반복해야 하는 작업을 한두번으로 줄일 있다. 인터넷을 찾아보면 정규표현식에 대한 자세한 설명을 있다.

 

Split at Marker 이용해 장별로 챕터를 나눴다. 챕터 구분을 명확히 하기 위해 HTML 추가하기를 이용해 파일을 추가 속표지, 목차, 판권면(Copy Right)등을 정리해 준다.

 

 

Split at Marker 나눌 이런 페이지까지 나눠도 된다. 필자는 1챕터를 Section_0001, 마지막 챕터를 Section_0012 파일명을 만들기 위해 그에 맞춰 Split at Marker 사용했다.



Split at Marker 장을 나눈 생성된 파일 목록

속표지, 목차, 판권면을 정리한 파일 목록

설정

트랙백

댓글

표지 이미지 삽입

Sigil 표지 이미지 삽입 기능이 제공된다. 준비된 표지 이미지가 있다면 사이즈에 관계 없이 사용할 있다. 참고로, 국내 유통사는 표지 이미지로 JPG 이미지 포멧을 권장하는 곳이 많다. 국내 유통을 목적으로 제작한다면 JPG 포멧의 표지를 준비하는게 좋다.

 

표지 이미지의 크기는 정해진 규칙은 없으나 가로(짧은면) 길이를 기준으로 1024 픽셀, 300DPI 이상을 사용하길 권한다. EPUB 3인치보다 작은 화면부터 UHD TV까지 사용이 가능하고, 최근에는 스마트폰도 4K(UHD, 2160*4096 해상도) 지원하고 있다. 고화질 화면에서 600*800 픽셀과 낮은 DPI 이미지를 사용하면 화면을 가득 채울 경우 이미지가 깨져보일 있다.

 

표지 이미지를 삽입하려면 [도구 > Add Cover] 메뉴를 이용한다.


표지 이미지가 파일 안에 포함돼 있다면 이미지 목록에서 선택할 있다. 이미지를 불러오기 전이라면 [Other Files] 버튼을 눌러 컴퓨터 있는 이미지를 불러올 있다.



이미지 파일을 선택해 표지 이미지를 만들면 [ 찾아보기] 창에 cover.xhtml이라는 파일이 제일 위쪽에 만들어진다. [ 찾아보기]에서 보이는 xhtml 파일의 순서는 책을 열었을 페이지가 넘어가는 순서와 같기 때문에 표지 이미지는 항상 제일 위쪽에 위치한다.

그리고 Images 폴더에는 선택한 표지 이미지가 추가된다. 만약 표지 이미지 파일명이 영문과 숫자로 되어있지 않다면 수정해 줘야 한다. 이미지를 선택해 파일명을 수정하면 cover.xhtml 있는 파일명도 자동으로 수정된다.

EPUB 다양한 기기에서 사용하기 때문에 기기에 따라 한글이나 공백, 특수문자가 들어간 파일명은 오류가 생길 있다. 이미지 뿐만 아니라 모든 파일은 공백이 없는 영문과 숫자로 파일명을 만드는게 좋다.

 

Sigil에서 제공하는 기본 표지 이미지 삽입 코드는 SVG 태그를 사용한다.


  <div style="text-align: center; padding: 0pt; margin: 0pt;">

    <svg xmlns="http://www.w3.org/2000/svg" height="100%"

    preserveAspectRatio="xMidYMid meet" version="1.1" 

    viewBox="0 0 SGC_IMAGE_WIDTH SGC_IMAGE_HEIGHT" width="100%" 

    xmlns:xlink="http://www.w3.org/1999/xlink">

      <image width="SGC_IMAGE_WIDTH" height="SGC_IMAGE_HEIGHT" 

      xlink:href="SGC_IMAGE_FILENAME"/>

    </svg>

  </div>

Sigil의 기본 표지 이미지 코드



국내 뷰어 중에 SVG 지원하지 않아 오류가 있어 국내 유통을 목적으로 한다면 코드를 수정해 주는 것이 좋다. 코드 수정은 [1. Sigil 주요 기능] Add cover 항목을 참고하기 바란다.


<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xml="http://www.w3.org/XML/1998/namespace">

<head>

  <title></title>

  <link href="../Styles/style.css" rel="stylesheet" type="text/css" />

<style type="text/css">

html, body { height:100%; margin: 0; padding: 0; }

</style>

</head>

<body>

  <div class="cover"><img alt="표지 중앙정렬" class="cover" src="SGC_IMAGE_FILENAME" /></div>

</body>

</html>

수정한 표지 이미지 코드


수정한 표지 이미지 코드를 사용했다면 삽입한 표지 크기가 화면에 맞게 조정되지 않았을 것이다. 아직 표지 이미지 스타일을 적용하지 않은 상태이니 그냥 지나간다.

표지를 삽입했다면 저장을 한다.

'Sigil 사용 설명서 > Sigil로 전자책 제작하기' 카테고리의 다른 글

스타일시트 추가 및 연결  (0) 2016.03.03
장 나누기  (0) 2016.02.22
표지 이미지 삽입  (0) 2015.12.24
책 정보(메타데이터) 입력  (0) 2015.12.24
EPUB으로 저장  (0) 2015.09.28
Sigil로 파일 열기  (0) 2015.09.24

설정

트랙백

댓글

책 정보(메타데이터) 입력

EPUB 파일로 저장을 했다면 정보를 입력해야 한다. 정보 입력은 언제 해도 상관 없지만 책을 편집하면서 이를 잊는 경우가 많다. 그래서 책을 편집하기 전에 책정보를 입력하는 습관을 들이는 좋다.

EPUB 정보는 '메타데이터'라고 한다. 메타데이터는 여러 의미로 사용이 되지만 Sigil 편집시에는 책과 관련된 정보로 의미를 한정해서 사용할 것이다.

 

메타데이터를 편집하기 위해서는 [도구 > 메타데이터 편집기] 도구상자 아이콘 클릭해 메타데이터 편집 창을 실행한다



전자책 메타데이터는 IDPF에서 정해 놓은 항목 중에서 선택해 입력할 있다. 메타데이터 편집기는 IDPF에서 정한 메타데이터 목록을 제공한다. 메타데이터 편집기를 열면 '날짜' 항목이 추가돼 있는 것을 있다. '날짜' 뒤에 'modification'이라는 설명이 보이는데 이는 날짜가 파일을 마지막으로 저장한 시간을 표시한다. 날자 하나에도 생성일, 출간일, 수정일 다양한 형태의 의미를 부여할 있다.

EPUB에는 반드시(must*) 세개의 메타데이터가 들어가야 한다. 제목(title), 식별자(identifire), 그리고 EPUB 언어이다. Sigil에서는 식별자와 언어를 자동으로 삽입하고, 메타데이터 편집기에서 제목을 선택이 아닌 필수 항목으로 지정해 뒀다. 외에 저자 정보도 필수 사항(should*)으로 권하고 있기 때문에 Sigil에서는 제목 아래에 저자 정보* 입력할 있도록 하고 있다.

  • IDPF 권고안은 영문으로 되어 있고, must 반드시 필요한 항목을, should must보다는 약하지만 들어가야 하는 항목을 말한다. 제목, 식별자, 언어는 must이고, 저자 정보는 should이다. 이들을 입력하지 않으면 EPUB Checker에서 error warning으로 표시된다.
  • [저자] 항목 뒤에 보면 [File-As]라는 입력창이 보인다. File-As 선택 항목으로, 저자 이름이 어떻게 정렬되야 하는지를 지정하는 항목이다. File-As 입력하지 않으면 저자명으로 정렬했을 '루이스 캐럴' '' 온다. 하지만 File-As '캐럴, 루이스'라고 입력했다면 저자명을 정렬할 '' 온다



외에 추가하고 싶은 항목이 있다면 [메타데이터 편집기] 오른쪽에 보이는 [기본항목 더하기] 누른다. [기본항목] 책과 관련된 메타데이터를 추가하기 쉽게 정리해 놓은 목록이다.



만약 원하는 항목이 [기본 항목 더하기] 보이지 않는다면 [역할을 추가하세요.] 눌러 수십가지의 다양한 역할을 추가할 있다. 항목을 선택하면 아래쪽에 설명이 표시되니 이를 참고해서 원하는 역할을 추가할 있다.



필요한 메타데이터를 모두 추가했다면 [OK] 눌러 정리한 내용을 저장하고 편집기 창을 닫는다.




'Sigil 사용 설명서 > Sigil로 전자책 제작하기' 카테고리의 다른 글

장 나누기  (0) 2016.02.22
표지 이미지 삽입  (0) 2015.12.24
책 정보(메타데이터) 입력  (0) 2015.12.24
EPUB으로 저장  (0) 2015.09.28
Sigil로 파일 열기  (0) 2015.09.24
제작 파일 준비  (0) 2015.09.21

설정

트랙백

댓글

EPUB으로 저장

파일을 불러오면 전자책을 편집할 있는 상태이긴 하지만 아직 EPUB 파일이 생성된 것은 아니다. EPUB파일을 만들기 위해서는 파일을 불러온 저장을 해야 한다. 불러온 파일을 편집하기 전에 반드시 저정을 하는게 좋다. 파일을 편집 하다 예상치 않은 오류로 편집한 내용을 전부 잃을 수도 있기 때문이다.

 

Sigil에서 텍스트 파일이나 HTML 파일을 불러왔다 하더라도 실제 편집하고 있는 파일은 EPUB이다. 파일을 불러오는 순간 Sigil 파일을 EPUB 파일로 편집할 있게 준비된다. 그래서 [저장] 하면 불러왔던 텍스트나 HTML 파일에 덮어쓰지 않고 새로운 EPUB 파일로 저장이 된다. 만약 EPUB 파일을 불러왔다면 저장시 기존 파일에  덮어쓰기가 되니 주의하기 바란다. 기존 EPUB 파일을 보관하고 새로 작업을 하고 싶다면 [저장] 아닌 [다른이름으로 저장하기] 해야한다.

 

파일 저장은 [파일 > 저장] 누르거나 도구상자의 저장 아이콘을 클릭하면 된다.




HTML이나 텍스트 파일을 불러오고 처음 저장을 한다면 저장할 위치와 파일 이름을 지정할 있다. EPUB 파일을 불러오면 이전 파일에 덮어쓰기를 한다.

 


파일을 불러온 상태에서는 Sigil 상단의 파일명 표시 장에 불러온 파일 이름이 그대로 나타난다. 아래 그림처럼 텍스트 파일을 불러오면 EPUB 파일을 편집 중이라도 파일 이름은 텍스트 파일로 보인다. 하지만 저장을 하면 EPUB 파일로 변경이 된다.


* 저장 후


* 저장 전


'Sigil 사용 설명서 > Sigil로 전자책 제작하기' 카테고리의 다른 글

표지 이미지 삽입  (0) 2015.12.24
책 정보(메타데이터) 입력  (0) 2015.12.24
EPUB으로 저장  (0) 2015.09.28
Sigil로 파일 열기  (0) 2015.09.24
제작 파일 준비  (0) 2015.09.21
Sigil로 전자첵 제작하기  (0) 2015.09.18

설정

트랙백

댓글

Sigil로 파일 열기

Sigil HTML 파일과 텍스트(txt) 파일을 지원한다. Sigil HTML이나 텍스트 파일은 EPUB 포멧으로 변환이 된다. EPUB 파일 역시 Sigil 있다. Sigil EPUB 파일을 열때는 미리 복사본을 만들어 두는 것이 좋다. EPUB 열면 Sigil 관리하는 방식으로 파일이 재구성되기 때문이다. EPUB3 파일을 Sigil 열면 EPUB2 파일이 된다. 그리고 이미지나 폰트, CSS, 텍스트 파일 역시 Sigil 관리하는 폴더로 이동한다. HTML5 스크립트 EPUB2 표준에 어긋난 태그 역시 자동으로 수정될 있다. 따라서 Sigil EPUB파일을 열기 전에는 반드시 복사본을 만들어 둬야한다.


1. Sigil을 실행한다. 


Sigil 실행하면 아래처럼 몇가지 창들을 있다



위쪽에 메인메뉴가 있고, 왼쪽으로 책의 파일을 있는 [ 찾아보기]창이, 화면 가운데는 책보기, 코드보기 편집을 있는 편집창, 오른쪽에는 목차가 보인다. 제일 아래에는 편집에 대한 다양한 정보를 보여주는 상태창(Status Bar) 위치한다그리고 상태창 바로 위쪽으로 검색창이나 유효성 검사 결과 창이 표시된다.


2. 파일 열기

[파일 > 열기] 눌러 HTML, 텍스트, EPUB 파일을 불러올 있다


파일 열기의 기본은 EPUB으로 되어 있다. [열기] 눌러 탐색창을 열면 EPUB 파일밖에 보이지 않는다. HTML이나 텍스트 파일을 불러오고 싶다면 파일열기창의 오는쪽 아래에 있는 파일 형식을 원하는 파일로 수정해 줘야 한다.


원하는 파일을 찾아 불러오면 파일의 형식에 따라 찾아보기 화면과 편집화면에서 불러온 파일과 파일의 내용을 있다. HTML 파일은 HTML 태그와 스타일을 그대로가져온다. 텍스트파일은 줄바꿈을 기준으로 문단이 구분되며, EPUB 파일은 Sigil 파일 관리 방식에 맞춰 파일들이 다시 정렬된다


'Sigil 사용 설명서 > Sigil로 전자책 제작하기' 카테고리의 다른 글

표지 이미지 삽입  (0) 2015.12.24
책 정보(메타데이터) 입력  (0) 2015.12.24
EPUB으로 저장  (0) 2015.09.28
Sigil로 파일 열기  (0) 2015.09.24
제작 파일 준비  (0) 2015.09.21
Sigil로 전자첵 제작하기  (0) 2015.09.18

설정

트랙백

댓글

제작 파일 준비

EPUB 파일이나 HTML, 혹은 Sigil 직접 원고를 작성할 사람은 내용을 필요 없이 다음 장을 봐도 된다. 이번 장에서는 다양한 형태의 파일로 갖고 있는 원고를 전자책 제작을 위한 원고로 어떻게 준비하는지 설명한다.


참고로 사용 설명서는 [심야책방] 인생을 위한 세계문학 시리즈 이상한나라의 앨리스의 텍스트 파일을 제작 샘플로 사용할 예정이다. 저작권이 있어 샘플 파일을 공개할 없으니 각자 텍스트나 HTML 샘플 파일을 준비하기를 권한다.


 1. MS 워드, HWP

Sigil 전자책을 만들기 위해서는 텍스트나 HTML 형식의 원고가 좋다. MS 워드나 HWP 같은 워드프로세스라면 HTML 내보내기를 해준다. HWP MS워드는 [파일 > 다른 이름으로 저장] 선택해 HTML 파일로 저장할 있다.




2. 텍스트 파일(txt)

텍스트 파일은 Sigil 작업하기 가장 좋은 포멧이다. Sigil 불러들였을  아무런 스타일도 적용되지 않아 HTML코드를 수정하는데 시간을 들일 필요가 없다텍스트 파일로  원고를 불러오면 스타일이 없어 편집에  많은 시간을 들여야 한다고 생각할 수도 있다하지만 이는 잘못된 생각이다.

종이책과 전자책이 똑같아야 한다고 생각한다면  생각을 당장 버려야 한다. EPUB 전자책을 위한 포멧이지 종이책을 스마트폰에서   있도록 만들어 주는 포멧은 아니다종이책을 스마트폰에서 보게 하고 싶다면 PDF 사용하면 된다. EPUB 다양한 유형의 기기에서  보이는 책을 만들기 위한 포멧이기 때문에 종이책 같이 정형화  책이   없다다양한 기기에서  보이고편집자의 편집 의도가  반영되게 만들고 싶다면 전자책에 맞는 새로운 편집을 해야한다종이책 처럼 보이게 편집한 전자책 보다는 보는 독자들이 편하게   있는 전자책이  좋다그래서 아무런 스타일도 적용되지 않은 텍스트 파일이 전자책을 만들기 가장 좋은 파일이라고 말할  있다.


3. PDF 파일

PDF 뷰어 프로그램에 PDF 텍스트로 변환해 주는 기능이 있다. 가장 많이 사용하는 Adobe Reader에도 [파일 > 다른 형식으로 저장] 해서 워드 파일이나 텍스트 파일로 저장하는 기능을 제공한다. 아니면 PDF 텍스트 전체를 선택[편집>전체선택]해서 복사한 메모장 같은 텍스트 편집 프로그램에 붙여넣기를 수도 있다. 이때 아래 사항을 반드시 확인해야 한다.


* 페이지 단위로 나눠진 문단, 쪽번호, 머리말, 꼬리말 영역의 텍스트를 반드시 확인한다. 

PDF는 아래 이미지처럼 되어 있다면 복사한 텍스트는 페이지별로 이렇게 복사가 된다이런 부분은 직접 찾아 수정을 해야한다.


* PDF를 복사해서 붙여넣기 한 결과.

페이지와 페이지 사이 문장이 자연스럽게 연결되지 않고 페이지 번호가 들어간다. 특히 주의해야할 점은 16페이지와 17페이지 사이를 복사해도 페이지 번호가 16이 나오는 것이 아니다. 인디자인 같은 출판 편집 프로그램으로 만든 PDF는 레이어 단위로 편집이 되고, 레이어 순서에 따라 복사된 내용이 재구성된다. 

앨리스가 문을 열자 쥐구멍만 한 작은 통로 가 나왔다. 무릎을 꿇

17

고 통로 안쪽을 살펴보니 이제껏 한 번도 본 적 없는 아름다운 정원이 한눈에 들어왔다.



* 아래처럼 본문을 복사 해도 줄의 끝에서 줄바꿈이 되는 경우가 많다. 이렇게 복사가 되면 문장을 직접 확인해 붙여줘야 한다. 

복도를 빙 돌아가며 문이 여러 개 있었지만 하나같이 다 잠겨

있었다. 앨리스는 복도 한쪽 끝에서 반대쪽 끝까지 문을 모두

열어보았지만 헛수고였다. 잔뜩 풀이 죽은 앨리스는 복도 중간

까지 다시 걸어오면서 어떻게 하면 여기서 빠져나갈 수 있을지

골똘히 생각했다.



Tip : 문단 정리가 되지 않은 PDF 정리하는 시간이 오래 걸린다. 편집에 1시간 걸리는데 원고 정리에 하루 종일 걸릴 수도 있다. 이런 텍스트 파일은 '텍스트 파일 정리' 프로그램을 사용하면 시간을 많이 절약할 있다. 인터넷에서 '텍스트 정리 프로그램'이나 '텍스트 문단 정리 프로그램' 검색하면 무료로 사용할 있는 프로그램들이 있으니 참고하기 바란다.


4. 인디자인,

인디자인이나 같은 프로그램들은 [내보내기] 혹은 [Export]기능이 있다. 기능을 이용하면 텍스트 파일이나 HTML 파일로 내보내기를 있다.

인디자인은 EPUB으로 내보내는 기능이 있다. 기능을 사용해 편집자라면 그리 유용한 기능이라고 생각하지는 않을 것이다. 인디자인으로 EPUB 만들고 싶다면 편집 과정에서 EPUB 전환을 염두에 두고 작업해야 한다. 레이어 순서를 정확히 맞추고 이미지나 쪽번호나 머리말 등도 EPUB 변환을 고려해 배치해야 한다. 그렇지 않으면 HTML 변환했을 보다 수정하는데 많은 시간이 걸릴 있다.

 


'Sigil 사용 설명서 > Sigil로 전자책 제작하기' 카테고리의 다른 글

표지 이미지 삽입  (0) 2015.12.24
책 정보(메타데이터) 입력  (0) 2015.12.24
EPUB으로 저장  (0) 2015.09.28
Sigil로 파일 열기  (0) 2015.09.24
제작 파일 준비  (0) 2015.09.21
Sigil로 전자첵 제작하기  (0) 2015.09.18

설정

트랙백

댓글


티스토리 툴바