CSS, 왜 누군가에게는 지옥이고 누군가에게는 예술인가?
CSS는 “시작은 쉽지만 끝은 가장 어렵다”는 평을 듣곤 합니다. 일반적인 로직 중심의 언어와 달리, CSS는 시간이 흐를수록 우리를 괴롭히는 걸까요? 현직 UI 개발자로서 수많은 프로젝트의 레거시를 해결하며 얻은 통찰을 바탕으로 그 이유를 파헤쳐 봅니다.
일반적인 프로그래밍 언어는 문법이 틀리면 에러 메시지를 뱉으며 실행을 멈춥니다. 하지만 CSS는 다릅니다.
디버깅의 부재: 화면이 완전히 깨지거나 디자인 의도와 달라도, 브라우저나 컴파일러는 이를 ‘오류’로 인식하지 않습니다. 문법만 맞다면 시스템은 그저 침묵할 뿐입니다. 이 침묵은 개발자에게 성공이 아닌 ‘미궁’으로 다가옵니다.
시각적 판단의 한계: “화면이 디자인과 다르다”는 결론은 결국 인간의 눈이 내려야 합니다. AI가 아무리 발전해도 복잡한 마크업 구조와 CSS 규칙 사이의 미묘한 정렬, 시각적 일관성까지 완벽하게 파악하기엔 여전히 한계가 있습니다.
중첩과 상속의 굴레: HTML 구조에 종속적인 CSS는 프로젝트가 커질수록 복잡도가 기하급수적으로 늘어납니다. 처음엔 간결해 보이던 코드도 중첩(Nesting)이 깊어지고 상속이 꼬이기 시작하면, 어디서부터 손을 대야 할지 모르는 늪에 빠지게 됩니다.
많은 이들이 CSS에서 길을 잃는 결정적인 이유는 바로 우선순위(Specificity) 규칙 때문입니다.
CSS 우선순위
1순위 !important (최우선)
2순위 Inline Style (HTML 태그 내 작성)
3순위 ID(#)
4순위 Class(.) 속성, 가상 클래스
5순위 Tag 가상 요소
선언된 위치와 선택자의 종류에 따라 적용 순서가 달라지기에, 숙련되지 않은 이들은 스타일 하나를 고치기 위해 수 시간을 허비하기도 합니다. 실제로 레거시 코드 때문에 며칠을 고생하던 업체에 파견을 나가 단 몇 분 만에 문제를 해결해 준 적이 있습니다. 사람들은 이를 마법처럼 보기도 하지만, 사실 이는 화려한 기술이 아니라 명확한 규칙 이해에서 오는 ‘디버깅의 논리’가 만든 차이일 뿐입니다.
규칙 없이 CSS를 남발하면 결국 통제 불능의 상태가 옵니다. 대부분의 CSS 지옥은 ‘빠른 구현’을 위해 ‘재사용성과 유지보수’를 타협한 지점에서 시작됩니다.
비효율적인 수정: 설계를 무시하고 짠 코드는 특정 개발자에게만 의존하게 만들거나, 프로젝트 리뉴얼 전 “마지막으로 쓰고 버리는 소스”로 전락하게 됩니다.
유지보수의 핵심: 처음부터 탄탄한 UI 시스템(Design System)을 구축하지 않으면, 이후의 수정 작업은 밑 빠진 독에 물 붓기가 됩니다.
수많은 프레임워크와 라이브러리가 등장함에도 전문가들이 결국 순수 CSS를 지향하는 데는 명확한 이유가 있습니다.
모든 환경에서의 호환성: 순수 CSS는 어떤 개발 환경에서도 주춧돌 역할을 할 수 있는 가장 강력한 표준입니다.
유연한 확장성: 기본이 탄탄하면 어떤 라이브러리를 추가하더라도 관리의 어려움이 적고 조화로운 확장이 가능합니다.
지속 가능한 코드: 라이브러리의 유행은 변하지만, 웹 표준 CSS는 영원합니다.
CSS는 단순히 화면을 꾸미는 도구가 아니라, 웹 서비스의 인상을 결정짓는 정교한 설계도입니다. 끔찍한 스파게티 코드를 피하고 싶다면 초기 설계에 공을 들여야 합니다.
규칙만 제대로 이해하고 지킨다면, CSS는 그 어떤 언어보다 쉽고 강력한 무기가 됩니다. 당신의 프로젝트는 지금, 미래의 변화에도 흔들리지 않을 건강한 주춧돌 위에 서 있습니까?