내맘대로의 EPUB 제작 가이드

지난 글에 '2% 아쉬운 교보문고 멀티미디어북(http://epubguide.net/209)'에서 '영한대역본'에 대해 얘기했었지요? MP3로 읽어주고, 영문과 한글을 번갈아 가면서 볼 수 있긴 하지만 MP3는 본문을 따라가지 못하고 번역본 참고는 너무 어려운 '영한대역'이었습니다. 그냥 종이책 펴놓고 MP3플레이어로 오디오북  들으면서 읽는 것과 별반 차이가 없었지요. 

전자책 특성을 살려서 만들어 본, 영한대역이라면 이래야 하지 않을까 하는 생각으로 만든 '이상한 나라의 앨리스' 샘플을 보여드립니다. 늘 강조하지만 이게 정답은 아닙니다. 다른게 틀렸다는 것도 아니고요. MP3로 자연스럽게 읽어주고 한글판과 영문판을 번갈아 가며, 혹은 선택해서 읽는 영한대역을 선호하는 독자도 있습니다. 영문판/한글판을 따로 만들면 영문으로 한번, 한글로 한번 읽을 수 있으니 독자 입장에서는 좋을 수 있어요.

제가 오늘 보여드리는 샘플은 '영어'로만 읽고싶은데 영어 실력이 딸려서 중간 중간 번역이 막힐때 답답했던 분들을 위한 편집본이에요. 그리고 MP3로 자연스럽게 녹음된 오디오북을 제공하지는 못하지만 영문 TTS(상당히 자연스럽습니다)로 한 문장씩 따라가며 읽어주기 때문에 듣기, 읽기를 같이 하면서 영어공부를 하고싶은 분들에게 도움이 될것 같다는 생각으로 만든 영한대역본입니다.

