Claude Code로 하룻밤 만에 애니메이션 웹사이트 만들기

모델 활용법은 Ailoot 문서에서 자세히 알아보세요.

AI가 만든 웹사이트는 왜 첫 화면부터 티가 날까요?#

에이전트에게 랜딩 페이지를 만들어 달라고 합니다. 40분 뒤에는 작동하는 사이트가 완성됩니다. 섹션이 제자리에 있고, 반응형 레이아웃이며, 버튼도 작동합니다. 그런데 거의 바로 어디선가 본 것 같은 느낌이 듭니다.

그 이유는 기계적인 방식에 있습니다. 모델은 완성된 페이지를 모은 방대한 데이터로 학습했고, 그 데이터에는 강한 편향이 있었습니다.

수천 개의 튜토리얼과 시작 템플릿이 그 색을 복사해 표본을 편향시켰고, 모델은 버튼이 보라색이라고 학습했습니다. 같은 메커니즘은 글꼴, 둥근 모서리, 그림자에도 적용됩니다.

그사이 ‘AI다운 모양’은 바뀌었습니다. Anthropic은 frontend-design 스킬 문서에서 이제 다른 스타일을 설명합니다.

근본적인 문제는 구체적으로 따라 할 대상이 없으면 슬롭이 생기고, 모델이 웹 스타일을 전부 평균 내어 섞는다는 것입니다.

여기서 ‘슬롭’은 뚜렷한 스타일 없이 평균화되어 진부한 결과가 된 기계 생성 작업을 뜻합니다.

실질적인 교훈은 에이전트에게 열린 과제 대신 좁은 디자인 문법을 제공해야 한다는 것입니다. “아름답게 만들어”라고 하면 평균적인 결과를 택합니다. 구체적인 색상 팔레트와 서체 몇 개, 그리고 페이지를 규정하는 시각적 장치 하나를 주면 그것을 바탕으로 만듭니다.

이런 상황에서 움직임은 가장 눈에 띄는 신호입니다. 타이포그래피가 완벽한 정적 페이지도 템플릿처럼 보입니다. 살아 있는 웹사이트는 숨을 쉬기 때문입니다. 스크롤을 내리면 요소가 나타나고, 커서에 따라 무언가가 바뀌며, 화면 사이의 전환이 갑자기 끊기지 않습니다.

Claude Code에서 애니메이션 웹사이트를 만들려면 무엇이 필요할까요?#

가격에 혼란이 많으니 도구를 하나씩 살펴보겠습니다.

GSAP는 수상 경력이 있는 웹사이트 가운데 상당수가 사용하는 애니메이션 라이브러리입니다. Webflow가 2024년 10월에 인수했고, 곧바로 모든 것이 무료가 되었다는 소문이 퍼졌습니다. 정확히는 그렇지 않습니다. 당시 Webflow는 기존 가격 정책이 유지될 것이라고 확인했습니다. 라이브러리는 버전 3.13과 함께 2025년 4월 말 무료가 되었습니다.

3.13 릴리스에는 SplitText와 MorphSVG 같은 기존 유료 플러그인도 상업적 사용을 포함해 무료가 되었다고 명시되어 있습니다. 2026년 7월 현재 최신 버전은 gsap@3.15.0입니다.

하지만 무료라고 해서 오픈 소스라는 뜻은 아닙니다. 라이선스는 여전히 독점적이며 Webflow와 경쟁하는 GSAP 기반 시각 애니메이션 편집기를 만드는 것을 금지합니다. 웹사이트, 고객 프로젝트 또는 상업 작업에는 제한이 없습니다.

Anthropic의 frontend-design 스킬은 에이전트가 인터페이스 작업을 하는 방식을 바꾸는 지침 모음입니다. 저장소 설명은 다음과 같습니다.

