posted by 내.맘.대.로 2018. 4. 19. 11:00

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

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

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

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

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

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

출판사 : 여름오후

제작기간 : 2일


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



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


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


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

역시 색은 보라색이에요.



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

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

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

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


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

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


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

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





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

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



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

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





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



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

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

반응형
posted by 내.맘.대.로 2018. 4. 18. 15:25

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

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

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

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

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

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

출판사 : 토네이도

제작 기간 : 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, 알라딘 등에서는 이렇게 보입니다.



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

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


반응형
posted by 내.맘.대.로 2018. 3. 13. 11:47

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

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

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

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

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

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

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


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


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

2. 목록 스타일의 인용구

3. 이미지와 이미지 설명

4. 표

5. 박스 형태의 글상자

6. 팝업 주석

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

8. 괄호 설명

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


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


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

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

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




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

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

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

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


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


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


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


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

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

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

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


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



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

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


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


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


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

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


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

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


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




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




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

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



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


팝업주석입니다.

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


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



반응형
posted by 내.맘.대.로 2017. 11. 8. 13:31

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

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

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

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

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

책 제목 : 분노유발 심리학

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


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


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


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


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

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

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


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



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




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




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

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

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

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



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

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


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


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


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



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


반응형
posted by 내.맘.대.로 2017. 11. 3. 10:59

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

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

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

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

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

제작 기간 : 2일

포인트 : 편집자가 신경을 많이 쓴 장 제목을 최대한 살리자.


이 책은 시간이 오래 걸릴 것 같지 않았는데 생각보다 오래 걸렸습니다. 이미지가 많이 들어있기도 했고, 인디자인에서 편집한 이미지라 원본 이미지를 쓰지 못하고 PDF에서 편집된 최종 이미지를 추출하는데 시간이 좀 걸렸지요. 그런데 가장 시간이 많이 걸린건 제목입니다. 4개 파트로 구성되어 있고, 각 파트별로 10 ~ 14개의 챕터로 나눠진 책입니다. 챕터가 40개 조금 넘게 구분되어 있습니다.


전자책 샘플 이미지 세번째 그림에 육각형 글머리 기호가 있고, 제목은 1줄 혹은 2줄로 세로로 늘어서 있는 장 제목 스타일이 있습니다. PDF(종이책)에는 이렇게 편지돼 있습니다.



본문에는 다른 포인트가 없어 이 부분을 살리다 보니 손이 만히 가서 편집하는 시간이 오래 걸렸습니다. 2일 중 1일은 40개의 제목을 넣는데 보냈네요.


아래는 편집이 끝난 '일개미 자서전' 캡쳐 화면입니다.



전자책 샘플 이미지



* 스마트폰에서는 제목과 본문 줄간격이 너무 벌어지면 보기 좋지 않아 종이책 보다 줄간격을 조금 벌렸다. 스마트폰을 통해 전자책을 보는 사람이 70% 정도 되기 때문에 PC나 태블릿 보다 스마트폰에 디자인을 맞췄다.  



반응형
posted by 내.맘.대.로 2016. 12. 22. 13:20

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

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

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

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

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


엄마 같지 않은 엄마 표지

교보문고

리디북스


오늘 설명드릴 스타일은 조금만 응용하면 다양하게 활용을 할 수 있습니다. 

출산 경험이 있는 여성분들이 격하게 공감하는 책 '엄마 같지 않은 엄마'를 전자책으로 만들면서 스타일 고민을 많이 했어요. 까다로운 편집이 많아서 이미지로 넣을까 생각을 했다가, 본문 내용상 이미지 보다는 텍스트로 가는게 맞아 CSS로 표현했습니다. 스타일 잡는데 생각보다 시간이 오래 걸렸어요. 만들고 나면 별거 없는데, 방법을 생각하는데 시간이 오래 걸리네요 ^^;


1. 주요 편집 스타일


1.1 둥근 이미지에 텍스트 어울림 처리


이런 편집은 종종 봤지만 직접 만들 생각을 하지는 않았습니다. 종이책을 보면서 '가능하겠네' 정도만 생각하고 어떻게 구현할지 구체적으로 생각해 본 적은 없었는데 '엄마 같지 않은 엄마'에서 만나게 됐네요.


이 스타일은 2가지로 활용할 수 있습니다. 하나는 이 책에서처럼 둥근 이미지 바깥쪽에 자연스럽게 텍스트를 배치하는 방법입니다. 다른 하나는 둥근 이미지 안쪽에 텍스트를 배치하는거예요. 텍스트를 둥근 공모양으로 만들 수 있습니다. 




1.2. 말풍선 안에 텍스트 넣기


얼핏 보면 쉬워보이는데 생각보다 따져야 할게 많습니다. 이 책에서는 말풍선이지만, 사과모양, 컵 모양 등 배경 이미지를 바꿀 수 있어요. 종이책에서 종종 볼 수 있는 편집입니다.


1.3. 배경과 텍스트가 있는 장 제목


이 스타일도 이미지로 만들까 하는 생각을 했습니다. 장 제목 페이지를 이미지로 넣는 경우가 종종 있거든요. 그런데 이미지로 넣기에는 너무 단순한 형태여서 텍스트로 만들었습니다. 




