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자 정도 들어가는 작은 화면은 반이 여백으로 잡힙니다.

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

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

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

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

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2022. 3. 18. 12:59

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

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

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

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

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

728x90

한시는 번역문과 한자를 함께 표기하는 경우가 많습니다.

다양한 편집 방식이 있겠지만, 이런 편집을 많이 합니다.

이걸 전자책으로 표현하려면 어떻게 할까요?

방법은 여러가지가 있습니다.

float을 써도 되고, greed를 쓸 수도 있습니다.

table을 만드는 방법도 있지요.

제가 권하고 싶은건 flex예요.

한자의 한시 부분은 글자 수가 같을 때가 많아요.

주석이 붙거나 해서 한두글자 정도 차이는 날 수 있지만,

대부분 글자가 일정합니다.

하지만 한글 번역 부분은 길이가 제각각이지요.

 
 
 

flex를 쓰면 폭이 좁거나 아주 넓어져도 깨지지 않게 편집을 할 수 있습니다.

줄이 바뀌어도 원문의 위치가 일정하고요.

flex를 쓰되, 한시 원문은 일정한 넓이로 고정시키고

한글 번역 부분만 폭에 따라 줄이 바뀌게 합니다.

줄이 바뀌면 들여쓰기를 해서 같은 줄이라고 알려주는 것도 좋습니다.

flex를 쓰면 상하 정렬도 쉽습니다.

그래서 한시 원문이 한글과 같이 시작하게 할 수도,

줄이 바뀌면 바뀐 줄에 한시가 나타나도록 할 수도 있지요.

 

flex 사용법은 여기에 잘 나와있습니다.

https://www.w3schools.com/css/css3_flexbox.asp

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2021. 12. 10. 09:04

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

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

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

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

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

728x90

이런 스타일을 뭐라고 이름 붙일지 모르겠네요.

종이책(왼쪽)에서는 왼쪽으로 페이지 세로에 꽉 차게 영역을 만든 후 본문의 제목이나 저자 설명 같은 부연설명을 넣었습니다.

다음 페이지는 왼쪽 박스 영역 없는, 배경색만 있는 페이지예요.

전자책은 페이지를 구분할 수 없기 때문에 저걸 한 페이지로 맞추려는 노력을 하기 보다는, 왼쪽 글상자를 만들고, 안에 내용을 채워 넣는게 좋아요.

오른쪽이 EPUB입니다.

 

이렇게 만들면 한가지 문제가 생깁니다.

휴대폰처럼 세로로 길면 캡처한 이미지 처럼 보입니다.

하지만 세로 폭이 좁은 화면에서는 왼쪽 글상자가 다음페이지로 넘어갈 수 있어요.

이건 그러려니 하고 넘어가야돼요.

이거 맞추겠다고 가로폭 늘리고 세로폭 줄이면, 더 좁은 화며에서 똑같은 문제가 생기고, 그러다 보면 가로로 넣어야 하거든요.

 

아예 EPUB용은 디자인을 바꿔 가로로 넣는 것도 좋습니다.

하지만, 디자인은 유지하면서 글상자가 다음 페이지로 넘어가면 안된다. 이런건 불가능하지요. 네모난 동그라미를 그려달라는 소리와 같아요.

 
반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2021. 10. 22. 10:35

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

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

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

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

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

728x90

전자책 좀 만들어 봤다 하는 분들이라면 알라딘 뷰어에서 이런 현상 종종 경험하실거예요.

몇년이 지나도 수정을 하지 않는 알라딘 뷰어의 고질적인 문제입니다.

뷰어 기획자 경험으로 보면 왜 저런 문제가 생기는지 예상이 갑니다.

이미지 height를 강제로 뷰어 높이에 맞춰놨기 때문이지요.

그 이유야... 각자 알아서 생각을 해 보시고.

아는 분들은 아주 쉽게 해결하겠지만,

저런 현상 처음 겪는 분들은 당혹스러울 거예요.

교보, 예스, 리디, 캘리버, 리디움, 토륨, ibooks, 킨들..... 거의 모든 뷰어에서 저런 문제가 생기지 않는데, 유독 알라딘 뷰어에서만 생기니까요.

제작 의뢰라도 맡았다가 저런 문제 생기면

"다른 뷰어에서 문제 없으니 알라딘 뷰어도 문제 없어요." 라고 발뺌하기도 뭣합니다.

그냥 딱 봐도 문제로 보이잖아요.

저걸 아주 간단히 해결할 방법이 있습니다.

img {

height : auto;

max-height : 84vh;

}

CSS 앞부분에 이 코드를 넣어보세요.

max-height : 84vh;를 넣은건... 음... 직접 실험을 해보세요. 빼면 무슨 문제가 생기나.

84vh가 아닌 100vh를 넣고 교보ebook도 테스트를 해 보시고요.

왜 84가 나왔는지는 저보다 더 집요하신 어떤 분이...(카페에 열심히 활동하고 계신 분이에요^^)

전 대충 80을 잡았는데, 1단위로 테스트를 하셨더라구요.

이걸 그냥 쓰지는 마세요.

이 코드를 이해 못하고 쓰면, 이 코드 때문에 생길 수 있는 다른 문제를 처리할 수 없습니다.

왜 저게 들어가야 하는지 이해를 하면 아주 많은 공부가 됩니다.

남이 던져줬다고 쉽게 받아먹기 보다는

남이 던져 준 것을 자기 것으로 소화하는게 더 중요합니다.

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2021. 9. 1. 09:30

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

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

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

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

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

728x90

얼마 전에 주석 숫자 맞추며 1000개짜리 아닌게 어디냐고 푸념을 했는데,

바로 다음 책이 1000개 넘는 주석, 30개 정도로 구분된 장, 각 장마다 새로 번호 시작되는 책이었습니다.

루틴이 된걸까요 ㅜ.ㅜ 말을 조심해야겠어요.

이번에 소개할 스타일은 EPUB3라면 간단하지만 EPUB2에서는 창의력이 필요한 거예요.

종이책에서는 이렇게 보입니다. 어느 부분인지 딱 감이 오시지요?

EPUB3라면 ruby를 쓰면 됩니다. 하지만 EPUB2늘 ruby를 지원하지 않기 때문에 CSS를 사용해야 합니다.

약간의 창의력(?)만 발휘하면 아주 간단히 문제를 해결 할 수 있어요.

힌트를 드릴게요.

<span class="txt_dot_top">않</span><span class="txt_dot_top">는</span><span class="txt_dot_top">다</span>

이렇게 하면 위에 점이 찍힙니다.

 

반응형

댓글을 달아 주세요