posted by 내.맘.대.로 2018. 3. 13. 11:47

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

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

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

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

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

책 제목 : 알츠하이머의 종말

제작 포인트 : 전형적인 스타일의 책


알츠하이머의 종말은 경제경영/자기계발 류의 전형적인 스타일을 갖고 있습니다. 


1. 본문과 다른스타일의 문단 인용구

2. 목록 스타일의 인용구

3. 이미지와 이미지 설명

4. 표

5. 박스 형태의 글상자

6. 팝업 주석

7. 한글-외국어(영어, 한자 등) 병용 표기

8. 괄호 설명

9. 여러 단계의 소제목...


교과서 같은 편집 스타일이라 제작 결과물을 공유합니다.


부 제목 페이지는 이렇게 2페이지로 되어 있습니다. 

이걸 전자책에 그대로 넣으면 쓸모 없는 페이지 넘김이 발생해 독자들이 불편해요.

전자책을 안읽는 사람은 모르겠지만, 전자책을 읽는 분들은 불필요한 페이지 로딩이 반복되는게 많이 불편하거든요.




그래서 이렇게 수정을 했습니다. 

부 제목 페이지를 하나로 합쳐 종이책 스타일을 살리면서 전자책에 어울리도록 만들었습니다.

2페이지에 담긴 내용을 한페이지로. 그래서 부 제목을 한번에 넘길 수 있도록 했어요.

* 교보 뷰어에서 캡쳐하니 워터마크가 들어가네요.


목차 페이지는 별로 손댈게 없어 최대한 종이책 스타일을 살렸습니다. 


전자책에서는 이렇게 보여요.


많은 책들이 장 제목의 번호에 스타일을 줍니다. 이 책도 장 번호 스타일이 독특합니다. 단순해 보이지만 이런 스타일은 잡기 어렵지요. 이미지로 넣는다면 글자 크기를 변경할 때 이미지 크기도 같이 변경하도록 해야합니다. 이미지의 배경색을 투명으로 하면 사용자가 배경색을 바꿔도 어색하지 않아요. 


그리고 장의 첫번째 단락에는 이미지가 들어갔습니다.

글자 모양이 다르거나 이렇게 이미지가 들어간 책이 많이 있지요.

이 이미지도 글자 크기를 바꾸면 글자 크기와 같은 비율로 바뀝니다. 

배경색을 없애 독자가 배경색을 바꿔도 이미지가 하얀 네모로 보이지 않아요.


* 이미지 배경을 없애면 글자 크기나 배경색이 바뀌어도 글머리 기호 같은 이미지는 하얀 네모로 표시되지 않습니다. 글자 크기와 이미지 크기를 연동시켜 글자를 확대하거나 축소해도 이미지는 글자 비율에 맞춰 자동으로 확대/축소 됩니다.  



이 책은 목록 스타일의 인용구가 많습니다.

목록 스타일도 글머리 번호와 글머리 기호로 구분돼 있습니다.


글머리 번호 중에 강조가 들어간 경우도 있습니다. 


인용구는 위, 아래, 왼쪽만 여백을 줬습니다. 글자 크기는 본문보다 작게. 종이책 편집을 그대로 살렸습니다. 


이미지와 이미지 설명입니다.

이미지 설명은 본문보다 작은 글씨로 이미지 폭에 맞춰 넣었습니다. 


이 책에 들어간 표는 한 칸에 들어있는 내용이 많지 않고 2단~3단으로 열이 많지 않습니다.

반면 글자가 많고 판형이 조금 큽니다. 그리고 2페이지 이상 걸쳐있는 표가 많지요. 그래서 표를 이미지로 넣을 경우 스마트폰에서는 글자가 작아 읽기 불편합니다.


그래서  이미지로 넣지 않고 표로 넣었어요. 표로 넣을지, 이미지로 넣을지는 표에 따라 달라집니다. 이 책은 이미지 보다는 표로 들어가는게 가독성에 좋다고 판단했습니다. 




글상자가 많지는 않습니다. 하지만 이렇게 회색이나 패턴 배경이 들어가 있습니다. 




본문 안에 글상자가 들어간 경우도 있습니다. 

본문 안에 들어간 글상자는 배경색이 아니라 패턴이 있는 배경이미지 입니다. 



글상자가 단독으로 들어가면 패턴 배경이 확실하게 보입니다. 


팝업주석입니다.

