내맘대로의 EPUB 제작 가이드

전자책을 만들때 가장 많이 이용하는 태그 중 하나가 img입니다. img는 이미지를 삽입할 때 쓰는 태그예요.

전자책(EPUB2.0기준)에 사용할 수 있는 이미지는 4종이 있습니다. 웹브라우저에서 표시 되는 이미지면 사용해도 문제는 없지만  IDPF에서 권하는 이미지는 아래처럼 4종류예요. 가장 최신 문서인 EPUB3.0.1에서도 이 4종의 포멧은 반드시(must) 지원하도록 하고 있습니다. 

http://www.idpf.org/epub/20/spec/OPS_2.0.1_draft.htm#Section1.3.7

http://www.idpf.org/epub/301/spec/epub-publications.html#sec-core-media-types

IDPF의 EPUB 문서를 보면 must나 should가 붙은 항목이 있어요. 이 항목들도 must가 붙어있습니다. 그래서 문서를 대충 보신 분들은 이 4개 포멧만 사용할 수 있다고 오해하시더라구요. 말 그대로 '오해'입니다. 이 포멧 외에도 bmp, tiff같은 다른 이미지를 사용할 수도 있습니다.

단!!! 뷰어가 지원을 하느냐에 따라 이 4가지 포멧 이외의 다른 이미지들은 뷰어에서 표시되지 않을 수 있습니다. 

무슨 말이냐~

IDPF의 Core Media Type은 EPUB 전자책 뷰어라면 반드시(MUST) 이 미디어 타입의 포멧을 표시할 수 있어야 한다는 가이드입니다. 그래서 표준을 지키는 EPUB 전자책 뷰어는 gif, jpg, png, svg를 제대로 표시해야 합니다. 그런데 EPUB3.0.1을 발표한 이후에 엄청나게 효율적인 이미지 포멧이 개발되고, 모든 디지털 카메라나 디지이너들이 이 포멧을 사용하면 어떻게 해야할까요?

IDPF가 표준을 수정하는데 시간이 오래 걸립니다. 그럼 표준을 수정하기 전까지 기다려야 하느냐? 아닙니다. IDPF의 문서는 최소 권고사항입니다. 반드시 이 '최소' 기준은 지켜야 한다는거지요. 그래서 뷰어 개발자는 이 4가지 포멧에 추가로 최신 이미지 포멧도 보이도록 뷰어를 개발할 수 있습니다. 물론 모든 뷰어가 최신 이미지 포멧을 지원하는건 아니기 때문에 일부 뷰어에서는 안보일 수도 있겠지만, 전자책을 통해 수익을 내는 유통사라면 IDPF의 권고안 + 새로운 기능을 추가하겠지요.

위 내용은 그냥 잊으셔도 되고, 어째든 현재 공식적으로 사용 가능한 이미지 포멧은 jpg, png, gif, svg 이렇게 4종류가 있습니다.

그런데 이미지마다 특성이 조금씩 다르다는거 알고 계신가요?

이 특성을 잘 활용하면 전자책을 보다 효율적으로 제작할 수 있습니다.

1. GIF

많은 분들이 전자책을 제작할 때 jpg나 png를 사용합니다. GIF를 사용하는 분은 별로 없어요. 왜 그럴까요?

그냥 습관적으로 남들 하니까... 해서 gif를 사용하지 않는 분도 계시지만 이미지 해상도 때문에 사용하지 않을거예요. 

gif는 8비트 256컬러만 지원합니다. 기술적인 문제(기술적으로는 24비트도 가능)는 떠나서 표준이 그렇습니다. 컴퓨터에서 사용 가능한 색은 1600만 컬러입니다. 여러분들이 FFFFFF하며 쓰는 색의 조합이 1600만개라는 얘기예요. 빨간색 256단계, 초록색 256단계, 파란색 256단계를 조합한게 FFFFFF예요. 그러니 256*256*256 가지 색을 표현할 수 있는거지요.

그런데 gif는 246가지 색밖에 표현을 할 수 없습니다. 이미지의 품질이 떨어질 수 밖에 없어요. 간단한 도형이나 이모티콘 같은 단순한 이미지는 압축율이 높아(파일 크기가 작아) gif가 효율적일 수 있는데 사진같이 복잡한 이미지는 제대로 색을 표현할 수 없습니다.

