Opkle(옵클) - 창작자를 위한 앱과 시스템

EDITOR

CLASS

BLOG

표현한다는 것의무한한 가능성,

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.

텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.

EPUB, HTML, CSS의 정의

epub

EPUB의 압축 파일 형식

epub

HTML의 역할과 의미

epub

웹문서와 하이퍼링크

epub

CSS의 역할과 의미

epub

...

1 EPUB, HTML, CSS의 정의

전자책을 처음 만들 때 가장 낯선 것은 대개 원고가 아닙니다. 이미 쓴 글과 이미지가 있고, 표지에 대한 생각도 어느 정도 정리되어 있는데 EPUB, HTML, CSS라는 이름을 마주하는 순간 책 만들기가 갑자기 개발자의 일처럼 느껴집니다. 낯선 약어가 많아서 그렇지, 이 셋이 하는 일은 생각보다 분명합니다. 하나는 책을 담는 형식이고, 하나는 글의 질서를 세우며, 나머지 하나는 그 질서를 읽기 좋은 모습으로 바꿉니다.

전자책은 종이책을 화면에 그대로 옮겨 놓은 것이 아닙니다. 독자는 손바닥만 한 휴대폰, 가로로 넓은 태블릿, 흑백 전자책 리더기, 혹은 컴퓨터 화면에서 같은 책을 읽습니다. 어떤 독자는 글자를 크게 키우고, 어떤 독자는 야간 모드로 바꾸며, 어떤 독자는 화면을 가로로 눕혀 읽습니다. 전자책은 이런 변화를 문제로 보지 않고, 책이 독자에게 조금씩 자리를 내어 주는 일로 받아들입니다. EPUB, HTML, CSS는 바로 그 유연한 독서를 가능하게 하는 세 가지 약속입니다.

이 글에서는 세 이름을 외우는 대신, 전자책 한 권이 독자에게 닿기까지 각각이 맡는 역할을 차례로 살펴봅니다.

1.EPUB은 글과 이미지, 목차를 한 권의 전자책으로 묶고 여러 기기에서 읽히게 합니다.

2.HTML은 제목과 본문, 목록처럼 글이 가진 의미와 읽는 순서를 정리합니다.

3.CSS는 활자와 여백, 이미지의 호흡을 다듬어 책을 편안하게 읽히게 합니다.

4.마지막으로 세 요소가 함께 작동할 때 전자책이 어떤 방식으로 완성되는지 살펴봅니다.

EPUB은 여러 조각을 한 권의 책으로 묶는 형식입니다

EPUB은 전자책을 위한 표준 형식입니다. 표지 한 장, 여러 장의 본문, 목차, 이미지, 글꼴, 책의 제목과 저자 정보처럼 출판물에 필요한 요소들을 한데 모아 한 권으로 묶습니다. 단순히 파일 여러 개를 지퍼로 압축한 상자라고만 생각하면 조금 아쉽습니다. EPUB은 그 안의 요소들이 어떤 순서로 읽히고, 어디에서 목차로 이동하며, 어떤 글이 제목이고 어떤 글이 본문인지를 독서 앱과 약속하는 방식이기도 합니다.

이 형식의 가장 중요한 특징은 본문이 화면에 따라 다시 흐른다는 데 있습니다. 종이책에서 한 페이지는 정해진 크기의 종이 위에 고정되어 있지만, EPUB의 한 페이지는 독자가 쓰는 화면과 설정에 따라 달라집니다. 글자를 키우면 한 화면에 들어오는 문장이 줄어들고, 작은 화면에서는 문단이 더 길게 이어지며, 가로 화면에서는 여백과 줄의 길이가 다시 조정됩니다. 책의 내용은 같지만, 독자가 편하게 읽을 수 있도록 페이지의 모양은 매번 새로 만들어지는 셈입니다.

그래서 EPUB과 PDF는 비슷한 듯 다른 선택입니다. PDF는 인쇄된 페이지의 모양을 정확히 보존하는 데 강합니다. 사진집, 도록, 복잡한 도표처럼 한 페이지의 배치 자체가 내용일 때 PDF는 아주 훌륭합니다. 반면 소설, 에세이, 인문서처럼 긴 글을 오래 읽는 책이라면 EPUB의 유연함이 더 큰 장점이 됩니다. 종이책에서 문단의 시작과 끝이 종이의 크기에 맞춰 정해진다면, EPUB에서는 독자의 눈과 기기의 크기가 그 기준에 함께 들어옵니다.

