!important - 리디북스 PC 뷰어에서 div-margin 안먹는 문제

리디 PC 뷰어에서 div 태그에 margin 속성이 적용되지 않는 문제가 있습니다.

 

.test-style {

margin-bottom : 5em;

}

 

<div class="test-style">내용</div>

 

<p>본문</p>

 

이렇게 하면 p 태그와 div 태그 사이에 마진이 생겨야 하는데 리디북스 PC 뷰어에사만 마진이 적용되지 않습니다.

처음엔 속성 상속이 꼬여 그런가보다 생각해 빈줄 추가로 해결했는데 같은 혆상이 반복되니 귀찮네요.

 

이런 스타일 만들려면 margin이 먹혀야 하는데 안먹혀서 <p><br/></p>를 넣는 귀찮은 작업을 해야돼요 ㅜ.ㅜ

 



 

 

오래 전에 K뷰어 만들 때 똑같은 현상을 경험한 적이 있습니다.

뷰어에도 자체적인 태그와 스타일이 있어요.

뷰어 화면 그릴 때 div  태그를 쓰는데, 이 뷰어 div 태그에 속성이 잘못 들어가면 CSS 상속이 되면서 이런 현상이 생깁니다. 쉽게 말해, 뷰어 오류예요. 구 버전에서는 이런 문제가 없다가 어느 순간부터 생긴걸 보면 개발자가 실수한거 같아요.

 

담당자가 이걸 발견하면 바로 고치겠지만, 누가 알려주기 전엔 발견하기 어려울테니 수정이 언제 될지 모릅니다. 그래도 전자책은 만들어야 하니, 해결 방법 알려드립니다.

 

.test-style {

margin-bottom : 5em !important;

}

 

<div class="test-style">내용</div>

 

<p>본문</p>

 

간단하지요?

 

스타일 상속이 문제니까, 상속받은 스타일 보다 내 스타일이 더 중요하다고 뷰어한테 알려주는 속성이에요.

두개 이상 속성이 충돌할 때 !important 속성이 우선적으로 적용됩니다.

 

!important는 안쓰는게 좋아요. CSS가 충돌을 할 일은 거의 없거든요.편집자가 만든 스타일이 아무 문제가 없다면 !important는 절대 쓸 일이 없습니다.

 

하지만 리디북스  PC 뷰어처럼 편집자의 손을 벗어났을 때 종종 도움이 됩니다. 

예를 들면, 교보 뷰어나 iBooks 뷰어는 주석을 강제로 숨기지요.

팝업 주석 처리 되니 주석이 없어도 되지만, 이 책에서는 주석 목록을 모두 보여줘야 한다 싶을 때 !important로 뷰어가 주석을 숨기지 못하게 할 수 있어요. 

 

- 사족. 제목에 !important는 중요한 글이라는 의미가 아닙니다 ^^;

 

설정

트랙백

댓글

장애인 접근성 도서 제작에 필요한 플러그인 (1/2)

카테고리 없음 2020. 3. 17. 09:59

얼마 전에 텍스트형 전자책 제작 지원 사업 안내를 드렸습니다.

https://www.epubguide.net/294

 

올해부터는 문학 분야 도서는 장애인접근성 도서 제작 신청을 함께 할 수 있습니다.

장애인접근성 도서는 일반 EPUB과 형식이 많이 다릅니다.

제작 방법 자체는 일반 도서와 동일하지만, 만드는 규칙이 다르지요.

장애인접근성 도서 제작 정보는 아래 글을 참고하세요.

https://www.epubguide.net/252

 

장애인접근성 도서는 심사도 까다롭습니다.

EPUB은 오류가 없고 화면에 잘 보이면 대부분 통과되지만 장애인접근성 도서는 내부 코드가 제대로 정리되어 있는지도 확인을 해야 합니다. 예를 들어 이미지라면  role="img" 라는 속성이 반드시 포함돼야 합니다. 열심히 만들었는데 이런 것들이 제대로 표시되지 않아 3~4번씩 다시 심사를 받는 분들이 많습니다.

 

EPUB이 표준을 잘 지켰는지, 문제는 없는지 확인하기 위해 EPUB Check라는 프로그램을 사용합니다. Sigil에 플러그인이 있지요. 장애인접근성 도서도 이런 체크 프로그램을 제공합니다. 

 

