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

Motion UI: 성능 등급 부여 React 애니메이션 라이브러리 — 2026년 30주 CSS 및 스타일링

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 30-2026
도구

Motion UI: 성능 등급 부여 React 애니메이션 라이브러리

Matt Perry가 Motion+ 멤버십을 통해 배포하는 프로덕션 급 React 애니메이션 컴포넌트 라이브러리 Motion UI를 출시했습니다. 모든 컴포넌트에는 컴포지터 전용 애니메이션에 S, 페인트 유발 애니메이션에 C를 부여하는 MotionScore 등급이 표시되어 팀이 배포 전에 렌더 비용을 즉시 파악할 수 있습니다. shadcn의 시맨틱 토큰(bg-background, --primary)을 통해 기존 디자인 시스템에 무설정 통합되며, shadcn을 사용하지 않는 경우 AI 프롬프트 빌더나 Motion AI Kit MCP로 적용할 수 있습니다. motion.theme.ts 파일 하나가 물리 기반 스프링으로 구동되는 5가지 트랜지션 퍼스낼리티(snap, ui, gentle, lively, ambient)를 중앙 관리하여, 파일 하나만 수정하면 설치된 모든 애니메이션이 사이트 전체에서 재조율됩니다. reducedMotion: “calm” 옵션도 기본 내장되어 있습니다.

Motion UI: 성능 등급 부여 React 애니메이션 라이브러리
Read Articlearrow_forward
Video · CSS 기능5:30

display: none 애니메이션 — 속성 두 개, 순수 CSS

Kevin Powell은 display: none 전환 애니메이션이 이제 정확히 두 가지 추가만으로 가능하다는 것을 보여 줍니다. 이산값 속성의 트랜지션을 허용하는 transition-behavior: allow-discrete와, 요소의 첫 번째 페인트 이전 상태를 정의하는 @starting-style입니다. 핵심 제약은 캐스케이드 순서로, @starting-style은 open 상태 규칙 뒤에 위치해야 합니다. Invoker Commands를 사용하는 <dialog>로 진입과 퇴장 애니메이션을 서로 다르게 구현하고 ::backdrop 투명도도 애니메이션하며, JavaScript는 한 줄도 필요하지 않습니다. 이 기법은 모든 모던 브라우저에서 완전히 지원됩니다.

WATCH_VIDEOarrow_forward
Article · CSS 기능READ TIME: 2m

text-fit로 세 줄 만에 반응형 ASCII 아트 구현하기

Temani Afif는 신흥 CSS 속성 text-fit — 현재 Chromium 전용 — 이 폰트 크기를 컨테이너에 맞게 스케일하여 white-space: pre와 text-fit: shrink consistent 단 두 선언으로 완전한 반응형 ASCII 아트를 구현할 수 있음을 보여 줍니다. 세 가지 스케일링 모드가 있습니다: consistent(모든 줄에 동일한 배율 적용, ASCII 그리드 구조 보존), per-line(각 줄이 독립적으로 스케일), per-line-all(마지막 줄 포함). ASCII 아트에 핵심은 consistent 모드로, 균일한 배율 없이는 그리드 정렬이 깨집니다. JavaScript도 SVG도 컨테이너 쿼리도 필요 없습니다. 브라우저 지원은 현재 Chromium으로 한정되므로 점진적 향상이나 내부 도구 용도로 활용하는 것이 적합합니다.

READ_FULL_LOGarrow_forward
Article · CSS 기능READ TIME: 3m

writing-mode는 단순 텍스트 회전이 아닌 축 재설정입니다

Mojtaba Seyedi의 CSS-Tricks 항목은 writing-mode — horizontal-tb, vertical-rl, vertical-lr, sideways-rl, sideways-lr — 가 글리프를 회전하는 것을 훨씬 넘어선다고 설명합니다. 이 속성은 현대 CSS 레이아웃 전체가 기반하는 블록 축과 인라인 축 자체를 재정의합니다. vertical-rl 적용 시 flex-direction: row는 세로로 흐르고, inline-size는 물리적 높이에 매핑되며, margin-inline-start는 상단 모서리로 해석됩니다. 상속되며 애니메이션 불가능하고, CSS Writing Modes Level 4에서 전 브라우저 지원이 완료됐습니다. 논리 속성(inline-size, padding-block-end)으로 작성된 레이아웃은 어떤 writing-mode에서도 자동으로 적응하므로, 국제화와 세로 타이포그래피가 사실상 무비용 리팩터링이 됩니다.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

이번 주 CSS & Styling 이슈는 브라우저 수렴의 실질적인 시점에 발행됩니다. 이산값 트랜지션, @starting-style, writing-mode는 모던 브라우저 전반에서 기준선을 달성했고, text-fit은 Chromium에 먼저 도착해 앞으로를 예고합니다. 한때 JavaScript 우회책이 필요했던 애니메이션·국제화·레이아웃 작업을 이제 순수 CSS로 처리할 수 있게 됐습니다.

이번 호 피처드 아이템은 Matt Perry가 Motion+ 멤버십으로 출시한 프로덕션 급 React 애니메이션 라이브러리 Motion UI입니다. 컴포지터 전용 애니메이션에 S, 페인트 유발 애니메이션에 F를 부여하는 MotionScore 등급제는 팀에 즉각적인 렌더 비용 감사를 제공하며, 하나의 motion.theme.ts 파일이 물리 기반의 5가지 트랜지션 퍼스낼리티를 중앙에서 관리해 설치된 모든 컴포넌트를 사이트 전체 단위로 재조율합니다. Motion UI는 성능과 디자인 시스템 통합을 부가 기능이 아닌 핵심 설계 원칙으로 삼은 최초의 애니메이션 라이브러리입니다.

CSS 레벨에서는 Kevin Powell이 display: none 전환 애니메이션을 단 두 줄 — transition-behavior: allow-discrete와 @starting-style 블록 — 로 구현하는 방법을 보여 주고, Mojtaba Seyedi의 CSS-Tricks 항목은 writing-mode가 단순한 타이포그래피 옵션이 아니라 Flexbox·Grid·논리 속성 전체를 재구성하는 축 재설정임을 설득력 있게 설명합니다. Temani Afif는 Chromium 전용 신흥 속성 text-fit으로 마무리를 짓는데, 세 줄의 코드만으로 반응형 ASCII 아트를 구현할 만큼 이미 강력합니다.

이번 주 콘텐츠를 종합하면, CSS는 JavaScript 스캐폴딩 없이도 점점 더 표현력 있게 진화하고 있음을 확인할 수 있습니다.

Key Takeaways
  • 모던 브라우저에서 JavaScript 없이 display: none 요소를 애니메이션하려면, 캐스케이드에서 open 상태 뒤에 @starting-style 블록을 위치시키고 transition-behavior: allow-discrete를 함께 선언하세요.
  • 애니메이션을 배포하기 전에 MotionScore 등급을 확인하세요 — 컴포지터 전용 transform·opacity는 S를 받지만, 페인트를 유발하는 속성은 C 이하로 내려가므로 신중하게 사용해야 합니다.
  • inline-size·margin-inline-start·padding-block-end 같은 논리적 CSS 속성을 채택하면 writing-mode가 바뀔 때 레이아웃이 자동으로 적응해, 국제화와 세로 타이포그래피 작업이 무비용 리팩터링이 됩니다.