--- title: "EPUB 형식에 대해 알아보기: 구조 및 내용" date: "2016-03-23" categories: - "technology" tags: - "epub" - "html-editor" - "xml-editor" - "xmlspy" description: EPUB 형식의 구조와 내용을 살펴보고, XMLSpy를 사용하여 EPUB 파일을 생성, 편집 및 검증하는 방법을 알아보세요. 이를 통해 효과적인 전자책 개발 및 콘텐츠 재활용이 가능합니다. --- Status: #blog Tags: #epub #html-editor #xml-editor #xmlspy Categories: [development](/blog/ko/category/development.md) # EPUB 형식에 대해 알아보기: 구조 및 내용 전자책은 점점 더 많은 사람들이 글을 읽는 방식을 혁신적으로 변화시켰으며, 전자책 리더, 모바일 기기, 컴퓨터 등 다양한 기기를 통해 수많은 출판물을 편리하게 이용할 수 있게 되었습니다. 하지만 이러한 모든 것이 가능하게 하는 기술에 대해 생각해 본 적이 있으신가요? 전자책을 제작하는 데에는 다양한 형식이 사용되며, 그중에서 가장 인기 있는 형식 중 하나는 표준 기반의 EPUB 형식입니다. 이제 EPUB 형식이 어떻게 작동하는지 알아보기 위해, 직접 EPUB 전자책을 만들고, 기존 HTML 페이지의 내용을 활용하여 콘텐츠를 풍부하게 만들어 보겠습니다. ![전자책 리더기](/blog/images/shutterstock_160560011.jpg) ### EPUB이란 무엇인가요? EPUB® (전자 출판)은 [국제 디지털 출판 포럼(International Digital Publishing Forum)](http://idpf.org/) ([IDPF](http://idpf.org/))에서 개발한 전자책과 같은 디지털 출판물을 제작하고 배포하기 위한 개방형 표준입니다. EPUB 형식의 콘텐츠는 "자동 조정" 기능을 지원하여, Kindle, Sony Reader, Nook, Kobo 등 EPUB 표준을 지원하는 다양한 전자책 리더뿐만 아니라 대부분의 스마트폰과 태블릿에서도 이용할 수 있습니다. EPUB 문서는 OPS(개방형 출판 구조), OPF(개방형 패키지 형식), OCF(개방형 컨테이너 형식), XHTML, CSS, SVG, 이미지, 그리고 기타 파일 형식들을 하나의 호환 가능한 파일 형식으로 구성되어 있어, 간편한 배포와 출판이 가능합니다. ### **EPUB 콘텐츠 편집 및 검증** EPUB 문서로 구성된 요소들은 압축 파일 형태로 묶여 있습니다. XMLSpy에는 다음과 같은 기능이 포함되어 있습니다 [EPUB 편집기](https://www.altova.com/ko/xmlspy/epub-editor.html) 이 파일과 폴더를 확인하고, 추가하고, 삭제하고, 검증하고, 편집하는 기능을 제공합니다. XMLSpy에는 예시 EPUB 책이 함께 제공되어 있어, 사용자가 이 기능을 쉽게 시험해 볼 수 있습니다. 이제 처음부터 전자책을 만들어 각 문서의 구조와 구성 요소를 자세히 살펴보겠습니다. 이번 예제에서는 요리책을 만들어 보겠습니다. 먼저 "파일" 메뉴에서 "새로 만들기"를 선택한 다음, ".epub 전자책"을 클릭합니다. 새로운 전자책의 이름을 입력하고 저장하면, XMLSpy의 "아카이브 보기"에서 해당 전자책이 열립니다. 이 화면에는 유효한 EPUB 문서를 생성하는 데 필요한 모든 파일과 폴더가 포함된 기본적인 구조로 표시됩니다.   ![(이미지 삽입)](https://lh6.ggpht.com/-CzXIKpEaLRM/T8Thb6BG4GI/AAAAAAAAAMA/Ohxr4NnTif8/clip_image001_thumb.png?imgmax=800 "clip_image001") 위에서 언급했듯이, 각 EPUB 파일은 다음과 같은 구조와 주요 구성 요소로 이루어져 있습니다 > |-- Mimetype file (Archive) |-- META-INF folder |             -- container.xml |-- DOCUMENT folder (_In the screenshot above, OEBPS is the Document folder.)_ |             -- contains HTML, CSS, image files, plus OPF and NCX files OPF 파일은 일반적으로 "content.opf"라는 이름으로 저장되며, 전자책의 메타데이터를 담고 있습니다. 이 파일은 [오픈 패키징 포맷(Open Packaging Format, OPF)](http://idpf.org/epub/20/spec/OPF_2.0.1_draft.htm) 규격을 기반으로 합니다. NCX 파일(XML 기반 내비게이션 제어 파일)은 일반적으로 "toc.ncx"라는 이름으로 전자책의 목차를 담고 있습니다. 이 파일은 OPF(OPF) 사양의 [NCX](http://idpf.org/epub/20/spec/OPF_2.0.1_draft.htm) 부분을 기반으로 합니다. "META-INF"라는 폴더에는 "container.xml" 파일이 반드시 포함되어야 하며, 이 파일은 책의 내용을 정의하는 파일(OPF 파일)을 가리킵니다. "container.xml" 파일은 [오픈 컨테이너 포맷(Open Container Format, OCF)](http://idpf.org/epub/201) 사양에 따른 규칙에 따라 아카이브 파일들이 어떻게 구성되어야 하는지를 명시합니다. XMLSpy는 이러한 표준 기반 파일들에 대해 상황에 맞는 도움말과 유용한 편집 지침을 제공합니다. 이제 제목이 적힌 "title.html" 파일을 두 번 클릭하여 전자책 콘텐츠를 만들기 시작해 보겠습니다. XMLSpy의 HTML 편집기에서 파일이 열리면, 어떤 부분을 먼저 수정해야 할지 바로 확인할 수 있습니다.   ![(이미지 삽입)](https://lh4.ggpht.com/-ays7SNKpUaM/T8ThcRjaCaI/AAAAAAAAAMQ/4QESX1tPvCE/clip_image002_thumb.png?imgmax=800 "clip_image002") 파일에 있는 자리 표시자를 기반으로 초기 콘텐츠를 추가하고, 환영 메시지를 위한

