AI 웹사이트 제작 방법 | Claude Opus 4.6 + Figma Make 프롬프트 9가지
솔직히 처음 이 소식 들었을 때 “설마…” 했습니다.
118분. 약 두 시간. 그 시간 안에 디자이너·개발자 없이, 프리랜서 에이전시 기준 500만 원을 호가하는 웹사이트를 혼자 완성했다는 거잖아요.
그냥 넘어가기엔 너무 아까운 이야기입니다.
해외 디자이너 Nainsi Dwivedi가 X(트위터)에 공개한 이 방법은 Claude Opus 4.6과 Figma Make 두 가지 도구를 조합한 겁니다.
100개 이상의 프롬프트를 직접 테스트한 끝에 ‘진짜 되는’ 9가지만 공개했고, 오늘 저는 그걸 알기 쉽게 정리해서 워크플로우로 안내해드립니다.
AI 웹사이트 제작에 도움이 되길 바랍니다.
- 클로드 코드로 랜딩페이지 디자인부터 배포까지: 인테리어 페이지 5분 완성기
- 러버블 코딩으로 노코드 웹사이트 5분 만에 완성하기
- 피그마와 러버블 연결하기: 디자이너가 코딩 없이 웹 앱 만드는 법
- Claude Code 웹사이트 만들기 완전 정복 | 2026 바이브 코딩 입문 가이드
목차
AI 웹사이트 제작에 Claude Opus 4.6을 써야 하는 이유
AI 글쓰기 도구는 많습니다. 그런데 웹사이트 설계 수준의 복잡한 작업을 처음부터 끝까지 혼자 처리할 수 있는 모델은 아직 드뭅니다.
Claude Opus 4.6은 Anthropic이 2026년 2월에 출시한 최신 플래그십 모델입니다.
코딩, 에이전트 작업, 전문 업무에서 현재 세계 최고 수준의 성능을 보여주고 있는데, 특히 AI 웹사이트 제작 워크플로우에 유리한 특징들이 있습니다.
Claude Opus 4.6 핵심 스펙:
- 200K 컨텍스트 윈도우 (1M 베타 제공 중) : 수십 페이지짜리 기획서를 한 번에 처리
- 128K 출력 토큰 : 전체 웹사이트 스펙을 한 방에 생성, 이전 64K 대비 두 배
- Adaptive Thinking : 문제 복잡도에 따라 사고 깊이를 자동 조절, 수동 설정 불필요
- Agent Teams : 여러 Claude 인스턴스가 병렬 협업하는 멀티에이전트 구조
- Context Compaction : 긴 작업 중 자동 컨텍스트 요약, 성능 저하 없이 이어가기
지금 당장 Claude Opus 4.6을 써보고 싶다면 Anthropic 공식 사이트(claude.ai)에서 무료로 시작할 수 있습니다. Opus 모델은 Pro 플랜에서 사용 가능합니다.
1인 개발자나 스타트업이라면 피그마-러버블 조합으로 개발 비용을 획기적으로 줄일 수 있습니다.
Figma Make로 웹사이트를 무료로 만들 수 있는 방법
Figma라는 이름은 많이 들어봤을 겁니다. 디자이너들이 쓰는 그 툴 맞습니다. 그런데 Figma Make는 완전히 다른 이야기입니다.
프롬프트 한 줄이면 레이아웃, 반응형 구조, 인터랙션까지 자동 생성됩니다. 코딩은 필요 없고, 디자인 경험이 없어도 됩니다.
AI 웹사이트 제작 방법 중 가장 빠르게 결과물을 볼 수 있는 도구입니다.
Figma Make가 특별한 이유:
- Prompt to Website: 텍스트 입력만으로 완성도 높은 레이아웃 즉시 생성
- Supabase 연동: 실시간 데이터 연결로 로그인·대시보드 같은 동적 기능 구현
- Figma Sites 배포: 별도 호스팅 없이 디자인한 사이트를 바로 퍼블리싱
- 기존 Figma 파일 호환: 이미 만들어둔 디자인 파일을 그대로 Make로 가져와 편집
Figma Make 무료 사용 방법은 figma.com/make에서 Figma 계정만 있으면 바로 시작됩니다.
완성된 사이트 배포까지 원한다면 Figma Sites를 함께 활용하면 디자인부터 퍼블리싱까지 플랫폼 이탈 없이 끝낼 수 있습니다.
핵심 구조: Claude Opus 4.6이 “두뇌”(설계·로직·콘텐츠), Figma Make가 “손”(시각화·배포)을 담당합니다. 두 도구의 역할 분담이 AI 웹사이트 제작 118분 완성의 핵심입니다.
Claude Opus 4.6 프롬프트 9가지 단계별 완전 분석
프롬프트 1: 아키텍처 전략가
역할 설정: “Vercel의 수석 아키텍트”
웹사이트 제작의 첫 단추입니다. 이 프롬프트 하나로 Figma Make에 넘길 기술 명세서 전체를 Claude가 작성해줍니다. 빈 칸 채우기처럼 쓰면 됩니다.
You are a Principal Architect at Vercel. I need to build a [WEBSITE TYPE].
Requirements:
- Target audience: [DESCRIBE]
- Key features: [LIST 3-5]
- Tech considerations: [RESPONSIVE/SEO/PERFORMANCE]
Deliver:
- Site map (all pages with hierarchy)
- User flows (3 primary journeys)
- Data models
- API requirements
- Component inventory (30+ components)
- Page templates (wireframe descriptions)
- Technical stack recommendation
- Performance budgets
- SEO structure (meta templates, URL patterns)
Format as a technical specification I can hand to Figma Make.
실전 팁: [WEBSITE TYPE]에 “한국 소상공인 맞춤형 예약 사이트”, [TARGET AUDIENCE]에 “30~50대 자영업자, 모바일 우선 사용자”처럼 구체적으로 채울수록 AI 웹사이트 제작 품질이 달라집니다.
클로드 코드로 인테리어 랜딩페이지를 5분 만에 만든 방법을 알고 싶다면,
👉 클로드 코드로 랜딩페이지 디자인부터 배포까지: 인테리어 페이지 5분 완성기
프롬프트 2: 디자인 시스템 생성기
역할 설정: “Apple의 디자인 디렉터”
브랜드 정체성 전체를 JSON 토큰 형식으로 추출하는 프롬프트입니다.
출력물을 Figma Make에 붙여넣기만 해도 시각 시스템이 자동 완성됩니다.
You are a Design Director at Apple. Create a design system for [BRAND].
Brand attributes: [MINIMAL/BOLD/LUXURY/PLAYFUL]
Generate:
- Color palette (primary, secondary, semantic, dark mode)
- Typography scale (9 levels with font recommendations)
- Spacing system (8px base grid)
- Component specs (30 components with states)
- Layout patterns (responsive breakpoints)
- Animation guidelines (easing, duration)
- Accessibility requirements (WCAG AA)
Export as:
- Design tokens (JSON)
- CSS variables
- Figma-ready component descriptions
실전 팁: 한국 브랜드 적용 시 Brand attributes에 “MINIMAL, 한국적 미감, 화이트 & 포인트 컬러 기반”으로 입력하면 네이버 쇼핑·무신사 스타일의 디자인 시스템이 나옵니다.
프롬프트 3: 콘텐츠 아키텍트
역할 설정: “Ogilvy의 전환율 최적화 카피라이터”
웹사이트 전체 카피를 한 번에 뽑습니다. 단순 텍스트가 아니라 H1/H2 구분, 글자 수 지정, 감정 트리거 포함된 실무 수준의 콘텐츠 명세서입니다.
You are a Conversion Copywriter at Ogilvy. Write all copy for a [WEBSITE TYPE].
Brand voice: [PROFESSIONAL/CASUAL/BOLD]
Target: [AUDIENCE]
Goal: [CONVERSION/AWARENESS/RETENTION]Deliver for each page:
- Hero section (headline: 6 words, subhead: 15 words, CTA)
- Feature sections (3 blocks with headlines + descriptions)
- Social proof (testimonial framework + stats)
- FAQ section (8 questions with answers)
- Footer (navigation, social, legal)
Formatting instructions:
- Use emotional triggers (urgency, scarcity, authority)
- Include power words (exclusive, proven, instant)
- Specify character counts for each element
- Note which text should be H1, H2, body
SEO 보너스: 이 프롬프트 출력물은 키워드가 자연스럽게 배치되어 온페이지 SEO가 카피 작성과 동시에 해결됩니다.
프롬프트 4: 컴포넌트 로직 빌더
역할 설정: “프론트엔드 아키텍트”
Figma Make가 인터랙티브 프로토타입을 만들 때 참조할 로직 문서를 Claude Opus 4.6 프롬프트로 작성합니다.
You are a Frontend Architect. Design the logic for these interactive components:
Components needed:
- Multi-step form (validation, progress, state management)
- Dynamic pricing calculator (inputs, formulas, real-time updates)
- Search with filters (faceted search, sorting, pagination)
- User dashboard (data visualization, CRUD operations)
- Authentication flow (login, signup, password reset)
For each component:
- State machine diagram (describe in text)
- Data flow (props, events, API calls)
- Error handling strategy
- Loading states
- Empty states
- Edge cases
각 컴포넌트는 상태 머신 다이어그램, 에러 처리 전략, 빈 상태·로딩 상태·엣지 케이스까지 포함해 출력됩니다.
프롬프트 5: Figma Make 프롬프트 엔지니어
역할 설정: “Figma Make 전문 AI 프롬프트 엔지니어”
이 AI 웹사이트 제작 워크플로우의 핵심 연결 고리입니다.
Claude가 앞서 생성한 기술 명세서를 Figma Make가 바로 실행할 수 있는 5가지 프롬프트로 번역해주는 메타 프롬프트입니다.
You are an AI Prompt Engineer specializing in Figma Make.
Convert this technical specification into 5 Figma Make prompts:
[PASTE SPEC FROM CLAUDE]
Each prompt must:
- Start with the outcome (not the process)
- Include brand context (colors, typography, mood)
- Specify interactions (hover, click, scroll, animate)
- Define responsive behavior (mobile/tablet/desktop)
- Request specific sections (hero, features, CTA, footer)
Example format:
“Build a [TYPE] website with [MOOD] aesthetic. Use [COLOR] primary and [FONT] typography. Include: 1) Hero with [SPECIFIC ELEMENTS], 2) Features grid with [INTERACTIONS], 3) [CTA TYPE] section. Make it fully responsive with [ANIMATION STYLE] animations.”
단순 → 복잡 순으로 5가지 변형이 출력됩니다. 가장 복잡한 버전을 Figma Make에 넣으면 됩니다.
프롬프트 6: 애니메이션 & 인터랙션 디자이너
역할 설정: “Apple의 모션 디자이너”
정적인 사이트와 AI 웹사이트 제작 방법으로 만든 500만 원짜리 사이트의 차이는 바로 마이크로인터랙션입니다.
You are a Motion Designer at Apple. Design interactions for [WEBSITE SECTION].
Interaction requirements:
- Page load sequence (stagger, duration, easing)
- Scroll behaviors (parallax, pin, reveal)
- Hover states (micro-interactions, feedback)
- Click transitions (page transitions, modal opens)
- Gesture support (swipe, pinch, pull)
Technical specs:
- Easing curves (spring, ease-out, cubic-bezier)
- Durations (ms for each interaction type)
- Performance considerations (GPU acceleration, will-change)
Describe the animations in words Figma Make can interpret:
“On scroll: Navbar shrinks from 80px to 60px with ease-out over 300ms. Hero text fades up from 20px below with 0.6s duration and 0.1s stagger between lines…”
이 텍스트를 그대로 Figma Make 프롬프트에 붙여넣으면 됩니다.
프롬프트 7: 반응형 동작 전략가
역할 설정: “반응형 디자인 전문가”
모바일 375px / 태블릿 768px / 데스크톱 1440px 기준으로 모든 섹션의 레이아웃 변환을 사전 설계합니다.
You are a Responsive Design Specialist. Plan breakpoints for [WEBSITE].
Breakpoints:
- Mobile: 375px
- Tablet: 768px
- Desktop: 1440px
For each page section, define:
- Layout transformation (grid → stack, sidebar → drawer)
- Typography scaling (font sizes at each breakpoint)
- Image behavior (crop, scale, hide, swap)
- Navigation adaptation (hamburger, sidebar, horizontal)
- Spacing adjustments (padding, margin, gap)
- Content prioritization (hide secondary content on mobile)
Create a responsive decision matrix:
Section | Mobile | Tablet | Desktop | Notes
프롬프트 8: 데이터 통합 플래너
역할 설정: “풀스택 아키텍트”
Figma Make는 Supabase와 연동되므로, 이 프롬프트로 실제 데이터 구조를 설계합니다. 정적 사이트가 아닌 동적 웹 앱 수준의 기능을 구현할 때 사용합니다.
You are a Full-Stack Architect. Design data integration for [WEBSITE TYPE].
Data sources:
- [CMS/API/DATABASE]
Requirements:
- Data models (schema definitions)
- API endpoints needed (GET, POST, PUT, DELETE)
- Authentication strategy (JWT, OAuth, API keys)
- Real-time considerations (WebSockets, polling)
- Caching strategy (CDN, local storage)
- Error handling (fallbacks, retries, offline)
User-facing features:
- Dynamic content loading (infinite scroll, pagination)
- Form submissions (validation, success/error states)
- User accounts (profiles, preferences)
- Search functionality (indexing, filters, sorting)
프롬프트 9: QA & 최적화 체크리스트
역할 설정: “Google의 QA 엔지니어”
AI 웹사이트 제작의 출시 전 마지막 관문입니다. 완성된 사이트 명세를 붙여넣으면 이슈를 심각도별로 분류하고 수정 권고안까지 제시합니다.
You are a QA Engineer at Google. Review this website specification:
[PASTE FIGMA MAKE OUTPUT OR DESCRIBE]
Checklist:
□ Performance (Core Web Vitals targets)
□ Accessibility (WCAG 2.2 AA compliance)
□ SEO (meta tags, structured data, sitemap)
□ Security (HTTPS, CSP, input sanitization)
□ Browser compatibility (Chrome, Safari, Firefox, Edge)
□ Mobile optimization (touch targets, viewport)
□ Analytics integration (events, goals, funnels)For each issue:
- Severity (Critical/High/Medium/Low)
- Location (page/section/component)
- Issue description
- Fix recommendation
AI 웹사이트 제작 118분 완성 타임라인 실전 정리
| 시간 | 작업 | 사용 도구 | 프롬프트 |
|---|---|---|---|
| 0~20분 | 아키텍처 설계 | Claude Opus 4.6 | #1 |
| 20~35분 | 디자인 시스템 | Claude Opus 4.6 | #2 |
| 35~50분 | 전체 카피 작성 | Claude Opus 4.6 | #3 |
| 50~65분 | 컴포넌트 로직 | Claude Opus 4.6 | #4 |
| 65~75분 | Figma 프롬프트 변환 | Claude Opus 4.6 | #5 |
| 75~95분 | UI 자동 생성 | Figma Make | #5 결과물 |
| 95~110분 | 인터랙션·반응형 적용 | Figma Make | #6·7 결과물 |
| 110~118분 | QA·최적화 | Claude + Figma | #9 |
개발자 없이 500만 원짜리 웹사이트를 만들 수 있는 이유
에이전시 기준 웹사이트 하나 맡기면 기획 1주, 디자인 2주, 개발 3~4주, QA 1주, 최소 7~8주·200시간 이상이 소요됩니다. 시간당 단가 $100 적용 시 $20,000짜리 작업입니다.
Claude Opus 4.6 + Figma Make 조합은 반복적이고 구조적인 작업 전부를 AI가 처리해, 사람은 창의적 판단과 방향성 설정에만 집중하게 만듭니다.
그게 AI 웹사이트 제작 방법으로 500만 원짜리 결과물이 118분 만에 나오는 이유입니다.
지금 바로 시작하고 싶다면 Claude 공식 사이트(claude.ai)에서 계정을 만들고 위의 프롬프트 1번부터 순서대로 실행해 보세요.
Figma Make 공식 사이트(figma.com/make)에서 무료로 시작할 수 있으며, Claude API는 API 콘솔(console.anthropic.com)에서 $5부터 사용 가능합니다.
AI 바이브 코딩 툴 중 가장 쉽게 시작할 수 있는 방법은 러버블 코딩 노코드 웹사이트 완성 가이드에서 확인하실 수 있습니다.
👉 러버블 코딩으로 노코드 웹사이트 5분 만에 완성하기
프롬프트 작성 시 주의사항
- 역할 설정은 구체적으로: “AI 도구”가 아닌 “Vercel 수석 아키텍트”, “Apple 디자인 디렉터”처럼 권위 있는 페르소나를 부여할수록 출력 품질이 높아집니다.
- 출력 포맷을 명시: “Figma Make에 붙여넣을 형식으로”처럼 다음 단계를 미리 지정하면 연속성이 유지됩니다.
- 한국어 + 영어 혼용 전략: Claude에 한국어로 요구사항을 설명하되, 기술 용어(CSS, API, JSON)는 영어 그대로 사용하면 혼선이 줄어듭니다.
- 프롬프트 1의 출력결과를 이후 프롬프트에 붙여넣기: 각 프롬프트는 독립적이지 않고 앞 단계 결과물을 컨텍스트로 활용합니다.
Claude Opus 4.6 + Figma Make 웹사이트 제작 FAQ
Q1. Claude Opus 4.6은 무료로 사용할 수 있나요?
Claude.ai의 무료 플랜에서는 제한적으로 Opus에 접근 가능하며, 프롬프트 9개 전체 AI 웹사이트 제작 워크플로우를 원활히 돌리려면 Pro 플랜($20/월) 이상을 권장합니다.
Q2. Figma Make로 웹사이트를 무료로 만들 수 있나요?
Figma 무료 계정에서도 Make의 기본 기능을 사용할 수 있습니다. 다만 배포(Figma Sites)와 Supabase 연동은 유료 플랜이 필요합니다.
Q3. AI 웹사이트 제작 방법, 코딩을 전혀 모르는 사람도 따라 할 수 있나요?
네, 이 워크플로우의 핵심은 ‘프롬프트 입력’과 ‘결과물 붙여넣기’입니다. 코딩 없이도 9단계 전부 진행 가능합니다.
Q4. Figma Make로 만든 사이트를 실제로 배포할 수 있나요?
Figma Sites를 통해 커스텀 도메인 연결 후 실제 라이브 사이트로 배포할 수 있습니다. 별도 서버나 호스팅 설정은 필요 없습니다.
Q5. Claude Opus 4.6 프롬프트를 한국어로 써도 되나요?
프롬프트를 한국어로 작성해도 Claude가 자연스럽게 처리합니다. 단, 기술 명세서(CSS, JSON, API 구조)는 영어 용어 그대로 두면 Figma Make 연동 시 오류가 줄어듭니다.
Q6. 프롬프트 9개를 반드시 순서대로 다 써야 하나요?
포트폴리오·랜딩 페이지처럼 단순한 사이트는 프롬프트 1·2·3·5만으로도 충분합니다. 동적 기능(로그인, 대시보드)이 필요할 때 4·8번을 추가하면 됩니다.
Q7. ChatGPT로도 같은 AI 웹사이트 제작 방법이 통하나요?
프롬프트 구조 자체는 다른 LLM에서도 작동하지만, 128K 출력 토큰과 Adaptive Thinking 기반의 긴 기술 명세서 생성 품질은 현재 Claude Opus 4.6이 가장 우수합니다.
코딩 몰라도 웹사이트 뚝딱?
Claude Code로 웹사이트 만드는 법이 궁금하다면 이 글 하나면 충분합니다.
관련 인기 글 모음
