CSS @when 규칙 마스터하기: 동적 웹 디자인을 위한 조건부 스타일 적용

CSS 조건부 규칙 모듈 레벨 5(CSS Conditional Rules Module Level 5) 명세의 일부인 CSS @when 규칙은 특정 조건에 따라 조건부로 스타일을 적용하는 강력한 방법을 제공합니다. 이는 기존의 미디어 쿼리를 뛰어넘어 컨테이너 크기, 사용자 정의 속성, 심지어 요소의 상태에 기반하여 스타일링을 더욱 세밀하게 제어할 수 있게 해줍니다. 이를 통해 웹 디자인의 반응성과 적응성을 크게 향상시켜 다양한 기기와 컨텍스트에서 더 나은 사용자 경험을 제공할 수 있습니다.

@when 규칙의 기본 원리 이해하기

핵심적으로 @when 규칙은 특정 조건이 충족될 때만 CSS 스타일 블록을 실행하는 메커니즘을 제공합니다. 이는 프로그래밍 언어의 if 문과 유사합니다. 구문을 분석해 보겠습니다:

@when condition {
  /* 조건이 참일 때 적용할 CSS 규칙 */
}

condition은 다음을 포함한 다양한 요소를 기반으로 할 수 있습니다:

• 컨테이너 쿼리: 뷰포트가 아닌 포함하는 요소의 크기에 따라 요소를 스타일링합니다.
• 사용자 정의 상태: 사용자 상호작용이나 애플리케이션 상태에 반응합니다.
• CSS 변수: CSS 사용자 정의 속성의 값에 따라 스타일을 적용합니다.
• 범위 쿼리: 값이 특정 범위 내에 있는지 확인합니다.

@when의 강력함은 진정한 컴포넌트 기반 스타일링을 생성하는 능력에 있습니다. 컴포넌트 내에 스타일링 로직을 캡슐화하고, 주변 페이지 레이아웃과 상관없이 해당 컴포넌트가 특정 기준을 충족할 때만 스타일이 적용되도록 할 수 있습니다.

@when과 함께 컨테이너 쿼리 사용하기

컨테이너 쿼리는 반응형 디자인의 판도를 바꾸는 기술입니다. 이를 통해 요소는 뷰포트 너비뿐만 아니라 부모 컨테이너의 크기에 따라 스타일을 조정할 수 있습니다. 이는 더 유연하고 재사용 가능한 컴포넌트를 가능하게 합니다. 좁은 사이드바에 배치될 때와 넓은 메인 콘텐츠 영역에 배치될 때 다르게 표시되는 카드 컴포넌트를 상상해 보세요. @when 규칙은 이를 매우 간단하게 만듭니다.

기본 컨테이너 쿼리 예제

먼저, 컨테이너를 선언해야 합니다. 이는 container-type 속성을 사용하여 수행할 수 있습니다:

.container {
  container-type: inline-size;
}

inline-size는 컨테이너가 인라인 크기(가로 쓰기 모드에서는 너비, 세로 쓰기 모드에서는 높이)에 따라 쿼리될 수 있도록 합니다. 두 차원 모두를 쿼리하려면 size를 사용하거나, 쿼리 컨테이너를 생성하지 않으려면 normal을 사용할 수도 있습니다.

이제 @container(종종 @when과 함께 사용됨)를 사용하여 컨테이너의 크기에 따라 스타일을 적용할 수 있습니다:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

이 예제에서 .card의 레이아웃은 컨테이너의 너비에 따라 변경됩니다. 컨테이너의 너비가 300px 이상일 때 카드는 이미지와 텍스트를 나란히 표시합니다. 더 좁을 때는 수직으로 쌓입니다.

@when을 사용하여 동일한 결과를 얻는 방법은 다음과 같습니다. 브라우저 지원 및 코딩 선호도에 따라 @container와 결합될 수 있습니다(@when은 컨테이너 크기 이외의 시나리오에서 더 많은 유연성을 제공하기 때문입니다):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

이 경우, `card-container`는 `@container`로 할당된 컨테이너 이름이며, `@when`의 `container(card-container)`는 지정된 컨테이너 컨텍스트가 활성 상태인지 확인합니다. 참고: `container()` 함수 및 정확한 구문에 대한 지원은 브라우저 및 버전에 따라 다를 수 있습니다. 구현하기 전에 브라우저 호환성 표를 참조하십시오.

실용적인 국제적 예제

