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 // 값은 CMS·사용자 입력에서 올 수 있다. 문자열 보간으로 innerHTML을 만들지 않고 // 숫자만 통과시킨 뒤 DOM API로 조립한다(속성 탈출 XSS 차단) function span(cls) { const el = document.createElement('span'); if (cls) el.className = cls; return el; } document.querySelectorAll('.odo').forEach((odo) => { const value = odo.dataset.value ?? ''; if (!/^\d{1,12}$/.test(value)) return; // 숫자가 아니면 연출하지 않는다 — .sr-only 값이 그대로 남는다 const cols = [...value].map((d, i) => { const col = span('odo__col'); const strip = span('odo__strip'); strip.style.setProperty('--d', d); strip.style.setProperty('--i', String(i)); for (let n = 0; n <= 9; n++) { const digit = span(); digit.textContent = String(n); strip.append(digit); } col.append(strip); return col; }); odo.replaceChildren(...cols); 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 Animation from Interactions(**AAA**)는 **인터랙션으로 촉발된 모션 애니메이션을 끌 수 있어야** 한다고 요구한다. 색·투명도·블러만 바뀌는 것은 해당하지 않는다 — **위치·크기·형태가 바뀌는 것**이 대상이다. AAA라서 AA 준수 판정의 근거는 아니다. designpaca는 전정기관 장애(어지럼·구역질·두통이라는 실제 신체 반응) 근거로 감소 모션 대응을 **정책상 하드 게이트**로 올린다 — 보고서에는 "WCAG AA 위반"이 아니라 "designpaca 정책(WCAG 2.3.3 AAA 근거)"으로 표기한다. 자동 재생되는 것은 별도로 2.2.2 Pause, Stop, Hide(**A**, 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 쪽 판정도 한 곳에 모은다. 설정이 도중에 바뀌면 **새로고침하지 않고** 상태만 갱신한다 — `location.reload()`는 입력 중인 폼·스크롤 위치·열린 패널을 잃게 한다. ```js const mq = matchMedia('(prefers-reduced-motion: reduce)'); const applyMotionPref = () => { document.documentElement.toggleAttribute('data-reduced-motion', mq.matches); // 진행 중인 JS 애니메이션(WAAPI·GSAP 등)은 여기서 끝값으로 보내거나 취소한다 }; applyMotionPref(); mq.addEventListener('change', applyMotionPref); ``` ### 코드 I — 테마 전환 시 트랜지션 억제 > 언제: 라이트·다크를 런타임에 토글하는 프로젝트 전부. 넣지 않으면 테마가 바뀌는 순간 색·그림자·테두리 트랜지션이 동시에 발화해 화면 전체가 번져 보인다. OS 설정이나 인앱 토글로 테마가 바뀔 때, 전역에 `transition: none`을 순간적으로 주입하고 강제 리플로우한 뒤 다음 프레임에 제거한다. ```js function setTheme(next) { const css = document.createElement('style'); css.textContent = '*,*::before,*::after{transition:none!important}'; document.head.appendChild(css); document.documentElement.dataset.theme = next; // 실제 토큰 전환 document.body.offsetHeight; // 강제 리플로우 — 주입한 스타일을 확정시킨다 requestAnimationFrame(() => requestAnimationFrame(() => css.remove())); } ``` `next-themes` 같은 라이브러리를 쓴다면 `disableTransitionOnChange` 옵션이 같은 일을 기본 제공한다. **프로젝트 계약.** [SKILL-BETTER-UI] --- ## 3-b. 패럴랙스·스크롤 연동 깊이 → [motion-parallax.md](motion-parallax.md) 패럴랙스, 고정 배경, sticky 캔버스의 진행도 계산은 분량이 커서 [motion-parallax.md](motion-parallax.md)로 분리했다. **넣기로 정한 뒤에만** 연다. 섹션별 주장과 움직임 대응, 고정 원형, 이동량 공식, `overflow: hidden` 함정, 진행도 공식이 거기 있다. --- ## 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은 더 이상 "돈 때문에 못 쓰는 라이브러리"가 아니다. 스크롤 시퀀스나 텍스트 분해가 필요하면 주저 없이 쓴다. 다만 **필요 없으면 여전히 깔지 않는다.** ### 정리 규율 — 라이브러리를 쓰면 반드시 해제한다 **프로젝트 계약.** 라우트를 떠나거나 컴포넌트가 언마운트될 때 인스턴스를 정리하지 않으면 리스너와 타임라인이 누적돼 메모리와 프레임이 새어나간다. | 라이브러리 | 정리 호출 | |---|---| | GSAP 타임라인·ScrollTrigger | `gsap.context(fn, scope)`로 스코프를 잡고 언마운트 시 `ctx.revert()` | | GSAP SplitText | `split.revert()` — 원본 DOM 구조로 되돌린다 | | WAAPI | `animation.cancel()` | | IntersectionObserver | `observer.disconnect()`(§3 코드 C·G에 이미 적용) | | Lenis | `lenis.destroy()` | [SKILL-INTERACTION-DESIGN][SKILL-EMIL-DESIGN-ENG] ### WAAPI — 번들 없이 명령형 제어 ```js const anim = el.animate( [ { opacity: 0, translate: '0 var(--shift-lg)' }, { opacity: 1, translate: '0 0' }, ], { duration: 350, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', fill: 'both' } ); anim.finished.then(() => { /* 완료 후 처리 */ }).catch(() => {}); // 언마운트하거나 다시 요청받으면 반드시 취소한다 anim.cancel(); ``` ### GSAP 타임라인 + ScrollTrigger 최소 골격 (바닐라 JS) React를 전제하지 않아 어떤 프레임워크에도 옮길 수 있는 최소 형태다. `gsap.context()`로 스코프를 잡고 정리 함수를 반환한다. ```js import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); function mountHero(root) { const ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: root, start: 'top 80%', once: true }, }); // GSAP은 CSS 변수를 직접 읽지 않으므로 토큰 값과 같은 숫자를 쓴다 tl.from('.hero__title', { opacity: 0, y: 24, duration: 0.6, ease: 'power2.out' }) // 0.6 = --dur-slow, 'power2.out' = --ease-out에 대응하는 GSAP 이징 .from('.hero__sub', { opacity: 0, y: 16, duration: 0.35, ease: 'power2.out' }, '-=0.3'); // 0.35 = --dur-normal }, root); return () => ctx.revert(); // 언마운트 시 반드시 호출 } ``` [SKILL-INTERACTION-DESIGN] ### Motion(Framer) 쓸 때 주의 둘 - **관찰 후보 — `x`·`y`·`scale` 축약 속성은 그 자체로 하드웨어 가속이 아니다.** Motion은 메인 스레드의 `requestAnimationFrame`으로 이 값들을 계산해 매 프레임 `transform` 문자열로 합성한다. 실제 GPU 합성 여부는 최종적으로 만들어지는 `transform` 값과 `will-change`(§2 표) 조합에 달려 있지, 축약 속성 문법 자체가 보장하지 않는다. [SKILL-EMIL-DESIGN-ENG] - **관찰 후보 — `AnimatePresence`는 `initial={false}`로 첫 렌더 진입 애니메이션을 끈다.** 마운트마다 진입 연출이 발화하면 페이지를 새로고침할 때마다 불필요하게 움직인다. 단, 스태거드 히어로처럼 `initial` 자체가 최초 1회 연출을 담당하는 곳에는 적용하지 않는다 — 새로고침에서도 올바르게 보이는지 확인한다. [SKILL-BETTER-UI] ### 경량 CSS 3D — WebGL 게이트를 넘지 않는 작은 회전 로고 궤도, 카드 뒤집기처럼 작은 3D 연출은 `three.md`의 WebGL 채택 게이트를 넘지 않고도 만들 수 있다. ```css .flip-card { perspective: 800px; } .flip-card__inner { transform-style: preserve-3d; transition: transform var(--dur-normal) var(--ease-soft); } .flip-card[data-flipped] .flip-card__inner { transform: rotateY(180deg); } .flip-card__face--back { transform: rotateY(180deg); backface-visibility: hidden; } ``` [SKILL-EMIL-DESIGN-ENG] ### 스크롤 핸들러는 passive + 일정화한다 `addEventListener('scroll', ...)`이 §3 코드 C처럼 정말 필요할 때(IntersectionObserver나 scroll-driven animation으로 안 풀릴 때)만 쓴다. 매 스크롤 이벤트가 아니라 다음 페인트 한 번으로 묶는다. ```js let ticking = false; window.addEventListener('scroll', () => { if (ticking) return; ticking = true; requestAnimationFrame(() => { handleScroll(); ticking = false; }); }, { passive: true }); ``` **프로젝트 계약.** [SKILL-INTERACTION-DESIGN] ### Lenis (스무스 스크롤) — 논쟁이 있다. 양쪽을 알고 결정해라 **반대**: 스크롤은 사용자가 기대하는 기기 고유의 물리다. 바꾸는 건 시스템 관습 침해다. 관성이 붙으면 **정확한 위치에 멈추기 어렵고** 운동 장애가 있는 사용자에게 치명적이다. 지연은 모든 사용자에게 인지 비용이다. **찬성**: Lenis는 구식 스크롤 재킹과 다른 구현을 목표로 한다. 버전·통합 방식에 따라 스크롤바·앵커·`position: sticky`·스크린리더 탐색에 미치는 결과를 실제로 검증해야 한다. WebGL↔DOM 동기화에 도움이 될 수 있으나, 그 효과는 프로젝트에서 측정한다. **판단**: 기본은 네이티브 스크롤이다. 브랜드 표현이나 WebGL↔DOM 동기화처럼 특별한 요구가 있을 때만 도입 후보로 삼고, 입력 지연·키보드·포커스·앵커·감소 모션·예산을 실제로 검증한다. 쓴다면 터치 동작·모달과 내부 스크롤의 상호작용을 프로젝트 계약으로 정하고, Space·PageDown·Home·End·포커스 이동·앵커를 실제로 확인한다. `prefers-reduced-motion`에서는 네이티브 경로 또는 불필요한 보간 제거가 실제로 적용되는지 확인한다. 측정된 입력 지연과 모션 예산을 `design.md`에 남긴다. --- ## 5. 체크리스트 (구현 중 자기 점검 — 납품 판정은 preflight.md X1) 모션을 짜는 동안 확인한다. 납품 판정은 [preflight.md](preflight.md) X1이 하고, 이펙트를 끈 상태의 완성은 M-A, 감소 모션은 A7, 5초 넘는 자동 재생 정지는 A8, 호버 전용 정보는 W13, 깜빡임은 A19, 포커스 링·Tab 순서는 A1·A2, 모션 라이브러리 추가분 예산은 P2가 판정한다. 시각 회귀 캡처는 모션 완료를 관측한 뒤 찍는다([audit-gate.md](audit-gate.md) 렌더 측정 계약, [audit-gate-rules.md](audit-gate-rules.md) G10). **게이트 직결** - `transition`·`@keyframes`를 전부 grep하고, 각 속성의 목적·비용 측정·입력 간섭·감소 모션 경로를 기록했다. `opacity`·`transform`·`translate`·`rotate`·`scale` 이외 속성은 프로젝트 예산과 실제 렌더 결과로 정당화했다 - `background-color`·`box-shadow`·`filter`·`height`·`width`·`top`·`left`·`color`를 전환한다면 §2의 저비용 대안과 비교하고, 유지 이유와 측정 결과를 기록했다 - `addEventListener('scroll'`을 썼다면 passive 처리와 일정화, 프레임 시간·입력 지연 측정, 감소 모션 경로를 기록했다 - duration·이징이 전부 `var(--dur-*)`·`var(--ease-*)`다. 인라인 ms 값이 없다 **동작** - scroll-driven을 쓴 곳에 `@supports` 가드가 있고 **초기 상태가 그 블록 안에** 있다. Firefox에서 백지가 되지 않는다 - 스크롤 타임라인 애니메이션에 `animation-delay`로 스태거를 걸지 않았다(무시된다). 첫 화면 요소에 `view()`의 `entry` 구간을 쓰지 않았다 - 스크롤 리빌이 위아래로 오갈 때 재생되지 않는다 (`both` / `unobserve()`) - 첫 화면 콘텐츠가 애니메이션 없이 즉시 읽힌다 - 퇴장 duration과 stagger 총 소요가 프로젝트 계약에 맞고, 입력 지연·감소 모션을 실제로 확인했다 - 대표 과업에서 동시 모션이 시선·클릭·키 입력을 방해하지 않는지 실제로 확인했다 - 모션 QA를 실제로 돌렸다 — duration을 2~5배로 늘리거나 DevTools Animations 패널에서 프레임 단위로 재생해 색 전환·이징·transform-origin·속성 동기화 4항목을 확인했다 [SKILL-APPLE-DESIGN][SKILL-EMIL-DESIGN-ENG][SKILL-IMPECCABLE] - 실기기 또는 CPU 스로틀링(DevTools Performance)에서 한 번은 확인했다. 증거 출처(에뮬레이션/실기기, 엔진명 — Chromium≠Safari)를 `design.md`에 남겼다 [SKILL-IMPECCABLE] **접근성 — 타협 없음** - 큰 면적이 무한 회전·확대·시차 이동하지 않는다 (전정기관 장애) - 텍스트가 글자 단위로 쪼개져 있지 않다. 쪼갰다면 원문이 DOM에 온전히 있고 시각 사본에 `aria-hidden`이 있다 - 카운트업의 최종값이 스크린리더에 노출된다 - 포커스 링 자체를 애니메이션하지 않는다. 뷰 전환 뒤 포커스가 새 콘텐츠를 따라간다 **성능** - 상시 `will-change` 요소의 레이어 메모리와 실제 기기 성능이 프로젝트 예산 안임을 확인했다(§2 will-change 표) - 드래그·제스처가 있다면 입력 경로 지연을 감사했다 — 기준과 방법은 [interaction-feel.md](interaction-feel.md) - GSAP·Motion·Lenis·SplitText·IntersectionObserver 등 이 문서에서 쓴 라이브러리 인스턴스가 이탈 시 정리된다(§4 정리 규율 표) - Lenis를 썼다면 §4의 입력·키보드·포커스·앵커·감소 모션·예산 검증을 실제로 마쳤다 - 6단계 `design.md`에 **채택한 모션 · 안 쓰기로 한 모션과 그 이유**를 적었다 > 근거: designpaca 저장소의 모션 조사 노트(조사일 2026-08-20). 설치본에는 포함되지 않으며, 이 문서의 결론만으로 작업할 수 있게 썼다.