미디어 오버레이 샘플 & Sigil로 만드는 방법

안녕하세요.


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

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

요즘 미디어 오버레이 파일을 매주 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 자르는건 시간을 줄일 수 없지만 ㅜ.ㅜ



설정

트랙백

댓글

전자책은 PDF가 아니다. https://brunch.co.kr/@trip/64



얼마 전에 도착한 따끈한 기획회의를 무심히 펼쳐보다가 '전자책은 PDF가 아니다'라는 제목을 봤습니다.

전자책 강의를 하면서 '전자책은 종이책이 아니다. 종이책 처럼 만들려고 하지 마라'라는 얘기를 늘상 하고 다니던 터라
제목만 보고도 어찌나 반가웠는지 모릅니다.

'전자책은 종이책이 아니다. 종이책 처럼 만들지 마라'
아주 중요하다고 생각하는 내용을 다른 사람들에게 얘기하는데 아무도 귀 기울이지 않고,
'네가 책이 뭔지 알아?'라는 눈총을 받으면, 출판업계에서만 10년 넘게 일해온 당사자는 조금 억울합니다.
하지만 워낙 보수적인 출판계다보니, 종이책에 대한 애정이 크다 보니, '전자책' 하면 우선 거부하는 기분이 들어요.

그런데 이 제목을 보는 순간, 글쓴이가 무슨 말을 하려는지 알겠습니다.
그래서 누가 이런 얘기를 하나, 그것도 기획회의에... 하는 관심에 지은이를 보니 카카오 관계자. 역시 출판쪽 사람은 아니었네요.

전자책 강의를 할 때 UI와 UX에 대해 얘기를 합니다. EPUB을 제작하더라도 UI와 UX에 신경을 써야 한다고요.
이런 얘기를 하면 '뭔 헛소리야' 하는 표정으로 바라보는 사람들이 많지만, 몇 년째 UI와 UX에 대해 강조를 하고 있습니다.
전자책에서는 UI와 UX가 아주 중요하거든요.

"UX는 IT 분야에서 매우 중요한 요소다. UX는 프로덕트의 성패를 좌우한다....역으로 UX 고려 없이 단순하게 전달 매체의 전환만 이뤄진다면 성공하기 어렵다. 책에 담긴 콘텐츠를 그대로 모바일 화면에 담는다고 모두 전자책이 되는 건 아니다. 책은 양손을 활용하는 매체고, 스마트폰은 한 손을 주로 활용하는 디바이스다. 전햐 다른 UX다.
모바일 시대가 됐고, 많은 콘텐츠가 디지털화되고 있다. 가장 흔한 실수는 UX의 고려 없는 1차원적 디지털화다. 신문의 PDF 서비스가 대표적이다. ...UX를 고려하지 않은 전형적인 디지털화 방식이다."

이 글은 책의 내용에 대해 얘기하지 않습니다. 글쓴이의 실패와 성공 경험에서 나온 전자책의 UX에 대해 얘기하고 있습니다.
EPUB3 콘텐츠를 만들며 전자책은 기획이 가장 중요하다고, 종이책을 그대로 담으면 아무도 사지 않는다고, 정답 누르면 답이 체크된다고 EPUB3는 아니라고, MP3가 들어갔다고 EPUB3가 아니라고 입에 침이 마르도록 강조를 해도, 결국엔 종이책을 통으로 담아달라는 편집자들을 너무 많이 만납니다. 
처음엔 이해하는 듯 하다가도, 제작이 진행되면 결국 종이책 내용이 전부 다 전자책에 담기고 마는게 현실이지요. 결국 스마트폰으로 보는 MP3들어간 종이책이 됩니다.

EPUB2에서도 UI와 UX가 있을까요?
당연히 있습니다.
신국판으로 흰색 바탕에 편집자가 선택한 글꼴로 인쇄된, 무게감 있는 종이책을, 페이지를 넘겨야 하는 종이책을, 연필로 메모를 하고 밑줄을 그을 수 있는 종이책을, 4인치~10인치, 수천가지 해상도의 LCD, LED, EPD 디스플레이에서 볼 수 있도록 변환하는 작업이 전자책 제작입니다. 
똑같은 스타일이라도 교보, 리디, 예스, 알라딘 뷰어에서 모두 다르게 보입니다. 이미지 배치, 표에 담긴 글자 크기, 표와 이미지의 캡션.... 사용자가 바꿀 수 있는 글꼴, 글자크기, 줄간격, 배경색..... 이런 것들을 교보, 리디, 예스, 알라딘 뷰어에서 독자들이 만족도 높은 UX를 경험하도록 만들어야 하지요.

