posted by 내.맘.대.로 2023. 1. 19. 09:14

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

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

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

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

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

전자책 만들다 보면 다양한 테두리를 그리게 됩니다.

테두리 모양은 전부 제각각이라 초보 편집자에게 종종 질문을 받아요.

테두리는 아무리 복잡해도 '기본'만 알면 쉽게 그릴 수 있습니다.

그 기본이란,

border(border와 연결된 속성 전부)

border-image

background(background와 연결된 속성 전부)

이렇게 3개.

이 3개가 어떻게 쓰이는지 예시로 보여드릴게요.

아래 예시 이미지는 모두 왼쪽이 종이책(PDF), 오른쪽이 전자책입니다.

1. 패턴이 들어간 테두리 선, 그리고 안쪽 영역 라운딩 처리

이런 테두리는 background-image를 사용합니다.

박스를 2개 그리지요. 패턴 이미지가 있는 바깥쪽 상자, 그리고 흰색 안쪽 상자.

안쪽 상자에 border-top-left-radius를 주면 라운드 처리를 할 수 있지요.

 

2. 너무 쉬운데 의외로 그릴 줄 아는 사람이 별로 없는 테두리

이런 테두리는 아주 그리기 쉽습니다.

border와 border-radius 속성만 있으면 됩니다. 상자도 하나면 되고요.

border-radius를 어떻게 쓰는지 공부하면, 아주 쉽게 그릴 수 있는 테두리입니다.

 

이 테두리는 여러가지로 활용을 할 수 있습니다.

예를 들어 이런거.

앞쪽에 있는 반달 모양의 원형 테두리 역시 border와 border-radius로 만들 수 있어요.

위, 아래, 좌, 우, 타원형, 원형 등 어떤 형태로든 만들 수 있기 때문에

연 평균 200~300권 만들다 보면 10번 정도 쓰게 되는 스타일입니다. 이정도면 엄청 높은 빈도예요.

3. 팁상자/상자형 각주 스타일

이건 단순하게 border만 이용하면 됩니다.

너무 쉬워서 설명할 필요도 없을 것 같지만,

의외로 float 속성을 모르는 사람들이 많아 가볍게 언급합니다.

float은 이미지에만 사용하는 줄 아는 초보 편집자가 많아요. float은 block, inline 속성 태그면 어디든 쓸 수 있어요.

 

4. border로 그릴 수 없을 때는 border-image로 그리면 된다

이런 테두리는 border로 그릴 수 없습니다.

위, 왼쪽은 2줄, 각 모서리 모양이 모두 다르고, 오른쪽 아래에는 돋보기 아이콘까지 들어있지요.

이런 테두리를 그리라고 하면 상자를 여러개 중첩시킬 생각을 하는데,

그냥 border-image를 쓰면 간단해요.

 

5. border와 background의 활용

이건 2번에서 설명한 테두리와 똑같아요. border와 border-radius를 이용했지요.

그런데 왼쪽 위에 연필 아이콘이 있습니다.

이렇게 연필 아이콘이 있으면, 이미지를 직접 삽입하는 분들이 많더라구요.

그냥 background-image를 쓰세요.

왜? 간단하니까.

종이책(PDF)

전자책(EPUB)

이미지를 직접 삽입한다면 태그가

<div class="border-box">

<div class="bullet_image">

<img src="../Images/bullet.jpg" alt="bullet image">

</div>

</div>

이렇게 되고

배경이미지를 쓰면

<div class="border-box"></div>

이렇게 끝나거든요.

6. 한쪽 모양만 다른 테두리

4개 면은 border로 그릴 수 있는데 한쪽만 그릴 수 없다면?

이렇게 복잡하게 생각하지 마세요.

그냥, 이건 border-image로 그리면 됩니다.

4번이랑 이거랑 똑같아요. 4개 면이 다르던, 한쪽 면이 다르던

border로 그릴 수 없다면 border-image를 쓰면 됩니다.

 

반응형
posted by 내.맘.대.로 2022. 12. 13. 14:36

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

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

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

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

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

EPUB은 EPUB 뷰어를 설치한 후 볼 수 있습니다.

애플의 기기(컴퓨터, 태블릿, 폰 등)에는 EPUB을 지원하는 iBooks가 기본적으로 설치되어 있고

일부 삼성 태블릿 등에도 EPUB을 볼 수 있는 뷰어가 설치되어 있습니다.

