내맘대로의 EPUB 제작 가이드

미리보기(Sigil에서는 Preview로 되어 있음)는 편집자가 편집한 내용을 실시간으로 볼 수 있는 창이다. 책 보기 화면에서는 편집 내용을 눈으로 확인할 수 있지만 코드 보기에서는 확인이 어렵기 때문에 편집 내용을 확인할 수 있는 미리보기 화면이 도움이 된다.

책 보기 화면에서 편집을 하더라도 모바일 기기에서 어떻게 보이는지 알고 싶다면 미리보기 화면을 스마트폰이나 태블릿 크기로 맞춰놓고 작업할 수 있다.

미리보기에서 제공되는 또하나의 강력한 기능 중 하나는 Inspector Window이다. 이 기능은 편집에는 아무런 영향을 주지 않지만 특정 영역에 어떤 스타일이 적용되어 있는지를 확인하고, 스타일을 임시로 제거하거나 변경해 볼 수 있다. 

CSS로 스타일을 적용했는데 원하는 대로 표현되지 않고 다른 스타일이 적용됐을 때 Inspector Window가 아주 유용하다. Inspector Window를 통해 문단에 적용된 스타일을 보면 부모로부터 상속된 스타일과 자식 스타일이 중복됐을 때 어떤 스타일이 문단에 적용됐는지 확인할 수 있다. 

예를 들어 글자 크기를 2em으로 지정했는데 미리보기 화면에서 3em으로 보인다면 Inspector Window에서 어떤 스타일이 영향을 줘서 2em이 아닌 3em으로 보이는지 쉽게 찾을 수 있다.

그리고 스타일을 임시로 제거하거나 수정해서 원하는 편집이 나오는지도 확인을 할 수 있다. Inspector Window에서 수정한 내용은 실제 문서에는 영향을 주지 않아 원하는 스타일을 찾아냈다면 반드시 CSS 파일에 적용을 해 줘야 한다. 

• 마우스 오른쪽 버튼 메뉴
• Inspect Element : 선택한 단어나 단락의 세부 사항을 Inspector Window에 표시한다.
• Inspector Window

Inspector Window는 미리보기 화면 아래에 표시되는 창으로 크롬 웹 브라우저의 개발자 도구와 같은 기능을 한다.

분석이 필요한 단어나 문장을 선택한 후 마우스 오른쪽 버튼을 누르고 Inspect Element를 선택하면 Inspector Window에 해당 영역의 세부 정보가 표시된다. 이중 전자책을 편집할 때 유용하게 활용할 수 있는 기능이 CSS Style 분석이다. 이 분석에서는 전자책 파일에 직접 영향을 주지 않은 상태에서 스타일을 임의로 변경해 볼 수 있다. 뿐만 아니라 다른 태그로부터 상속되는 사트일도 모두 확인을 할 수 있어 원하는 대로 편집 결과가 나오지 않았을 때 다른 상속값이 있는지도 쉽게 파악이 가능하다.

• CSS Stylesheet Preview

미리보기 화면은 HTML의 변경 뿐 아니라 CSS의 변경도 실시간으로 보여준다. Sigil에서 Stylesheet 파일을 열어 셀렉터의 속성을 수정하면 즉시 미리보기 화면에서 결과를 확인할 수 있다.