'Sigil 사용 설명서/Sigil로 전자책 제작하기'에 해당되는 글 12건

  1. 2018.09.15 미디어 오버레이 샘플 & Sigil로 만드는 방법 (6)
  2. 2016.05.10 표지, 속표지 스타일 (3)
  3. 2016.03.16 기본 파일 추가하기
  4. 2016.03.16 HTML 및 CSS 스타일 편집 - ① 필요한 스타일 목록 정하기
  5. 2016.03.03 스타일시트 추가 및 연결
  6. 2016.02.22 장 나누기 (2)
posted by 내.맘.대.로 2018. 9. 15. 18:18

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

728x90

안녕하세요.


간만에 문의가 들어와 설명드립니다.

미디어 오버레이를 만들고 싶다는 내용이었어요.

요즘 미디어 오버레이 파일을 매주 5~6권식 만들고 있는데 음성 시간 맞추는게 고역이네요.
음성 시간만 맞추면 나머지는 그리 어렵지 않습니다.

설명은 샘플 파일 MO_모비딕_sample.epub 파일로 하겠습니다.
IDPF에서 공식 배포하는 MO(Media Overlay) 샘플 파일을 조금 수정했어요.

MO가 무엇인지 궁금하시면

MP3로 녹음한 내용을 책의 텍스트와 싱크시켜 MP3가 읽어주는 부분을 하일라이트 하는 기술입니다.
어학책이나, 유아동 책, 낭독 시집 같은 책에 유용해요.
요즘 뜨고 있는 오디오북도 이 기능을 활용할 수있습니다.

밀리의서재 리딩북이 MO를 활용한 서비스예요.

1. EPUB2 로 되어 있다면 EPUB3로 수정하세요.
미디어 오버레이는 EPUB3부터 지원합니다. 그러니 EPUB2 파일은 EPUB3로 변경을 해야합니다.

참고  EPUB2를 EPUB3로 변환해 보자

2. smil 파일을 만들자

smil 파일은 이렇게 되어 있습니다.
아래 내용을 그대로 복사한 후 수정해 사용하셔도 되요.
========

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

<smil version="3.0" xmlns="http://www.w3.org/ns/SMIL" xmlns:epub="http://www.idpf.org/2007/ops"><body><seq epub:textref="../Text/chapter_001.xhtml" epub:type="chapter" id="id1">

<!--미디어 오버레이 처리가 될 본문 파일 주소입니다-->


<par id="heading1"><text src="../Text/chapter_001.xhtml#c01h01"/>

<audio clipBegin="0:00:24.500" clipEnd="0:00:29.268src="../Audio/mobydick_001_002_melville.mp4"/>

</par>

<!--오디오 한 구간의 시작과 끝입니다.

예를 들어

It is a way I have of driving off the spleen and regulating the circulation.

라는 부분을 MP3와 싱크시키고 싶다면 MP3에서 이 부분이 시작되는 시간(clipBegin)과 끝나는 시간(clipEnd)을 적어줍니다.

그리고 이 본문의 위치와 ID를 이 부분에 넣어줍니다. 본문 ID는 뒤에서 설명드릴게요.

<text src="../Text/chapter_001.xhtml#c01h01"/>


끝으로 MP3 파일의 위치를

src="../Audio/mobydick_001_002_melville.mp4"

여기에 넣어줍니다.


-->


<par id="word1"><text src="../Text/chapter_001.xhtml#c01w00001"/>

<audio clipBegin="0:00:29.268" clipEnd="0:00:29.441" src="../Audio/mobydick_001_002_melville.mp4"/>

</par>


<!--오버레이 처리가 되야 하는 문단이 2개 이상일 경우 par ID를 변경해 줘야 합니다. ID는 word1, word2, word3... 등 편집자가 임의로 지정해 줄 수 있습니다. -->

<par id="word1">

</seq>

</body>

</smil>

=========


smil 파일은 책 전체를 하나의 파일로 만들 수 있고, 각 챕터별로 나눠서 만들 수 있습니다.
작업하는건 각 챕터별로 나누는게 편해요.


3. smil 파일이 준비되었다면 opf 파일을 수정합니다.

3.1 duration 추가
<metadata>....</metadata>

이 사이에 아래 내용을 추가합니다.

<meta property="media:duration" refines="#chapter_001_overlay">0:10:00.000</meta>

<meta property="media:duration">0:10:00.000</meta>

<meta property="media:active-class">-mp3-active</meta>


파란색은 한번, 빨간색은 파일 수만큼 들어가야 합니다.

예를 들어 챕터가 2개이고 smil 파일을 2개 만들었다면

<meta property="media:duration" refines="#chapter_001_overlay">0:10:00.000</meta>

<meta property="media:duration" refines="#chapter_002_overlay">0:10:00.000</meta>

<meta property="media:duration">0:20:00.000</meta>

<meta property="media:active-class">-mp3-active</meta>


이렇게 되야합니다.

3.2 media overlay 속성 추가

<item id="xchapter_001" href="Text/chapter_001.xhtml" media-type="application/xhtml+xml" media-overlay="chapter_001_overlay"/>


오버레이가 연결된 본문 파일의 item 항목을 찾아 media-overlay="MO_file_ID"를 추가해 줍니다.

