posted by 내.맘.대.로 2016. 8. 26. 10:04

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

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

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

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

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

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.


이번 내용은 Tip이라기 보다는 정보에 가깝습니다.


'습관이란게 무서운 거더군~~'

어느 노래 가사인데 이 가사에 딱 맞는 상황을 어제 경험했어요.

어떤 분이 올린 전자책 편집하면서 진하게, 기울임을 적용해도 Sigil에서는 반영이 안된다는 글을 봤습니다. 저는 아무 생각 없이 '원래 안되요~'라고 쓰려다가 혹시나 하는 마음에 테스트를 해봤어요.


전자책이 확산되던 시기에 사람들이 주로 사용한 기기는 안드로이드 4.0 이전 버전, IOS 4.x대 이전 버전이었습니다. 아이폰 3GS와 갤럭시 S, 갤럭시 S2를 많이 썼지요. 이 버전에 포함된 웹킷에서는 폰트의 진하게, 기울임이 제대로 반영되지 않았습니다. 웹킷이란 브라우저 엔진이에요. 크롬이나 사파리 브라우저로 웹페이지를 열때 웹킷이라는 엔진이 HTML과 CSS를 분석해서 보여줍니다. 전자책 뷰어도 이 웹킷을 사용해요.


어째든, 전자책을 만들 때 <i></i> 태그와 <b></b> 태그, 그리고 CSS의 font-weight, font-style 속성이 반영되지 않았습니다. 그래서 코펍이나 네이버 나눔글꼴은 light, medium, bold, extrabold 처럼 같은 폰트여도 여러 두께를 만들어 배포를 했습니다. 전자책을 만들면서 진한 글씨 처리가 필요하면 bold 폰트와 medium 폰트 2개를 사용해야 했습니다.


그리고 지금까지 버릇처럼 진한 글씨가 필요할 때는 bold 폰트를 포함시켰습니다.

폰트 하나 포함시키는게 뭐가 어려운 일이라고... 하고 생각하실 수 있지만, 소설은 텍스트와 표지만 들어가면 용량이 1mb도 되지 않습니다. 여기에 폰트가 하나 들어가면 5mb가 되요. 배보다 배꼽이 더 커지는거예요. 그런데 폰트를 하나 더 추가한다면? 1mb밖에 안되는 본문에 폰트 용량만 10mb가 넘어갈 수 있습니다. 그래서 진하게, 기울임이 처리되는지가 중요합니다.


그런데... 이게 언제부터인지 바뀌었네요.

이제 뷰어에서(정확히는 웹킷이) font-weight을 처리해 줍니다.

진한 글씨가 필요하면 bold 폰트를 넣지 않고 <b> </b> 태그나 font-weight : bold; 스타일을 적용해 주세요.



**중요**

모든 뷰어가 진하게, 기울임 스타일을 반영하지는 않습니다. 제가 갖고있는 기기늕 2종 뿐이어서 안드로이드 6.0버전에서는 교보, 리디, 알라딘, 예스24, 네이버 뷰어에서 스타일이 반영되는 걸 확인했습니다. 안드로이드 4.0.4버전에서는 교보, 리디 뷰어에서 스타일이 반영되지 않았습니다. 2곳만 테스트를 했는데 다른 뷰어도 동일할 거예요.


안드로이드 4.1에서 진하게, 기울임이 반영되는걸 확인했지만 100% 보장은 할 수 없습니다. 안드로이드 4.x 버전에서 스타일이 적용되지 않을 가능성이 높습니다.


https://developer.android.com/about/dashboards/index.html


이건 안드로이드 버전별 점유율입니다. 여전히 4.x 버전 비중이 높습니다.


결론!! 전자책 만들 때 아주 중요한 내용이어서 기울임이나 진하게 스타일을 적용했다면 별도의 bold, italic 폰트를 사용하세요. '낮은 버전 사용자들은 어쩔 수 없지'라고 결정을 하셨다면 용량 많이 차지하는 폰트를 추가할 필요 없이 태그와 스타일로 기울임, 진하게 편집을 하셔도 됩니다.




- 태그와 스타일로 기울임, 진하게 처리(교보, 리디 뷰어)-




반응형
posted by 내.맘.대.로 2016. 8. 17. 16:18

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

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

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

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

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