내부에는 2단계 방법이 있습니다. 먼저 에이전트가 토큰 시스템을 구성합니다. 이름이 붙은 색상 4~6개, 최소 두 가지 역할에 쓸 서체, 텍스트 스케치 형태의 레이아웃 계획, 페이지를 규정할 시각적 장치 하나입니다. 그런 다음 과제에 비추어 스스로 계획을 비평합니다. 그 후에야 코드를 작성합니다.

게시물에는 스킬 75개라고 적혀 있고, 저장소 설명에는 78개가 나열되어 있으며, 현재 파일 트리에는 91개가 있습니다. 제작자는 이 점을 솔직히 밝힙니다. 설명이 오래되었으니 검색 명령으로 저장소를 확인하라고 합니다.

Claude Code가 템플릿을 그만 만들게 하려면 어떻게 해야 할까요?#

요청마다 적용되고 비용도 들지 않는 규칙 파일부터 시작하겠습니다.

유용한 출발점은 템플릿 방지 가드레일 블록입니다. 논리는 간단합니다. 모델이 기본적으로 자주 선택하는 구체적인 항목을 나열하고, 이름을 들어 금지하는 것입니다.

## Anti-Generic Guardrails

- Colors: Never use default Tailwind palette (indigo-500, blue-600).
  Pick a custom brand color and derive from it.
- Shadows: Never use flat shadow-md. Use layered, color-tinted shadows with low opacity.
- Typography: Never use the same font for headings and body. Pair a display/serif
  with a clean sans. Apply tight tracking (-0.03em) on large headings,
  generous line-height (1.7) on body.
- Gradients: Layer multiple radial gradients. Add grain/texture via SVG noise filter for depth.
- Animations: Only animate transform and opacity. Never transition-all.
  Use spring-style easing.
- Interactive states: Every clickable element needs hover, focus-visible,
  and active states. No exceptions.
- Spacing: Use intentional, consistent spacing tokens - not random Tailwind steps.
- Depth: Surfaces should have a layering system (base -> elevated -> floating).

이 블록은 의도적으로 영어로 작성했습니다. 모델은 문서 언어로 된 짧은 기술 지침을 더 정확하게 따릅니다.

애니메이션 규칙이 색상 및 그림자와 함께 금지 목록에 있는 데는 이유가 있습니다. 첫 화면의 opacity는 속도 지표에 직접 악영향을 줍니다. 이에 대해서는 아래에서 살펴보겠습니다.

다음은 스킬입니다. Anthropic 공식 스킬은 플러그인으로 설치할 수 있습니다.

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

한 가지 세부 사항이 있습니다. 디자인 스킬은 하나씩 설치할 수 없습니다. example-skills 플러그인은 12개를 한꺼번에 가져옵니다. 하나만 원한다면 폴더를 수동으로 복사하세요. Claude Code는 세션을 재시작하지 않아도 스킬을 찾습니다.

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

이 컬렉션의 다른 유용한 스킬로는 바로 사용할 수 있는 테마 10개와 적용 전 사람의 확인이 필요한 theme-factory, 준비된 구성 요소로 React를 만드는 web-artifacts-builder, 생성형 그래픽을 위한 algorithmic-art가 있습니다. 작업에 맞는 스킬을 고르는 방법은 별도 기사 Claude Code 스킬 고르는 방법에서 자세히 설명합니다.

규칙과 스킬은 함께 작동합니다. 규칙은 나쁜 선택을 금지하고, 스킬은 먼저 시스템을 만들고, 다음에 비평하고, 마지막에 코드를 작성하는 절차를 부여합니다.

여기서 중요한 일은 모두 요청을 보내기 전에 일어납니다. 에이전트가 따를 제약을 컨텍스트에 미리 넣으므로 프롬프트의 표현은 거의 중요하지 않게 됩니다. 이 접근법을 컨텍스트 엔지니어링이라고 하며 CLAUDE.md 파일은 그 첫 번째 구성 요소입니다. AI 복제 + 세컨드 브레인 + 컨텍스트 엔지니어링을 결합하면 Claude를 평균적인 결과를 내는 생성기에서 자신의 스타일을 지키는 도구로 바꿀 수 있습니다.