https://inclusivepublishing.org/toolbox/accessibility-checker/getting-started/

 

여기 들어가면 어떻게 설치하고 사용하는지 방법이 자세히 나와 있습니다.

그런데 매번 

 

ace --outdir ~/Documents/moby-dick-report ~/Documents/moby-dick.epub

 

이렇게 커맨드를 사용해 검사하기 불편하잖아요.

그래서 Sigil은 ACE 플러그인을 제공합니다.

 

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

 

플러그인 사용법을 모르는 분들은 아래 글을 참고하세요.

https://www.epubguide.net/280

 

ACE는 설치가 조금 까다롭습니다.

EPUB Check는 Java 설치하고, 플러그인 실행하면 끝인데, ACE는 조금 더 복잡합니다.

Sigil 플러그인 페이지에 설치 방법도 나오지만, 컴퓨터에 익숙하지 않은 분들은 힘들 것 같아 조금 쉽게 설명을 하겠습니다.

 

1. Node.js를 설치하세요.

    - Node.js가 뭐냐, 어려운거 아니냐 하고 겁낼 필요 없습니다. 저도 이거 전혀 모릅니다. 설치 후엔 신경 쓸 필요도 없어요. 하지만 장애인접근성 도서를 제작하기 위해 ACE가 반드시 필요하고, ACE를 실행시키려면 이 프로그램이 반드시 설치돼야 합니다.

 

1.1 https://nodejs.org/en/ 에서 설치 파일을 다운로드 한 후 실행합니다.

    - 버전이 2개 있는데 12.16.1 LTS 버전을 설치하세요. LTS란 Long Term Support(장기 지원 버전)이라는 표시예요. 오픈소스 프로그램들은 언제 지원이 끊길지 몰라 사용을 꺼려하는 사람들이 많이 있습니다. 실제로 수많은 오픈소스 프로그램들이 어느 날 갑자기 업데이트가 중단되었지요. Sigil도 0.7.x  버전 이후에 업데이트가 중단될 뻔 했고요. 그래서 오픈소스 그룹에서 LTS 버전을 내놓았습니다. Node.js 12 는 2022년까지 지원을 보장합니다.

 

1.2 설치 옵션은 신경쓰지 않아도 됩니다. 그냥 다음, 다음, 다음... 하면 ACE에 필요한 내용이 모두 설치됩니다.

 

1.3 설치가 끝나면 아래 이미지 참고해서 Node.js Command Prompt를 실행합니다. 

 

2 ACE를 설치하세요.

  - Sigil ACE 플러그인은 EPUB Check와 달리 체크 프로그램을 포함하고 있지 않습니다. 설치된 ACE를 Sigil에서 쉽게 사용하도록 도와주는 플러그인이기 때문에 먼저 ACE 설치를 해 줘야돼요. 

2.1 Node.js command prompt에서 아래 명령어를 입력하고 엔터를 치세요.

 

$ npm install -g @daisy/ace

 

2.2 ACE가 설치됩니다. 설치가 끝날 때까지 기다리면 됩니다.

 

3. ACE 플러그인 사용하기

3.1 ACE 플러그인을 추가합니다. 추가 방법은 여기... https://www.epubguide.net/280

3.2 ACE를 추가하면메뉴에 Sigil>Plugins>Validation>ACE가 생깁니다.

    - EPUB을 열고 ACE를 실행하면 접근성 검사가 실행됩니다.

3.3 장애인접근성 검사 결과는 4페이지로 구성됩니다. 

    - 첫 페이지는 Summary입니다. 오류가 있는지, 수정을 해야 하는 부분이 몇개인지 등의 정보가 자세히 표시됩니다.

 

 

    - 두번째 페이지는 메타정보를 보여줍니다. 판권면이 메타 정보라고 잘못 알고 계신 분들이 많은데, Sigil에서 F8을 누르면 나오는 정보가 메타 정보입니다. EPUB은 메타 정보를 제대로 넣지 않아도 뭐라 하는 사람이 없지만, 접근성 도서는 메타 정보를 정확히 입력해 줘야 합니다.

 

 

     - 그 다음은 아웃라인 정보입니다. TOC 목차와 본문 내 Heading 태그가 잘 정리돼 있는지, 그 외에 어떤 body matter가 포함돼 있는지 등의 정보를 보여줍니다.




    - 끝으로 이미지 등의 오브젝트 정보입니다. alt, figcaption 등이 반드시 포함돼야 하기 때문에 여기에서 정보가 제대로 입력됐는지 확인할 수 있습니다.

 

 

