posted by 내.맘.대.로 2022. 9. 1. 11:16

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

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

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

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

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

728x90
Borkify_0.2-plugin.zip
0.02MB

 

질문에 답변을 하다 보면 가장 많이 반복하는 얘기 중 하나가

질문을 하려면 정확한 정보를 내놔라 였습니다.

질문이 이런 식이에요.

'폰트가 적용되지 않아요. 어떻게 해야 하나요?'

이걸로 끝.

뭐, 저 정도만 있어도 3~4가지 원인으로 해결 방법을 정리해 줄 수 있지만,

질문이 저리 성의 없으면 답변을 해 주고 싶은 마음도 안들어요.

이런 질문도 많아요.

'오류가 나요. 어떻게 해야돼요?'

누가 답변좀 해보실래요? 어떻게 해야 하는지?

 

무슨 오류가 어떻게 생기는지에 대한 설명 없이,

그냥 오류가 난다고 하면 답변을 하고 싶어도 답을 할 수 없습니다.

그런데, 이렇게 질문을 하는 이유가 있을거예요.

수업을 하면서 물어보면, 자신도 뭘 어떻게 해야 할지 모른다는거예요.

질문도 알아야 하는거잖아요.

아무 것도 모르니 질문 조차 제대로 하지 못하는 것이지요.

이럴 때는 아주 간단한 방법이 있습니다.

EPUB을 첨부해 올리면 돼요.

그럼 저렇게 한줄만 써도 잘 아는 사람들이 원인 파악해서 수정까지 해 줄 거예요.

그럼 내 EPUB을 통으로 올리라고?

네. 그렇게 하면 됩니다.

하지만 문제가 있지요. 내 책을 아무런 보호장치 없이 올리라니...

이럴 때 이 플러그인을 써보세요.

이 플러그인으로 파일을 저장하면

본문이 이렇게 됩니다.

이 플러그인은 Borkify라는 플러그인을 한글에서 작동하도록 수정한 것이에요.

https://www.mobileread.com/forums/showthread.php?t=263156

 

이게 영어만 지원해서, 영어 단어를 한글로 바꿨습니다.

저걸 쓴다고 지금 편집하고 있는 책이 저렇게 엉망이 되지는 않아요.

편집하고 있는 책은 그대로 두고, 저렇게 엉망으로 만들어 따로 저장만 해 줍니다.

이제 EPUB 편집하다 문제가 생겨서 질문을 하려면, EPUB 파일을 올리세요.

그러면 누군가가 정확한 해결 방법을 찾아서 알려줄 거예요.

CSS나 HTML 저작권은 어쩌냐고요?

그럼 질문을 하지 않으면 됩니다.

책 한권 만드는데 필요한 CSS와 HTML에 저작권을 주장하는 것 부터가

'나 실력 형편 없어. HTML과 CSS가 뭔지도 몰라.'

라는 인증이지요.

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2022. 8. 30. 09:39

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

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

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

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

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

728x90

인디자인이나 쿽, hwp, docx 문서를 Sigil로 편집을 하다 보면

쓰레기 코드와 클래스, ID가 엄청나게 나옵니다.

몇만개는 기본이고, 몇십만개가 나올 때도 있지요.

실력 없는 사람들은, 뷰어에서 보이지 않으니 그냥 둬도 된다고 얘기합니다.

정말 그냥 둬도 될지는 스스로 생각해 보세요.

인터프리터 방식의 html에 본문 보다 많은 쓰레기 코드가 들어있으면 어떤 문제가 생길지,

아주 간단한 상식만 있으면 누구나 알 수 있습니다.

뭐, 본문이 20만자인데 쓰레기 코드가 20만개...

이런 것 부터가 문제인데 이게 문제가 아니라고 하면... 아닌거지요.

그런데,

진짜 문제, 실력 없는 사람들이 그냥 둬도 아무 문제 없다고 주장하는 진짜 이유가 있지요.

아무리 적어도 몇천개, 기본 수만개요 많을 때는 수십만개나 되는 코드를

무슨 수로 다 정리를 하냐.

정리 할 능력이 안되니 그냥 두라는 거예요.

이런 코드는 최종 파일에 이렇게 정리가 되어야 합니다.

sigil_not_in_toc는 스타일 없어도 필요한 클래스인거 아시지요?

그런데 Sigil에는

능력 없는 사람도 이런 쓰래기 코드를 정리해 주는 플러그인이 있습니다.

Sigil은 전자책 만들 때 필요한 웬만한 기능은 기본으로 갖추거나 플러그인으로 제공해요.

