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

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

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

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

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

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

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

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

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

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

오른쪽이 EPUB입니다.

 

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

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

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

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

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

 

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

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

 
반응형
posted by 내.맘.대.로 2021. 12. 8. 13:03

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

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

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

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

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

11월은 제작 물량이 엄청 밀려서 정신이 없었네요.

어제 새벽 작업을 끝으로, 들어온 모든 작업 마무리를 하고 이제 숨좀 돌리게 됐습니다.

너무 오래 글을 올리지 못해서 ㅜ.ㅜ

숨 돌리자 마자 바로 팁 하나 올립니다.

오늘 소개할건 shy

말 그대로 부끄러워 하는 코드예요.

뭔 소리인고 하니,

마침 이런 샘플이 딱 걸리네요.

사실 이 책 편집하다 생각나서 글을 올리는 것이지요.

이런 경험 많이 해 보셨을거예요.

한번도 경험 없다면, 제작을 별로 안해본 분일테고요.

이걸 해결하기 위해 많은 분들이

word-break : break-all;

이 스타일을 추천할거예요.

그런데 이 스타일에는 문제가 하나 있습니다.

이 책에 PidginConversation 이런 단어가 있어요.

띄어쓰기 잘못한거 아닙니다. 단어가 저렇게 들어있어요.

word-break 스타일을 적용하면 저 단어가

Pidgin

Conversation

이렇게 되거나,

Pidg

inConversation

이렇게 되거나

PidginConver

sation

이렇게 됩니다.

의미가 완전히 달라져요.

이럴 때 영어권에서는 하이픈을 사용합니다. 잘리는 단어 뒤에 하이픈을 붙여서 두 단어가 연결됐다고 표시를 합니다.

Pidgin-

Conversation

이러면 줄바꿈이 되어 단어가 잘려도 Pidgin와 Conversation는 하나라는 뜻입니다.

그렇지만 줄바꿈을 위해 Pidgin-Conversation 이렇게 넣을 수는 없잖아요.

줄바꿈이 없으면 PidginConversation 이렇게, 줄바꿈이 되면 Pidgin-Conversation 이렇게 넣을 방법이 없을까요?

이때 필요한게 shy입니다.

shy는 줄바꿈이 없을 때는 부끄럼쟁이처럼 숨어있습니다. 말 그대로 shy예요.

하지만 줄바꿈이 생기면 잘린 부분에 표시가 되지요.

빨간색 하일라이트 부분 보이세요?

저 하이픈이 shy 코드입니다.

update_typing_icon 같은 다른 단어에도 shy 코드가 들어있지만, 줄바꿈 된 단어(영어 단어가 아닌거 아시지요?)에서만 shy가 표시됩니다.

뷰어 특성에 따라 shy가 지원되지 않을 수 있어요.

다 지원은 하지 않지만, 그래도 지원하는 뷰어는 더 잘 보이게 만들고 싶다면 넣어주세요.

word-break와 shy를 같이 사용하면 됩니다. 그냥 shy만 넣어도 강제 줄바꿈 해 주는 뷰어가 있는데, 그렇지 않은 뷰어도 있으니 word-break를 같이 쓰는게 좋아요.

shy가 뭔지, 어떻게 넣는지, word-break가 뭔지는 공부하시라고 설명 생락^^

그리고 sigil에서 코드 정리 하면 shy가 사라진다고 하는 분들이 있는데,

이 역시 sigil 공부를 하면 해결됩니다. 역시 설명 생략~

반응형