posted by 내.맘.대.로 2016. 8. 29. 16:17

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

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

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

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

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

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

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

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

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



책을 만들다 보면 일정한 패턴이 있는 편집을 자주 접합니다. 출판사나 편집자의 취향에 따라 조금씩 다를 수 있지만 시중에 나와있는 책 3권 중 한권씩은 편집에 패턴이 들어갑니다. 그 중 가장 자주 접하게 되는 패턴이 있어요. 장이나 절의 첫 문단 강조하기.



* 각 장의 첫 문단에 회색 점이 세로로 3개 찍힌 패턴

(무엇이 평범한 그들을 최고로 만들었을까/토네이도 중에서)



--------------

* 각 절의 첫 문단은 들여쓰기를 하지 않고 둘째 문단부터 들여쓰기가 되어있는 패턴

(무엇이 평범한 그들을 최고로 만들었을까/토네이도 중에서)



패턴의 형태는 다양합니다. 첫 글자를 키울 수도 있고, 5글자 이상 들여쓰기를 할 수도 있습니다. 특별한 기호를 넣을 수도 있지요. 목차가 10개의 장으로 끝난다면 직접 스타일을 넣어 주면 됩니다. 그런데 10개 장에 각각 10개의 절이 있다면? 똑같은 스타일을 100번 넣어줘야하지요.




이런 스타일의 코드를 머릿속으로 생각해보세요. 많은 분들이 이런 코드를 상상하셨을거예요.


<h3>왜 매일 같은 것만 보이고<br/>같은 일만 반복될까</h3>

<p><br/></p>

<p><br/></p>

<p><br/></p>

<p class="img_float_left"><img src="../Images/bullet.jpg></p>


<p class="text_indent_5em">흔히 바쁜 하루를 보낼 때 사람들은 마치 기계처럼 일이 끝나자마자 곧바로 다음 일에 착수한다. ...혹은 ‘그게 인생이지, 뭐’라는 식으로 자신을 위로하기도 한다.</p>


<p>그러나 나는 운에 의지하지 않고 의지만으로 충분히 좋은 결과를 낼 수 있다고 말하고 싶다. ...마음의 준비는 곧 하루에 대한 접근 방식을 의도적으로 설정하는 과정이기 때문이다.</p>

이 책은 7개의 장으로 이루어져 있습니다. 각 장마다 3개~4개의 절이 있고요. 


7개의 장 * 4개의 절 = 28개의 절과 본문 사이에 코드를 복사/붙여넣기 해야합니다. 28개정도면 할만 하다고요? 그럼 다음은 어떨까요?



이런 코드가 떠오르겠지요?


 <h4>| 자동조종 모드가 중요하게 다루는 것</h4>


<p><br/></p>


<p class="no_indent">뇌의 자동 체계는 중요한 정보와 걸러낼 정보를 구별하기 위해 몇 가지 규칙을 따른다....그 일과 직접적으로 연관된 일은 자연히 인식하게 되지만 그렇지 않은 일은 전혀 인식하지 못한다는 사실이다.</p>


<p>최근의 연구 결과를 예로 들어보겠다. ...고릴라를 정면으로 쳐다보면서도 눈치채지 못했다는 사실이다.</p>


문단 시작 부분에 클래스 하나 넣는 것 정도야...

그런데 이 책은 7개 장으로 구성되어 있고, 각 장마다 3개~4개의 절이 있습니다. 그리고 각 절마다 예로 든 것 같은 소단락이 5개 안팎으로 있습니다. 


7개 장 * 4개 절 * 5개 소단락 = 140개의 소단락입니다. class="no_indent"를 140번 복사/붙여넣기 해야합니다. 그것도 위치를 하나씩 찾아가면서요.


이런 반복작업을 아주 간단히 처리해 줄 수 있는 CSS 속성이 있습니다.

설명을 하기 전에 제가 짠 코드를 보여드릴게요.


 구분

 실제 편집 코드

 비교를 위한 예제 코드

 절

 <h3>왜 매일 같은 것만 보이고<br/>같은 일만 반복될까</h3>


<p>흔히 바쁜 하루를 보낼 때 사람들은 마치 기계처럼 일이 끝나자마자 곧바로 다음 일에 착수한다. ...혹은 ‘그게 인생이지, 뭐’라는 식으로 자신을 위로하기도 한다.</p>


