4. 원고 앉히고 스타일 디자인하기

본 챕터에서는 미리 준비한 예제파일을 활용하여 원고를 앉히고 디자인을 해보도록 하겠습니다. 예제파일 중 텍스트 파일들을 사용하므로 미리 폴더를 열어두시기 바랍니다.

# 원고 앉히기

cover는 표지이미지를 앉힐 것이기 때문에 원고 영역인 프롤로그부터 앉혀보겠습니다. 시길 화면에서는 메뉴 영역의 프롤로그를 더블클릭해서 열어두고 예제파일 중 ‘pro’파일을 열어 텍스트들을 모두 복사하세요. 복사한 텍스트를 시길 가운데 작업영역에 붙여넣기 합니다. 텍스트를 입력하면 미리보기 화면도 함께 나옵니다.

앉혀진 원고는 문단 간격이나 오타 등 살피면서 다듬어주세요. 작업영역에 커서를 두고 텍스트 문서 편집하듯이 작업하시면 됩니다. 미리보기 화면을 보면서 가독성 위주로 다듬어주세요. 프롤로그 원고를 대충 다듬으셨다면 다른 섹션의 원고도 모두 동일한 방법으로 가져와서 앉혀줍니다. (원고를 앉힐 섹션은 pro, wri, body, copy입니다.)

# 표지이미지 앉히기

디지털기기들이 점점 발전하면서 표지디자인의 사이즈도 자꾸만 변하고 있습니다. 초기에는 800px X 1000px로 많이들 작업했지만 지금은 1240px X 1754px 사이즈를 선호하고 있습니다. 사실 가능한 한 큰 사이즈, 높은 해상도가 화면에서 선명하고 고품질로 보이므로 참고하시기 바랍니다. 포토샵 등으로 작업하기 어려운 분들은 PPT로 작업하셔서 PDF나 이미지로 저장하셔도 됩니다. PPT로 작업하실 때는 화면사이즈를 32cm X 46cm 정도로 하시면 될 듯 합니다.

 

미리 준비해둔 표지이미지를 시길에 앉혀보겠습니다. 먼저, 시길 메뉴영역에서 ‘cover’섹션을 열어놓으신 후 ‘image’메뉴를 우클릭하시고 ‘기존 파일 추가’를 클릭하세요.

미리 준비해드린 예제파일 중 ‘cover’이미지를 선택하면 메뉴영역의 ‘Image’ 하단에 ‘cover’이미지가 추가된 것이 보입니다. 하지만 아직 전자책 자체에는 아무 변화가 없을 것입니다. 우리가 사용할 이미지를 단순히 불러온 것일 뿐입니다.

지금부터 할 작업은 전자책의 겉표지와 페이지를 펼쳤을 때 가장 먼저 보이는 속표지의 이미지를 설정해주는 것입니다.

먼저 겉표지를 설정해보겠습니다. ‘Image’메뉴에 추가된 ‘cover’이미지를 우클릭하셔서 ‘표지그림’을 클릭해주세요. 이것으로 간단하게 겉표지가 설정되었습니다. 작업영역이나 미리보기에서는 나오지 않지만 완성된 전자책을 보시면 이 설정으로 겉표지에 우리가 정한 표지 이미지가 나오게 됩니다. 그럼, 속표지를 설정해보겠습니다. 상단 메뉴 중 ‘도구’ > ‘add Cover’를 클릭하시고 아까 입력해두었던 ‘cover.jpg’를 더블클릭하시면 속표지가 설정됩니다. 더블클릭 후 해당 창은 자동으로 닫힙니다.

‘add Cover’창이 닫히고 나면 시길 창에 설정된 속표지가 미리보기로 나타납니다. 겉표지와 속표지의 디자인을 다르게 앉히고 싶다면 아까처럼 이미지 메뉴에 준비해둔 이미지를 입력하고 add cover메뉴에서 설정하시면 됩니다.

# 폰트와 스타일 설정하기