ACE는 EPUB Check를 포함합니다. 그래서 ACE로 검사를 해 문제가 없으면 EPUB Check를 돌릴 필요가 없습니다.

하지만 ACE를 EPUB Check 대신 사용할 수는 없습니다. 일반 EPUB은 장애인접근성 도서를 기준으로 검사하면 오류 덩어리거든요. 그리고 국내에 유통되는 일반 EPUB은 EPUB 2 버전이지만 접근성 도서는 EPUB3여서, 포멧 부터 다릅니다.

 

다음 글은 EPUB2를 EPUB3로 변환하는 플러그인을 소개하겠습니다.

EPUB2로 만든 도서를 장애인접근성용으로 변환할 때 제일 먼저 해야 하는게 EPUB3로 변환입니다.

클릭 몇 번 만으로 이 작업을 할 수 있게 도와주는 플러그인을 소개하겠습니다. 

 

전자책 제작 지원 신청할 때 문학 분야라면 접근성 도서도 꼭 함께 신청을 하세요^^

설정

트랙백

댓글

2020년 제1차 텍스트형 전자책 제작 지원 사업 공고

전자책 출판정보 2020. 2. 28. 09:37

1차 제작 지원 사업 공고가 올라왔습니다.

25일에 올라왔는데 누군가 올리겠거니... 하고 있었는데 아직 공유가 안됐네요.

http://www.kpipa.or.kr/info/newsView.do?board_id=1&article_id=101868

 

텍스트형 전자책 제작 지원은 이전과 동일합니다.

 

장애인접근성 도서 지원 내용이 추가되었습니다.

제대로 이해한건지 모르겠는데...

 

1. 텍스트형 전자책 지원 도서 중 EPUB으로 제작하고

2. 문학 분야에 해당하는 도서를

3. 장애인접근성 제작 지원 할 수 있습니다.

 

내용 상, 40만원 한도의 EPUB 제작 지원시 1, 2 조건에 해당하는 책은 장애인접근성 제작을 함께 신청할 수 있고

추가로 30만원의 제작 지원 비용이 지급되는 것 같습니다.

 

문학 처럼 이미지나 주석 등이 없는 도서에 페이지네이션을 하지 않으면

30만원으로 장애인접근성 EPUB3 제작이 가능합니다.

 

장애인접근성 전자책 제작은 아래 글을 참고하세요.

https://www.epubguide.net/252

 

자세한 내용은 공고 들어가 확인해 보세요.

올해는 장애인접근성 도서가 많이 제작되면 좋겠네요.

설정

트랙백

댓글

[CSS 스타일 샘플] 큰 괄호 사이 글자

연 초부터 재미있는 스타일(?)로 편집된 책이 많이 들어오네요.

스타일을 어떻게 잡을까 고민하는 재미는 있지만, 제작 시간(ㅜ.ㅜ)이 늘어나 납기 맞추느라 애먹고 있습니다.

책 한권을 2~3일에 끝내야 하는데 스타일 고민하며 장난(?)하다 보면 한두시간이 금방 지나가네요.

 

PDF에서 캡쳐한 이미지입니다.

이렇게 제목 좌우를 커다란 중괄호로 감싼 스타일이에요.

이미지로 넣으면 간단하겠지만, 이미지 보다는 텍스트가 깔끔하기 때문에 어떻게 넣을가 고민해 봤습니다.



고민 결과는 이렇습니다.

 

HTML 코드는 간단해요.

 

<h3 class="title_prologue"><span class="title_prologue_body">프롤로그</span></h3>

참 쉽지요^^?

이렇게 쉬운데 방법을 생각하는데까지 시간이 오래 걸리네요.

 




비슷한 스타일이 또 있습니다.

목차 페이지에서는 장 제목을 이렇게 감쌌어요.

PDF 캡쳐 이미지입니다.




이 스타일 역시 HTML 코드는 간단합니다.

 

