CSS / 2026 모던 CSS 2026.06.02

Part 6: CSS 아키텍처 — @layer와 @scope

프로젝트가 커질수록 CSS 관리가 가장 큰 어려움이 됩니다. 버튼, 카드, 모달 등 수많은 컴포넌트가 쌓이면서 스타일이 여기저기 흩어지고, 수정할 때마다 어디를 고쳐야 할지 막막해지는 상황이 자주 발생합니다. 특히 여러 명이 동시에 작업하거나, 시간이 지나 레거시 코드가 쌓이면 스타일 충돌과 우선순위 문제가 본격적으로 시작됩니다.

이런 문제를 해결하기 위해 CSS는 @layer와 @scope라는 강력한 도구를 제공합니다. 이번 파트에서는 이 두 기능을 깊게 다루면서, 실제 대규모 프로젝트에서 CSS를 어떻게 체계적으로 관리할 수 있는지 알아보겠습니다.

1. 왜 CSS 아키텍처가 중요한가?

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

22살에 과일 판매로 매출 1000만원 달성한 노하우

₩159,000

크몽

[모양톡+하드 꿀쿼카]

₩12,900

₩25,800

마리오케이스

도쿄 해리포터 스튜디오 투어 입장권

₩59,768

KKday

작은 프로젝트에서는 CSS를 자유롭게 써도 큰 문제가 없습니다. 하지만 컴포넌트가 50~100개 이상으로 늘어나는 순간부터 문제가 발생하기 시작합니다.

대표적인 문제들은 다음과 같습니다:

같은 클래스 이름이 여러 곳에서 사용되면서 스타일이 의도치 않게 덮어쓰임
!important를 남발하게 됨
어떤 스타일이 왜 적용되는지 추적하기 어려워짐
디자인 시스템을 만들고 싶어도 스타일이 너무 뒤섞여 있음

이런 문제를 근본적으로 해결하려면 스타일의 우선순위를 체계적으로 관리할 수 있는 방법이 필요합니다. 바로 이 역할을 하는 것이 @layer입니다.

2. @layer 기본 개념

@layer를 사용하면 CSS 규칙들을 레이어(층)로 나누고, 각 레이어 간의 우선순위를 명확하게 정할 수 있습니다.

@layer reset, base, components, utilities, overrides;

레이어를 먼저 선언한 후, 각 레이어 안에 스타일을 작성합니다.

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    color: #111827;
  }
}

@layer components {
  .btn {
    padding: 12px 24px;
    border-radius: 9999px;
    font-weight: 600;
  }
  
  .card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 15px rgb(0 0 0 / 0.1);
    padding: 24px;
  }
}

@layer utilities {
  .text-center { text-align: center; }
}

3. @layer의 우선순위 규칙

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

옆커폰

레이어는 선언된 순서대로 우선순위가 정해집니다. 위 예시에서는 reset → base → components → utilities → overrides 순으로 선언했기 때문에, overrides 레이어가 가장 높은 우선순위를 가집니다.

특정 상황에서만 예외적으로 스타일을 바꾸고 싶다면 overrides 레이어에 작성하면 됩니다. 이렇게 하면 기존 컴포넌트 스타일을 건드리지 않고도 예외 처리를 할 수 있습니다.

4. 실무에서 많이 사용하는 @layer 구조

실제 프로젝트에서 자주 사용하는 구조는 다음과 같습니다:

@layer reset, tokens, base, components, utilities;

reset: 브라우저 기본 스타일 초기화
tokens: 색상, 간격, 폰트 등 디자인 토큰 (커스텀 프로퍼티)
base: 기본 HTML 요소 스타일
components: 재사용 가능한 컴포넌트 스타일
utilities: 단일 목적 유틸리티 클래스

5. @scope로 컴포넌트 스타일 격리하기

@scope는 특정 영역 안에서만 스타일이 적용되도록 제한할 수 있게 해줍니다.

@scope (.product-card) {
  :scope {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: white;
  }
  
  .image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  
  .content {
    padding: 20px;
  }
  
  .title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
  }
}