전자책을 만들 때 책에 사용하는 이미지, 폰트 등의 파일 저작권때문에 고생하신 분들이 계실거예요. 종이책을 만들면서 돈 주고 샀으니 당연히 전자책에도 쓸 수 있다고 생각했다가 변호사 사무실에서 전화를 받고 울며 겨자 먹기로 수백만원을 내고 몇십만원 짜리 폰트 CD를 구입해 본 경험. 누구에게나 일어날 수 있는 일입니다.


폰트는 '인쇄'를 할 때와 전자책 파일에 포함(임베드)시킬 때 서로 다른 저작권의 적용을 받습니다. 종이책 만든다고 폰트를 구입했다면 이건 인쇄용으로만 이용이 가능해요. 전자책은 전자책 파일(EPUB)안에 포함시켜 재배포해야 하기 때문에 전자책을 만들 목적이라면 '임베디드(embedded)'와 '재배포(redistribute)' 가능한 라이선스인지 확인을 해야합니다. 그런데 이렇게 하려면 가격이 아주 높게 올라가요. 그래서 많은 분들이 무료 폰트를 찾습니다.


아쉽게도 한글 폰트는 무료로 사용할 수 있는게 많지 않아요. 하지만 영문 폰트라면 구글 폰트 프로젝트를 통해 저작권 걱정 없이 자유롭게 이용할 수 있습니다. 



폰트 종류도 다양하고, 무엇보다 OFL(Open Font License)여서 전자책에 아무 걱정 없이 포함시킬 수 있습니다.


OFL 라이선스에 대해서는 이곳을 참고하세요.


http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web


PREAMBLE

The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves.
The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.



그런데 구글 폰트를 사용하려고 하면 몇가지 문제가 있습니다.


첫째. 다운로드 하는 버튼이 없어요.

둘째. 다운로드를 했는데 woff라는 생소한 확장자예요.


이 두가지 문제로 구글 폰트를 활용하지 못한 분들이라면 이 글을 끝까지 읽어보세요. 여기서 두번째 문제인 woff 폰트를 익숙한 트루타입 폰트(ttf)로 바꾸는 부분은 OFL 라이선스여서 가능합니다. OFL 라이선스는 무료 사용 뿐 아니라 수정과 재배포까지 허용을 하고 있거든요.



1. 다운로드 하는 버튼이 없어요.


구글 폰트 홈페이지에서 원하는 폰트를 선택하세요.

설명을 위해 Lakki reddy라는 폰트를 사용하겠습니다.






폰트를 선택하면 폰트 모양과 라이선스를 확인할 수 있습니다. 무료이긴 하지만, 돌다리도 두드려 보고 건너는게 좋겠지요? 오른쪽 아래에 있는 License가 Open Font License인지 확인하세요. 확인을 하셨다면 폰트를 선택합니다. 폰트 선택은 오른쪽 윗부분에 있어요.



[SELECT THIS FONT]를 누르면 화면 아래쪽에 [1 family selected]라는 조그만 대화창이 올라옵니다. 이 대화창을 눌러주세요.



대화창을 누르면 폰트를 사용할 수 있는 링크가 나옵니다. 여기서 빨간 상자 부분의 링크 주소만 복사를 하세요. 그리고 웹브라우저 주소창에 입력하고 이동을 합니다. 




이제 폰트 파일의 진짜 URL이 나왔습니다. 