EPUB이 가진 또 하나의 의미는 유통의 공통 언어라는 점입니다. 전자책 서점과 리더기는 저마다 화면과 기능이 다르지만, EPUB이라는 약속을 통해 하나의 책을 각자의 환경에서 읽어 낼 수 있습니다. 출판자는 모든 기기마다 책을 새로 만들기보다, 잘 정리된 한 권의 EPUB을 준비합니다. 물론 서점과 리더기마다 보이는 방식에는 차이가 있을 수 있습니다. 그렇기에 EPUB을 만든다는 일은 완벽하게 고정된 결과물을 통제하는 일보다, 여러 환경에서도 책의 핵심이 흔들리지 않도록 설계하는 일에 가깝습니다.

EPUB 요약

EPUB은 표지·본문·목차·이미지·책 정보를 한 권의 전자책으로 묶는 형식입니다.

본문이 화면과 독자 설정에 맞춰 다시 흐르기 때문에 긴 글을 읽기에 특히 잘 어울립니다.

PDF가 페이지의 모양을 지키는 형식이라면, EPUB은 읽는 환경을 받아들이는 형식에 가깝습니다.

좋은 EPUB은 모든 화면에서 똑같이 보이는 책보다, 어느 화면에서도 책답게 읽히는 책을 목표로 합니다.

HTML은 글이 무엇인지 알려 주는 책의 뼈대입니다

HTML은 화면에 글자를 그리는 기술이라기보다, 글이 어떤 역할을 하는지 구분하는 언어입니다. 첫 문장이 책의 제목인지, 다음 문단이 본문인지, 문장 앞의 짧은 줄이 소제목인지, 여러 항목이 목록인지 알려 줍니다. 종이책을 편집할 때 제목과 본문, 인용문, 주석, 목차를 서로 다른 성격의 원고로 구분하듯이, HTML은 디지털 책 안에서 문장의 성격을 표시합니다.

예를 들어 제목을 단지 본문보다 크게 보이게 만드는 것과, 그것이 정말 제목이라고 알려 주는 것은 다릅니다. 사람의 눈에는 두 경우 모두 큰 글씨로 보일 수 있지만, 전자책 리더기와 화면 낭독기는 구조를 통해 책을 이해합니다. 제목으로 표시된 문장은 목차의 기준이 될 수 있고, 독자는 제목 사이를 빠르게 이동할 수 있으며, 화면을 보지 않고 듣는 독자도 책의 흐름을 따라갈 수 있습니다. HTML의 구조는 겉으로 드러나지 않지만, 책이 길을 잃지 않게 하는 표지판 역할을 합니다.

HTML이 중요한 이유는 화면이 바뀌어도 문장의 관계를 지킬 수 있기 때문입니다. 줄바꿈의 위치나 한 페이지에 들어가는 글자 수는 기기에 따라 달라져도, ‘이 제목 아래에 이 문단들이 이어진다’는 관계까지 달라질 필요는 없습니다. 잘 세운 구조는 글자를 키웠을 때도, 다른 리더기로 책을 옮겼을 때도, 나중에 내용을 고쳐 다시 출간할 때도 책의 질서를 남겨 둡니다. 전자책에서는 보기 좋은 한 화면보다, 어떤 화면에서도 이해할 수 있는 구조가 먼저입니다.

이 점은 접근성과도 이어집니다. 누군가는 작은 글자를 읽기 어려워 더 큰 글씨를 선택하고, 누군가는 화면 낭독기로 책을 듣습니다. 누군가는 목차를 이용해 필요한 장으로 곧장 이동합니다. 제목과 문단, 목록과 인용이 제 역할을 갖고 있으면 전자책은 더 많은 독자에게 자연스럽게 열립니다. HTML은 특별한 기능을 더하는 장치가 아니라, 글이 원래 가진 의미를 잃지 않도록 보존하는 편집의 언어라고 생각하면 이해하기 쉽습니다.