과

태그를 추가해 보겠습니다. 이 변경 사항을 저장한 후, "아카이브" 보기로 돌아가서 지금까지 작성된 EPUB 문서의 내용을 미리 볼 수 있습니다. "미리보기" 버튼을 클릭하면 EPUB 아카이브에 저장된 내용을 기반으로 HTML 파일이 생성되고, XMLSpy에 내장된 브라우저 보기에서 해당 파일이 표시됩니다.   ![(이미지 삽입)](https://lh6.ggpht.com/-FlaLWTm_vUE/T8Thc5-q9qI/AAAAAAAAAMg/ga8Na_M4UQE/clip_image004_thumb.jpg?imgmax=800 "clip_image004")   보시다시피, 아직 필요한 정보가 몇 가지 누락되어 있습니다. 이제 전자책 메타데이터를 추가하기 위해 "content.opf" 파일을 두 번 클릭합니다. 이번에는 데이터를 입력하기 위해 "표시 방식"을 "격자 보기"로 변경할 수 있습니다. 사용자의 선호도에 따라 텍스트 기반 편집 방식과 그래픽 편집 방식 간에 쉽게 전환할 수 있습니다.   ![(이미지 삽입)](https://lh6.ggpht.com/-NmT7BuGHue8/T8ThdaU0hlI/AAAAAAAAAMw/Coe6KHhhFcU/clip_image005_thumb.png?imgmax=800 "clip_image005")   다시 미리보기 버튼을 클릭하면, 처음에 입력한 정보가 모두 정확하다는 것을 확인할 수 있습니다.   ![(이미지 삽입)](https://lh5.ggpht.com/-Bc8lWZxIkdM/T8TheB24P6I/AAAAAAAAANA/ysCGNHqmC0s/clip_image006_thumb.png?imgmax=800 "clip_image006")   시작하기 전에, 먼저 알아야 할 사항이 있습니다 [EPUB 파일을 검증합니다](https://www.altova.com/ko/xmlspy/epub-editor.html) F8 키를 눌러 상호 운용성을 확보하십시오.   ![(이미지 삽입)](https://lh4.ggpht.com/-Vls8qXkX-mg/T8ThelnByZI/AAAAAAAAANM/3o4FwAwlp1M/clip_image007_thumb.png?imgmax=800 "clip_image007") 저희 파일은 유효하며, 나머지 콘텐츠를 EPUB 아카이브에 추가하여 전자책 작업을 완료할 수 있습니다. 오류가 발생하면 XMLSpy 검증 창에서 각 오류를 목록으로 보여주고, 파일 내에서 해당 오류가 발생하는 위치에 대한 링크를 제공하여 문제 해결을 돕습니다. ### **EPUB 형식에서 기존 콘텐츠 재활용하기** 요즘 독자들이 전자책, PDF 파일, 웹 페이지 등 다양한 방식으로 글을 접할 수 있는 옵션이 많아짐에 따라, 동일한 콘텐츠를 여러 채널을 통해 제공하는 것이 일반적인 요구 사항이 되었습니다. 그리고 이러한 작업을 수행할수록 편리할수록 좋습니다. XMLSpy에서 웹사이트의 HTML 콘텐츠를 EPUB 문서로 쉽게 변환할 수 있습니다. 이제 예제를 계속 진행하면서, 작가의 요리 블로그에 있는 기존 HTML 페이지들을 추가하여 전자책의 내용을 풍부하게 만들어 보겠습니다. 저희는 "아카이브 보기"에서 "문서 추가" 버튼을 클릭하고, 파일을 선택할 수 있는 창을 통해 해당 블로그 게시글들을 추가할 수 있습니다.   ![(이미지 삽입)](https://lh6.ggpht.com/-NFToE0AQxbY/T8ThfMtNwaI/AAAAAAAAANc/CxteWWcrGdE/clip_image008_thumb.png?imgmax=800 "clip_image008")   또한, HTML 페이지에 포함된 이미지 파일들을 추가해야 합니다. 이러한 파일들은 이진 파일이기 때문에, EPUB 문서를 WinZip 또는 WinRAR과 같은 프로그램으로 열고, 필요한 파일들을 아카이브에 추가하는 것이 가장 좋은 방법입니다.   ![(이미지 삽입)](https://lh5.ggpht.com/-7PtZiNpYSg0/T8Thf33d7oI/AAAAAAAAANw/3RkPcE8EB3A/clip_image009_thumb.png?imgmax=800 "clip_image009")   압축 파일을 저장하면, XMLSpy에서 EPUB 문서에 적용된 변경 사항이 반영됩니다. 다음으로, 각 HTML 페이지에 대해 별도의 NavPoint와 NavLabel을 생성하여 목차(toc.ncx) 파일을 업데이트하여 HTML 페이지를 가리키도록 하겠습니다.   ![(이미지 삽입)](https://lh6.ggpht.com/-Mrcd7Y33dq4/T8Thge6sOtI/AAAAAAAAAOA/ZzF6MXByGRY/clip_image010_thumb.png?imgmax=800 "clip_image010")   ...그리고 콘텐츠 파일(content.opf)을 업데이트하여, 저희가 만든 HTML 페이지들이 EPUB 파일의 내용 목록에 포함되도록 해야 합니다.   ![(이미지 삽입)](https://lh6.ggpht.com/-R8_rBTW2jnw/T8Thg_3uO5I/AAAAAAAAAOQ/eQS_nGvaDio/clip_image011_thumb.png?imgmax=800 "clip_image011")   이번에는 "미리보기"를 클릭하면 추가한 두 개의 게시물을 확인할 수 있으며, 각 게시물로 이동하여 내용을 살펴볼 수 있습니다.   ![(이미지 삽입)](https://lh4.ggpht.com/-KVzkp3VC5_A/T8ThhuqtFHI/AAAAAAAAAOg/Ro-i7N-AlbQ/clip_image012_thumb.png?imgmax=800 "clip_image012")   저희 전자책이 거의 완성되었습니다! 물론, 이는 매우 간단한 예시이지만, EPUB 문서의 구조를 이해하고 EPUB 형식에서 기존 콘텐츠를 얼마나 쉽게 재활용할 수 있는지 보여주는 데 유용합니다. 또한, 사용하기 쉬운 "아카이브 보기" 기능 외에도, XMLSpy는 가장 정교한 전자책 제작에 필요한 기술, 즉 [XML](https://www.altova.com/ko/xml-editor/), [XHTML](https://www.altova.com/ko/xmlspy/html-editor.html), [HTML](https://www.altova.com/ko/xmlspy/html-editor.html), [CSS](https://www.altova.com/ko/xmlspy/css-editor.html) 등에 대한 지능적인 편집 기능을 제공합니다. 완전한 EPUB 형식의 책 구조를 확인하려면, XMLSpy 예제 프로젝트에서 "TheCantervilleGhost.epub" 파일을 열거나, 인터넷에서 제공되는 무료 EPUB 책 중 하나를 이용해 보세요. 유용한 자료를 얻을 수 있는 곳은 [프로젝트 구텐베르크](http://www.gutenberg.org/wiki/Main_Page)입니다. 만약 아직 XMLSpy를 사용하고 계시지 않다면, 지금 바로 XMLSpy의 [무료 체험판](https://www.altova.com/ko/download-trial/)을 다운로드하여 사용해 보실 수 있습니다.