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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

EPUB, HTML, CSS의 정의

epub

EPUB의 압축 파일 형식

epub

HTML의 역할과 의미

epub

웹문서와 하이퍼링크

epub

CSS의 역할과 의미

epub

...

3 HTML의 역할과 의미

책 한 권을 펼치면 우리는 글자를 보기 전에 이미 많은 것을 알고 있습니다. 맨 앞의 가장 큰 글자는 책 제목이고, 조금 작지만 굵은 글자는 장의 제목이며, 길게 이어지는 글은 본문이라는 것을 자연스럽게 알아봅니다. 글자 크기와 위치가 힌트를 주기도 하지만, 사실 책에는 각 문장이 맡은 일이 있습니다. 제목은 길을 알려 주고, 본문은 이야기를 들려주며, 목록은 중요한 내용을 차례로 정리합니다.

HTML은 바로 그 역할을 글자에게 알려 주기 위해 만들어진 특별한 문법입니다. HTML은 글을 더 멋지게 꾸미는 물감도 아니고, 어려운 계산을 하는 도구도 아닙니다. ‘이 문장은 책의 제목입니다’, ‘이 문단은 본문입니다’, ‘이 줄들은 목록입니다’처럼 글의 성격을 구분해 주는 이름표에 가깝습니다. 전자책은 이 이름표를 읽고, 한 편의 원고를 읽기 쉬운 책으로 정리합니다.

이 글에서는 HTML이 글의 역할을 어떻게 구분하는지, 그 구분이 전자책에서 왜 중요한지, 그리고 창작자가 HTML을 어렵게 생각하지 않아도 되는 이유를 차례로 살펴봅니다.

1.HTML이 글자에게 붙이는 역할표가 무엇인지 알아봅니다.

2.제목, 본문, 목록처럼 서로 다른 글이 왜 구분되어야 하는지 살펴봅니다.

3.이 구분이 전자책의 목차와 읽는 순서를 어떻게 돕는지 이해합니다.

4.다양한 독자가 책을 편하게 읽는 데 HTML이 어떤 도움을 주는지 정리합니다.

HTML은 글에 이름표를 붙입니다

학급에서 책상을 정리할 때 ‘교과서’, ‘공책’, ‘색연필’이라고 적힌 상자를 떠올려 볼 수 있습니다. 겉으로는 모두 비슷한 상자여도, 이름표가 붙어 있으면 무엇을 어디에 넣고 필요할 때 무엇을 꺼내야 하는지 알기 쉽습니다. 글도 마찬가지입니다. 한 페이지에 있는 글자들이 모두 같은 역할을 하는 것은 아닙니다. 어떤 문장은 제목이고, 어떤 문장은 설명이며, 어떤 문장은 꼭 기억할 내용을 차례로 적어 둔 목록입니다.

HTML은 글 앞뒤에 특별한 표시를 더해 그 역할을 알려 줍니다. 독자가 그 표시 자체를 볼 필요는 없습니다. 독자는 정리된 제목과 문단, 목록을 책의 모습으로 보게 됩니다. 하지만 전자책을 읽는 앱은 이 표시를 통해 ‘이 부분은 장의 제목이구나’, ‘여기부터는 본문이 이어지는구나’, ‘이 부분은 여러 항목을 정리한 목록이구나’ 하고 이해합니다.

중요한 것은 글자의 모양보다 글자의 의미입니다. 제목을 크게 보이게 할 수는 있지만, 크게 보인다는 사실만으로 그 문장이 정말 제목이라는 뜻이 되지는 않습니다. HTML은 모양만 흉내 내는 대신, 글이 맡은 일을 분명하게 말해 줍니다. 그래서 화면 크기가 바뀌거나 글꼴이 달라져도, 제목은 제목으로 남고 본문은 본문으로 남습니다.

이런 역할표는 독자가 보지 못하는 곳에서 책의 질서를 지킵니다. 종이책에서는 편집자가 페이지를 직접 고정할 수 있지만, 전자책은 독자의 화면과 설정에 따라 모습이 계속 달라집니다. HTML은 그 변화 속에서도 글이 제자리를 잃지 않게 합니다. 책이 작은 화면에 들어가도, 글자를 크게 키워도, 긴 문장이 다음 화면으로 넘어가도 ‘무엇이 제목이고 무엇이 설명인가’라는 관계는 남아 있게 됩니다.

