와, 다들 스매싱 매거진에 오늘 올라온 이 글 보셨어요? 아침에 커피 마시다가 정신이 번쩍 드네요. 드디어 CSS @scope가 나왔습니다.
맨날 BEM으로 클래스명 길게 짓거나 CSS Modules, 혹은 Styled Components 쓰면서 스타일 충돌 막으려고 애썼잖아요. 저만 그런 거 아니죠? 그런데 이제 네이티브 CSS만으로 컴포넌트의 스타일 범위를 딱 지정해서 가둬버릴 수 있게 됐어요. 특정 컴포넌트 안에서만 스타일이 먹히게 하는 거죠.
예를 들어 .card 컴포넌트 안의 h2 태그에만 스타일을 주고 싶으면, 이제 전역 오염 걱정 없이 깔끔하게 처리할 수 있다는 뜻입니다. 이거 진짜 물건이네요. 무거운 라이브러리나 복잡한 빌드 과정 없이도 컴포넌트 기반 스타일링이 훨씬 직관적으로 변하겠어요.
물론 당장 모든 프로젝트에 도입하긴 어렵겠지만, 이 기능이 가져올 변화의 바람은 무시 못 할 것 같습니다. @scope를 실무에 활용하기 위한 제 생각 몇 가지를 공유해 볼게요.
- 디자인 시스템 컴포넌트에 우선 적용해 보세요. 버튼, 카드, 인풋 필드처럼 재사용성이 높고 독립적이어야 하는 컴포넌트부터
@scope로 리팩토링하면 효과가 가장 클 겁니다. 스타일이 외부로 새어 나가거나 내부를 침범할 걱정이 확 줄어들겠죠. - 기존 CSS 방법론과 섞어서 써보세요. 처음부터 모든 걸 바꿀 순 없으니, 특히 스타일 충돌이 잦았던 복잡한 레이아웃이나 위젯 영역에만 부분적으로
@scope를 도입해서 점진적으로 개선해 나가는 전략이 현실적일 것 같아요. - 'Donut Scope' 개념을 이해해 두세요.
@scope는 특정 영역을 시작점으로 잡고, 특정 영역을 끝점으로 지정해서 그 사이의 요소에만 스타일을 적용하는 것도 가능해요. 이걸 '도넛 스코프'라고 부르던데, 중첩된 컴포넌트 구조에서 아주 유용하게 쓰일 것 같습니다.
오랜만에 CSS 네이티브에 이렇게 설레는 기능이 추가된 것 같네요. 더 이상 클래스명 짓느라 머리 싸매지 않아도 되는 날이 올지도 모르겠습니다.
다들 어떻게 생각하세요? 이거 실무에 바로 써먹을 수 있을까요? 댓글로 자유롭게 의견 나눠봐요!
🔗 원문 보기: https://smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/
FE = 현빈