독자들은 '대충 만들어도 별 차이 없다'고 얘기할 지도 모릅니다.
그건, 독자들의 전자책 품질에 대한 기대치가 하향평준화 됐기 때문입니다.
독자들도 깔끔하게 잘 만든 전자책을 보면 좋아합니다.

'누구나 쉽게 만들 수 있는 전자책'이 아닌, 독자들이 다양한 화면에서 만족할 만한 전자책을 만들고 싶다면, 전자책을 만들 때도 UI와 UX를 고민하세요.


설정

트랙백

댓글

블로그의 글들이 책으로 엮였습니다 - Sigil Using Bible

Sigil 사용 설명서 2018.08.17 16:46

 
  
 Logo
 

내맘대로의 EPUBGUIDE.NET 

운영제가 제공하는 

전자책 제작노하우

 

Vol 2 • 2018년 8월 1인미디어 • Facebook


 

 

책이름 | 제대로 된 전자책 한권 잘 만들기

Sigil Using Bible(초급편)
지은이 | 박웅영
감수자 | 남동선, 성대훈
펴낸날 | 2018년 7월 16일
판 형 | 신국판(152×225)
페이지 | 336쪽
가 격 | 19,900원
분 류 | 국내도서>IT/컴퓨터>그래픽/멀티미디어
ISBN | 979-11-961362-1-5 93000

 

 
 
(08377) 서울특별시 구로구 디지털로 33길 50, 703호 전화:02-6404-8587 팩스:02-6008-2708 내용 문의: akdoli@indimedialab.com
 
 

제대로 된 전자책 한 권 잘 만들기 

Sigil Using Bible

내맘대로의 EPUBGUIDE.NET 운영자가 제공하는 전자책 제작노하우
 
Placeholder

“몇 시간만 배우면 누구나 전자책을 만들 수 있다!?”
이 말은 종이와 연필만 있으면 누구나 글을 쓸 수 있고,
물감만 있으면 누구나 그림을 그릴 수 있다는 말과 다르지 않다.
이 책은 ‘누구나 만들 수 있는 전자책’ 제작 스킬을 설명하지 않는다.
누구나 쉽게 만들 수 있는 전자책을 넘어
아무나 쉽게 따라할 수 없는 고품질 전자책을 만들기 위해 필요한
전문 지식을 담고 있다.
1편은 초보자도 쉽게 EPUB을 만드는 방법을...
2편은 전문가도 까다로운 스타일 편집 방법을...
이 두 권으로 당신도 ‘아무나 만들 수 없는 전자책’을 만드는
전자책 제작 전문가가 될 수 있다!

 
 
 
Placeholder
 

이 책에서 이야기할 것들

"내맘대로의 EPUBGUIDE.NET"을 책으로 엮는다!
 