그럼 gif대신 jpg만 쓰면 되는데 왜 이 포멧을 계속 사용할까요?

gif는 강력한 장점이 있습니다. 이미지인데 몇초정도는 동영상 효과를 낼 수 있다는거지요. '움짤'이라는 인터넷 용어 들어보셨나요? 움직이는 이미지를 줄인 말인데 gif는 이미지 여러장을 파일 하나에 담아 영상처럼 움직이게 만들 수 있어요. 비교적 용량도 작고 동영상 플레이어 없이 이미지 뷰어(브라우저나 전자책 뷰어)로 바로 실행이 가능해 인터넷에서 많이 쓰입니다. 전자책에도 gif로 움직이는 이미지를 넣을 수 있어요. 전구에 불이 켜졌다 꺼졌다를 반복하는 이미지가 필요하다면 gif를 써야하지요.

2. svg

svg는 벡터 이미지 포멧입니다. 벡터 이미지는 좌표로 그림을 그려서 이미지를 확대해도 깨지지 않는 장점이 있어요.

https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg

svg파일을 메모장으로 열어보면 HTML같은 코드가 보입니다. 이미지처럼 보이지 않아요. 

SVG도 gif처럼 색이 복잡한 이미지를 만들기는 어렵습니다. 하지만 확대/축소가 자유롭다는 큰 장점이 있습니다.

전자책에 '도면'같이 단순한 이미지를 넣는데 아주 디테일한 부분까지 표현을 해야되서 이미지 사이즈가 10000px이상 된다 하면 이럴 때 svg를 사용할 수 있습니다.

그리고 폰트에는 없는 글자를 넣을 때도 활용할 수 있어요. svg폰트는 진짜 폰트처럼 아무리 확대를 해도 깨지지 않기 때문에 이미지로 글자를 넣을 때 보다 깔끔해 보입니다. 다만, svg로 글자 모양을 만드는게 쉽지 않다는 단점이 있지요. 

그리고 svg는 html같은 코드로 되어 있기 때문에 애니메이션 표현이 가능합니다. IDPF에서 제공하는 EPUB3 샘플 중 Tree라는 샘플이 있는데 svg로 프랙탈을 이용해 나무를 표현했어요. 

지금 당장은 쓸 일이 없는 포멧이지만 EPUB3가 활성화 되면 아주 많이 사용하게 될 이미지 포멧입니다.

4, 5. JPG vs PNG

이 내용이 핵심인데 엄청 길게 돌아왔네요.

많은 분들이 전자책에 이미지를 넣을 때 jpg나 png 파일을 사용할거예요.

이 두포멧을 생각 없이 사용하셨다면 앞으로는 특성을 살려 사용해 보세요.

jpg와 png는 아래같은 장단점이 있습니다. 둘을 정밀하게 비교한건 인터넷에서 찾아보시고, 여기서는 전자책 제작에 필요한 장단점만 정리하겠습니다. 

jpg와 png는 작은 아이콘부터 고품질 사진까지 다양한 이미지를 표현할 수 있습니다. 둘 다 이미지 품질이 좋지요.

그런데 jpg는 용량이 작습니다. 비슷한 품질의 png파일과 비교하면 5~10배정도 용량이 더 작습니다. 3Mb짜리 png 이미지를 비슷한 품질의 jpg로 만든다면 0.3Mb까지 용량을 줄일 수 있다는 의미지요.

png 3Mb짜리 이미지가 100장 들어간 전자책이라면 용량이 300Mb를 넘게 되는데 이미지를 jpg로 변경하면 최소 30Mb까지 줄어들 수 있습니다. 물론 이론상의 수치라 좀 더 크겠지만, 50Mb ~ 100Mb까지는 줄일 수 있지요.

용량이 이렇게 차이나면 PNG보다 JPG가 좋은거 아닌가?

JPG는 PNG와 비교했을 때 두가지 단점이 있어요.

첫째는 '손실 압축'이라는 거예요. 기술적인 설명 빼고, 이미지 용량을 줄일 수록 이미지 품질이 심하게 떨어진다는 정도로 이해하면 되요. 그래서 이미지 품질이 정말 중요하고, 전자책을 보관용으로 만든다면 JPG보다는 PNG가 좋습니다.

