eBook infomation (전자책 관련 정보)
[기획연재] - 전자책 운용 안내 (3) - 이미지와 멀티미디어의 처리
2015/05/25     view : 6,460     [LIST]

[다양한 스타일의 ePub 전자책 제작 사례]


[기획연재] - 전자책 운용 안내 (3)
 

본 내용은 전자책에 대한 관심이 더욱 커지는 요즘, 실제 전자책을 제작하고 이를 운용, 관리하는 출판사 또는 관계자분들을 위한 것으로, 이미 운용 중이거나 향후 운용하기 위해 준비, 고려 중인 분들께 참고자료로서의 활용을 위해 기획되었습니다.

우선 자체 제작, 배포 중인 곳에 대해서는 더욱 효율적인 운용, 관리 방법을 제시해드리고, 준비 중인 출판사, 담당, 관계자분들께는 유용한 사전 정보의 역할도 함께 할 수 있기를 바랍니다.

현시점에서의 진행 방향은 다음과 같으며 아래 사항 이외에 다루었으면 하는 부분이 있다면 info@diypia.com으로 보내주시기 바랍니다.

1. 개요 : 전자책의 운용 관리가 필요한 이유
2. 전자책의 확인과 관리 - 본문 텍스트 처리
3. 전자책의 확인과 관리 - 이미지와 멀티미디어
4. 전자책 제작의 기준과 표준 규격 준수의 필요성
5. 제작 실습 - 제작도구 소개와 기본 구조의 이해
6. 제작 실습 - 기본 구조의 응용과 이미지 배치


3. 전자책의 확인과 관리
- 이미지와 멀티미디어 처리

 

두 번째 순서인 [전자책의 확인과 관리] - 본문 텍스트 처리에 이어집니다

시작 전에,
전자책 하나 만드는 데 제작하기도 전부터 뭐 이리 알아야 할 것이 많은가, 좀 더 쉽고 간단한 방법은 없나... 라는 문의를 자주 받습니다.
매회 서두에도 있듯이 본 글은 산업 현장(?)에서 본인과 회사를 대표해 그곳의 가치를 표현하는 상품, 내지는 상징할 만큼의 결과물을 만들어야 하는 분들을 위해 준비한 것입니다. 단순히 취미로 전자책을 만들거나 손쉽게 뚝딱 만들어 혼자 즐기기 위해 어지간한 오류가 있더라도 대충 만들기만 하면 되는 전자책과는 거리가 있을 것입니다.

단순히 전자책 자체만을 만드는게 목적이라면 나모, Sigil 외에도 eCup, Pages, 심지어 종이책 조판을 위한 도구인 Indesign, Quark 에서도 ePub으로 저장하는 방법이 있으니 기본적으로 포함된 도움말 등을 살펴보며 편한 대로 이들을 사용하면 됩니다.

하지만 단순히 - 내부가 어떻든 -  전자책 제작 도구의 사용법을 아는 것과, (온전한) 전자책을 만든다는 것은 상당한 거리가 있는 개념일 것입니다.

물론 여기서도 그 온전한 전자책을 제작하기 위해 HTML, XHTML, HTML5, CSS, CSS3...  등 전자책에 필요한 모든 요소를 일일이 모두 설명하지 못하는 한계가 분명 존재하며 그렇게 설명할 필요도, 이유도 없을 것입니다. - 의지와 마음만 있다면 이에 대한 자료나 출간된 도서들이 이미 엄청나게 많기 때문이지요. - 그러함에도 이 모든 걸 다 알아야만 가능한가? 라고 하신다면 그 또한 정답이 아닐 것입니다. 본 기획을 준비하면서도 범위를 대체 어디서부터 어디까지로 해야 하나 많은 고민을 했고 지금도 마찬가지지만 적어도 본 글은 막연한 개념 설명만 늘어놓는 것도, 이미 흔히 볼 수 있는 도구 사용법만 설명하는 것도 의미가 없을 것이라 판단했고 그래서 당사에서 그간 수많은 고품질 전자책을 제작해오며 경험한 것들을 정리한 것입니다. 이 또한 매우 유용하게 쓰일 부분도, 상황에 따라서는 전혀 필요치 않은 부분도 있을 것입니다. 모든 영역, 모든 범위에 걸쳐 다루기에는 한계가 있음을 양해해주시기 바랍니다.

