posted by 내.맘.대.로 2018. 7. 27. 10:39

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

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

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

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

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

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

어떤 것들은 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을 받지는 않을거예요.


반응형
posted by 내.맘.대.로 2018. 7. 1. 08:24

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

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

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

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

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

http://m.biz.khan.co.kr/view.html?artid=201806301251001&code=920100


폰트 업체들이 PDF 내장 폰트를 문제삼기 시작했내요.

PDF 변환할 때 아웃라인으로 저장하면 이 문제를 피할 수 있습니다.


반응형
posted by 내.맘.대.로 2018. 6. 27. 09:31

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

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

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

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

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

이전 내용은 이곳에서 확인하시기 바랍니다.

http://epubguide.net/245
무료 폰트를 한눈에 볼 수 있는 사이트가 생겨 더 이상 EPUB 업데이트를 하지 않습니다.
무료 폰트를 찾는 분들은 아래 사이트를 방문해 보세요.
https://noonnu.cc/

 

 

전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 

 

다운로드 https://goo.gl/98udBq
바로보기 : 

http://193.122.179.74/book/100바로보기2 http://193.122.179.74/book/101

 

 

❖ 

판올림 내용- 태폰트 3종 추가   * 태흘림   * 태조각   * 태으뜸

 

 

Set03 무료 서체 목록(일반 기업, 지자체 등)

    • 가비아 글꼴
      • 가비아 봄바람
      • 가비아 납작블럭
      • 가비아 솔미체
    • 미생체
    • 야놀자 야체
    • tvN 즐거운 이야기체
    • 아리따 글꼴
      • 아리따 부리
      • 아리따 돋움
      • 아리따 Sans(로마자)
      • 아리따 흑체(중국어)
    • 배달의민족
      • 배민 한나체
      • 배민 주아체
      • 배민 도현체
      • 배민 한나는열한살체
      • 배민 기랑해랑체
      • 배민 연성체
    • 티몬
      • 티몬 몬소리
      • 티몬 티움(영문전용)
    • 고양
      • 고양체
      • 고양덕양체
      • 고양일산체

 

  • 태폰트
    • 태흘림
    • 태조각
    • 태으뜸

 

 

 

Set02 무료 서체 목록(은글꼴)

  • 은글꼴
    • 은바탕
    • 은돋움
    • 은그래픽
    • 은궁서
    • 은필기
    • 은디나루
    • 은자모바탕
    • 은자모돋움
    • 은자모노벨
    • 은자모소라
    • 은펜
    • 은펜흘림
    • 은필기a
    • 은신문
    • 은타자
    • 은바다
    • 은옛글

 

 

Set01 무료 서체 목록(국가기관, 네이버, 구글 등)

    • 구글 노토(Google Noto)
      • Noto Sans KR
      • Noto Sans Mono KR
      • Noto Serif KR
    • 네이버 나눔 글꼴
      • 나눔명조
      • 나눔고딕
      • 나눔바른고딕
      • 나눔펜
      • 나눔바른펜
      • 나눔브러시
      • 나눔스퀘어
      • 나눔스퀘어라운드
      • 나눔바른고딕-옛한글
    • NHN 고도 글꼴
      • 고도 마음(godo Maum)
      • 고도 Rounded-L
      • 고도 Rounden-R
    • 저작권위원회 KCC 글꼴
      • KCC 김훈체
      • KCC 은영체
    • 문화체육관광부, 출판인회의 코펍(Kopub) 글꼴
      • 코펍 바탕(Kopub Batang)
      • 코펍 돋움(Kopub Dotum)
    • 만화진흥원(한국콘텐츠진흥원) 글꼴
      • 만화진흥원체
    • 서울시 서울 서체
      • 서울 남산체(정체)
      • 서울 한강체(정체)
      • 서울 남산체(장체)
      • 서울 한강체(장체)

 

 

 

1. 목차에서 글꼴의 모양을 확인할 수 있습니다.

글꼴 이름을 누르면 글꼴의 상세 정보로 이동합니다. 

 

 

2. 글꼴의 저작권 정보와 배포처, 다운로드 경로를 확인할 수 있습니다.

 

 

3. 글꼴의 상세한 내용을 확인할 수 있습니다.

한글, 옛한글, 영문, 일본어, 한자, 기타 언어(스페인, 독일, 프랑스, 러시아)의 지원 여부를 알 수 있고 특수문자 세트가 포함되어 있는지 확인할 수 있습니다. 

 

 

4. 한글, 영문 문단이 어떻게 보이는지 확인할 수 있으며 글자 크기에 따른 모양, 스타일(기울임, 진하게)을 적용했을 때의 모양을 알 수있습니다. 

 

 

5. 전자책 본문으로 썼을 때 글자가 어떻게 보이는지 알 수 있습니다. 본문 내에서 진하게, 기울임, 윗첨자, 괄호설명 등의 스타일이 어떻게 표현되는지 알 수 있습니다.

 

 

 

아직 본문 디자인은 편집중이고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨 주십시오. 확인하는 대로 추가하겠습니다.

 