예를 들면, 제가 전자책을 제작할 때 2개 파일을 준비하는 경우가 있어요. 여행서 처럼 고품질 이미지가 많은 책은 이미지 원본을 그대로 담은 보관용 전자책과 이미지 용량을 줄인 유통용 전자책을 만들어 제공합니다.

이미지 원본을 그대로 담으면 EPUB파일이 1Gb를 넘기도 해요. 이를 유통용으로 압축하면 100Mb 밑으로 용량이 줄어듭니다. 왜 원본 파일을 보관해야 하는지는 설명 안해도 되겠지요? 이럴 때 JPG보다 PNG파일이 좋습니다. PNG는 무손실 파일이기 때문에 나중에 이미지를 다시 편집해야 할 때 JPG보다 좋아요.

두번째는 배경색입니다.

JPG는 배경을 없앨 수 없어요. 배경색이 필요 없으면 보통 흰색으로 배경을 두지요.  바탕화면이 흰색이면 문제가 없는데 바탕화면 색이 바뀌면 문제가 생기지요. 

바탕화면 색이 바뀔 일이 있을까요?

당연히 있지요. 뷰어에서 사용자가 바탕색을 마음대로 변경할 수 있습니다.

아래 이미지를 보세요..

같은 이미지인데 왼쪽은 jpg이고 오른쪽은 배경색을 투명으로 한 png입니다. 이미지를 편집하면서 여백도 없애 png 이미지가 좀 더 커보이지만 둘은 같은 이미지예요. png 파일은 

바탕색이 흰색일때는 아무 문제 없지만 바탕색을 넣는 순간 png의 투명 배경과 jpg의 차이를 확인할 수 있습니다. 

* 이 이미지는 '강같은평화' 출판사의 '아빠가 들려주는 성경태교동화' 목차 부분에서 발췌했습니다.

투명배경의 쓰임은 아주 다양합니다. 위에처럼 본문에 배경색이 들어갈 때 이지의 배경을 맞추지 않아도 되고, 사용자가 뷰어 배경색을 바꿔도 자연스럽게 보입니다. 