적어도 본 글은 이참에 나도 전자책 한 번 만들어 볼까? 하며 시작하시는 분들 보다는 최소한 웹디자인, 코더, 초급 웹개발자 이상에 해당하거나 이에 준하는 경험자 분들께 더 도움이 될 것이라 생각됩니다.

 

전자책의 이미지 처리에 대하여

전자책에 사용되는 이미지(사진, 그림) 파일들이라고 해서 특별히 다르거나 유별난 것은 전혀 아닙니다.
하지만 디자이너 분이나 웹디자인 하시는 분들께 특히나 이미지 파일이 거기서 거기... 라고 하면 노발대발할 사안이지요.

이미지 파일은 그 포맷의 종류도 상당히 많고 특성 차이도 가지각색이지만 결국 웹 상에서 사용되는 패턴과 매우 유사합니다.

당연한 이야기지만 ePub 전자책은 xhtml, html 과 같이 웹에서 사용되는 규격을 쓰고 있는데다 전자책을 구성하는 각기 html 파일들은 언제든 필요에 따라 분할되든 일부를 사용하든 회사에서 사용하는 웹 서버에 그대로 연결해 사용할 수 있을 정도로 매우 유연합니다.
(실제로 전자책의 개별적인 내용들을 웹서비스와의 연계를 두고 전자책을 제작하는 곳도 현재 적지 않습니다)

따라서 전자책에 사용되는 이미지는 대부분 웹서비스에 사용되는 이미지를 기준으로 생각하시면 1차적인 가이드로는 적절하다 볼 수 있으며 (엄밀하게는 웹에서 사용되는 이미지 포맷도 각 특성에 따라 다양하게 쓰입니다.) 여기서도 크게 주로 사용되는 포맷 몇 가지의 특성과 해상도 설정으로 나누는 정도로만 하겠습니다.

 

이미지 포맷의 설정

먼저 이미지의 포맷에 대해 위키에서 PNG로 찾아보면 GIF와 JPG를 함께 비교하여 잘 정리되어 있습니다. 우선 참고로 살펴보시기 바랍니다.

