본문으로 건너뛰기

Claude로 아름답고 최첨단인 사이트를 빠르게 출시하기

중급

한 줄짜리 아이디어에서 배포된, 정말로 보기 좋은 사이트까지 한 번에 갈 수 있습니다. 비결은 프롬프트를 더 많이 쓰는 게 아니라 — 올바른 프롬프트 뼈대에 빠른 스택과 촘촘한 마무리 루프를 더하는 것입니다. 이 페이지가 그 레시피입니다.

What you'll learn
  • 올바른 표면 선택하기: 즉석 앱을 위한 Artifacts vs. 실제로 배포 가능한 저장소를 위한 Claude Code
  • Anthropic의 frontend-aesthetics 시스템 프롬프트로 'AI 슬롭' 기본값 이기기
  • 아래 Steps로 아이디어에서 배포까지의 워크플로 실행하기
  • 시니어 프로덕트 디자이너가 브리핑한 것처럼 읽히는 복사-붙여넣기용 빌드/개선 프롬프트 훔치기
  • 타이포그래피, 모션, 반응형 다듬기 — 그다음 Vercel, Netlify, 또는 GitHub Pages에 배포하기

먼저 표면을 선택하세요​

무엇을 최종 결과물로 원하느냐에 따라, 매우 다른 두 가지 빠른 경로가 있습니다:

  • Claude Artifacts — 앱을 설명하면 Claude가 채팅 안에서 라이브로 실행되는 자체 완결형 React/HTML 아티팩트를 렌더링합니다. 설정 제로, 공유 가능한 링크, 프로토타입·내부 도구·계산기·랜딩 페이지 목업에 완벽합니다. 기본적으로 아티팩트는 자체 완결형 로직으로 실행됩니다; MCP를 통해 외부 서비스에 접근할 수는 있지만, 당신이 소유하는 저장소는 아닙니다.
  • Claude Code + 프레임워크 — Claude가 당신의 머신에서 실제 코드베이스(Next.js / Astro / Tailwind / shadcn/ui)를 병렬로 스캐폴딩하고 편집하며, 당신은 그것을 커밋하고 배포합니다. 결과물을 소유하고, 확장하고, 출시하고 싶을 때의 경로입니다.
Pro tip
  • Artifact에서 60초 만에 룩을 프로토타이핑한 다음, Claude Code에게 그것을 실제 Next.js + Tailwind 저장소로 다시 만들라고 하세요. 즉각적인 피드백 그리고 배포 가능한 코드베이스를 동시에 얻습니다.
  • Claude Design (Anthropic Labs, 리서치 프리뷰)은 시각적 캔버스와 지속되는 디자인 시스템을 더하고, Claude Code로의 핸드오프를 제공합니다 — 디자인 도구 안에서 사는 사람에게 유용합니다.

훌륭함과 평범함을 가르는 단 하나​

기본값에 맡겨두면, Claude는 커뮤니티가 **"AI 슬롭"**이라 부르는 것으로 수렴합니다: Inter 폰트, 흰 배경 위 보라색 그라디언트, 균일하게 둥근 카드 세 개. Anthropic 자신의 frontend-aesthetics 쿡북은 그 이유를 직설적으로 말합니다 — 그리고 해법은 당신이 신경 쓰는 차원과 피해야 할 기본값을 명시적으로 이름 붙이는 것입니다.

안티-슬롭 치트시트
Enter 또는 스페이스 키를 눌러 카드를 뒤집습니다. 좌우 화살표 키로 카드를 이동할 수 있습니다.용어가 표시되었습니다.
1 / 4

가장 레버리지가 큰 수는, 빌드 시작 시점에 Anthropic의 <frontend_aesthetics> 블록(또는 당신 자신의 DESIGN.md)을 붙여넣어, 모델이 CSS 한 줄을 쓰기 전에 무엇을 피해야 하는지 알게 하는 것입니다.

안티-슬롭 시스템 블록 (모든 UI 빌드 전에 붙여넣기)

<frontend_aesthetics>
You converge toward generic, "on-distribution" output — the "AI slop" aesthetic. Avoid it.
Typography: choose a distinctive, beautiful font (NOT Inter/Roboto/Arial). Use it decisively.
Color & theme: commit to ONE cohesive aesthetic via CSS variables; dominant colors + sharp accents, not a timid even palette. No purple-gradient-on-white.
Motion: prioritize one orchestrated page-load with staggered reveals over scattered micro-interactions. CSS-only for HTML; Motion for React.
Backgrounds: build atmosphere/depth with layered gradients or patterns — never a flat solid.
Make unexpected, context-specific choices. Think outside the box.
</frontend_aesthetics>

아이디어에서 배포된 사이트까지​

Guided walkthrough1 of 6
  1. 한 메시지에 Claude에게 주세요: 사이트가 무엇인지, 섹션들, 청중, 그리고 이름 붙여진 미감 방향 하나(예: '따뜻한 에디토리얼, Notion과 인쇄 잡지가 만난 느낌'). 모호한 브리프는 모호한 사이트를 낳습니다.

시니어 디자이너가 브리핑한 것처럼 읽히는 빌드 프롬프트​

구체적인 전문가 역할로 시작하면 산출물 품질이 측정 가능하게 올라가고 편차가 줄어듭니다. 미감, 스택, 상태에 대해 구체적이 되세요.

원샷 빌드: 실제 Next.js + Tailwind + shadcn 사이트