누구나 쉽게 전자책(EPUB)을 만들 수 있다고?
지금까지 전자책을 소개했던 사람들은 누구나 쉽게 전자책을 만들 수 있다고 강조했다. 국내 최초로 EPUB을 상업적으로 도입하며 전자책 뷰어, 유통 플랫폼 개발, 신규 전자책 서비스 도입에 앞장서 온 EPUB 1세대 내맘대로 출판사의 박웅영 대표 생각은 다르다. 그는 아무나 유통 가능한 품질의 EPUB을 만들 수 있는 것은 아니라고 말한다.
전자책 제작에 관심있는 사람이라면 박웅영 대표는 몰라도 ‘내맘대로의 EPUBGUIDE.NET’을 모르는 사람이 없다. Sigil 사용법이 궁금해서, EPUB 제작 방법이 궁금해서, 까다로운 스타일을 편집하는 방법이 궁금해서, 오류 해결 방법이 궁금해서 인터넷을 검색해 보면 결국에는 EPUBGUIDE.NET과 연결된다. EPUB과 관련된 어떤 정보를 찾아도 EPUBGUIDE.NET으로 연결되다 보니 출판계에 있는 한 전자책 담당자는 ‘전자책 편집자의 성지’라고 까지 말한다.
Sigil Using Bible은 ‘내맘대로의 EPUBGUIDE.NET’의 노하우를 고스란히 담은 초보자를 위한 전자책 제작 입문서다.
Sigil의 숨겨진 기능까지 속속들이 파악하고 있는 박웅영 대표가 초보 편집자들이 꼭 활용해야 하는 기능과 중급으로 넘어가려면 알아야 하는 기능을 정리해 책에 담았다. Sigil의 주요 기능을 익힐 수 있고, ‘이상한 나라의 앨리스’를 직접 만들어 보면서 각 기능을 전자책 편집에 어떻게 활용하는지 상세히 설명한다. 그리고 전자책 편집을 위해 꼭 필요한 HTML과 CSS의 기초를 설명하고, HTML과 CSS로 전자책에 스타일을 적용하는 방법이 담겨있다. 이 책을 처음부터 끝까지 따라가다 보면 ‘이상한 나라의 앨리스’를 전자책으로 완성해 볼 수 있다는 것도 이 책의 큰 장점이다.
EPUB은 IDPF(International Digital Publishing Forum)에서 제안한 전자책 표준 포맷으로, 지금은 ISO 표준으로 등록되어 있고 W3C(웹 표준을 관리하는 단체)에서 관리하고 있다. 전자책에 대해 잘 모르는 사람들은 우리나라가 전자책 표준이 없어 전자책 산업이 발전하지 않는다고 하지만 이는 완전히 잘못된 정보다. 국내에서도 2011년에 한국정보통신기술협회(TTA)에 단체 표준으로 등록되어 있다. 표준이라 하더라도 등록만 되고 사용하지 않는 경우가 많이 있지만 EPUB은 다르다. 교보문고, 예스24, 알라딘, 리디북스 등 국내 주요 유통사는 모두 EPUB으로 전자책을 유통한다. 애플, 구글, 코보, 유럽의 아마존이라 불리는 토리노 그룹 등 전 세계 전자책 유통사들도 모두 EPUB을 사용하고 있다.
박웅영 대표는 국내 최초로 EPUB을 상용화 시킨 장본인이다. 2009년 이전에는 국내 어느 유통사도 EPUB으로 전자책을 판매하지 않았다. 교보문고는 PDF로 서비스를 했고, 당시 아이폰에서 처음으로 전자책 서비스를 시작한 리디북스 역시 EPUB이 아닌 독자적인 형식을 사용했다.
박웅영 대표는 당시 교보문고에서 일하며 스마트폰과 전자책 단말기가 주목을 받자 4~5인치 크기의 작은 화면에서는 PDF가 적합하지 않다고 판단했다. PDF를 대체할 방법을 찾다 국내에는 생소했던 EPUB을 사용하기로 결정하고 EPUB 뷰어 기획에 참여했다. 그는 EPUB 도입 이외에도 O2O 개념조차 생소하던 시기에 바로드림 서비스를, 피쳐폰에서 종이책을 주문하는 국내 최초의 모바일 서점을 만드는 등 시대에 한 발 앞선 서비스로 온라인 출판 시장을 주도한 인물이다.
전자책 서비스를 위해 EPUB을 도입하기로 결정한 후 가장 큰 문제는 EPUB의 제작이었다. 당시에는 제대로 된 저작 도구도 없어 뷰어에서 테스트 할 EPUB 샘플을 만들기도 어려웠다. 박웅영 대표는 영문으로 된 IDPF의 EPUB 표준 문서를 보며 메모장과 HTML 편집 프로그램으로 EPUB을 만들며 여기서 익힌 내용을 블로그에 정리해 올렸다. 이때만 해도 출판사에서 만든 EPUB은 표준을 제대로 지키지도 않고 오류가 많아 뷰어를 강제 종료시키는 등 수많은 문제들이 생겼다. 유통사에서는 한달에 2,000종씩 등록되는 EPUB 파일이 10개 중 5~6개 수준으로 문제가 생겨 애를 먹었다. 전자책 매출도 얼마 되지 않던 시기여서 EPUB에 문제가 있으니 수정해 달라고 하면 출판사는 ‘안 팔면 그만’이라며 외면했다. 이런 문제를 해결하려면 EPUB을 제작할 때 제대로 만드는 방법 밖에 없다. 그러나 참고할 만한 자료는 IDPF의 표준문서 뿐이었고, 그나마 영어로 된 기술문서라 일반인들은 쉽게 접근하기 어려워 전문적으로 전자책을 제작한다는 업체가 만든 EPUB 조차 오류 투성이인 경우가 많았다.
박웅영 대표는 뷰어를 개발하고 수많은 출판사들의 EPUB을 분석하며 얻은 지식을 공유하는 방식으로 이런 문제를 해결하려고 노력했다. 뷰어에서 오류가 생기는 수많은 EPUB 파일을 열어 보고 오류의 원인을 찾아 수정하며 빈번히 발생하는 EPUB의 오류들을 정리해 블로그에 올렸다. 전자책은 텍스트 파일이라 생각해 편집에 신경을 쓰지 않던 출판사를 위해 전자책에서도 다양한 스타일의 편집을 할 수 있음을 보여주고 종이책과는 다른, 전자책만의 스타일 편집 기법도 제공했다. 이렇게 10년 가까이 EPUB에 쌓인 블로그가 ‘내맘대로의 EPUBGUIDE.NET’이다.
Sigil Using Bible은 EPUBGUIDE.NET의 노하우가 고스란히 담겨있는 초보자를 위한 EPUB 제작 입문서의 완결판이다. 전자책 편집을 처음 시작하는 사람이라면 결국 ‘내맘대로의 EPUBGUIDE.NET’을 방문해야 하듯이 다른 책으로 전자책 제작 공부를 시작했더라도 결국 이 책으로 마무리를 할 수 밖에 없을 것이다.
Sigil 사용법을 어느정도 알고, 소설처럼 간단한 전자책을 만들어 본 사람이라면 이 책은 쉽게 느껴질 수 있다. 초급에서 중급 전자책 편집자로 넘어가려는 사람, 복잡한 편집이 어려운 사람은 다음에 나올 ‘HTML과 CSS 편’을 기대해 볼 만하다. 국내 최고의 EPUB 전문가 둘이 손을 잡고 EPUB의 개념부터 고급 편집 기술까지 한권으로 끝낼 책을 준비하고 있다니 말이다.

 


 

