무료 전자책

Tip&Tech/전자책으로 읽자 2020. 10. 22. 09:15

심훈의 상록수 무료로 보세요~

 

http://193.122.179.74/book/113

 

아이디어회관 SF / 직지 프로젝트 도서(등록 완료)

http://193.122.179.74/shelf/1

 

EPUBGUIDE.NET | Shelf: '아이디어회관 SF'

 

193.122.179.74

한국문학-단편(등록중)

http://193.122.179.74/shelf/3

 

한국문학-장편(등록중)

http://193.122.179.74/shelf/2

 

전자책 뷰어가 없어도, PC에서도, 스마트폰에서도 볼 수 있습니다.

무료 전자도서관에 들어가 책을 선택하면 오른쪽 위에 다운로드와 책보기 버튼이 있어요.

전자책 뷰어가 뭔지, 전자책을 어떻게 보는지 모르는 분은 책보기 버튼 눌러 보시고,

내 기기에서 보고싶다 하는 분들은 다운로드 받아 보세요.

 

'Tip&Tech > 전자책으로 읽자' 카테고리의 다른 글

무료 전자책  (0) 2020.10.22
직지 프로젝트 무료 전자책 보러 오세요~  (4) 2020.04.24
클리너 사용할때 주의하세요.  (0) 2017.06.29

설정

트랙백

댓글

직지 프로젝트 무료 전자책 보러 오세요~

Tip&Tech/전자책으로 읽자 2020. 4. 24. 13:45

이 전자책 서재는 사정에 따라 언제든 닫힐 수 있습니다.

http://lesiles.synology.me:8083/

 

 

재미로 시작했는데 하다 보니 제대로 관리해 봐야겠다는 생각이 드네요.

 