당연히 쓰레기 코드 정리하는 플러그인도 있습니다.

이 중 cssUndefinedClasses는 쓰레기 코드 중 ID와 클래스를 삭제해 주는 플러그인입니다.

지정되어 있지만 사용하지 않은 ID(쿽 파일에 엄청 많아요)

클래스가 지정되었지만 css파일에 없는 클래스

이걸 클릭 한번에 해결해 줍니다.

https://www.mobileread.com/forums/showthread.php?t=332317

실행을 하면 이렇게 지정은 되었지만 CSS에는 없는 클래스 목록이 표시됩니다.

이 중 삭제를 할 항목을 체크하고 [Proceed]를 눌러주면 끝~

참 쉽지요.

이젠 누가 쓰레기 코드 그대로 둬도 된다 그럼 '응. 넌 초보' 라며 살짝 무시해 주세요.

(물론, 입문 수업에서 '코드 정리 어려우면 그냥 두세요'라고 강사가 말한다면, 그건 이유가 있는거예요.)

이 플러그인은 양날의 칼입니다.

잘 쓰면 약이지만, 잘못 쓰면 독이에요.

전자책 편집 끝내고, 검수도 다 끝내고, 스타일 다 제대로 들어갔을 때

쓰레기로 들어가 있는 클래스를 삭제할 때 아주 유용합니다.

인디자인 파일 편집 끝낸 후에 쓰레기 클래스 찾아 보면 수백개씩 나오지요.

이런거 클릭 한번에 정리할 수 있어요.

하지만, 진짜 쓰레기 값인지 아니면 필요한데 놓친 것인지 구분을 해서 삭제를 해야돼요.

사용 방법을 제대로 알아야 강력하고 편리한 플러그인입니다.

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2022. 7. 27. 14:43

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

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

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

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

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

728x90

전자책 편집하다 보면 테두리를 그릴 때가 많습니다.

상하좌우 같은 모양의 테두리는 쉽게 그리는데,

네 모서리 모양이 다르면 어려워 하는 분들이 많은 것 같아요.

이렇게 네 모서리 모양이 다를 때는 어떻게 할까요?

테두리 그리는건 쉽게 생각하세요.

물론, 어려운 테두리도 있습니다.

일정한 패턴 없이 중구난방인 선으로 테두리를 그리면 CSS로 처리하기 어렵지요.

하지만 네 모서리만 모양이 다르다면 어렵지 않아요.

테두리 그리는 법은 여러번 설명했는데,

border-image를 사용합니다.

선이야, 그냥 border 쓰면 되고,

border로 그릴 수 없는 테두리는 border-image를 사용하지요.

border-image 사용법을 익히면 이런 테두리는 어렵지 않게 그릴 수 있어요.

border-image 사용법은 여기에...

https://www.w3schools.com/cssref/css3_pr_border-image.asp

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2022. 7. 27. 09:42

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

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

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

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

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

728x90

이런 스타일입니다.

chapter 1 ──────

이렇게 제목 번호 뒤에 선이 있습니다.

이 선을 그릴 때 예전에 쓰던 스타일은

<div class="chapNo">chapter 1</div>

이렇게 하고

chapNo의 중간에 선으로 된 배경 이미지를 넣고

안쪽 span을 흰색 배경을 채워 chapter 1쪽우로 넘어온 배경선을 숨겼지요.

그런데 이렇게 하면 배경색을 바꿨을 때 chapter 1 부분이 하얗게 보이는 문제가 있었습니다.

이를 해결하려고

<div class="chapNo"><span>chapter 1<span><span></span></div>

이렇게 한 후 chapNo에

display : flex;

앞쪽 span에 적당한 width, 뒤쪽 span에 선배경

이렇게 처리를 했습니다.

그런데 태그가 너무 복잡해졌지요.

그러다 문득, calc가 생각이 났네요.

그래서

<div class="chapNo">chapter 1</div>

이렇게 한 후

chapNo에

배경선을 집어 넣는 것 까지는 똑같이 하지만

background-size를 (100% - 적당한 글자 길이),

background-position 을 가운데 오른쪽

해서 넣으니 간단히 해결이 됐습니다.

뭔 소리인지 모두 이해 하셔지요 ^^b

잘 안되시면 본인이 직접 장성한 스타일과 태그를 올려주세요.

그러면 어떤 부분이 문제인지 답변드리겠습니다.

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2022. 6. 2. 10:36

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

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

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

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

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

728x90

CSS는 계속 바뀝니다.