@font-face {
  font-family: 'Lakki Reddy';
  font-style: normal;
  font-weight: 400;
  src: local('Lakki Reddy'), local('LakkiReddy'), url(https://fonts.gstatic.com/s/lakkireddy/v3/rbI79lEFsIu8-QPtske7f6iJkhUzgdet00p1ptA7pDw.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+200C-200D, U+25CC;
}

저 URL을 복사해서 브라우저 주소창에 넣고 엔터를 치면 폰트 파일이 다운로드 됩니다.


다운로드 한 폰트 파일명은 woff2라는 확장자가 붙고, 윈도우에서는 폰트를 확인할 수 없습니다. 사용할 수도 없고요. EPUB 파일에 넣어도 제대로 표현이 되지 않습니다.




2. 다운로드를 했는데 woff라는 생소한 확장자예요.


woff는 웹 오픈 폰트(Web Open Font Format), 줄여서 웹폰트라고도 합니다. 폰트는 윈도우에서 많이 사용하는 트루타입(ttf) 인쇄용으로 많이 쓰는 오픈타입(OTF) 등 다양한 포멧이 있는데 EPUB에는 ttf 사용을 권합니다. EPUB Core Media types에 otf와 woff도 포함되어 있지만 뷰어에서 표현이 안되는 경우가 많습니다.


구글 폰트 프로젝트에서 다운받은 파일은 woff니 ttf로 변환을 해야합니다. 인터넷을 검색해 보면 간단히 woff를 ttf로 변환해 주는 사이트를 찾을 수 있습니다.


구글에 'woff2 to ttf'를 키워드로 검색해서 나온 첫번째 링크를 클릭해 봤습니다.

어떤 사이트로 들어가도 변환만 잘 되면 상관 없습니다. 



변환해서 다운로드를 하면.... 앗! 폰트가 하라는 대로 그대로 해도 폰트가 적용되지 않았습니다. 

첫번째에 실패를 해서 다행일수도... ^^;;


폰트 파일 진짜 URL을 다시 살펴보니 이렇게 되어 있네요.


/* telugu */
@font-face {
  font-family: 'Lakki Reddy';
  font-style: normal;
  font-weight: 400;
  src: local('Lakki Reddy'), local('LakkiReddy'), url(https://fonts.gstatic.com/s/lakkireddy/v3/rbI79lEFsIu8-QPtske7f6iJkhUzgdet00p1ptA7pDw.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+200C-200D, U+25CC;
}
/* latin */
@font-face {
  font-family: 'Lakki Reddy';
  font-style: normal;
  font-weight: 400;
  src: local('Lakki Reddy'), local('LakkiReddy'), url(https://fonts.gstatic.com/s/lakkireddy/v3/rbI79lEFsIu8-QPtske7f44P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

영어 알파벳이 포함된 라틴 폰트는 위쪽이 아니라 아래쪽 링크였습니다. 링크가 위에처럼 여러개인 경우 각각의 폰트가 어떤 글자를 포함하는지 유니코드 범위로 알려줍니다. 그리고 /*Latin*/처럼 설명도 포함하고 있어요. 유니코드 범위로 확인할 수도 있지만 잘 모르겠으면 둘 다 다운받아 변환해 보시면 되요. 


이제 새로 다운받은 파일을 넣고 ttf로 변환해 EPUB에 추가합니다.



전자책 만들 때 무료로 사용할 수 있는 멋진 영문폰트가 필요하다면 구글 폰트 프로젝트를 방문해보세요 ^^

반응형
posted by 내.맘.대.로 2016. 8. 10. 17:38

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

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

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

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

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

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.


책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.



    



배경색은 설명하지 않고, 배경이미지를 설명하는 이유가 있습니다. 배경색이야, 원하는 색을 지정해 주면 끝나는데 배경이미지는 조금 더 복잡한 설정이 들어갈 수 있거든요.


배경을 넣는 가장 기본이 되는 코드입니다. 이렇게 하면 장(챕터) 전체에 배경이미지를 넣어 줄 수 있습니다. 


* 사용한 배경 이미지

이 작은 타일 하나로 페이지 전체 배경을 넣을 수 있어요.




<head>

<title></title>

<style>

p { 

text-align : justify;

}

body {

     background-image: url('../Images/bg_orange03.jpg');

}

</style>

</head>


<body>

<p>책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>

</body>




배경이미지가 가로*세로 100px인데 전체에 적용이 됩니다. 이건 background-image 속성이 배경이미지를 바둑판식으로 반복하게 되어 있어서예요. 일정한 패턴이 있는 배경이라면 작은 크기의 이미지로 배경 지정이 가능합니다.


body 대신 선택자를 지정해 배경을 넣으면 <div class="bg_image"></div>처럼 클래스로 글상자를 만들 수 있어요. 본문 전체가 아니라 본문의 특정 영역만 배경이미지처리를 해 줄 수 있지요.


body {

     background-image: url('../Images/bg_orange03.jpg');

     background-repeat: no-repeat;

}


background-repeat 속성을 이용하면 반복을 막거나, 가로/세로를 지정해 반복할 수 있습니다. 


background-repeat : no-repeat; /*반복 안함*/

background-repeat : repeat-x; /*가로만 반복*/

background-repeat : repeat-y; /*세로만 반복*/


background-repeat : no-repeat;





background-repeat : repeat-x;





background-repeat : repeat-x;




배경 이미지를 가운데로 놓고싶다면 background-position: center; 속성을 사용하면 됩니다. 이때 no-repeat 속성도 같이 지정을 해줘야되요. 그렇지 않으면 배경이미지가 화면을 가득 채우기 때문에 이미지를 가운데 둔 의미가 없어져요.


body {

     background-image : url('../Images/bg_orange03.jpg');

     background-repeat : no-repeat;

     background-position : center;

}



background-repeat : no-repeat;

background-position : center;


그런데 좀 이상하지요? 아마 정 중앙에 배경이미지가 올거라고 기대하셨을 거예요. 정 중앙에 온게 맞습니다. 그런데 정 중앙의 기준이 뷰어 화면이 아니어서 저렇게 나옵니다. 만약 텍스트가 화면에 가득 차있다면 배경이미지는 정 중앙에 올거예요. 


background-position은 아래와 같은 값을 지정할 수 있습니다. 쉬운 영어니 설명 안해도 이해 하실거예요^^


center

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom


x% y%  (% 대신 px, cm, em, pt 등의 단위 사용 가능)




공백이 있을 때도 배경이미지가 정 중앙에 오게 하려면?

background-attachment : fixed; 속성을 이용할 수 있습니다. 그런데 fixed 값을 사용하려면 주의해야되요. 페이지 넘김 방식이 아닌 스크롤 방식의 뷰어에서는 스크롤을 해도 배경이미지가 화면 가운데 고정됩니다. 텍스트는 스크롤이 되지만 배경은 멈춰있는거예요.


그리고 뷰어에 따라 다른 결과가 나타날 수 있으니 주의하세요.


body {

        background-image: url('../Images/bg_orange03.jpg');

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

}



background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;


배경이미지 크기를 조절할 수도 있습니다.


background-size: 200px 200px;를 적용하면 배경이미지 크기가 100px짜리여도 뷰어에서는 200px로 보입니다.


body {

      background-image: url('../Images/bg_orange03.jpg');

background-repeat: no-repeat;

background-position: center;

background-attachment: fixed;

background-size: 200px 200px;

}




그럼 지금까지 설명한 내용으로 마지막 실습을 해볼게요.

아래 이미지를 배경으로 글상자를 만들어 글을 넣어 보겠습니다. 멋진 시라도 넣으면 좋겠지만 그런 감성은 부족하니 이해하세요 ^^;




<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>


p {

text-align : justify;

}


.txt_box {

margin : 1em;

padding-top : 1em;

color : white;

}


.bg_flower {

background-image: url('../Images/003_full.png');

background-repeat: no-repeat;


background-size: 200px 300px;

width : 200px;

height : 300px;

margin : auto;

display : box;

}


</style>

</head>

<body>

<p>책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>

<div class="bg_flower">

<p class="txt_box">책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>

</div>

<p>책 편집을 하다 보면 본문에 배경을 넣을 때가 있습니다. CSS 속성 background-color를 이용해 파란색, 노란색, 빨간색으로 배경을 넣을 수 있습니다. 그런데 색이 아닌 이미지를 배경으로 넣어야 할 때도 있습니다. 오늘은 배경이미지를 넣는 방법을 알려드리려고 해요.</p>


</body>

</html>




!! 배경 넣을 때 주의하세요 !!


단순 패턴의 배경이라면 문제가 되지 않지만, 위 예처럼 배경이미지 크기를 고정시킬 경우 뷰어나 화면 크기에 따라 다 글상자 크기가 달라집니다. 글상자 크기를 고정시키지 않으면 화면에 따라 배경이미지가 완전히 보이지 않거나 가로*세로 비율이 틀어질 수 있고요. PC에서 작업해 원하는 결과가 나왔다 해도 스마트폰이나 태블릿, 그리고 유통사 뷰어 별로 편집 결과가 다르게 보일 수 있습니다. 유통사 뷰어 문제도 아니고, 스타일을 잘못 넣어서 그런 것도 아니에요. EPUB이라 그렇습니다. 편집자가 원하는걸 정확히 알지 못하면 배경이미지는 '특히' 원하는 결과를 얻기 어렵습니다.





반응형
posted by 내.맘.대.로 2016. 7. 26. 17:20

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

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

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

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

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

최신 내용은 아래 글을 참고하세요.

https://www.epubguide.net/522

 

여러개의 EPUB 파일 하나로 합치기

책을 만들다 보면 여러개의 EPUB을 하나로 합쳐야 할 때가 있습니다. 3권 시리즈물인데 통합하여 한권으로 만드는 경우가 있지요. 이럴 때 이미 만들어 놓은 책을 하나로 합치는 방법이 있습니다.

www.epubguide.net

 

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.

 

 

전자책은 종이책에 비해 분철과 합본을 만들기 쉽습니다. 분철이란 한 권의 책을 장이나 절로 나눠 판매하는 방식, 합본은 1권, 2권으로 나눠져 있는 책을 하나로 묶어 판매하는 방식입니다. 

 

분철은 어렵지 않습니다. 전자책 편집 프로그램으로 챕터 파일을 삭제하면 알아서 다 정리해 줍니다. 예를 들어 3개 챕터로 구성된 EPUB 파일이라면 원본 파일을 [Filename_01.epub]로 복사한 후 첫번째 챕터만 남기고 나머지는 삭제합니다. 그리고 목차 정보를 갱신해주면 첫번째 챕터의 분철 파일이 생깁니다.

 

합본은 조금 복잡합니다. EPUB 파일을 합쳐주는 편집 프로그램은 아직 못봤어요. 그래서 두개의 책을 하나로 합치려면 첫번째 책에 두번째 책을 한 챕터씩 추가해 줬야 합니다. 시간이 오래 걸리는 작업이지요. 그리고 이렇게 하면 문제가 생길 수 있습니다. 예를 들어 첫번째 책과 두번째 책의 스타일을 조금 바꿨다면 CSS가 겹칠 수 있습니다. 첫번째 책의 본문을 나눔명조로, 두번째 책의 본문을 은글꼴로 편집했다면 스타일으 틀어져버립니다. 

 

이럴 때 간단히(물론, EPUB의 구조를 잘 알고 있는 분들에게) 두 책을 합치는 방법이 있습니다. 작업도 금방 끝나고 스타일으 겹치는 문제도 없습니다. 전자책 제작 경험이 없는 분들이라도 신경써서 따라해 보면 어렵지 않을거예요.

 

* 전자책 편집 프로그램은 Sigil을 사용합니다. 다른 편집 프로그램도 사용할 수 있습니다.

 

* 합본 제작은 심야책방 출판사에서 출간된 이상한 나라의 앨리스와 거울 나라의 앨리스를 예제로 사용했습니다. 

 

 

1. 합본 파일 준비하기

 

합본을 만들 둘 혹은 그 이상의 EPUB 파일을 준비합니다.

여기서는 심야책방에서 출간된 이상한 나라의 앨리스, 거울 나라의 앨리스로 설명을 하겠습니다. 

저작권이 있는 책이기 때문에 샘플 파일은 제공하지 않습니다. 

 

1.1 이상한 나라의 앨리스.epub 파일을 Sigil로 열어줍니다. 그리고 모든 파일명 앞에 W를 붙여줍니다. 챕터가 많다면 '이름바꾸기' 기능을 이용해 변경할 수 있습니다. css 파일명도 바꿔줍니다. 여기서는 wonder.css로 바꿨습니다.

 

1.2 거울 나라의 앨리스.epub 파일을 sigil로 열어 1.1처럼 작업을 합니다. 이 책은 파일명 앞에 M을 붙여줍니다. 그리고 css 파일명은 mirror.css로 바꿉니다.

 

1.3 만약 두 파일에 사용된 이미지 파일명이 겹친다면 이 역시 모두 W나 M을 추가해 줍니다. 두 책의 표지 이미지 파일명이 cover.jpg라면 W_cover.jpg, M_cover.jpg로 바꿔주면 됩니다. 이미지 파일명 역시 '이름 바꾸기'를 통해 일괄로 변경이 가능합니다.

 

 

 

 

 

 

 

2. 압축 풀기 & 파일 합치기

 

2.1 압축풀기 

압축 프로그램을 이용해 두 파일의 압축을 풀어줍니다. 압축을 푸는 방법은 생략합니다. 압축을 풀면 [이상한 나라의 앨리스]와 [거울 나라의 앨리스] 폴더가 각각 생길 거예요.

 

각각의 폴더 안에는 [META-INF]와 [OEBPS] 폴더가 있고, [OEBPS] 폴더 안에는 [Fonts] [Images] [Styles] [Text]폴더가 있습니다. 원본 파일에 따라 폴더 명이나 파일명이 다를 수 있지만 구조는 동일합니다.

 

[OEBPS] 폴더 안에는 content.opf와 toc.ncx 파일도 있습니다. EPUB 제작 프로그램에 따라 파일명은 다를 수 있지만 opf와 ncx 파일은 반드시 하나씩 있습니다.

 

2.2 파일 합치기

거울 나라의 앨리스 폴더에 있는 [Fonts] [Images] [Styles] [Text] 폴더를 이상한 나라의 앨리스의 [OEBPS] 폴더 안으로 복사합니다.

 

복사를 하면 같은 폴더가 있다는 경고를 볼 수 있습니다. 폴더가 같다는 경고는 무시해도 됩니다.

단, 같은 파일이 있다는 경고가 뜬다면 반드시 파일을 확인하세요. 폰트 파일이나, 출판사 로고 처럼 겹쳐도 되는 파일이면 괜찮습니다. 두 책에 서로 다른 내용으로 들어가 있는데 파일명이 같다면 반드시 다른 파일명으로 수정을 해야합니다. 

 

3. content.opf 파일 수정하기

 

가장 중요하고 까다로운 부분입니다.

EPUB 구조를 잘 아는 분이라면 어렵지 않겠지만 경험이 많지 않다면 이 부분에서 실수를 할 수 있습니다.

1번, 2번 과정을 제대로 해 놓았으면 별 어려움이 없을거예요. 하지만 1권과 2권에 겹치는 파일이 많이 있으면 조금 복잡해집니다. 초보자라면 가급적 두 책에 겹치는 파일이 없게 작업을 하세요. 용량이 조금 늘어나겠지만 작업은 간단해집니다.

 

 

메모장으로 이상한 나라의 앨리스 폴더에 있는 content.opf 파일을 열어주세요. 파일 내용을 잘 살펴보면 아래 이미지처럼 <manifest>...</manifest>와 <spine toc="ncx">...</spine>을 찾을 수 있습니다.

 

 

 

먼저 <manifest>의 끝으로 가주세요. </manifest> 바로 윗줄입니다.

위치를 찾았으면 거울 나라 앨리스 폴더에 있는 content.opf 파일도 열어줍니다.

 

이제부터 중요하니 잘 따라하세요.

 

1) 거울나라 앨리스의 content.opf 파일에서 <manifest>와 </manifest> 사이에 내용을 모두 복사합니다. <manifest>, </manifest>는 복사할 필요 없어요. 사이에 있는 내용만 복사합니다.

 

2) 복사한 내용을 이상한 나라의 앨리스 content.opf 파일에 붙여넣습니다. 위치는 </manifest> 바로 윗줄입니다. 아래 이미지 보시면 <!--여기부터 거울나라 앨리스-->라고 되어있는 부분입니다. 붙여넣기 했으면 저장합니다.

 

 

1) 이상한 나라의 앨리스 content.opf 파일에서 </manifest> 위치 확인

 

 

 

2) 거울 나라의 앨리스 content.opf 파일을 복사

 

 

 

