1284 개의 프로젝트
``` ```css .odo { display: inline-flex; font-variant-numeric: tabular-nums; } .odo__col { display: block; height: 1em; overflow: hidden; line-height: 1; } .odo__strip { display: block; translate: 0 0; transition: translate var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i) * var(--stagger)); } .odo__strip > span { display: block; height: 1em; } .odo[data-run] .odo__strip { translate: 0 calc(var(--d) * -1em); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .odo__strip { transition: none; } } ``` ```js const DIGITS = '0123456789'.split('').map((n) => `${n}`).join(''); document.querySelectorAll('.odo').forEach((odo) => { odo.innerHTML = odo.dataset.value.split('').map((d, i) => `${DIGITS}` ).join(''); const io = new IntersectionObserver(([entry]) => { if (!entry.isIntersecting) return; odo.dataset.run = ''; io.disconnect(); }, { threshold: 0.6 }); io.observe(odo); }); ``` ### 코드 H — `prefers-reduced-motion` 대응 > 언제: 전부. **접근성은 협상하지 않는다.** 이것 없이 5단계를 통과할 수 없다. **전부 끄는 것은 오답이다.** 셋으로 나눠라. | 죽인다 | 남긴다 | 대체한다 | |---|---|---| | 위치 이동, 시차, 스크롤 스크럽 | `opacity` 크로스페이드 | 슬라이드 → 크로스페이드 | | 회전·확대, 오버슛·바운스 | 호버·포커스 상태 변화 | 시차 → 정지 배경 | | 자동재생 루프, 마퀴 | 진행 표시·로딩(정보다) | 스크롤 리빌 → 즉시 표시 | | stagger(순차 지연) | 포커스 링 | 카운트업 → 최종값 즉시 | WCAG 2.3.3은 **인터랙션으로 촉발된 모션 애니메이션을 끌 수 있어야** 한다고 요구한다. 색·투명도·블러만 바뀌는 것은 해당하지 않는다 — **위치·크기·형태가 바뀌는 것**이 대상이다. 자동 재생되는 것은 별도로 2.2.2(5초 넘게 움직이면 정지 수단 필요)에 걸린다. 근거는 취향이 아니라 **어지럼·구역질·두통이라는 실제 신체 반응**이다. ```css @media (prefers-reduced-motion: reduce) { :root { /* 이동 거리를 0으로 → 모든 슬라이드가 자동으로 크로스페이드가 된다. 컴포넌트 코드를 한 줄도 안 고치고, animationend/transitionend 의존 코드도 안 깨진다 */ --shift-sm: 0px; --shift-lg: 0px; --stagger: 0ms; /* 페이드는 남긴다. 0으로 만들면 상태 변화가 뚝뚝 끊긴다 */ --dur-normal: var(--dur-instant); --dur-slow: var(--dur-instant); --ease-out: ease-out; --ease-in: ease-out; --ease-soft: ease-out; /* 오버슛 제거 */ } .marquee, .ambient, [data-loop], .parallax { animation: none !important; } } ``` JS 쪽 판정도 한 곳에 모은다. 설정이 도중에 바뀌면 반영한다: `matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', () => location.reload())`. --- ## 4. JS 스택 판단 — 언제 끌어오고 언제 안 끌어오나 ``` [1] §3의 CSS로 되는가? YES → 끝. 라이브러리 없음 [2] React이고 레이아웃 변화(FLIP)·제스처·퇴장 관리가 핵심인가? YES → Motion [3] 스크롤 핀 고정+다단계 시퀀스, 텍스트 자동 분해, SVG 모핑? YES → GSAP [4] 명령형 제어만 필요하고 번들을 늘리기 싫은가? YES → WAAPI (0KB) ``` | 스택 | 번들 (min+gzip) | 쓰는 이유 | 쓰지 않는 이유 | |---|---|---|---| | **CSS + WAAPI** | **0KB** | 기본값 | 타임라인 시퀀싱·FLIP이 안 된다 | | **Motion** `animate` mini | 2.3KB | 바닐라에서 명령형 애니메이션 | 스크롤 핀이 없다 | | **Motion** (React, `m`+`LazyMotion`+`domMax`) | 4.6KB + 25KB 지연 | `layout` prop(FLIP 최고), 스프링, `AnimatePresence` | 스크롤 핀·스크럽 등가물 없음 | | **Motion** 풀 | ~34KB | 전부 | 예산을 먹는다 | | **GSAP** core | ~24KB + 플러그인 | ScrollTrigger(핀·스크럽·스냅), SplitText, Flip, MorphSVG | 메인 스레드에서 돈다 | | **Lenis** | ~3KB | 스크롤 감각이 브랜드 자산일 때, WebGL↔DOM 동기화 | 아래 | **GSAP과 Motion을 한 프로젝트에 둘 다 넣는 것은 대체로 실수다.** 번들이 두 배가 되고 RAF 루프가 둘 돈다. 역할이 명확히 갈릴 때만 허용하고, 그때도 티커는 `gsap.ticker` 하나로 통일한다. ### GSAP 라이선스 — 2025년에 바뀌었다 (gsap.com 원문 확인) **발효 2025-04-30.** 상업 프로젝트에서 **전부 무료**다. 과거 Club GreenSock 유료 플러그인(SplitText, MorphSVG, DrawSVG, ScrollTrigger, ScrollSmoother, Inertia, MotionPath, Flip, Observer)이 **모두 포함**된다. 배경은 2024년 10월 Webflow의 GreenSock 인수. 남은 제약은 하나다. **GSAP을 "코드 없이 시각적으로 애니메이션을 만드는 도구"에 넣어 Webflow의 애니메이션 빌더와 경쟁하는 제품을 만들 수 없다.** FAQ는 AI가 생성한 코드를 명시적으로 허용한다("AI-generated code is not a 'Prohibited Use'"). **일반적인 웹사이트·앱 제작에는 아무 제약이 없다.** > 판단: GSAP은 더 이상 "돈 때문에 못 쓰는 라이브러리"가 아니다. 스크롤 시퀀스나 텍스트 분해가 필요하면 주저 없이 쓴다. 다만 **필요 없으면 여전히 깔지 않는다.** ### Lenis (스무스 스크롤) — 논쟁이 있다. 양쪽을 알고 결정해라 **반대**: 스크롤은 사용자가 기대하는 기기 고유의 물리다. 바꾸는 건 시스템 관습 침해다. 관성이 붙으면 **정확한 위치에 멈추기 어렵고** 운동 장애가 있는 사용자에게 치명적이다. 지연은 모든 사용자에게 인지 비용이다. **찬성**: Lenis는 구식 스크롤 재킹이 아니다. **네이티브 `scrollTop`을 이징할 뿐**이라 스크롤바·앵커·`position: sticky`·스크린리더 탐색이 그대로 작동한다. WebGL↔DOM 동기화는 스크롤을 메인 스레드에서 통제해야만 드리프트가 사라진다. **판단**: 대시보드·관리도구·문서·커머스·폼 → **쓰지 않는다**(`scroll-behavior: smooth`로 충분). 콘텐츠 사이트·블로그·뉴스 → **쓰지 않는다**(읽기를 방해한다). 브랜드 랜딩·포트폴리오·캠페인 → 조건 충족 시 쓸 수 있다. WebGL↔DOM 동기화 → 사실상 필수. 쓴다면 전부 지켜라: `respectReducedMotion: true` 명시 · `duration` 1.2 이하 · `syncTouch: false` · 모달 열릴 때 `lenis.stop()` · 내부 스크롤 요소(코드 블록·지도)에 `data-lenis-prevent` · **키보드 스크롤(Space·PageDown·Home·End)을 실제로 눌러보고 확인**. --- ## 5. 체크리스트 — 5단계 프리플라이트에서 그대로 돌린다 **하나라도 실패하면 4-4 복귀다.** **게이트 직결** - [ ] `transition`·`@keyframes`를 전부 grep했다. 애니메이션되는 속성이 `opacity`·`transform`·`translate`·`rotate`·`scale`뿐이다 (**#8**) - [ ] `background-color`·`box-shadow`·`filter`·`height`·`width`·`top`·`left`·`color`를 전환하는 곳이 없다. 있으면 §2 우회표로 - [ ] `addEventListener('scroll'`이 소스에 없다 (**#10**) - [ ] duration·이징이 전부 `var(--dur-*)`·`var(--ease-*)`다. 인라인 ms 값이 없다 - [ ] 이펙트를 전부 끈 상태에서 페이지가 완성돼 있다 **동작** - [ ] scroll-driven을 쓴 곳에 `@supports` 가드가 있고 **초기 상태가 그 블록 안에** 있다. Firefox에서 백지가 되지 않는다 - [ ] 스크롤 리빌이 위아래로 오갈 때 재생되지 않는다 (`both` / `unobserve()`) - [ ] 첫 화면 콘텐츠가 애니메이션 없이 즉시 읽힌다 - [ ] 퇴장 duration이 진입의 0.65배다. `(항목수 − 1) × --stagger + duration ≤ 800ms` - [ ] 한 시점에 움직이는 독립 요소가 3개 미만이고, 애니메이션 중에도 클릭·키 입력이 먹는다 **접근성 — 타협 없음** - [ ] `prefers-reduced-motion: reduce`를 켜고 실제로 확인했다. **전부 꺼지지 않고** 위치 이동·시차·루프만 죽고 페이드·상태 변화·진행 표시는 남는다 - [ ] 5초 넘게 자동 재생되는 애니메이션에 정지 수단이 있다 (WCAG 2.2.2) - [ ] 큰 면적이 무한 회전·확대·시차 이동하지 않는다 (전정기관 장애) - [ ] 텍스트가 글자 단위로 쪼개져 있지 않다. 쪼갰다면 원문이 DOM에 온전히 있고 시각 사본에 `aria-hidden`이 있다 - [ ] 카운트업의 최종값이 스크린리더에 노출된다 - [ ] 포커스 링이 애니메이션되지 않고 즉시 보인다. Tab 순서가 시각 순서와 일치하고, 전환 후 포커스가 새 콘텐츠를 따라간다 - [ ] 호버에만 있는 정보가 없다 (터치·키보드에서 접근 불가) **성능** - [ ] 모션 라이브러리 추가분이 `tokens.md` §5 예산 안이다. 넘겼으면 올린 이유를 명시했다 - [ ] `will-change`가 상시 걸린 요소가 10개 미만이다 - [ ] Lenis를 썼다면 §4의 조건 6개를 전부 충족했고 키보드 스크롤을 실제로 테스트했다 - [ ] 6단계 `design.md`에 **채택한 모션 · 안 쓰기로 한 모션과 그 이유**를 적었다 > 근거: research/motion/01~03 (조사일 2026-08-20)