복잡하지만 활용도 높은 스타일 - 엄마 같지 않은 엄마

교보문고

리디북스

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

출산 경험이 있는 여성분들이 격하게 공감하는 책 '엄마 같지 않은 엄마'를 전자책으로 만들면서 스타일 고민을 많이 했어요. 까다로운 편집이 많아서 이미지로 넣을까 생각을 했다가, 본문 내용상 이미지 보다는 텍스트로 가는게 맞아 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>작가이자 블로거. 철학 전공으로 대학교를 우수한 성적으로 졸업했다_{(철학 전공은 취직에 전혀 도움이 안 되었음)}. 홍차를 엄청 마셔댄다. 포도주스와 캔에 든 진토닉을 좋아하며 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>아이를 낳기 전에 꿈꿨던 주부의 모습_{(1950년대 스타일의 멜빵 반바지를 입은 아이들이 장밋빛 뺨을 하고 얌전하게 노는 동안 친구에게 직접 구운 신선한 머핀을 대접하며 커피를 마시는 모습)}이 떠오를 때마다 한바탕 웃으면서 레깅스에 묻은 아이들의 콧물을 닦는다.</p>

<p class="txt_right">라라, 촐리_Chorley 거주</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>

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

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

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

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

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

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

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

오늘은 여기까지...