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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

EPUB, HTML, CSS의 정의

epub

EPUB의 압축 파일 형식

epub

HTML의 역할과 의미

epub

웹문서와 하이퍼링크

epub

CSS의 역할과 의미

epub

...

5 CSS의 역할과 의미

HTML은 글에게 역할을 알려 주는 문법입니다. 이 문장은 제목인지, 이 글은 본문인지, 여러 줄은 목록인지 구분해 전자책이 글의 순서를 이해하게 합니다. 하지만 HTML만으로는 책이 화면에서 어떤 모습으로 읽혀야 하는지 충분히 정할 수 없습니다. 제목을 어느 정도 크게 보일지, 문단 사이에는 얼마나 숨을 둘지, 이미지는 화면의 어느 만큼을 차지할지, 글은 좁은 휴대폰과 넓은 태블릿에서 어떻게 달라져야 할지 같은 문제는 다른 종류의 언어가 필요합니다.

CSS는 바로 그 일을 위해 만들어진 언어입니다. HTML이 책의 뼈대를 세운다면, CSS는 그 뼈대에 글꼴과 여백, 크기와 배치를 더해 읽을 수 있는 모습으로 만듭니다. HTML이 ‘이것은 제목입니다’라고 말하면, CSS는 ‘그 제목은 본문보다 조금 더 크고 굵게, 위아래에는 이런 간격을 두고 보여 주세요’라고 정합니다. 둘은 서로 경쟁하는 언어가 아니라, 책의 내용과 모습을 나누어 맡는 한 쌍입니다.

이 글에서는 HTML만으로는 왜 책의 배치를 다루기 어려운지, CSS가 어떤 필요에서 등장했는지, 그리고 전자책에서 CSS가 독자의 읽는 경험을 어떻게 다듬는지 차례로 살펴봅니다.

1.HTML이 잘하는 일과 시각적인 배치까지 맡기 어려운 이유를 알아봅니다.

2.문서에 글꼴과 여백, 이미지 배치가 필요한 이유를 살펴봅니다.

3.CSS가 HTML과 다른 역할을 맡는 새로운 스타일 언어로 등장한 과정을 정리합니다.

4.전자책에서 CSS가 책의 분위기와 독자의 읽기 편의를 어떻게 함께 지키는지 살펴봅니다.

HTML은 글의 역할을 정하지만 모양까지 정하지는 않습니다

HTML은 글을 질서 있게 정리하는 데 아주 잘 맞습니다. 제목은 제목으로, 본문은 본문으로, 목록은 목록으로 구분하면 전자책은 어디서 장이 시작되고 어떤 문단이 이어지는지 알 수 있습니다. 목차를 만들고, 글자를 크게 바꾸며, 화면을 읽어 주는 기능이 책의 흐름을 이해하는 데에도 이 구조가 필요합니다. HTML은 글이 무엇인지 알려 주는 데 집중합니다.

그렇지만 ‘제목’이라는 역할만으로는 화면의 모습이 완성되지 않습니다. 제목을 본문보다 얼마나 크게 보여 줄지, 한 줄이 너무 길어지지 않게 양옆 여백을 얼마나 둘지, 문단과 문단 사이는 어느 정도 떨어뜨릴지, 이미지는 가로로 넓게 보여 줄지 한 줄 아래로 둘지 같은 선택이 남습니다. 같은 제목이라도 어린이책의 제목과 조용한 에세이의 제목은 전혀 다른 분위기로 읽힐 수 있습니다.

HTML에게 이런 일을 모두 맡기면 문제가 생깁니다. 글의 역할을 알려 주는 표시 안에 글꼴과 색, 간격, 위치에 대한 지시까지 계속 섞여 들어가면 원고의 구조를 알아보기 어려워집니다. 제목이 왜 제목인지보다 제목이 몇 픽셀인지가 먼저 보이고, 같은 문단을 여러 곳에서 고칠 때도 모양에 대한 지시를 하나씩 다시 손봐야 합니다. 책의 내용과 책의 꾸밈이 한데 엉키는 셈입니다.

무엇보다 웹과 전자책의 화면은 한 가지 크기로 고정되어 있지 않습니다. 인쇄된 페이지라면 디자이너가 한 장의 종이를 보고 위치를 정할 수 있지만, 전자책은 독자가 어떤 기기를 쓰는지 알 수 없습니다. 작은 휴대폰에서 편한 배치가 큰 태블릿에서는 허전할 수 있고, 큰 화면에서 보기 좋은 두 줄짜리 제목이 작은 화면에서는 너무 답답해질 수 있습니다. HTML은 이런 변화에 맞춰 글의 역할을 지키게 하지만, 변화하는 화면에서 어떤 모습이 좋은지 정하는 일은 다른 언어가 맡아야 합니다.