<p>그러나 나는 운에 의지하지 않고 의지만으로 충분히 좋은 결과를 낼 수 있다고 말하고 싶다. ...마음의 준비를 ‘의도 설정’이라고 부른다. 마음의 준비는 곧 하루에 대한 접근 방식을 의도적으로 설정하는 과정이기 때문이다.</p>

 <h3>왜 매일 같은 것만 보이고<br/>같은 일만 반복될까</h3>

<p><br/></p>

<p><br/></p>

<p><br/></p>

<p class="img_float_left"><img src="../Images/bullet.jpg></p>


<p class="text_indent_5em">흔히 바쁜 하루를 보낼 때 사람들은 마치 기계처럼 일이 끝나자마자 곧바로 다음 일에 착수한다. ...혹은 ‘그게 인생이지, 뭐’라는 식으로 자신을 위로하기도 한다.</p>


<p>그러나 나는 운에 의지하지 않고 의지만으로 충분히 좋은 결과를 낼 수 있다고 말하고 싶다. ...마음의 준비는 곧 하루에 대한 접근 방식을 의도적으로 설정하는 과정이기 때문이다.</p>

 소단락

  <h4>| 자동조종 모드가 중요하게 다루는 것</h4>


<p>뇌의 자동 체계는 중요한 정보와 걸러낼 정보를 구별하기 위해 몇 가지 규칙을 따른다....그 일과 직접적으로 연관된 일은 자연히 인식하게 되지만 그렇지 않은 일은 전혀 인식하지 못한다는 사실이다.</p>


<p>최근의 연구 결과를 예로 들어보겠다. ...고릴라를 정면으로 쳐다보면서도 눈치채지 못했다는 사실이다.</p>

  <h4>| 자동조종 모드가 중요하게 다루는 것</h4>


<p><br/></p>


<p class="no_indent">뇌의 자동 체계는 중요한 정보와 걸러낼 정보를 구별하기 위해 몇 가지 규칙을 따른다....그 일과 직접적으로 연관된 일은 자연히 인식하게 되지만 그렇지 않은 일은 전혀 인식하지 못한다는 사실이다.</p>


<p>최근의 연구 결과를 예로 들어보겠다. ...고릴라를 정면으로 쳐다보면서도 눈치채지 못했다는 사실이다.</p>


실제 편집 코드는 제가 전자책을 만들면서 사용한 것이고, 예제 코드는 유통사에 등록된 많은 전자책에 사용된 유형입니다. 제가 사용한 코드가 훨씬 간결해 보이지요?


그런데 자세히 살펴보면, 제 코드에는 어떤 스타일도 들어있지 않습니다. 코드만 보면 제목과 본문 줄간격도 벌어져 있지 않고, 세로 점 3개도 넣은 흔적이 없습니다. 들여쓰기도 되어있지 않고요. 소단락을 보면 첫번째 단락과 두번째 단락이 동일합니다. 첫번째 단락에 들여쓰기가 없어야 하는데 들여쓰기를 없애주는 클래스가 보이지 않습니다. 


이거 사기 아냐? 하는 분들을 외해 Sigil 화면을 코드와 함께 올려드려요 ^^

아래 코드를 보시면 위와 동일한데 미리보기 화면에는 들여쓰기, 회색점이 모두 찍혀있답니다. 


* 미리보기를 보면 들여쓰기, 회색 점이 모두 찍혀있음


* 소단락 제목 바로 아래 문단은 들여쓰기가 없지만 두번째  문단은 들여쓰기 되어 있음




1. 클래스를 추가하지 않고 스타일을 적용하는 방법


먼저 들여쓰기의 비밀부터 알려드릴게요.


h4 {

   font-family: "기본글꼴";

   font-weight: bold;

   font-size: 1.2em;

   margin-bottom: 1em;

   margin-top: 1em;

}


h4+p {

   text-indent: 0;

}


이게 실제 스타일 코드입니다.

CSS에는 가족관계가 있습니다. 가족관계에 대해 궁금하신 분은 왼족 검색창에 [CSS의 상속]으로 검색을~~


h4+p { ... }


이건 h4 태그와 p 태그의 인접형제를 의미합니다. h4의 인접형제, 다시 말해 h4 태그 바로 다음에 나오는 p 태그에 text-indent : 0; 속성을 부여하라는 의미입니다. 다른 p 태그에는 전혀 영향을 주지 않고 h4 태그 다음에 나오는 p 태그에만 영향을 줍니다. 그래서 h4 다음에 나오는 p 태그는 클래스를 추가하지 않아도 들여쓰기 0의 속성을 줄 수 있습니다.



