Squash and Stretch: 디즈니 최초 애니메이션 원칙을 웹에 적용하기 — 2026년 16주 CSS 및 스타일링
CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 16-2026
article
Squash and Stretch: 디즈니 최초 애니메이션 원칙을 웹에 적용하기
TAG: 애니메이션
Josh W. Comeau가 디즈니의 스쿼시-앤-스트레치 애니메이션 원칙을 SVG 마이크로 인터랙션에 적용하는 방법을 안내합니다. 핵심은 CSS path() 함수와 d 속성 전환을 활용한 화살표 아이콘 애니메이션이며, 2026년 4월 현재 Safari는 SVG path 요소의 CSS transition을 지원하지 않아 브라우저 커버리지가 약 79%에 그친다는 점을 솔직하게 짚습니다. 크로스 브라우저 대안으로는 Web Animations API를 기반으로 별도 스레드에서 동작하는 Motion 라이브러리를 사용합니다. 여기에 spring physics(stiffness: 300, damping: 12)를 적용해 탄성감을 더하고, 일반적인 hover 상태 기반이 아닌 이벤트 기반 방식으로 전환해 pointerenter 시 150ms 동안만 스트레치를 유지하는 독특한 효과를 만듭니다. 포스트 말미에는 transform-origin: center bottom과 CSS 커스텀 프로퍼티를 활용한 바운싱 볼 플레이그라운드도 포함되어 있습니다.
Jeremy Wagner의 2026년 3월 Baseline 다이제스트는 대규모 상호운용성 마일스톤 달성을 보고합니다. 신규 지원(Newly available) 기능으로는 MathML 렌더링을 위한 font-family의 math 값, 세밀한 타이포그래피 제어를 위한 text-indent: each-line 및 text-indent: hanging 키워드, HTTP/3 기반의 저지연 양방향 통신 WebTransport가 포함됩니다. 광범위 지원(Widely available) — 30개월 상호운용성 후 폴리필 없이 프로덕션에서 안전하게 사용 가능한 — CSS 기능으로는 지연 로드 시 레이아웃 이동 방지를 위한 contain-intrinsic-size, 커스텀 목록 마커를 위한 @counter-style, hyphens 및 hyphenate-character 속성, 해상도 인식 CSS 이미지를 위한 image-set(), overflow 미디어 쿼리, update 미디어 피처, CSS subgrid 등이 있습니다. 또한 Rachel Andrew의 Web Day Out 발표에서 다룬 실용적인 Baseline 타겟 선정 전략도 소개합니다.
Ben Frain이 네이티브 dialog 요소를 기반으로 in/out 전환이 모두 동작하는 React 모달을 구축하는 복잡한 과제를 다룹니다. 진입 전환은 @starting-style을 사용해 DOM 삽입 전 시각 상태(transform: scale(0.8); opacity: 0)를 선언하여 CSS가 해당 상태에서 보간할 수 있게 합니다. 종료 전환은 display와 overlay 속성을 전환해야 하며, 이를 위해 transition 선언에 allow-discrete가 필수입니다. Safari의 경우 dialog를 닫으면 inset 값이 초기화되어 요소가 튀는 버그가 있으며, inset: 0; position: fixed 규칙으로 해결합니다. 배경 클릭 해제는 Chromium에서 closedby="any" 속성을 사용하지만 Safari에서는 내부 div 래퍼 전략이 필요합니다. 스타일링은 dialog 요소에 직접 적용되는 --padding, --radii, --transitionSpeed 등의 CSS 커스텀 프로퍼티로 노출됩니다.
GSAP 3.15에서 새로운 tween 레벨 속성 easeReverse가 추가되었습니다. 재생 헤드를 역방향으로 이동하면 easing 커브도 반전되어 애니메이션이 어색해지는 오랜 문제를 해결합니다. easeReverse: true로 설정하면 정방향 ease를 역방향에 맞게 조정해 재사용하고, ease 문자열(예: "sine.in")을 전달하면 종료 시 완전히 다른 느낌을 적용할 수 있습니다. GSAP는 재생 헤드가 방향을 바꾼 정확한 위치에서 커브를 재계산하므로 tween 중간에 중단되어도 올바르게 처리됩니다. timeline defaults를 통해 중첩 tween까지 cascade되어 모달, 드로어, 메뉴 같은 토글 가능한 UI 패턴에 실용적입니다. 이에 따라 yoyoEase는 deprecated되며, GSAP 3.15는 내부적으로 yoyoEase를 easeReverse로 매핑하여 완전한 하위 호환성을 유지합니다.
CSS Breakpoint Unit: Pixel로 디자인하고 Fluid Accessibility를 무료로
TAG: 반응형
@propjockey/breakpoint-system npm 패키지는 tan(atan2()) CSS 기법으로 100cqw 같은 길이 값을 단위 없는 숫자로 변환해, rem이나 em 없이도 사용자의 시스템 글꼴 크기 설정에 자동으로 적응하는 픽셀 기반 브레이크포인트를 구현합니다. 최대 10개의 네임드 브레이크포인트(sm, md, lg 등)가 CSS 커스텀 프로퍼티로 등록되어 abs(), clamp(), min(), max(), calc()를 통해 정수 비트 플래그(0 또는 1)를 생성합니다. 이 플래그는 calc() 스위치, @container style() 쿼리, CSS if(style()) 함수 세 가지 작성 경로를 열어줍니다. 두 가지 접근성 문제도 자동으로 해결됩니다: 100cqw는 스크롤바 너비를 제외하므로 미디어 쿼리와 달리 시스템 스크롤바 크기가 브레이크포인트 레이아웃에 영향을 주지 않으며, tan(atan2(1rem)) 스칼라를 통해 사용자의 시스템 글꼴 크기 조정이 브레이크포인트 임계값을 비례적으로 이동시켜 em 브레이크포인트와 동일한 효과를 자동으로 냅니다. 2026년 4월 기준 라이브러리 브라우저 지원율은 91%입니다.
masonry-gridlanes-wc 소개: Native-first Masonry Web Component
TAG: 레이아웃
masonry-gridlanes-wc(v0.1.0)는 CSS Grid Level 3의 display: grid-lanes 명세와 정렬을 유지하면서 현재 프로덕션에서 masonry 레이아웃을 사용할 수 있게 해주는 light-DOM 커스텀 엘리먼트입니다. 브라우저가 grid-lanes를 네이티브로 지원하면 컴포넌트는 완전히 비켜서고, 그렇지 않은 경우 min-column-width, gap, 아이템 spanning이라는 동일한 개념 모델을 사용하는 JavaScript 폴백이 배치를 처리합니다. masonry-grid-lanes로 등록된 엘리먼트는 HTML 속성으로 설정해 열 계산과 간격을 선언적으로 처리합니다. 텍스트 위주의 카드에는 선택적 text-metrics="pretext" 속성으로 Pretext 라이브러리를 연동해 DOM 측정 없이 텍스트 메트릭만으로 높이를 계산하여 리사이즈 시 발생하는 강제 리플로우를 방지합니다. 실험적인 row 모드(mode="rows")로 수평 패킹도 지원하며, named grid line, CSS 단위 해석 등 폴백의 한계도 솔직하게 명시합니다.
Kevin Powell가 JavaScript resize observer 없이 CSS container query만으로 flex wrap 감지를 구현하는 방법을 시연합니다. 핵심 기법은 flex 자식 요소("wrap detector")에 container-type: inline-size를 지정한 뒤, 해당 요소의 너비가 75vw를 초과하는지 쿼리하는 것입니다. wrap 전에는 뷰포트의 일부만 차지하지만, wrap 후에는 전체 너비로 확장되어 임계값을 넘습니다. Powell은 이를 다중 컬럼 그리드에도 확장해 두 번째 컨테이너 레이어를 중첩하고, vw 단위를 cqw(container query width)로 교체해 뷰포트가 아닌 부모 컨테이너를 기준으로 쿼리가 평가되게 합니다. 명시적 크기가 없는 flex-wrap 요소는 축소될 수 있다는 한계도 솔직히 언급하며, 이 기법은 미디어 쿼리의 대체가 아닌 보완으로 소개됩니다. Andy Bell의 Piccalilli 아티클에서 착안한 방법입니다.
Josh W. Comeau가 디즈니의 스쿼시-앤-스트레치 애니메이션 원칙을 SVG 마이크로 인터랙션에 적용하는 방법을 안내합니다. 핵심은 CSS path() 함수와 d 속성 전환을 활용한 화살표 아이콘 애니메이션이며, 2026년 4월 현재 Safari는 SVG path 요소의 CSS transition을 지원하지 않아 브라우저 커버리지가 약 79%에 그친다는 점을 솔직하게 짚습니다. 크로스 브라우저 대안으로는 Web Animations API를 기반으로 별도 스레드에서 동작하는 Motion 라이브러리를 사용합니다. 여기에 spring physics(stiffness: 300, damping: 12)를 적용해 탄성감을 더하고, 일반적인 hover 상태 기반이 아닌 이벤트 기반 방식으로 전환해 pointerenter 시 150ms 동안만 스트레치를 유지하는 독특한 효과를 만듭니다. 포스트 말미에는 transform-origin: center bottom과 CSS 커스텀 프로퍼티를 활용한 바운싱 볼 플레이그라운드도 포함되어 있습니다.
Kevin Powell가 JavaScript resize observer 없이 CSS container query만으로 flex wrap 감지를 구현하는 방법을 시연합니다. 핵심 기법은 flex 자식 요소("wrap detector")에 container-type: inline-size를 지정한 뒤, 해당 요소의 너비가 75vw를 초과하는지 쿼리하는 것입니다. wrap 전에는 뷰포트의 일부만 차지하지만, wrap 후에는 전체 너비로 확장되어 임계값을 넘습니다. Powell은 이를 다중 컬럼 그리드에도 확장해 두 번째 컨테이너 레이어를 중첩하고, vw 단위를 cqw(container query width)로 교체해 뷰포트가 아닌 부모 컨테이너를 기준으로 쿼리가 평가되게 합니다. 명시적 크기가 없는 flex-wrap 요소는 축소될 수 있다는 한계도 솔직히 언급하며, 이 기법은 미디어 쿼리의 대체가 아닌 보완으로 소개됩니다. Andy Bell의 Piccalilli 아티클에서 착안한 방법입니다.
Jeremy Wagner의 2026년 3월 Baseline 다이제스트는 대규모 상호운용성 마일스톤 달성을 보고합니다. 신규 지원(Newly available) 기능으로는 MathML 렌더링을 위한 font-family의 math 값, 세밀한 타이포그래피 제어를 위한 text-indent: each-line 및 text-indent: hanging 키워드, HTTP/3 기반의 저지연 양방향 통신 WebTransport가 포함됩니다. 광범위 지원(Widely available) — 30개월 상호운용성 후 폴리필 없이 프로덕션에서 안전하게 사용 가능한 — CSS 기능으로는 지연 로드 시 레이아웃 이동 방지를 위한 contain-intrinsic-size, 커스텀 목록 마커를 위한 @counter-style, hyphens 및 hyphenate-character 속성, 해상도 인식 CSS 이미지를 위한 image-set(), overflow 미디어 쿼리, update 미디어 피처, CSS subgrid 등이 있습니다. 또한 Rachel Andrew의 Web Day Out 발표에서 다룬 실용적인 Baseline 타겟 선정 전략도 소개합니다.
Ben Frain이 네이티브 dialog 요소를 기반으로 in/out 전환이 모두 동작하는 React 모달을 구축하는 복잡한 과제를 다룹니다. 진입 전환은 @starting-style을 사용해 DOM 삽입 전 시각 상태(transform: scale(0.8); opacity: 0)를 선언하여 CSS가 해당 상태에서 보간할 수 있게 합니다. 종료 전환은 display와 overlay 속성을 전환해야 하며, 이를 위해 transition 선언에 allow-discrete가 필수입니다. Safari의 경우 dialog를 닫으면 inset 값이 초기화되어 요소가 튀는 버그가 있으며, inset: 0; position: fixed 규칙으로 해결합니다. 배경 클릭 해제는 Chromium에서 closedby="any" 속성을 사용하지만 Safari에서는 내부 div 래퍼 전략이 필요합니다. 스타일링은 dialog 요소에 직접 적용되는 --padding, --radii, --transitionSpeed 등의 CSS 커스텀 프로퍼티로 노출됩니다.
GSAP 3.15에서 새로운 tween 레벨 속성 easeReverse가 추가되었습니다. 재생 헤드를 역방향으로 이동하면 easing 커브도 반전되어 애니메이션이 어색해지는 오랜 문제를 해결합니다. easeReverse: true로 설정하면 정방향 ease를 역방향에 맞게 조정해 재사용하고, ease 문자열(예: "sine.in")을 전달하면 종료 시 완전히 다른 느낌을 적용할 수 있습니다. GSAP는 재생 헤드가 방향을 바꾼 정확한 위치에서 커브를 재계산하므로 tween 중간에 중단되어도 올바르게 처리됩니다. timeline defaults를 통해 중첩 tween까지 cascade되어 모달, 드로어, 메뉴 같은 토글 가능한 UI 패턴에 실용적입니다. 이에 따라 yoyoEase는 deprecated되며, GSAP 3.15는 내부적으로 yoyoEase를 easeReverse로 매핑하여 완전한 하위 호환성을 유지합니다.
CSS Breakpoint Unit: Pixel로 디자인하고 Fluid Accessibility를 무료로
@propjockey/breakpoint-system npm 패키지는 tan(atan2()) CSS 기법으로 100cqw 같은 길이 값을 단위 없는 숫자로 변환해, rem이나 em 없이도 사용자의 시스템 글꼴 크기 설정에 자동으로 적응하는 픽셀 기반 브레이크포인트를 구현합니다. 최대 10개의 네임드 브레이크포인트(sm, md, lg 등)가 CSS 커스텀 프로퍼티로 등록되어 abs(), clamp(), min(), max(), calc()를 통해 정수 비트 플래그(0 또는 1)를 생성합니다. 이 플래그는 calc() 스위치, @container style() 쿼리, CSS if(style()) 함수 세 가지 작성 경로를 열어줍니다. 두 가지 접근성 문제도 자동으로 해결됩니다: 100cqw는 스크롤바 너비를 제외하므로 미디어 쿼리와 달리 시스템 스크롤바 크기가 브레이크포인트 레이아웃에 영향을 주지 않으며, tan(atan2(1rem)) 스칼라를 통해 사용자의 시스템 글꼴 크기 조정이 브레이크포인트 임계값을 비례적으로 이동시켜 em 브레이크포인트와 동일한 효과를 자동으로 냅니다. 2026년 4월 기준 라이브러리 브라우저 지원율은 91%입니다.
masonry-gridlanes-wc 소개: Native-first Masonry Web Component
masonry-gridlanes-wc(v0.1.0)는 CSS Grid Level 3의 display: grid-lanes 명세와 정렬을 유지하면서 현재 프로덕션에서 masonry 레이아웃을 사용할 수 있게 해주는 light-DOM 커스텀 엘리먼트입니다. 브라우저가 grid-lanes를 네이티브로 지원하면 컴포넌트는 완전히 비켜서고, 그렇지 않은 경우 min-column-width, gap, 아이템 spanning이라는 동일한 개념 모델을 사용하는 JavaScript 폴백이 배치를 처리합니다. masonry-grid-lanes로 등록된 엘리먼트는 HTML 속성으로 설정해 열 계산과 간격을 선언적으로 처리합니다. 텍스트 위주의 카드에는 선택적 text-metrics="pretext" 속성으로 Pretext 라이브러리를 연동해 DOM 측정 없이 텍스트 메트릭만으로 높이를 계산하여 리사이즈 시 발생하는 강제 리플로우를 방지합니다. 실험적인 row 모드(mode="rows")로 수평 패킹도 지원하며, named grid line, CSS 단위 해석 등 폴백의 한계도 솔직하게 명시합니다.
이번 주 스타일링 분야는 애니메이션, 레이아웃, 크로스 브라우저 호환성을 폭넓게 다뤘습니다. Josh W. Comeau는 CSS path()와 Motion 라이브러리의 Web Animations API를 활용해 SVG path 애니메이션에 디즈니 스쿼시-앤-스트레치 원칙을 적용하는 방법을 소개했으며, 2026년 4월 기준 Safari가 SVG path 요소의 CSS transition을 지원하지 않아 브라우저 커버리지가 약 79%임을 명확히 밝혔습니다. GSAP 3.15는 reversed 방향에 맞게 easing 커브를 올바르게 적응시키는 tween 레벨 속성 easeReverse를 도입하고 기존의 yoyoEase를 deprecated 처리했습니다.
레이아웃 분야에서 Kevin Powell은 container-type: inline-size를 활용해 순수 CSS container query만으로 flex-wrap을 감지하는 방법을 시연했고, masonry-gridlanes-wcv0.1.0 커스텀 엘리먼트는 CSS Grid Level 3의 display: grid-lanes 명세를 위한 점진적 향상 래퍼로서 현재도 masonry 레이아웃을 프로덕션에 적용할 수 있게 합니다. Ben Frain은 @starting-style, allow-discrete, closedby="any"를 활용해 네이티브 dialog 요소의 in/out 애니메이션을 구현하는 과정과 Safari 특유의 inset 초기화 버그를 자세히 다뤘습니다.
2026년 3월 Baseline 다이제스트는 WebTransport, CSS subgrid, contain-intrinsic-size가 Widely Available 상태에 도달했음을 알렸으며, @propjockey/breakpoint-system npm 패키지는 tan(atan2()) 수식을 활용해 사용자 글꼴 크기 설정에 자동으로 비례하는 픽셀 기반 브레이크포인트를 91% 브라우저 커버리지로 구현하는 방법을 보여줬습니다.
Key Takeaways
네이티브 dialog 요소의 in/out 애니메이션은 @starting-style(진입), transition의 allow-discrete(종료), Safari inset 워크어라운드가 모두 필요합니다 — 네 가지를 갖춰야 크로스 브라우저 신뢰성이 보장됩니다.
GSAP 3.15의 easeReverse는 역방향 애니메이션 문제를 깔끔하게 해결하고 yoyoEase를 deprecated 처리했습니다 — 모달, 드로어, 메뉴 등 토글 UI 패턴을 업데이트하세요.
CSS subgrid와 contain-intrinsic-size가 2026년 3월 Baseline 기준 Widely Available 상태로 확정 — 폴리필 없이 프로덕션에 안전하게 배포할 수 있습니다.
