2026년 정적 HTML을 위한 CSS linear() 이징: 키프레임·전환과 Safari 실기 리허설

오래된 블로그에서 복사한 cubic-bezier 네 값은 크롬에서는 그럭저럭 통과해도 Safari에서는 “끈적”하게 느껴질 때가 많습니다. linear()는 출력 진행률과 입력 퍼센트 쌍을 나열해 animation-timing-function과 transition-timing-function에 다단 감속을 직접 싣습니다. 2026년 정적 HTML 팀은 번들을 키우지 않으면서도 모션 품질을 올리고 싶지만, 스크롤 드리븐 타임라인, prefers-reduced-motion, WebKit 합성 스케줄러와 동시에 맞춰야 합니다. 이징은 접근성의 일부이며, 수식이 맞아도 멀미를 유발하면 실패입니다.

이미 게시된 스크롤 드리븐 애니메이션과 고정 헤더·scroll-padding 글을 함께 읽으면 스크롤 구간과 내비 높이 불일치를 줄일 수 있습니다.

문법과 스톱 간격

각 스톱은 출력 진행과 입력 퍼센트의 쌍입니다. 퍼센트가 겹치면 꺾이는 지점이 생기고, 부드러운 ease-out에는 최소 세 개의 내부 스톱이 필요합니다. 운영 관점에서는 총 다섯~아홉 개로 제한해 DevTools 그래프와 코드 리뷰가 가능하게 유지하세요.

.hero-card {
  transition: transform 420ms
    linear(0, 0.12 8%, 0.32 24%, 0.87 68%, 1);
}

마지막 스톱이 입력 100%에서 1에 도달하는지 확인하세요. 일찍 포화되면 마지막 몇 픽셀이 순간이동처럼 보입니다.

cubic-bezier 대비 선택 기준

요구	cubic-bezier	linear()	메모
단순 페이드	매우 좋음	과함	전통 곡선 유지.
다단 마케팅 바운스	어색함	자연스러움	스톱으로 바운스 명시.
스크롤 동기	경직	유연	입력 축을 스크롤 진행률에 맞춤.

스크롤 타임라인 결합

animation-timeline이 명명된 스크롤을 참조하면 이징 입력은 시간이 아니라 스크롤 진행입니다. 중간 구간 기울기가 가파르면 “스크롤 속도 + 곡선”의 이중 가속처럼 느껴집니다. 스크롤 이동이 400px 미만이면 중간 기울기를 낮추세요.

모션 축소 전략

@media (prefers-reduced-motion: reduce)에서는 투명도 전환을 120ms 근처로, 변형은 linear(0,1)에 가깝게 즉시 완료하세요. OS 설정만으로는 부족합니다. Safari 저전력 모드에서 프레임이 묶이면 미세한 반짝임이 버그처럼 보일 수 있습니다.

@supports와 폴백

먼저 cubic-bezier를 두고 기능 탐지로 덮어씁니다.

@supports (animation-timing-function: linear(0, 1)) {
  .hero-card { animation-timing-function: linear(0, 0.2 15%, 1); }
}

미니파이어가 순서를 바꾸지 않도록 주의하세요.

Safari 체크리스트

1. 가능하면 120fps로 녹화해 미세 끊김을 본다.
2. macOS 손쉬운 사용에서 동작 줄이기를 켠 뒤 캐시 없이 새로고침.
3. 노트북 배터리 저전력 모드에서 동일 페이지 재생.
4. Technology Preview와 안정판의 합성 차이를 비교.

합성 레이어와 버벅임

transform과 opacity는 합성에 남기 쉽지만, filter 블러를 대량으로 쓰면 구형 GPU에서 메인 스레드로 떨어질 수 있습니다. 동시 블러는 두 요소까지, 시작 시각은 40ms 간격으로 어긋나게 두세요.

디자인 핸드오프

피그마의 베지에 핸들 대신 0~100% 시간을 가로축, 이징 출력을 세로축으로 한 정규화 그래프를 공유하세요. “브랜드 튕김”과 “착지”를 앵커로 중간 스톱을 채우고, 최악의 뷰포트 폭에서 오차가 1 CSS px 미만이 될 때까지 조정합니다. 승인된 문자열은 README에 날짜와 함께 고정합니다.

연 1회 모션 감사로 과거 녹화와 현재 사이트를 비교하면 폰트·행간 변화가 체감 속도에 미치는 영향도 잡을 수 있습니다.

브레이크포인트·컨테이너 쿼리

1440px에서 날카롭게 느껴지던 곡선이 390px에서는 무겁게 느껴지는 것은 같은 퍼센트라도 이동 픽셀이 적기 때문입니다. 컨테이너 쿼리로 --ease-hero-wide와 --ease-hero-narrow를 전환하고, 임계값은 대략 720px 근처가 다루기 쉽습니다.

will-change 절제

will-change: transform을 남발하면 타일 메모리가 고갈합니다. 뷰포트 동시에 세 개까지, animationend에서 제거하세요.

저데이터 모드

iOS 저데이터 모드에서는 가벼운 모션은 유지하되 큰 LCP 영상 크로스페이드는 피해야 합니다. 세 번째 토큰 세트로 거리·블러만 줄이고 linear() 형태는 유지하는 패턴이 운영에 유리합니다.

저데이터 전용 토큰을 쓸 때는 색 대비와 초점 순서도 다시 확인하세요. 애니메이션만 줄이고 텍스트 대비가 떨어지면 접근성 감사에서 되돌아옵니다.

FAQ

linear()가 cubic-bezier를 대체하나요?

아니요. 단순 케이스는 cubic-bezier가 주역입니다.

스크롤 드리븐과 함께 쓸 수 있나요?

가능하지만 구간을 제한하고 합성을 확인하세요.

prefers-reduced-motion은?

시간 단축 또는 공간 이동 제거가 기본입니다.

스톱 개수 가이드는?

다섯~아홉 개를 유지하세요.

이징의 성패는 디스플레이 파이프라인에 크게 좌우되며, 리눅스 헤드리스 스크린샷만으로는 Safari 체감과 어긋날 수 있습니다. Apple Silicon Mac mini를 클라우드로 빌려 약 일 16.9달러부터 실제 프레임 페이싱과 P3 감마를 재현하세요. 출시 주에만 상시 켜 두고 승인 후 종료하면 책상 아래 상설 장비보다 훨씬 유연합니다.

여러 고객사를 동시에 운영하는 에이전시는 프로필을 분리해 폰트 캐시와 프리뷰 포트 오염을 막을 수 있습니다.