주요 유통사 뷰어 표현성 비교

분류없음 2018.04.26 11:27
주요 유통사 뷰어 표현성 비교(모두 보기 http://bit.ly/2Fju5mG)

스타일/기능추가 스타일비고교보문고리디북스알라딘예스24
OS 지원 범위Android 4.44.0.44.0.44.0.4
저장위치내부/외부내부/외부내부/외부내부/외부
화면캡쳐자체기능사용차단
EPUB3✖︎
Fixed-layout✖︎✖︎✖︎
Script✖︎✖︎
MathML✖︎✖︎✖︎✖︎
팝업주석Footnote(같은 파일 안에 주석 포함)✖︎
display : none;기본 적용✖︎
CSS 적용✖︎
Endnote(다른 파일 안에 주석 포함)✖︎✖︎✖︎
글꼴 등 스타일✖︎✖︎✖︎
body
background-color
화면전체기본마진 제외화면전체기본마진 제외
border화면 전체, 첫페이지만, 밀림현상기본 마진 제외기본 마진 제외기본마진 제외, 첫페이지만
padding✖︎✖︎


작년 9월(http://epubguide.net/241)부터 틈날 때마다 조금씩 업데이트 하던건데 간만에 업데이트 해서 공유합니다.


표현성 비교가 왜 필요한지 모르는 분들을 위해 예를 하나 보여드릴게요.


아래 이미지만 봐도 감이 딱! 하고 오는 분이 계실거고, 아래 이미지의 의미가 무엇인지 파악이 안되는 분도 계실거예요.

전자책을 제작하며 표현성 문제를 경험하신 분들이라면 설명하지 않아도 이해하실거예요.


EPUB은 표준입니다. 적합성에 문제가 없는 EPUB은 어떤 EPUB 뷰어에서도 잘 보여요.

EPUB 표준문서에는 뷰어가 지켜야 하는 규칙도 들어있습니다. 이 규칙을 잘 지키면 표준 EPUB 뷰어예요.


만약 뷰어가 지켜야 하는 규칙이 10개인데 어떤 뷰어는 자체적인 규칙을 포함해 기본규칙10개 + 유통사 규칙 5개를 넣는다면?

이 역시 표준 뷰어입니다.


그리고, 이 부분이 표현성에서 중요한데,

IDPF 표준문서에 규칙을 지켜야 한다는 내용은 있지만 '어떻게' 지켜야 하는지에 대한 설명은 없습니다.

그래서 규칙1을 지킨다 해도 뷰어마다 규칙1이 적용되는 방식은 제각각일 수 있어요.


여기서 표현성 문제가 생깁니다.


표현성 비교표에서 body > background-color 항목을 보고 아래 이미지를 보세요.

모두 같은 EPUB입니다. 속성은 단 하나, 

<body style="background-color : red;">


교보 뷰어에서는 화면 전체가 빨간색으로 표현됩니다.




알라딘 뷰어 역시 화면 전체가 빨간색으로 표현됩니다.


리디 뷰어(캡쳐 방지때문에 일부만 보여요)는 뷰어의 자체 테두리가 있어 테두리 안쪽만 빨간색이 됩니다.



iBooks는 뷰어의 자체 테두리도 있고, 높이도 본문 내용에 따라 달라집니다.


캘리버는 교보, 알라딘처럼 전체가 빨간색입니다.


뷰어 모두 표준을 지켰습니다. 어떤게 더 좋다고 말 할 수도 없습니다. 각각 장단점이 있어요.

스타일은 하나인데 표준을 지킨 뷰어에서 같은 스타일이 조금씩 다르게 보입니다.

전자책 제작자라면 뷰어에서 스타일이 어떤 형태로 보이는지 잘 알아야되요.

그렇지 않으면 편집 프로그램에서 의도했던 대로 보이는데 유통사 뷰어에서는 다르게 표현될 수 있습니다.


주요 유통사 표현성 비교는

뷰어의 정책에 따라 큰 차이가 날 수 있는 CSS 스타일이나

전자책 편집에 활용할 만한 CSS3 스타일이

각 유통사 뷰어에서 어떻게 보이는지를 정리한 파일입니다.


CSS 외에도 편집에 쓰이는 기술들 중 뷰어에 따라 차이가 나는 것들도 포함되어 있습니다.


전자책 뷰어는 수시로 업데이트 되기 때문에 테스트 날짜를 표시했습니다.

테스트한 날짜에는 문제가 있는데 업데이트 해서 해결이 됐을 수도 있으니, 잘못된 부분 발견하시면 알려주세요.


그리고 전자책 만들다 표현성 문제가 있는 태그를 발견하시면 공유해주세요. 혼자서는 테스트 하기 어렵네요 ^^;

설정

트랙백

댓글

분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때

전자책을 만들었는데 썸네일에 표지이미지가 보이지 않을 때가 있습니다.
'지금 하지 않으면....' 이란 책의 표지가 초록색으로 보이지요? 두칸 옆에 있게 같은 책이에요.
두 파일은 똑같습니다. 딱 2가지 빼면요.




윈도우에서도 표지가 보이는지 모르겠지만, 맥에서는 표지 설정이 안된 책은 이렇게 보입니다.



표지가 보이지 않는 책을 Sigil로 열어주세요.
표지에 해당하는 파일을 선택한 후 마우스 오른쪽 버튼을 누릅니다.


그럼 이렇게 바로가기 메뉴가 뜨고 중간 쯤에 [Add Semantics...]라는 메뉴가 나옵니다.
이 메뉴를 선택하세요.


[Add Semantics...]의 대화창입니다.
이 대화창에서 [표지]를 선택하세요.


아직 끝이 아닙니다.
표지 이미지 파일도 표지로 등록을 해줘야되요.
표지 이미지 파일을 선택한 다음 마우스 오른쪽 버튼을 누릅니다.
바로가기 메뉴가 나오면 [표지 그림]을 선택하세요.



뷰어에 따라 표지.xhtml 파일과 표지 이미지 중 하나를 표지로 보여줍니다. 
 중 하나만 하면 표지가 제대로 표시되지 않는 뷰어가 생기니 둘 다 해주시는게 좋아요.

이 두 정보는 opf라는 파일에 저장됩니다. 
opf에 표지 정보가 제대로 저장이 되면
탐색기에서 이렇게 표지가 보여요.



그리고 서재에서도 표지가 표시됩니다.


끝으로...
표지 정보를 제대로 넣지 않은 EPUB이 너무도 많아
국내 전자책 유통사에 등록된 EPUB은 opf의 표지 정보를 이용하지 않습니다.
전자책 파일 등록할 때 업로드 한 표지 이미지로 서재 표지 정보를 표시합니다.
그러니 테스트를 위해 유통사 뷰어에 올렸는데 표지정보가 보이지 않아도 걱정 안해도 되요.
물론, 당연히, 반드시 표지 정보를 넣어야 하지만
표지 정보를 깜빡 해도 서점에 서지정보 등록할 때 표지 이미지를 잘 올렸다면 유통에는 문제가 없습니다.

설정

트랙백

댓글

EPUB2로 해결할 수 없는 문제

안녕하세요~


오늘은 전자책으로 해결할 수 없는 문제를 짚어보려고합니다.


메일로 어떤 분이 문의를 주셨어요.


왼쪽 페이지 아래에 이미지가 들어가야 하는데 왼쪽엔 공백이 생기고 이미지가 오른쪽으로 넘어가는 문제였습니다. 


조금 다급하셨던 것 같은데 해결 방법이 없어 이미지를 줄이거나, 왼쪽/오른쪽 어울림 처리로 편집을 수정하시라는 답변을 드렸습니다.



오늘은 왜 이런 형태는 해결 방법이 없는지 설명드리려고 합니다.

해결 방법이 아주 없는건 아니에요. @media 룰을 이용해 화면 크기에 따라 다르게 대응하거나 Javascript 를 이용해 해결할 수 있습니다. 하지만 @media룰도, Javascript도 모두 EPUB3에서 사용할 수 있습니다. EPUB2에서는 사용할 수 없어요. 


결론은 편집을 바꾸는 방법 외에 EPUB2로는 해결할 수 없습니다.


이미지는 텍스트에 따라 위치가 바뀝니다. 종이책도 마찬가지예요. 모든 편집자들이 이렇게 텍스트와 텍스트 사이에 이미지가 배치되기를 원합니다.


그런데 텍스트가 많아 이미지가 들어갈 수 있는 영역이 이렇게 작다면 어떡해야 할까요?


종이책에서는 텍스트를 옮겨 해결할 수 있습니다. 텍스트를 오른쪽 페이지로 옮기고 이미자가 들어갈 위치를 만들 수 있지요.


종이책을 편집하던 분들은 전자책에서도 이렇게 해달라고 요구를 합니다. 저도 이런 요구를 많이 받았어요.


그런데 EPUB은 '가변적'입니다.

종이책은 편집이 끝나 종이에 인쇄를 하면 우주가 멸망해도 편집이 바뀌지 않습니다. 신이 장난을 친다면 모를까 절대 편집이 바뀔 일이 없지요.


종이책 편집자의 요구를 반영해 텍스트를 페이지 오른쪽에 옮겨봅니다.

그런데 독자가 글자 크기를 키운다면?

똑같은 문제가 다시 생깁니다.


독자가 글자 크기를 줄이면 문제가 있던 부분이 해결이 될 수 있습니다.


독자는 전자책을 볼 때 글자 크기를 몇으로 놓고 볼까요?


100명의 독자가 전자책을 본다면 100명 모두 다른 형태로 전자책을 봅니다. 똑같은 전자책을 보는 독자는 단 한명도 없습니다.


글자 크기, 줄간격, 화면 여백, 글꼴 배경색 등 독자가 원하는 형태로 바꿔 보기 때문에 특정 뷰어에서 특정 글자크기로 볼 때 편집이 이상해도 99%의 독자는 아무 이상 없이 볼 수 있고, 특정 뷰어, 특정 글자 크기에서 아무 문제가 없어도 99%의 독자는 편집이 엉망인 책을 볼 수 있습니다.



오늘 문의를 받은 이미지는 위에 설명한 상황보다 더 안좋았습니다. 이미지가 화면 한 페이지를 거의 차지할 정도로 컸거든요.

이런 상황이면 거의 모든 뷰어에서 이렇게 보일거예요. 뷰어 위쪽에 1~2줄만 텍스트가 들어가도 이미지는 다음 페이지로 넘어갈 수 밖에 없습니다.


이럴 때 저는 제작을 의뢰한 분께 설명을 드립니다.

이미지가 얼마나 중요하냐, 이미지의 편집을 바꿔도 되냐?

이미지의 위치를 바꿔도 문제가 없느냐?


편집자를 설득하기 어려운 경우도 있지만, 결과물을 보여주고 글자 크기를 조절해 가며 어떤 문제가 생기는지를 설명하면 대부분은 이해를 해줍니다. 


본문 중간에 들어가는 이미지는 이렇게 왼쪽/오른쪽 어울림 처리를 하거나, 이미지 크기를 줄여서 해결합니다. 이미지 크기를 줄여도 본문 아래에 공백이 나오는 문제는 생깁니다. 하지만 텍스트가 화면의 1/2 이상 들어가기 때문에 위에 1~2줄 텍스트가 보이고 나머지는 텅 빈 공백으로 남는 것 보다는 보기 좋지요.


이렇게 편집한 책이 있습니다. 얼마 전에 제작 과정 소개해 드린 책이에요.

여름오후 출판사에서 나온 '나에게 어울리는 삶을 살기로 했다'는 책의 본문 중간에 한페이지 짜리 삽화가 들어갑니다. 



하지만 위와 같은 문제가 생길 수 있어 본문 제일 끝에 삽화를 넣었습니다.

삽화가 본문의 특정 내용과 연결이 되지만, 본문 전체 맥락과도 연결되어 있어 본문 끝부분어 넣오도 어색하지 않았습니다. 

두 페이지로 보면 이렇고, 스마트폰으로 본다면 '갖다 놓으면 더 좋고요.'를 보고 다음 페이지에 삽화가 나오겠지요.


만약 이 삽화가 본문 중간에 나온다면 고민을 해야합니다. 이 이미지는 1/2 크기로 줄일 수도, 오른쪽/왼쪽 어울림 처리도 할 수 없거든요.

이런 상황이면 이미지 부분을 자르고 텍스트는 캡션으로 넣었을 것 같아요. 삽화 위에 텍스트가 얹힌 부분을 잘라내면 이미지 높이(height)가 1/2로 줄어듧니다. 그럼 왼쪽 빈 공간에 이미지가 들어가겠지요. 텍스트는 캡션 스타일을 잘 만들어 이미지 아래에 넣으면 어떨까요?

아니면 왼쪽 공백을 무시하고 한 페이지로 들어가는 것도 하나의 해결 방법입니다.


EPUB2에서는 이런 문제들이 종종 생깁니다. EPUB은 HTML로 구조를 만드는데 HTML은 페이지가 아닌 스크롤을 고려해 만든 언어예요. 그래서 스크롤 화면에서는 문제가 없지만 페이지 화면에서는 생기는 문제가 있습니다.


이런 문제를 해결하는 방법은 '그에 맞는 편집을 찾는다'인 것 같아요.


그래도, HTML과 CSS로 저 문제를 해결할 방법을 고민해 봐야겠네요 ^^

성공하면 공유하겠습니다~


설정

트랙백

댓글


티스토리 툴바