HTML이 하는 일

HTML은 글자에게 제목, 본문, 목록처럼 각자의 역할을 알려 주는 문법입니다.

독자는 표시를 직접 보지 않아도, 전자책 앱은 그 표시를 읽어 책의 구조를 이해합니다.

글자의 크기나 색보다 ‘이 글이 무엇인가’라는 의미를 먼저 정리합니다.

화면과 글꼴이 달라져도 글의 역할과 순서가 흔들리지 않게 돕습니다.

제목과 본문은 서로 다른 일을 합니다

책에서 제목은 단지 큰 글자가 아닙니다. 제목은 독자에게 지금 어디를 읽고 있는지 알려 주는 이정표입니다. 책의 맨 앞 제목은 책 전체의 이름을 알려 주고, 장의 제목은 이야기가 어느 방향으로 가는지 미리 보여 줍니다. 소제목은 긴 글 사이에 작은 쉼표를 찍으며, 다음에 읽을 내용의 문을 열어 줍니다. 제목이 잘 정리된 책은 처음부터 끝까지 읽지 않아도 전체의 흐름을 가늠하기 쉽습니다.

본문은 제목 아래에서 생각과 이야기를 차분히 이어 주는 글입니다. 본문이 제목과 같은 역할을 한다면, 독자는 어디에서 중요한 내용이 시작되고 끝나는지 알기 어렵습니다. 반대로 모든 문장을 제목처럼 만들면 책은 큰 소리로 말하는 문장들만 가득해져 읽기 피곤해집니다. 제목과 본문을 구분하는 일은 예쁘게 꾸미기 위한 규칙이 아니라, 독자가 글의 길을 잃지 않게 하는 편집의 기본입니다.

목록도 중요한 역할을 가집니다. 긴 설명 속에서 꼭 기억할 내용을 한 줄씩 정리하거나, 준비물과 순서처럼 여러 항목을 나란히 보여 줄 때 목록은 읽는 사람의 눈을 쉬게 합니다. 목록은 문단보다 짧고 빠르게 읽히며, 여러 내용을 비교하거나 빠뜨리지 않고 확인하는 데 도움을 줍니다. HTML은 이런 목록도 ‘줄을 여러 개 쓴 글’이 아니라 서로 연결된 항목으로 이해하게 합니다.

인용문, 그림 설명, 각주처럼 책의 본문과 조금 다른 글도 있습니다. 어떤 문장은 작가가 직접 하는 말이 아니라 다른 사람의 말을 옮긴 것이고, 어떤 문장은 이미지를 이해하도록 돕는 설명입니다. 글의 역할을 구분해 두면 독자는 책의 여러 목소리를 혼동하지 않습니다. HTML은 모든 글자를 똑같이 다루지 않고, 각 문장이 왜 그 자리에 있는지 책 안에 남겨 둡니다.

글마다 다른 역할

제목은 책과 장의 방향을 알려 주는 이정표입니다.

본문은 생각과 이야기를 이어 가는 중심 글입니다.

목록은 중요한 내용을 빠르게 확인하고 비교하게 돕습니다.

인용문과 그림 설명처럼 다른 성격의 글도 역할을 구분하면 더 분명하게 읽힙니다.

HTML은 전자책의 목차와 읽는 순서를 만듭니다

종이책의 차례를 보면 장 제목이 순서대로 적혀 있습니다. 독자는 차례를 보고 원하는 장을 찾아가거나, 아직 읽지 않은 부분이 어디까지인지 확인합니다. 전자책에서도 목차는 매우 중요합니다. 다만 전자책의 목차는 종이 위에 인쇄된 목록에만 머물지 않고, 독자가 누르면 바로 해당 장으로 이동하는 길잡이가 될 수 있습니다.

이때 전자책은 어떤 문장이 제목인지 알아야 합니다. HTML로 제목의 역할이 정리되어 있으면, 전자책 앱은 제목들을 모아 목차로 보여 줄 수 있습니다. 독자는 긴 책을 읽다가도 목차를 열어 다음 장으로 건너가거나, 아까 읽었던 소제목으로 돌아갈 수 있습니다. 눈에 보이는 제목 하나가 책 안에서는 독자가 움직일 수 있는 문이 되는 셈입니다.