반응형
posted by 내.맘.대.로 2018. 6. 26. 09:36

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

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

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

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

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


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

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

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


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

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

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

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

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


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

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

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


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

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


예전에 소개한 적이 있는데

선을 긋고

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을 쓰면 아래에만 줄을 그을 수 있어요.

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

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

반응형
posted by 내.맘.대.로 2018. 5. 28. 09:00

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

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

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

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

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

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

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

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>



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




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



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





반응형
posted by 내.맘.대.로 2018. 5. 14. 09:36

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

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

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

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

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

2018년 텍스트형 전자책 제원사업이 발표됐습니다.  [내용 상세 보기]


그동안 아는 분들 위주로 제작을 해 드렸는데, 지원사업 선정작에 한하여 제작 요청을 받습니다.

제작 비용은 제작 난이도에 따라 달라지며, 지원 사업비용 내에서 책정합니다.



* 내맘대로의 EPUBGUIDE.NET이 만든 전자책의 특징!


1. 양식화된 형태로 대량 제작하는 방식과 달리 종이책에 맞춰 개별적인 스타일 적용.

2. 종이책 스타일은 살리면서 전자책의 특성에 맞게 재편집.

3. 책에 포함된 다양한 글꼴을 저작권 걱정 없는 무료 글꼴 중 비슷한 글꼴을 찾아서 제작.

4. 본문과 자연스러운 이미지 및 이미지 설명(캡션) 배치.(원형, 다각형 형태의 이미지도 처리 가능)

5. 모든 주석은 팝업 주석 처리.(단, 팝업 주석 지원하지 않는 뷰어에서는 링크로 연결)

6. 제작 기간 : 최대 5일(영업일 기준) 이내

     - 제작 진행 3일 이내 1차 검수 파일(완성본)을 출판사에 전달

     - 출판사에서 검수 후 수정 사항 접수

     - 수정사항 접수 후 1일 이내에 최종 파일 출판사에 전달

        * 최종 파일 전달 후에라도 수정사항 있을 경우 무상으로 수정(3년 이내)

        * 단, 책에 따라 제작 일정이 달라질 수 있으며 3일 이상 걸릴 경우 사전에 안내드립니다. 



* 제작 요청


이메일 : byword77@gmail.com


이메일로 샘플(PDF, 인디자인 등) 혹은 종이책 미리보기 링크(교보문고, 예스24, 알라딘 등)를 보내주시면 견적서를 보내드립니다. 


제작의 품질을 보증하기 위해 월 10종 내외로 제작합니다. 먼저 작업중인 책이 있을 경우 제작 일정이 지연될 수 있으며, 제작 일정은 견적서에 안내 드립니다.




==제작지원사업에 대한 자세한 안내는 아래를 참고하시기 바랍니다==

2018년 제1차 텍스트형 전자책 제작 지원 사업 공고(링크)

한국출판문화산업진흥원은 <제1차 텍스트형 전자책 제작 지원> 사업을 
아래와 같이 공고하오니 많은 참여 바랍니다.

□ 사업목적

  • ㅇ 출판사의 전자책 제작 의지 독려를 통한 국내 전자책 시장 저변 확대 및 전자출판 역량 강화
  • ㅇ 우수 전자책 콘텐츠 보급 및 편중화 해소를 통한 전자책 콘텐츠 산업 선진화
  • ㅇ 디지털 독자 양성을 통한 전자출판 인식 제고 및 내수창출 도모

□ 지원 내용 및 조건

2018년 제1차 텍스트형 전자책 제작 지원 사업 공고의 지원 내용 및 조건 | 구분, 내용으로 구분되는 표
구분내용
지원대상
  • - 일반도서 전체
  • - 미출간 원고
지원형식
  • - EPUB, PDF 등 형식
지원내용
  • - 종당 최대 40만 원 이내 실제작비 지원(초과금액은 출판사 자부담)
      ※ 제작파일 형식별 상한액 기준 : 이펍-40만 원 이내, PDF-30만 원 이내
지원규모
  • - 총 530종 내외 선정
지원자격
  • - 텍스트형 전자책을 제작하려는 출판사
      ※ 출판사당 최대 20종까지 신청 가능
제외대상
  • - 국고로 전자책 제작 지원금을 이미 받아 제작된 도서
  • - 전자책으로 제작되어 기 유통되고 있는 도서
  • - 저작권자와의 배타적발행권 설정 계약이 명확하지 않은 도서
  • - 학습교재류, 정기간행물, 학회지 등
  • - 시리즈 중 일부 콘텐츠로 한 콘텐츠로서의 완결성이 없는 경우

※ 전자책 제작비 지급 기준(종이책 기준)

2018년 제1차 텍스트형 전자책 제작 지원 사업 공고의 지원 내용 및 조건 중 전자책 제작비 지급 기준(종이책 기준) | 구분(작업분량(페이지, 이미지)), 제작난이도(상, 중, 하)으로 구분되는 표
구분제작 난이도
작업
분량
페이지200p 초과100p~200p100p 미만
이미지20개 초과5개~20개5개 미만


반응형