팝업주석을 넣을 때는 주의해야합니다. 예스24 안드로이드 버전에서는 팝업 주석이 링크로 연결되거든요. 그래서 팝업과 링크 모두 포함하는게 좋습니다. 팝업 주석이 지원되는 뷰어는 팝업으로, 링크만 지원하는 뷰어는 링크로 이동합니다.


교보, 리디, iBooks는 팝업주석이 지원하는 대신 주석 내용이 나타나지 않습니다. 그래서 주석 내용이 있는 부분에는 일부 뷰어에서 주석 내용은 팝업으로만 볼 수 있다는 안내 문구를 넣어 주는 것도 좋습니다. 



반응형
posted by 내.맘.대.로 2017. 11. 8. 13:31

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

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

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

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

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

책 제목 : 분노유발 심리학

포인트 : 작은 부분에서 색다른 편집이 필요했던 책.


제목과 내용이 재미있는 책입니다. 분노유발자를 아홉가지 '또라이'로 분류해 대처하는 방법이 담긴 책이에요.


'또라이'라는 단어가 좀 과격하다 싶을 수 있는데, 책머리에 왜 '또라이'라는 단어를 선택했는지 설명이 나옵니다. 그리고 책을 보면 왜 '또라이'인지 알게 되고요.


어려운 스타일은 없었지만 처음 시도해 본 재미있는 편집이 몇가지 있습니다.


가장 고민을 많이 했던게 목차였네요 ㅡ.ㅡ;;

종이책 목차가 이렇게 되어 있습니다. 

[차례]라는 글자 아래로 청록색 선이 있고, 선의 반대쪽 끝에는 이미지가 있어요. [차례]의 아랫쪽, 이미지의 중간에 선이 오도록 하는게 포인트라 이 부분을 살려봤습니다. 


전자책에서는 이렇게 보입니다. 페이지가 없는 전자책이다 보니 종이책에서 2페이지로 구분된걸 한페이지에 몰아넣었습니다. 딱 한번 들어가는데 공을 들여야 하나 싶은 생각도 들었지만, 이 포인트를 살려야겠다는 생각이 들더라구요.



화면이 큰 PC나 태블릿에서 본 화면입니다. 본문, 제목 스타일은 어렵지 않게 작업할 수 있습니다.




스마트폰처럼 작은 화면에서 보면 이렇게 보입니다. 제목 상단 이미지를 본문 크기에 맞췄는데 큰 화면에서 보면 제목과 비교해 너무 커져서 화면 폭의 40%로 맞췄습니다. 




이 책의 재미있는 스타일이 나옵니다. 소제목 아래에 선이 있는데 청록색과 검정색이 겹쳐지는 점선느낌입니다. 한가지 색의 선이나 점선이라면 border를 썼을거예요. 그런데 이런 선은 이미지로 들어가야합니다. 

저는 이 이미지를 썼습니다. 이 이미지를 배경으로 넣었어요.

배경으로 이미지를 넣으면 문장 길이에 맞춰 줄이 조절됩니다. 

문장 길이에 딱 맞추기 위해 display속성을 추가했어요.



여기 쓰인 선은 위에 쓰인 선과 모양이 다릅니다. 

display 속성을 없애고, 좌우에 여백을 줘서 아랫쪽 회색 글상자보다 안쪽으로 들어가도록 했지요.


대화문에 사람 이름을 다른 색으로, 내어쓰기, 이런건 설명 안드려도 쉽게 할 수 있을거예요^^


이 책에서 독특했던 부분이 또 있습니다. 영문 병기 글자가 위쪽이나 아랫쪽이 아닌, 글자 가운데 정렬을 했더라구요. 그래서 영문 병기 표기가 글자의 중간에 배치되도록 상하 정렬을 맞췄습니다. 


종이책에서는 이렇게 보입니다.



어렵고 까다로운 스타일은 없었는데 배경이미지로 밑줄을 넣고, 영문 병기를 글자 가운데로 맞춘건 처음이라 소개해 봤습니다.


반응형
posted by 내.맘.대.로 2017. 11. 3. 10:59

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

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

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

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

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

제작 기간 : 2일

포인트 : 편집자가 신경을 많이 쓴 장 제목을 최대한 살리자.


