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

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

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

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.04.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의 표지 정보를 이용하지 않습니다.
전자책 파일 등록할 때 업로드 한 표지 이미지로 서재 표지 정보를 표시합니다.
그러니 테스트를 위해 유통사 뷰어에 올렸는데 표지정보가 보이지 않아도 걱정 안해도 되요.
물론, 당연히, 반드시 표지 정보를 넣어야 하지만
표지 정보를 깜빡 해도 서점에 서지정보 등록할 때 표지 이미지를 잘 올렸다면 유통에는 문제가 없습니다.

설정

트랙백

댓글

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로 저 문제를 해결할 방법을 고민해 봐야겠네요 ^^

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


설정

트랙백

댓글

나에게 어울리는 삶을 살기로 했다 - 여름오후

제목 : 나에게 어울리는 삶을 살기로 했다

출판사 : 여름오후

제작기간 : 2일


2도 인쇄용 PDF를 받아 이미지 색을 다시 설정하느라 이미지 편집 시간이 걸렸습니다. 본문에도 재미있는 스타일이 있어요.



목차는 단순해 보이지만 느낌을 그대로 살리려면 조금 까다로와요. 장 번호 모양을 그대로 살리면서 장 제목과 절 제목 배치를 해야되서 약간 트릭(?)을 썼습니다. 하늘색은 2도 인쇄용이라 실제 종이책 색상은 보라색이에요.


전자책에서는 이렇게 보입니다.


종이책에 2페이지로 편집된건 전자책에서 1페이지로 느낌을 살려야 합니다.

역시 색은 보라색이에요.



전자책에서는 이렇게 보입니다. 

2페이지로 된 테두리를 1페이지로 처리했어요. 테두리는 단순합니다. border로 만들면 되요.

본문은 약간 손이 가는 부분이 있었지만 스타일 자체는 다른 책과 큰 차이가 없습니다. 첫단락 들여쓰기 없고, 인용구, 목록 등 많이 쓰이는 스타일입니다.

그런데 절 제목 아래에 이런 점이 붙어있어요.


총 9장, 각 장마다 5개의 절이 있어 총 45개 절입니다.

제목 아래에 45번 똑같은 코드를 반복해서 넣어야 할 때 사용할 수 있는 스타일을 설명드린 적이 있어요.


의사클래스(Pseudo-class)를 활용하면 코드를 넣지 않아도 제목 아래에 자동으로 점이 들어갑니다.

의사 클래스는 여기를 참고하세요 





h3:after 클래스를 사용해 스타일을 잡으면 HTML 태그는 이렇게 됩니다.

아래 코드를 보면 <h3>내 삶을...</h3> 밑에 점을 넣는 코드가 보이지 않아요.



하지만 책보기나 미리보기로 보면 이렇게 점이 들어갑니다. 

점을 넣지 않아도 되고, 점 대신 다른 문장이나 기호로 바꿀 일이 생겨도 CSS에서 코드 한줄만 수정하면 모든 제목에 적용되기 때문에 편집 시간을 절약할 수 있어요.





전자책으로는 이렇게 보입니다.



복잡한 스타일은 아니지만 재미있는 속성을 사용한 책이에요.

여름오후 출판사의 첫번째 책이니 전자책으로도 많이 봐주세요 ^^

설정

트랙백

댓글

지금 하지 않으면 언제 하겠는가 - 토네이도

책 제목 : 지금 하지 않으면 언제 하겠는가

출판사 : 토네이도

제작 기간 : 2일


2일 걸렸는데 오전에 다른 일을 하며 만들었기 때문에 실제 제작 기간은 1.5일 정도입니다.


이 책에는 얼마 전에 설명드린 스타일이 나왔어요.




종이책 목차에 이런 테두리가 있습니다. 

이런 테두리를 만드는 방법은 2가지예요.



첫째, border를 이용하는 방법.


.sample {

    border-top : 10px grey solid;

    border-bottom : 10px grey solid;

    border-left : 10px black solid;

    border-right : 10px black solid;

}


둘째, 테두리 이미지를 쓰는 방법


자세한 설명은 아래 글을 참고하세요.


패턴을 넣은 테두리 : http://epubguide.tistory.com/254


