posted by 내.맘.대.로 2017. 7. 18. 14:52

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

내용 추가-20170824

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

이 글은 2017년 작성된 글로 현재 상황과 맞지 않습니다.

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

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

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

 

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가 '더' 적합합니다.

 

 

 

반응형
posted by 내.맘.대.로 2017. 6. 30. 15:19

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

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



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


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


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


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


전자책 제작 고급과정(강의 : 내맘대로 박웅영)


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


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


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


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



30만원으로 만들며 배우자(강의 : 내맘대로 박웅영)


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

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


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


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


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


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

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


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

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

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

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


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





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

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


Wink로 코딩 없이 전자책 만들기(강의 : 신정법 이새의나무 대표)


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


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



인디자인 to EPUB3.0 (강의 : 신정범 이새의나무 대표)


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


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

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

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

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






반응형
posted by 내.맘.대.로 2017. 6. 29. 09:49

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

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

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



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


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


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




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

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




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

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




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

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




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

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

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



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

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

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


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

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

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


반응형
posted by 내.맘.대.로 2017. 6. 22. 16:06

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

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


전자책 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일 기준)

유통사

 구글 Playbook

리디움 

캘리버 

 iBooks

 국내 유통사*

 지원여부

 지원

지원 

지원

 지원

 미지원

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


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

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


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


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


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






반응형
posted by 내.맘.대.로 2017. 6. 20. 12:02

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

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


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


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


font-size : 100%; = font-size : 1em;


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


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


아래 예를 볼까요?


.test_1em {

font-size : 1em;

}


.test_2em {

font-size : 2em;

}


.font_change {

font-size : 1em;

}


<div class="font_change">

<p class="test_1em">em의 의미</p>


<p class="test_2em">em의 의미</p>

</div>


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

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이라 생각해 주시고...)


이런 글자 크기의 문장을 만들고 싶어요.


<p>이런 <span class="font_2em">글자 크기</span>의 문장을 만들고 싶어요</p>


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


이런 글자 크기의 문장을 만들고 싶어요.


<p class="font_2em">이런 <span class="font_?em">글자 크기</span>의 문장을 만들고 싶어요">


이건 어떤가요? 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과 %를 지정해 볼게요.


.img_h_1em {

height : 1em;

}

.img_h_100p {

height : 100%;

}


<p><img class="img_h_1em" alt="img" src="../Images/img.png"/>의 의미(이미지 height 1em)</p>

<p><img class="img_h_100p" alt="img" src="../Images/img.png"/>의 의미(이미지 height 100%)</p>


결과



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


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


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

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


무슨 얘기냐고요?


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


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

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

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



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



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



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


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


이럴때 em을 쓸 수 있어요.



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



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


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


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

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


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

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


반응형
posted by 내.맘.대.로 2017. 6. 16. 11:33

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

이 글은 2017년 6월 16일에 작성됐습니다. 네이버 나눔글꼴이 업데이트 되면 이 글 내용은 신경쓰지 않으셔도 되요.


전자책 만들 때 네이버 나눔명조 사용하시는 분들은 아래 내용 확인하고 작업하세요.


폰트 파일에도 버전이 있습니다. 폰트도 오류가 생길 수 있고 새로운 코드가 추가될 수도 있어요. 그럼 새로운 버전을 내게 됩니다. 사용자들은 폰트 버전을 확인하는 경우가 별로 없어 '나눔명조'하면 모두 똑같다고 생각을 하지만 버전에 따라 다를 수 있습니다.


제가 갖고 있는 나눔명조 파일은 


나눔명조 v3.01

나눔명조 v3.011

모바일 나눔명조


나눔명조 v3.01과 나눔명조 v3.011은 파일명이 똑같이 NanumMyeongjo.ttf(otf), 글자 모양도 똑같아 그냥 보면 구분이 되지 않습니다. 파일 버전을 확인하려면 폰트 관리자로 열어봐야되요.



폰트 관리자로 파일을 열면 이렇게 폰트 버전을 확인할 수 있습니다.


갑자기 폰트 얘기를 왜 꺼냈냐 하면, 나눔명조 3.01버전에 문제가 있어서 이 버전으로 전자책을 만들면 모바일 뷰어에서 오류가 나기 때문이에요.


아래 이미지를 보세요. 같은 EPUB 파일에 한쪽은 나눔명조3.01, 다른 한쪽은 나눔명조3.011 버전을 적용했을 때 모바일(안드로이드) 기기에서 이렇게 보입니다. 본문에 나눔명조를 적용했는데 3.01은 굴림/고딕 계열의 시스템폰트로 대체됩니다. 


왼쪽이 나눔명조 3.01 오른쪽이 3.011 버전. 폰트 외 모든 설정은 동일함


이 문제를 확인한건 한참 됐는데 그동안은 문제라 생각하지 않았어요. 네이버 홈페이지(http://hangeul.naver.com/font)에서 최신 버전(3.011)을 배포하고 있었거든요. 1년 전인지 2년 전인지는 정확히 기억 안나지만 문제를 파악하고 새로 폰트를 내려받았을 때 수정된 버전이 올라와 있었습니다. 수정 버전을 넣으니 정상으로 보였고요. 


그런데 최근(2017년 7월 16일 기준) 다시 받아보니 문제가 있는 구버전 파일로 바뀌었습니다. 

이유는 모르겠지만 최근에 네이버에서 나눔명조 파일을 다운로드 받은 분이라면 나눔명조 파일로 전자책을 만들면 안드로이드 계열 스마트폰에서는 명조 글꼴이 반영되지 않을거예요. 아이폰 계열은 확인해 보지 못했습니다. 


PC는 나눔명조3.01이 반영되기 때문에 휴대폰에서 확인하지 않으면 이상 없다고 생각하고 유통사에 등록할 수 있습니다. 그러니 등록 전에 꼭 휴대폰에서 확인을 해보세요.



만약 나눔명조를 반영했는데 나눔명조가 아닌 시스템 기본 폰트가 반영됐다면 이 폰트를 다운받아 사용하세요. 


은바탕도 비슷한 문제가 있습니다. 은바탕은 버전이 1.02로 동일한데 2008년에 수정된 배포본이 있어요. 버전 변경은 되지 않아 나눔명조처럼 버전으로 확인은 어렵고, EPUB 파일에 넣어 스마트폰 뷰어로 확인해 봐야 문제가 있는지 알 수 있습니다.


은글꼴에 문제가 있는 분은 이 파일을 다운받아 사용하시면 정상으로 보일거예요.




이 글은 2017년 6월 16일에 작성됐습니다. 네이버 나눔글꼴이 업데이트 되면 이 글 내용은 신경쓰지 않으셔도 되요.

반응형