내맘대로의 EPUB 제작 가이드

오랜만에 글을 올리네요.

한달 좀 넘게 여행을 다녀와서 현실 적응을 하느라 한참 제정신이 아니었어요.

오늘은 고난도 기술을 소개하려고 합니다.  

만약 이 잡지 표지를 한장의 이미지가 아닌, 이미지 위에 텍스트를 얹어 편집해야 한다면?

가운데 인물이 있고, 좌우에 텍스트를 배치해야 되요. 그런데 글자가 인물 안으로 들어가면 안되고 인물 주위에 자연스럽게 배치되야 합니다. 그리고 가장 중요한거. 글자 크기가 변경되도 편집이 틀어지면 안되고요. 어깨 아랫쪽으로 글자가 내려가는것 까지는 막을 수 없지만, 글자 크기가 커져도 얼굴 쪽으로 글자가 넘어가면 안됩니다. 가능할까요?

div 태그와 display : box; display :table; 등의 속성을 이용하면 비슷한 위치에 글자 배치는 가능해요. 그런데 글자를 키우면 틀어질거예요. 글자 크기가 변경 가능하면서 얼굴 선을 따라 곡선형으로 글자 배치하는건 정말 어렵고요. 이럴 때 쓸 수 있는 CSS속성이 있습니다. 예전에 한번 소개한 적이 있는 속성(http://epubguide.net/207)인데 어렵긴 하지만 활용도는 아주 높아요.

이 속성이 어떤건지 바로 이해를 하고 싶다면 아래 사이트에 들어가 보세요.

http://galjot.si/css-exclusions#examples-print

아랫쪽으로 쭉 내려가면 텍스트를 네모, 세모, 동그라미 모양으로 배치한걸 볼 수 있습니다. 텍스트를 이렇게 배치할 수 있게 해주는 속성이 shape-outside예요.

속성에 대한 설명은 모질라 재단 홈페이지에 나와있는걸 그대로 보여드릴게요. 속성에 대한 값이 너무 많아 다시 설명드리는건 낭비입니다!라는 핑계를 대며... ^^;;

/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> value */
shape-outside: url(image.png);

/* Gradient value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

여러가지 속성이 있는데 오늘 설명드릴건 polygon이라는 값이에요.

이 값을 잘 활용하면 전자책 편집하다 난감했던 문제들을 풀 수 있습니다.

오늘 예제는 '이상한 나라의 앨리스'예요. 

아래 이미지를 보세요.

이 이미지가 있는 부분을 제대로 편집한 전자책은 보기 힘들어요. 저도 예전에 한참을 고민하다가 앨리스와 체셔고양이 부분을 나눠서 편집한 적이 있습니다. 독자들은 별로 신경쓰지 않겠지만(ㅡ.ㅡ;) 그래도 전자책 제작 전문가라는 자부심이 있는데 이것 하나 해결 못하나 하는 자괴감이 들기도 하고...

왜 예전에는 shape-outside를 안썼냐고 하시면, 변명으로 들리시겠지만(^^;;) 안드로이드 구형 버전에서는 이 속성이 제대로 구현하지 못했어요. 안드로이드 4.4 이후 버전부터 구현이 되다가 5.0 버전 이후부터는 아무 문제 없이 적용이 됩니다. 그러다 보니 몇년 전에는 이 속성을 편집에서 쓸 생각조차 하지 않았습니다.

잡담은 그만 하고, 이제 본론으로 들어가서...

앞에서도 말했지만 오늘 소개할 속성은 이거예요.

shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

polygon 속성을 사용하면 다각형을 그릴 수 있습니다. 3각, 4각, 5각, 6각형 등을 표현할 수 있고, 별처럼 복잡한 도형도 그릴 수 있어요.

shape-outside : polygon(X좌표 X좌표 Y좌표, X좌표 Y좌표, X좌표 Y좌표);

이 스타일을 보면 좌표값이 3개 있습니다. polygon은 최소 3개의 좌표가 필요해요. 도형은 최소한 3개의 좌표를 필요로 하기 때문에 그래요. 사각형이라면 4개, 5각형이라면 5개의 좌표를 추가해 주면 됩니다. 좌표는 X축과 Y축이 한 쌍이에요. 그래서 2개가 한 쌍으로 콤마로 구분을 합니다. 화면 크기에 따라 변경되게 하고 싶다면 %단위를 쓸 수 있어요.

설명은 아무리 들어도 어렵지요^^?

이 속성은 직접 사용해 보기 전까지는 이해하기 어려워요. 저도 아직 X좌표가 가로축인지 세로축인지 자주 헛갈려요.

그럼 좀 더 이해하기 쉽게 예제로 설명을 드릴게요. 조금 많이 복잡하니 잘 따라오세요.

체셔고양이가 나오는 이미지는 오른쪽 중간부터 텍스트가 나옵니다. 이미지는 사각형이기 때문에 이미지를 넣고 float을 쓰면 오른쪽 중간 부분은 흰색으로 나와요. 이 부분을 채우려면 어떻게 해야 할까요? 컴퓨터가 이미지를 텍스트가 들어간 부분이 비어있는 다각형이라고 생각하도록 만들면 됩니다.

컴퓨터가 이미지를 이런 다각형이라고 생각하면 이미지가 들어간 영역을 제외한 나머지 부분에 텍스트를 채울거예요. 텍스트 크기가 변경되도 상관 없어요. 이미지 모양에 맞춰 텍스트가 알아서 채워지거든요.

이 이미지는 6각형이에요. 그러니 좌표가 6개여야 합니다. 좌표값은 이미지에 표시해 뒀으니 참고하세요.

이미지를 저렇게 만들기 위해 shape-outside 속성과 polygon 값을 아래같이 설정했어요.

좌표를 찾는게 어려워요. 한번에 찾을 수는 없고 눈대중으로 이쯤 되겠다 싶은 좌표를 찍은 다음 조정을 해줘야 되요. 정확한 이미지의 가로/세로 길이를 알면 계산을 해서 값을 잡아도 되지만, 그렇게 하는게 시간이 더 걸리더라고요.

참고로, Sigil에서는 shape-outside 속성이 표현되지 않습니다. Sigil에서 작업하기는 어렵습니다. 저는 텍스트 편집기와 브라우저를 열어놓고 작업했어요.

제가 설명을 건더뛰며 했기 때문에 설명만으로는 이해하기 어려울거예요. 모질라 사이트에 나와있는 예제와 이상한 나라의 앨리스 샘플을 직접 적용해 보면서 좌표가 바뀌면 도형이 어떻게 변하는지 확인해 보세요.

이 속성을 잘 활용하면 이미지와 텍스트가 복잡하게 얽힌 책도 편집을 할 수 있습니다. 시간이 많이 걸리긴 하겠지만요 ^^;

안녕하세요^^

국립중앙도서관에서 전자출판협회와 연계한 전자책 제작 실습 교육을 진행합니다.

전자책을 만들고 싶은데 무엇부터 해야할지 조차 모르는 초보분들을 대상으로 하며, 수업이 끝나면 소설 처럼 텍스트 위주로 된 전자책은 유통 가능한 수준으로 만들 수 있을거예요.

실습 위주로 수업을 하지만 전혀 경험이 없는 분들도 따라올 수 있도록 쉽게 진행을 하니 전자책 제작에 관심있지만 아무것도 몰라 시작이 두려우셨던 분들이라도 신청하세요.

'이상한 나라의 앨리스'를 샘플로 해서 EPUB 제작, 이미지 삽입, 제목/본문 편집 등 책 한권을 만드는데 필요함 기초를 모두 익힐 수 있습니다. 

초급 강의지만 출판 가능한 수준의 제작 기술을 전달하는 과정이기 때문에 하루로 끝나지 않습니다.

일 3시간씩 주 2회, 3주 과정으로 총 6일 18시간 교육입니다. 

긴 시간 전문적인 내용을 교육하는 만큼 취미로 생각하시는 분들 보다는 깊이있게 공부하고 싶은 분들이 많이 오셨으면 좋겠네

전자책을 제작하는데 비용이 들지 않도록 무료 프로그램(Sigil)을 사용합니다.

수업 신청하신 분들은 수업 전에 Sigil(https://sigil-ebook.com/)을 한번 설치해 보시면 도움이 될거예요,.

교육 내용 확인 : http://www.nl.go.kr/nl/service/meet/edu_list.jsp

** 실습 14일 전(4월 말)부터 온라인으로 신청 가능

5월 이후 중고급자 분들을 위한 전자책 제작 교육도 준비하고 있습니다..

이번 강의는 초급자를 위한 강으로 중고급자 분들을은 쉬운 내용일 수 있으니 보다 다양한 편집 기술에 관심있는 분들은 전자출판협회 강의를 이용해 주세요 ^^ 

지난 글에 '2% 아쉬운 교보문고 멀티미디어북(http://epubguide.net/209)'에서 '영한대역본'에 대해 얘기했었지요? MP3로 읽어주고, 영문과 한글을 번갈아 가면서 볼 수 있긴 하지만 MP3는 본문을 따라가지 못하고 번역본 참고는 너무 어려운 '영한대역'이었습니다. 그냥 종이책 펴놓고 MP3플레이어로 오디오북  들으면서 읽는 것과 별반 차이가 없었지요. 

전자책 특성을 살려서 만들어 본, 영한대역이라면 이래야 하지 않을까 하는 생각으로 만든 '이상한 나라의 앨리스' 샘플을 보여드립니다. 늘 강조하지만 이게 정답은 아닙니다. 다른게 틀렸다는 것도 아니고요. MP3로 자연스럽게 읽어주고 한글판과 영문판을 번갈아 가며, 혹은 선택해서 읽는 영한대역을 선호하는 독자도 있습니다. 영문판/한글판을 따로 만들면 영문으로 한번, 한글로 한번 읽을 수 있으니 독자 입장에서는 좋을 수 있어요.

제가 오늘 보여드리는 샘플은 '영어'로만 읽고싶은데 영어 실력이 딸려서 중간 중간 번역이 막힐때 답답했던 분들을 위한 편집본이에요. 그리고 MP3로 자연스럽게 녹음된 오디오북을 제공하지는 못하지만 영문 TTS(상당히 자연스럽습니다)로 한 문장씩 따라가며 읽어주기 때문에 듣기, 읽기를 같이 하면서 영어공부를 하고싶은 분들에게 도움이 될것 같다는 생각으로 만든 영한대역본입니다.

특별한 기술은 하나도 들어가지 않았습니다. 이전에 설명했던 팝업주석(http://epubguide.net/135)을 활용했습니다. TTS는 뷰어에서 지원을 하기 때문에 편집자가 신경쓸 필요 없어요. 

리디에서는 이유 모를 오류(한페이지는 팝업이 되고, 다음페이지는 안되고, 그 다음페이지는 되는)가 있네요. 알라딘과 교보eBook에서 테스트를 했습니다. 교보eBook은 앱 설정에서 영문 TTS를 선택할 수 있고, 알라딘은 TTS 화자 설정에서 '내장TTS'를 선택하면 자연스러운 TTS를 이용할 수 있습니다. 

교보와 알라딘에서 조만간 만나보실 수 있어요^^

리디는 오류를 해결해야하고, 예스24 뷰어는 팝업주석을 지원하지 않아 잠시 보류합니다.

<ruby> 태그는 일본어의 발음기호처럼 글자 위에 발음이나 의미 주석을 달 수 있도록 만든 태그입니다. 이런 주석을 ruby annotation이라고 해요. 그렇다고 주석을 남길 때만 사용할 필요는 없습니다. 

아랫쪽 단락(빨간 점선 테두리)을 보면 글자 위에 점이 찍혀있는데 이런 편집을 ruby 태그로 할 수 있습니다. 

<ruby>태그는 두 부분으로 구성됩니다. 본 단어와 주석은 <ruby>태그로 묶이고, 주석은 다시 <rt> 태그로 묶어줍니다. 한 글자씩 묶을수도 있는데 단어의 뜻을 ruby 주석으로 처리해도 됩니다.

rt 태그는 CSS 스타일로 꾸밀 수 있습니다. ruby에 스타일을 주면 본 단어까지 영향을 주기 때문에 주석 스타일만 바꾸고 싶다면 rt 태그에 스타일을 적용하세요.

앞에 정리한 제목 표현과 ruby 태그로 글자 위에 점을 찍은 것까지 적용한 결과를 확인해 보세요.

몸이 달다 - 강백수

교보문고

예스24

알라딘

* 교보문고 미리보기 캡쳐

어쩌다 보니 계속 비슷한 패턴의 스타일을 고르게 되네요. 이 책은 최근에 편집을 마쳐 소개를 해봅니다. 샘플 이미지에서 제목과 글자 위에 찍힌 점(점선 테두리 부분)을 어떻게 구현할까요?

아마 제목은 이미지로 넣으면 된다고 생각하실거예요.

이미지로 넣어도 괜찮은데, 이 책의 목차는 100개가 넘습니다. 제목이 100개가 넘는거고, 이미지를 한페이지씩 잘라가며 100개를 만들어야되요. 태블릿까지 고려해서 제목 이미지를 잘라보니 제목 하나당 20kb~30kb 정도 나오네요. 25kb로 놓고 100개면 용량은 크지 않습니다. 그래도 이미지 100개를 자르고, 목차 하나씩 맞춰가며 100개의 이미지를 삽입하는건 시간을 많을 잡아먹습니다.

이 스타일을 만들기 위해 2가지를 검토했습니다. div 태그를 사용한 방법. 만약 제목이 가운데 위치해야 한다면 div 태그를 쓰는게 좋습니다. 테이블을 사용하는 방법. 이 책은 제목이 왼쪽정렬 되어 있습니다. 그래서 테이블을 이용하면 div 태그보다 깔끔하게 표현할 수 있습니다.

이미지는 아래 3개를 사용합니다.

1. div 태그를 사용한 코드

여기서 px로 잡아준건 이 책은 편집이 중요한 요소이기 때문입니다. 실제 출간은 100px가 아닌 60px로 맞췄어요. 스마트폰에서 책과 비슷하게 표현되는건 100px인데, 그러다보면 제목 부분이 너무 부각되서 본문이 안들어오더라구요. 그래서 제목 크기를 본문 크기보다 20%정도 크게 작업을 했습니다. 

어째든 이렇게 해 주면 제목을 가운데 정렬할 수 있습니다. 

뷰어에서는 이렇게 보입니다. 글꼴이나 다른 요소는 스타일에 적용하지 않았으니 제목 상자만 봐주세요.

이 코드는 테이블을 이용한거예요. 실제로 적용한 코드는 div가 아니라 이 테이블입니다. 모바일 화면에서 제목이 너무 커보이지 않게 높이를 조절했습니다. 높이는 60px로 고정되어 있어도 폭은 글자 수에 따라 늘었다 줄었다 합니다.

언제 테이블을 쓰고 언제 div를 쓰는지에 대한 규칙은 없습니다. 편집자의 판단에 따라 어떤 것을 써도 상관 없어요. 

위 두 예는 디자인을 위해 제목 크기를 고정한 코드입니다. 본문 글자 크기를 조정해도 제목 크기는 변하지 않아요. 그럼 '난 본문 글자 크기가 변하면 제목도 바꾸고싶은데... 하는 분이 계시겠지요?

위 코드를 조금만 수정하면 가능합니다. 

실제로 위 두 코드는 알라딘과 예스24에서는 이상하게 보일거예요. 알라딘과 예스24 뷰어는 폰에 따라 픽셀 계산을 실제 픽셀 크기로 합니다. 설명을 하자면 복잡한데, 최신 폰에서는 60px가 엄청 작게 보인다는거예요. 그래서 제목을 픽셀이 아닌 글자 크기에 맞게 보이도록 수정한 코드가 있습니다.

이렇게 수정을 하면 글자 크기에 맞게 제목 글상자 크기가 바뀝니다. 그런데 제목이 너무 커지면 본문과 어울리지 않더라구요. 글자 크기 변화에 따른 글상자 크기 변화 이미지예요.

코드가 길어서 그런지 스크롤 압박이 생기네요. 오늘은 여기서 마무리 할게요.

글자 위에 점을 찍는건 ruby 태그를 쓰는 간단한 작업인데 모르는 분들이 많더라구요.

이건 다음 글로 올리겠습니다 ^^

교보문고

리디북스

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

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

1. 주요 편집 스타일

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

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

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

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

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

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

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

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

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

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

2. 전자책 편집 스타일

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

스타일 중에 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. 말풍선 안에 텍스트 넣기

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

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

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

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

* 2페이지 이상 넘어갈 때

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

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

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

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

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

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

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

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

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

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

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

오늘은 여기까지...