1.4. 텍스트 길이에 따라 길이가 달라지는 밑줄


'첫째 출산', '모유 수유는 흥미로운 경험이다' 처럼 제목 길이에 맞게 밑줄을 넣는 스타일입니다. 간단해 보이지요? 그런데 밑줄이 border나 text-decoration이 아니에요. 이미지로 된 물결무늬입니다. 

글자 크기가 변경돼도 밑줄이 늘었다 줄었다 변해야 하고, 글자 수가 달라져도 변해야 합니다. 물결무늬라 이미지 크기를 조절하면 안되요. 텍스트 넓이에 맞게 물결 무늬가 늘어나야 합니다. 







2. 전자책 편집 스타일


2.1 둥근 이미지에 텍스트 어울림 처리


.circle_left {

width: 200px;

height: 200px;

float: left;

margin-right:1em;

border-radius: 50%;

-webkit-shape-outside:circle(50%);

shape-outside:circle(50%);

}


.circle_right {

width: 200px;

height: 200px;

float: right;

margin-left:1em;

border-radius: 50%;

-webkit-shape-outside:circle(50%);

shape-outside:circle(50%);

}


.box_family_intro {

display : block;

min-height : 200px;

margin-bottom : 2em;

}


.box_family_intro > p {

text-indent : 0;

font-family : "강조";

}


<div class="box_family_intro">

<p class="circle_left"><img alt="family_mother" src="../Images/family_mother.png"/></p>

<p class="noindent"><strong>엄마 세라</strong></p>

<p>일명 엄마 같지 않은 엄마.</p>

<p>작가이자 블로거. 철학 전공으로 대학교를 우수한 성적으로 졸업했다<sub>(철학 전공은 취직에 전혀 도움이 안 되었음)</sub>. 홍차를 엄청 마셔댄다. 포도주스와 캔에 든 진토닉을 좋아하며 BBC에서 방영하는 〈폭풍의 언덕〉 광팬이다. 페이스북을 밥 먹듯 들락거린다.</p>

</div>


스타일 중에 box_family_intro는 가족별로 텍스트가 겹치지 않도록 구분하기 위한 스타일입니다. float 속성을 써본 분이라면 다음 문단이 윗쪽 이미지에 올라가는 경험을 해보셨을 거예요. 텍스트가 많은 본문이라면 상관 없지만 이미지 하나에 가족 1명의 설명이 들어가야 되서 구분을 해줬습니다.

만약 텍스트가 많은 본문이라면 이런 구분을 해 줄 필요가 없어요.


이 스타일의 핵심은 이 두 속성이에요.


border-radius: 50%;

-webkit-shape-outside:circle(50%);


border-radius는 이미지 영역을 둥글게 제한해 줍니다. border 속성이 없기 때문에 없어도 차이는 없지만, 만약 border로 테두리를 그리고 background-color를 넣는다면 border-radius를 적용해야되요. 컴퓨터에서 이미지는 사각형일 수 밖에 없습니다. 그래서 이미지가 들어가면 그 영역은 사각형이 됩니다. border-radius : 50%;는 사각형 영역을 둥근 모양으로 바꿔주는 역할을 해요. 설명으로 이해가 안가면 border-radius : 50%;를 없애고, border : solid 1px #000000; 속성을 넣어보세요.


shape-outside 속성은 단어 뜻 그대로 바깥쪽의 모양을 만들어 주는 스타일이에요. 이 속성을 사용한 태그를 원형, 타원형, 삼각형, 오각형 등의 모양으로 만들 수 있습니다. 

circle() 값은 원형입니다. 50%를 기준으로 원의 크기가 정해집니다. 예를 들어 widht : 200px짜리 정사각형을 그렸다면 circle(50%)는 지름 200px짜리 원이 되요. 30%라면 120xp짜리 원이 되고요.


* circle(50%)



*circle(60%)


*circle(30%)


shape-outside는 circle(), polygon()-다각형, ellipse()-타원, inset() 등의 값을 사용할 수 있습니다.

이 글을 쓰면서 떠오른건데, '이상한 나라의 앨리스' 이미지에 텍스트 어울림 처리를 할 때 이 속성을 생각 못했었네요. 이 얘긴 다른 글에서 다루기로 하고...


이 스타일의 결과물입니다. 이미지 옆에 있는 빨간 선은 참고용으로 추가한거니 신경쓰지 마세요.

둥근 이미지를 따라 텍스트도 둥글게 배치됩니다. 원, 타원, 다각형 등 다양하게 활용할 수 있어 컵이나 인형 같은 복잡한 이미지에도 이런 식으로 텍스트를 배치할 수 있어 활용도가 높습니다.




2.2. 말풍선 안에 텍스트 넣기

.box_bubble {

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

background-size: 100% 100%;

background-repeat: no-repeat;

padding : 4em;

}


.box_bubble > p {

font-family : "강조";

}


<div class="box_bubble">