3) 복사한 내용을 이상한 나라의 앨리스 content.opf 파일에 붙여넣기

 

 

이 부분은 아주 중요합니다. 이걸 잘못하면 제대로 병합되지 않고 오류가 납니다.

 

 

3) <spine> 부분도 똑같이 작업을 해줍니다. 이상한 나라의 앨리스에 있는 </spine> 바로 위쪽에 공간을 만들고 거울나라의 앨리스의 <spine> 영역 내용을 붙여넣습니다. 그리고 저장을 해줍니다.

 

 

 

4. 압축하기

 

이제 이상한 나라의 앨리스 폴더를 압축합니다.

압축할 때 아래 이미지처럼 이상한 나라의 앨리스 폴더 안쪽만 압축해 줘야합니다. 이상한 나라의 앨리스 폴더를 압축하면 안되니 주의하세요.

 

 

EPUB 파일 압축은 규칙이 있습니다. 폴더에 있는 mimetype은 압축을 하지 않고 zip 파일에 포함되야 합니다. 하지만 여기서는 그냥 압축을 합니다. 5번 과정에서 이 문제는 해결이 되거든요. 만약 Sigil 같은 편집기를 사용하지 않는다면 mimetype파일은 zip 파일에 압축 없이 추가해 주세요. 

 