새로 추가되고, 없어지기도 합니다.

그래서 늘 공부를 해야하지요.

새로 추가된 CSS라고 해도, 이미 몇년 전 부터 사용을 한 분들도 많을거예요.

CSS는 표준이 되기 전에 아주 오랜 시간 테스트를 합니다.

브라우저에 적용이 된 후에도 최소 3~4년 이상 검증을 거치지요.

그래서 '난 오래 전부터 썼는데' 싶은 속성도 '새로운' 표준 CSS라고 할 때가 있습니다.

정확한 구분은 아니지만, css 속성이나 값 앞에

-moz-, -webkit- 같은 브라우저 표시를 해야 한다면 표준 검토 단계의 속성이라고 보시면 됩니다.

최근(이라 해도 2~3년 사이)에 부라우저에서 통합해 사용할 수 있게 된 속성을 3개 소개합니다.

국내 주요 유통사 전자책 뷰어에서 사용 가능한,

전자책 만들 때 아주 유용한 속성들입니다.

* 단, 구형 기기에서는 작동을 하지 않을 수 있습니다.

break-inside

이 속성은 page-break 라는 속성에서 파생된 속성입니다.

표준으로 확정되기 전에는 page-break-inside 라고 표기를 했는데,

표준으로 확정이 되면서 break-inside로 대체되었습니다.

모든 브라우저에서 break-inside를 적용할 수 있습니다.

calc

이건 속성의 값입니다.

width나 height 같이 단위를 값으로 갖는 속성에 사용할 수 있습니다.

아직 최종 확정 상태는 아니지만, 국내 주요 유통사는 모두 지원을 합니다.

이 속성은 1년 전에는 제대로 안먹혔는데, 최근에 다시 테스트를 해 보니 잘 먹히네요.

Attribute Selectors

이건 좀 오래 된 속성이에요.

아직 최종 확정 상태는 아니지만, 국내 주요 유통사 모두 지원을 합니다.

이미지나 글상자 처럼 비슷한 속성이 여려개 필요할 때 사용하면 아주 좋습니다.

똑같은 속성을 서로 다른 클래스에 무한 반복 시킬 때가 종종 있었는데,

이걸로 한방에 해결했지요.

이 3가지 속성을 사용할 때는 다음을 주의하세요.

1. 국내 주요 유통사(교보, 리디, 알라딘, 예스)의 전자책 뷰어에서 확인했습니다.

2. 안드로이드 8 이후 버전에서 테스트 했습니다. 이전 버전에서는 문제가 생길 수 있습니다.

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2022. 5. 12. 08:58

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

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

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

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

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

728x90

책 본문 영역이 아닌, 바깥쪽 여백에 정보를 넣은 편집을 난외 편집이라고 하나봅니다.

이런거요.

일리아스 같은 서사시에 원문의 번역 문장이 원문의 몇번 째 행인지 표기할 때 봤던건데,

전자책으로 이걸 편집해 달라는 요청이 들어왔습니다.

전자책에서는 여백에 난외 표기를 할 수 없습니다.

전자책의 여백은 말 그대로 뷰어가 설정하는 영역이라 그 안에 텍스트를 강제로 넣을 수 없지요.

그래서 종이책과 다른 방법을 찾아야 합니다.

저는 그냥, 난외 표기가 들어가야 하는 문장 뒤에 넣었습니다.

본문과 구분하기 위해 형광펜 스타일을 적용했고요.

난외 표기의 폭은 알 수 없습니다. 1자일 수도, 10자일 수도 있어 표기할 글자 수에 맞게 폭이 바뀌어야 합니다.

그리고, 표기할 문장이 들어간 줄을 따라가야 합니다. 글자 크기가 바뀌거나 화면 폭이 바뀌어 줄의 위치가 달라져도, 난외 표기는 특정 문장을 계속 따라가야 합니다.

 
 
Previous imageNext image
 

왼쪽이나 오른쪽에 마진을 10em 정도 주면, 종이책의 난외 편집처럼 보이게 만들 수 있지만,

그러면 스파트폰처럼 25~30자 정도 들어가는 작은 화면은 반이 여백으로 잡힙니다.

그래서 문장 끝에 스타일을 다르게 해서 난외 편집을 적용했습니다.

음... 미디어쿼리를 쓴다면, 고해상도에서 오른쪽에 여백을 설정 할 수 있겠네요.

이 것 말고 다른 방식으로 난외 편집을 했거나,

난외 편집을 위한 더 좋은 방법이 있을까요?

반응형

댓글을 달아 주세요