<p>아이를 낳기 전에 꿈꿨던 주부의 모습<sub>(1950년대 스타일의 멜빵 반바지를 입은 아이들이 장밋빛 뺨을 하고 얌전하게 노는 동안 친구에게 직접 구운 신선한 머핀을 대접하며 커피를 마시는 모습)</sub>이 떠오를 때마다 한바탕 웃으면서 레깅스에 묻은 아이들의 콧물을 닦는다.</p>

<p class="txt_right">라라, 촐리<sub>Chorley</sub> 거주</p>

</div>


배경에 이미지를 넣는 법을 소개한 적이 있습니다. (배경에 이미지 넣는 법 http://epubguide.net/182)

이를 활용한 스타일이에요. 다만 배경 이미지가 사각형이 아닌 불규칙한 모양입니다. 스타일이 간단해서 긴 설명은 필요 없을 것 같네요. 글상자를 만들고, 이미지를 배경으로 지정한 후 모양에 맞게 padding을 설정하면 됩니다. 


텍스트 양에 따라 말풍선 크기가 조절됩니다. 2페이지로 넘어가도 잘 표현되고요.


* 1페이지에 들어간 말풍선




* 2페이지 이상 넘어갈 때



2.3. 배경과 텍스트가 있는 장 제목


h2 {

font-family : "강조";

font-size : 1.8em;

display : block;

text-align : right;

margin-bottom : 5em;

}


.ch_no {

font-family : "제목";

font-size : 0.6em;

}


.bg_grey {

background-color : #ffffff;

opacity: 0.6;

margin : 15px;

padding : 5px;

}


.bg_grey > p {

text-indent : 0;

color : #000000;

}


.ch_bg {

background-image : url("../Images/ch_bg.jpg");

background-position : center;

background-repeat: no-repeat;

}


<body class="ch_bg">

<h2><span class="ch_no">Chapter 5</span><br/><br/>완벽하지 않아도<br/>괜찮아</h2>


<div class="bg_grey">

<p>괜찮지 않은 날이 있어도 괜찮다. 더는 버티기 힘든 날, 또다시 ‘웬수덩어리’ 모드로 전환한 아이들과 영영 인연을 끊고 싶어질 때, 엄마가 삐걱거리는 날들 말이다. 그런 순간마다 자신을 고문하는 엄마들에게 꼭 해주고 싶은 말이 있다. 삐걱거린다고 나쁜 엄마는 아니다. 지극히 인간적일 뿐이다. 엄마들이여, 삐걱거려도 괜찮다. 당신들은 정말 잘하고 있다.</p>

</div>

</body>


이것 역시 스타일이 복잡하지는 않습니다. 많이 쓰는 스타일을 어떻게 조합하느냐의 문제예요. 유통중인 책들 대부분이 장제목 페이지를 이미지로 넣는데 구조가 간단하다면 텍스트로 넣을 수 있습니다. 얼마 전에 올렸던 '설민석의 조선왕조실록(http://epubguide.net/201)' 처럼 텍스트가 많이 있을 때는, 종이책 사이즈의 장제목 페이지를 그대로 넣으면 글자를 읽기 어려울 수도 있어요. 


복잡한 패턴의 이미지가 들어간게 아니라면 이렇게 텍스트로도 얼마든지 장 제목 페이지를 만들 수 있습니다. 



2.4. 텍스트 길이에 따라 길이가 달라지는 밑줄


h4 {

font-family : "강조";

font-weight : bold;

font-size : 1.2em;


display : table;

text-align : left;

margin : 2em auto 1em 1em;

padding-bottom : 0.5em;


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

background-repeat: repeat-x;

background-position: left bottom;

}



<h4 id="sigil_toc_id_4">아기는 시도 때도 없이 먹는다</h4>



간단해 보이는데 생각보다 스타일이 복잡하지요? 물결모양의 밑줄을 그어야 하는데, 이 부분이 생각보다 까다롭거든요.


일정 길이의 물결무늬 이미지를 넣는다면 텍스트 길이에 따라 이미지를 확대/축소 시켜야합니다. 가로 폭만 확대시키면 될거라 생각할 수도 있는데 그럼 물결 모양이 길게 늘어져요.


제가 밑줄에 사용한 이미지에요. 



잘 안보이세요? 가운데 있는 먼지같은 이미지가 물결 무늬 밑줄을 그린 이미지입니다.

이 이미지를 가로로 계속 반복해 넣어 밑줄을 그린거예요. 텍스트가 얼마나 많든, 크기가 크든 작든 상관 없습니다. 한 자만 들어가도, 가로로 꽉 차도 물결 무늬가 일정하게 반복되요.


밑줄 뿐 아니라 반복되는 패턴의 배경이라면 이 스타일을 활용할 수 있습니다.







이 스타일을 활용할 만한 편집은 아주 많아요. 예를 들어 '당신은 아무 일 없던 사람보다 강합니다'라는 책 제목도 이 스타일을 활용할 수 있습니다. 제목에 다이아몬드 문양이 반복되는 밑줄이 있지요? ◇ 이 모양의 이미지 하나면 이런 밑줄을 그을 수 있어요. 이 책은 샘플링으로 설명 드릴게요 ^^



오늘은 여기까지...

반응형