저는 두번째 방법을 썼습니다. 

어떤 방법을 쓰든 괜찮습니다. 


전자책에서는 이렇게 보여요






그리고 이런 스타일이 있네요.

이미지로 넣을까, 글자로 넣을까 고민을 하다 글자로 넣었어요.

Introduction이라는 부분을 이미지로 넣으면 더 깔끔할 것 같지만, 화면 폭에 따라 확대/축소 되면서 '마흔 번째 생일에 깨달은 것들' 이라는 제목과 글자 크기 비율이 맞지 않을 것 같았습니다. 그래서 Introduction도 텍스트로 넣었어요.





전자책으로는 이렇게 보입니다. 

Introduction과 딱 맞는 무료 폰트를 찾지 못해 글자 느낌은 달라요. 하지만 화면 크기와 상관 없이 '마흔 번째 생일에 깨달은 것들'이라는 글자와 비율이 유지됩니다. 이미지로 들어가면 화면 폭에 따라 비율이 달라질거예요. 


본문 스타일은 평범합니다. 특별히 설명할 만한 스타일은 없어요.




전자책에서는 이렇게 보입니다. 



본문 중간에 재미있는 스타일이 하나 더 있습니다.


종이책에서는 이렇게 보이는데


iBooks, 리디북스 등에서는 이렇게 보여요.


교보eBook, 알라딘 등에서는 이렇게 보입니다.



'지금 하지 않으면 언제 하겠는가' 전자책 스타일이었습니다.

책도 재미있어요. 전자책 출간되면 읽어보세요 ^^


설정

트랙백

댓글

[문의] 대논쟁 철학베틀 스타일

문의가 한참 없다가 2개가 한번에 들어왔어요. 그래서 두번째 문의도 정리해 봤습니다.


문의가 들어온 책은 '대논쟁! 철학 베틀'이에요.


책이 없어 리디북스 미리보기 화면을 보니 이렇게 되어 있네요.



문의 내용은 2개였습니다.


1. 꼭 알아두자 글상자의 테두리는 그릴 수 있겠는데 글상자 위에 있는 '꼭 알아두자' 이미지는 어떻게 테두리에 겹치나?


2. 철학자 이미지 옆에 대화(?) 내용이 나오는데 이건 표로 만드는건가?



* 1번 테두리에 겹친 그림 설명

1번은 저도 자주 사용하는 스타일이에요.

블로그에도 여러번 언급한 적이 있는 스타일입니다.

참고를 하시려면 샘플 파일이 있는 아래 글을 확인해보세요.


http://epubguide.net/206


이게 같은 스타일? 이라고 생각하시는 분은... 안계시겠지요 ^^?

같은 스타일입니다. 이미지 대신 텍스트가 들어가고, 왼쪽이 아닌 가운데라는 점만 다를 뿐 이미지를 테두리 위에 겹치는 원리는 똑같아요.


'대논쟁 철학베틀' 스타일도 만들어 봤습니다. 제가 만든 스타일은 이래요.


.box_note {

border-radius : 15px;

border : 3px solid brown;

margin : 5px;

padding : 5px;

}


.box_title {

margin-top : -25px;

}


<div class="box_note">

<div class="box_title"> <img alt="img_note" src="../Images/img_note.png"/></div>

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

</div>


이미지 상자 위치는 글상자 안쪽에 넣어도 되고 바깥쪽에 넣어도 됩니다. 별 차이 없어요.


<div class="box_title"> <img alt="img_note" src="../Images/img_note.png"/></div>


이 코드를 글상자 바깥에 두고 싶으면 margin-top 대신 margin-bottom을 쓰면 됩니다.



*2번 철학자 이미지 옆 대화 설명


이건 표가 아닙니다.

그냥 이미지 float:left; 처리한거예요.

근데 float:left; 하면 이런 문제가 생겨요.



텍스트가 이미지를 벗어나면 이미지 아래에 붙습니다.

이미지 아래에도 '여백'이 생겨야 하는데 그 공간에 텍스트가 들어차지요.

제가 왜 '여백'을 강조했을까요?

저걸 해결하는 방법은 완전 초보라도 다 아는 여백 속성, margin을 이용하면 되기 때문이에요.