바로 사용할 수 있는 시각적 방향과 애니메이션 프롬프트는 어디서 찾을까요?#

포함된 모션 기법은 다음과 같습니다. animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

프로그래머가 아니라면 바로 사용할 수 있는 시각적 방향이 더 중요합니다. 막연히 “현대적으로 만들어”라고 하는 대신, 다음 중 하나를 골라 모델에 부족했던 좁은 문법을 제공하세요.

• clean-minimal-beige-light-mode - 밝은 베이지 미니멀리즘
• dark-glass-clean-layout - 어두운 유리 느낌
• documentary-brutalist-agency - 다큐멘터리 브루탈리즘
• editorial-portfolio-chapters - 잡지처럼 장별로 나눈 포트폴리오
• orange-clean-paper-saas - 오렌지 포인트를 사용한 종이 스타일 서비스 웹사이트
• solar-duotone-bold - 대담한 두 가지 색상 처리
• tech-green-dark-mode-modern - 녹색을 사용한 어두운 테크 스타일
• light-mode-paper-technical - 밝은 기술 문서 스타일

3D 그래픽과 효과를 위한 기술 스킬도 있습니다. threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient입니다.

저장소에는 설치 명령이 없습니다. 제작자는 통합 방법이 정해지면 추가하겠다고 로드맵에서 분명히 말합니다. Claude Code에 대한 유일한 지침은 다음과 같습니다.

아래에는 설치 방법 하나가 나와 있습니다. 이 명령은 저장소에 없으며 설치 권장 사항입니다.

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

문의가 자주 있으니 유료 프롬프트 라이브러리도 간단히 살펴보겠습니다. motionsites.ai 서비스는 섹션용 프롬프트 묶음을 판매합니다. 2026년 7월 기준 가격은 연 239달러 또는 759달러 대신 한 번만 내는 프로모션 가격 349달러이며 월간 요금제는 없습니다. 작성자는 표시되어 있지 않고 ‘소개’ 페이지도 없습니다. 이름이 거의 같은 단수형 사이트도 있으며, Claude Code 호환성에 대한 언급은 그 사이트에만 있습니다. 구매를 권하지 않지만, 이런 선택지가 있다는 점은 알아둘 만합니다.

한 줄로 에이전트에게 최신 GSAP 문서를 제공하는 방법은?#

애니메이션 라이브러리에서 흔히 생기는 문제는 에이전트가 오래된 연결 방법을 기억한다는 것입니다. 오래된 경로에서 import하고, 2년 전에 쓰던 방식으로 플러그인을 등록해 코드가 실행되지 않습니다.

해결책은 문서를 직접 컨텍스트에 넣는 것입니다. GSAP은 기계가 읽기 좋은 형식으로 문서를 제공합니다.

https://gsap.com/llms.txt

오늘 기준 파일 크기는 약 25킬로바이트입니다. 각 문서 페이지도 Markdown 버전으로 제공되므로 URL에 .md를 추가하면 됩니다.

실제 사용 예는 다음과 같습니다.

https://gsap.com/llms.txt 및 https://gsap.com/docs/v3/Plugins/ScrollTrigger.md를 읽으세요.

그런 다음 홈페이지에 장면 하나를 만드세요. 첫 화면을 스크롤할 때 헤드라인이 나타나고,
오른쪽 이미지는 텍스트보다 천천히 이동합니다.
transform과 opacity만 사용하세요. transition-all은 사용하지 마세요.

Motion 라이브러리(구 Framer Motion)에도 같은 파일이 있으며 더 큽니다. Motion은 MIT 라이선스로 배포되는 진정한 오픈 소스이며, 현재 버전은 motion@12.42.2입니다. 프로젝트가 React를 사용하고 간단한 요소 표시만 필요하다면 Motion을 선택할 수 있습니다. 복잡한 스크롤 장면에는 ScrollTrigger 플러그인과 함께 GSAP을 사용하세요.