EPUB뷰어가 설치되어 있지 않다면, 뷰어를 설치해야 합니다.

다양한 뷰어가 있는데, 플랫폼에 따라 쓸만한 뷰어를 추천해 드리겠습니다.

 

1. PC

Calibre : https://calibre-ebook.com/ 

PC환경에서 가장 인기 있는 전자책 뷰어 중 하나입니다.

윈도우, 맥, 리눅스 등 다양한 플랫폼을 지원하고 EPUB2, EPUB3를 모두 지원합니다.

책을 관리할 수 있는 서재가 있고, EPUB 외에도 다양한 전자책 유형을 지원합니다.

 

Readium : https://chrome.google.com/webstore/detail/readium/fepbnnnkkadjhjahcafoaglimekefifl/related?hl=ko

크롬 브라우저에 확장프로그램으로 설치할 수 있습니다.

EPUB 표준을 가장 잘 구현한 프라우저로, 전자책 제작자라면 기본 검수용으로 사용하기 좋습니다.

크롬 확장 프로그램을 설치할 수 있는 플랫폼에 사용할 수 있습니다.

 

Thorium Reader : https://www.edrlab.org/software/thorium-reader/

장애인접근성 기능이 강화된 전자책 뷰어입니다.

Readium 리더를 기반으로 한 설치형 전자책 뷰어입니다.

 

2. 스마트폰/태블릿

Aldiko Next: 범용으로 사용하기 좋은 기본 뷰어입니다.

            안드로이드: https://play.google.com/store/apps/details?id=com.aldiko.android&hl=ko&gl=US

            아이폰 : https://apps.apple.com/us/app/aldiko-next/id1476410111

 

3. 유통사를 통해 구매한 책

교보, 리디, 알라딘, 예스24 등의 전자책 유통사는 전용 뷰어를 제공합니다.

유통사를 통해 구입한 책은 해당 유통사의 뷰어로만 볼 수 있습니다.

 

유통사 뷰어는 사용자 EPUB을 추가하는 기능이 있습니다.

유통사 뷰어를 통해서도 EPUB을 볼 수 있습니다.

 

반응형
posted by 내.맘.대.로 2022. 6. 15. 09:30

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

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

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

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

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

 

 

경기도사이버도서관 전자책(구독)

전자책 [전자책] 왕초보를 위한 클릭으로 EPUB 만들기 저자 : 박웅영출판사 : 내맘대로출간일 : 2022-06-30 책에 대한 상세내용 · 페이지 0 page · 공급사 내맘대로 · 서비스형태 EPUB · 파일크기 39.5 MB

cyberlibrary.dkyobobook.co.kr

왕초보를 위한 클릭으로 EPUB 만둘기를 경기도사이버도서관에서 대여해 볼 수 있습니다.

책 내용이 궁금하신 분, 돈 주고 사긴 싫지만 책을 보고 싶은 분은 도서관 대여를 이용하세요.

 

반응형
posted by 내.맘.대.로 2022. 3. 14. 10:06

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

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

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

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

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

https://github.com/Sigil-Ebook/Sigil/releases

 

Releases · Sigil-Ebook/Sigil

Sigil is a multi-platform EPUB ebook editor. Contribute to Sigil-Ebook/Sigil development by creating an account on GitHub.

github.com

Sigil 1.9.2 버전 업데이트 됐습니다.

1.9 버전에 큰 변화가 있어 한동안 자잘한 업데이트가 많을 것 같습니다.

업데이트는 대부분 검색 관련된 사항입니다.

먼저 검색 결과 하일라이트 문제가 해결됐어요.

검색해 보신 분은 알겠지만, 1.9.1 버전에서 검색을 하면 찾은 단어나 문장이 하일라이트 되지 않았습니다.

이 문제가 해결 됐습니다.

그리고 [모두 세기] 결과에 오류가 있었나보네요. 모두 세기 하면 몇백, 몇천개씩 나와 오류가 있는지도 몰랐네요.

저장된 검색 사용성 문제가 개선됐고, [다시 시작] 버튼이 들어가면서 [모두 바꾸기] 눌러도 일부 수정되지 않았던 문제가 해결됐습니다.

나머지 두 개는 어떤 문제인지 구현을 못해 정확한 내용을 모르겠네요.

단축키로 검색할 때 검색 속도가 너무 빨라 윈도우에서 오류가 생겼나봅니다. 이 문제를 해결했고,

