CSS — 같은 글이 다른 얼굴로 보이는 이유

같은 글인데 한쪽에서는 읽기 편하고 다른 쪽에서는 답답하다. 문장은 바뀌지 않았다. 글자 크기와 줄 사이, 본문이 차지하는 폭이 달라졌을 뿐이다. 내용을 이해하는 데 디자인이 얼마나 관여하는지 이런 순간에 실감하게 된다.

웹페이지에서는 이 표현의 상당 부분을 CSS라는 기술이 맡는다. 이름은 낯설어도 독자가 만나는 결과는 매일 익숙하다. 코드를 배우기보다 책의 편집과 비교해 보면 같은 문서가 여러 얼굴을 갖는 이유를 쉽게 이해할 수 있다.

01. 무엇을 썼는지와 어떻게 보일지

웹 문서에 쓰이는 HTML은 제목과 문단, 링크 같은 내용의 구조를 표시한다. CSS는 그런 요소가 화면에서 어떻게 표현될지 규칙을 정한다. 제목이라는 역할과 제목의 글자를 파란색으로 보이게 하는 선택은 구분되는 것이다.

책으로 비유하면 원고의 큰제목과 문단을 구분하는 일, 그리고 글꼴과 크기와 간격을 정하는 일이 닮아 있다. 완전히 같은 제작 과정은 아니지만 두 종류의 판단을 나누어 생각할 수 있다. 구조를 유지한 채 표현을 바꿀 수 있다는 점이 중요한 출발점이다.

02. 아무 꾸밈도 없어 보이는 화면에도 규칙이 있다

작성자가 별도의 표현을 지정하지 않아도 브라우저는 제목을 크게, 링크를 다른 색과 밑줄로 보여 주곤 한다. MDN은 이를 브라우저의 기본 스타일이라고 설명한다. 정말 아무 규칙도 없이 글자만 흩어 놓는 것은 아니다.

이 덕분에 특별한 디자인이 없는 문서도 어느 정도 구분해 읽을 수 있다. 익숙해서 자연처럼 느끼던 모습에도 누군가 정한 기본값이 있었던 셈이다. 웹페이지의 표현을 이해하려면 보이는 색뿐 아니라 지정하지 않았을 때 무엇이 적용되는지도 생각하게 된다.

03. 한 번의 규칙이 여러 문단에 적용되다

CSS는 어떤 요소에 어떤 표현을 적용할지 규칙으로 적는다. 모든 본문 문단의 글자와 배경, 여백을 같은 방식으로 정할 수 있다. 문단이 늘어날 때마다 한 줄씩 수동으로 색칠하는 방식과는 다르다. 공통의 역할을 가진 요소들을 함께 다루는 것이다.

MDN의 예에서도 새 문단을 추가하면 기존 문단 규칙이 적용된다. 독자는 문법을 외울 필요가 없다. 같은 종류의 내용에 같은 표현을 주는 약속이 있다는 점만 이해하면 된다. 여러 페이지가 한 사이트처럼 느껴지는 데도 이런 반복의 질서가 도움을 준다.

04. 색을 바꾸는 것 이상의 일

CSS는 글자 크기와 색뿐 아니라 화면의 배치도 다룬다. 내용을 여러 칸으로 정렬하거나 요소 사이의 간격을 정하고 움직임을 줄 수도 있다. 그래서 웹 디자인을 단순히 글에 예쁜 색을 칠하는 일로만 보면 중요한 부분을 놓친다.

읽는 순서와 시선이 쉬는 자리도 표현의 영향을 받는다. 제목이 지나치게 작으면 구조를 놓치기 쉽고, 여백이 없으면 서로 다른 내용이 붙어 보일 수 있다. 이것은 특정 수치 하나가 언제나 정답이라는 뜻은 아니다. 어떤 내용을 어떤 환경에서 읽는지가 함께 중요하다.

05. 문서를 고치지 않고 표현을 고치기

CSS는 HTML 안에 적을 수도 있고 별도의 파일로 연결할 수도 있다. MDN은 브라우저가 이런 표현 규칙을 찾아 문서에 적용한다고 설명한다. 여러 문서가 공통의 표현 파일을 사용하면 원고 전체를 다시 쓰지 않고도 모습을 조정할 수 있다.

예를 들어 본문 간격을 넓히는 선택은 이야기의 사실관계를 바꾸는 일과 다르다. 내용 수정과 디자인 수정의 범위를 나눌 수 있는 것이다. 다만 구조가 부실한 문서를 겉모양만으로 잘 정리된 문서로 만들 수는 없다. 표현과 내용이 역할을 나누더라도 서로의 상태는 독서에 함께 영향을 준다.

06. 브라우저가 화면을 만드는 과정

브라우저는 문서의 구조를 읽고 어떤 부분에 어떤 CSS 규칙이 해당하는지 정리한다. 그 결과를 바탕으로 화면에 그린다. 독자가 보는 완성된 페이지 뒤에는 문서와 표현을 연결하는 과정이 있는 셈이다. 파일에 적힌 글자가 곧바로 같은 모양의 화면이 되는 것은 아니다.

그렇다고 웹페이지가 항상 같은 순간에 똑같이 완성된다는 뜻은 아니다. 필요한 자료가 도착하는 조건과 프로그램의 지원도 영향을 줄 수 있다. 이번 글은 작동의 큰 구분을 이해하는 이야기다. 복잡한 표시 문제를 한 가지 원인으로 진단하는 설명은 아니다.

07. 잘 보인다는 말은 읽을 수 있다는 말과 만난다

표현은 눈길을 끌기 위한 장식일 수도 있지만 읽는 사람을 돕는 일일 수도 있다. 내용의 중요도가 구분되고 문단의 경계가 느껴지면 독자는 글의 길을 찾기 쉬워진다. 화려함과 가독성은 같은 기준이 아니므로 목적을 나누어 볼 필요가 있다.

함께 실은 AI 삽화는 같은 원고의 서로 다른 지면을 살피는 편집 장면이다. 실제 브라우저의 표시 실험이나 특정 CSS 코드의 결과 화면은 아니다. 글의 내용과 그것을 놓는 방식 사이의 관계를 떠올리는 분위기 그림이다.

08. 글의 얼굴에도 선택이 들어 있다

CSS를 알면 웹페이지를 볼 때 문장과 디자인을 조금 나누어 읽게 된다. 글이 어려워서 읽기 힘든지, 표현 때문에 길을 잃는지 질문할 수 있다. 같은 내용이라도 그것을 만나는 경험은 달라질 수 있다는 사실이 더 구체적으로 보인다.

다음에 마음에 드는 읽기 화면을 만나면 색만 보지 말고 제목의 크기와 여백, 문단의 폭도 살펴보자. 그곳에는 독자의 눈을 어떻게 이끌지에 관한 선택이 들어 있다. CSS는 웹의 글이 어떤 얼굴로 사람을 만날지 정하는 여러 약속 가운데 하나다.