라이브러리를 사용하지 않는 브라우저 전용 옵션도 있습니다. View Transitions API를 통한 페이지 상태 전환은 2025년 10월 14일에 기준선 지원에 포함되었지만 한 페이지 안에서만 가능합니다. 페이지 간 전환 버전은 Firefox에서 전혀 지원되지 않습니다. CSS 스크롤 애니메이션은 아직 기준선 지원에 포함되지 않았습니다. Chrome은 지원하고 Safari도 최근 지원하기 시작했지만 Firefox에서는 설정에서 수동으로 활성화해야 하므로 일반 독자에게는 작동하지 않습니다. 브라우저가 이를 지원하는지 먼저 확인하고, 지원하지 않는다면 표준 전환을 그대로 두라고 에이전트에게 요청하세요.

마음에 드는 웹사이트를 프롬프트로 바꾸려면 어떻게 해야 할까요?#

원하는 것을 설명하는 가장 일반적인 방법은 예시를 보여주는 것입니다. 하지만 에이전트에게는 직접 통하지 않습니다. 에이전트는 웹사이트를 보는 것이 아니라 텍스트를 봅니다.

video-to-superprompt 스킬이 그 간극을 메웁니다. 저장소 설명에 따르면 동영상 참조 자료를 재현이나 영감을 위한 상세 프롬프트로 바꿉니다. 내부적으로는 녹화본을 내러티브, 레이아웃, 모션, 타이포그래피, 3D 그래픽 등 여러 레이어로 분석합니다. 결과는 바로 사용할 수 있는 프롬프트 하나입니다.

이 스킬의 핵심 규칙은 강하게 명시되어 있습니다.

두 번째 스킬인 html-to-interaction-prompts는 소스 코드를 다룹니다. 커서 반응, 3D 그래픽, 스크롤 효과, 서로 다른 속도로 움직이는 레이어 등 움직이는 요소를 전부 찾아서 각 섹션, 버튼, hover 상태, 효과별 프롬프트로 나눕니다. 소스의 동작을 사실로 취급하고, 코드를 볼 수 있는데도 스크린샷만 보고 효과를 지어내지 않는 것이 원칙입니다.

세 번째 스킬 stitched-full-page-capture는 실제적인 문제를 해결합니다. 지연 로딩과 3D 그래픽이 있는 웹사이트를 일반적인 전체 페이지 스크린샷으로 캡처하면 렌더링이 완료되기 전에 캡처가 이루어져 회색 화면이나 빈 화면이 나옵니다. 이 스킬은 화면 단위로 페이지를 스크롤하고, 모든 것이 안정될 때까지 기다린 다음 결과를 이어 붙입니다.

화면 녹화 없이도 방법이 있습니다. MCP를 통해 에이전트를 실제 인터페이스 예시 라이브러리에 연결하면 됩니다. Mobbin 공식 서버는 명령 하나로 설치할 수 있습니다.

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

그런 다음 새 세션을 열고 목록에서 서버를 선택한 다음 브라우저에서 로그인합니다. 에이전트는 실제로 작동하는 앱의 스크린샷을 볼 수 있습니다. 목록에는 621,500개가 넘는 화면이 있습니다. 이는 완제품의 스크린샷이지 구성 요소나 코드가 아닙니다. 중요한 점은 Mobbin 서버가 무료 요금제에서는 작동하지 않고 유료 요금제에서 제공된다는 것입니다(2026년 7월 기준). 외부 서비스를 에이전트에 연결해 디자인 시스템을 Claude Code로 가져오는 같은 방법은 Google Stitch에 관한 별도 기사에서 설명합니다.

단계별 안내: 하룻밤 만에 애니메이션 웹사이트 만들기#

1. 프로젝트 설정하기

   아직 프로젝트가 없다면 빈 폴더에서 시작하세요. 폴더를 만들고 터미널에서 연 다음 그 안에서 claude를 실행합니다. 첫 프롬프트로 뼈대를 만들어 달라고 요청하세요. “내 사업을 위한 단일 페이지 웹사이트 뼈대를 만들어 줘(무엇인지 설명), 일반 HTML과 CSS만 사용하고 라이브러리는 사용하지 마.” 파일이 생성되면 그곳이 프로젝트 루트입니다. 이후 모든 작업은 여기서 이루어집니다.

