내맘대로의 EPUB 제작 가이드

주의!!!!!

오해하지 말아주세요. 책 내용이 부족하다는게 아닙니다 ^^;

제가 어떤 내용을 다루는지 잘 아시지요^^?

* 제일 아랫쪽에 첨부파일 있으니 참고하세요~

페레그린 시리즈를 끝내고, 설민석의 조선왕조실록을 보고 있어요. 그런데 아쉬운 편집이 2개 보였습니다. 저도 어느덧....살(나이를 공개하지 못하는점 이해하시길...). 나이드신 분들이 자주 얘기하시던 '눈이 침침해'를 서서히 몸으로 이해하기 시작했습니다 ㅜ.ㅜ

안그래도 몸이 충분히 이해하고 있는데, 이 책이 다시 한번 노안 테스트를 해주고 있네요.

각 장의 초반에 나오는 2페이지 보는데 글자가 눈에 잘 들어오지 않습니다.

스마트폰은 그나마 나은데 212ppi 해상도의 e-ink 단말기로 글자를 보면 정말 흐릿하게 보여요. 이미지 해상도도 낮아 확대를 하면 글자가 깨지는 데다가, 글자가 깨지지 않더라도 확대해서 보는 것 자체가 귀찮잖아요.

마침 얼마 전에 소개해 드린 '친절한 국문법' 편집 스타일 중 여기에 딱 맞는게 있어 실전 활용 샘플을 만들어 봤습니다.