압축을 했다면 zip 확장자를 epub으로 수정합니다.

 

 

5. Sigil로 EPUB 파일 열기

 

이제 [이상한 나라의 앨리스.epub] 파일이 생겼습니다. 파일명은 알아서 수정해주세요. 저는 [앨리스 합본.epub]으로 수정을 했습니다. 이 파일을 Sigil로 열어줍니다.

 

파일을 열때 오류가 없어야 합니다. 특정 파일을 찾을 수 없다거나 content.opf 파일에 문제가 있다는 메시지가 뜨면 위 과정에서 실수를 한 부분이 있을거예요. 오류 없이 열렸다면 이상한 나라의 앨리스와 거울나라의 앨리스의 내용을 모두 확인할 수 있습니다. 편집도 그대로 적용돼 있고요.

 

하지만 목차는 [이상한 나라의 앨리스]의 목차만 들어있습니다.

[도구]>[차례]>[Generate Table of Content]를 눌러 목차를 만들어 줍니다.

Tip을 하나 드리면, 1권과 2권 표지 파일에<h1>제목을 하나 추가해주세요. 그럼 아래 이미지처럼 권별로 목차가 정리됩니다.

 

목차 정리 후에 표지 파일에 넣었던 <h1>태그는 삭제해 주면 됩니다.

 

 

 

 