• 전자상거래 상품 목록: 카테고리 페이지 그리드에서 사용 가능한 공간에 따라 상품 목록을 다르게 표시합니다. 작은 컨테이너는 상품 이미지와 가격만 표시할 수 있지만, 큰 컨테이너는 간단한 설명과 평점을 포함할 수 있습니다. 이는 다양한 인터넷 속도와 기기 유형을 가진 여러 지역에서 유용하며, 개발도상국의 저대역폭 모바일 연결과 고사양 데스크톱 모두에서 최적화된 경험을 제공할 수 있습니다.
• 뉴스 기사 요약: 뉴스 웹사이트 홈페이지에 표시되는 기사 요약의 길이를 컨테이너의 너비에 따라 조정합니다. 좁은 사이드바에서는 제목과 몇 단어만 표시하고, 메인 콘텐츠 영역에서는 더 자세한 요약을 제공합니다. 일부 언어(예: 독일어)는 단어와 구문이 더 긴 경향이 있어 요약에 필요한 공간에 영향을 미치는 언어적 차이를 고려하십시오.
• 대시보드 위젯: 컨테이너 크기에 따라 대시보드 위젯의 레이아웃을 수정합니다. 작은 위젯은 간단한 차트를 표시할 수 있지만, 큰 위젯은 상세한 통계와 컨트롤을 포함할 수 있습니다. 데이터 시각화에 대한 문화적 선호도를 고려하여 특정 사용자의 기기와 화면 크기에 맞게 대시보드 경험을 조정하십시오. 예를 들어, 특정 문화권에서는 파이 차트보다 막대 차트를 선호할 수 있습니다.

@when과 사용자 정의 상태 함께 사용하기

사용자 정의 상태를 사용하면 요소에 대한 고유한 상태를 정의하고 해당 상태에 따라 스타일 변경을 트리거할 수 있습니다. 이는 :hover 및 :active와 같은 기존 CSS 가상 클래스로는 충분하지 않은 복잡한 웹 애플리케이션에서 특히 유용합니다. 사용자 정의 상태는 아직 브라우저 구현에서 발전 중이지만, @when 규칙은 지원이 성숙해지면 이러한 상태에 따라 스타일을 제어할 수 있는 유망한 방법을 제공합니다.

개념적 예제 (CSS 변수를 사용하여 상태 시뮬레이션)

네이티브 사용자 정의 상태 지원이 아직 보편화되지 않았기 때문에 CSS 변수와 JavaScript를 사용하여 시뮬레이션할 수 있습니다.

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

이 예제에서는 CSS 변수 --is-active를 사용하여 요소의 상태를 추적합니다. JavaScript 코드는 요소가 클릭될 때 이 변수의 값을 토글합니다. 그런 다음 @when 규칙은 --is-active가 1일 때 다른 배경색을 적용합니다. 이것은 임시방편이지만, 상태에 따른 조건부 스타일링의 개념을 보여줍니다.

진정한 사용자 정의 상태의 잠재적인 미래 사용 사례

진정한 사용자 정의 상태가 구현되면 구문은 다음과 같을 수 있습니다 (참고: 이것은 추측이며 제안에 기반합니다):

.my-element {
  /* 초기 스타일 */
}

@when :state(my-custom-state) {
  .my-element {
    /* 사용자 정의 상태가 활성일 때의 스타일 */
  }
}

그런 다음 JavaScript를 사용하여 사용자 정의 상태를 설정하고 해제합니다:

element.states.add('my-custom-state'); // 상태 활성화
element.states.remove('my-custom-state'); // 상태 비활성화

이를 통해 애플리케이션 로직에 기반한 매우 세밀한 스타일링 제어가 가능해집니다.

국제화 및 현지화 고려 사항

• 오른쪽에서 왼쪽으로 쓰는 언어(RTL): 사용자 정의 상태를 사용하여 아랍어 및 히브리어와 같은 RTL 언어에 맞게 컴포넌트의 레이아웃과 스타일링을 조정할 수 있습니다. 예를 들어, 특정 RTL 상태가 활성일 때 탐색 메뉴의 레이아웃을 미러링합니다.
• 접근성: 사용자 정의 상태를 사용하여 포커스된 요소를 강조 표시하거나 사용자 상호작용 상태가 트리거될 때 대체 텍스트 설명을 제공하는 등 향상된 접근성 기능을 제공합니다. 이러한 상태 변경이 보조 기술에 효과적으로 전달되도록 하십시오.
• 문화적 디자인 선호도: 문화적 디자인 선호도에 따라 컴포넌트의 시각적 모양을 조정합니다. 예를 들어, 사용자의 로케일이나 언어에 따라 다른 색상 구성표나 아이콘 세트를 사용합니다.

CSS 변수 및 범위 쿼리 작업

@when 규칙은 CSS 변수와 함께 사용하여 동적이고 사용자 정의 가능한 스타일을 만들 수도 있습니다. CSS 변수 값에 따라 스타일을 적용하여 사용자가 코드를 작성하지 않고도 웹사이트의 모양을 사용자 정의할 수 있도록 할 수 있습니다.

예제: 테마 전환

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

이 예제에서 --theme-color 변수는 본문의 배경색을 제어합니다. 이 값이 #000으로 설정되면 @when 규칙이 --text-color를 #fff로 변경하여 어두운 테마를 만듭니다. 사용자는 JavaScript를 사용하거나 사용자 스타일시트에서 다른 CSS 변수를 설정하여 --theme-color의 값을 변경할 수 있습니다.

범위 쿼리

범위 쿼리를 사용하면 값이 특정 범위 내에 있는지 확인할 수 있습니다. 이는 더 복잡한 조건부 스타일을 만드는 데 유용할 수 있습니다.