찾기 결과(?)가 없을 때 오작동이 있었나본데 이 것도 수정했다고 합니다.

반응형

'Sigil 사용 설명서' 카테고리의 다른 글

Sigil 1.9.10 번역 오류 수정  (2) 2022.05.26
Sigil 1.9.10 업데이트  (0) 2022.05.24
Sigil 1.9.1 안정성 확인 - 1주일 사용기  (0) 2022.03.11
Sigil 1.9 업데이트 전 필독!  (0) 2022.03.02
Sigil 1.9 버전  (0) 2022.02.24
posted by 내.맘.대.로 2016. 6. 27. 10:58

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

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

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

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

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

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

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 
전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^
편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.


오늘은 전자책 편집 중 많이 하는 '실수'를 정리하겠습니다. 이런 실수를 해도 뷰어에서는 정상적으로 보입니다. 그래서 많은 분들이 이런 편집을 잘못이라고 생각하지 않어요. 하지만 잘못 사용한 코드는 언젠가 오류로 보답을 합니다. 아주 조금만 신경쓰면 되니까 아래 몇가지만 지켜보세요.


1. 제목은 반드시 헤딩 태드(h1 ~ h6)를 사용한다.

IDPF의 EPUB3 권고안에는 제목을 헤딩 태그를 사용하도록 강력하게 권하고 있습니다. 현재 유통되고 있는 전자책 중 제목을 헤딩 태그가 아닌 CSS 스타일과 p 태그로 지정한 책이 많습니다. 이런 책들은 뷰어에 정상처럼 보이지만 표준을 지키지 않은 편집이에요. 

시중에 유통되는 편집기 중에서도 제목을 헤딩 태그가 아닌 p태그에 스타일을 적용해 표현하는 경우가 많습니다. 편집기가 제공하는 기능이라고 표준에 맞는건 아니니 편집할 때 주의를 하세요.


2. 본문은 반드시 <p> 태그를 사용합니다.

Sigil로 편집한 책 중에 보면 <div>태그로 분문을 묶은 것을 종종 볼 수 있습니다. Sigil의 빈 화면에서 백스페이스를 마구 누르면 HTML 코드가 이렇게 되요.


<html>

<head>

<title></title>

</head>

<body>

</body>

</html>


이 상태에서 엔터를 치면 이렇게 됩니다.


<html>

<head>

<title></title>

</head>

<body>

<div><br/></div>

<div><br/></div>

</body>

</html>


여기에 텍스트를 붙여넣으면 본문 태그가 <p>가 아닌, <div>태그로 감싸지게 됩니다. 역시 뷰어에서는 아무 문제가 없어 보이지만, 아주 심각한 '실수'입니다. 본문은 반드시 <p>태그로 묶여야 하거든요. 

간혹 글상자를 만들때 이렇게 편집하는 분들도 있습니다. 


<div>글상자에 들어갈 텍스트</div>

<a href=...>링크</a>

<img src=... />


이건 표준에 벗어나지는 않지만 좋은 코드라고 보기 어려워요. 본문 내용은 <p> 태그로 묶어줘야 합니다.


<div><p>글상자에 들어갈 텍스트</p></div>

<p><a href=...>링크</a></p>

<p><img src=... /></p> (p 태그 대신 div 태그도 됨)


3. 본문 스타일은 클래스를 지정하지 마세요.

본문을 클래스를 이용해 편집하는건 제약이 있는 것도, 표준에 어긋나는 것도 아닙니다. 하지만 그래야 할 필요가 없는데 불필요한 작업을 반복해서, 그것도 수천번을 반복해서 해줄 필요는 없잖아요.

무슨 소리냐고요?

CSS에 스타일을 적용할 때 본문 전체를 대표하는 스타일을 클래스로 지정하는 분들이 의외로 많이 있습니다. 이런 식이지요.


<style>

.maintext {본문 기본 스타일}

</style>

...

<body>

<p class="maintext">본문</p>

<p class="maintext">본문</p>

<p class="maintext">본문</p>

...

</body>


책 내용의 90%가 넘는 본문 스타일을 클래스로 지정하게 되면 class="maintext" 스타일이 수천번 들어갑니다. 이렇게 편집해야 할 이유는 전혀 없습니다. 그냥 p 태그에 스타일을 적용하면 되요.


p {본문 기본 스타일}