설명은 복잡하고 길지만 직접 해보면 30분도 안걸리는 작업입니다. 조금 익숙해지면 10분이면 끝낼 수 있는 작업이에요. 1. 파일명을 서로 겹치지 않게 정리하고, 2. 압축을 풀어 파일을 한쪽 폴더에 넣어주고, 3. content.opf를 합친 후, 6. 압축하고, 7. Sigil로 열어 목차를 다시 만들어 주면 끝납니다. 

 

 

반응형
posted by 내.맘.대.로 2016. 7. 20. 11:22

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

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

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

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

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

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.


오늘은 간단히 세로쓰기 정리해 봅니다.


일본어 책을 만들거나, 훈민정흠 해례본처럼 고서를 원문 느낌 살려 편집하고 싶을 때 세로쓰기가 필요해요. IDPF 회원국 중에서는 일본이 세로쓰기 연구를 가장 활발히 하고 있습니다.


여담이지만, 일본어 세로쓰기 셈플을 보고 세종대왕님께 다시한번 깊은 감사를 드리게 됐어요. 일본어 전자책 제작비는 국내 전자책 매출 규모로 보면 감당이 안될 것 같네요. 한글로 전자책을 만들 수 있다는게 정말 다행입니다.


세로쓰기는 이렇게 표현이 됩니다.