[책 속으로] ------------------------------------------------

HTML과 CSS를 제대로 활용하기 위해서는 이를 제대로 지원하는 편집 프로그램을 써야합니다. 쉽게 익힐 수 있는 훌륭한 WYSIWYG방식의 편집 프로그램이 많이 있지만 스타일 편집의 한계, 불필요한 코드의 삽입 그리고 높은 사용료를 내야 하는 단점이 있습니다. Sigil은 Open Source 프로그램으로 누구나 무료로 사용할 수 있으며 HTML과 CSS에 대한 코딩이 표준에 적합할 수 있도록 하는 다양한 검증 기능 및 제작 환경을 지원하고 EPUB2, EPUB3에 대한 저장 형식을 제공합니다. 그리고 전 세계의 수 많은 전자책 제작자들이 서로 힘을 합쳐 EPUB 제작에 꼭 필요한 기능을 제안하고 수 많은 개발자들이 이를 적용해 EPUB 제작에 최적화 되었습니다.
- 13쪽
 
전자책은 어떤가요? 전자책에 담긴 논어는 종이책에 담긴 논어와 다를까요? 다르지 않습니다. 전자책도 점토판, 죽간, 종이책과 같이 글자를 담는 그릇일 뿐입니다. 전자책 역시 종이책처럼 글자를 읽어 정보를 얻습니다. 전자책에서 정보를 얻는 방법은 수천년 전에 만들어진 점토판에서 정보를 얻는 방법과 전혀 다르지 않습니다. 그릇에 담을 수 있는 내용의 형식적인 부분 및 표현의 방법 등이 다르다고 할 수 있으나 정보와 지식을 전달한다는 관점에서는 전자책과 종이책의 차이는 죽간과 종이책의 차이보다 크지 않습니다.
전자책 하면 종이책과 다른 특별한 무언가가 있을 것이라고 생각하는 분들이 의외로 많습니다. 전자책은 종이책보다 특별하지 않습니다. 종이책을 다양한 디바이스에서 볼 수 있도록 제작된 형태가 전자책입니다.
- 20쪽
 
HTML이 문서의 구조를 만든다면 CSS(Cascading Style Sheet )는 문서의 모양을 꾸며줍니다. 글꼴, 글자 크기, 색, 상하좌우 정렬, 배경색, 테두리, 레이아웃 등 문서편집기의 편집기능이 CSS의 역할입니다. HTML 태그는 역할에 따라 고유한 스타일이 있습니다.

- 152쪽
 
 


 
 

설정

트랙백

댓글


티스토리 툴바