CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 18-2026
article
Scroll-driven Animation
TAG: 애니메이션
Josh W. Comeau가 CSS Animation Timeline API를 실습 위주로 상세히 안내합니다. 이 API는 @keyframes의 진행률을 시간이 아닌 스크롤 위치에 매핑합니다. animation-timeline: view()를 사용하면 요소가 뷰포트를 가로지르는 동안 키프레임이 적용되고, animation-timeline: scroll()은 전체 페이지 스크롤을 추적합니다. animation-range 속성의 cover, contain, entry, exit 값으로 애니메이션 시작·종료 시점을 세밀하게 제어할 수 있습니다. animation-range-start와 animation-range-end로 범위 퍼센트를 지정할 수도 있습니다. 또한 view-timeline과 timeline-scope를 통해 한 요소의 스크롤 위치로 다른 요소의 애니메이션을 구동하는 연결 타임라인도 다루며, named timeline의 스코프 제한이라는 주의 사항도 설명합니다.
CSS의 grid repeat()을 범용적으로 만들어달라는 커뮤니티 요청에서 영감을 받아, 작성자는 JavaScript 없이 순수 모던 CSS만으로 커스텀 --repeat() 함수를 구현했습니다. 이 기법은 calc()와 round(down)을 통해 10진수 횟수를 8비트 이진수로 변환한 뒤, 커스텀 프로퍼티로 2의 거듭제곱 단위 값 집합을 만들어 최대 255회 반복을 지원합니다. 최종 출력은 새로운 if(style(--bitN = 1): ...; else: ;)조건부 구문으로 조합하며, 사용하지 않는 거듭제곱 변수는 계산하지 않는 단락 평가 방식으로 동작합니다. content, text-shadow, filter drop-shadow(), shape() 선분 반복 등 다양한 활용 사례를 시연하며, npm 패키지로도 제공됩니다.
Joas Pambou는 스트리밍 UI의 세 가지 핵심 문제 — 스크롤 가로채기, 레이아웃 이동, 과도한 렌더 빈도 — 를 파악하고 각각에 대한 구체적인 JavaScript 및 CSS 해결책을 제시합니다. 스크롤 제어를 위해 60px 임계값을 가진 userScrolled 플래그로 사용자의 의도적 스크롤과 소규모 레이아웃 변화를 구분해, 사용자가 의도적으로 위로 스크롤할 때만 자동 스크롤을 일시 정지합니다. 레이아웃 안정성은 토큰마다 innerHTML을 지우고 재구축하는 대신 라이브 텍스트 노드에 문자를 직접 추가함으로써 레이아웃 재계산과 커서 깜빡임을 모두 제거합니다. 렌더 빈도는 수신 문자를 버퍼에 쌓았다가 requestAnimationFrame마다 한 번에 플러시하는 방식으로 줄입니다. 또한 스트림 취소 처리, 재시도 UX, aria-live 영역, :focus-visible 키보드 내비게이션, 타이프라이터 애니메이션을 위한 prefers-reduced-motion 지원도 다룹니다.
이 글은 oklch() CSS 함수와 상대적 색상 구문을 활용해 단 하나의 hex 값에서 11단계 색상 팔레트를 생성하는 방법을 소개합니다. 상대 색상의 from 키워드는 임의의 hex를 lightness(l), chroma(c), hue(h) 값으로 변환하며, 이후 calc()로 각 값을 조정할 수 있습니다. 극단적인 명도에서 채도가 과하게 나타나는 문제를 막기 위해, 각 단계에서 calc(0.08 * (c / .2)) 같은 공식으로 chroma를 비율 조정합니다. 선택적인 --chroma CSS 변수를 통해 소스 hex를 바꾸지 않고도 팔레트의 선명도를 수동으로 조절할 수 있습니다. 저자는 이 방식으로 사이트 전체 색상 시스템을 단 여섯 개의 hex 코드만으로 관리하고 있습니다.
알아야 할 현대 CSS Unit: dvh, Container Query Unit, lh, cap
TAG: CSS 단위
이 실용적인 가이드는 최근 몇 년간 주요 브라우저에 모두 탑재된 네 가지 CSS 길이 단위를 다룹니다. 각각 px, rem, %로는 해결하기 어려운 문제를 해소합니다. 동적 뷰포트 단위dvh는 100vh가 주소 표시줄을 무시하는 모바일 Safari의 고질적 버그를 수정하며, 현재 100dvh가 전체화면 레이아웃의 표준 권장값입니다. cqw, cqi 같은 컨테이너 쿼리 단위는 container-type으로 설정된 가장 가까운 컨테이닝 컨텍스트에 상대적으로 크기를 지정해 미디어 쿼리 없이 컴포넌트 단위의 반응형 타이포그래피를 구현합니다. lh 단위는 요소의 계산된 line-height로 해석되어 margin-block-start: 2lh처럼 수직 리듬을 간편하게 유지합니다. 마지막으로 cap(대문자 높이), ic(CJK 이상형 너비), ex(x-height)로 UI 요소를 폰트 메트릭에 정밀하게 정렬할 수 있습니다.
Nick Hazekamp이 CSS perspective와 간단한 JavaScript 틸트 컨트롤러를 사용해 실감나는 3D 무대 착시 효과를 구현하는 과정을 설명합니다. scene 컨테이너는 perspective: 1000px, perspective-origin: 50% 36%, transform-style: preserve-3d로 공유 3D 공간을 설정합니다. 무대 자체는 rotateX(72deg)로 기울인 직사각형이며, 시각적 효과 대부분을 CSS가 담당합니다. 고정된 background와 translate3d()로 이동한 foreground 레이어가 3층 구성을 완성합니다. 핵심 난점은 틸트가 바뀔 때마다 background와 foreground 너비를 무대의 전·후면 엣지에 기하학적으로 맞추는 것인데, 작은 JS 함수가 getBoundingClientRect()와 현재 perspective 값을 읽어 원근 스케일 수식으로 올바른 투영 너비를 계산한 뒤 CSS 커스텀 프로퍼티로 다시 기록합니다.
Kevin Powell이 세 가지 실용적인 CSS 레이아웃 패턴과 두 가지 보너스 시각 기법을 설명합니다. 첫 번째로 grid-auto-flow: column과 grid-auto-columns로 수평 오버플로우 스크롤러를 만든 뒤 scroll-snap-type: x mandatory와 scroll-snap-align: center를 더해 카드 스냅을 구현합니다. 두 번째로 repeat(auto-fit, minmax(min(100%, 300px), 1fr)) 패턴의 오토 그리드를 상세히 설명하며 소규모 컨테이너에서 발생하는 오버플로우 문제와 해결법을 다룹니다. 세 번째로 사이드바 컴포넌트에 container-type: inline-size를 선언하고 @container로 500px 이상에서 3열 그리드로 전환하는 컨테이너 쿼리 활용법을 시연합니다. 보너스 팁으로는 티켓 스타일 카드 모서리를 위한 corner-shape: scoop 속성과, animation-timeline: view()를 사용해 수평 스크롤 뷰포트에서 카드를 스케일·페이드하는 scroll-driven animation을 소개합니다.
Josh W. Comeau가 CSS Animation Timeline API를 실습 위주로 상세히 안내합니다. 이 API는 @keyframes의 진행률을 시간이 아닌 스크롤 위치에 매핑합니다. animation-timeline: view()를 사용하면 요소가 뷰포트를 가로지르는 동안 키프레임이 적용되고, animation-timeline: scroll()은 전체 페이지 스크롤을 추적합니다. animation-range 속성의 cover, contain, entry, exit 값으로 애니메이션 시작·종료 시점을 세밀하게 제어할 수 있습니다. animation-range-start와 animation-range-end로 범위 퍼센트를 지정할 수도 있습니다. 또한 view-timeline과 timeline-scope를 통해 한 요소의 스크롤 위치로 다른 요소의 애니메이션을 구동하는 연결 타임라인도 다루며, named timeline의 스코프 제한이라는 주의 사항도 설명합니다.
Kevin Powell이 세 가지 실용적인 CSS 레이아웃 패턴과 두 가지 보너스 시각 기법을 설명합니다. 첫 번째로 grid-auto-flow: column과 grid-auto-columns로 수평 오버플로우 스크롤러를 만든 뒤 scroll-snap-type: x mandatory와 scroll-snap-align: center를 더해 카드 스냅을 구현합니다. 두 번째로 repeat(auto-fit, minmax(min(100%, 300px), 1fr)) 패턴의 오토 그리드를 상세히 설명하며 소규모 컨테이너에서 발생하는 오버플로우 문제와 해결법을 다룹니다. 세 번째로 사이드바 컴포넌트에 container-type: inline-size를 선언하고 @container로 500px 이상에서 3열 그리드로 전환하는 컨테이너 쿼리 활용법을 시연합니다. 보너스 팁으로는 티켓 스타일 카드 모서리를 위한 corner-shape: scoop 속성과, animation-timeline: view()를 사용해 수평 스크롤 뷰포트에서 카드를 스케일·페이드하는 scroll-driven animation을 소개합니다.
CSS의 grid repeat()을 범용적으로 만들어달라는 커뮤니티 요청에서 영감을 받아, 작성자는 JavaScript 없이 순수 모던 CSS만으로 커스텀 --repeat() 함수를 구현했습니다. 이 기법은 calc()와 round(down)을 통해 10진수 횟수를 8비트 이진수로 변환한 뒤, 커스텀 프로퍼티로 2의 거듭제곱 단위 값 집합을 만들어 최대 255회 반복을 지원합니다. 최종 출력은 새로운 if(style(--bitN = 1): ...; else: ;)조건부 구문으로 조합하며, 사용하지 않는 거듭제곱 변수는 계산하지 않는 단락 평가 방식으로 동작합니다. content, text-shadow, filter drop-shadow(), shape() 선분 반복 등 다양한 활용 사례를 시연하며, npm 패키지로도 제공됩니다.
Joas Pambou는 스트리밍 UI의 세 가지 핵심 문제 — 스크롤 가로채기, 레이아웃 이동, 과도한 렌더 빈도 — 를 파악하고 각각에 대한 구체적인 JavaScript 및 CSS 해결책을 제시합니다. 스크롤 제어를 위해 60px 임계값을 가진 userScrolled 플래그로 사용자의 의도적 스크롤과 소규모 레이아웃 변화를 구분해, 사용자가 의도적으로 위로 스크롤할 때만 자동 스크롤을 일시 정지합니다. 레이아웃 안정성은 토큰마다 innerHTML을 지우고 재구축하는 대신 라이브 텍스트 노드에 문자를 직접 추가함으로써 레이아웃 재계산과 커서 깜빡임을 모두 제거합니다. 렌더 빈도는 수신 문자를 버퍼에 쌓았다가 requestAnimationFrame마다 한 번에 플러시하는 방식으로 줄입니다. 또한 스트림 취소 처리, 재시도 UX, aria-live 영역, :focus-visible 키보드 내비게이션, 타이프라이터 애니메이션을 위한 prefers-reduced-motion 지원도 다룹니다.
이 글은 oklch() CSS 함수와 상대적 색상 구문을 활용해 단 하나의 hex 값에서 11단계 색상 팔레트를 생성하는 방법을 소개합니다. 상대 색상의 from 키워드는 임의의 hex를 lightness(l), chroma(c), hue(h) 값으로 변환하며, 이후 calc()로 각 값을 조정할 수 있습니다. 극단적인 명도에서 채도가 과하게 나타나는 문제를 막기 위해, 각 단계에서 calc(0.08 * (c / .2)) 같은 공식으로 chroma를 비율 조정합니다. 선택적인 --chroma CSS 변수를 통해 소스 hex를 바꾸지 않고도 팔레트의 선명도를 수동으로 조절할 수 있습니다. 저자는 이 방식으로 사이트 전체 색상 시스템을 단 여섯 개의 hex 코드만으로 관리하고 있습니다.
알아야 할 현대 CSS Unit: dvh, Container Query Unit, lh, cap
이 실용적인 가이드는 최근 몇 년간 주요 브라우저에 모두 탑재된 네 가지 CSS 길이 단위를 다룹니다. 각각 px, rem, %로는 해결하기 어려운 문제를 해소합니다. 동적 뷰포트 단위dvh는 100vh가 주소 표시줄을 무시하는 모바일 Safari의 고질적 버그를 수정하며, 현재 100dvh가 전체화면 레이아웃의 표준 권장값입니다. cqw, cqi 같은 컨테이너 쿼리 단위는 container-type으로 설정된 가장 가까운 컨테이닝 컨텍스트에 상대적으로 크기를 지정해 미디어 쿼리 없이 컴포넌트 단위의 반응형 타이포그래피를 구현합니다. lh 단위는 요소의 계산된 line-height로 해석되어 margin-block-start: 2lh처럼 수직 리듬을 간편하게 유지합니다. 마지막으로 cap(대문자 높이), ic(CJK 이상형 너비), ex(x-height)로 UI 요소를 폰트 메트릭에 정밀하게 정렬할 수 있습니다.
Nick Hazekamp이 CSS perspective와 간단한 JavaScript 틸트 컨트롤러를 사용해 실감나는 3D 무대 착시 효과를 구현하는 과정을 설명합니다. scene 컨테이너는 perspective: 1000px, perspective-origin: 50% 36%, transform-style: preserve-3d로 공유 3D 공간을 설정합니다. 무대 자체는 rotateX(72deg)로 기울인 직사각형이며, 시각적 효과 대부분을 CSS가 담당합니다. 고정된 background와 translate3d()로 이동한 foreground 레이어가 3층 구성을 완성합니다. 핵심 난점은 틸트가 바뀔 때마다 background와 foreground 너비를 무대의 전·후면 엣지에 기하학적으로 맞추는 것인데, 작은 JS 함수가 getBoundingClientRect()와 현재 perspective 값을 읽어 원근 스케일 수식으로 올바른 투영 너비를 계산한 뒤 CSS 커스텀 프로퍼티로 다시 기록합니다.
이번 주 CSS는 이미 모든 주요 브라우저에서 지원되는 API에 대한 심층 튜토리얼들이 주목을 받았습니다. Josh W. Comeau는 animation-timeline: view(), animation-timeline: scroll(), animation-range(cover, contain, entry, exit), view-timeline과 timeline-scope를 통한 연결 타임라인까지 CSS Animation Timeline API 전체를 망라한 가이드를 발표했습니다. Kevin Powell은 scroll-snap-type: x mandatory를 활용한 카드 스냅, 새로운 corner-shape: scoop 속성으로 티켓 스타일 카드 모서리를 구현하고, container-type: inline-size와 @container를 활용한 컨테이너 쿼리를 소개했습니다.
실험적인 영역에서는 calc()와 round(down)으로 10진수를 8비트 이진수로 변환하고, 새로운 if(style(--bitN = 1): ...; else: ;)조건 구문으로 조합하는 순수 CSS --repeat() 함수가 구현되었습니다. JavaScript 없이 content, text-shadow, drop-shadow에서 최대 255회 반복을 지원합니다. 모던 CSS 단위 가이드는 모바일 안전 전체화면 레이아웃을 위한 dvh, 컴포넌트 단위 반응형 타이포그래피를 위한 cqw/cqi, 수직 리듬을 위한 lh, 폰트 메트릭 정렬을 위한 cap/ic/ex를 강조했습니다.
두 가지 추가 아티클도 주목할 만합니다. oklch()와 상대 색상 구문으로 단일 hex에서 11단계 팔레트를 생성하는 기법과, perspective: 1000px, rotateX(72deg), getBoundingClientRect()를 활용한 CSS 3D 무대 착시 효과입니다.
Key Takeaways
CSS Animation Timeline API(animation-timeline: view(), scroll(), animation-range)는 이제 scroll-driven animation의 표준으로 자리잡았으며, Josh W. Comeau의 가이드가 핵심 레퍼런스입니다.
calc(), round(down), 새로운 if(style()) 조건부 구문을 활용한 순수 CSS --repeat() 함수로 text-shadow, drop-shadow 등 속성에서 JavaScript 없이 최대 255회 반복이 가능합니다.
dvh는 모바일 안전 전체화면 레이아웃에서 100vh를 대체하고, cqw/cqi는 컴포넌트 스코프 반응형 타이포그래피를 실현하며, oklch() 상대 색상으로 단일 hex에서 11단계 팔레트를 만들 수 있습니다.