CSS는 응용이 중요하고, 그리고 간단합니다.

여백이 필요하면 여백을 주면 되는거예요.


그래서 이런 스타일이 나왔습니다.

'헉...' 소리 날 정도로 간단하지요?

물론, 저는 다른 스타일은 하나도 안주고, 설명에 필요한 스타일만 넣었기 때문에 간단한거예요. 여기에 글꼴을 넣고, 글자 크기를 바꾸고 줄간격이나 정렬을 추가하면 됩니다.

.img_philo {

float : left;

display: inline-block;

}


.txt_talk {

margin-left : 80px;

}

* 참고로, 설명을 위해 픽셀을 쓰고 이미지 크기도 지정하지 않았어요. 이미지 크기 지정하고, 여백은 이미지 크기에 따라 변하도록 %나 em을 쓰면 더 좋아요. 작은 화면에서는 이미지가 작게, 큰 화면에서는 이미지가 크게 나와야 보기 좋거든요.


여기까지가 '대논쟁, 철학베틀'의 스타일일거예요.

최종 결과물은 이렇습니다.




아마 이 책 CSS 코드를 열어봐도 큰 차이는 없으리라 생각합니다 ㅎㅎ

하지만 이 코드에는 한가지 문제가 있어요.

화면이 가로로 넓을 경우에 철학자 이미지가 위쪽으로 올라갈거예요.



이 문제를 방지하는 코드를 넣었을지 모르겠는데, 샘플만 봐서는 안들어갔을 가능성이 커보이네요.

그래도 별 문제는 없습니다. 최근엔 EPUB뷰어가 이렇게 가로로 긴 화면이 나오도록 하지 않거든요. iBooks나 캘리벌로 책을 열고 가로를 길게 만들면 책과 비슷한 범위에서 1페이지로 자르거나 2페이지로 나눠 보여줍니다. 그러니 저렇게 나온다고 해도 크게 문제되지는 않을거예요.


그래도, 화면이 아무리 넓어도 문제가 생기지 않는게 더 좋지 않을까요?

그리고 편집할 때 코드도 조금 복잡해요. 철학자 얼굴이 들어가는 위치에 똑같은 코드가 반복적으로 들어가야 하거든요.


clear:both; 속성 생각하셨다면 박수~~~

하지만 clear:both;로도 해결되지 않습니다. 그리고 clear:both; 속성은 제대로 모르고 쓰면 오히려 독이 되기도 해요. 몇몇 편집자가 이미지마다 clear:both;를 넣는데, 화면 크기를 마구 바꾸다 보면 이미지가 전혀 엉뚱한 곳에 나오거든요. 유통중인 책에도 이런게 몇종 있습니다.



clear:both:를 쓰면 이런 결과가 나올 수 있어요. 좀 더 가혹한(?) 테스트 환경을 만들어 보면, 이런 결과가 나올 수도 있습니다.


두번째 문장은 두번째 이미지에 와야 하는데 첫번째 이미지에 모든 문장이 붙은 것 처럼 보여요.


<div class="img_philo"><img alt="img001" src="../Images/img001.png"/></div>


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


<div class="img_philo"><img alt="img002" src="../Images/img002.png"/></div>


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


그리고 코드 문제(라기 보다는 편집상 불편함)도 있습니다.

대화형태고 철학자 얼굴이 100번도 넘게 나오는 책이라면 이미지를 삽입하는 코드가 무한 반복되겠지요.


그래서 저는 이렇게 수정을 했습니다.


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

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


어때요? 코드가 훨씬 깔끔해 졌지요?

txt_philo01 클래스를 철학자별로 하나씩 만들어서 철학자의 대화에 넣어주면 됩니다.

이미지를 무한 반복해서 넣지 않아도 되서 html 코드가 깔끔해 졌어요. 그리고 화면이 올라가는 문제도 해결을 했습니다.



극한으로 가면 여전히 약간의 문제는 보여요. 이건 줄간격을 넓히면 해결되지만 줄간격이 너무 넓으면 본문이 보기 싫기 때문에 적정한 선에서 조절을 하면 됩니다.



텍스트가 위쪽 이미지 아래 바짝 붙는건 이미지 위아래에 투명한 여백을 살짝만 줘도 해결이 되요. margin을 이용해 해결할 수도 있고요.