[PNG : http://ko.wikipedia.org/wiki/PNG ]

간단히 요약하면, 과거 자주 사용되던 GIF는 256 칼라의 한계 때문에 모니터나 모바일 기기의 해상도가 좋아진 요즘에는 고화질 사진에는 거의 사용되지 않고 작거나 색상이 많지 않은 이미지에 사용되고 압축률이 높지 않습니다.

JPG는 압축률도 높고 가장 널리 사용되지만 결국 손실압축형태로 저장되기 때문에 원본 데이터가 중요하거나 섬세한 표현이 필요한 경우에는 적합하지 않고, (수학, 과학 등에서의 그래프 등)

PNG는 GIF보다 압축률도 대부분의 경우 높고 알파채널까지 지원해서 투명도 설정 등에서 유연하지만 손실압축이 아니어서 JPG보다는 보통 큰 용량을 차지합니다. 하지만 JPG 처럼 손실 압축시 경계면이나 선이 뭉개지지 않아서 그래프, 선, 텍스트의 캡쳐를 사용한 이미지에서 매우 높은 효율을 가진다고 정리할 수 있습니다.

위에서 정리된 대로 각기 필요에 따라 그 포맷을 설정하여 사용하면 큰 무리가 없을 것입니다. (그냥 교재의 그래프 등에는 PNG를, 나머지 대부분은 JPG로 하면 된다고 정리하셔도 무방합니다.)

 

이미지의 해상도와 크기의 설정

그럼 다음으로 매우 Hot 한 이슈가 될지도 모를 이미지의 크기와 해상도 설정 부분입니다. 이미지의 품질에 영향을 미치는 요소 중 해상도에 대해 오해를 가지고 있는 분들이 많으신 듯 해서 좀더 상세히 다루어보겠습니다.

당연하게도 좋은 품질의 이미지는 촬영되거나 그려진 후 스캔 등 최초 데이터 확보시 최고 품질의 상한선이 바로 결정됩니다. 이후에 가공되는 이미지들은 어떻게 가공하더라도 결국 그 원본의 이미지 범위 안에서 다듬어지게 되지요.

대부분의 출판사에서 종이책 인쇄를 위한 이미지 원본은 대부분 매우 큰 용량과 그 크기를 갖고 있습니다. 거기다 300 DPI 에 준하거나 그 이상의 해상도를 가지고 있습니다.

여기서 문제 !

전자책에 사용되는 이미지의 해상도는 어느 정도여야 할까요?  웹에서 사용하는 것과 동일한 수준이라니 그에 맞추면 되는거 아닌가? 라고 생각하실 수 있겠지요? 그렇다면 웹 상에서 사용되는 이미지의 해상도는 어느 정도가 적정 해상도일까요?

(웹디자인이나 기타 경험이 있으신 분들이라면 바로 72dpi ! 라고 나오겠지요?  하지만 왜 하필 72 dpi? .. 이 부분은 또 구구절절 사연이 길어질 수 있어 혹 기회가 된다면 다음에 다시 설명드리겠습니다. 일단은 적정 해상도라고 정리해둡니다)
그리고 72 dpi 해상도 정도에서 웹페이지에 포함된 이미지를 출력할 경우 300 DPI의 고해상도 이미지에는 못미치겠지만 적정 용량대비 이미지를 인식할 수 있는 품질로 보실 수 있습니다.

네, dpi / DPI 나왔습니다.

관심있는 분들이라면 너무 익숙해서 거론할 가치조차 없다고 여기실지 모르겠습니다만 사실 매우 중요합니다.

DPI : Dot Per Inch - 1인치 안에 몇 개의 점이 찍히는가 입니다. 당연히 이 DPI는 오직 인쇄기나 프린터에서 종이로 출력할 때에만! 해당된다는 의미입니다.  간혹 어떤 분께서 모니터로 이미지를 보시면서 이 이미지는 300 dpi가 아니라서 품질이 떨어져 보인다... 라고 한다면 잘못된 표현이 되겠지요.

아래 사진을 봐주세요.

 

위 두 이미지의 차이가 느껴지시나요?

혹시 잘 모르시겠다면 위 두 이미지를 각각 지금 사용하고 계시는 PC에 다운받으셔서 포토샵으로 열어보시기 바랍니다.

다소 극단적인 사례를 들었지만 이해를 돕는데는 극단적인 비유가 빠른 이해에 도움이 됩니다.

좌측 첫 번째 이미지를 포토샵에서 불러와 이미지 크기(상단 메뉴의 Image > Image Size)를 보시면 아래와 같이 나오는 것을 확인하실 수 있습니다.

 

우측 두 번째 이미지도 열어볼까요?

어떤가요? 좌측 첫 번째 이미지는 120도, 72도 아닌 단 "1" DPI입니다!
우측 이미지는 200DPI 임을 함께 확인하실 수 있을 것입니다.

결론적으로 DPI는 웹상, 전자책상에서의 이미지 품질 기준이 전혀 아니라 오직 인쇄시에만 사용되는 옵션입니다.
간혹 몇 차례 편집, 수정을 거치고 jpg 로 저장하는 과정에서 품질 손상이 발생할 수는 있지만 DPI는 전혀 영향이 없습니다.

그러니 이후 웹 연계하여 다양하게 사용시 간단한 인쇄를 대비한 72dpi 정도의 설정이라면 아무런 문제 없이 사용하셔도 됩니다.

 

전자책의 이미지 품질에 가장 큰 영향을 주는 것은 전체 크기 - Pixel - 입니다

다음으로 그렇다면 크기는 어느정도로 해야 할까요? 앞에서 언급했던 DPI는 인쇄시에만 영향을 미치는 만큼 웹이나 전자책에 들어가는 이미지의 품질에 가장 영향이 큰 것은 (원본의 품질 다음으로) 바로 가로 세로 크기 - Pixel - 입니다.
특히나 날이 갈수록 전자책이나 아이패드도 점점 해상도가 높은 기기가 나오는데 어떻게 모두 대응해야 할지 결정하기란 쉽지 않습니다.

한가지 분명한 것은 현재 가장 많이 사용되는 기기의 최상의 기기에서 사용될 전자책에서보다는 최소 1.5배 이상의 크기로 설정해두는 것이 가장 좋으며 이는 수년 내 나올 기기에도 바로 대응하기에 무리가 없다는 점입니다.

실제로 애플의 아이북스에서는 초기보다 표지 이미지 크기 (화면 전체를 채우는 이미지 크기)를 초기 크기보다 갈 수록 키워서 현재 가로폭, 짧은 부분의 길이만 1400px 이상이어야 한다고 제시하고 있습니다. 최대가 아니라 최소 1400px입니다.

그리고 본문 내에 삽입되는 이미지들은 대부분의 뷰어나 기기에서 기본적으로 확대해서 별도로 볼 수 있는 기능을 내장하고 있습니다. 필요에 따라 본문 내에서는 작게 해두었지만 확대해 볼 필요가 있다면 최소한 본문에 포함되어 보이는 이미지보다는 커야겠지요?
아이북스, 구글북스에서 현재 가능한 ePub3 고정폭(Fixed-Layout) 전자책에서도 보통 768x1024 로 페이지 크기를 설정하지만 내부 이미지나 배경은 이보다 더 크게 잡고 제작합니다. - 이유는?  고정폭이라도 독자가 보면서 확대해서 볼 수 있기 때문이지요.

또한 경우에 따라 작은 이미지를 여러 개로 나누어 사용하는 것이 필요할 수도 있으며 인디자인이나 쿽같은 편집 프로그램에서처럼 전자책에서도 큰 이미지 하나를 넣어두고 상황에 따라 필요한 부분만 사용하는것도 가능합니다. - 이 부분은 이후 제작 부분에서 다시 상세히 다루겠습니다.

이처럼 이미지의 포맷과 특성에 따라 해상도와 크기 품질을 적절히 조절하면서도 적정 용량을 유지하도록 하는 것은 생각보다 꽤 많은 경험과 시간을 필요로 하는 디자이너분들의 능력이기도 합니다.

특히나 전자책의 용량이 불필요할 정도로 크다거나 예상한 품질과 차이가 있다면 보다 다각적인 방법으로 이유를 살펴보는 것이 좋습니다.

 

3) 전자책의 멀티미디어 처리에 대하여

