(BUSAN.SASHIMI)
terminal
Weekly Digest // STYLING — Week 23-2026
paletteWeekly Report

VoidZero, Cloudflare에 합류 — 2026년 23주 CSS 및 스타일링

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 23-2026
툴링

VoidZero, Cloudflare에 합류

Vite, Vitest, Rolldown, Oxc를 만든 Evan You의 VoidZero가 Cloudflare에 인수됩니다. 모든 프로젝트는 MIT 라이선스 오픈 소스로 유지됩니다. 2023년 이후 팀은 Vite 8의 기본 번들러가 된 Rust 기반 Rolldown, ESLint 대비 50~100배 빠른 타입 인식 린터 Oxlint, Prettier 대비 30배 빠른 Oxfmt, 그리고 Vite+를 출시했습니다. Cloudflare가 Vite Environment API와 플러그인 협업에 깊이 관여해온 점이 인수의 자연스러운 배경이 되었습니다. 팀은 오픈 소스 프로젝트를 계속 이끌면서 Vite 앱 배포 플랫폼으로서 Cloudflare를 개선하고, AI 에이전트용 툴링에도 집중할 예정입니다.

VoidZero, Cloudflare에 합류
Read Articlearrow_forward
Video · 애니메이션

이제 CSS로 페이지 간 애니메이션 가능

크로스 문서 View Transitions를 사용하면 별도의 HTML 페이지 간에 CSS만으로 애니메이션을 적용할 수 있습니다. @view-transition 규칙에 navigation: auto를 설정하면 기본 크로스페이드가 활성화되며, ::view-transition-group, ::view-transition-old, ::view-transition-new 의사 요소로 slide-in, slide-out 같은 커스텀 keyframe 애니메이션을 정의할 수 있습니다. view-transition-name으로 명명된 전환 그룹을 만들면 nav bar는 고정한 채 메인 콘텐츠만 슬라이드하는 식으로 특정 요소를 분리할 수 있으며, 공유 이미지 전환으로 한 페이지의 이미지를 다른 위치로 부드럽게 이동시킬 수 있습니다. 접근성을 위해 prefers-reduced-motion: no-preference 미디어 쿼리 안에 전환 설정을 넣는 것이 권장됩니다. 현재 Chrome, Edge, Safari에서 지원되며 Firefox는 미지원이므로 점진적 향상으로 다루어야 합니다.

AI_INFOGRAPHIC
이제 CSS로 페이지 간 애니메이션 가능 — infographicWATCH_VIDEOarrow_forward
Video · 레이아웃

모든 프로젝트에서 사용하는 CSS 패턴 3가지

Kevin Powell이 모든 프로젝트에서 활용하는 세 가지 CSS 레이아웃 프리미티브를 설명합니다. Stack은 display: flex에 flex-direction: column과 --stack-gap 커스텀 프로퍼티로 컴포넌트별 간격을 쉽게 오버라이드할 수 있습니다. Prose 패턴은 lobotomized owl 선택자(* + *)에 em 단위로 margin-block-start를 적용해 폰트 크기에 맞춰 간격이 조정되며, Tailwind의 prose 플러그인과 동일한 방식입니다. Pile은 display: grid에 grid-template-areas: pile과 place-items: center를 사용해 모든 자식을 같은 셀에 쌓아 position: absolute 없이 텍스트-이미지 오버레이와 배지 배치를 구현하면서도 grid 컨텍스트 안에서 z-index를 활용할 수 있습니다.

AI_INFOGRAPHIC
모든 프로젝트에서 사용하는 CSS 패턴 3가지 — infographicWATCH_VIDEOarrow_forward
Article · 애니메이션READ TIME: 4m

CSS Toggle Transition의 원점으로 돌아가기

Christopher Kirk-Nielsen은 아코디언 chevron이 닫힐 때 되감기 대신 360도 완전 회전을 완료하도록 CSS만으로 구현하는 방법을 탐구합니다. 최종 해결책은 등록된 커스텀 프로퍼티로 열린 상태를 유지하고, step-end 타이밍 함수와 음수 transition-delay를 결합해 원치 않는 스냅백 전환을 억제하는 방식입니다. 이 기법은 Chromium과 WebKit(Safari 18.6 테스트)에서 작동하지만 Firefox에서는 닫힘 전환 자체를 건너뛰어 실패하며, Firefox용 폴백은 표준 되감기 동작으로 되돌립니다. 발행 후 커뮤니티에서 제시한 크로스 브라우저 해결책 두 가지도 소개합니다: linear() 이징으로 닫힘 이징을 역전시키는 방법과 chevron의 대칭성을 이용해 mirror transform을 적용하는 방법입니다.

READ_FULL_LOGarrow_forward
Article · CSS 속성READ TIME: 10m

CSS @property 도입 장벽 낮추기

CSS @property는 Baseline이 된 지 거의 2년이 지났지만, 대부분의 코드베이스는 여전히 등록되지 않은 커스텀 프로퍼티를 사용합니다. 이 글은 프로퍼티를 등록할 때 syntax(예: angle, color), inherits, initial-value를 선언하면 브라우저가 linear-gradient 안의 --angle 같은 커스텀 프로퍼티에 transition을 부드럽게 보간할 수 있는 이유를 설명합니다. 저자는 기존 CSS 파일을 스캔해 검토 가능한 첫 번째 단계로 보수적인 @property 등록이 담긴 properties.css 초안을 생성하는 실험적 CLI 도구 css-property-type-validator generate를 소개합니다. 주요 주의사항도 다룹니다: transition-behavior: allow-discrete는 미등록 프로퍼티의 부드러운 보간을 지원하지 않으며, initial-value는 계산적으로 독립적이어야 합니다(길이에는 0이 아닌 0px 필요).