HTML 요약

HTML은 제목·본문·목록·인용처럼 글의 역할과 순서를 구분합니다.

큰 글씨 자체보다 ‘이 문장은 제목이다’라는 정보가 목차와 탐색, 접근성에 더 중요합니다.

화면의 줄바꿈은 바뀌어도 글의 구조가 유지되도록 만들어 줍니다.

독자가 읽든 듣든, 원하는 장으로 이동하든 책의 흐름을 이해하게 하는 바탕입니다.

CSS는 글을 읽는 시간의 리듬을 만듭니다

CSS는 HTML로 구분해 둔 구조에 시각적인 질서와 분위기를 더합니다. 글꼴이 어떤 인상을 주는지, 본문 글자가 어느 정도 크기여야 편안한지, 줄과 줄 사이에 얼마나 숨을 둘지, 제목 앞뒤의 여백을 얼마나 줄지 같은 선택이 CSS를 통해 책에 적용됩니다. 그래서 CSS를 단순히 ‘꾸미는 기술’이라고 부르면 조금 부족합니다. CSS는 독자가 한 문장을 지나 다음 문장으로 넘어갈 때 느끼는 속도와 밀도를 조절합니다.

같은 원고라도 글꼴과 여백이 달라지면 전혀 다른 책처럼 읽힙니다. 줄 간격이 너무 좁으면 문장이 서로 붙어 답답해지고, 너무 넓으면 생각의 흐름이 끊어집니다. 제목이 지나치게 크면 본문보다 제목의 존재감만 남고, 작은 화면에서 너무 넓은 여백을 고집하면 정작 읽을 문장이 줄어듭니다. 좋은 CSS는 화려한 효과를 많이 넣는 것보다, 독자가 디자인을 의식하지 않고 글 안으로 들어가게 하는 균형에 가깝습니다.

전자책에서 CSS가 특히 신경 써야 하는 부분은 변화하는 화면입니다. 인쇄물이라면 디자이너가 모든 독자의 페이지를 같은 모습으로 확인할 수 있지만, 전자책은 그렇지 않습니다. 독자가 글자 크기를 키우고, 기기의 기본 글꼴을 쓰며, 배경을 어둡게 바꿀 수도 있습니다. 그러므로 전자책의 디자인은 하나의 완성된 장면을 고정하는 대신, 여러 조건에서도 무너지지 않는 규칙을 준비해야 합니다. 이미지가 화면을 넘지 않게 하고, 문단이 지나치게 좁아지지 않게 하며, 제목과 본문의 위계가 유지되게 하는 일이 여기에 속합니다.

CSS는 출판사의 태도를 보여 주기도 합니다. 단정한 활자와 절제된 여백은 오래 읽는 책의 신뢰를 만들고, 넉넉한 이미지와 변화 있는 구성은 시각적 산문이나 에세이의 분위기를 드러낼 수 있습니다. 다만 전자책에서는 독자가 바꿀 수 있는 영역과 출판자가 지켜야 할 영역을 구분하는 감각이 중요합니다. 독자의 글자 크기 선택은 존중하되, 문단의 위계와 이미지의 의미, 책 전체의 톤은 쉽게 흐트러지지 않도록 설계해야 합니다.

CSS 요약

CSS는 글꼴·크기·줄 간격·여백·이미지 배치처럼 독자가 실제로 보는 모습을 정합니다.

그 역할은 장식보다 가독성에 가깝고, 읽는 속도와 집중의 흐름을 만듭니다.

전자책에서는 한 화면의 완성도보다 다양한 화면에서 무너지지 않는 규칙이 중요합니다.

독자의 설정을 존중하면서도 책만의 분위기와 위계를 지키는 것이 좋은 CSS의 일입니다.

세 가지가 함께 있을 때 비로소 전자책이 됩니다