이미지 보니 감이 딱 오시지요. 우리가 익숙하게 접할 수 있는 텍스트는 일본어인데 소수 국가에서 세로쓰기를 합니다. 그래서 EPUB3에서 세로쓰기 지원이 강화됐습니다.





세로쓰기는 간단히 설정할 수 있습니다. 

가로로 만들어 놓은 책이라도 아래 스타일을 추가해 주면 세로쓰기로 쉽게 바꿀 수 있습니다. 


html {

writing-mode : vertical-rl;

-epub-writing-mode : vertical-rl;

-webkit-writing-mode : vertical-rl;

}


<spine page-progression-direction="rtl">

<itemref idref="***.html"/>

...

</spine>


html에 스타일을 준건, 모든 태그에 세로쓰기 스타일이 적용되야하기 때문입니다. 그리고 spin에 적용한 rtl 속성은 페이지를 오른쪽에서 왼쪽으로 넘기도록 해줍니다. 


하지만 세로쓰기에 큰 문제가 하나 있습니다.

국내 유통사 중 제대로 지원하는 곳이 별로 없어요.

제가 테스트해본 결과입니다.(2016년 7월 20일 테스트함)


1. 네이버 : 세로쓰기 지원

2. 교보문고 : 제대로 지원하지는 않지만, 본문을 읽을 수 있음