이미지로 글자를 넣는 방법을 설명드린 적이 있는데(http://www.epubguide.net/231) 이때도 이미지 글자의 배경을 없애면 진짜 글자와 구분이 가지 않을 정도로 자연스러워집니다.

JPG와 PNG는 각각 장단점이 있습니다.

JPG는 용량이 작아 사진이 많이 들어간 전자책이라면 JPG를 사용하는게 좋아요.

PNG는 손실이 없어 보관용 전자책을 만들 때 좋고 배경색을 없앨 수 있어 책에 배경색이 들어가거나 독자가 배경을 바꿨을 때 자연스러워 보입니다.

전자책 용량을 줄이거나 배경 편집시 자연스러운 이미지 삽입을 원할 때 이 두가지 특성을 잘 활용하면 도움이 될거예요.

내용 추가-20170824

네이버 나눔명조 OTF파일은 안드로이드 계열에서 일부 특수문자와 한자가 표기되지 않는 문제를 확인했습니다. 문제가 수정되기 전까지 네이버 나눔명조를 쓸 때는 OTF가 아닌 TTF파일 사용을 권해드립니다.
네이버 홈페이지에서 배포하는 최신 버전에서 문제가 해결되었습니다.

전자책을 제작할 때 폰트 파일을 포함시킵니다.

특정 폰트를 사용하면 반드시 폰트 파일이 포함되야하지요.

그런데 폰트 파일도 여러 종류가 있습니다. 

ttf, otf, woff, bitmap.... 

가장 많이 사용하는 폰트는 ttf일거예요.

윈도우에서 사용하는 폰트고, 국내 무료 폰트는 ttf로 제공하는 곳이 많습니다.

하지만 IDPF에서 권하는 폰트는 OTF예요.

물론 의무사항은 아닙니다.(It is advisable for a Reading System to support the OpenType font format, but this is not a conformance requirement; a reading system may support no embedded font formats at all.)

IDPF에서는 OTF 폰트를 권하고 있지만 최근까지 뷰어가 OTF를 제대로 지원하지 못했습니다. 뷰어 문제는 아니었어요. 구 버전 안드로이드 중 일부에서 OTF를 넣으면 표현이 되지 않는 문제가 있었습니다. 그래서 저도 OTF보다는 TTF를 주로 사용했지요.

그런데 EPUB3를 제작해 보신 분들은 TTF 폰트 사용시 info메시지가 표시되는걸 경험하셨을 거예요.

오류는 아닙니다.

TTF 파일을 사용해도 아무 문제가 없어요.

그래도 저런 메시지가 뜨면 화장실 갔다 뒷처리 안한 것 처럼 개운하지 못합니다.

EPUB2에서는 저런 메시지가 표시되지 않아요. 그래도 IDPF 표준문서를 보면 폰트는 OTF를 포함시켜야 한다고 되어 있습니다.(At least one file in OpenType format should always be included in the list.)

* http://www.idpf.org/epub/20/spec/OPS_2.0.1_draft.htm#Section3.4

EPUB3.01문서에는 이를 좀 더 강하게 요구하고 있습니다. 

Core Media Type에 사용할 수 있는 폰트를 OTF, WOFF로 명시해 놨습니다.

* EPUB3.01 Core Media Type http://www.idpf.org/epub/301/spec/epub-publications.html#sec-core-media-types

EPUB2때처럼 강제사항은 아니지만(but this is not a conformance requirement;) EPUB3에서는 적합성 검사를 할 때 표준 폰트가 아니라는 메시지를 보여주고 있습니다. IDPF의 다음 정책을 예상해 볼 수 있을거예요.

다행히 전자책을 볼 수 있는 최신 스마트기기에서는 TTF, OTF, WOFF 폰트를 모두 지원합니다. 유통사마다 차이는 있지만 TTF와 OTF는 지원이 됩니다.

IDPF에서 EPUB3.01 Core Media Type에 TTF를 제외시키고 OTF와 WOFF만 포함시켰다면 다음 표준에서는 OTF와 WOFF 사용을 조금 더 강하게 강제할 수 있습니다. 그렇게 될지는 결정이 나기 전까지 아무도 모르지만, 지금까지의 방향을 놓고 보면 그럴 가능성이 높다고 봐야겠지요.

물론 TTF를 사용할 수 없게 하지는 않을거예요. EPUB2.0문서에서도, 3.0 문서에서도 뷰어(Reading system)는 가능한 다양한 폰트를 지원하도록 하고 있습니다. 다만, OTF폰트는 반드시 하나를 포함시켜야 한다(At least one file in OpenType format should always be included in the list.)는 정책을 강하게 가져갈 수 있다는 의미예요.

오래 전에 테스트 했을 때 일부 OS에서 OTF 폰트에 문제가 있어 TTF를 주로 썼는데 앞으로는 TTF보다는 OTF를 활용해야 겠습니다. 

TTF를 쓴다고 문제가 되냐?

전혀 문제 될거 없습니다. 앞으로도 문제가 될 가능성은 아주 낮아요.

TTF를 쓰든 OTF를 쓰든 독자들은 아무 생각 없습니다. 독자는 책만 잘 보이면 불만이 없을거예요.

그래도 전자책을 제작하는 사람이라면 TTF와 OTF의 차이는 알고 있어야 하지 않을까요?

오래 전에 OTF는 문제가 있으니 TTF를 권장한다는 글을 쓴 적이 있는데(http://epubguide.net/114), 그 내용을 바로잡기 위해 이 글을 작성합니다. 그때는 TTF가 더 나은 선택이었지만, 지금은 OTF가 '더' 적합합니다.

전자출판협회, 전자출판협동조합에서 '한국 디지털퍼블리싱 학교'를 열었습니다.

책 쓰기, 전자출판 기획, 해외 출판, 콘텐츠 기획, 전자책 제작(초급부터 고급까지) 등 전자출판에 필요한 다양한 간의가 마련되어 있습니다.

전자책 제작에 관심있는 분들은 아래 강의를 추천드립니다. 초급, 중고급 과정이 있으니 자신의 수준에 맞는 과정을 선택하세요. 

앞에 두 과정은 중/고급, 뒤에 두 과정은 초급자께 추천을 드립니다.

* 강의 제목을 클릭하시면 자세한 내용을 확인할 수 있습니다.

시중에 판매되고 있는 다양한 종이책을 샘플로 해서 종이책 스타일을 전자책으로 편집하는 방법을 배울 수 있습니다. HTML과 CSS를 통해 직접 편집을 하는 과정으로 WYSIWYG 방식의 편집에서 한단계 업그레이드 하고 싶은 분들께 추천드립니다.

중급 이상만 신청해주세요^^

초보자는 내용을 따라가기 어렵습니다. 중급자를 대상으로 하기 때문에 초급자가 신청을 해서 따라오지 못하더라도 중급자 수준으로 수업을 진행할 수 밖에 없습니다. 윙크, Sigil, 펍트리 등으로 전자책을 제작할 수 있는 분, 하지만 원하는 스타일을 만드는데 어려움을 느끼는 분들께 권해드립니다.

HTML과 CSS에 대한 기본 개념, 전자책 편집에 많이 사용되는 CSS 중고급 편집 스킬, 정규표현식, EPUB Check를 통한 오류 수정 등으로 수업을 진행합니다.

전자책 제작비 30만원으로 직접 전자책을 만들며 제작 방법을 배울 수 있는 강의입니다.

인디자인(HWP, 쿽 등) 파일을 EPUB으로 처음부터 끝까지 변환을 합니다.

수업시간에 정해놓은 콘텐츠로 진행하지 않고, 수강자가 EPUB으로 만들고 싶은 콘텐츠로 수업을 진행합니다. 그래서 수업이 끝나면 수강자별로 자신의 EPUB을 한권씩 만들 수 있습니다. EPUB제작 외주를 줘도 30만원 이상 제작비가 드는데 30만원으로 수업을 들으면 EPUB 제작 스킬도 배우고, 전문 유통사에서 만든 수준의 전자책 파일을 만들 수 있어 1석 2조~

EPUB 파일을 만들어 본 경험이 있는 분들만 신청해 주세요.

제작 스킬을 업그레이드 하는 수업입니다. 초보적인 편집툴 사용법을 자세히 설명하지 않습니다. 그래서 제작 경험이 없는 분들은 수업을 따라오기 어려우니 제작 경험이 있는 분들이 신청해 주세요.

인디자인에서 EPUB 파일을 내보내면 불필요한 태그와 스타일이 가득해 재편집이 필요합니다. 

인디자인에서 뽑아낸 EPUB파일로 재편집을 하는데 시간이 오래 결려 어려움을 겪으신 분들에게 추천을 드립니다. 

정규표현식으로 불필요한 스타일을 몇분만에 정리하는 방법,

인디자인에서 자동으로 만들었지만 필요없는 스타일을 찾아내 수정하는 방법,

영문, 한자표기 등 수백개씩 들어있는 반복작업을 몇분만에 끝내는 방법,

그리고 표현이 까다로운 스타일을 CSS로 편집하는 방법 등

전자책 제작 시간을 줄이고, 편집자가 원하는 스타일을 전자책에 적용하는 방법을 알려드립니다.

아직 제작 경험이 없는 분들께는 아래 수업을 추천드립니다.

출판사를 운영하며 실무 경험이 많은 이새의나무 신정범 대표님의 직강입니다.

전자책을 만든 경험이 없는 분들께 추천드립니다.

HTML,CSS를 몰라도 전자책을 만들 수 있습니다. 전자책을 제작해 본 적은 없지만 직접 제작해 보고 싶은 분들께 추천해 드립니다. Wink를 개발하신 이새의나무 대표님이 직접 강의를 진행하시고 현장에서 Wink를 저렴한 가격으로 구매하실 수도 있어요^^

인디자인으로 종이책과 전자책을 한번에 만들고 싶은 분들께 추천드립니다.

인디자인 디자이너인데 인디자인으로 편집한 책을 EPUB으로 저장하면 엉망이 되지요?

인디자인으로 전자책을 만들려면 편집부터 전자책을 고려해야합니다. 

이 수업은 인디자인으로 종이책과 전자책을 한번에 만드는 방법을 소개합니다. 

인디자인으로 종이책과 전자책 출판을 하고싶은 초급 디자이너, 출판 기획자들께 도움이 될만한 수업입니다. 

전자책 보는데 특정 오류가 발생한다는 제보(?)가 들어와 확인을 해봤는데 클리너/백신 프로그램이 문제를 일으키네요.

테스트를 해본건 V3인데 다른 클리너/백신 프로그램도 문제가 될 수 있습니다. 클리너 사용시 전자책 앱은 목록에서 제외시켜 주세요.

테스트를 V3로 했을 뿐, V3의 문제는 아닌 것 같습니다. 프로그램 작동 원리를 생각하면 다른 클리너도 같은 증상이 나타날 수 있습니다. 

클리너로 불필요한 파일을 정리할 때 전자책 앱을 체크하면 다운로드 받은 파일이 함께 삭제되는 현상이 있습니다. 전자책 파일이 있는 폴더에 들어가 보니 깔끔하게 모든 파일이 삭제됐네요. 폴더 내 항목이 모두 0으로 되어 있고, 폴더로 들어가도 파일은 남아있지 않습니다.

유통사별로 삭제 후 다시 다운로드 받으면 책을 볼 수 있지만, 데이터 동기화 하지 않았다면 형광펜, 메모 등 책을 보면서 남긴 흔적은 전부 사라집니다. 유통사에 연락해도 복구 불가능하기 때문에 중요한 데이터가 있다면 절대로 클리너를 사용해 전자책 앱을 청소하지 마세요.

전자책 앱에서 책을 선택하면 리디북스에서는 이런 오류 메시지가 보입니다. 

삭제 후 다시 다운로드 받으면 책을 볼 수 있습니다.

알라딘/예스24 앱에서는 이런 메시지가 보입니다.

삭제 후 다시 다운로드 받으면 책을 볼 수 있습니다.

교보 뷰어에서는 이런 메시지가 보입니다. 

파일 삭제 후 다운로드 받으면 다시 볼 수 있습니다.

구매한 책이 아닌 개인 소장 도서도 모두 삭제됩니다. 

폴더는 남아있어서 이렇게 표시는 되지만 표지가 보이지 않습니다.

교보, 알라딘, 리디 등 유통사 모두 동일합니다.

데이터 삭제됐다고 유통사에 항의하는 분들이 계신 것 같은데,

제 생각엔 유통사 문제가 아닙니다. 아마존, 코보 등 외국 앱도 모두 동일한 결과입니다.

항의 하려면 너무 강력해서 필요한 파일까지 삭제하는 클리너 제작 업체에 항의를 하시고,

그보다는 자신이 무슨 일을 하는지 확실히 알고 앱을 사용하는게 맞을 것 같아요.

클리너를 실행시켜 데이터를 삭제하는건 전자책 유통사도, 클리너를 만든 업체도 아닌

클리너 앱을 사용하는 사람이니까요.

폰트 저작권 관련 내용을 살펴보다가 일부 유료 폰트는 임베디드 할 때 암호화(난독)를 해야한다는걸 알게 됐습니다. (요즘 폰트 유통사 매출이 좋지 않은가봐요. 낚시 공문 돌리네요ㅜ.ㅜ 종이책 표지를 전자책에 그대로 사용해도 딴지 걸어요. 저작권법 상에 문제는 없지만, 폰트 업체들의 사용 계약을 들이밀며... 돈 많은 출판사에서 '불공정 약관'으로 맞고소 안해주려나...)

전자책 DRM은 업체마다 조금씩 다르지만 대부분 이런 2단계로 처리합니다.

1. EPUB 파일 암호화

   - EPUB 파일은 zip 형태의 압축파일입니다. 

   - 전자책을 보려면 EPUB 파일을 다운로드 하는데 이 파일은 sdcard 등에 저장되기 때문에 복사가 쉬워요.

   - 하지만 EPUB 파일 자체에 암호를 걸어 EPUB 파일을 빼내도 다른 뷰어에서 볼 수 없습니다. 

2. 압축 해제된 파일의 개별 암호화

   - 다운 받은 EPUB 파일을 뷰어에서 볼 수 있도록 압축을 풀어놓습니다. 

   - 주요 콘텐츠(본문 xhtml 파일, 이미지 등)는 암호를 걸어 압축이 풀려있어도 볼 수 없습니다.

   - 메타데이터나 스타일 등 콘텐츠 내용이 담겨있지 않은 파일은 암호가 걸리지 않습니다.

   - 폰트 파일 역시 암호화가 되어 있지 않습니다.

       * 유통사마다 암호화 되는 파일이 다름

둘 중 한가지 방식이 아니고 1, 2단계가 모두 적용이 되는거예요. 

EPUB파일 자체를 내려받았을 경우는 문제가 되지 않습니다. 다만, 전자책을 보려면 압축이 풀려야 하는데 이때 폰트가 암호화되지 않아요. 유통사 DRM에서 폰트를 암호화 시키지 않기 때문에 전자책에 사용 가능한 라이선스를 구입해도 일부 폰트는 사용을 할 수 없습니다.

IDPF에서는 EPUB 파일에 폰트를 추가할 때 암호화를 시키도록 했기 때문에 유통사가 DRM으로 암호화 하지 않는다고 문제되지는 않아요. 그리고 DRM에서 폰트를 암호화 시키면 EPUB 파일에 암호화 된 폰트가 들어갔을 때 이중으로 암호가 걸려 다른 문제가 생길 수 있지요. 그래서 IDPF에서도 EPUB파일을 제작할 때 폰트를 암호화 하도록 표준을 제안했습니다.

폰트 암호화는 Sigil에서도 지원을 해요. 아주 간단히 클릭 몇번으로 암호화가 가능합니다. 

그런데 문제는 폰트 암호화를 뷰어가 지원하느냐예요.

아쉽게도 국내 유통사 중에 IDPF의 암호화 폰트를 지원하는 뷰어가 없네요.

뷰어가 지원을 안해도 콘텐츠는 볼 수 있어요. 다만 암호화된 폰트가 지원되지 않기 때문에 시스템 기본 폰트(혹은 뷰어 기본 폰트)로 책이 보입니다.

뷰어별 폰트 암호화 지원 여부(2017년 6월 22일 기준)

* 국내 유통사 : 교보문고, 리디북스, 예스24, 알라딘

국내 전자책은 대부분 무료 폰트를 사용하고 있습니다. 

폰트 이용 범위 때문에 본문에는 네이버 나눔체, 코펍체, 은글꼴 등을 사용하는데 이제 표지 파일 같은 이미지에도 라이선스를 요구하는 추세입니다. 그럼 종이책과 다른 폰트로 전자책 표지를 만들거나 전자책까지 이용 가능한 라이선스를 구입해야겠지요.

전자책 라이선스까지 구입을 했다면 본문에 유료 폰트를 써도 됩니다. 이때 폰트 암호화가 필요한지 확인을 해야하고요.

아직은 국내 뷰어에서 폰트 암호화를 지원하지 않기 때문에 임베드시 암호화를 요구하는 폰트는 전자책에 사용하지 않는게 좋아요. 

낚시(?)질에 당하는 일 없도록 폰트 구입시 라이선스 사용 범위와 조건을 잘 확인해서 사용하세요~

전자책 편집을 하다보면 em, px, %, pt, cm 등 다양한 단위가 나옵니다. 그 중에 가장 많이 나오는 단위가 em과 px에요.

px는 큰 이슈가 없습니다. 절대적인 크기이기 때문에 변하지 않습니다. 뷰어에 따라 글자크기나 일부 설정이 변경될 수 있고, 해상도에 따라 같은 화면크기(예를 들면 5")에서 1px의 크기가 다를 수는 있지만, 어째든 1px이라는건 변함 없지요.

그런데 em은 가변적인 크기입니다. 그기가 마음대로 변해요. 이런 가변크기는 %도 있어요. 글자 크기를 얘기할 때 100%를 1em이라고 설명하곤 합니다. 

강의를 듣는 분들이 대부분 초보라 %와 em의 차이를 설명하면 더 혼란을 느끼실 것 같아 이렇게 얘기하는데 엄밀히 두 단위는 차이가 있습니다. 

1em은 '시스템 기본 글자 크기'라고 설명할 때도 있습니다. 하지만 이것도 정확한 1em의 의미는 아니에요.

아래 예를 볼까요?

두 문단의 글자 크기는 어떻게 보일까요?

test_1em의 글자 크기는 1em입니다.

test_2em의 글자 크기는 2em이고요.

그런데 div의 font_change의 글자 크기는 1em이에요.

1em이 시스템의 기본 글자 크기라면 두 문단의 글자 크기가 같아야되요.

그런데 text_2em의 글자 크기는 2em으로 나옵니다. 아래 이미지 1번이 test_1em, 2번이 test_2em이에요.

1em의 정확한 의미는 '현재의 글자 크기'예요. 

이러면 또 설명이 어려워집니다.

test_1em 속성(font-size : 1em;)이 지정된 문단에서 1em은 위 이미지 1번 크기예요. test_2em(font-size 2em;)이 지정된 문단에서 1em은 2번 크기예요.

한번에 이해를 하신 분도 계시겠지만 좀 헷갈릴 수 있어요. test_2em은 분명 2em으로 글자 크기가 지정돼 있는데 1em이 2em 크기라는 얘기잖아요.

다시 예를 들어볼게요.(font_?em이 font-size : ?em이라 생각해 주시고...)

이건 이해가 쉽게 되지요? 기본 글자보다 큰 글씨니까 2em을 주면 되잖아요. 

이건 어떤가요? font_?em 속성의 글자 크기는 몇 em일까요?(글자 크기가 1/2라고 가정하고)

1em이라고 생각한 분은 틀렸습니다.

0.5em이라고 생각한 분이 맞아요.

본문 글자 크기가 2em인데, 글자 크기를 1/2로 줄이려면 1em이어야 하지 않나요? 그런데 1/4인 0.5em이 되야한다니요?

1em의 글자 크기는 '현재 글자 크기'입니다. 그러니 <p class="font_2em">으로 감싸인 부분의 글자 크기가 '현재의 글자 크기'가 됩니다. 따라서 <span class="1em">은 <p class="font_2em">과 같은 크기인거예요.

설명이 무지 복잡하고 난해하지요? ㅜ.ㅜ 

설명 능력이 부족해 이보다 쉽게는 설명을 못하겠네요. 직접 스타일을 만들어 테스트해 보면 쉽게 이해하실거예요.

em은 %와 다릅니다.

em은 글자 크기를 기준으로 해요.

%는 단위가 적용된 개체를 기준으로 하고요.

따라서 글자 크기 1em은 100%와 같습니다. 1em은 글자크기이고, 글자에 적용된 100%는 글자 크기를 기준으로 하기 때문이에요.

그런데 이미지에 적용되면 둘은 큰 차이를 보입니다. 

이 이미지는 가로 46px, 세로 28픽셀 이미지예요. 이 이미지에 em과 %를 지정해 볼게요.

이미지 height : 100%;와 이미지 height : 1em;일때 두 이미지의 결과를 보세요.

이걸 보고 '아!' 하고 무릎을 탁 치는 분이 계셨으면 좋겠어요.

느낌이 팍! 하고 오지 않나요?

저는 이걸 깨닫고 그동안 만들었던 많은 책을 떠올리며 '전부 수정했으면 좋겠다'는 생각을 했거든요.

무슨 얘기냐고요?

폰트에 없는 특수 한자, 특수 문자, 이미지로 된 글머리 기호...

예를 들어 훈민정음 언해본을 EPUB으로 만든다고 생각해 보세요.

언해본을 위해 폰트를 넣을 수 없는 상황이고.

텍스트로 넣으면 이렇게 보입니다.

나눔 옛한글 글꼴이 배포되기 전에는 훈민정음 언해본을 제대로 표현할 수 있는 폰트가 많지 않았어요. 그리고 유료였지요. 전자책 만들려고 비싼 유료 폰트를 사기 힘든 영세 출판사에서는 글자를 이미지로 만들어 넣을 수 밖에 없었습니다. 그럼 이런 문제가 생겨요.

글자 크기를 키우면 이미지로 된 글자가 너무 작아지고,

글자 크기를 줄이면 이미지로 된 글자만 너무 켜지고

좀 과장이 섞여있지만 경험해 보신 분들은 100% 공감하실거예요.

이럴때 em을 쓸 수 있어요.

글자 크기에 따라 이미지가 커졌다가

글자 크기가 작아지면 이미지도 작아짐

sample.epub 파일을 첨부하니 참고하세요.

1em은 '현재 글자 크기'의 단위입니다.

현재 문단의 글자가 3em이라면, 이 문단 안에 스타일을 넣을 때는 3em이 1em의 글자크기라 생각하고 스타일을 적용해야되요. 설명이 깔끔하지 못하지만, 연습해보시면 이해 할 수 있을거예요.

그리고 em은 이미지에도 사용할 수 있습니다.

이미지와 글자 크기를 딱 맞춰야 할 때 em을 쓰면 글자 크기가 변경되도 이미지가 그에 맞춰 변경되요. 대신 글자를 이미지로 넣었다면 이미지 크기는 기본 글자 크기의 4배 정도로 크게 넣어주세요. 그래야 독자들이 글자 크기를 키워도 이미지가 깨지지 않아요. 기본 글자 크기에 이미지를 딱 맞추면 글자를 키웠을 때 이미지 글자가 깨져보입니다.