@when (400px <= width <= 800px) {
  .element {
    /* 너비가 400px과 800px 사이일 때 적용되는 스타일 */
  }
}

그러나 @when 내에서의 범위 쿼리에 대한 정확한 구문 및 지원은 다를 수 있습니다. 최신 명세 및 브라우저 호환성 표를 참조하는 것이 좋습니다. 컨테이너 쿼리는 종종 크기 기반 조건에 대해 더 강력하고 잘 지원되는 대안을 제공합니다.

글로벌 접근성 및 사용자 기본 설정

• 고대비 테마: CSS 변수와 @when 규칙을 사용하여 시각 장애가 있는 사용자를 위한 고대비 테마를 구현합니다. 사용자가 특정 요구 사항을 충족하도록 색상 팔레트와 글꼴 크기를 사용자 정의할 수 있도록 허용합니다.
• 움직임 줄이기: 사용자가 운영 체제에서 "움직임 줄이기" 설정을 활성화했을 때 CSS 변수를 사용하여 애니메이션과 전환을 비활성화함으로써 사용자의 선호도를 존중합니다. prefers-reduced-motion 미디어 쿼리는 @when과 결합하여 더 정밀한 제어를 할 수 있습니다.
• 글꼴 크기 조정: 사용자가 CSS 변수를 사용하여 웹사이트의 글꼴 크기를 조정할 수 있도록 합니다. @when 규칙을 사용하여 다양한 글꼴 크기에 맞게 요소의 레이아웃과 간격을 조정하여 모든 사용자의 가독성과 사용성을 보장합니다.

모범 사례 및 고려 사항

• 브라우저 호환성: @when 규칙은 아직 비교적 새롭고 브라우저 지원이 보편적이지 않습니다. 프로덕션 환경에서 사용하기 전에 항상 브라우저 호환성 표를 확인하십시오. 이전 브라우저를 위해 폴리필이나 대체 솔루션을 고려하십시오. 2024년 후반 기준으로 브라우저 지원은 여전히 제한적이므로, @container에 크게 의존하고 JavaScript 대체(fallback)와 함께 CSS 변수를 신중하게 사용하는 것이 종종 더 실용적인 접근 방식입니다.
• 명시도(Specificity): @when 규칙을 사용할 때 CSS 명시도를 염두에 두십시오. 조건부 스타일이 충돌하는 다른 스타일을 재정의할 만큼 충분히 구체적인지 확인하십시오.
• 유지 관리성: CSS 변수와 주석을 사용하여 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만드십시오. 이해하고 디버깅하기 어려운 지나치게 복잡한 조건부 규칙을 만들지 마십시오.
• 성능: @when 규칙은 파싱해야 하는 CSS의 양을 줄여 성능을 향상시킬 수 있지만, 신중하게 사용하는 것이 중요합니다. 조건부 규칙을 과도하게 사용하면 특히 구형 기기에서 성능에 부정적인 영향을 미칠 수 있습니다.
• 점진적 향상: 브라우저가 @when 규칙을 지원하지 않더라도 웹사이트가 잘 작동하도록 점진적 향상을 사용하십시오. 모든 사용자에게 기본적이고 기능적인 경험을 제공한 다음, 이 기능을 지원하는 브라우저에 대해 점진적으로 향상시키십시오.

조건부 스타일링의 미래

@when 규칙은 CSS에서 중요한 진전을 나타냅니다. 이는 더 표현력 있고 동적인 스타일링을 가능하게 하여 더 복잡하고 반응형인 웹 애플리케이션의 길을 열어줍니다. 브라우저 지원이 개선되고 명세가 발전함에 따라 @when 규칙은 웹 개발자에게 필수적인 도구가 될 가능성이 높습니다.

CSS 후디니(Houdini)의 추가적인 발전과 사용자 정의 상태의 표준화는 @when의 기능을 더욱 향상시켜 스타일링에 대한 훨씬 더 세밀한 제어와 JavaScript와의 원활한 통합을 가능하게 할 것입니다.

결론

CSS @when 규칙은 컨테이너 쿼리, 사용자 정의 상태, CSS 변수 및 기타 기준에 따라 조건부로 스타일을 적용하는 강력하고 유연한 방법을 제공합니다. 브라우저 지원은 아직 발전 중이지만, 다양한 컨텍스트와 사용자 선호도에 적응하는 동적이고 반응형인 웹 디자인을 만들기 위한 유용한 도구입니다. @when 규칙의 기본 원리를 이해하고 모범 사례를 따르면 그 잠재력을 최대한 활용하고 진정으로 뛰어난 사용자 경험을 만들 수 있습니다. 호환성과 최적의 성능을 보장하기 위해 항상 다른 브라우저와 기기에서 철저하게 테스트하는 것을 잊지 마십시오.

웹이 계속 발전함에 따라 @when과 같은 새로운 CSS 기능을 수용하는 것은 시대에 앞서 나가고 전 세계 고객에게 최첨단 웹 경험을 제공하는 데 매우 중요합니다.