light-dark(), contrast-color(), Style… — 2026년 26주 CSS 및 스타일링
CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 26-2026
article
light-dark(), contrast-color(), Style Query를 활용한 현대 CSS 테마
TAG: 테마
Una Kravets가 2026년 5월 기준 Baseline Newly Available이 된 선언적 CSS 테마 시스템을 소개합니다. 이 기법은 네 가지 기능을 조합합니다. light-dark()는 color-scheme에 따라 그림자와 glow-border 중 하나를 선택하고, contrast-color()는 WCAG 명도 대비 알고리즘으로 배경에 맞는 흑백 텍스트를 자동 결정합니다. @property는 대비 결과를 애니메이션 가능한 커스텀 속성으로 등록하고, @container style()은 oklch 상대 색상 문법으로 파생된 색조 팔레트로 분기합니다. 카드에는 --brand-color 하나만 전달하면 배경, 입체감 메커니즘, 텍스트 팔레트 전체가 자동 결정됩니다.
Manuel Matuzovic는 display: grid-lanes로 최단 열 배치를 사용하는 새 레이아웃인 CSS Grid Lanes가 시각적 순서와 DOM 순서를 본질적으로 분리해 WCAG 2.4.3 포커스 순서 기준을 위반할 수 있음을 분석합니다. flow-tolerance 속성으로 재배치 임계값을 조정할 수 있지만 40rem까지 올려도 키보드 사용자의 포커스가 예측 불가하게 이동하는 경우가 생깁니다. reading-flow: grid-rows 속성이 해결책이 될 수 있으나, Chromium 전용이며 아직 Grid Lanes에는 적용되지 않습니다. Safari는 reading-flow 없이 Grid Lanes를 이미 출시한 상태라 실질적인 접근성 공백이 존재합니다.
Polypane이 새로운 CSS random() 함수를 bokeh, 낙화하는 꽃잎, 던질 수 있는 폴라로이드, 시각 시(詩), 흔들리는 그리드, 회전하는 직사각형, 오로라 등 7가지 인터랙티브 데모로 탐구합니다. 핵심 주의점은 element-scoped 키워드(곧 per-element로 개명)를 사용하지 않으면 커스텀 속성을 참조할 때마다 새 난수가 생성된다는 점입니다. random()을 스텝 정수와 CSS if() style 쿼리와 조합하면 display 값처럼 이산적인 값에 대한 가중 random-item() 폴리필을 구현할 수 있습니다. 현재 지원 환경은 Polypane 29+와 플래그 뒤의 Chromium 148+이며, Safari 26.2+는 부분 지원, Firefox는 미지원입니다.
Bramus Van Damme가 영국 Leeds에서 열린 All Day Hey! 마지막 회에서 발표한 View Transition API의 실험적 활용을 공유합니다. 문서화된 한계를 넘어 Scroll-Driven Animations와 결합하고, MutationObserver로 전환을 자동 트리거하며, 모던 API로 Internet Explorer 스타일의 페이지 전환을 부활시키는 내용을 다뤘습니다. 슬라이드는 slidr.io에, 전체 영상은 YouTube에서 확인할 수 있습니다. Jake Archibald가 Google 퇴직 후 View Transitions를 이어받은 Bramus를 공개적으로 칭찬했다는 소식도 포함되어 있습니다.
Cassidy Williams가 CSS mask 속성과 수동으로 조정한 좌표에 맞춘 repeating-radial-gradient를 사용해 동심원 링 텍스트 마스크를 만드는 과정을 설명합니다. 스트라이프 두께는 @property로 등록한 --stripes 커스텀 속성으로 제어하는데, 브라우저가 gradient를 이미지로 처리해 보간하지 못하기 때문에 CSS 애니메이션을 가능하게 하려면 이 방식이 필요합니다. 크로스 브라우저 조정도 상당히 필요했는데, gradient 내 rem 단위가 Firefox를 망가뜨렸고 Safari 애니메이션은 픽셀 단위의 미세 조정이 필요했습니다. CodePen 데모와 가독성 높은 코드 및 단축 난독화 형태의 비교도 포함되어 있습니다.
Patrick Brosset가 Chromium 버그 트래커 투표수, Interop 제안, State of CSS 2025 설문, 소셜 미디어 여론 조사 등 네 가지 출처에서 SVG 관련 개발자 불편 사항을 종합합니다. 모든 출처에서 가장 뚜렷한 신호는, img나 background-image로 로드한 외부 SVG 에셋에 CSS 커스텀 속성이나 currentColor를 적용할 수 없다는 점입니다. CSS Linked Parameters가 스펙 해결책이며 Firefox는 이미 출시, Chromium도 구현 중입니다. 그 외 주요 문제로는 SVG 내 z-index 및 calc() 미지원, 불안정한 텍스트 줄바꿈, 필터 성능, foreignObject 불일치, stroke-alignment 미구현 등이 있습니다.
Figma Motion 속성 강좌 — 30분 만에 Animated Promo Video 만들기
DesignCourse가 Config 2026에서 발표된 타임라인 기반 애니메이션 시스템인 Figma Motion을 사용해 처음부터 애니메이션 홍보 영상을 제작하는 과정을 설명합니다. 키프레임 배치, 이징 곡선(ease-in, ease-out, 커스텀 cubic bezier), 텍스트 등장 애니메이션을 위한 CSS 마스크 방식의 clip-content 프레임, 자연스러운 타이밍을 위한 요소 스태거링을 다룹니다. Config 2026에서 함께 발표된 Figma Shaders — GLSL 유사 쉐이더 효과를 적용하고 타임라인에서 파라미터를 직접 애니메이션할 수 있는 새로운 fill 유형 — 도 소개합니다. 완성된 결과물은 60fps MP4(유료 Figma 플랜 필요)로 내보낼 수 있습니다.
light-dark(), contrast-color(), Style Query를 활용한 현대 CSS 테마
Una Kravets가 2026년 5월 기준 Baseline Newly Available이 된 선언적 CSS 테마 시스템을 소개합니다. 이 기법은 네 가지 기능을 조합합니다. light-dark()는 color-scheme에 따라 그림자와 glow-border 중 하나를 선택하고, contrast-color()는 WCAG 명도 대비 알고리즘으로 배경에 맞는 흑백 텍스트를 자동 결정합니다. @property는 대비 결과를 애니메이션 가능한 커스텀 속성으로 등록하고, @container style()은 oklch 상대 색상 문법으로 파생된 색조 팔레트로 분기합니다. 카드에는 --brand-color 하나만 전달하면 배경, 입체감 메커니즘, 텍스트 팔레트 전체가 자동 결정됩니다.
Figma Motion 속성 강좌 — 30분 만에 Animated Promo Video 만들기
DesignCourse가 Config 2026에서 발표된 타임라인 기반 애니메이션 시스템인 Figma Motion을 사용해 처음부터 애니메이션 홍보 영상을 제작하는 과정을 설명합니다. 키프레임 배치, 이징 곡선(ease-in, ease-out, 커스텀 cubic bezier), 텍스트 등장 애니메이션을 위한 CSS 마스크 방식의 clip-content 프레임, 자연스러운 타이밍을 위한 요소 스태거링을 다룹니다. Config 2026에서 함께 발표된 Figma Shaders — GLSL 유사 쉐이더 효과를 적용하고 타임라인에서 파라미터를 직접 애니메이션할 수 있는 새로운 fill 유형 — 도 소개합니다. 완성된 결과물은 60fps MP4(유료 Figma 플랜 필요)로 내보낼 수 있습니다.
Manuel Matuzovic는 display: grid-lanes로 최단 열 배치를 사용하는 새 레이아웃인 CSS Grid Lanes가 시각적 순서와 DOM 순서를 본질적으로 분리해 WCAG 2.4.3 포커스 순서 기준을 위반할 수 있음을 분석합니다. flow-tolerance 속성으로 재배치 임계값을 조정할 수 있지만 40rem까지 올려도 키보드 사용자의 포커스가 예측 불가하게 이동하는 경우가 생깁니다. reading-flow: grid-rows 속성이 해결책이 될 수 있으나, Chromium 전용이며 아직 Grid Lanes에는 적용되지 않습니다. Safari는 reading-flow 없이 Grid Lanes를 이미 출시한 상태라 실질적인 접근성 공백이 존재합니다.
Polypane이 새로운 CSS random() 함수를 bokeh, 낙화하는 꽃잎, 던질 수 있는 폴라로이드, 시각 시(詩), 흔들리는 그리드, 회전하는 직사각형, 오로라 등 7가지 인터랙티브 데모로 탐구합니다. 핵심 주의점은 element-scoped 키워드(곧 per-element로 개명)를 사용하지 않으면 커스텀 속성을 참조할 때마다 새 난수가 생성된다는 점입니다. random()을 스텝 정수와 CSS if() style 쿼리와 조합하면 display 값처럼 이산적인 값에 대한 가중 random-item() 폴리필을 구현할 수 있습니다. 현재 지원 환경은 Polypane 29+와 플래그 뒤의 Chromium 148+이며, Safari 26.2+는 부분 지원, Firefox는 미지원입니다.
Bramus Van Damme가 영국 Leeds에서 열린 All Day Hey! 마지막 회에서 발표한 View Transition API의 실험적 활용을 공유합니다. 문서화된 한계를 넘어 Scroll-Driven Animations와 결합하고, MutationObserver로 전환을 자동 트리거하며, 모던 API로 Internet Explorer 스타일의 페이지 전환을 부활시키는 내용을 다뤘습니다. 슬라이드는 slidr.io에, 전체 영상은 YouTube에서 확인할 수 있습니다. Jake Archibald가 Google 퇴직 후 View Transitions를 이어받은 Bramus를 공개적으로 칭찬했다는 소식도 포함되어 있습니다.
Cassidy Williams가 CSS mask 속성과 수동으로 조정한 좌표에 맞춘 repeating-radial-gradient를 사용해 동심원 링 텍스트 마스크를 만드는 과정을 설명합니다. 스트라이프 두께는 @property로 등록한 --stripes 커스텀 속성으로 제어하는데, 브라우저가 gradient를 이미지로 처리해 보간하지 못하기 때문에 CSS 애니메이션을 가능하게 하려면 이 방식이 필요합니다. 크로스 브라우저 조정도 상당히 필요했는데, gradient 내 rem 단위가 Firefox를 망가뜨렸고 Safari 애니메이션은 픽셀 단위의 미세 조정이 필요했습니다. CodePen 데모와 가독성 높은 코드 및 단축 난독화 형태의 비교도 포함되어 있습니다.
Patrick Brosset가 Chromium 버그 트래커 투표수, Interop 제안, State of CSS 2025 설문, 소셜 미디어 여론 조사 등 네 가지 출처에서 SVG 관련 개발자 불편 사항을 종합합니다. 모든 출처에서 가장 뚜렷한 신호는, img나 background-image로 로드한 외부 SVG 에셋에 CSS 커스텀 속성이나 currentColor를 적용할 수 없다는 점입니다. CSS Linked Parameters가 스펙 해결책이며 Firefox는 이미 출시, Chromium도 구현 중입니다. 그 외 주요 문제로는 SVG 내 z-index 및 calc() 미지원, 불안정한 텍스트 줄바꿈, 필터 성능, foreignObject 불일치, stroke-alignment 미구현 등이 있습니다.
이번 주 CSS는 테마, 창의적 효과, 접근성, 도구 등 여러 영역에서 중요한 발전이 있었습니다. Una Kravets는 2026년 5월에 Baseline Newly Available이 된 완전 선언적 테마 시스템을 소개했습니다. light-dark(), contrast-color(), @property, @container style() 쿼리를 조합하고 oklch 상대 색상 문법을 사용해 단 하나의 --brand-color 커스텀 속성에서 전체 팔레트를 도출합니다. Bramus Van Damme는 All Day Hey! 컨퍼런스에서 View Transition API와 Scroll-Driven Animations, MutationObserver 기반 트리거를 실험적으로 결합하는 발표를 선보였습니다.
창의적 CSS 측면에서 Polypane은 7개의 순수 CSS 데모로 새로운 CSS random() 함수(플래그 뒤 Chromium 148+, Polypane 29+)를 탐구했습니다. 핵심 주의사항은 element-scoped 키워드(곧 per-element로 개명) 없이는 커스텀 속성 참조마다 random()이 재평가된다는 점입니다. Cassidy Williams는 @property로 등록한 커스텀 속성을 활용해 repeating-radial-gradient 마스크를 부드럽게 애니메이션하는 기법을 소개했으나, rem 단위가 Firefox를 깨뜨리고 Safari는 픽셀 수준의 조정이 필요한 등 크로스 브라우저 튜닝이 필요했습니다.
접근성 분야에서는 두 편의 글이 주목받았습니다. Manuel Matuzovic는 CSS Grid Lanes(display: grid-lanes)의 열 균형 알고리즘이 시각적 순서와 DOM 순서를 분리해 WCAG 2.4.3 포커스 순서를 위반한다는 사실을 밝혔습니다. 해결책인 reading-flow: grid-rows는 Chromium 전용이며 아직 Grid Lanes에 적용되지 않은 반면, Safari는 이미 reading-flow 없이 Grid Lanes를 출시한 상태입니다. Patrick Brosset의 SVG 분석은 네 가지 출처를 걸쳐 외부 SVG(img로 로드)에 CSS 커스텀 속성을 적용할 수 없다는 공통 최대 불편 사항을 확인했으며, CSS Linked Parameters(Firefox에서 이미 출시)가 스펙 해결책임을 밝혔습니다.
Key Takeaways
CSS Grid Lanes가 reading-flow 지원 없이 Safari에 출시되어 WCAG 2.4.3 포커스 순서 위반이 실제로 발생하고 있습니다. reading-flow가 모든 브라우저에 도입될 때까지 모든 Grid Lanes 레이아웃을 키보드로 테스트하고 높은 flow-tolerance 값을 필수로 사용하세요.
Una Kravets의 light-dark() + contrast-color() + @container style() 테마 스택이 이제 Baseline Newly Available입니다. 하나의 --brand-color만으로 배경, 입체감, 전체 텍스트 팔레트를 JavaScript 없이 구현할 수 있습니다.
CSS random()이 발전 중(플래그 뒤 Chromium 148+, Polypane 29+)이지만, 커스텀 속성 참조마다 재평가되는 현상을 방지하려면 element-scoped/per-element 키워드가 필수입니다. Safari와 Firefox 지원은 아직 미완성입니다.
