티스토리 뷰
목차
웹 페이지를 처음 만들 때 HTML로 구조를 짜고, CSS로 스타일링을 입힙니다. 대부분의 사람들은 이 두 가지에만 집중하지만, 사실 브라우저가 우리 몰래 중요한 일을 하고 있다는 걸 알고 계신가요?
바로 CSSOM이라는 중요한 개념 덕분에 우리의 웹 페이지가 매끄럽게 동작하는 것이죠.
저번 포스팅을 통해 DOM의 역할을 알아보았습니다. DOM은 웹페이지의 구조를 이해하고 조작할 수 있는 도구였습니다. DOM에 대해 이해하셨다면 오늘 배울 CSSOM을 어렵지 않게 이해하실 수 있습니다. 그럼 함께 알아보겠습니다!
CSSOM이란?
CSSOM은 CSS Object Model의 약자로, 쉽게 말하면 브라우저가 CSS 코드를 이해하고 이를 통해 스타일을 적용하는 방법을 정의한 구조라고 할 수 있습니다. 웹 페이지를 브라우저에서 열면, 브라우저는 HTML과 CSS 코드를 단순히 읽는 것이 아니라, 이들을 해석하고 이해하는 과정을 거칩니다. 이 과정에서 만들어지는 것이 바로 CSSOM입니다.
CSSOM은 HTML이 DOM(Document Object Model)을 생성하는 것과 비슷한 방식으로 동작합니다. DOM은 HTML 문서를 트리 구조로 표현한 모델입니다. CSSOM도 이와 같은 방식으로 CSS를 트리 구조로 변환합니다. 이 구조를 통해 브라우저는 CSS 규칙을 적용하고, 웹 페이지의 스타일을 결정하게 됩니다.
CSSOM의 동작 원리
CSSOM의 동작 과정을 이해하려면, 브라우저가 어떻게 웹 페이지를 렌더링하는지 먼저 알아야 합니다.
1) HTML 파싱과 DOM 생성
브라우저가 웹 페이지를 로드할 때, 먼저 HTML을 파싱하여 DOM을 생성합니다. DOM은 HTML 요소들을 트리 구조로 표현한 것입니다. 이 과정에서 웹 페이지의 구조가 정의됩니다.
2) CSS 파싱과 CSSOM 생성
HTML 파싱이 진행되는 동안, 브라우저는 CSS 파일을 다운로드하고 이를 파싱하여 CSSOM을 생성합니다. CSSOM은 CSS 규칙들을 트리 구조로 표현한 것으로, 이를 통해 각 요소에 적용될 스타일이 결정됩니다.
3) DOM과 CSSOM 결합
DOM과 CSSOM이 생성되면, 브라우저는 이 두 가지를 결합하여 Render Tree(렌더 트리)를 만듭니다. 이 렌더 트리는 각 요소가 화면에 어떻게 그려질지를 정의합니다. 이때, 보이지 않는 요소(예: display: none)는 렌더 트리에 포함되지 않습니다.
4) 렌더링 및 페인트
마지막으로 렌더 트리를 기반으로 브라우저는 화면에 요소들을 그립니다. 이 과정을 페인팅(Painting)이라고 합니다. 페이지의 스타일이 변경될 때마다 브라우저는 필요한 부분만 다시 페인트합니다.
CSSOM의 중요성
"그냥 CSS 파일을 작성하면 되지, CSSOM을 알아야 할 필요가 있을까?"라고 생각할 수도 있습니다. 그러나 CSSOM을 이해하면 브라우저가 스타일을 적용하는 방식을 더 잘 이해할 수 있고, 더 나아가 성능 최적화에 도움을 줄 수 있습니다.
예를 들어, JavaScript를 사용해 스타일을 동적으로 변경할 때, CSSOM을 직접 수정하게 됩니다. 이때, 불필요하게 CSSOM을 자주 수정하거나 대규모의 변경이 일어나면 성능에 영향을 미칠 수 있습니다. 또한, 렌더 트리를 재생성하거나 페인트 작업이 자주 일어나면 페이지의 반응성이 떨어질 수 있습니다.
따라서 CSSOM을 효율적으로 관리하는 것이 중요합니다. 예를 들어, CSS 파일을 잘 구조화하여 중복된 스타일 규칙을 줄이거나, JavaScript로 스타일을 조작할 때는 변경 사항을 최소화하는 것이 좋습니다.
CSSOM 최적화하는 방법
1) 필요한 CSS만 로드
페이지에 불필요한 CSS를 포함하지 않도록 주의하세요. 사용하지 않는 CSS 규칙은 CSSOM을 복잡하게 만들고, 브라우저의 렌더링 성능을 저하시킬 수 있습니다.
2) CSSOM 조작 최소화
JavaScript로 스타일을 자주 변경하면 브라우저가 CSSOM을 자주 재생성해야 하므로 성능에 영향을 미칠 수 있습니다. 가능하면 스타일 변경을 한 번에 모아서 적용하는 것이 좋습니다.
3) 중복된 CSS 제거
CSS 파일에서 중복된 스타일 규칙을 줄이는 것이 중요합니다. 이는 CSSOM의 크기를 줄이고, 브라우저가 스타일을 빠르게 처리할 수 있도록 도와줍니다.
4) 비동기 CSS 로딩
CSS 파일이 많다면, 비동기로 로드하는 방법을 고려해 보세요. 이는 페이지의 초기 로딩 속도를 높이고, CSSOM 생성을 최적화할 수 있습니다.
CSSOM은 우리가 자주 접하는 개념은 아니지만, 웹 페이지가 어떻게 스타일링되고 렌더링되는지를 이해하는 데 중요한 역할을 합니다. CSSOM을 이해하면, 더 나은 성능을 가진 웹 페이지를 제작할 수 있으며, 스타일을 적용할 때 발생할 수 있는 문제를 더 잘 해결할 수 있습니다.
웹 개발은 마치 퍼즐을 맞추는 것과 같습니다. CSSOM은 그 퍼즐을 완성하는 중요한 조각 중 하나입니다. 브라우저가 어떻게 우리의 코드를 해석하고 화면에 나타내는지를 이해하면, 더 나은 웹 페이지를 만들 수 있는 능력을 갖추게 될 것입니다.
웹 페이지의 스타일링에 한 단계 더 깊이 들어가고 싶다면, CSSOM을 이해하는 것이 그 첫걸음이 될 것입니다.