2. 첫번째 문단에 이미지를 추가하는 방법


눈치 빠른 분이라면 '아!'하고 머리 위에 전구가 깜빡이겠네요. 절(h3)에 적용한 것 역시 소단락(h4) 처럼 인접형제를 이용해 스타일을 적용했습니다. 


h3 {

    text-align: right;

    line-height: 1.8em;

    font-size: 1.4em;

    font-family: "기본글꼴";

    margin-bottom : 3em;

    font-weight: bold;

}


h3+p {

    text-indent : 0em;

}


h3+p:before {

    content : url("../Images/bullet_dot.jpg");

    margin-right : 4em;

}


h3+p는 설명이 필요 없을 것 같고, 이미지를 어떻게 추가했는지 설명드릴게요.


CSS에는 :before와 :after라는 선택자가 있습니다. 이 두 선택자는 혼자 사용할 수 없고 다른 선택자에 붙어 보조역할을 합니다. :before는 글자나 문단 앞에, :after는 뒤에 특정 콘텐츠를 추가해 줍니다. 


여기서는 


1. h3 바로 다음에 나오는 p 태그의 앞에 (h3+p:before)

2, bullet_dot.jpg 파일을 삽입하고 (content : url("../Images/bullet_dot.jpg");

3. 4글자 만큼 간격을 띄운 후 본문을 표시 (margin-right : 4em;)


하라고 스타일을 지정했습니다. 


이렇게 지정을 하면 h3 태그 바로 다음에 오는 p 태그에는 클래스를 붙이지 않아도 bullet_dot.jpg라는 이미지가 붙고 이미지에서 4em 만큼 떨어져서 본문이 시작됩니다.


+기호와 :before 속성 2개를 이용해 160번 넘게 복사/붙여넣기 해야 하는 작업을 줄일 수 있었습니다. 가족관계( >, +, *, ~ 등)와 :before, :after는 익혀두면 아주 유용하게 활용할 수 있습니다. 저도 전자책 편집할 때 많이 사용하고요. 예전에는 지원을 안하는 뷰어가 있었지만 최근에는 대부분 지원합니다. 


반응형
posted by 내.맘.대.로 2016. 8. 26. 10:43

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

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

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

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

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

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

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

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

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


책에는 이미지가 많이 들어갑니다. 자기계발서나 여행서, 실용서 등 소설 외에는 이미지 없는 책이 드물지요. 종이책에 이미지 넣기는 쉽습니다. 물론, 종이책 편집이 얼마나 어려운지 알아요. 하지만 전자책에 비하면...


종이책은 고정된 크기의 종이에 원하는 위치에 이미지를 놓을 수 있어요. 한번 넣은 이미지는 언제나 그 자리에 그 크기로 있습니다. 그런데 전자책은?


스마트폰 화면 크기를 보세요. 수천가지입니다. 같은 5인치라고요? 4:3, 16:9, 1080p, 720p... 같은 5인치여도 해상도가 전부 다릅니다. 같은 해상도여도 화면 크기가 전부 다를 수 있어요. 그러다 보니 이미지를 넣을 때 이 모든 화면을 고려해야합니다. 그렇지 않으면 이런 문제가 생기지요.



이렇게 가로로 넓은 이미지를 세로 화면에서 보면



이미지가 화면 밖으로 나가거나,



손톱만해야 하는 이미지가 화면을 가득 채우거나.


그렇다고 이미지 하나 하나 가로 픽셀을 확인해서 스타일을 적용하자니 너무 번거롭지요.

이럴 때 아주 간단히 문제를 해결할 방법이 있습니다. 물론 만능은 아니기 때문에 상황에 맞게 잘 활용해야 하지만요.


img { max-width : 100% }


CSS에 이거 한 줄만 넣어보세요.

이미지가 화면보다 크면 화면에 딱 맞춰주고, 화면보다 작으면 원래 크기로 보여줍니다.


스마트폰 화면 크기와 해상도 조합이 우주에 떠있는 별보다 많다고 해도 이미지가 절대로 화면 밖으로 나가지 않습니다. 큰 이미지는 화면에 맞게 줄여주고, 작은 이미지는 최대 해상도로 고정이 됩니다.


아주 간단한 스타일이지만 전자책 만들며 이미지 삽입할 때 아주 유용합니다 ^^




반응형
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에 추가합니다.



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

반응형