자세한 내용은 [제작이 까다로운 책. 친절한 국어 문법 ① http://epubguide.net/197] 여기에서 2.4.2에 해당하는 글을 참고하세요^^

이 두 페이지입니다. PC로 보면 해상도가 낮아 글자가 조금 깨져도 읽을만 하지요?

이걸 해상도 낮은(1024*758 212ppi) 흑백 전자책 전용 단말기에서 읽어보세요. 눈에 엄청 힘을 줘야 합니다.

두 페이지 중 하나만 작업을 했습니다. 장 제목 페이지는 여러분들께 숙제로 남겨드리지요^^ 장 제목 페이지도 같은 방식으로 만들 수 있어요. 다만, 배경이미지를 넣어야 하고, 장 제목은 텍스트로 넣는 부분 말고, 아랫쪽에 족자에 들어있는 글자 부분에만 해당하지만요.

핵심 스타일은 이렇습니다.

● 뷰어에서는 이렇게 보여요. 글자 크기가 커지면서 2페이지로 넘어가네요. 글자 크기를 마음대로 조절할 수 있다는 장점이 있습니다.

● 이건 원본을 뷰어로 봤을 때 화면입니다. 모양새는 좀 더 있지만 글자 크기가 작아 가독성이 떨어져요.

스타일은 설명을 한번 했습니다.

스타일 설명은 [제작이 까다로운 책. 친절한 국어 문법 ① http://epubguide.net/197] 를 확인하시고, 긴 설명 대신 샘플 파일을 첨부합니다.

팀버튼 영화를 보고 책에도 관심이 생겨 읽은 '패러그린과 이상한 아이들의 집'에서 재미있는 스타일을 발견해 만들어 봤습니다.

예전에 만든적이 있는데 한글 보다는 영문에 많이 사용되는 스타일이라 사용한 적이 거의 없거든요. 그런데 이 책에 사용이 됐네요.

* 교보문고 종이책 미리보기 캡쳐

* 전자책 편집 화면

종이책과 전자책 이미지 보시면 어떤 스타일인지 한 눈에 알 수 있을거예요. 각 장의 첫번째 문단 첫번째 글자를 2줄로 크게 보여줍니다.

이 스타일은 어렵지 않아요. 이미지에서 쓰는 float 속성을 사용하면 쉽게 적용할 수 있습니다. 

전자책에 적용된 편집을 조금 수정했습니다. 전자책을 보면 첫번째 글자가 너무 커서 본문 위로 툭 튀어나와 있어요. 그게 마음에 들지 않더라구요(개취입니다. 편집이 잘못됐다는 의미는 아니니 오해하지 마세요^^)

글자 크기를 한단계 낮추고(원본은 font-size : 3em;) 글자 오른쪽 여백(원본은 margin-right:5px;) 대신 padding으로 전체 여백을 줬어요.

종이책에도, 전자책에도 들여쓰기가 되어 있지만 첫번째 글자를 강조했기 때문에 들여쓰기도 하지 않았습니다. 이 역시 편집자의 취향에 따라 선택하면 되요. 

출간된 책 중에 이렇게 첫번째 글자를 꾸민 편집이 간혹 보입니다. 이런 책을 편집할 때 활용해 보세요 ^^

CSS 스타일 중에 background 속성에 사용할 수 있는 linear-gradient라는 보조 속성이 있습니다. 

참고 : http://www.w3schools.com/css/css3_gradients.asp

CSS3 속성인데, 안드로이드 4.4 이상 버전과 같은 시기 출시된 iOS 이후 버전에서 지원이 됩니다. 국내 유통사도 공식적으로는 EPUB2를 지원하지만, 스마트폰에 내장된 웹킷을 사용하기 때문에 CSS3는 대부분 지원을 하고요. 

Gradient는 그라데이션이라고 하는 그것입니다.

왼쪽 끝에 빨간색, 오른쪽 끝에 노란색을 놓고 왼쪽에서 오른쪽으로 가면서 서서히 빨간색을 노란색으로 바꾸는 효과예요. 아래 예즐 보시면 확 이해 가실거예요.

참고로 그라데이션 효과를 주는 방식은 브라우저에 따라 조금씩 다릅니다. 오페라, 크롬&사파리, 파이어폭스, 인터넷 익스플로러가 조금씩 차이를 보여요. 그래서 위 스타일은 크롬이나 사파리가 아니면 제대로 보이지 않을거예요. 

하지만 국내 전자책 이용자는 안드로이드 아니면 iOS를 이용합니다. 안드로이드와 iOS는 웹킷이라는 브라우저 엔진을 사용하고, 전자책 뷰어도 이 웹킷을 기반으로 하고 있어요. 그렇기 때문에 웹킷에만 맞춰도 90% 이상은 표현이 된다고 보시면 됩니다.

웹킷이니 브라우저니 복잡한 얘기는 잊으시고, 국내 유통사 전자책 뷰어는 대부분 지원된다. 이것만 기억하심 될거예요 ^^

linear-gradient는 위 예시처럼 글상자에 그라데이션 효과를 주는 속성입니다. 그런데 웹킷에 재미있는 CSS3 속성이 있었네요. 이 속성을 이용해 글자에도 그라데이션 효과를 줄 수 있습니다. 웹킷만 지원하고 파이어폭스, 오페라, 인터넷 익스플로러는 지원하지 않지만, 위에 설명한 대로 안드로이드폰과 아이폰은 웹킷을 쓰기 때문에 국내 유통사 전자책 뷰어는 대부분 지원을 합니다.

글자를 빨주노초파남보 무지개처럼 꾸미고 싶을 때, 빨주노초파남보 7개 클래스를 만들고, 글자 하나 하나에 스타일을 준적이 있어요. 시간도 많이 걸리고 자연스러운 효과를 볼 수도 없습니다. 하지만 이 속성을 이용하면 자연스럽게 글자에 무지개 효과를 넣어 줄 수 있네요^^

빨간색 스타일 부분이 핵심입니다.

그라데이션은 위에서 아래로, 아래에서 위로, 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로, 왼쪽 위에서 오른쪽 아래로 등 방향을 설정할 수 있습니다. 스타일을 잘 보면 어떻게 설정하는지 알 수 있습니다.

그 외에도 색을 2개 이상 넣을 수 있고, 원형, 사각형 등으로도 넣을 수 있어요.

자세한 내용은 여기를 참고하세요

CSS3 그라데이션 : http://www.w3schools.com/css/css3_gradients.asp

위 스타일은 안드로이드 7.0 스마트폰으로 교보eBook, 리디북스, 알라딘, 예스24 뷰어에서 확인했습니다. 조금씩 차이는 있지만 모두 적용됩니다.

* 위에서 아래로

* 왼쪽에서 오른쪽으로

* 왼쪽 위에서 오른쪽 아래로

오랜만에 업데이트가 올라왔네요.

이번 업데이트에는 버그(오류) 수정과 새로운 기능이 추가되었다고 합니다.

설치해 봤는데 아이콘이 바뀌었어요. 좀 더 크고, 좀 더....디자이너가 필요해 보이는...ㅎㅎ

주요 기능 변경 사항입니다. 

1. 눈에 확 띄는 변화는 아이콘입니다. 아이콘이 커졌어요.

2. Allow editing of page-map.xml files, xpgt files and other misc xml based files inside Sigil

- misc에 있는 xml 파일을 수정할 수 있게 했다고 하는데 안되네요. 설정상의 문제인지, 특별한 방법이 있는건지 모르겠어요. 확인 되면 다시 정리하겠습니다.

3. 파이선, J 쿼리, QT(미리보기 엔진 쯤으로 생각하심 됨)가 업데이트 되었습니다. 이건 그렇구나 하고 알아두심 되요.

4. Make tooltips for Run Plugin Icons show the name of the selected plugin on hover

- 플러그인 바로실행(?) 아이콘에 커서를 올리면 어떤 플러그인인지 이름이 나옵니다. 저처럼 기억력 나쁜 사람들을 위해 꼭 필요한 업데이트네요. 다음엔 아이콘도 바꿀 수 있도록~~

Sigil을 설치하신 분들은 자동으로 업데이트 공지가 뜹니다.

Sigil을 처음 설치하시는 분들은 위에 있는 파일 다운로드 url을 따라 들어가면 파일을 다운받을 수 있습니다.