특별한 기술은 하나도 들어가지 않았습니다. 이전에 설명했던 팝업주석(http://epubguide.net/135)을 활용했습니다. TTS는 뷰어에서 지원을 하기 때문에 편집자가 신경쓸 필요 없어요. 

리디에서는 이유 모를 오류(한페이지는 팝업이 되고, 다음페이지는 안되고, 그 다음페이지는 되는)가 있네요. 알라딘과 교보eBook에서 테스트를 했습니다. 교보eBook은 앱 설정에서 영문 TTS를 선택할 수 있고, 알라딘은 TTS 화자 설정에서 '내장TTS'를 선택하면 자연스러운 TTS를 이용할 수 있습니다. 

교보와 알라딘에서 조만간 만나보실 수 있어요^^

리디는 오류를 해결해야하고, 예스24 뷰어는 팝업주석을 지원하지 않아 잠시 보류합니다.

<ruby> 태그는 일본어의 발음기호처럼 글자 위에 발음이나 의미 주석을 달 수 있도록 만든 태그입니다. 이런 주석을 ruby annotation이라고 해요. 그렇다고 주석을 남길 때만 사용할 필요는 없습니다. 

아랫쪽 단락(빨간 점선 테두리)을 보면 글자 위에 점이 찍혀있는데 이런 편집을 ruby 태그로 할 수 있습니다. 

<ruby>태그는 두 부분으로 구성됩니다. 본 단어와 주석은 <ruby>태그로 묶이고, 주석은 다시 <rt> 태그로 묶어줍니다. 한 글자씩 묶을수도 있는데 단어의 뜻을 ruby 주석으로 처리해도 됩니다.

rt 태그는 CSS 스타일로 꾸밀 수 있습니다. ruby에 스타일을 주면 본 단어까지 영향을 주기 때문에 주석 스타일만 바꾸고 싶다면 rt 태그에 스타일을 적용하세요.

앞에 정리한 제목 표현과 ruby 태그로 글자 위에 점을 찍은 것까지 적용한 결과를 확인해 보세요.

'이게 최선입니까!'

최근 다시 뜨고 있는 드라마 명대사지요?

교보문고에서 팔고 있는 멀티미디어 eBook을 보고 이 대사가 떠올랐어요.

교보문고 멀티미디어 eBook은 여기서 확인하실 수 있습니다.

http://digital.kyobobook.co.kr/digital/eventTemplet/eventTempletMain.ink?tmplSeq=7164

교보문고 EPUB 뷰어는 동영상, MP3 뿐 아니라 Fixed Layout, CSS3, JavaScript, SVG, MathML, 조만간 SMIL까지 지원을 합니다. 국내 유통사 뷰어 중에서는 유일하고, 깃든이나 펍트리 뷰어 처럼 EPUB3 뷰어를 표방하는 것들과 비교해도 기능이 떨어지지 않습니다. 

여행책에 구글 지도를 넣고, 요가책에 시간에 맞춰 사진이 바뀌게 만들고, 아이들을 위한 책에 흥미를 높일 수 있는 간단한 게임을 넣는 것들이 가능해요. 이렇게 책을 만들려면 '종이책을 전자책으로 변환'하는 수준을 넘어서야 합니다. 그런데 아직까지는 종이책에 MP3를 넣은 정도가 한계인 것 같아요.

영한 대역 어린왕자를 보면 '기획'이 빠져있습니다. 종이책을 스캔해서 PDF로 만들고 링크로 영문판과 번역본을 오가도록 만들었습니다. 

이건 제가 만든 '이상한 나라의 앨리스' 영한 대역본입니다.

MP3를 넣지 않았지만 TTS로 들을 수 있지요. 글자 크기를 자유롭게 확대/축소 할 수 있고 영문판을 보다 막히는 부분이 나왔을 때 그 부분만 팝업으로 한글 번역본을 볼 수 있습니다.

교보문고는 팝업 주석 창이 예쁘지 않아요 ㅜ.ㅜ 알라딘이나 리디북스 전자책 뷰어로 보면 좀 더 예쁘게 한글 번역본을 볼 수 있습니다 ^^;;

이 둘의 차이는 '기획'입니다. 별것 없는 기획이지만, 하나는 링크로 한글과 영문을 오가게 했고, 다른 하나는 영문판 안에서 한글을 볼 수 있게 만들었습니다. MP3는 TTS보다 자연스럽지만 영문 TTS 기술이 많이 발전해서 TTS로 들어도 어색하지 않습니다.

여러분들은 '어린왕자'와 '이상한 나라의 앨리스' 중 어떤 편집이 더 편해 보이세요?

'왕초보 영어회화 100일의 기적'도 샘플로 만나볼 수 있습니다.

전자책과 종이책을 보면 구성이 완전히 동일합니다. 발음을 MP3 듣기 버튼을 눌러 듣느냐, QR코드로 듣느냐의 차이만 있지요. 괜찮아 보입니다. 종이책은 발음을 들으려면 QR코드를 찍어야 하는데 터치 한번으로 MP3를 들을 수 있으니까요. 그런데 정말 이게 최선이었을까요?

왼쪽이 전자책, 오른쪽이 종이책

2년 전에 전자책 기획 교육을 위해 만들었던 샘플이 하나 있습니다. 마침 이 샘플도 넥서스의 영어 단어장 책이었어요. 교육을 목적으로 단어 5개만 발췌해 만들었기 때문에 넥서스의 허락은 받지 않고 만든 샘플이라 넥서스 출판사는 이 샘플의 존재를 모를거예요^^;

이게 종이책 원본입니다.

이 책을 EPUB3로 아래처럼 만들었어요. 자세히 보시면 종이책과 구성이 완전히 동일하다고 느끼실거예요. 모든 내용을 종이책에서 가져와 그대로 살렸습니다. 하지만 EPUB3 전자책에는 MP3 버튼을 추가하고, 단어와 뜻을 구분해서 학습 효율을 높였습니다. 단어와 뜻이 같이 나와있으면 뜻에 눈이 가서 단어를 암기하는데 방해를 주기 때문에 뜻은 필요할 때만 볼 수 있도록 버튼으로 처리했지요.

같은 내용이라 하더라도 어떻게 기획을 하느냐에 따라 이런 차이가 생깁니다. '종이책하고 똑같이 만들지 말라' 제가 늘 강조하던 거지요. 어떤 책은 종이책의 편집을 그대로 살려야 하지만 어떤 책은 완전히 새로 만들었을 때 더 좋은 결과를 보여줄 수 있습니다.

'왕초보 영어회화 100일의 기적'을 종이책의 보조 교재로 만든다면 더 좋았을 것 같아요. 제가 기획을 했다면 종이책 내용 중 영어 문장과 MP3만 따로 뽑아 내서 카드 형식으로 만들었을거예요. 그래서 종이책으로 공부를 하는 분들이 QR코드로 발음을 듣지 않고 전자책을 종이책 옆에 펼쳐서 공부는 종이책으로 하고 발음을 듣고 싶을 때 전자책을 활용하도록이요.

그리고 종이책을 볼 수 없는 상황, 예를 들면 버스나 지하철 안에서, 친구를 기다리느라 10분쯤 시간이 났을 때 종이책으로 학습한 내용을 전자책으로 복습할 수 있도록 하는거지요.

이게 정답이라는 얘기가 아닙니다. 이렇게 다양한 형태로 기획을 할 수 있다는거예요.

다른 책들도 고민이 부족해 보여 아쉬움이 많이 남습니다.

미움받을 용기를 읽는 독자가 출판사가 정해놓은 음악을 들으며 책을 읽고싶어 할까?

책을 읽는 사람들은 장제목 페이지를 1초면 넘기는데 화려한 멀티미디어 애니메이션이 필요했을까?

발음은 정확하지만 읽는 부분을 볼 수 없는 MP3와 발음이 조금 어색해도 읽는 부분을 따라갈 수 있는 TTS 중 어느 쪽이 더 좋을까?

이런 고민을 하고 EPUB3를 기획한다면 전자책을 보고싶어 하는 독자들이 더 늘어나지 않을까요?

교보문고 멀티미디어북은, 출판사들이 교보문고 뷰어의 기능을 100% 활용하지 못해 2% 부족한 아쉬움이 남습니다.

몸이 달다 - 강백수

교보문고

예스24

알라딘

* 교보문고 미리보기 캡쳐

어쩌다 보니 계속 비슷한 패턴의 스타일을 고르게 되네요. 이 책은 최근에 편집을 마쳐 소개를 해봅니다. 샘플 이미지에서 제목과 글자 위에 찍힌 점(점선 테두리 부분)을 어떻게 구현할까요?

아마 제목은 이미지로 넣으면 된다고 생각하실거예요.

이미지로 넣어도 괜찮은데, 이 책의 목차는 100개가 넘습니다. 제목이 100개가 넘는거고, 이미지를 한페이지씩 잘라가며 100개를 만들어야되요. 태블릿까지 고려해서 제목 이미지를 잘라보니 제목 하나당 20kb~30kb 정도 나오네요. 25kb로 놓고 100개면 용량은 크지 않습니다. 그래도 이미지 100개를 자르고, 목차 하나씩 맞춰가며 100개의 이미지를 삽입하는건 시간을 많을 잡아먹습니다.

이 스타일을 만들기 위해 2가지를 검토했습니다. div 태그를 사용한 방법. 만약 제목이 가운데 위치해야 한다면 div 태그를 쓰는게 좋습니다. 테이블을 사용하는 방법. 이 책은 제목이 왼쪽정렬 되어 있습니다. 그래서 테이블을 이용하면 div 태그보다 깔끔하게 표현할 수 있습니다.

이미지는 아래 3개를 사용합니다.

1. div 태그를 사용한 코드

여기서 px로 잡아준건 이 책은 편집이 중요한 요소이기 때문입니다. 실제 출간은 100px가 아닌 60px로 맞췄어요. 스마트폰에서 책과 비슷하게 표현되는건 100px인데, 그러다보면 제목 부분이 너무 부각되서 본문이 안들어오더라구요. 그래서 제목 크기를 본문 크기보다 20%정도 크게 작업을 했습니다. 

어째든 이렇게 해 주면 제목을 가운데 정렬할 수 있습니다. 

뷰어에서는 이렇게 보입니다. 글꼴이나 다른 요소는 스타일에 적용하지 않았으니 제목 상자만 봐주세요.

이 코드는 테이블을 이용한거예요. 실제로 적용한 코드는 div가 아니라 이 테이블입니다. 모바일 화면에서 제목이 너무 커보이지 않게 높이를 조절했습니다. 높이는 60px로 고정되어 있어도 폭은 글자 수에 따라 늘었다 줄었다 합니다.

언제 테이블을 쓰고 언제 div를 쓰는지에 대한 규칙은 없습니다. 편집자의 판단에 따라 어떤 것을 써도 상관 없어요. 

위 두 예는 디자인을 위해 제목 크기를 고정한 코드입니다. 본문 글자 크기를 조정해도 제목 크기는 변하지 않아요. 그럼 '난 본문 글자 크기가 변하면 제목도 바꾸고싶은데... 하는 분이 계시겠지요?

위 코드를 조금만 수정하면 가능합니다. 

실제로 위 두 코드는 알라딘과 예스24에서는 이상하게 보일거예요. 알라딘과 예스24 뷰어는 폰에 따라 픽셀 계산을 실제 픽셀 크기로 합니다. 설명을 하자면 복잡한데, 최신 폰에서는 60px가 엄청 작게 보인다는거예요. 그래서 제목을 픽셀이 아닌 글자 크기에 맞게 보이도록 수정한 코드가 있습니다.

이렇게 수정을 하면 글자 크기에 맞게 제목 글상자 크기가 바뀝니다. 그런데 제목이 너무 커지면 본문과 어울리지 않더라구요. 글자 크기 변화에 따른 글상자 크기 변화 이미지예요.

코드가 길어서 그런지 스크롤 압박이 생기네요. 오늘은 여기서 마무리 할게요.

글자 위에 점을 찍는건 ruby 태그를 쓰는 간단한 작업인데 모르는 분들이 많더라구요.

이건 다음 글로 올리겠습니다 ^^