posted by 내.맘.대.로 2016. 10. 5. 12:04

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

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

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

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

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

본문 내용을 정리하거나 Tip을 편집할 때 글상자를 많이 사용합니다.

아래처럼 본문의 중요한 내용을 한눈에 알아보기 쉽게 정리할 때, 아니면 본문에서 다루지는 않았지만 알아두면 좋은 Tip을 정리할 때 처럼요.


이런 편집을 할 때는 본문과 구분을 위해 노트나 메모장처럼 보이도록 편집을 합니다. 그래서 전자책으로 변환을 할 때 이 부분을 표현하기 까다로와요.


최근에 편집한 책 중에 이런 편집이 있었습니다. 3 종류의 글상자가 있는데 아래 이미지를 참고하세요.




<본문의 중요 단어를 알아보기 쉽게 편집한 글상자>



<본문 내용의 핵심을 간략히 정리한 글상자>


<본문에서 다루지 않았지만 알아두면 좋은 Tip >



이런 편집을 쉽게 표현하는 방법은 2가지입니다. 2가지 방법 뿐이라는 얘기가 아니니 오해는 하지 마세요. 많은 편집자들이 사용하고 있는 방법이 2가지라는 얘기입니다.


1. table을 이용한다.

2. div를 이용한다.


첫번째 방법은 1행 3열 테이블을 만들어 1행과 3행에 이미지를 넣고 2행에 본문을 넣는 형태예요.


 [글상자 이미지]

 본문

 [글상자 이미지]



두번째 방법은 테이블과 비슷한데 div 태그를 사용합니다.

[글상자 이미지]
본문
[글상자 이미지]



이번 책을 편집하면서 저는 table로 글상자를 만들었습니다. table로 만들면 div 보다 구조화 시킬 수 있거든요. 아래 이미지 3개가 캘리버(caliber)로 본 table로 만든 글상자입니다. 




그런데 유통사 뷰어에서 table로 만든 글상자 표현 문제를 발견했습니다.

저처럼 table로 글상자를 만드는 분들은 참고하시고, table 대신 div 태그로 만드는걸 권해드립니다.




1. 예스24 뷰어


첫번째 테이블은 문제가 없어보입니다. 배경도 흰색이고 본문쪽에도 배경 스타일이 없어 아무 문제 없습니다. 




두번째 테이블에서는 심각한 문제가 확인됐습니다. 위쪽 이미지와 본문 사이에 벌어진 간격은 별로 문제가 되지 않습니다. 컴퓨터 화면으로 보면 그 외에는 특별한 문제가 없어보일거예요. 하지만 스마트폰으로 보면 글상자는 회색 배경인데 본문(p태그)은 흰색으로 표현이 됩니다.



이 이미지로 보면 보다 확실하게 확인할 수 있습니다. 배경색을 검정으로 바꿨더니 뷰어의 배경 뿐만 아니라 <p> 태그도 검정색 배경이 적용됩니다. 기획자가 왜 이렇게 만들었는지 이해는 가지만, 전자책을 편집하는 입장에서는 원하는 편집이 어렵기 때문에 반갑지 않네요.

최소한 기본 배경화면만이라도 본문 태그에 하얀 배경색을 넣은걸 없애줬으면 좋겠습니다.




2. 교보eBook 뷰어


교보eBook 뷰어는 table 안에 있는 이미지의 width 100%가 적용되지 않는 것 같습니다. 본문 영역을 보면 table width 100%는 적용되는데 이미지는 조금 모자라보입니다. 

리디움 뷰어에서도 이와 비슷한 현상이 타나납니다. 크롬이나 다른 브라우저에서도 이상이 없고, 교보ebook과 리디움 뷰어에서만 이런 현상이 나타납니다.





3. 알라딘 eBook 뷰어


알라딘 뷰어는 이미지의 상하 크기가 늘어나 보입니다. 다른 뷰어에서는 나타나지 않는 현상이고, 알라딘 뷰어에서만 이렇게 표현이 됩니다.



4. 리디북스


리디북스 뷰어는 캡쳐가 되지 않습니다. 리디 뷰어 역시 예스24나 알라딘 뷰어에서처럼 위쪽 이미지와 본문 사이에 약간의 간격이 보입니다. 이 외에는 다른 문제가 보이지 않았습니다.



저처럼 table로 글상자를 만들려면 유통사 뷰어를 꼭 확인해 보세요. PC와 차이가 많이 나고, 뷰어별로도 차이가 심하기 때문에 원하는 모양의 편집을 얻기 어려울 것 같습니다. table 대신 div 태그로 글상자를 만드시길 권해 드립니다.

반응형