HTML만으로 정하기 어려운 것

HTML은 제목, 본문, 목록처럼 글이 맡은 역할과 순서를 정리합니다.

글꼴의 느낌, 문단 사이의 간격, 화면 안의 여백과 이미지 배치는 별도의 선택이 필요합니다.

글의 구조와 모양에 대한 지시가 한데 섞이면 원고를 고치고 관리하기가 어려워집니다.

화면 크기와 독자의 설정이 달라지는 전자책에서는 한 가지 고정된 배치만으로 충분하지 않습니다.

책은 글의 내용뿐 아니라 읽는 모습도 필요합니다

같은 글을 읽어도 활자와 여백이 달라지면 전혀 다른 경험이 됩니다. 문단 사이가 너무 붙어 있으면 생각이 숨 쉴 자리가 없어 답답하고, 너무 멀면 하나의 이야기가 조각조각 흩어져 보입니다. 한 줄이 지나치게 길면 눈이 다음 줄을 찾기 어렵고, 제목이 너무 크면 본문보다 제목만 기억에 남습니다. 책의 배치는 장식으로 덧붙이는 마지막 단계가 아니라, 독자가 글에 오래 머물 수 있게 하는 읽기의 환경입니다.

이미지도 마찬가지입니다. 이미지가 책 안에 들어간다고 해서 언제나 크게 보이는 것이 좋은 것은 아닙니다. 글을 읽다 잠시 멈춰 장면을 만나는 이미지도 있고, 문단과 나란히 놓여 설명을 돕는 이미지도 있으며, 페이지 전체의 분위기를 여는 표지도 있습니다. 이미지의 크기와 여백, 글과의 거리는 독자가 그림을 먼저 볼지 문장을 먼저 읽을지에도 영향을 줍니다. 배치는 책이 말하는 순서를 조용히 바꿉니다.

종이책에서는 편집자와 디자이너가 페이지마다 이런 선택을 결정합니다. 전자책에서도 같은 고민이 필요하지만, 결과가 하나의 화면으로 고정되지 않는다는 차이가 있습니다. 어떤 독자는 본문 글자를 크게 키우고, 어떤 독자는 화면을 가로로 돌리며, 어떤 독자는 어두운 배경에서 읽습니다. 그러므로 전자책의 배치는 ‘이 화면에서만 완벽한 그림’을 만드는 일보다, 여러 화면에서도 글의 위계와 분위기가 무너지지 않게 하는 규칙을 만드는 일에 가깝습니다.

이 규칙이 없다면 전자책은 글을 표시할 수는 있어도 책답게 읽히기 어렵습니다. 제목과 본문이 너무 비슷해지고, 이미지가 화면을 넘거나 지나치게 작아지며, 문단의 호흡이 기기마다 제멋대로 달라질 수 있습니다. CSS는 바로 이런 문제를 다루기 위해, 글의 내용과 분리된 자리에서 책의 모양을 정할 수 있게 합니다.

책의 모습이 중요한 이유

글꼴, 줄 간격, 여백은 독자가 문장을 읽는 속도와 집중에 영향을 줍니다.

이미지의 크기와 위치는 글과 그림 가운데 무엇을 먼저 만나게 할지 결정합니다.

전자책의 배치는 한 화면의 완성보다 여러 화면에서 읽기 좋은 규칙을 만드는 일입니다.

내용의 구조와 읽는 모습을 나누어 생각해야 책이 더 안정적으로 완성됩니다.

CSS는 글의 모습만 따로 정하기 위해 등장했습니다

웹이 처음 널리 쓰이기 시작했을 때 HTML은 문서의 구조를 단순하게 전달하는 데 초점을 두고 있었습니다. 제목과 문단, 목록이 무엇인지 알려 주면 서로 다른 컴퓨터에서도 같은 문서를 읽을 수 있다는 생각이 중요했습니다. 그러나 웹에 글과 사람이 많아질수록, 문서를 읽기 좋게 보이게 하는 공통된 방법이 필요해졌습니다. 글꼴과 색, 여백과 정렬을 문서마다 제각각 처리하면 웹은 읽기 불편하고 고치기 어려운 곳이 될 수 있었습니다.

1994년 CERN에서 호콘 비움 리는 HTML의 구조와 시각적 표현을 나누어 다루는 스타일 언어 작업을 시작했습니다.1 이 언어가 CSS입니다. CSS는 HTML을 대신하려고 만들어진 것이 아닙니다. HTML은 계속 글의 역할을 설명하고, CSS는 그 역할을 화면에서 어떻게 보여 줄지 정하는 방식입니다. 책의 원고와 편집 디자인이 서로 다른 일을 하듯, 두 언어도 각자의 자리를 갖게 된 것입니다.