3. 알라딘 : 파일은 열리지만, 각 챕터의 첫단락 정도만 읽을 수 있음

4. 예스24 : 지원 안함

5. 리디북스 : 지원 안함

6. 펍트리 : 세로쓰기 지원


펍트리, 깃든뷰어 등 EPUB3를 지원하는 뷰어라면 세로쓰기 책을 볼 수 있습니다. 하지만 국내 주요 유통사 뷰어에서 지원을 하지 않기 때문에 전자책 만들 때 이 점을 고려해야 합니다. 


◇ 한글 세로쓰기 샘플



◇ 일본어 세로쓰기 샘플 : https://github.com/readium/readium-test-files/blob/master/demos/kusamakura-japanese-vertical-writing-20121124.epub


◇ 세로쓰기 관련 참고문서 : http://epubzone.org/news/epub-3-and-global-language-support



반응형
posted by 내.맘.대.로 2016. 7. 14. 13:28

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

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

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

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

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

‪#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.


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

 

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

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

https://www.epubguide.net/notice/309


본문 혹은 본문의 특정 단어에 밑줄을 긋고 싶을 때 <u> 태그를 쓸 수 있습니다. 그런데 <u>태그를 쓰면 밑줄이 예쁘지 않아요. 두께나 스타일을 줄 수도 없습니다. 텍스트에 딱 달라붙은 밑줄이 그어져요. 

이럴 때 <u> 태그 스타일을 바꿔보세요. HTML 태그의 스타일은 편집자가 원하는 대로 바꿔 사용할 수 있습니다. 글자와 밑줄 간격을 조절할 수 있고, 밑줄 종류도 점선, 실선, 이중실선 등 다양하게 바꿀 수 있습니다. 색깔, 선의 두께도 편집자가 원하는 대로 지정할 수 있지요. 

선택자를 만들어 처리해도 되지만 태그에 스타일을 적용하면 코드가 깔끔해져요.


<span class="underline_selector">밑줄 단락</span>

<u>밑줄 단락</u>


이렇게 코드도 깔끔해 지고, 편집 시간도 줄일 수 있습니다. 물론 <u>태그의 기본 스타일로 다른 곳에 사용했다면 쓸 수 없지요.


아래처럼 <u>태그에 스타일을 적용해 보세요. <u>태그를 쓸 수 없다면 선택자에 스타일을 적용하고 span 태그를 사용해도 되요.


u {

   text-decoration : none;

   border-bottom : 1px solid #FF0000;

   padding-bottom : 2px;

}


text-decoration : none;을 해 준건 u 태그의 기본 스타일인 밑줄을 없애기 위함입니다. 이걸 해주지 않으면 border로 그어준 밑줄에 u태그의 밑줄이 겹쳐 그려지거든요.

border-bottom(border)는 다양한 속성이 있습니다. 1px는 밑줄의 두께예요.


border 밑줄 기본 두께

1px 밑줄 두께

2px 밑줄 두께

5px 밑줄 두께


solid는 1줄 실선을 뜻합니다. double(2줄 실선), dotted(1줄 점선), dashed(긴 점선), groove, ridge, inset, outset 등의 밑줄 종류를 선택할 수 있어요. 마지막에 붙은 #FF0000은 색입니다. 원하는 밑줄 색을 지정하면 됩니다.


padding-bottom으로 글자와 밑줄의 간격을 조절할 수 있습니다. padding을 주지 않아도 적당한 간격이 벌어지지만 섬세한 편집이 필요할 때 유용하게 사용할 수 있어요. 단, padding 값을 너무 크게 주면 아래쪽 줄에 영향을 줄 수 있으니 주의해야 합니다. 


padding-bottom을 주지 않았을 때

padding-bottom : 2px

padding-bottom : 10px(밑줄이 아래 문장에 그어짐)

padding-bottom 값이 너무 크면 윗쪽 단어에 그은 밑줄이 아래 문장과 겹칠 수 있어요.

반응형