<p class="TOC_chap_title_orange"><span class="TOC_chap_title">1장_ <br/>여기 여자들도 일하고 있습니다</span></p>

 

 

이런 스타일을 만들 때 신경써야 할 부분은 상하 중앙 정렬이에요.

중앙 정렬은 한번 설명한 적이 있으니 궁금하신 분은 참고하세요.

 

https://www.epubguide.net/290

 

HTML 코드가 단순하다는 것은 CSS가 복잡하다는 뜻입니다.

보기엔 간단해 보이지만 CSS는 좀 복잡해요.

어려운 CSS 속성이 들어가지는 않았습니다.

제가 한번 이상 설명한 속성들 뿐이지요.

그런 속성을 어떻게 조합하느냐에 따라 다양한 효과를 낼 수있어요.

 

전자책 책공장 회원님들은 이런 스타일을 어떻게 표현하시겠어요?

설정

트랙백

댓글

  • Huko 2020.02.27 14:56 ADDR 수정/삭제 답글

    css 어떻게 쓰셨는지 궁금하네요^^

장애인접근성 전자책 제작 지원 신청하세요~

전자책 출판정보 2020. 1. 29. 09:05

올해도 전자책 제작 지원 사업이 초기화(?) 됐습니다.

텍스트형 전자책 지원 사업은 많이 아시고, 분기에 한번씩 지원을 하니 설명드릴 필요가 없겠지요?

 

장애인접근성 전자책 제작 지원사업을 아시나요?

 

https://www.kpipa.or.kr/ebook/disabledSummary.do

 

매년 40여종의 도서를 선정해 제작비를 지원하고 있습니다.

지원 형식은 2가지예요.

 

1. 기존 전자책의 접근성 전자책으로의 변환 : 최대 100만원, 30종 지원

2. 신규 접근성 전자책 기획안 발굴 및 제작 : 최대 500만원, 10종 지원

 

이 중 1번은 [독서장애인을 위한 전자 책 접근성 가이드라인]을 적용한 EPUB3로 제작을 하면 되기 때문에 어떤 책이든 지원을 할 수 있습니다. EPUB으로 유통하고 있는 전자책을 변환해도 되고요.

 

장애인 접근성 EPUB은 기존 EPUB과 편집 방식이 많아 다릅니다.

스타일 다 빼고, 텍스트와 이미지만 놓여 있어 처음 보는 분들은 이게 뭔 책이야 싶을 정도로 단순하지요.

하지만 아주 까다로운 조건을 충족시켜야 하기 때문에 제작 시간은 일반 도서에 비해 더 오래 걸려요.

책과 동일하게 페이지를 넣어 줘야 하고, 이미지는 [두 남녀가 서로 바라보고 서서 악수를 하는 사진] 처럼 모든 이미지에 자세한 설명(대체 텍스트)을 담아야 합니다. 그러다 보니 지원 비용도 텍스트형 전자책 제작비 보다 높지요.

 

직접 제작을 해보고 싶어 제작 지침이 필요하신 분은 여기를 참고하세요.

https://www.epubguide.net/252

 

그리고 장애인접근성 지원사업에 참여하고 싶지만 제작이 byword77@gmail.com으로 연락주세요. 매년 3~4종씩 제작을 하고 있는데 올해는 더 많은 책들이 장애인접근성 도서로 제작됐으면 합니다. 지원 비용 내에서 제작을 해 드리니 접근성도서 제작할 곳을 찾지 못하셨다면 연락주세요. 

설정

트랙백

댓글

Sigil 1.0 한글 메뉴 표시하기

sigil_ko.qm
0.08MB

Sigil 1.0.0 버전을 설치하면 메뉴가 영문으로 나옵니다.

열심히 한국어 메뉴 번역을 하고 있는데 혼자 하려니 벅차네요 ㅜ.ㅜ

 

가끔 전자책 유통이나 제작과 관련해서 쓴소리를 하면

'네가 뭘 아느냐', '네가 전자출판에 기여한게 뭐냐' 운운 하며 욕하는 분들이 있는데

이런 분들이 좀 나서서 Sigil 메뉴 번역을 도와주면 참 좋을 것 같습니다.

https://www.transifex.com/zdpo/sigil/language/ko/