CSS라는 이름은 ‘계단처럼 이어지는 스타일 규칙’이라는 뜻을 품고 있지만, 처음 이해할 때 그 이름을 외울 필요는 없습니다. 중요한 생각은 아주 단순합니다. 같은 제목이라도 책 전체에 한 번 정한 모양을 적용할 수 있고, 본문의 여백도 한 곳에서 정해 여러 장에 고르게 반영할 수 있다는 점입니다. 책의 모양을 바꾸고 싶을 때 모든 문장을 하나씩 다시 꾸미는 대신, 모양에 대한 규칙을 조정하면 됩니다.

CSS는 1996년 W3C의 첫 공식 권고가 되었습니다.2 그 뒤 웹은 글과 구조만 보여 주던 공간에서, 사진과 활자, 여백과 다양한 화면 크기를 더 세심하게 다루는 출판 공간으로 자랄 수 있었습니다. CSS가 등장했다는 것은 웹이 갑자기 화려해졌다는 뜻보다, 문서의 내용과 디자인을 각각 더 잘 돌볼 수 있게 되었다는 뜻에 가깝습니다.

CSS가 새로 맡은 일

CSS는 HTML이 알려 준 글의 역할을 화면에서 어떤 모습으로 보일지 정하는 별도의 스타일 언어입니다.

1994년 HTML의 구조와 시각적 표현을 나누어 다루기 위한 작업으로 시작되었습니다.1

같은 제목과 본문에 일관된 글꼴, 크기, 간격을 적용해 책 전체의 모습을 관리할 수 있습니다.

CSS1은 1996년 W3C의 공식 권고가 되어 웹 문서의 디자인을 위한 공통 규칙이 되었습니다.2

CSS는 같은 글을 다른 책처럼 읽히게 합니다

HTML로 정리한 원고가 같아도 CSS가 달라지면 책의 인상은 크게 달라집니다. 차분한 인문서에는 오래 읽어도 피로하지 않은 본문 글꼴과 넉넉한 줄 간격을 줄 수 있고, 짧은 글과 사진이 어우러지는 에세이에는 이미지와 문단 사이에 더 큰 숨을 둘 수 있습니다. 어린이책이라면 제목과 그림의 관계를 또렷하게 만들고, 시집이라면 한 줄 한 줄이 가진 빈 공간을 더 조심스럽게 다룰 수 있습니다.

여기에서 CSS는 책을 화려하게 꾸미는 장식 상자가 아닙니다. CSS는 글의 중요도를 보여 주고, 읽는 속도를 조절하며, 이미지가 등장하는 순간을 다듬는 편집 도구입니다. 본문보다 조금 더 큰 제목은 독자에게 새로운 생각이 시작된다는 신호가 되고, 문단 사이의 간격은 앞의 생각을 잠시 내려놓고 다음 생각을 맞이하게 합니다. 눈에 잘 띄지 않는 선택들이 모여 독서의 리듬을 만듭니다.

전자책에서는 이 리듬이 더 조심스럽게 설계되어야 합니다. 종이책처럼 모든 독자에게 같은 페이지를 보여 줄 수 없기 때문입니다. CSS는 작은 화면에서는 이미지가 화면을 넘지 않게 하고, 큰 화면에서는 본문이 지나치게 넓어지지 않게 하며, 글자를 키웠을 때도 제목과 본문의 차이가 유지되게 돕습니다. 책은 독자의 화면에 맞춰 다시 흐르지만, 읽기 좋은 분위기까지 사라지지 않도록 하는 것이 CSS의 역할입니다.

좋은 CSS는 독자가 CSS를 알아차리지 않게 합니다. 독자는 ‘여백이 잘 계산되었다’고 생각하기보다 문장을 편하게 읽고, ‘이미지 배치가 규칙에 맞다’고 생각하기보다 자연스럽게 다음 장면으로 넘어갑니다. 디자인이 앞에 나서기보다 글을 더 잘 읽히게 할 때, CSS는 가장 조용하고도 중요한 일을 하고 있는 셈입니다.

CSS가 만드는 읽기 경험

같은 HTML 원고도 CSS에 따라 차분한 책, 이미지 중심의 책, 여백이 중요한 책처럼 다르게 읽힐 수 있습니다.

제목의 크기와 문단의 간격, 이미지의 위치는 글의 중요도와 읽는 리듬을 만듭니다.

전자책에서는 화면 크기와 글자 크기가 달라져도 책의 분위기와 위계가 유지되도록 돕습니다.

좋은 CSS는 자신을 드러내기보다 독자가 글에 편하게 머물게 합니다.

전자책의 CSS는 독자의 선택도 함께 생각합니다