READ_FULL_LOGarrow_forward
Article · 뉴스레터READ TIME: 5m

Smashing Newsletter 561호: 새로운 CSS 기법

17만 6,289명의 구독자에게 발송된 Smashing Magazine 561번째 뉴스레터는 유용한 CSS 기법과 새 기능들을 정리합니다. 주요 내용: :nth of 선택자를 활용한 조건부 폼 유효성 검사, 반응형 이미지의 sizes="auto"(히어로 이미지는 여전히 명시적 크기 필요), 모바일 노치와 Dynamic Island 레이아웃을 위한 safe area inset, 컬러 이모지와 단색 이모지 렌더링을 제어하는 font-variant-emoji, 컨테이너 쿼리 타이포그래피 시스템, Chrome 145의 새 column-height 및 column-wrap 속성(가로 스크롤 대신 세로 방향으로 래핑), CMS 기반 레이아웃에서 부모 그리드 트랙을 상속하는 CSS subgrid와 CSS Masonry 비교도 다룹니다.

READ_FULL_LOGarrow_forward
Article · 색상READ TIME: 4m

CSS로 자동 생성형 실시간 색상 스케일 디자인하기

Jared White는 Bridgetown용 Willamette 테마를 위해 단일 --wll-brand-color CSS 변수에서 color-mix() 함수와 display-p3 색공간을 사용해 11단계 색상 스케일을 자동 생성하는 방법을 보여줍니다. 스케일은 브랜드 컬러를 흰색(최대 90%)과 혼합해 밝은 톤을, 검은색(최대 80%)과 혼합해 어두운 톤을 만들어 brand-05부터 brand-95까지의 값을 생성합니다. srgb(밝은 톤 과포화), oklch(너무 회색빛, 탁함), display-p3(지각적으로 정확한 명암 처리)를 비교해 색공간 선택의 근거를 제시합니다. 한계도 솔직히 다룹니다: 노란 계열은 밝은 노란색 대신 베이지가 되고, Web Awesome처럼 수동으로 설계된 팔레트가 자동 생성보다 우수하지만, 사용자는 개별 색상을 자신의 color-mix 호출로 오버라이드할 수 있습니다.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

이번 주 가장 큰 스타일링 뉴스는 Vite, Vitest, Rolldown, Oxc를 만든 Evan You의 VoidZero가 Cloudflare에 인수된 것입니다. 모든 프로젝트는 MIT 라이선스 오픈 소스로 유지됩니다. 2023년 이후 팀은 Vite 8의 기본 번들러인 Rolldown, ESLint 대비 50-100배 빠른 Oxlint, Prettier 대비 30배 빠른 Oxfmt, Vite+를 출시했습니다. Cloudflare의 Vite Environment API 투자가 인수의 자연스러운 배경이 되었으며, 팀은 오픈 소스 프로젝트를 계속 이끌면서 Cloudflare 플랫폼에서 Vite 기반 배포 및 AI 에이전트 툴링을 확장할 예정입니다.

CSS 측면에서, 크로스 문서 View Transitions가 광범위한 지원과 함께 등장했습니다. @view-transition 규칙에 navigation: auto를 설정하면 별도 HTML 페이지 간 기본 크로스페이드가 활성화되고, view-transition-name으로 명명된 전환 그룹을 만들면 요소별 slide-in, slide-out 애니메이션이 가능합니다. Chrome, Edge, Safari에서 지원되지만 Firefox는 미지원이므로 점진적 향상으로 다루어야 합니다. Smashing Newsletter 561호는 Chrome 145의 새 column-height와 column-wrap 속성, 컨테이너 쿼리 타이포그래피 시스템, 반응형 이미지용 sizes="auto", 이모지 렌더링 제어를 위한 font-variant-emoji, 노치와 Dynamic Island 레이아웃용 safe area inset 등을 정리했습니다.

CSS @property는 실용적인 도입 가이드를 통해 프로퍼티의 syntax, inherits, initial-value 등록이 linear-gradient() 내 --angle 같은 커스텀 프로퍼티 전환에서 브라우저 보간을 가능하게 하는 원리를 설명했습니다. 실험적 CLI 도구 css-property-type-validator generate는 기존 CSS 파일을 스캔해 검토 가능한 properties.css 초안을 출력합니다. color-mix()와 display-p3 색공간을 이용해 단일 --wll-brand-color에서 11단계 스케일을 자동 생성하는 색상 테마 글도 주목받았습니다. Kevin Powell의 레이아웃 프리미티브 글은 position: absolute 없이 사용할 수 있는 Stack, Prose, Pile 패턴을 상세히 설명했습니다.

Key Takeaways
  • Cloudflare가 VoidZero(Vite, Rolldown, Oxlint, Oxfmt)를 인수했습니다. 모든 프로젝트는 MIT 오픈 소스로 유지되며, Rolldown은 이미 Vite 8의 기본 번들러로 ESLint 대비 50-100배의 lint 속도를 제공합니다.
  • 크로스 문서 View Transitions는 @view-transition에 navigation: auto를 설정해 Chrome, Edge, Safari에서 사용 가능합니다. 접근성을 위해 prefers-reduced-motion으로 감싸고 Firefox에서는 점진적 향상으로 처리하십시오.
  • CSS @property는 커스텀 프로퍼티에 대한 전환 보간을 지원합니다. css-property-type-validator generate CLI를 사용하면 기존 CSS 파일에서 @property 등록 초안을 자동으로 생성할 수 있습니다.