파일 ID는 item 에서 확인할 수 있습니다.

<item id="chapter_001_overlay" href="Misc/chapter_001_overlay.smil" media-type="application/smil+xml"/>


4. 본문에 MO ID 추가


이제 본문에 Media Overlay ID를 추가하면 끝납니다.

1번에서 이런 부분이 이런 부분이 있었어요.


<par id="heading1"><text src="../Text/chapter_001.xhtml#c01h01"/>


경로 제일 끝에 있는 #c01h01 이게 오버레이 ID입니다.

본문 한 문장씩 mp3를 끊었다면 ID 하나가 문장 하나가 될거예요.


<span id="c01s0006">With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.</span> <span id="c01s0007">There is nothing surprising in this.</span>


본문 문장을 찾아 smil에서 끊은 구간에 맞게 ID를 연결해 줍니다.


복잡해 보이지만 하나씩 천천히 따라해 보면 어렵지 않습니다.

그리고 Sigil의 찾아바꾸기 기능을 이용하면 책 한권 문장을 싱크하는 것도 그리 오래 걸리지 않아요.

물론, MP3 자르는건 시간을 줄일 수 없지만 ㅜ.ㅜ



반응형

댓글을 달아 주세요

  1. 익명 2018.11.05 21:03  Addr  Edit/Del  Reply

    비밀댓글입니다

    • 내.맘.대.로 2018.11.16 13:48 신고  Addr  Edit/Del

      EPUB3로 만들면 가능합니다. 스크립트를 넣어야 하기 때문에 정확히 어떤 형태로 구현되길 원하는지 알아야 답변을 드릴 수 있을 것 같네요.
      http://epubguide.net/113
      이 글을 참고해보세요.

  2. 익명 2019.05.06 22:41  Addr  Edit/Del  Reply

    비밀댓글입니다

    • 내.맘.대.로 2019.05.07 14:04 신고  Addr  Edit/Del

      1. 국내는 교보문고에서 EPUB3 유통이 가능합니다. 미디어 오버레이는 밀리의 서재, 교보문고에서 사용할 수 있습니다.

      2. mp3나 video 파일을 넣는 것과 미디어 오버레이는 다릅니다. 미디어 오버레이는 오디오/영상과 본문 내용을 1:1 매칭시키는 방식이고, mp3를 넣는건 단순 플레이 입니다.

  3. 익명 2021.03.08 00:41  Addr  Edit/Del  Reply

    비밀댓글입니다

    • 내.맘.대.로 2021.03.08 11:55 신고  Addr  Edit/Del

      미디어 오버레이는 음악과 상관 없는 기능입니다. 동영상 자막처럼 텍스트를 그대로 읽은 오디오와 텍스트를 매칭 시키는 기술입니다.

      음악이 안나온다는 의미를 모르겠습니다. 무슨 음악이 어떻게 안나오는지, 음악을 어떻게 넣었는지 등, 아무 정보가 없으면 저도 답변드릴 수 없습니다.

posted by 내.맘.대.로 2016. 5. 10. 09:30

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

728x90
  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. 키트 2017.02.01 06:58  Addr  Edit/Del  Reply

    예제의 이미지 좌우 말고 상하로 중간배치 스타일의 경우 저는 왜 변화가 없는지 모르겠네요
    웹사이트에서 뒤져서 몇가지 소스 찾아서 해봐도 역시 상단에만 붙고...
    한번도 성공을 못했네요 음....

  2. Spring 2020.04.09 08:55  Addr  Edit/Del  Reply

    저도 갤노트에서 상단에만 붙고 수직중앙정렬은 안 되네요..

    • 내.맘.대.로 2020.04.09 09:35 신고  Addr  Edit/Del

      뷰어에 따라 세로 정렬이 안될 수 있어요.

      https://www.epubguide.net/286
      이걸 활용하면 세로 가운데 정렬 할 수 있습니다.

posted by 내.맘.대.로 2016. 3. 16. 19:23

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

728x90

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

 

  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…로 이름을 정리했다. 이렇게 정리를 놓으면 이미지가 들어갈 위치를 찾아 쉽게 추가를 있다

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2016. 3. 16. 19:16

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

728x90

전자책 제작의 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 사용 설명서 > Sigil로 전자책 제작하기' 카테고리의 다른 글

표지, 속표지 스타일  (3) 2016.05.10
기본 파일 추가하기  (0) 2016.03.16
스타일시트 추가 및 연결  (0) 2016.03.03
장 나누기  (2) 2016.02.22
표지 이미지 삽입  (2) 2015.12.24

댓글을 달아 주세요

posted by 내.맘.대.로 2016. 3. 3. 08:37

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

728x90

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

 

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

 

장에서 표지 이미지를 삽입했다. 하지만 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>

 

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

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2016. 2. 22. 14:22

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

728x90


권의 책은 여러 개의 챕터()으로 나눠져 있다. 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 장을 나눈 생성된 파일 목록

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

반응형

댓글을 달아 주세요

  1. 초보 2022.02.24 00:10  Addr  Edit/Del  Reply

    그 저렇게 하니까 싹다 제목이 1장으로 바뀌는데 그냥 태그만 붙일 수 있는 방법은 없을까요?