그럼 <p> 태그로 묶여있지만 다른 스타일을 적용해야 할 때는 어떻게 해야하냐구요? 그 스타일만 클래스를 지정하면 되지요. CSS는 스타일 상속을 받지만, 마지막에 상속받은 스타일로 표현이 되기 때문에 <p> 태그에 기본 스타일을 적용한다 해도 다른 스타일을 적용하는데 아무 문제가 없습니다.


4. 불필요한 스타일은 넣지 마세요.

CSS 스타일을 만들 때 불필요한 스타일을 반복해서 쓰는 분들이 많이 있습니다. 전자책 편집기의 CSS 생성 프로그램을 이용해 만들었다고 강하게 의심이 되지만, 그래도 이런 편집은 피하는게 좋습니다.


p { 

font-family:굴림; 

font-style:normal; /*필요 없는 스타일*/

font-weight:normal; /*필요 없는 스타일*/

font-size:1em; 

margin:0pt; /*필요 없는 스타일*/

padding:0pt; /*필요 없는 스타일*/

text-align:left; /*필요 없는 스타일*/}


/*필요 없는 스타일*/이라고 표시한 항목들은 뷰어 기본 설정을 따르도록 되어 있습니다. 뷰어 기본 설정을 따르는 스타일이나 적용해도 의미 없는 스타일은 추가할 필요가 없습니다. 넣지 않아도 뷰어에서 보이는건 똑같습니다. 

그럼 넣어도 상관 없잖아 라고 생각하실 수 있는데, 저런 코드가 들어가면 뷰어는 '아무것도 아닌 스타일'로 적용을 하느라 단말기 자원을 사용하게 됩니다. 쉽게 말해 뷰어에서 책이 열리는 속도가 느려지거나, 오류가 생길 가능성이 높아진다는 얘기에요.

* 참고로 들여쓰기가 필요 없는 스타일은 text-indent : 0; 을 추가해 주는게 좋아요. 강제 들여쓰기를 하는 뷰어가 많이 있어 들여쓰기 하면 안되는데 들여쓰기가 되는 경우가 종종 있거든요.


5. 똑같은 스타일은 재활용하세요.

시중에 유통되는 전자책 중에 아래처럼 똑같은 스타일이 무한반복되는 책들이 있습니다.


.textstyle001 { font-size : 1.2em; }

.textstyle002 { font-size : 1.2em; }

.textstyle002 { font-size : 1.2em; }

...

아마도 위지윅 방식의 편집기에서 텍스트 하나를 선택해 스타일 지정, 다른 텍스트 선택 후 스타일 지정... 이런 식으로 편집을 했기 때문일거예요.

이것 역시 책 열리는 속도가 느려지거나 오류 가능성을 높이게 됩니다. 똑같은 스타일은 특별한 의미를 둔 스타일이 아닌 이상 하나만 있으면 되요.

이런 부분들만 주의를 해도 전자책의 코드가 깔끔하게 정리될거예요. 코드가 깔끔한 책은 뷰어에서 열리는 속도가 빨라지고, 오류도 적게 발생합니다. 그리고, 어떤 환경에서도 편집자가 원하는 모양으로 책이 보이고요 ^^

반응형
posted by 내.맘.대.로 2016. 6. 10. 15:34

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

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

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

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

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


이북스펍 최피디님 덕에 알게된 EPUB 검사기입니다. IDPF에서 배포하고 있는건 터미널에서 명령을 입력해야 하는 방식이고, 윈도우 터미널에서는 오류가 많을 경우 전부 확인하기 어려운 문제가 있습니다. 웹으로 제공하는 validator 역시 10mb라는 용량 한계가 있어 이미지가 많이 들어있는 파일은 검사가 어려웠고요.

이 프로그램은 설치 없이 실행할 수 있고, 로그를 저장할 수도 있습니다. 사용법도 간단합니다. 검사할 파일을 선택 후 validate 버튼만 눌러주면 되거든요.

Sigil에서 Validator가 플러그인 형태로 바뀌며 빠졌는데 EPUB 검사기가 필요하신 분들은 이 프로그램을 사용하시면 도움이 될거예요.


조금 사용을 편하게 해보려고 한글화 작업을 해봤습니다.

오류 메시지까지 모두 번역을 해보려고 하는데 시간이 좀 걸리겠네요.

기본 메뉴와 간단한 오류메시지는 한글로 번역했습니다.


프로그램을 수정한게 아니고 영문 메뉴를 한글로 바꾼거여서 이 파일을 사용하면 영문 메뉴를 사용할 수 없습니다.





반응형