초기에는 아직 국내에 오픈되지 않은 아이북스 정도에서만 가능해서 관심이 적었다가 국내 오픈한 구글북스에서 ePub3 의 음원과 영상 재생을 지원하게되면서 국내 출판계에서도 어학교재를 비롯해 관심이 매우 높아지고 있으며 이미 공격적으로 제작, 출간을 시작한 곳도 늘고 있습니다. 국내 일반 서점사에서도 점차 늘어나겠지요.

이 때를 즈음하여 음원이나 강좌 영상 등이 포함된 전자책을 고려하는 곳에서는 매우 중요한 사항일 것입니다.

실제 전자책 제작 시 ePub 에 mp3와 같은 음원이나 mp4, mpg와 같은 동영상을 삽입하는 것은 매우 간단한 일이며 소스코드도 매우 간단해서 검색으로도 쉽게 찾아보실 수 있습니다. : [멀티미디어 삽입 전자책 샘플 (Oreilly)]

정작 문제는 위에서 다루었던 이미지 처리와 마찬가지로 직접 촬영, 제작했거나 외부 기관에 의뢰해서 제작된 영상을 어떻게 가공해서 넣느냐입니다.

고화질로 욕심을 내게 된다면 전자책의 용량이 기하급수적으로 늘어나겠지요? 그렇다고 마냥 낮은 비트레이트나 저해상도로 인코딩하게 된다면 품질이 매우 떨어지게 됩니다.

음원의 경우, 초기 원본 리소스의 경우 재생 시간에 따라 다를 수 있겠지만 기본적으로 매우 용량이 크며 전자책에 그대로 넣을 수 없는 WAV와 같은 RAW 파일일 경우가 많습니다.

인코딩 도구, 멀티미디어 편집기를 통해 음원의 품질 비중과 재생 시간에 따라 192Kbps/s ~ 250Kbps/s 로 다운시켜주는 것이 좋습니다.

분할해서 재생이 가능하다면 잘라주는 것도 방법이 될 수 있으며 이런 과정을 거친 경우 전자책에 넣어도 무리가 없을 정도로 매우 줄어든 것을 확인하실 수 있습니다.

[그림] <페르시아의 왕자 : 개발일지>에 삽입된 동영상 - 조던 매크너 / 다이피아 (2013년 5월 출간)