이 책은 시간이 오래 걸릴 것 같지 않았는데 생각보다 오래 걸렸습니다. 이미지가 많이 들어있기도 했고, 인디자인에서 편집한 이미지라 원본 이미지를 쓰지 못하고 PDF에서 편집된 최종 이미지를 추출하는데 시간이 좀 걸렸지요. 그런데 가장 시간이 많이 걸린건 제목입니다. 4개 파트로 구성되어 있고, 각 파트별로 10 ~ 14개의 챕터로 나눠진 책입니다. 챕터가 40개 조금 넘게 구분되어 있습니다.


전자책 샘플 이미지 세번째 그림에 육각형 글머리 기호가 있고, 제목은 1줄 혹은 2줄로 세로로 늘어서 있는 장 제목 스타일이 있습니다. PDF(종이책)에는 이렇게 편지돼 있습니다.



본문에는 다른 포인트가 없어 이 부분을 살리다 보니 손이 만히 가서 편집하는 시간이 오래 걸렸습니다. 2일 중 1일은 40개의 제목을 넣는데 보냈네요.


아래는 편집이 끝난 '일개미 자서전' 캡쳐 화면입니다.



전자책 샘플 이미지



* 스마트폰에서는 제목과 본문 줄간격이 너무 벌어지면 보기 좋지 않아 종이책 보다 줄간격을 조금 벌렸다. 스마트폰을 통해 전자책을 보는 사람이 70% 정도 되기 때문에 PC나 태블릿 보다 스마트폰에 디자인을 맞췄다.  



반응형
posted by 내.맘.대.로 2017. 10. 13. 14:50

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

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

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

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

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

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

 

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

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

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


오랜만에 스타일 팁 올립니다.


어떤 분이 테이블 안쪽 여백과 테이블 가운데 정렬 방법을 물으셨어요.


테이블(table) 태그는 기본 속성(attribute)을 몇개 갖고 있습니다.


글자 영렬(align), 테두리 모양(border), 배경색(bgcolor), 폭(width)...


전자책 만들 때 이런 속성은 사용하지 마세요!!!!!


태그 기본 속성을 사용해도 별 문제는 없습니다. 그런데 W3C에서도, IDPF에서도 스타일 편집은 CSS로, 그것도 외부 CSS로 하도록 하는 추세입니다. 


만들어 놓은거라 써도 상관은 없는데 앞으로는 이런거 전부 없앨거야~


그래서 이런 속성들 대부분은 HTML5에서 지원을 하지 않습니다.


그럼 이런건 어떻게 해야할까요? 

아래 표를 보세요. 위쪽 표는 테두리 색과 border-collapse 만 적용했습니다. 확인이 편하게 하려고 적용한 속성이고 이 두 속성을 제외하면 아무 스타일도 적용하지 않았을 때 테이블이 이런 모습으로 보여요.


이런 테이블을 아래쪽 표처럼 안쪽 여백을 주고, 테이블 자체를 가운데 정렬하려면 어떻게 해야할까요?

 


안쪽 여백이니 padding,가운데 정렬이니 text-align : center;를 주면 되겠지요?

그런데 이게 안먹힙니다.


여기서 2가지 문제가 생겨요. padding을 어디에 줘야 하는지, 그리고 text-align으로 가운데 정렬이 되지 않을 때 어떻게 가운데 정렬을 하는지.


먼저 스타일 코드를 보세요.


table, tr, td {

border : 1px solid #FF0000;

border-collapse: collapse;

}


.cell_padding {

padding : 1em;

}


.table_center {

display : table;

margin-left : auto;

margin-right : auto;

}


<table class="table_center">

<tbody>

<tr>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

</tr>

<tr>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

<td class="cell_padding">

안쪽 여백, 테이블 가운데 정렬

</td>

</tr>

</tbody>

</table>


1. padding은 셀(td)에 적용한다.


테이블에서 글자가 들어가는 곳은 tr 태그 안쪽입니다. table, td는 테이블의 구조를 만드는 태그고, td가 텍스트가 들어가는 셀을 만드는 태그예요. 그러니 텍스트가 들어가는 셀에 여백을 주고 싶다면 td 태그에 스타일을 적용해야겠지요.


2. 테이블을 가운데 정렬하기


테이블이나 div같은 상자를 가운데정렬 할때는 text-align 속성이 제대로 적용되지 않습니다.

적용할 방법이 없는건 아닌데 그럼 코드가 복잡해져요.

이럴 때 margin-left : auto; margin-right : auto;를 사용해 보세요.


div 박스일때는 display : table; 혹은 display : box; 속성도 같이 지정해야 합니다.