읽는 순서도 마찬가지입니다. 전자책은 한 화면에 모든 문장을 늘어놓는 문서가 아니라, 여러 장과 문단이 이어진 책입니다. 제목 아래에 어떤 본문이 오는지, 목록 다음에 어떤 설명이 이어지는지, 다음 장은 어디서 시작하는지가 자연스럽게 정리되어야 합니다. HTML은 글의 순서를 적어 두는 바탕이 되어, 독서 앱이 책의 앞에서 뒤까지 흐름을 잃지 않고 보여 주게 합니다.

창작자에게 이것은 복잡한 기술 작업이라기보다 원고를 잘 정리하는 일과 닮았습니다. 장 제목을 알맞게 붙이고, 제목 아래에는 그 장의 본문을 두며, 꼭 필요한 곳에서만 목록을 쓰는 습관이 좋은 전자책의 시작입니다. 에디터가 HTML의 표시를 대신 정리해 주더라도, 원고에 담긴 구조가 분명할수록 전자책의 목차와 흐름도 더 자연스러워집니다.

목차와 순서에서 HTML의 역할

제목의 역할이 정리되어 있으면 전자책 앱은 제목을 목차의 길잡이로 사용할 수 있습니다.

독자는 목차를 통해 원하는 장과 소제목으로 빠르게 이동할 수 있습니다.

제목, 본문, 목록의 순서가 정리되면 책은 처음부터 끝까지 자연스럽게 이어집니다.

창작자가 원고의 장과 문단을 분명하게 나누는 일은 전자책의 읽기 흐름을 단단하게 만듭니다.

HTML은 더 많은 사람이 책을 읽게 돕습니다

모든 독자가 같은 방식으로 책을 읽지는 않습니다. 누군가는 작은 글자가 불편해 글자를 크게 키우고, 누군가는 화면의 밝기를 낮추거나 배경을 어둡게 바꿉니다. 또 누군가는 화면을 오래 보기 어려워 기기가 글을 읽어 주는 방식으로 책을 만납니다. 좋은 전자책은 한 가지 화면 모양만 고집하기보다, 서로 다른 읽는 방법을 받아들일 수 있어야 합니다.

HTML로 글의 역할이 잘 나뉘어 있으면, 기기가 글을 읽어 줄 때도 책의 흐름을 더 잘 전달할 수 있습니다. 큰 제목과 작은 제목, 일반 본문과 목록이 구분되어 있으면 듣는 독자도 ‘새로운 장이 시작되었구나’, ‘여기에는 중요한 항목이 정리되어 있구나’ 하고 이해하기 쉽습니다. 화면을 보며 읽는 사람에게는 익숙한 구조가, 듣는 사람에게도 책의 길이 되어 줍니다.

글자를 크게 바꾸는 경우에도 역할표는 도움이 됩니다. 제목과 본문이 모두 단지 크기만 다른 글자라면, 설정이 바뀔 때 책의 위계가 흐려질 수 있습니다. 그러나 제목과 본문이 각자의 역할을 갖고 있으면, 전자책은 달라진 화면 안에서도 중요한 제목과 이어지는 설명의 관계를 최대한 지키며 다시 배치할 수 있습니다. HTML은 책의 모양을 하나로 고정하지 않으면서도, 책의 질서를 지키는 방법입니다.

이런 배려는 특별한 독자만을 위한 것이 아닙니다. 지하철 안에서 한 손으로 책을 읽는 사람, 잠들기 전에 어두운 화면으로 책을 보는 사람, 잠시 목차를 열어 원하는 부분을 찾는 사람 모두에게 도움이 됩니다. HTML은 눈에 잘 띄지 않지만, 더 많은 사람이 자기에게 편한 방식으로 같은 책을 만날 수 있게 하는 조용한 안내판입니다.

읽는 사람을 돕는 HTML

제목과 본문이 구분되어 있으면 글자를 키우거나 화면 설정을 바꿔도 책의 흐름을 이해하기 쉽습니다.

기기가 글을 읽어 주는 방식에서도 장, 본문, 목록의 차이를 더 잘 전달할 수 있습니다.