다음으로 동영상 처리입니다만 오디오 음원 처리와 매우 유사한 과정을 거칩니다. 다만 동영상의 경우 화질 비중, 음원 비중의 차이에 따라 영상에 포함된 오디오 부분과 영상 부분을 각기 독립적으로 처리할 수 있는 점이 다를 것입니다.

또한 서점사에 따라 지원 가능한 음원, 동영상의 코덱과 운용 기준들이 다를 수 있어 이 부분에 대한 사전 확인도 필수입니다.

어떤 경우든 다량의 음원이나 동영상이 포함될 경우 전체 용량은 기존 텍스트 기반의 전자책에 비해 비교할 수 없을 만큼 매우 큰 용량을 차지하게 되며 전체 분량에 따라 사용될 기기를 고려해 인코딩, 다운샘플링 등 다양한 방법을 통해 전체 용량을 조절해주어야만 합니다. 가장 좋은 성능이라 알려진 최신 아이패드에서도 다량의 멀티미디어가 들어간 대용량의 전자책일 경우 메모리 부족으로 인해 오류, 오작동이 발생하게 됩니다.

또 이를 보완하기 위해 ePub3 에서는 멀티미디어를 직접 내장하는것만이 아니라 원격 서버에 있는 리소스를 불러오게 하는 방법도 허용하고 있습니다. 다만 그렇게 제작했을 경우 ePub3 규격에 벗어나지 않고 Validation Check 시 오류가 없다 하더라도 이를 운영하는 서점사에서 정책적으로 거부하는 경우가 있습니다. 실제 아이북스, 구글북스의 경우 원격 미디어 호출시 오류가 없더라도 (저작권 등의 출처 확인과 책임 소재 파악이 사실상 불가능함을 이유로) 전자책 등록이 거부될 수 있습니다.
예전 어떤 분께서 동영상을 원격 호출하여 사용하면 Validation Check 시 오류가 발생한다고 하는 걸 본적이 있습니다만 이는 opf 파일에서 원격 호출 설정을 안해서 발생하는 경우입니다. 모든 조건을 만족하면 원격 서버의 미디어 호출을 써도 Validation Check 에서는 오류가 발생하지 않습니다.

 

이 외에도 다이피아에서는 MathML, MathJax 와 같이 전자책 내에서 수학교재의 복잡한 수식을 표현하는 방법이나 SVG를 포함한 벡터 데이터들도 다루어 제작한 경우가 많습니다만 현재로서는 전체적으로 보았을 때 빈도가 매우 적은 부분이라 생략하였습니다.

관심있는 분들이라면 다음 링크를 살펴보시기 바랍니다. [전자책 내에서 수식의 표현]

현재까지 전자책 제작 시 사용되는 HTML, HTML5, CSS, 자바스크립트, 이미지와 음원, 동영상 처리에 대한 상세한 기법은 모두 각기 별도의 두툼한(!) 안내서들이 국내에 출시되어 있어 어렵지 않게 구해보실 수 있습니다.

여기서는 가장 많이 쓰이고 중요도가 높은 텍스트와, 이미지, 멀티미디어 정도로만 구분하여 설명했지만 실제로 진행하게 되면 난이도가 높은 도서일 경우 CSS 의 구성과 설계만으로도 상당한 시간과 에너지가 소모되기도 합니다.
단순히 모양을 꾸미고, 디자인하는 성격이라 여길 수도 있겠지만 어떻게 구성하느냐에 따라 전체적인 성능에 엄청난 차이를 가져올 수도 있기 때문입니다.

이 부분들은 위에서 언급한 각 부분별 전문 서적들을 꼭 살펴두시길 바랍니다.

이후로는 규격 준수의 필요성을 점검해보고 이제 이에 맞추어 실제 제작해보면서 보다 상세히 살펴보는 시간으로 준비해가겠습니다.

감사합니다.

--

* 본 내용은 보다 나은 표현과 이해를 위해 사전 예고없이 수정, 변경될 수 있으며 무단 복제, 불펌을 불허합니다.

 


[Audio, Video, HTML5, CSS3 Animation 등을 사용한 ePub3 전자책 사례]

[LIST]



  사업자등록번호 : 549-19-00259 | 대표전화 : 070-8264-7400 | Mail : info@diypia.com
통신판매업신고번호 : 2013-서울영등포-0171 | 150-859 서울 영등포구 신길동 3946번지 102호
Copyright ⓒ 2006 DIYPIA.com All rights reserved.