아이디어 회관의 직지 프로젝트(https://sf.jikji.org/) 라이브러리를 만들고 있습니다.

예전에 기회가 되서 직지 프로젝트를 기획하신 정상돈님과 연락이 되었고, 

직지의 모든 콘텐츠를 EPUB으로 제작했어요.

60여권의 SF 소설을 EPUB으로 변환해서 원본을 갖고 있지요.

 

얼마 전에 Calibre-web 서버를 알게 되서

시간 날 때 심심풀이로 갖고 놀다가, 직지 프로젝트 책을 올려야 겠다는 생각을 하게 됐네요.

 

60권 전부 올리는데 시간이 걸리겠지만 시간 나는 대로 한권씩 올릴테니, 

 

전자책을 경험해 보고 싶은 분,

어릴적 읽던 SF의 추억이 있는 분들은 방문해 주세요.

 

 

 

[Calibre Web 서재 이용 방법]

 

http://lesiles.synology.me:8083/

인터넷 브라우저를 열고 위 주소로 서재에 들어갑니다.

로그인을 하지 않아도 Web viewer로 책을 보고 다운로드할 수 있습니다.

원하는 책을 한권 선택하세요.



오른쪽 상단 2번째 줄에 책 아이콘이 있습니다.

아이콘을 클릭하면 어떤 포멧으로 볼 것인지 선택할 수 있어요.

EPUB밖에 등록되어 있지 않으니 EPUB을 선택합니다.



그럼 뷰어가 열리며 책을 볼 수 있어요.

뷰어 사용법은 생락 ^^;

 

'Tip&Tech > 전자책으로 읽자' 카테고리의 다른 글

무료 전자책  (0) 2020.10.22
직지 프로젝트 무료 전자책 보러 오세요~  (4) 2020.04.24
클리너 사용할때 주의하세요.  (0) 2017.06.29

설정

트랙백

댓글

리디움 Cloud Reader로 홈페이지에 전자책 뷰어 만들기

Tip&Tech 2019. 12. 18. 09:03

홈페이지에 전자책 뷰어를 만들어 전자책을 올리고 싶다는 문의가 종종 들어오네요.

다양한 목적이 있기 때문에 목적에 딱 맞는 방법을 모두 설명드리긴 어렵겠지만,

간단히 전자책 뷰어를 만들어 올리는 방법을 소개해 드리려고 합니다.

 

제가 이용하려는 뷰어는 Readium에서 개발하고 있는 Cloud Reader입니다.

Readium 뷰어는 다양한 환경에 적용 가능한 EPUB3 표준 뷰어입니다.

많은 전자책 뷰어가 리디움 소스를 활용하고 있고,

W3C EPUB PUB 워킹그룹에 적극적으로 활동하며 EPUB3 표준을 준수하고 있습니다.

그리고 오픈소스여서 무료로 누구나 쉽게 뷰어를 만들 수 있지요.

물론, 상업적인 용도로 쓰려면 어마어마한 회원 가입비가 들긴 하지만요 ^^

 

홈페이지에 전자책 뷰어를 만들어 전자책을 올리고 싶다는 문의가 종종 들어오네요.

다양한 목적이 있기 때문에 목적에 딱 맞는 방법을 모두 설명드리긴 어렵겠지만,

간단히 전자책 뷰어를 만들어 올리는 방법을 소개해 드리려고 합니다.

 

제가 이용하려는 뷰어는 Readium에서 개발하고 있는 Cloud Reader입니다.

Readium 뷰어는 다양한 환경에 적용 가능한 EPUB3 표준 뷰어입니다.

많은 전자책 뷰어가 리디움 소스를 활용하고 있고,

W3C EPUB PUB 워킹그룹에 적극적으로 활동하며 EPUB3 표준을 준수하고 있습니다.

그리고 오픈소스여서 무료로 누구나 쉽게 뷰어를 만들 수 있지요.

물론, 상업적인 용도로 쓰려면 어마어마한 회원 가입비가 들긴 하지만요 ^^

 

리디움 뷰어 공식 샘플

https://readium.firebaseapp.com/?

 

리디움 Cloud Reader 를 이용하면 누구나 이런 홈페이지를 만들 수 있습니다.

기본 세팅 하는데 30분도 안걸려요. 물론 책 목록을 넣으려면 시간이 좀 걸리지만요.

 

1. Readium Cloud Reader 소스 파일을 다운로드 받습니다.

 

https://github.com/readium/readium-js-viewer/releases

 

2. 다운 받은 파일을 압축을 풀어 홈페이지에 올립니다. Cloud-Reader, Readium 등 폴더를 만들어 올리는게 좋아요.

3. http://homepageurl/cloud-reader/index.html을 입력합니다.

4. 그럼 리디움 뷰어가 보일거예요.

 

참 쉽지요 ^^

그런데 Readium Cloud Reader는 아직 책 업로드를 지원하지 않습니다.

크롬 뷰어를 쓰면 업로드가 될것 같긴 한데... 나중에 시간 되면 Worker 파일을 뜯어볼까 생각중이에요.

하지만 아직은 파일 업로드가 되지 않아요.

 

그래서 책을 넣으려면 추가 작업이 필요합니다.

 

5. EPUB파일 하나를 압축 해제합니다.

6. Cloud-Reader 하위 폴더에 epub_content 라는 폴더를 만드세요.

   - cloud-reader 대신 다른 폴더명을 썼다면 그 폴더에 풀면 돼요.

   - epub_content일 필요는 없습니다. 하지만 폴더명을 바꾸면 다른 설정도 바꿔야 하니 편히 가려면 epub_content 로 만드세요 ^^

7.epub_content 펄더에 압축 해제한 파일을 업로드 합니다.

 

여기까지 했다면

 

http://homepageurl/Cloud-Reader/index1.html?epub=epub_content/Content-Folder

 

브라우저 주소 창에 이렇게 입력해 보세요.

당연히 Clound-Reader와 Content-Folder명은 제대로 입력을 해 줘야되요.

이렇게 입력하면 책이 보일거예요.

 

http://lesiles.synology.me/cloud-reader/index1.html?epub=epub_content/MO_mobydick

 

이렇게요.

 

여기까지 따라왔다면 90% 끝났습니다.

 

이제 서재 목록을 만들어 줘야되요.

 

8. 첨부 파일을 다운받으세요

   - epub_lib_test.opds : 제가 테스트용으로 사용한 모비딕 서재 목록

   - epub_library.opds : 리디움 공식 샘플(https://readium.firebaseapp.com/?)에 사용한 서재 목록

 

9. 파일명은 epub_library.opds  이걸 사용하세요. 저처럼 파일명을 바꾸려면 index.html 파일을 수정해 줘야합니다.

   

<entry>

  <title>Mobydick</title>

  <author>

    <name>test</name>

  </author>

  <link type="image/jpeg" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/OEBPS/Images/Moby-Dick_FE_title_page.jpg" rel="http://opds-spec.org/image/thumbnail"/>

  <link type="application/epub" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/" rel="http://opds-spec.org/acquisition"/>

  <updated>2016-02-12T00:00:00Z</updated>

  <id>READIUM_OPDS_0123456789_1</id>

</entry>

 

이게 책 하나의 세트입니다.

 

- 책 제목

<title>Mobydick</title>

 

- 저자 명

  <author>

    <name>test</name>

  </author>

 

- 서재의 섬네일 표지 이미지

<link type="image/jpeg" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/OEBPS/Images/Moby-Dick_FE_title_page.jpg" rel="http://opds-spec.org/image/thumbnail"/>

 

- 콘텐츠 URL

<link type="application/epub" href="http://lesiles.synology.me/cloud-reader/epub_content/MO_mobydick/" rel="http://opds-spec.org/acquisition"/>

 

- 업데이트 날짜(등록 날짜를 쓰면 됩니다. 안써도 돼요)

  <updated>2016-02-12T00:00:00Z</updated>

 

- 책 ID(ISBN이나 UID를 쓰면 됩니다)

  <id>READIUM_OPDS_0123456789_1</id>

 

10. opds 파일을 만들었다면 'epub_content' 폴더에 업로드 하세요.

11. 이제 서재 목록을 다시 들어가 보세요.

    http://homepageurl/cloud-reader/index.html

    이렇게 입력하면 책 표지가 보일거예요. 그리고 표지를 누르면 책이 열립니다.

 

    http://lesiles.synology.me/cloud-reader/index1.html

    이렇게 보이면 제대로 만든거예요^^

 

홈페이지에 서재 만들기 어렵지 않지요^^?

설정

트랙백

댓글

구 버전 Quark 압축 파일(sit) 압축 풀고 변환하는 방법

Tip&Tech 2019. 8. 26. 09:12

안녕하세요~

 

오늘은 sit로 압축된 구 버전 Quark 파일을 변환하는 방법 알려드릴게요.

쓸 일은 거의 없는데, 제가 거래하는 출판사 몇 곳에서 쿽 6.0 이전 파일을 사용합니다.

작년까지는 저도 맥을 이용해 작업을 했는데, 맥북 가격이 말도 안되게 올라 올 초부터 윈도우 노트북으로 갈아탓어요.

그러다 보니 구 버전 Quark 파일, 그것도 sit로 압축된 파일을 받으면 난감하더라구요.

 

저처럼 구형 맥에서 작업한 쿽 sit 압축 파일을 받고 난감해 하실 분이 계실까 싶어 

제가 찾아낸 방법 공유드리려고 합니다.

방법은 아주 아주 간단해요.

 

1. aladdin Expander를 설치하세요.

https://winworldpc.com/product/aladdin-expander/6x

아주 오래된 앱인데 윈도우 10에서도 잘 작동합니다.

sit expander를 여러개 설치해 봤는데 이 파일이 가장 간단하고 압축이 잘 풀려요.

 

2. aladdin Expander 설치 폴더에 stuffit5.engine-5.1.dll 파일을 복사해 넣습니다.

인터넷 검색하면 쉽게 다운로드 받을 수 있습니다.

인터넷 검색에 익숙하지 않은 분들을 위해 파일 첨부했어요.

파일 다운로드 받아서 aladdin Expander 폴더에 복사합니다.

 

3. aladdin Expander를 실행시키고 sit 파일을 불러옵니다.

압축 파일은 sit 파일이 있는 폴더에 풀려요. 그러니 압축 풀기 전에 폴더를 만들고 그 안에 Sit 파일을 넣은 다음 압축을 푸는게 좋아요.

 

4. 그럼 이렇게 이상한 파일이 생깁니다.

확장자가 붙지 않은 파일을 살펴보면 용량이 큰 파일이 보입니다.

파일에 따라 조금씩 차이는 나는데, 가장 큰 파일이 Quark 파일인 경우가 99%네요.

이 파일의 확장자를 qxp로 바꿔줍니다.

 




5. 이 파일을 인디자인으로 불러 오면 끝~~~인 경우가 있습니다.

폰트 문제가 없으면 제대로 보일거예요.

그런데 최신 Quark을 사용하거나, 글꼴이 깨지고 이상한 일본어 글자로 보인다면 변환 작업을 해야합니다.

 

Quark  최신 버전을 쓰거나 인디자인으로 열었을 때 해결이 안되면 최신 Quark 파일로 변환을 해주세요.

http://www.quark.com/en/Support/Downloads/Details.aspx?fid=289

Quark 파일 컨버터를 다운받아 qxp 파일을 변환해 줍니다.

 

 

6. 변환 프로그램으로 변환을 하면 이렇게 Quark 9x 버전의 qxp 파일이 생깁니다.

이 파일은 최신 Quark에서 열려요. 

 

 

끝으로...

인디자인이나 최신 quark으로 종이책 조판을 하는 방법은, 제 분야가 아니에요 ^^;

이쪽에 실력 있는 분들 많이 계시니 바통을 넘겨드리고,

 

전자책으로 편집을 하려면

Quark에서 EPUB으로 변환을 한 후 Sigil 같은 편집 프로그램으로 편집하면 됩니다.

 

구형 Quark 파일은 EPUB으로 변환하면 심각한 문제가 많이 생깁니다.

특히 본문 태그가 전부 div예요. 본문 태그는 반드시 p를 써야하는거 아시지요?

편집자 성향에 따라 수천개의 span 태그가 포함되고, 불필요한 스타일이 가득합니다.

 

본문 태그는 모두 p로 바꿔 주시고, 불필요한 코드는 전부 정리해 주세요.

 

아주 간단하지만, 모를 때는 정말 난감한 구 버전 sit(Quark 압축 파일) 변환 방법이었습니다.

설정

트랙백

댓글

[샘플]EPUB에서 그림을 그리자~ 그림판 샘플

Drawingboard(MIT License) js 코드를 활용한 그림판입니다.

아쉽게도 캘리버 뷰어에서만 제대로 작동을 하고
교보eBook 뷰어는 좌우 플립시 페이지 넘김 이외의 액션을 막아서 세로선만 그릴 수 있습니다.
교보 담당자도 이 문제를 해결하는 중이라고 하니, 언젠가는 교보eBook에서도 사용할 수 있을 것 같아요.

UI를 잘 구성하면 활용할 만한 곳이 많을 것 같아요.
그림을 미리 그려넣으면 색칠공부 책을 만들 수 있고
아이들을 위한 낙서장도 될 수 있습니다.

학교 교재에도 쓸 수 있지요.
이걸 만든 것도 교재 기능 검토 요청 때문이었습니다. 

기본 코드는 아주 간단합니다. 샘플 참고하세요.


설정

트랙백

댓글

전자책 만들 때, 혹은 검수할 때 꼭 확인하고 주의해야 하는 사항들

전자책을 만들거나 검수할 때 주의해야 하는 내용이 있습니다.

어떤 것들은 EPUB Check로 적합성 검사를 하면 나오지만
EPUB Check에도 걸리지 않지만 명백한 잘못, 혹은 특별한 이유 없이 해서는 안되는 내용도 있어요.

직접 EPUB을 만들거나, 외주로 작업한 EPUB을 검수할 때 아래 항목들만 꼼꼼히 살펴도 '형편없다' 소리는 듣지 않을거예요.

제가 말하는 '형편없다'는, 스타일, 편집 방법 등에 관한 것이 아닙니다.
스타일을 어떻게 잡든, 그건 편집자 마음입니다. 
아무런 스타일도 적용하지 않았다고 해서 이 전자책을 못만들었다고 하지 않습니다.
가독성이 현저히 떨어지는 스타일이라도, 편집자가 그렇게 의도했다면 그건 좋다 나쁘다를 판단할 수 없습니다.
들여쓰기를 90%로 잡더라도 독자 입장에서 '책 보기 불편한 편집'이라고 말 할 수는 있겠지만
다른 편집자가 '들여쓰기 90%는 잘못된 편집이야'라고 말해서는 안됩니다.

제가 얘기하는건, EPUB 표준, HTML, CSS의 기본 규칙에 대한 부분입니다.
당연히 지켜야 하는 규칙을 지키지 않았을 때 저는 '형편없다'고 얘기합니다.

1. p 태그 대신 div 태그를 쓴다.

초기에 이런 책이 정말 많았습니다. 2009년, 2010년도에 만들어진 책들 보면 본문 문단을 p태그 대신 div태그로 처리한 책이 정말 많았습니다. 요즘에는 이런 책이 없을 줄 알았는데 여전히 눈에 보이네요.
예를 들면 이런 코드입니다.

<div>앨리스는 언니와 함께 강둑에 앉아 있었다. 아무 것도 하지 않고 있자니 점차 몹시 지루해졌다. 언니가 읽는 책을 한두 번 흘깃 보았는데 거기엔 그림도 없고 대화도 없었다. “그림도 없고 대화도 없으면 책이 도대체 무슨 쓸모가 있는거지?”라고 앨리스는 생각했다.</div>


<div>그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.</div>


이렇게 만들어도 EPUB Check는 오류로 잡아내지 않습니다. EPUB Check는 태그 안에 있는 내용이 무엇인지 까지 구분을 할 수 없기 때문에 코드 규칙만 맞다면 오류로 처리하지 않아요.
하지만 div 태그와 p태그의 쓰임은 완전히 다릅니다. 본문 문단을 p태그 대신 div 태그로 썼다면 명백한 html 정책 위반입니다. 뷰어에서 제대로 보이고 EPUB Check에서 오류라고 뜨지 않아도 이렇게 되어 있으면 잘못 만들어진 것입니다.

검수할 때 p 대신 div로 되어 있다면 무조건 다시 만들라고 하세요.


2. p 태그 하나에 br 태그로 문단을 나눈다.

이런건 절대 없을 것 같은데 의외로 종종 눈에 보입니다. 1번이 흔하다면 이건 정말 드물게 보이는 문제입니다.

<p>앨리스는 언니와 함께 강둑에 앉아 있었다. 아무 것도 하지 않고 있자니 점차 몹시 지루해졌다. 언니가 읽는 책을 한두 번 흘깃 보았는데 거기엔 그림도 없고 대화도 없었다. “그림도 없고 대화도 없으면 책이 도대체 무슨 쓸모가 있는거지?”라고 앨리스는 생각했다.

<br/>

그래서 앨리스는 일어나는 것보다 데이지 꽃다발이나 만드는 게 낫겠다고 생각하고는 (뜨거운 날씨 때문에 몹시 졸리고 바보가 된 느낌이라서 당연히 그럴 수 있었을 것이다), 데이지 꽃을 뽑기 시작했다. 그때, 갑자기 분홍 빛 눈의 하얀 토끼 한 마리가 가까이 뛰어왔다.

<br/>

그게 딱히 특별할 것이라고는 없었다.---중략--- 그리고 운좋게도 토끼가 울타리 바로 밑의 큰 토끼굴로 쏙 들어가는 것을 볼 수 있었다.

<br/>

그 즉시, 앨리스는 도대체 어떻게 다시 빠져 나올 건지는 생각조차 안하고 토끼를 쫓아 굴로 뛰어들었다.

<br/>

토끼굴은 터널처럼 곧게 이어지는듯 하더니 갑자기 아래로 푹 꺼져버렸다. 너무 갑작스러워 멈추어야 겠다는 생각조차 할 시간이 없어서, 상황을 알아차렸을 때에는 이미 아주 깊은 우물속으로 떨어지고 있었다.</p>


문단과 문단은 p태그로 묶여야 하는데, 줄바꿈 태그로 줄을 바꾼 경우입니다.
만약 누군가에게 제작을 맡겼는데 이렇게 만든다, 그럼 절대 그 사람에게는 제작을 맡기지 마세요.
p 대신 div를 쓴건 그래도 이해해 줄 만한 부분은 있습니다. 하지만 이렇게 만들었다면 기초도 모르는 사람이에요.


3. 제목 태그로 스타일을 대신한다.

html 태그 중 글자 크기에 영향을 주는 태그는 거의 없습니다.
<big>, <small>이 편집용 태그이고
h1~h6가 제목 태그로 글자 크기를 변경합니다. 그 외에는 거의 없지요.
그래서 글자 크기는 css를 이용해 수정해야 합니다.

그런데 이런 코드들이 너무 많이 보입니다.
아주 흔하게 볼 수 있는 코드예요.

<h4>제1장</h4>

<h2>토끼굴 속으로</h2>




이 코드로 가운데 정렬을 하면 이렇게 보입니다.
h4는 본문 글자와 비슷한 크기, h2는 본문보다 글자가 큽니다. 
그래서 서로 다른 글자를 표현할 때 제목 태그를 쓰는 것 같은데,
이건 CSS도, HTML도 모르는 사람만이 할 수 있는 편집입니다.

간혹 이건 문제 없다고 우기는 사람들을 봅니다. EPUB을 전문으로 제작한다는 사람들 중에서도 문제 없다고 우기는 사람들이 있어요. 이런 사람들에게는 절대 제작을 맡기지 마세요. 

이걸 종이책만 알고계신 분들이 이해하기 쉽게 설명을 드리자면,

4도 인쇄로 본문 글자를 검은 색으로 인쇄해 놓고
'4도로 인쇄하든, 검정 잉크로 인쇄하든 본문 글자가 검은 색이면 된거 아니냐'

라고 주장하는 것과 비슷하다 생각하시면 됩니다. 
이런 인쇄소에 인쇄를 맡기시겠어요? 


4. 제목은 가능하면 제목 태그로, EPUB3라면 반드시 제목 태그로.

제목은 EPUB2와 EPUB3의 규칙이 조금 다릅니다.
EPUB2에서는 제목을 h1~h6 태그로 지정하라고 명시되어 있지는 않습니다.
강제 조항은 아니지만 제목 태그로 제목을 감싸지 않을 이유가 없다면 제목 태그로 감싸는게 좋습니다.

EPUB3, EPUB for Education, 장애인 접근성 강화 정책에서는 제목 태그는 반드시 제목 태그를 사용해야 합니다.

5.2.4. EPUB 내비게이션 문서 정의(EPUB Navigation Document Definition)
가. nav 요소: 제약(The nav Element: Restrictions)
...
각 nav 요소는 내비게이션 목록의 제목을 나타내는 선택적 머리말을 포함 할 수 있다. 머리말은 반드시 [HTML5] h1 through h6 요소 또는 hgroup
중 하나여야만 한다.

EPUB2 파일은 언제든 EPUB3로 변환해 판매할 수 있습니다.
이때 제목이 헤더로 되어 있지 않다면 모든 제목을 다시 수정해야 합니다.

그리고 제목을 헤더로 감싸면 제목 편집이 쉽습니다.
종이책에서는 불가능한, 소제목, 소소제목까지 모두 목차에 넣어 독자들의 편의를 높일 수 있습니다.

참고로 제목을 헤더로 묶긴 했는데 이런 식이라면.... 초급 수준의 편집자일거예요. 그러니 초급 수준의 비용이 아닌 중고급 이상의 비용을 요구한다면 제작을 맡길 때 고민을 해보세요.

* 장 번호와 장 제목을 2줄로 나누고 각각 다른 스타일을 지정해 달라고 했을 때 장 번호와 제목을 각각 다른 블럭태그로 감싼다면 초보일 가능성이 높습니다.

<h3 class="ch_number">제1장</h3>
<h3>토끼굴 속으로</h3>

* 중급 이상 편집자라면 이처럼 제목 한줄은 하나의 블럭 태그를 사용해 편집합니다. 이렇게 해도 요구하는 스타일은 전부 맞출 수 있습니다.
<h3><span class="chap_title">제1장</span> 토끼굴 속으로</h3>

5. 제목 태그는 구분해서 쓴다.

제목은 부, 장, 절, 소제목 등으로 구분해서 태그를 사용해야합니다.
<h3>로 장 제목을 사용했는데 절 제목 역시 <h3>로 사용하면 안됩니다.
HTML은 문서의 구조를 만드는 언어이기 때문에 각 제목의 구조가 잘 정리되어 있어야 합니다.

제목 태그를 구분하지 않으면 목차 자동 생성시 모든 제목이 같은 레벨로 표시됩니다.
이걸 하나씩 수정해 줘야하는데, 구조적으로 절못된 상태에서 제목만 수정을 한다고 문서의 구조가 바로잡히지는 않아요.

태그를 구분해 써야 하는 이유는 또 있습니다.
장애인 접근성을 위해서지요.
장애인 접근성은 HTML의 구조와 아주 밀접합니다.
부 제목과 장 제목, 절 제목이 모두 h3로 되어 있으면, 시각장애인들에게 이 책은 부도, 장도, 절도 없는 그냥 같은 레벨의 제목이 있는 책이 되어 버립니다.

그러니 제목 태그는 반드시 책의 구조에 맞춰 구분해 사용해야 합니다.



6. 인디자인에서 변환시 태그 정리가 안된다.

이건 오류라고할 수 없지만, 제작 비용에 따라 강력하게 요구할 수 있는 부분입니다.
제작비가 아주 저렴하다면... 저라도 태그 정리를 안할 것 같아요. 하지만 일정 수준 이상의 제작비를 지불했는데 태그정리가 안돼있다면, 전부 정리해 달라고 하세요.

태그 정리가 안됐다고 해도 문제는 없습니다...라고 할 수 있지만, 문제가 되기도 합니다.
수정을 하거나, 추가편집을 하거나, 어떤 추가적인 작업을 하더라도 이런 코드들 때문에 작업 시간으 더 걸릴 수있어요.
그리고 뷰어에서 열리는 속도가 느려지고, 간혹 이로 인해 뷰어의 오류가 생길 수있습니다.

* 이런게 태그 정리가 되지 않은 상태입니다. 이렇게 제작하는 곳이 정말 많아요. 
<p>스티브 잡스<span class="txt_sub">(</span><span class="txt_sub">S</span><span class="txt_sub">t</span><span class="txt_sub">e</span><span class="txt_sub">v</span><span class="txt_sub">e</span><span class="txt_sub">n</span> <span class="txt_sub">P</span><span class="txt_sub">a</span><span class="txt_sub">u</span><span class="txt_sub">l</span> <span class="txt_sub">J</span><span class="txt_sub">o</span><span class="txt_sub">b</span><span class="txt_sub">s</span><span class="txt_sub">)</span></p>

* 이런 태그는 이렇게 보여야 합니다. 
<p>스티브 잡스<sub>(Steven Paul Jobs)</sub></p>
혹은 이렇게
<p>스티브 잡스<span class="txt_sub">(Steven Paul Jobs)</span></p>

그냥 보기에도 뭐가 문제인지 알겠지요? 두 코드의 뷰어 표현의 차이는 전혀 없습니다. 완전히 똑같이 보여요.

저도 초급자들에게 강의 할 때 이런 코드는 건드리지 않아도 된다고 설명합니다.
오류에 대처할 정도로 실력이 되지 않는데 잘못 건드렸다가 코드가 꼬여버리면 초급자들은 해결하지 못하고 처음부터 새로 만들어야 할 수도 있거든요.
그래서 확실히 정리할 수 있지 않다면, 그냥 두라고 하는거지요.

하지만 뒤에 하나 덧붙입니다.
돈 받고 만들거면, 확실히 정리 하라고요.
다시 말하면 이 정도는 정리할 실력이 되지 않으면 돈 받고 다른 출판사의 귀한 콘텐츠를 엉망으로 만들지 말라는 소리입니다.
혼자 연습삼아 만들 때와, 전문 제작자가 되서 출판사의 돈을 받고 제작할 때는 자세가 달라야 하니까요.

뭐, 그래도... 40 ~ 50만원 받아야 할 콘텐츠를 10만원 주면서 만들어 달라고 하면, 전자책 제작자도 대충 10만원 어치만 만드는 것까지 뭐라 하지 않습니다 ^^;


전자책 만드는 분들이라면 5번 빼고는 '설마 이렇게 만들겠어?'라고 생각하실 거예요.
그 정도로 초보의 초보의 초보적인 수준의  문제들입니다.
그런데 제가 유통사에 있을 때 10개 중 3~4개에서 위에 열거한 문제들을 발견했습니다.
그리고 요 며칠 작업한 책들에서도 같은 문제들이 보였습니다.

제작비를 주고 만들었는데 이런 수준이라면 제작비를 돌려받아도 된다고 생각합니다.
문제는, 출판사에서 검수를 잘 안한다는거예요 ㅜ.ㅜ
뷰어에서 제대로 보이면 문제 없구나 생각하고 넘어가니 저런 제작자들이 계속 생기는거지요.

검수하는 분들은 많이 알 필요가 없습니다.
아주 기본적인 것만 몇가지 관심 있게 기억해 두고
EPUB이 왔을 때 Sigil로 열어서 확인해 보시면 되요.
그럼 지불한 돈보다 형편 없는 EPUB을 받지는 않을거예요.


설정

트랙백

댓글

제목에 테두리가 있는 글상자 만들기


스타일을 잡다 보면 이런 글상자가 종종 나옵니다. 

글상자 제목과 내용이 있는 아주 일반적인 형태의 글상자입니다.

책 만들 때 많이 쓰이기도 하고요.


글상자 자체는 만들기 어렵지 않습니다.

아래처럼 제목에 꾸밈을 주는 경우가 있어요.

꾸밈의 형태는 다양합니다. 포스트잇을 붙여놓은 것 같은 스타일도 있고

제목 앞에 전구나 물음표 같은 불릿이 들어가기도 합니다.

그리고 이렇게 제목이 가운데 나오고, 양 옆으로 특정 패턴의 선이 나오기도 하지요.


이런 패턴은 좀 까다롭습니다.

글자에 맞게 제목 상자 크기가 바뀌어야 되요.

종이책에서는 한번 고정되면 그만이지만 전자책은 가로 폭이 일정하지 않습니다.


그래서 전자책은 제목 상자 옆에 있는 줄이 폭에 맞춰 자동으로 조정되야 하지요.

이런 스타일을 만드는 방식은 여러개예요.


예전에 소개한 적이 있는데

선을 긋고

margin-top을 (-)로 줘서 제목 상자를 선 위로 올리는 방법이 가장 간단합니다.


테이블을 이용할 수도 있어요.

왼쪽, 가운데, 오른쪽 3개짜리 테이블을 만든 후

가운데 셀에 border로 테두리를 그리고 왼쪽, 오른쪽에 선을 그을 수도 있습니다.

하지만 테이블은 셀 크기 조절이 까다로와요.


테이블과 비슷하지만 셀 크기 조절이 쉬운 방법으로는

flex 속성을 이용하는거예요. div 태그를 가로로 3개 늘어놓고 가운데 셀만 flex : 1;을 주면(0이었나???) 가운데 셀은 글자 크기에 맞게 칸이 조절되고, 좌우 셀은 크기가 동일하게 배치됩니다.


오늘 설명드릴건 이보다 조금 쉬운 방식이에요.


상자를 만들어 중간에 줄을 하나 긋고, 그 안에 가운데에 테두리를 친 제목을 추가하는 방식입니다.
스타일은 조금 복잡하지만 HTML 코드가 간결해 편집하기 좋습니다. 

.box_tip_title {

background-image : url("../Images/box_top_line.png");

background-position : center;

background-size : 15px;

line-height : 0;

margin : 0 0 1em 0;

}


.tip_title {

text-align : center;

display : table;

margin-left : auto;

margin-right : auto;

background-color : #FFFFFF;

border: 15px solid #F67E68;

-webkit-border-image: url("../Images/box_top_border.png") round;

-webkit-border-image-slice: 30%;


border-image: url("../Images/box_top_border.png") round;

border-image-slice: 30%;

}



<div class="box_tip_title">

<p class="tip_title">알맞은 조명을 고르기 위한 tip</p>

</div>


테두리 모양은 여러가지로 응용이 가능합니다. 

줄무늬, 물결무늬, border-bottom을 쓰면 아래에만 줄을 그을 수 있어요.

이 스타일만 있으면 제목 상자 테두리에 특정한 무늬가 들어간 대부분의 글상자를 만들 수 있습니다.

뿐만 아니라, 특정한 테두리를 가진 제목에도 활용할 수 있지요.

설정

트랙백

댓글

[문의]재미있는 제목 스타일

재미있는 제목 스타일 문의가 들어와 소개해 드립니다. 

제목 위, 아래에 크기가 다른 둥근 점이 들어간 제목이에요.

Sigil에서 제목을 자동으로 생성하려면 [오늘의 사색]이라는 제목은 하나의 제목 태그로 묶여야 합니다.


중요한 포인트는, 위쪽 큰 동그라미는 제목의 첫번째 단어에, 아래쪽 작은 동그라미는 마지막 단어에 일정한 거리를 유지해야 한다는 점이에요.



이렇게 제목이 길어지면 그에 맞춰 동그라미 위치도 바뀌어야 합니다.


제목의 위, 아래 길이는 알 수 없고, 1줄이 될 수도 있습니다.

제목이 어떻게 배치되어 있든 첫번째 단어에서 1자 거리 위에, 

마지막 단어에서 1자 거리 아래에 원이 표시되야 합니다.




처음엔 코드가 엄청 복잡할 줄 알았는데 의외로 간단한 해결 방법이 있더라구요.

제약(점이 글자를 따라다녀야 한다, 제목을 한번에 표현해야한다 등)을 하나씩 생각하면서 스타일을 만들려다 보니 이런 저런 속성과 스타일이 여러개 들어갔는데 마음에 드는 결과가 나오지 않았습니다. 

그러다, 가장 기본적인 원리를 떠올렸지요.


가장 심플하게~


그래서 다시 생각을 해 보니, 정말 간단한 해결책이 있더라구요.


스타일과 HTML 코드는 이렇습니다.


* 글꼴이 미생체다 보니 기본 글꼴 크기가 작네요. 글자 크기를 미생체에 맞춰 다른 글꼴로 바꿀 경우 제목 크기가 아주 커질 수 있습니다. 원문자 크기 역시 글꼴에 따라 차이가 날 수 있기 때문에 글자 크기 조절이 필요합니다.

h3 {

text-align : center;

font-family: "Sandoll MiSaeng";

font-size : 1.8em;

margin-top : 2em;

margin-left : -1em;

margin-bottom : 5em;

color : #B794CA;

}


h3:before {

content : "●";

font-size : 1.2em;

vertical-align : 110%;

}

h3:after {

content : "●";

font-size : 0.7em;

vertical-align : -140%;

}

.left_m{

margin-left : 1.5em;

}


<h3>토끼굴 <br/><span class="left_m"></span>속으로</h3>



스타일을 적용한 결과입니다.




목차를 자동 생성하면 이렇게 나옵니다.



샘플 파일 다운로드 받아서 확인해 보세요~





설정

트랙백

댓글

네이버 뷰어용 전자책 제작시 필독!!

Tip&Tech 2018. 4. 27. 10:28

어제 메일 하나를 받았어요.

전자책을 제작했는데 다른 뷰어에서는 의도한 대로 보이는 책이 네이버 뷰어에서만 이상하다는 내용이었습니다.

마진과 들여쓰기를 px로 줬는데 네이버 뷰어에서만 반영이 되지 않는다.

EPUB은 뷰어에 따라 표현성의 차이는 생길 수 있지만 스타일 자체가 반영이 안될 수는 없거든요.
예를 들어 px 단위를 무시하는 리디 뷰어라도 px로 설정한 값 자체는 반영이 됩니다. 다만 글자크기를 키우거나 할 때 고정값인 px를 가변값으로 강제로 변경해요. px로 설정한 크기는 뷰어의 글자 크기를 바꿔도 변경되면 안되는데, 리디 뷰어는 이를 무시하고 강제로 변경을 시킵니다. 중요한건, px를 일단 반영시키고(여기까지는 표준) 리디의 정책상 px 단위도 뷰어가 강제로 조절을 한다(이건 정책)는 점이에요.

지원사업 발표도 있고, 샘플 없이 메일만 와서 
샘플 보내주시면 확인해 보겠다고 답메일 보내드렸는데 네이버에 문의해 직접 해결했다는 메일을 받았어요.

결론부터 말씀 드리면, 네이버 뷰어가 표준을 지키지 않았습니다!!!!!!!!!

네이버에 유통시키는 콘텐츠라면 px 단위를 사용하지 마세요.

이전 글에서 유통사 별로 스타일이 다르게 보이는 것은 유통사의 정책이지 표준과는 상관 없다는 설명을 했습니다.

주요 유통사 뷰어 표현성 비교 http://cafe.naver.com/bookfactory/69484

표현성 문제로 스타일이 다르게 보인다면 전자책 스타일을 수정하거나, 유통사 정책을 바꿔야 합니다.
99.9%의 경우는 유통사 정책을 바꿀 능력이 안되기 때문에 스타일을 수정하지요.
아, 그냥 한곳은 무시하자~도 해결 방법이에요 ^^;

그런데 네이버 뷰어는 정책이 아닌 표준 문제입니다.
                               http://www.odpf.or.kr/standard/2017/12/07/odpf-kr-01-1-2011.html
3.2.3: Length(길이)
All non-zero coordinate and size values must have specified units. All units defined by CSS1 and CSS2 are supported:
0이 아닌 모든 좌표와 크기 값은 반드시 단위가 명시되어야 한다. CSS1과 CSS2에 의해 정의된 모든 단위가 지원된다.

IDPF는 EPUB2.0.1 OPS v1.0.1에서 CSS1과 CSS2에 의해 정의된 모든 단위를 지원하도록 표준문서에 명시했습니다.

그런데 네이버 뷰어는 px, pt 등의 고정값은 무시를 한다네요.
앞서 설명드린 리디 뷰어처럼 px나 pt를 강제로 가변값으로 변환하는건 정책이지만
전자책에 사용된 고정값 자체를 무시해서 여백이나 글자 크기가 변경되지 않는 것은 표준 위반으로 볼 수 있습니다.

여기서 잠깐!
저도 전자책 제작을 할 때 px나 pt 같은 고정값은 가급적 사용하지 말라고 권합니다.
글자나 이미지에 고정값을 사용하면 여러가지 문제가 생길 수 있습니다.

font-size는 글꼴의 크기를 지정할 때 사용한다. font-size에는 em, %, px 등의 값이 올 수 있다. 하지만 글꼴의 크기를 뷰어의 설정에서 조정하는 경우가 많기 때문에 크기를 변경할 수 있는 가변 사이즈(em, %) 사용을 권장한다. 뷰어에 따라 처리하는 방식이 다른데 일부 뷰어는 강제로 px를 뷰어 설정에 맞추는 경우가 있고, px는 글자 크기를 변경하지 않을 수도 있다. 그래서 px를 사용하게 되면 일부 글자가 아주 작거나 아주 크게 나올 수 있다. 

1em과 100%는 기기의 기본 글꼴 크기에 맞춰진다. 1em이나 100%를 기준으로 하면 크기나 해상도에 관계 없이 가독성이 보장된다. 하지만 px로 크기를 맞추면 5인치의 고해상도 기기에서는 글자가 아주 작게 표현되고, 10인치의 저해상도에서는 글자가 아주 크게 표현되는 등 일정한 크기를 보장할 수 없기 때문에 글자 크기가 내용에 직접적인 영향을 주는 경우가 아니라면 px는 피하는게 좋다.

출처: http://www.epubguide.net/40 [내맘대로의 EPUB 제작 가이드]

하지만 사용을 권하지 않는 것과 표준을 지키지 않는 것은 다른 문제예요.
전자책을 편집하다 보면 px를 사용해야 하는 경우가 있습니다. 
그러니 리디처럼 px의 고유 속성은 무시하더라도 px 값 자체를 무시해서는 안되는데 네이버는 표준을 어기고 px 자체를 무시한다네요.
저도 문의가 아니었으면 모를 뻔 한 내용입니다. 

제가 도움을 드리지 못했는데 직접 문제를 파악하고 답변까지 주신 질문자님께 감사드려요.

긴 글이었지만, 결론은 이거예요.

네이버에 유통시키는 콘텐츠라면 px 단위를 사용하지 마세요.
그리고 네이버에 'px 단위는 왜 사용할 수 없느냐. 표준문서에 px도 지원하도록 되어 있다. 뷰어를 수정해 달라.'고 많은 분들이 요구해 주셨으면 합니다. 


설정

트랙백

댓글

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

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




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



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


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


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


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



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

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



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


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

설정

트랙백

댓글

  • eureum 2020.10.12 19:06 ADDR 수정/삭제 답글

    안녕하세요. 항상 올려주시는 글로 많이 배우고 있습니다. 감사합니다.
    epub 파일 만드는 연습을 하다가 epub파일 안에 표지를 넣지 않고도 전자책을 만들어 유통이 가능한지 궁금해서 올려주신 글들을 다시 읽고 있었는데요.
    위 글에서 반드시 표지 정보를 넣어야 하지만 표지 정보를 깜빡해도 서지정보 등록시 표지 이미지를 잘 올렸다면 유통에 문제가 없다고 하셨는데, 연습하면서 표지를 넣지 않고 epub파일을 완성한 뒤, 체커기로 체크하면 표지 없음으로 오류가 뜨는데도 유통에는 문제가 없는 건가요?
    오류가 떠도 일단 전자책 플랫폼들의 뷰어로 테스트 했을때 본문을 보는데는 문제가 없긴 했는데, epub파일에 표지를 넣지 않아 체커기 오류가 뜨더라도 전자책 등록시 표지 이미지만 제대로 작성한다면 정상적으로 판매가 가능한지 궁금해서 문의드립니다.
    질문 드린게 실례가 아니었기를 바랍니다.

    • 전자책 제작과 편집에 관한 모든 정보 내.맘.대.로 2020.10.14 08:56 신고 수정/삭제

      1. 표지가 있다면 표지를 넣는게 좋습니다. 표지 메타 정보를 넣지 않아도 유통에 문제 없다는 의미입니다.
      2. EPUBCheck에서 표지를 넣지 않았다고 오류가 표시되지 않습니다.
      3. 유통사 서재의 표지 이미지는 유통사 상품 등록시 업로드 한 파일을 사용합니다. EPUB에 넣은 표지는 사용하지 않습니다.

  • eureum 2020.10.14 18:00 ADDR 수정/삭제 답글

    답변 고맙습니다.
    그런데 '2. EPUBCheck에서 표지를 넣지 않았다고 오류가 표시되지 않습니다.' 라고 하셨는데
    epub체크에서 '불완전한 요소 "guide"; 누락된 필수 요소 "reference" 파일을 분석하는 동안 '오류'가 발견되었습니다.' 라는 메시지가 떴고 검색을 해보니 표지 정보가 없어서 그렇다고 돼있어서 표지를 넣지 않음으로 발생한 오류라고 생각했습니다.
    그럼 저 오류 메시지는 단순히 표지가 없어서 뜬 게 아닌 건가요?

    • 전자책 제작과 편집에 관한 모든 정보 내.맘.대.로 2020.10.14 22:37 신고 수정/삭제

      opf에 guide 요소는 있는데 값이 비어있어서 생기는 오류입니다. 표지 때문이 아니고, guide가 비어있기 때문인데, Sigil에서 표지를 추가하면 오류가 해결되기 때문에 긴 설명 없이 표지를 추가하도록 설명했을 뿐입니다. opf에서 guide를 삭제하거나 표지가 아닌 목차 같은 다른 메타 항목을 항목을 guide로 추가해도 오류는 해결됩니다.

  • eureum 2020.10.15 00:45 ADDR 수정/삭제 답글

    앗, 그렇군요. 저는 이제까지 저 오류가 표지 때문이라고 생각했었네요!
    정말 큰 도움이 되었습니다. 감사합니다. :)