번역에 동참하고 싶은 분들은 여기 들어가서 번역해주세요.

저보다 앞서 노력해 주신 분이 있고, 제가 뒤를 이어받아 50% 정도 번역을 해 놓았어요.

 

Pageedit는 메뉴가 몇개 안돼 번역을 마쳤어요.

그래서 Pageedit는 설치하면 한글 메뉴가 나옵니다.

EPUBCheck도 열심히 번역을 해서 한글화 해 놨고요.

EPUB2.0, EPUB3.x, 장애인접근성 표준안 등도 참여해서 번역하고, 한글 표준안 만드는 정도의 노력을 하고 있습니다.

그러니 '네가 뭘 아느냐', '네가 전자출판에 기여한게 뭐냐' 하는 분들(이정도 말할 정도면 저보다 더 열심인거잖아요)도 Sigil 번역자에 이름 한줄 남기는 노력 정도는 해주면 얼마나 좋을까요?

 

Sigil 제작자 그룹의 정책이 바뀌어서 0.9.5 이후 버전부터는 번역이 완료 돼야 Sigil 메뉴에 포함을 시켜줍니다.

지금은 한글 메뉴가 표시되지 않아요.

그래서 종종 Sigil 설치했는데 한글 메뉴가 안보인다는 문의를 받습니다.

한글 메뉴가 안보이는건 한글 메뉴가 포힘되지 않았기 때문이에요.

 

그러니 한글 메뉴 보고 싶으면 번역에 동참해 주세요....

라고 말하고 싶지만, Sigil을 처음 시작하는 분들은 영문 메뉴가 어려울거예요.

그래서 꼼수를 준비했습니다.

 

첨부한 sigil_ko.qm 파일을 다운로드 하세요.

이 파일을 Sigil 설치 폴더에 복사해 넣습니다.

C:\Program Files\Sigil\translations

기본 설치를 했다면 폴더 경로는 여기일거예요.

다른 경로에 설치했다면 설치한 경로를 찾아가세요.

이 파일을 복사해 넣은 후 [Sigil> 설정 > 언어]에 들어가면 한국어가 보일거예요.

사용자 인터페이스 언어를 한국으로 지정한 후 Sigil을 종료하고 다시 실행시키면 한글 메뉴가 보입니다.

이 메뉴는 50% 정도 밖에 한글화 되지 않은거예요. 많은 메뉴가 영문으로 나옵니다.

그래도 많이 사용하는 메뉴는 대부분 한글로 볼 수 있으니 처음 Sigil을 접하는 분들께는 도움이 될거예요.

'Sigil 사용 설명서 > 메뉴 및 기능 설명' 카테고리의 다른 글

Sigil 1.0 한글 메뉴 표시하기  (0) 2020.01.21
[Sigil 플러그인] 유용한 Sigil 플러그인 01 - 플러그인 사용하는 방법  (0) 2019.02.27
보고서  (0) 2015.09.09
색인  (0) 2015.09.07
CSS Style 편집  (0) 2015.09.02
Link & ID  (0) 2015.08.31

설정

트랙백

댓글

[CSS 스타일 샘플] 상하 중앙 정렬

카테고리 없음 2020. 1. 20. 09:01

오늘은 상하 중앙 정렬 문제 하나 드려봅니다.

저도 할 때 마다 잊어서 정리해 두고 필요할 대마다 찾아볼 생각으로 올리는거예요 ^^;

 

정렬은 2가지 형태가 있습니다.

좌 우 정렬. 이건 가운데 정렬이라 하고, center로 쓰지요.

 

text-align : center;

 

가장 많이 쓰는 스타일 중 하나이기도 합니다.

 

중앙 정렬은 영문으로는 있는데 한국어로는 이거다 하고 정해놓은 용어가 없는 것 같아요.

중앙인데 가운데라고 쓰기도 하고...

 

영문으로는 vertical-align이라는 스타일이 있고, 이 스타일의 중앙 값을 middle로 씁니다.

text-align은 좌우의 가운데(center)지만 vertical-align은 상하의 가운데(middle)를 뜻해요.

 

좌우 가운데, 상하 가운데 하면 헷갈리니까, 저는 좌우는 가운데 정렬로, 상하는 중앙 정렬로 쓸게요.