목차와 제목 구조는 원하는 부분을 빨리 찾고 다시 돌아오는 데 도움을 줍니다.

HTML은 한 가지 읽기 방식이 아니라 여러 독자의 읽는 습관을 받아들이는 바탕입니다.

HTML은 글을 예쁘게 꾸미는 방법은 아닙니다

HTML을 처음 들으면 글자를 크게 만들고 색을 바꾸는 방법이라고 생각하기 쉽습니다. 하지만 HTML의 가장 중요한 일은 꾸미는 것이 아니라, 글의 역할을 정리하는 것입니다. 제목을 제목으로, 본문을 본문으로, 목록을 목록으로 알려 주는 일이 먼저입니다. 글을 예쁘게 보이게 하는 일은 그다음에 따로 생각할 수 있습니다.

이 구분을 이해하면 전자책을 만들 때 무엇부터 챙겨야 하는지도 쉬워집니다. 먼저 원고의 제목과 소제목이 분명한지, 한 문단에는 하나의 생각이 담겨 있는지, 목록으로 정리할 내용과 설명으로 풀어 쓸 내용이 구분되는지 살핍니다. 그다음에 글꼴과 여백, 이미지의 크기처럼 책의 분위기를 다듬습니다. 글의 뼈대를 세우는 일과 예쁘게 입히는 일을 나누면, 전자책도 훨씬 정돈된 모습으로 완성됩니다.

창작자가 HTML을 직접 쓰지 않아도 이 생각은 충분히 쓸모 있습니다. 전자책 에디터에서 ‘제목’을 선택하고 ‘본문’을 선택하며 목록을 만들 때, 우리는 이미 글의 역할을 정리하고 있습니다. 에디터는 그 선택을 전자책이 이해할 수 있는 표시로 바꾸어 줍니다. 그러므로 HTML을 안다는 것은 어려운 문법을 외운다는 뜻보다, 내 글 안에서 무엇이 제목이고 무엇이 본문인지 선명하게 생각하는 일에 가깝습니다.

HTML을 어렵게 생각하지 않는 방법

HTML은 글자를 화려하게 만드는 도구보다 글의 역할을 구분하는 문법입니다.

전자책을 만들 때는 먼저 제목, 본문, 목록의 구조를 정리하는 것이 중요합니다.

글의 모양과 분위기를 다듬는 일은 구조를 세운 뒤에 이어집니다.

에디터에서 제목과 본문을 구분하는 선택만으로도 HTML의 중요한 일을 하고 있는 셈입니다.

HTML은 글의 길을 잃지 않게 합니다

HTML은 눈에 보이는 장식보다 눈에 보이지 않는 질서를 만드는 문법입니다. 책의 제목은 어디에 있고, 지금 읽는 문단은 어떤 장에 속하며, 여러 항목은 무엇을 함께 정리하는지 알려 줍니다. 독자는 이 표시를 직접 읽지 않지만, 그 덕분에 목차를 따라 이동하고, 화면 크기를 바꾸고, 자기에게 편한 방식으로 책을 읽을 수 있습니다.

그래서 HTML은 어려운 기술보다 정리하는 마음에 가깝습니다. 원고를 쓸 때 제목을 분명하게 붙이고, 문단을 알맞게 나누며, 중요한 내용을 목록으로 묶는 일. 이 단순한 선택들이 전자책 안에서는 글의 역할을 알려 주는 약속이 됩니다. HTML은 글을 복잡하게 만들기 위해 존재하는 것이 아니라, 어떤 화면에서도 글이 자기 길을 잃지 않게 하기 위해 존재합니다.

이 글의 핵심

HTML은 글자에게 제목, 본문, 목록처럼 각자의 역할을 알려 주는 특별한 문법입니다.

제목과 본문, 목록의 역할이 구분되면 전자책은 목차와 읽는 순서를 더 자연스럽게 만들 수 있습니다.

구조가 잘 정리된 책은 글자를 크게 보거나 듣는 방식으로 읽어도 내용을 이해하기 쉽습니다.

HTML을 이해하는 가장 쉬운 방법은 글의 모양보다 글이 맡은 일을 먼저 생각하는 것입니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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