[샘플]EPUB에서 그림을 그리자~ 그림판 샘플

Drawingboard(MIT License) js 코드를 활용한 그림판입니다.

아쉽게도 캘리버 뷰어에서만 제대로 작동을 하고
교보eBook 뷰어는 좌우 플립시 페이지 넘김 이외의 액션을 막아서 세로선만 그릴 수 있습니다.
교보 담당자도 이 문제를 해결하는 중이라고 하니, 언젠가는 교보eBook에서도 사용할 수 있을 것 같아요.

UI를 잘 구성하면 활용할 만한 곳이 많을 것 같아요.
그림을 미리 그려넣으면 색칠공부 책을 만들 수 있고
아이들을 위한 낙서장도 될 수 있습니다.

학교 교재에도 쓸 수 있지요.
이걸 만든 것도 교재 기능 검토 요청 때문이었습니다. 

기본 코드는 아주 간단합니다. 샘플 참고하세요.

설정

트랙백

댓글

미디어 오버레이 샘플 & 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를 고민하세요.


설정

트랙백

댓글


티스토리 툴바