업그레이드한 스타일을 적용한 최종 결과물은 이렇습니다. 정상적인 가독 상황이라면 업그레이드 해도 차이는 없어요. 하지만 편집 시간이 달라집니다. 100개의 div 태그+ 이미지 태그를 넣는 것 보다는 100개의 clsss를 넣는게 훨씬 간단해요.





업그레이드 스타일은 철학자마다 스타일이 하나씩 있어야 하기 때문에 CSS가 복잡해 질 수 있습니다.

철학자가 100명이고 철학자가 한번씩 나온다면 100명의 CSS를 만들기 보다는 div로 이미지를 넣는게 좋아요.

철학자가 10명이고, 철학자가 수다스러워서 한명당 수십번 얘기를 한다면 이 스타일이 더 좋고요.


업그레이드 스타일이 궁금하신 분은 메일 주세요.


여기 올린 내용은 마음대로 써도 되지만 최소한의 양심은 지켜야 하는데, 그러지 못한걸 몇번 보고 나니 저도 조심스러워지네요.

출처를 밝히는 것 까지도 바라지 않습니다. 참고를 했으면 최소한 '내가 만들었다'라고 하지는 말아야지요.

설정

트랙백

댓글

[문의]패턴(웨이브)을 넣은 테두리

오랜만에 문의가 들어와 만들어봤습니다.


테두리 샘플 이미지


샘플 이미지처럼 위쪽과 왼쪽에만 이런 물결무늬 테두리를 넣을 수 있냐는 문의였어요.

border를 쓰면 실선, 이중실선, 점선 등의 테두리는 만들 수 있는데 물결무늬는 표현이 되지 않습니다. 이런 물결무늬를 표현하려면 border-image 옵션을 써야되요.


border-image 참고 : https://www.w3schools.com/cssref/css3_pr_border-image.asp


이걸 참고해서 코드를 만들면 이렇습니다.


.wave_edge {


border : 30px solid transparent;

margin : 10px;

padding: 5px;

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


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

border-image-slice: 36%;

}

 


사용한 테두리 이미지는 이거예요. 설명을 위해 급조한 이미지라 매끄럽지 않지만, 보다 정교하게 만들면 결과물이 더 깔끔하겠지요?


이미지 크기는 중요하지 않습니다. 이미지 크기와 물결무늬 크기는 아무 관계가 없습니다. 다만, 너무 작으면 물결무늬가 커졌을 때 흐릿하게 깨질 수 있으니 낮은 해상도보다 높은 해상도를 권해드려요.


그런데 border-image를 쓰면 이렇게 나옵니다. 문의는 특정면에만 테두리를 치는건데 4면 모두 테두리가 나오지요.




이 문제는 응용력을 조금만 발휘하면 해결할 수 있습니다.

답을 알면 '겨우 이런거야?' 라고 생각할 정도로 아주 아주 쉽지요.


4면 테두리가 아닌 2면만 테두리를 치고 싶다.


borde-left, border-top은 알잖아요.


그럼 border-image-left, border-image-top도 당연히 있을거예요.


.wave_edge {

border-right : 0;

border-bottom : 0;

border-top: 30px solid transparent;

border-left: 30px solid transparent;

margin : 10px;

padding: 5px;

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

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

border-image-slice: 37%;

}


border-right : 0; border-bottom : 0;은 없어도 되는데(되야 하는데) 일부 뷰어에서 점선이 생기네요.

그래서 테두리가 필요 없는 부분은 필요 없다고 선언을 해버렸습니다.


제가 사용하는 CSS 속성이나 초보 편집자가 사용하는 CSS 속성은 별 차이가 없습니다. 정말 예외적인 스타일이 아니면 책 한권에 들어가는 속성은 거의 비슷해요.

다만 초보 편집자는 응용을 잘 하지 못합니다. CSS는 제한된 속성을 얼마나 잘 응용하느냐에 따라 결과물이 엄청난 차이를 보입니다.


아래는 특정 면만 테두리를 적용한 결과물이에요. 교보와 알라딘 뷰어에서 캡쳐했습니다.


이건 알라딘 뷰어에서 본 결과