앞에 좌우, 상하 없이 가운데 하면 좌우, 중앙 하면 상하 정렬입니다. 

 

그런데 vertical-align은 적용이 잘 안될거예요.

예를 들어 이런거.

 

장 제목을 표현하려면 상하 중앙 정렬이 필요합니다.

EPUB에서는 이렇게 보입니다.



눈에 확 들어오도록 세로 길이를 크게 늘려봤어요.

이러면 중앙정렬이 어떤건지 딱 보이지요?

 

중앙 정렬은 생각보다 까다로와요.

vertical-align이 아무때나 쓸 수 없기 때문이지요.

vertical-align은 inline 속성에서만 쓸 수 있습니다.

그래서 box나 block 속성에서는 적용이 안되지요.

 

가장 쉬운건

display : table-cell;

vertical-align : middle;

속성을 줘서 inline화 시키는거예요.

하지만 인라인 속성화 시키면 display:block; 속성을 써서 줄바꿈을 못합니다. 

 

저는 주로 중앙정렬 할 때 box-orient를 썼어요.

display: box;

box-orient: horizontal;

box-align: center;

 

display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-align: center;

근데 이렇게 하면 table-cell처럼 상자 안쪽에도 영향을 줘서 display : block; 이 적용되지 않아요.

 

 

물론, 줄바꿈을 블럭 태그로 나눠서 처리하면 되지요.

이러면 제목을 한 줄에 표현할 수 없다는 문제가 생기지만요.

 

이럴 때 flex를 쓸 수 있습니다.

display:flex;는 박스 모델에서 점전 비중이 높아지고 있어요.

box, talble, block 등의 속성들이 flex 하나로 모두 처리 가능해졌지요.

 

.title_sec {

height : 4em;

border-left : 2px solid #000000;

border-radius : 3em;

padding-left : 1em;

font-size : 1.2em;

 

  display: -webkit-flex;

  display: flex;

 

  -webkit-flex-direction: column;

  flex-direction: column;

 

  -webkit-justify-content: center;

  justify-content: center;

 

text-indent : 0;

margin-bottom : 3em;

 

box-sizing : border-box;

}

 

.title_sec .title_sec_No {

display : block;

}

 

<h3 class="title_sec"><span class="title_sec_No">첫 번째 기술: </span>다른 여성과 경쟁하지 마라</h3>

 

사실 

.title_sec .title_sec_No {

display : block;

}

이 스타일도 필요 없어요. 이미 flex가 적용됐기 때문에 block을 주지 않아도 줄바꿈이 됩니다.

table-cell에서 쓸 수 없던 text-align:center;도 쓸 수 있어요.

text-align을 쓰면 상하좌우 가운데 정렬이 되지요.

 

상자 안에서 상하 중앙 정렬을 해야할 때 유용한 스타일이니 꼭 기억해 두세요.

설정

트랙백

댓글

Sigil 1.0.0 버전 업데이트

카테고리 없음 2019. 12. 23. 09:30

 

드디어 Sigil이 1.0.0 버전이 되었네요.

 

많은 것이 바뀌어서 중요한 변경사항 번역해 봤습니다.