2. CLAUDE.md에 규칙 넣기

   Anti-Generic Guardrails 블록을 프로젝트 루트의 CLAUDE.md 파일에 복사하세요. 파일이 없다면 에이전트에게 만들라고 요청하세요. 규칙은 Tailwind용으로 작성되어 있습니다. 시작 구조에서 일반 CSS를 사용한다면 에이전트에게 “이 원칙을 일반 CSS에 적용해 줘”라고 말하면 됩니다. 규칙의 의미는 변하지 않습니다. 파일이 어떻게 작동하고 무엇을 더 넣을 수 있는지는 CLAUDE.md의 네 가지 규칙에 대한 해설을 참조하세요.

3. frontend-design 스킬 설치하기

   example-skills 플러그인을 사용하거나 앞에서 설명한 대로 frontend-design 폴더를 복사하세요. /doctor 명령으로 스킬이 로드되었는지 확인할 수 있습니다.

4. 시각적 방향 하나 선택하기

   하나만 선택하세요. 두 개나 세 개가 아니라 하나만 선택하세요. 다큐멘터리 브루탈리즘과 베이지 미니멀리즘을 섞으면 피하려던 바로 그 평균화가 일어납니다.

5. 정적 페이지 만들기

   애니메이션은 하나도 넣지 않습니다. 먼저 타이포그래피, 간격, 그리드를 작업하세요. 에이전트에게 로컬 미리보기를 시작해 달라고 한 뒤 제공된 주소를 여세요. 휴대폰에서 보고 싶다면 “네트워크의 다른 기기에서도 열 수 있게 실행해 줘”라고 말하면 에이전트가 주소를 알려줍니다.

6. 모션 장면 하나 추가하기

   하나만 추가하세요. 보통은 첫 화면입니다. 헤드라인이 나타나고 배경 레이어가 전경보다 천천히 움직입니다. 라이브러리의 llms.txt를 에이전트에게 제공하고 무엇이 어디서 몇 밀리초 동안 움직이는지 구체적으로 설명하세요. 첫 화면에서는 opacity를 그대로 두세요. 이유는 아래 별도 섹션에서 설명합니다.

7. 모션 감소 규칙 추가하기

   접근성 섹션의 CSS 규칙과 JavaScript 동작 줄이기 설정을 모두 적용하세요. 게시 전에 동작 줄이기를 켠 상태에서 페이지를 확인하세요.

8. 게시하고 속도 확인하기

   Vercel, Netlify, GitHub Pages 같은 무료 정적 호스팅 서비스에 게시하세요. 에이전트에게 “이 프로젝트를 Vercel에 게시하고 링크를 알려 줘”라고 요청하세요. 게시한 뒤에야 결과 URL을 PageSpeed Insights에 입력할 수 있습니다. 이 서비스는 공개 URL에서 작동하며 로컬 페이지에는 접근하지 못합니다. “Largest Contentful Paint”를 확인하세요. 가장 큰 요소가 렌더링되는 시간이며, 녹색 구간은 최대 2.5초입니다. 게시 전에 에이전트가 로컬 버전을 측정할 수도 있습니다. Chrome DevTools MCP가 페이지를 Chrome에서 열어 같은 지표를 보여줍니다.

여섯 번째 단계는 앞의 다섯 단계에서 한 일을 망치기 가장 쉬운 부분입니다.

과도한 애니메이션은 왜 웹사이트를 더 AI 생성물처럼 보이게 할까요?#

이 주제에 관심을 가진 거의 모든 사람의 사고가 무너지는 지점입니다. 애니메이션이 너무 적으면 싸구려처럼 보이니 더 넣어야 한다고 생각합니다.