이건 교보ebook 뷰어에서 본 결과입니다.



설정

트랙백

댓글

알츠하이머의 종말

책 제목 : 알츠하이머의 종말

제작 포인트 : 전형적인 스타일의 책


알츠하이머의 종말은 경제경영/자기계발 류의 전형적인 스타일을 갖고 있습니다. 


1. 본문과 다른스타일의 문단 인용구

2. 목록 스타일의 인용구

3. 이미지와 이미지 설명

4. 표

5. 박스 형태의 글상자

6. 팝업 주석

7. 한글-외국어(영어, 한자 등) 병용 표기

8. 괄호 설명

9. 여러 단계의 소제목...


교과서 같은 편집 스타일이라 제작 결과물을 공유합니다.


부 제목 페이지는 이렇게 2페이지로 되어 있습니다. 

이걸 전자책에 그대로 넣으면 쓸모 없는 페이지 넘김이 발생해 독자들이 불편해요.

전자책을 안읽는 사람은 모르겠지만, 전자책을 읽는 분들은 불필요한 페이지 로딩이 반복되는게 많이 불편하거든요.




그래서 이렇게 수정을 했습니다. 

부 제목 페이지를 하나로 합쳐 종이책 스타일을 살리면서 전자책에 어울리도록 만들었습니다.

2페이지에 담긴 내용을 한페이지로. 그래서 부 제목을 한번에 넘길 수 있도록 했어요.

* 교보 뷰어에서 캡쳐하니 워터마크가 들어가네요.


목차 페이지는 별로 손댈게 없어 최대한 종이책 스타일을 살렸습니다. 


전자책에서는 이렇게 보여요.


많은 책들이 장 제목의 번호에 스타일을 줍니다. 이 책도 장 번호 스타일이 독특합니다. 단순해 보이지만 이런 스타일은 잡기 어렵지요. 이미지로 넣는다면 글자 크기를 변경할 때 이미지 크기도 같이 변경하도록 해야합니다. 이미지의 배경색을 투명으로 하면 사용자가 배경색을 바꿔도 어색하지 않아요. 


그리고 장의 첫번째 단락에는 이미지가 들어갔습니다.

글자 모양이 다르거나 이렇게 이미지가 들어간 책이 많이 있지요.

이 이미지도 글자 크기를 바꾸면 글자 크기와 같은 비율로 바뀝니다. 

배경색을 없애 독자가 배경색을 바꿔도 이미지가 하얀 네모로 보이지 않아요.


* 이미지 배경을 없애면 글자 크기나 배경색이 바뀌어도 글머리 기호 같은 이미지는 하얀 네모로 표시되지 않습니다. 글자 크기와 이미지 크기를 연동시켜 글자를 확대하거나 축소해도 이미지는 글자 비율에 맞춰 자동으로 확대/축소 됩니다.  



이 책은 목록 스타일의 인용구가 많습니다.

목록 스타일도 글머리 번호와 글머리 기호로 구분돼 있습니다.


글머리 번호 중에 강조가 들어간 경우도 있습니다. 


인용구는 위, 아래, 왼쪽만 여백을 줬습니다. 글자 크기는 본문보다 작게. 종이책 편집을 그대로 살렸습니다. 


이미지와 이미지 설명입니다.

이미지 설명은 본문보다 작은 글씨로 이미지 폭에 맞춰 넣었습니다. 


이 책에 들어간 표는 한 칸에 들어있는 내용이 많지 않고 2단~3단으로 열이 많지 않습니다.

반면 글자가 많고 판형이 조금 큽니다. 그리고 2페이지 이상 걸쳐있는 표가 많지요. 그래서 표를 이미지로 넣을 경우 스마트폰에서는 글자가 작아 읽기 불편합니다.


그래서  이미지로 넣지 않고 표로 넣었어요. 표로 넣을지, 이미지로 넣을지는 표에 따라 달라집니다. 이 책은 이미지 보다는 표로 들어가는게 가독성에 좋다고 판단했습니다. 




글상자가 많지는 않습니다. 하지만 이렇게 회색이나 패턴 배경이 들어가 있습니다. 




본문 안에 글상자가 들어간 경우도 있습니다. 