여기서는 display :table;이 없어도 되지만, 확실히 해주기 위해 추가했어요.


끝으로... 테이블을 오른쪽 정렬 하고싶다면?

.table_center {

display : table;

margin-left : auto;

}


이렇게 스타일을 바꿔보세요. 그럼 가운데 있던 테이블으 오른쪽으로 정렬됩니다.





반응형
posted by 내.맘.대.로 2017. 9. 28. 09:52

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

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

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

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

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

국내 주요 유통사 뷰어 스타일 표현성 비교 https://goo.gl/QqqfKD


* 이 표는 2017년 9월 27일자 기준입니다. 이후 업데이트 등을 통해 수정될 수도 있으니 세부 사항은 반드시 위 링크로 들어가 확인을 해주세요.


CSS 속성을 제대로 지정한 것 같은데 뷰어에서 이상하게 보인 경험 있으시지요?

다른 뷰어에서는 잘 보이는데 특정 뷰어에서만 이상하게 나와 고생한 적도 있을거예요.


유통사 뷰어별로 문제가 있는 스타일을 정리하고 있습니다.

뷰어에서 표현이 되지 않는건데 CSS 스타일 수정하느라 쓸데없는 시간낭비 하지 마시고,

특정 유통사 뷰어에서만 이상하게 나오는 스타일이 있으면 알려주세요.

테스트를 해보고 해결 방법을 찾거나, 뷰어의 표현성 문제인지 확인해 드릴게요.

반응형
posted by 내.맘.대.로 2017. 8. 24. 11:03

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

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

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

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

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

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


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


img/gif

img/jpg

img/png

img/svg+xml

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같은 코드가 보입니다. 이미지처럼 보이지 않아요. 


<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 100 100">

<rect id="background" x="-50" y="-50" width="100" height="100" rx="4" fill="#f90"/>

<rect id="top-left" x="-50" y="-50" width="50" height="50" rx="4" fill="#ffb13b"/>

<rect id="bottom-right" width="50" height="50" rx="4" fill="#de8500"/>

<use stroke="#f90" stroke-width="22.6" xlink:href="#a"/>

<circle r="26"/>

<use stroke="#000" stroke-width="12" xlink:href="#a"/>

<g id="a">

<g id="b">

<g id="c">

<circle id="n" cy="-31.6" r="7.1" fill="#fff"/>

<path d="m0 31.6v-63.2" stroke="#fff" stroke-width="10"/>

<use y="63.2" xlink:href="#n"/>

</g>

<use transform="rotate(90)" xlink:href="#c"/>

</g>

<use transform="rotate(45)" xlink:href="#b"/>

</g>

<path id="text-backdrop" d="m44.68 0v40c0 3.333-1.667 5-5 5h-79.38c-3.333 0-5-1.667-5-5v-40"/>

<path id="shine" d="m36 4.21c2.9 0 5.3 2.4 5.3 5.3v18c-27.6-3.4-54.9-8-82-7.7v-10.2c0-2.93 2.4-5.3 5.3-5.3z" fill="#3f3f3f"/>

<use stroke="#000" stroke-width="7.4" xlink:href="#s"/>

<g id="svg-text" stroke="#fff" stroke-width="6.4">

<g id="s">

<path fill="none" d="m-31.74 31.17a8.26 8.26 0 1 0 8.26 -8.26 8.26 8.26 0 1 1 8.26 -8.26M23.23 23h8.288v 8.26a8.26 8.26 0 0 1 -16.52 0v-16.52a8.26 8.26 0 0 1 16.52 0"/>

<g stroke-width=".5" stroke="#000">

<path d="m4.76 3h6.83l-8.24 39.8h-6.85l-8.26-39.8h6.85l4.84 23.3z" fill="#fff"/>

<path d="m23.23 19.55v6.9m4.838-11.71h6.9m-70.16 16.43h6.9m9.62-16.52h6.9" stroke-linecap="square"/>

</g>

</g>

</g>

</svg>


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는 작은 아이콘부터 고품질 사진까지 다양한 이미지를 표현할 수 있습니다. 둘 다 이미지 품질이 좋지요.


그런데 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는 손실이 없어 보관용 전자책을 만들 때 좋고 배경색을 없앨 수 있어 책에 배경색이 들어가거나 독자가 배경을 바꿨을 때 자연스러워 보입니다.


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



반응형