버튼 하나 꾸미는데 같은 이름을 다섯 번 적는다
작은 회사 웹사이트에서 가장 흔한 작업이 "이 버튼에 마우스를 올리면 색을 바꿔달라"는 요청입니다. 그런데 순수 CSS만 쓰면 버튼의 기본 스타일, 마우스를 올렸을 때, 눌렀을 때, 그 안의 글자 색까지 매번 .btn이라는 같은 이름을 처음부터 다시 적어야 했습니다. 클래스 이름이 길어지면 같은 단어를 화면 가득 반복하게 되고, 나중에 이름 하나만 바꿔도 흩어진 여러 줄을 일일이 찾아 고쳐야 합니다.
그래서 그동안 Sass를 깔았다
이 불편을 줄이려고 많은 제작사가 Sass나 Less 같은 도구를 도입했습니다. 스타일을 안쪽으로 들여써서 묶는 '중첩(Nesting)' 기능 때문입니다. 하지만 이 도구들은 사람이 쓴 코드를 브라우저가 읽을 수 있는 진짜 CSS로 바꿔주는 빌드 단계가 필요합니다. 작은 사이트 하나 손보는데 도구를 설치하고, 명령어를 돌리고, 환경이 꼬이면 디버깅까지 해야 하는 셈입니다.
이제 브라우저가 중첩을 직접 이해한다
최신 브라우저는 별도 도구 없이 CSS 중첩을 그대로 알아듣습니다. 버튼 스타일 안에 마우스 오버, 그 안의 글자 스타일을 한 덩어리로 들여써서 묶을 수 있습니다. 부모를 가리킬 때는 & 기호를 쓰는 것이 안전합니다. 관련된 스타일이 한곳에 모이니, 코드가 짧아지고 '이 버튼과 관련된 규칙이 어디 어디 흩어져 있더라' 하고 찾아 헤맬 일이 줄어듭니다.
실무에서 달라지는 세 가지
- 빌드 단계가 사라진다. 도구 설치와 변환 과정 없이 CSS 파일 하나만 수정하면 끝입니다. 외주가 끝난 뒤 사장님이 직접 작은 수정을 하기도 훨씬 수월해집니다.
- 읽기 쉬워진다. 한 요소에 딸린 스타일이 안쪽으로 묶여 있어, 처음 보는 사람도 구조를 한눈에 파악합니다.
- 의존성이 준다. Sass 같은 외부 도구에 묶이지 않으니, 몇 년 뒤 그 도구의 버전이 바뀌어도 사이트가 흔들릴 위험이 적습니다.
도입 전에 짚어둘 점
중첩을 너무 깊게 들여쓰면 오히려 읽기 어려워지므로 두세 단계 안에서 끝내는 것이 좋습니다. 또한 아주 오래된 브라우저에서는 동작하지 않을 수 있으니, 방문자층이 구형 환경에 몰려 있다면 핵심 디자인은 중첩 없이도 깨지지 않도록 설계해 두는 편이 안전합니다. 부모를 가리킬 때 &를 붙이는 습관을 들이면 예기치 않은 오작동을 피할 수 있습니다.
작은 회사 사이트엔 무슨 의미일까
핵심은 '같은 결과를 더 적은 도구로 얻을 수 있게 됐다'는 점입니다. 도구가 줄면 만들 때도 빠르고, 넘겨받은 뒤 유지보수도 가볍습니다. CYAN은 작은 회사 사이트를 만들 때 이렇게 브라우저가 기본으로 지원하는 기능을 우선 활용해, 몇 년 뒤에도 사장님이 부담 없이 고쳐 쓸 수 있는 가벼운 코드를 남기는 것을 원칙으로 삼고 있습니다. 화려한 도구보다, 오래 살아남는 단순함이 작은 회사에는 더 큰 자산이 됩니다.