본문 안에 들어간 글상자는 배경색이 아니라 패턴이 있는 배경이미지 입니다. 



글상자가 단독으로 들어가면 패턴 배경이 확실하게 보입니다. 


팝업주석입니다.

팝업주석을 넣을 때는 주의해야합니다. 예스24 안드로이드 버전에서는 팝업 주석이 링크로 연결되거든요. 그래서 팝업과 링크 모두 포함하는게 좋습니다. 팝업 주석이 지원되는 뷰어는 팝업으로, 링크만 지원하는 뷰어는 링크로 이동합니다.


교보, 리디, iBooks는 팝업주석이 지원하는 대신 주석 내용이 나타나지 않습니다. 그래서 주석 내용이 있는 부분에는 일부 뷰어에서 주석 내용은 팝업으로만 볼 수 있다는 안내 문구를 넣어 주는 것도 좋습니다. 



설정

트랙백

댓글

분노유발 심리학

책 제목 : 분노유발 심리학

포인트 : 작은 부분에서 색다른 편집이 필요했던 책.


제목과 내용이 재미있는 책입니다. 분노유발자를 아홉가지 '또라이'로 분류해 대처하는 방법이 담긴 책이에요.


'또라이'라는 단어가 좀 과격하다 싶을 수 있는데, 책머리에 왜 '또라이'라는 단어를 선택했는지 설명이 나옵니다. 그리고 책을 보면 왜 '또라이'인지 알게 되고요.


어려운 스타일은 없었지만 처음 시도해 본 재미있는 편집이 몇가지 있습니다.


가장 고민을 많이 했던게 목차였네요 ㅡ.ㅡ;;

종이책 목차가 이렇게 되어 있습니다. 

[차례]라는 글자 아래로 청록색 선이 있고, 선의 반대쪽 끝에는 이미지가 있어요. [차례]의 아랫쪽, 이미지의 중간에 선이 오도록 하는게 포인트라 이 부분을 살려봤습니다. 


전자책에서는 이렇게 보입니다. 페이지가 없는 전자책이다 보니 종이책에서 2페이지로 구분된걸 한페이지에 몰아넣었습니다. 딱 한번 들어가는데 공을 들여야 하나 싶은 생각도 들었지만, 이 포인트를 살려야겠다는 생각이 들더라구요.



화면이 큰 PC나 태블릿에서 본 화면입니다. 본문, 제목 스타일은 어렵지 않게 작업할 수 있습니다.




스마트폰처럼 작은 화면에서 보면 이렇게 보입니다. 제목 상단 이미지를 본문 크기에 맞췄는데 큰 화면에서 보면 제목과 비교해 너무 커져서 화면 폭의 40%로 맞췄습니다. 




이 책의 재미있는 스타일이 나옵니다. 소제목 아래에 선이 있는데 청록색과 검정색이 겹쳐지는 점선느낌입니다. 한가지 색의 선이나 점선이라면 border를 썼을거예요. 그런데 이런 선은 이미지로 들어가야합니다. 

저는 이 이미지를 썼습니다. 이 이미지를 배경으로 넣었어요.

배경으로 이미지를 넣으면 문장 길이에 맞춰 줄이 조절됩니다. 

문장 길이에 딱 맞추기 위해 display속성을 추가했어요.



여기 쓰인 선은 위에 쓰인 선과 모양이 다릅니다. 

display 속성을 없애고, 좌우에 여백을 줘서 아랫쪽 회색 글상자보다 안쪽으로 들어가도록 했지요.


대화문에 사람 이름을 다른 색으로, 내어쓰기, 이런건 설명 안드려도 쉽게 할 수 있을거예요^^


이 책에서 독특했던 부분이 또 있습니다. 영문 병기 글자가 위쪽이나 아랫쪽이 아닌, 글자 가운데 정렬을 했더라구요. 그래서 영문 병기 표기가 글자의 중간에 배치되도록 상하 정렬을 맞췄습니다. 


종이책에서는 이렇게 보입니다.



어렵고 까다로운 스타일은 없었는데 배경이미지로 밑줄을 넣고, 영문 병기를 글자 가운데로 맞춘건 처음이라 소개해 봤습니다.


설정

트랙백

댓글


티스토리 툴바