번역 실력은 좋지 않아 핵심만 추려 의역합니다. 오역 있어도 이해하세요 ^^;

 

  • Upon initial load, the epub structure that exists will be loaded and kept in its "as-is" state, moving and renaming nothing
    EPUB 구조를 바꾸지 않습니다. 이전 버전은 Text, Images, Fonts 등 구성요소를 Sigil이 지정한 폴더로 옮겼는데 이제느 EPUB의 구조를 그대로 가져옵니다. 
  • The BookBrowser will still show the Text, Images, Styles, Fonts, Audio, Video, and Misc "folders" but these are now "virtual folders" that simply organize the existing resources by type but do not restrict their actual location within the epub.
    Book Browser에서는 기존대로 Test, Images, Fonts... 등의 구조를 유지합니다. 하지만 이는 구성요소를 구분하기 위한 가상 폴더일 뿐 실제로 폴더를 변경하지는 않습니다. 예를 들어 EPUB에 폰트를 Fonts 폴더가 아닌 Text 폴더에 넣었다면 EPUB 내에는 Text 폴더에 그대로 유지됩니다. Book Browser에서만 Fonts라는 가상 폴더에 폰트가 표시됩니다.

  • A new Preferences setting has been added to the Appearance Preferences that will determine if the book folder relative path will be shown in the BookBrowser or its shorter unique name (filename) will be used instead. In either case, the BookBrowser tooltips will always show the file's true book folder relative path. Duplicate file names (in different subfolders) will always show the longer path to be able to differentiate between them regardless of the new Appearance Preference.
    Book Browser에 전체 경로를 표시하는 기능이 추가되었습니다. 폴더 구조를 그대로 유지하지만  Book Browser에 구성요소 별로 구분을 하는 대신 파일의 전체 경로를 볼 수 있습니다.

  • A Tools menu item has been added to standardize any epub already loaded to Sigil's old structure
    EPUB2, EPUB3 파일을 새로 만드는 버튼입니다. 전엔 EPUB3를 만들려면 설정에서 EPUB3로 지정해 줘야 됐고, EPUB3 지정 후에는 EPUB2로 만들 때 다시 설정을 바꿔야 했는데 이젠 버튼으로 EPUB2, EPUB3를 바꿀 수 있습니다. 

  • A Tools menu item has been added to allow a user to design a custom "empty" epub layout
    EPUB 구조를 편집자가 만들 수 있는 기능이 추가되었습니다. 새로 만들기 할 때 편집자가 구성해 놓은 구조로 EPUB을 시작할 수 있게 됐네요. 이제 Javascript 등이 Misc로 들어가는걸 편집자 마음대로 바꿀 수 있게 돼네요.
  • A "Move" context menu item has been added to BookBrowser to enable moving of resources to where you want them to be.
    파일도 편집자 마음대로 폴더를 이동할 수 있습니다.

  • A "Rename" context menu item has been added to BookBrowser to enable renaming of the NCX and OPF resources.
    NCX와 OPF 파일 이름도 바꿀 수 있습니다. content.opf, toc.ncx로 알고 계신 분들이 많은데 이 파일도 이름을 마음대로 바꿀 수 있거든요. 1.0 버전부터는 이름 바꾸는 기능이 추가되었어요.
  • The python plugin interface has been extended to support all of this as documented in the new Sigil_Plugin_Framework_rev12.epub and online at MobileRead in our Plugin Development thread.
    플러그인 개발자를 위한 기능이에요. 플러그인 프레임워크가 바뀌었고 프레임워크 설명 파일 버전도 업데이트 됐다네요.

이번 버전에서는 반가운 변화가 많이 보이네요^^

특히 EPUB2를 EPUB3로 바꾸는 기능은 정말 꼭 필요한 기능이었어요.

울 나라 유통사들도 이제 EPUB3 포멧으로 넘어가야 할텐데... 언제까지 폐기된 EPUB2 포멧을 고수할까요?

 

설정

트랙백

댓글

  • 깜사 2020.01.14 18:07 ADDR 수정/삭제 답글

    쓰신 글 참고하여 따라해보려합니다. 초반 부터 막혀서 막막한데요.
    txt 파일에서 본문을 붙여넣을 때 북뷰에서 넣어야 쉬운 것 같은데, 시질1.0버젼에서 북뷰와 소스뷰를 바꾸는 아이콘이나 메뉴를 못 찾겠네요. 도와주실 수 있나요.

    • 깜사 2020.01.14 19:09 수정/삭제

      자문자답입니다.

      https://github.com/Sigil-Ebook/Sigil/releases/tag/0.9.16

      https://github.com/Sigil-Ebook/Sigil/wiki#yes-book-view-is-really-gone

      https://github.com/Sigil-Ebook/PageEdit/releases/tag/1.0.0

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

      궁금한 점 있으면 댓글 보다는 메일로 보내주세요 ^^ 댓글은 잘 안봅니다 ^^;;

      Sigil 0.9.14버전까지 책보기가 있고 0.9.15부터 책보기가 외부 편집기로 변경됐어요.
      https://sigil-ebook.com/2019/12/17/pageedit-1-0-0-release/
      페이지 에디터 설치 후 외부편집기 연결하면 돼요. 외부 편집기가 불편하면 0.9.14 버전을 이용하세요.

리디움 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 압축 파일) 변환 방법이었습니다.

설정

트랙백

댓글