Claude Design은 자연어 프롬프트만으로 애니메이션이 살아 움직이는 랜딩페이지·프로토타입·슬라이드를 만들 수 있는 Anthropic의 AI 디자인 도구예요. 2026년 4월 18일 출시됐고, 엔진은 Claude Opus 4.7입니다.
이 글에서는 Viktor Oddy가 공유한 워크플로우를 정리해봤습니다. 배경에 영상이 흐르고, 액체 유리(Liquid Glass) UI가 떠 있고, 섹션마다 자연스러운 모션이 이어지는 랜딩페이지를 4단계로 만드는 법이에요.
핵심 메시지는 하나입니다 — 한 번에 완벽하게 만들려 하지 말고, Opus 4.7로 좋은 첫 드래프트를 잡은 뒤 조금씩 다듬는 것. 이게 80%를 결정합니다.
준비물
Claude Pro 이상 구독 (Pro/Max/Team/Enterprise) — claude.ai/design 접속용
Nano Banana 2 계정 — 배경 이미지 생성용
Kling 3.0 계정 — 정지 이미지를 영상으로 변환
Dribbble / Pinterest 스크린샷 — 원하는 UI 레퍼런스 모음
(선택) Motion Sites Backgrounds 같은 무료 영상 소스
Step 1: Opus 4.7로 첫 빌드 — 성공의 80%가 결정되는 단계
claude.ai/design에 접속해서 Website 옵션을 선택합니다.
먼저 미리 준비한 타이포그래피 세트를 프롬프트 첫머리에 붙여넣습니다. 이게 있으면 첫 결과물의 톤이 훨씬 안정적이에요.
프롬프트 예시: 현대적이고 세련된 애니메이션 웹사이트를 만들어줘요. [원하는 스타일] 스타일로, 주제는 [주제]예요. 아직 비디오 요소는 넣지 말고, 우아한 타이포그래피와 은은한 모션만 사용해서 고급스럽게 디자인해줘요.
여기서 가장 중요한 팁: 반드시 Opus 4.7로 시작합니다. 토큰을 좀 더 쓰더라도 첫 결과물 퀄리티가 비교가 안 될 정도로 좋아요. 나중에 수정 작업이 압도적으로 수월해지기 때문에 결과적으로는 토큰도 절약됩니다.
이 단계에서 80%의 방향성이 결정되니까, 첫 결과물이 마음에 들지 않으면 같은 프롬프트로 한 번 더 생성하세요.
Step 2: Nano Banana 2 + Kling 3.0으로 비주얼 입히기
뼈대가 잡히면 이제 살아 움직이는 느낌을 더할 차례예요.
배경 이미지 생성: Nano Banana 2
먼저 배경에 깔 이미지를 Nano Banana 2로 만듭니다. 프롬프트 예시: 다크 그라데이션 배경, 보라-파랑 톤, 미세한 입자가 떠다니는 분위기, 시네마틱한 깊이감, 4K 해상도
Nano Banana 2는 빛 처리와 디테일이 강해서 분위기 있는 결과물이 나와요.
정지 이미지 → 영상: Kling 3.0
생성된 이미지를 Kling 3.0에 업로드해서 애니메이션화합니다. Kling의 강점은 물리 법칙을 잘 반영한 자연스러운 모션이에요. 영상을 직접 만들 시간 이 없다면 Motion Sites Backgrounds 같은 무료 사이트에서 가져와도 됩니다.
Claude Design에 영상 적용
영상 URL이 준비됐으면 Claude Design에 이렇게 말합니다: Replace the background video with this URL: [영상 URL] — URL만 주면 자동으로 적용돼요.
Step 3: Dribbble 스크린샷으로 디자인 시스템 통일
이게 가장 강력한 단계예요. Claude Design의 진짜 강점은 비전 능력이라서, 이미지를 업로드하고 구체적으로 지시하면 텍스트 프롬프트로는 표현하기 어려운 디테일까지 잡아냅니다.
UI 레퍼런스 모으기
Dribbble이나 Pinterest에서 마음에 드는 요소를 스크린샷으로 찍습니다. 특히 효과가 좋은 건:
액체 유리(Liquid Glass) 효과 — 반투명한 카드, 흐릿한 배경 블러
버블 애니메이션 — 둥둥 떠다니는 인터랙티브 요소
글래스모피즘 네비게이션 바 — 스크롤 시 살짝 흐려지는 헤더
Claude에 업로드 + 구체적 지시
스크린샷을 Claude Design에 업로드하고, 추상적인 표현 대신 위치·스타일·색상을 정확히 짚어서 지시하세요. 예시: 히어로 텍스트 아래에 이 두 개의 리퀴드 글래스 UI 요소를 추가해줘요. 정확히 navbar와 같은 스타일과 색상으로 맞춰서 넣고, 전체 디자인 시스템을 완벽하게 일관되게 유지해주세요.
디자인 시스템이 자동으로 잡힙니다
Claude Design은 기존 코드베이스를 읽고 색상·타이포그래피·컴포넌트를 자동으로 추출합니다. 이후에 만드는 모든 섹션이 같은 브랜드 느낌으로 나오게 돼요.
수정은 가볍게 — Sonnet으로 전환
이 단계부터는 굳이 Opus 4.7을 쓸 필요가 없어요. Sonnet으로 바꿔서 가벼운 수정만 돌리면 토큰 효율이 훨씬 좋습니다. draw/select tool로 정확히 바꾸고 싶은 부분을 가리키면 Claude가 더 잘 이해합니다.
Step 4: 나머지 섹션 채우기 — 한 번에 다 하지 말 것
히어로 섹션이 완성되면 같은 패턴을 반복합니다:
원하는 레이아웃을 Dribbble/Pinterest에서 스크린샷
Nano Banana 2로 우리 톤에 맞게 재생성
Kling 3.0으로 애니메이션 부여
Claude Design에 업로드 후 디자인 시스템 일관성 유지하며 추가
가장 중요한 메시지: 한 번의 프롬프트로 모든 섹션을 만들려 하지 마세요. 섹션별로 조금씩 다듬는 접근이 핵심입니다.
완성된 사이트는 Claude Code로 핸드오프해서 바로 실제 프로덕션 코드로 변환할 수 있어요.
결과
이 워크플로우대로 따라 하면 한 명이 몇 시간 만에 수상급(award-winning) 느낌의 애니메이션 랜딩페이지를 만들 수 있습니다. 기존에 외주를 주거나 Figma에서 며칠 작업하던 결과물이, 이제는 Claude Design + 보조 도구 2개로 한 세션에 끝나는 거죠.
주의할 점
토큰 소모가 빠릅니다: Opus 4.7은 강력한 만큼 토큰을 많이 씁니다. Pro 이상 플랜에서 여유롭게 작업하세요.
첫 빌드에서 너무 욕심내지 말기: 1단계는 깔끔한 뼈대만. 한 번에 다 넣으려 하면 결과가 산만해집니다.
모델 전환 타이밍: Opus 4.7은 시작 단계만, 수정은 Sonnet. 끝까지 Opus만 쓰면 비용이 빠르게 늘어요.
레퍼런스 너무 많이 던지지 말기: 한 번에 1~2장씩. 5장 이상이면 Claude가 우선순위를 잃습니다.
원문: https://x.com/viktoroddy/status/2045492112054165813
참고: Anthropic 공식 발표 — Claude Design