디자인을 개선하려고 설치한 바로 그 frontend-design 스킬에 나오는 말입니다. Anthropic은 에이전트가 페이지를 꾸밀 때 사용하는 도구 안에서 과도한 애니메이션을 경고합니다.

그 밖에 흔한 기법도 나열합니다. 어떤 작업이든 큰 숫자에 작은 캡션과 그라데이션 포인트를 더하는 방식으로 대응하는 것, 실제로 순서가 있을 때만 적절한 01 / 02 / 03 형식의 번호 매긴 블록 등입니다.

실제로 과도한 애니메이션은 이런 모습입니다. 에이전트에게 “애니메이션을 추가해”라고 요청하면 모든 섹션에 스크롤 표시 효과를 넣습니다. 제목이 미끄러져 들어오고, 카드 세 개가 하나씩 튀어나오고, 후기들이 옆에서 들어오고, 바닥글이 서서히 나타납니다. 효과는 각각 따로 보면 괜찮습니다. 하지만 함께 있으면 페이지가 멈추지 않고 움직이며 아무것도 강조되지 않습니다.

실제 웹사이트는 다르게 작동합니다. 보통 첫 화면에 의도된 장면 하나를 넣고 그 뒤에는 절제합니다. 움직임은 강조처럼 작동합니다. 한 단어에만 적용하면 의미가 있습니다.

그러므로 프롬프트 규칙은 이렇게 됩니다. “첫 화면에 장면 하나를 만들고 나머지는 모두 정적인 상태로 두세요.” “애니메이션을 추가해”와 몇 단어만 다르지만 결과는 훨씬 좋아집니다.

애니메이션은 웹사이트 속도를 어떻게 떨어뜨릴까요?#

Google이 페이지를 평가하는 데 사용하는 세 가지 지표는 가장 큰 요소를 렌더링하는 시간(최대 2.5초), 상호작용에 대한 반응 시간(최대 200밀리초), 레이아웃 이동(최대 0.1)입니다. 실제 방문의 75번째 백분위수에서 측정합니다.

이 점이 여기서 왜 중요한지 풀어 보겠습니다. 에이전트는 기본적으로 섹션의 opacity를 0으로 설정한 다음 섹션이 뷰포트에 들어오면 그 설정을 제거하는 표시 효과를 만듭니다. 그 효과가 첫 화면에 있다면 이미지가 완전히 로드되고 디코딩되었더라도 렌더링이 시작될 때까지 지표에 포함되지 않습니다. 스크립트가 로딩 후 opacity를 제거한다면 상황은 더 나쁩니다. 지표가 스크립트 전체가 끝날 때까지 기다립니다.

해결 방법은 두 가지입니다. opacity를 0이 아니라 작은 값으로 시작해 초기 렌더링이 계산되도록 합니다. 또는 첫 화면의 opacity는 그대로 두고 이동만 애니메이션합니다.

두 번째 문제는 어떤 속성은 애니메이션하기 저렴하고 어떤 속성은 비싼가 하는 것입니다.

쉽게 말해 브라우저는 이미지를 레이어로 구성합니다. 위치와 opacity 변경은 가장 마지막이자 비용이 가장 낮은 단계에서 일어납니다. 그 밖의 변경은 모두 페이지를 다시 계산하게 합니다. 같은 문서에 나온 측정 결과에 따르면 top과 left 오프셋을 애니메이션하면 레이아웃에 37밀리초, 렌더링에 79밀리초가 걸립니다. transform으로 같은 시각 효과를 만들면 두 작업 모두 0밀리초입니다.

기억해야 할 모순도 있습니다. opacity는 합성 비용이 낮지만 요소를 속도 지표에서 제외합니다. 그러므로 브라우저에 저렴한 애니메이션과 성능에 안전한 애니메이션은 서로 다른 것입니다.

에이전트가 ‘최적화’를 위해 여기저기 뿌리는 will-change 속성에 대해서도 한 가지 더 알아둘 점이 있습니다. MDN 문서는 정반대로 말합니다.

