posted by 내.맘.대.로 2016. 9. 7. 17:58

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

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

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

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

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

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

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

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

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


아주 어려운 문의가 들어왔습니다 ^^

본문에 노트처럼 밑줄을 긋고싶다는 내용이었는데, 처음엔 '별거 아닌데...'라고 생각을 했다가 스타일을 만들면서 CSS로는 해결 불가능하지 않을까 하는 결론을 내렸네요. 자바스크립트를 이용하면 가능할 수도 있지만, 스크립트를 지원하는 유통사 뷰어는 교보eBook 정도여서(국내 유통사 기준으로) CSS만 활용해야합니다. 


결론부터 말씀드리면 본문에 밑줄 긋기는 가능합니다. 하지만 변수가 너무 많아요. 고정 레이아웃(Fixed Layout)이 아니라면 뷰어마다 CSS를 받아들이는 방식이 차이가 있어 모든 유통사 뷰어를 전부 맞추기는 불가능한 것 같습니다. 방법을 더 연구해 봐야겠지만 쉽지 않네요 ^^;


먼저, 제가 찾은 방법을 알려드릴게요.


* 이 예제에 사용한 본문은 토네이도 출판사의 '무엇이평범한그들을최고로만들었을까'에서 일부 발췌했습니다.

** 뷰어 테스트는 교보문고, 예스24, 리디북스, 캘리버를 사용했습니다. 특별한 이슈가 없는 경우 뷰어 이름은 표시하지 않았습니다.


1. span 태그 사용


가장 쉽게 쓸 수 있는 방법입니다. 그리고 가장 확실합니다. 그런데 문의 주신 분이 span 태그를 사용하면 문장이 끝나는 부분에서 밑줄도 끝난다는 문제를 얘기해 주셨어요. 그래서 이 방법은 문의 주신 분이 원하는 방식이 아니었습니다. 


그래도 이 방법이 가장 확실합니다. 만약 본문에 밑줄을 그어야 한다면 2% 부족하더라도 이 방법을 권해드립니다.


#스타일


.line_dotted {

border-bottom : dotted 1px #ff0000;

}


#스타일 적용


<p>노트 배경</p>

<p><span class="line_dotted">30년 전 나는 첫 월급을 받았다. 동네 슈퍼마켓에서 점원으로 일하고 받은 첫 월급봉투에는 그리 많지 않은 돈이 들어 있었다. 겉보기에 대단한 일도 아니었다. 월급은 적고 일은 힘들었다. 전임자가 묻힌 얼룩이 채 지워지지 않은 제복을 입고 상품을 진열하고 바닥을 걸레질하는 일이었다. 무뚝뚝한 점장은 칸막이로 분리된 높은 자리에 앉아 점원들을 감시했다. 그런데도 나는 왠지 그 일을 할 때가 좋았다. 직원들 사이에 동지애가 생겨 가끔 함께 밤 외출을 나가기도 했다. 나는 신속한 계산으로 손님을 만족시키는 나 자신이 자랑스러웠다. 쓸모 있는 사람이 된 기분이었다.</span></p>





본문 끝에서 밑줄이 끝나기 때문에 노트 느낌을 살릴 수 없는 단점이 있음



2. 배경이미지 활용


이 방법은 이미지를 밑줄로 쓸 수 있다는 장점이 있습니다. 다양한 모양의 밑줄이 가능합니다. 제가 사용한 밑줄 배경은 아래 이미지입니다. 



노트 배경 이미지


배경 넣는 방법은 --> http://epubguide.net/182 여기를 참고하세요


이 방법에는 2가지 문제가 있습니다. 


문제1. 글자 크기, 글자의 줄 간격을 고정시켜야 한다.

배경 줄 간격이 고정되기 때문에 글자 크기를 조정해 글자가 줄 간격보다 크거나 작아지면 줄과 글자가 위치가 틀어집니다.


문제2. 뷰어에 따라 다른 결과가 나올 수 있습니다.

다른 뷰어들은 괜찮은데 예스24 뷰어에서 문제가 생기네요. 뷰어에 따라 CSS를 받아들이는 방식이 약간씩 차이가 납니다. 그래서 뷰어에 따라 원하는 결과가 나오지 않을 수 있습니다.


이 방법은 제한된 공간 안에서 적은 분량의 텍스트를 표현할 때 사용할 수 있습니다. 편지나 시를 표현하기 좋겠네요.