EPUB을 책을 담는 형식이라고 한다면, HTML은 그 안에서 글의 질서를 지키는 편집자이고 CSS는 그 질서를 독자에게 읽기 좋게 건네는 디자이너에 가깝습니다. EPUB만으로는 어떤 글이 제목이고 어디서부터 본문이 시작되는지 충분히 말할 수 없습니다. HTML만으로는 글의 의미를 세울 수 있지만, 활자의 분위기와 읽는 호흡까지 결정하기는 어렵습니다. CSS만으로는 꾸밀 대상과 순서가 없습니다. 서로 다른 세 역할이 맞물릴 때 비로소 한 권의 전자책이 독자 앞에서 자기 형태를 갖춥니다.

이 관계를 알면 전자책 제작의 순서도 조금 단순해집니다. 먼저 원고 안에서 제목과 소제목, 본문, 인용, 목록이 무엇인지 정리합니다. 다음으로 그 글들이 어떤 리듬으로 읽히면 좋을지 생각합니다. 긴 산문이라면 본문의 편안함을 우선하고, 이미지가 중요한 책이라면 이미지와 문장 사이의 호흡을 더 세심하게 잡을 수 있습니다. 마지막으로 이 모든 요소가 하나의 EPUB 안에서 목차와 읽기 순서를 갖도록 묶습니다. 코드를 직접 쓰지 않더라도, 이 순서를 이해하면 에디터 안에서 하는 선택들이 훨씬 명확해집니다.

전자책 에디터가 하는 일도 결국 이 사이를 번역하는 일입니다. 창작자가 제목을 붙이고 문단을 나누며 이미지를 배치하면, 에디터는 그 선택을 HTML의 구조와 CSS의 규칙, EPUB의 형식으로 정리합니다. 그래서 전자책을 만든다는 일은 글 쓰기와 디자인, 기술 중 하나만 잘하면 되는 일이 아닙니다. 세 영역이 서로의 자리를 침범하지 않도록 조율하면서, 독자가 끝까지 읽을 수 있는 책을 만드는 일입니다.

세 요소의 관계 요약

EPUB은 책을 묶고 유통 가능한 형태로 준비합니다.

HTML은 내용의 의미와 순서를 보존합니다.

CSS는 그 내용이 다양한 화면에서 편안하게 읽히도록 만듭니다.

창작자는 이 세 이름을 외우기보다, 구조·가독성·독서 환경의 관계를 이해하면 충분합니다.

전자책은 화면 위에서 다시 편집되는 책입니다

종이책은 출간되는 순간 대체로 한 가지 모습으로 완성됩니다. 전자책은 그와 달리 독자가 책을 여는 순간마다 조금씩 다시 편집됩니다. 화면의 크기, 글자의 크기, 읽는 시간대, 사용하는 리더기의 방식이 모두 책의 표면에 영향을 줍니다. 그렇다고 전자책이 덜 완성된 책이라는 뜻은 아닙니다. 오히려 완성된 원고와 단단한 구조, 읽는 사람을 배려한 디자인이 있어야만 변화 속에서도 책의 정체성을 유지할 수 있습니다.

EPUB, HTML, CSS는 그 변화를 감당하기 위해 존재합니다. 처음에는 낯선 이름으로 보이지만, 결국은 글을 제대로 읽히게 하려는 서로 다른 방법입니다. 이야기를 쓰는 사람은 문장의 흐름을 만들고, 편집하는 사람은 그 흐름에 구조를 부여하며, 디자인하는 사람은 독자의 눈이 오래 머물 자리를 마련합니다. 전자책은 그 세 일이 한 화면 위에서 만난 결과일지도 모릅니다.

이 글의 요약

EPUB은 원고와 이미지, 목차, 책 정보를 읽을 수 있는 한 권의 전자책으로 묶습니다.

HTML은 제목과 문단, 목록의 관계를 정리해 책의 의미와 순서를 지킵니다.

CSS는 활자와 여백, 이미지의 균형을 조절해 다양한 화면에서 읽기 좋은 경험을 만듭니다.

창작자는 먼저 내용과 구조를 단단히 만들고, 그다음 독자가 오래 머물 수 있는 읽기의 리듬을 다듬으면 됩니다.

목록으로

저작권 고시

본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

상호 :추상적 형상 디자인(Abstract cloud) | 대표자 :배창규

사업자등록번호 :249-74-00533

통신판매업 신고번호 :2025-의정부송산-0634

주소 :경기도 의정부시 부용로 49, 108동 402호