또한 이 속성은 이미 있는 성능 문제를 해결하기 위한 최후의 수단이라고 설명합니다. 예방 목적으로 사용하는 기능이 아닙니다. 요소 50개에 will-change: transform, opacity를 넣는 것은 생성된 코드의 전형적인 표시입니다.

레이아웃 이동은 더 단순합니다. Google 문서는 애니메이션을 탓하지 않습니다. 오히려 세심한 전환은 독자를 놀라게 하지 않으면서 콘텐츠를 업데이트하는 데 도움이 됩니다. 방법은 같습니다. 너비와 높이 대신 transform으로 크기를 바꾸고 좌표 대신 오프셋으로 이동하세요.

움직임 때문에 신체적 피해를 입는 사람은 어떻게 하나요?#

이 섹션은 예의를 갖추는 것 이상의 이유로 중요합니다. 사업주에게서 물건을 구매하는 고객층은 바로 40세 이상입니다.

W3C 컨소시엄은 결과를 완곡하게 표현하지 않습니다. 메스꺼움과 편두통이 생기며, 때로는 누워 있어야 할 정도로 심각합니다.

스타일 세 줄로 이에 대응할 수 있습니다.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

기억할 점은 세 가지입니다.

애니메이션을 기본 동작으로 작성하고 이 규칙 안에서 비활성화하세요. 반대로 하는 것보다 페이지가 더 안전하게 기능을 저하시킬 수 있습니다.

명세는 “제거, 감소 또는 대체”라고 합니다. 완전히 없애는 것이 첫 번째 선택지도 아닙니다. 날카로운 슬라이드 인을 짧은 페이드로 바꾸는 편이 통째로 끊는 것보다 낫습니다. 모든 애니메이션을 비활성화하면 로딩 표시기와 진행 막대가 작동하지 않게 됩니다.

JavaScript 애니메이션은 별도의 설정 처리가 필요합니다. CSS의 지속 시간 변경은 GSAP 타임라인을 취소하지 않습니다. matchMedia(...).matches를 변수에 저장하는 것만으로는 아무 효과가 없고 설정에서 분기해야 합니다. GSAP에서는 일반 HTML/CSS에서 요소를 보이게 두고 사용자가 허용할 때만 움직임을 만드세요.

// GSAP과 페이지 요소가 로드된 뒤 실행합니다.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// 페이지나 컴포넌트 제거 시 cleanupMotion()을 호출합니다.

제목의 기본 스타일을 숨기거나 이동시키지 마세요. 동작 줄이기를 켜면 정적으로 보이는 상태를 유지합니다. 페이지를 연 상태에서 설정이 바뀌면 쿼리가 일치하지 않을 때 GSAP이 애니메이션을 되돌립니다. mm.revert()는 종료 시 수집한 애니메이션도 제거합니다. Motion도 해당 라이브러리 설정에서 같은 분기를 구현해야 하며 CSS만으로는 부족합니다. GSAP matchMedia 수명주기와 정리 문서를 참고하세요.

공식 접근성 기준도 기억해야 합니다. A등급 기준인 WCAG 2.2.2는 무언가가 자동으로 움직이거나, 깜박이거나, 스크롤되고 5초 넘게 지속되며 다른 콘텐츠와 함께 표시되는 경우 사용자가 이를 멈출 수 있어야 한다고 요구합니다. 이는 에이전트가 자주 넣는 자동 회전 캐러셀과 무한 마퀴에도 적용됩니다.

문제가 생기는 일곱 가지 지점#

1. 첫 화면이 페이드 인될 때까지 숨겨져 있습니다. opacity가 0인 요소는 렌더링 지표의 후보로 계산되지 않습니다. 검색 순위에 영향을 주는 지표를 해치므로 가장 큰 손실을 일으키는 실수입니다.

2. 모든 요소에 애니메이션을 적용합니다. 모든 섹션이 미끄러져 들어오고 모든 카드가 튀어나옵니다. Anthropic은 이것이 생성된 디자인이라는 인상을 강화한다고 분명히 말합니다.