#스타일


.note_bg {

background-image : url("../Images/note_bg.png");

width : 100%;

}


.note > p {  /*글자크기, 줄간을 배경이미지에 맞춰 픽셀단위로 고정시켜야 함*/

font-family: "NanumBarunpenR";

font-size : 15px;

line-height : 28px;

margin-left : 1em;

margin-right : 1em;

}



#스타일 적용


<div class="note_bg note"><p><br/>노트 배경</p>

<p>30년 전 나는 첫 월급을 받았다. 동네 슈퍼마켓에서 점원으로 일하고 받은 첫 월급봉투에는 그리 많지 않은 돈이 들어 있었다. 겉보기에 대단한 일도 아니었다. 월급은 적고 일은 힘들었다. 전임자가 묻힌 얼룩이 채 지워지지 않은 제복을 입고 상품을 진열하고 바닥을 걸레질하는 일이었다. 무뚝뚝한 점장은 칸막이로 분리된 높은 자리에 앉아 점원들을 감시했다. 그런데도 나는 왠지 그 일을 할 때가 좋았다. 직원들 사이에 동지애가 생겨 가끔 함께 밤 외출을 나가기도 했다. 나는 신속한 계산으로 손님을 만족시키는 나 자신이 자랑스러웠다. 쓸모 있는 사람이 된 기분이었다.</p>...







다른 뷰어에서는 배경이 잘 표현되지만 예스24 뷰어에서는 문제가 생김

뷰어에 따라 스타일을 적용하는 방식이 다르기 때문에 다른 뷰어에서도 비슷한 문제가 생길 수 있음



3. CSS로 밑줄 그리기


글자 크기를 바꾸면서 span 태그의 문제도 해결할 수 있는 방법입니다. background-image 속성에 이미지 대신 linear-gradient로 배경 줄을 그리는 방법이에요. 이 방법을 쓰면 줄 간격을 글자 크기에 맞춰 조절할 수 있습니다. 


이 방법도 문제가 하나 있습니다. 페이지가 넘어가면서 줄과 글자 배치가 틀어집니다. 이 역시 뷰어의 특성때문이라 CSS로 맞추기에는 한계가 있습니다. 이 방법 역시 편지, 노트, 시 처럼 제한된 공간 안에서 제한된 텍스트를 보여줄 때는 사용할 수 있겠지만 본문 전체에 밑줄을 긋기에는 적절하지 않습니다.



# 스타일


.line_draw > p {

background-image : linear-gradient(#0000ff 1px, transparent 1px);

background-size: 100% 1.8em; /*이미지와 달리 배경 사이즈를 em(글자크기) 단위로 조절할 수 있어 글자크기를 조절할 수 있음*/

}


# 스타일 적용


<div class="line_draw">

<p>30년 전 나는 첫 월급을 받았다. 동네 슈퍼마켓에서 점원으로 일하고 받은 첫 월급봉투에는 그리 많지 않은 돈이 들어 있었다. 겉보기에 대단한 일도 아니었다. 월급은 적고 일은 힘들었다. 전임자가 묻힌 얼룩이 채 지워지지 않은 제복을 입고 상품을 진열하고 바닥을 걸레질하는 일이었다. 무뚝뚝한 점장은 칸막이로 분리된 높은 자리에 앉아 점원들을 감시했다. 그런데도 나는 왠지 그 일을 할 때가 좋았다. 직원들 사이에 동지애가 생겨 가끔 함께 밤 외출을 나가기도 했다. 나는 신속한 계산으로 손님을 만족시키는 나 자신이 자랑스러웠다. 쓸모 있는 사람이 된 기분이었다.</p>...








테스트한 뷰어에서는 페이지가 넘어가면 줄간격이 틀어진다. 스크롤 방식이면 문제가 없지만 페이지 넘김 방식의 뷰어에서는 어쩔 수 없는 현상이다.






결론. 

고정 레이아웃(Fixed Layout)을 사용하거나 EPUB3로 스크립트를 적용하면 본문에 밑줄을 그릴 수 있다. 하지만 모든 뷰어에서 문제 없이 표현되도록 EPUB2에서 CSS만으로는 노트 느낌이 나게 밑줄 긋는건 거의 불가능하지 않을가 싶어요. 방법을 찾으신 분 있으면 공유 부탁드려요 ^^

반응형