전자책을 만드는 사람은 책의 모습에 대해 많은 선택을 합니다. 어떤 글꼴이 어울리는지, 제목은 얼마나 또렷해야 하는지, 문단 사이에 어느 정도 여백을 둘지, 이미지는 어떻게 놓을지 정합니다. CSS는 이런 선택을 책 전체에 일관되게 적용하도록 돕습니다. 하지만 전자책에서는 출판사가 모든 것을 완전히 고정하지 않는다는 점도 중요합니다.

독자는 자신의 눈과 기기에 맞게 글자 크기를 바꾸고, 밝은 화면과 어두운 화면 가운데 편한 쪽을 고를 수 있습니다. 어떤 독자는 기본 글꼴이 더 편할 수도 있습니다. CSS는 출판사가 준비한 디자인을 전달하면서도, 이런 독자의 선택과 만날 수 있어야 합니다. 좋은 전자책 디자인은 독자의 설정을 막는 것이 아니라, 설정이 달라져도 책의 구조와 읽기 흐름이 무너지지 않게 하는 데 있습니다.

이를 위해 CSS는 ‘항상 이 자리에 이 크기’라고 고집하기보다, 상황에 따라 유연하게 움직일 수 있는 규칙을 준비합니다. 작은 화면에서는 한 줄에 너무 많은 글자가 들어가지 않게 하고, 큰 화면에서는 문단이 지나치게 넓어지지 않게 하며, 이미지가 글을 밀어내지 않게 조절합니다. 독자가 글자를 키워도 제목과 본문이 서로 뒤엉키지 않고, 목록과 그림이 제 역할을 이어 가게 합니다.

CSS를 이해하면 전자책 디자인을 보는 눈도 달라집니다. 예쁜 표지나 특별한 글꼴만 보는 대신, 이 책이 오래 읽기 편한지, 작은 화면에서도 중요한 내용이 잘 보이는지, 독자의 선택을 받아들일 여지가 있는지 살피게 됩니다. CSS는 한 페이지를 멋지게 만드는 도구이면서, 동시에 여러 사람의 서로 다른 읽는 시간을 배려하는 언어입니다.

전자책에서 CSS가 지키는 것

CSS는 출판사가 정한 글꼴, 여백, 제목과 본문의 위계를 책 전체에 일관되게 적용합니다.

독자가 글자 크기와 화면 설정을 바꿔도 책의 구조와 읽는 흐름이 남도록 돕습니다.

작은 화면과 큰 화면에서 모두 읽기 편한 배치 규칙을 준비할 수 있습니다.

좋은 전자책 CSS는 디자인의 개성과 독자의 읽기 편의 사이에서 균형을 찾습니다.

HTML과 CSS는 책의 내용과 모습을 나누어 맡습니다

HTML과 CSS를 함께 생각하면 전자책이 만들어지는 방식이 조금 선명해집니다. HTML은 제목과 본문, 목록과 인용처럼 글이 무엇인지 알려 줍니다. CSS는 그 글이 어느 정도 크기로 보이고, 어떤 글꼴을 쓰며, 문단과 이미지 사이에 얼마나 여백을 둘지 정합니다. 하나는 책의 구조를, 다른 하나는 책의 읽는 모습을 맡습니다.

둘을 나누어 둔 덕분에 창작자는 글의 내용을 고치면서도 책의 전체 디자인을 잃지 않을 수 있고, 디자이너는 디자인을 다듬으면서도 제목과 본문의 의미를 흐리지 않을 수 있습니다. 전자책은 화면마다 모양이 달라질 수 있지만, 이 두 가지 약속이 함께 있으면 내용의 질서와 읽기의 분위기를 동시에 지킬 수 있습니다.

CSS는 HTML이 못 하는 일을 대신하는 언어입니다. 하지만 HTML을 밀어내는 언어는 아닙니다. HTML이 글의 역할을 정확히 알려 줄수록 CSS는 더 자연스럽게 그 글을 읽기 좋은 모습으로 바꿀 수 있습니다. 구조가 단단한 글에 알맞은 디자인이 더해질 때, 전자책은 단순한 화면 속 글이 아니라 오래 읽을 수 있는 책이 됩니다.

1: W3C, “The World Wide Web Consortium Issues Cascading Style Sheets Recommendation”, 1996. CSS 작업은 1994년 CERN에서 시작되었습니다.
2: W3C, “Cascading Style Sheets, level 1”, 1996.

이 글의 핵심

HTML은 글의 역할과 순서를 정리하지만, 글꼴과 여백, 이미지 배치 같은 시각적 모습까지 맡기에는 맞지 않습니다.

CSS는 문서의 구조와 디자인을 나누어 다루기 위해 등장한 별도의 스타일 언어입니다.

CSS는 제목, 본문, 이미지의 크기와 간격을 조절해 전자책의 읽는 리듬을 만듭니다.

전자책에서 좋은 CSS는 책의 분위기를 지키면서도 독자의 화면과 읽기 설정을 받아들입니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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