3. 스크롤재킹. 웹사이트가 마우스 휠의 일반적인 동작을 자체적인 ‘영화 같은’ 방식으로 대체하는 것입니다.

같은 연구에서 참가자 대부분은 적어도 약한 방향 감각 상실을 경험했습니다.

4. 레이아웃 속성을 애니메이션합니다. transform 대신 좌표와 크기를 변경합니다. 37밀리초와 79밀리초가 필요한 작업이 transform을 쓰면 0밀리초입니다.

5. 애니메이션이 너무 깁니다. 유용한 시간 범위는 100~400밀리초이며, 400밀리초도 이미 매우 느려 큰 움직임에만 적합합니다. 에이전트는 기본값으로 1초 전체를 사용하는 경향이 있습니다.

그의 조사에 따르면 적절한 범위는 100~400밀리초입니다. 400밀리초도 이미 매우 느려 큰 움직임에만 적합합니다. 에이전트는 기본값으로 1초 전체를 즐겨 사용합니다.

6. 모션 감소 규칙이 없습니다. 에이전트는 스스로 추가하지 않습니다.

7. 상호작용할 때마다 웹사이트가 느려집니다. 특히 React에서 발생합니다. 요소에 대한 참조 없이 정리도 하지 않은 채 애니메이션을 만들면 컴포넌트가 업데이트될 때마다 애니메이션이 늘어납니다. 페이지가 점차 뚜렷한 이유 없이 느려집니다.

여덟 번째 함정도 있습니다. “에이전트가 스크린샷을 찍고 보이는 것을 고치는” 방식은 정적 페이지에서 잘 작동하지만, 애니메이션 요소에서는 에이전트를 끝없는 수정 루프에 가둡니다. 중간 프레임을 버그로 착각해 고치면 또 다른 중간 프레임이 보입니다. 게다가 스크린샷을 찍을 때마다 컨텍스트를 소모합니다.

비용은 얼마이며 웹사이트 하나에 한 달 사용량을 다 쓰지 않으려면 어떻게 해야 할까요?#

영어권 바이브 코딩 커뮤니티에서 흔히 들리는 이야기입니다. 누군가 공간을 가로지르는 스크롤이 있는 화려한 페이지를 만들고 결과를 올립니다. 그러면 토론에서 그 사이트 하나가 월간 할당량 전체를 썼다는 사실이 드러납니다.

그럴 만합니다. 여러 이유로 애니메이션 작업은 일반적인 레이아웃 작업보다 비용이 더 많이 듭니다. 코드를 읽어서 결과를 확인할 수 없으므로 반복 작업이 필요합니다. 수정할 때마다 파일을 다시 읽습니다. 움직이는 요소를 대상으로 스크린샷 루프까지 돌리면 불필요한 작업이 더해집니다.

도움이 되는 방법은 다음과 같습니다.

한 번에 장면 하나를 만들고 결과를 확정하세요. “사이트 전체에 애니메이션을 추가해”라는 일괄 요청은 과도한 사용을 보장합니다. 애니메이션 요소의 스크린샷 검증을 끄고 직접 눈으로 확인할 수 있습니다. 매 요청마다 규칙이 컨텍스트를 소모하지 않도록 CLAUDE.md를 짧게 유지하세요. 그리고 라이브러리의 llms.txt를 미리 제공하세요. 그렇지 않으면 에이전트가 오래된 연결 방식을 지어낸 다음 자기가 만들어 낸 문제를 디버깅합니다.

Claude Code가 프로젝트 전체를 다시 읽는 이유에서는 프로젝트를 작업할 때 토큰이 어디에 쓰이는지 설명합니다. Claude Code 사용 한도를 소진하지 않는 방법에서는 사용량을 관리하는 방법을 다룹니다.

다음에는 무엇을 할까요?#

여덟 단계를 따라 첫 페이지를 만드세요. 시각적 방향 하나를 선택하고, 첫 화면에 장면 하나를 만들고, 속도를 점검하세요.

다음 단계는 Ailoot에서 확인하세요.