이 책에서는 ‘KoPubWorld돋움체 Bold’와 ‘KoPubWorld바탕체 Light’를 사용하겠습니다. 이미 드린 예제파일 > font 폴더에 두 폰트를 넣어드렸으니 활용해주세요. 두 폰트 모두 무료로 사용 가능하므로 저작권 걱정 안하셔도 됩니다. 왼쪽 메뉴영역에서 'font'를 우클릭 > '기존파일추가'를 클릭하시고 PC에서 미리 준비해둔 폰트를 찾아 사용할 폰트를 열어주시면 폰트메뉴에 추가됩니다.

책에 사용할 폰트를 저장했다면 이제 책 어느 부분에 어떤 폰트를 쓸지 설정해주어야 합니다. 여기서 사용되는 개념이 CSS인데요. CSS(cascading style sheets)는 웹문서의 전반적인 스타일을 미리 저장해두는 스타일시트를 말합니다. 여기에는 폰트, 박스넣기, 문단간격 등등을 지정하는 다양한 링크가 사용되는데요. 정형화된 링크가 있으므로 그때 그때 필요한 링크를 가져다 사용하시면 됩니다.

 

아래 폰트스타일를 지정하는 링크를 먼저 복사해주세요.

폰트스타일 CSS링크  <link href="../Styles/Style0001.css" rel="stylesheet" type="text/css"/>

 

그 다음 시길화면으로 돌아가 프롤로그 섹션(Text > pro.xhtml)을 더블클릭하여 연 뒤 상단 메뉴바에서 ‘<>’표시를 눌러줍니다.

아까 복사해둔 CSS링크를 </head> 태그 앞에 커서를 두고 엔터를 친 후 아까 복사해 둔 CSS링크를 붙여넣기 합니다.

다른 섹션들도 모두 열어서 동일한 위치에 해당 링크를 붙여넣기 해주세요.

이 링크는 명령어로서 ‘이 페이지에서 사용할 폰트에 대한 설명은 스타일시트에 있다’라는 뜻입니다. 작업화면에는 이러한 명령어만 입력해두고 구체적인 내용은 스타일시트에 적어주는 것이죠. 그래야 변경 시 한번만 작업하면 모든 페이지에 적용되니깡. 이제 스타일시트에서 사용할 폰트를 입력해주도록 하겠습니다.

 

좌측 메뉴 ‘Style’ 우클릭 > ‘빈 스타일시트 추가’를 클릭하세요. 빈 스타일시트가 열리면 추가된 빈 화면에 커서를 놓고 아래 내용을 복사해서 붙여넣기 해주세요.

폰트스타일 CSS : 

 

@font-face{

font-family: KoPubWorld바탕체 Light;

src: url("../Fonts/KoPubWorld바탕체 Light.ttf");

}

@font-face{

font-family: KoPubWorld돋움체 Bold;

src: url("../Fonts/KoPubWorld돋움체 Bold.ttf");

}

 

스타일이 잘 적용되고 있는지 확인하기 위해 Style0001.css파일을 그대로 열어두신 상태에서 pro.xhtml를 열어주세요. 그래야 오른쪽 미리보기 창에 적용하고 있는 스타일이 보입니다. 다시 Style0001.css로 가서 아래와 같이 본문 폰트를 지정해주세요. 입력하시면 옆 미리보기화면에 폰트가 적용된 모습을 확인하실 수 있습니다.

 

본문폰트지정 CSS :

 

p {

font-family: KoPubWorld바탕체 Light;

}

 

폰트 사이즈 설정 코드입니다. 크기는 미리보기화면을 보시면서 조절해보세요. 저는 여러분들에게 잘 보여드리려고 조금 크지만 1.5를 잡았습니다.

 

폰트크기지정 CSS : font-size:1.5em;

줄간격 설정 코드입니다.

줄간격지정 CSS : line-height : 2em;

문장정렬 설정 코드입니다. 저는 왼쪽 정렬로 하겠습니다.

문장정렬지정 CSS : text-align:left;

 

본문의 상하좌우 여백주기 코드입니다.

여백지정 CSS : body {margin : 2em;}