You are a senior product designer + frontend engineer.
Build a Next.js (App Router) + Tailwind + shadcn/ui marketing site for <PRODUCT>.
Aesthetic: <ONE named direction, e.g. "editorial minimalism, Linear/Stripe energy">.
Typography: one distinctive display face + one mono/sans for body — NOT Inter.
Sections: hero, social proof, 3 feature blocks, pricing, FAQ, footer.
Requirements: fully responsive (mobile-first), dark mode, one orchestrated
page-load animation with staggered reveals, accessible (WCAG AA contrast).
Write DESIGN.md first with the color/type/spacing tokens, then build.
Scaffold files in parallel; show me the tree, then implement.

즉석 Artifact 프로토타입 (채팅, 설정 없음)

Create an interactive Artifact: a single-page landing for <IDEA>.
Make it genuinely beautiful, not generic AI slop — distinctive font (not Inter),
a committed color theme via CSS variables, layered gradient background,
and a staggered fade-in on load. Mobile-responsive. Self-contained HTML/React.

개선: 평범한 느낌 죽이기

Critique this UI as a senior product designer and list the 5 "AI default"
fingerprints it still has (font, spacing, color, layout cliché, motion).
Then redesign it around ONE bold aesthetic choice. Increase type contrast
(weight + size extremes), commit to a dominant color with a sharp accent,
and replace scattered hover effects with one orchestrated entrance.

값비싸 보이게 만드는 다듬기​

Pro tip
  • 타이포그래피는 가장 저렴한 업그레이드입니다: 개성 있는 Google Font + 디스플레이와 본문 사이 3배 이상의 크기 점프는 즉시 '디자인됨'으로 읽힙니다.
  • 모션: 열 개의 작은 호버보다 하나의 훌륭한 순간(animation-delay를 지닌 조율된 로드)에 투자하세요.
  • 반응형: Claude에게 모바일, 긴 텍스트, 빈 상태, 로딩, 오류 상태를 처리하라고 명시적으로 요청하세요 — 기본적으로 이것들을 건너뜁니다.
  • 깊이: 겹쳐진 CSS 그라디언트나 미묘한 그레인/패턴이 매번 밋밋한 배경을 이깁니다.
  • Claude는 자신의 산출물을 볼 수 없다는 걸 기억하세요 — 개선 루프가 수렴하도록 스크린샷을 붙여넣거나 무엇이 잘못됐는지 묘사하세요.
Watch out
  • '아름답게 만들어' 단독으로는 성능이 떨어집니다 — 프롬프트 판 기본값과 같습니다. 대신 미감, 폰트 정책, 피해야 할 기본값을 이름 붙이세요.
  • 실제 사이트에서는 하나의 거대한 프롬프트로 모든 걸 원샷에 만들게 두지 마세요; DESIGN.md와 함께하는 섹션별 방식이 더 통제 가능하고 토큰을 더 잘 씁니다.
  • AI가 생성한 마케팅 주장, 통계, 스톡 카피는 초안으로 취급하세요 — 게시하기 전에 검증하세요.

몇 분 만에 배포하기​

  • Vercel — Next.js에 최적. GitHub 저장소를 연결하면; 푸시마다 자동으로 빌드·배포되고 브랜치별 프리뷰 URL이 생깁니다.
  • Netlify — 프레임워크에 구애받지 않고, 동일한 git-푸시-투-디플로이 흐름, 넉넉한 정적 호스팅.
  • GitHub Pages — 저장소에서 곧바로 무료 정적 호스팅; 정적 익스포트(Next.js output: "export", 또는 Astro 빌드)와 짝지어 비용 제로의 라이브 사이트를 만드세요. (바로 이 사이트가 이 방식으로 게시됩니다.)

배포 연결하기

Set up this repo for deployment:
1. Add a sensible .gitignore and a README with run/build/deploy steps.
2. Configure a production build (static export if targeting GitHub Pages).
3. Give me the exact steps to connect Vercel (or Netlify) for auto-deploy on push,
 and a GitHub Actions workflow as a fallback. Don't commit any secrets.

스스로 점검하기​

스스로 점검하기

0/4
  1. 설정 제로로 60초 안에 라이브로 공유 가능한 프로토타입을 원합니다. 어느 표면?
  2. Anthropic의 frontend-aesthetics 가이드에 따르면, 피해야 할 전형적인 'AI 슬롭' 기본값은?
  3. 여러 프롬프트/세션에 걸쳐 사이트의 룩을 일관되게 유지하는 권장 방법은?
  4. Anthropic은 최대의 기쁨을 위해 모션 예산을 어디에 쓰라고 제안하나요?
Key takeaways
  • 표면을 선택하세요: 즉석 프로토타입엔 Artifacts, 소유하고 배포 가능한 사이트엔 Claude Code + 프레임워크.
  • 미감, 폰트 정책, 피해야 할 기본값을 이름 붙여 'AI 슬롭'을 이기세요 — Anthropic의 frontend_aesthetics 블록을 붙여넣으세요.
  • CLAUDE.md가 코드에 하는 것처럼, DESIGN.md를 지속시켜 세션 간에 룩이 일관되게 유지하세요.
  • 시니어 디자이너로 역할 프롬프팅하고, 섹션별로 빌드하고, 건너뛰어진 상태들(모바일, 로딩, 빈 상태, 오류)을 요구하세요.
  • 모션 예산을 조율된 로드 하나에 쓰세요; git-푸시로 Vercel/Netlify에 배포하거나 GitHub Pages에 정적 익스포트하세요.

출처 & 더 읽을거리​