AI로 무료 웹사이트 완성하기 | Claude + Figma Make 노코드 자동화 꿀팁 9가지

인공지능이 이제 웹사이트 제작의 판을 바꾸고 있습니다. 불과 몇 년 전만 해도 전문 웹사이트 하나를 만들려면 디자이너, 개발자, 카피라이터, QA 엔지니어로 구성된 팀이 수주일을 작업해야 했습니다.

평균 비용은 수백만 원에서 수천만 원까지 치솟았죠. 하지만 2026년 현재, Claude Opus 4.6과 Figma Make를 조합하면 단 2시간 만에 $5,000 이상의 가치를 지닌 완성형 웹사이트를 사실상 무료에 가깝게 제작할 수 있는 시대가 열렸습니다.

이 글에서는 AI 웹사이트 무료 제작을 실현하는 9가지 핵심 프롬프트 전략을 단계별로 완전히 공개합니다. 기획자부터 1인 스타트업, 프리랜서 디자이너, 블로거까지 누구나 바로 적용할 수 있도록 실전 중심으로 정리했습니다.

AI로 무료 웹사이트 완성하기 | Claude + Figma Make 노코드 자동화 꿀팁 9가지

Claude + Figma Make 노코드 조합, 무엇이 달라졌나

Figma는 2025년 Config 컨퍼런스에서 Figma Make를 공식 출시하며 디자인 툴을 넘어 완전한 AI 웹사이트 빌더로 진화했습니다. Figma Make는 자연어 프롬프트를 입력하면 레이아웃, 인터랙션, 반응형 구조가 자동으로 생성되는 엔진으로, 별도의 코딩 없이 완성형 웹사이트를 퍼블리싱할 수 있습니다.

여기에 Anthropic의 최신 모델인 Claude Opus 4.6이 Figma Make에 공식 통합되었습니다. Claude를 Figma와 연동하면 Figma 디자인을 HTML/CSS 코드로 직접 구현하거나, 선택된 컴포넌트에서 코드를 추출하는 것도 가능합니다. 즉, 기획(Claude) → 디자인·개발(Figma Make) → 퍼블리싱(Figma Sites) 의 전 과정이 단일 파이프라인 안에서 완결됩니다.

💡 Figma Make 공식 시작하기 → figma.com/solutions/ai-website-builder

코딩 없이 AI 프롬프트 한 줄로 반응형 웹사이트를 즉시 생성하세요. Figma Make 공식 페이지에서 무료로 시작할 수 있습니다.

AI 무료 웹사이트 제작, 왜 $5,000 가치인가

전통적인 웹사이트 제작 비용을 분해하면 다음과 같습니다:

UX/IA 설계 (정보구조, 사용자 플로우): $500~$1,000
UI 디자인 시스템 구축: $1,000~$1,500
카피라이팅 (전 페이지): $500~$800
프론트엔드 개발 (컴포넌트, 인터랙션): $1,500~$2,000
QA 및 최적화 (성능, 접근성, SEO): $300~$500

합산하면 최소 $3,800에서 $5,800 수준입니다. 아래에 소개하는 9가지 프롬프트는 이 각각의 전문 역할을 AI 페르소나에 위임함으로써, 비용을 거의 0으로 압축합니다.

각 프롬프트는 특정 전문가(Vercel 수석 아키텍트, Apple 디자인 디렉터, Ogilvy 카피라이터 등)의 역할을 Claude에게 부여하는 방식으로 설계되었으며, 출력물을 Figma Make에 직접 붙여 넣을 수 있는 형식으로 구조화되어 있습니다.

Claude Code 사용방법 을 익혀두면 이 포스팅에서 소개하는 자동화 흐름을 훨씬 빠르게 적용할 수 있습니다.

👉 Claude Code 사용방법 | 2026 최신 업무 자동화 완전정복

Claude AI 자동화 꿀팁 9가지 프롬프트 완전 해설

꿀팁 1. 노코드 웹사이트 설계 자동화 — 아키텍처 전략 프롬프트

역할: Vercel 수석 아키텍트

핵심 목적: 사이트맵, 사용자 플로우, 데이터 모델, API 요건, 30개 이상의 컴포넌트 목록, 기술 스택, 성능 예산, SEO 구조를 포함한 완전한 기술 명세서(Technical Specification) 를 생성합니다.

이 프롬프트는 전체 프로세스의 설계도를 만드는 단계입니다. 웹사이트 유형(포트폴리오/SaaS/이커머스), 타깃 오디언스, 주요 기능 3~5가지, 기술 고려사항(반응형/SEO/퍼포먼스)을 입력하면, Claude가 Figma Make에 바로 넘길 수 있는 기술 사양서를 출력합니다.

실전 팁: [WEBSITE TYPE]에 구체적일수록 결과가 좋습니다. “SaaS”보다는 “월간 구독 기반 AI 이미지 생성 SaaS, B2C, 20~35세 크리에이터 타깃”처럼 입력하세요.

한글 프롬프트:

당신은 Vercel의 수석 아키텍트입니다. 저는 [웹사이트 유형: 포트폴리오/SaaS/이커머스]를 구축해야 합니다.

요구사항:

타깃 오디언스: [설명]

핵심 기능: [3~5가지 목록]

기술 고려사항: [반응형/SEO/퍼포먼스]

다음을 제공해 주세요:

사이트맵 (계층 구조 포함 전체 페이지)

사용자 플로우 (주요 3가지 여정)

데이터 모델 (동적 콘텐츠가 있는 경우)

API 요구사항 (해당되는 경우)

컴포넌트 목록 (필요한 30개 이상)

페이지 템플릿 (와이어프레임 설명)

기술 스택 추천

성능 예산 (로드 시간 목표)

SEO 구조 (메타 템플릿, URL 패턴)

Figma Make에 전달할 수 있는 기술 사양서 형식으로 작성해 주세요.

영문 프롬프트:

You are a Principal Architect at Vercel. I need to build a [WEBSITE TYPE: portfolio/saas/e-commerce].

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 (if dynamic content)

API requirements (if applicable)

Component inventory (30+ components needed)

Page templates (wireframe descriptions)

Technical stack recommendation

Performance budgets (load time targets)

SEO structure (meta templates, URL patterns)

Format as a technical specification I can hand to Figma Make.

꿀팁 2. AI로 디자인 시스템 무료 자동 생성하기

역할: Apple 디자인 디렉터

핵심 목적: 색상 팔레트(다크모드 포함), 타이포그래피 9단계 스케일, 8px 기반 스페이싱 시스템, 30개 컴포넌트 스펙, 반응형 브레이크포인트, 애니메이션 가이드라인, WCAG AA 접근성 기준을 Design Tokens(JSON), CSS 변수, Figma 컴포넌트 설명 형태로 출력합니다.

디자인 시스템은 웹사이트의 시각적 일관성을 결정하는 핵심입니다. Claude가 생성한 Design Token JSON을 Figma Make에 붙여 넣으면, 브랜드 정체성이 반영된 시각 시스템이 즉시 구축됩니다. [BRAND ATTRIBUTES]에 “MINIMAL”, “BOLD”, “LUXURY”, “PLAYFUL” 등의 키워드를 명확히 지정하는 것이 중요합니다.

한글 프롬프트:

당신은 Apple의 디자인 디렉터입니다. [브랜드]를 위한 디자인 시스템을 만들어 주세요.

브랜드 속성: [미니멀/볼드/럭셔리/플레이풀]

다음을 생성해 주세요:

색상 팔레트 (주색, 보조색, 시맨틱 색상, 다크모드)

타이포그래피 스케일 (폰트 추천 포함 9단계)

스페이싱 시스템 (8px 기본 그리드)

컴포넌트 명세 (상태 포함 30개 컴포넌트)

레이아웃 패턴 (반응형 브레이크포인트)

애니메이션 가이드라인 (이징, 지속시간)

접근성 요구사항 (WCAG AA)

다음 형식으로 내보내기:

디자인 토큰 (JSON)

CSS 변수

Figma 호환 컴포넌트 설명

영문 프롬프트:

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

I’ll paste this into Figma Make to generate the visual system.

꿀팁 3. Claude로 전환율 높은 웹사이트 카피 자동화하기

역할: Ogilvy 전환율 최적화 카피라이터

핵심 목적: 히어로 섹션(6단어 헤드라인, 15단어 서브헤드, CTA), 피처 섹션 3블록, 소셜 프루프(후기 프레임워크 + 통계), FAQ 8문항, 푸터 카피를 H1/H2/본문 태그 지정과 글자 수 가이드라인과 함께 생성합니다.

카피라이팅은 웹사이트에서 가장 과소평가되는 요소이자, 전환율에 가장 큰 영향을 미치는 요소입니다. 이 프롬프트는 urgency(긴박감), scarcity(희소성), authority(권위) 같은 심리적 트리거와 “exclusive”, “proven”, “instant” 같은 파워 워드를 자동으로 적용합니다.

💡 전환율 최적화 카피라이팅 실전 가이드 → copyblogger.com

Ogilvy급 카피라이팅 원칙을 더 깊이 공부하고 싶다면, Copyblogger에서 전환율 최적화 카피 작성법을 무료로 학습할 수 있습니다.

한글 프롬프트:

당신은 Ogilvy의 전환율 최적화 카피라이터입니다. [웹사이트 유형]의 모든 카피를 작성해 주세요.

브랜드 보이스: [전문적/캐주얼/볼드]

타깃: [오디언스]

목표: [전환/인지도/유지]

각 페이지별 다음 항목을 제공해 주세요:

히어로 섹션 (헤드라인: 6단어, 서브헤드: 15단어, CTA)

피처 섹션 (헤드라인 + 설명 포함 3블록)

소셜 프루프 (후기 프레임워크 + 통계)

FAQ 섹션 (답변 포함 8개 질문)

푸터 (내비게이션, 소셜, 법적 고지)

포맷 지침:

감성 트리거 사용 (긴박감, 희소성, 권위)

파워 워드 포함 (독점적, 검증된, 즉시)

각 요소별 글자 수 명시

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

I’ll use this to populate Figma Make’s content layers.

꿀팁 4. 노코드로 인터랙티브 컴포넌트 로직 자동 설계

역할: 프론트엔드 아키텍트

핵심 목적: 멀티스텝 폼, 동적 가격 계산기, 필터 검색, 사용자 대시보드, 인증 플로우 5가지 복잡한 인터랙티브 컴포넌트의 상태 머신 다이어그램, 데이터 플로우, 에러 핸들링, 로딩/빈 상태, React 컴포넌트 구조를 생성합니다.

이 프롬프트는 정적인 디자인을 동적인 앱처럼 작동하게 만드는 핵심입니다. 각 컴포넌트의 엣지 케이스까지 사전에 정의함으로써 Figma Make가 생성하는 인터랙티브 프로토타입의 완성도가 크게 높아집니다.

한글 프롬프트:

당신은 프론트엔드 아키텍트입니다. 다음 인터랙티브 컴포넌트들의 로직을 설계해 주세요:

필요한 컴포넌트:

멀티스텝 폼 (유효성 검사, 진행 상태, 상태 관리)

동적 가격 계산기 (입력값, 공식, 실시간 업데이트)

필터 검색 (다면 검색, 정렬, 페이지네이션)

사용자 대시보드 (데이터 시각화, CRUD 작업)

인증 플로우 (로그인, 회원가입, 비밀번호 재설정)

각 컴포넌트에 대해:

상태 머신 다이어그램 (텍스트로 설명)

데이터 플로우 (props, 이벤트, API 호출)

에러 핸들링 전략

로딩 상태

빈 상태

엣지 케이스

React 컴포넌트 구조 생성 (함수, 훅, 핸들러)

영문 프롬프트:

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

Generate React component structure (functions, hooks, handlers).

I’ll describe this logic to Figma Make to build the interactive prototypes.

꿀팁 5. Figma Make 최적 프롬프트 자동 변환 방법

역할: AI 프롬프트 엔지니어링 전문가

핵심 목적: PROMPT 1에서 생성한 기술 명세서를 Figma Make가 최적으로 해석할 수 있는 5가지 프롬프트 변형으로 변환합니다.

이 프롬프트가 전체 워크플로우에서 가장 중요한 연결 고리입니다. 각 Figma Make 프롬프트는 ① 결과물 중심의 목적 서술, ② 브랜드 컨텍스트(색상, 타이포그래피, 무드), ③ 인터랙션 명세(호버/클릭/스크롤/애니메이션), ④ 반응형 동작(모바일/태블릿/데스크톱), ⑤ 섹션별 요구사항을 모두 포함해야 합니다.

한글 프롬프트:

당신은 Figma Make 전문 AI 프롬프트 엔지니어입니다.

이 기술 명세서를 5개의 Figma Make 프롬프트로 변환해 주세요:

[클로드에서 받은 명세서를 여기에 붙여넣기]

각 프롬프트는 반드시:

결과물로 시작 (프로세스가 아닌)

브랜드 컨텍스트 포함 (색상, 타이포그래피, 무드)

인터랙션 명시 (호버, 클릭, 스크롤, 애니메이션)

반응형 동작 정의 (모바일/태블릿/데스크톱)

특정 섹션 요청 (히어로, 피처, CTA, 푸터)

예시 형식:

“[유형] 웹사이트를 [무드] 미학으로 구축하세요. [색상]을 주색으로, [폰트] 타이포그래피를 사용하세요. 포함 사항: 1) [특정 요소]가 있는 히어로, 2) [인터랙션]이 있는 피처 그리드, 3) [CTA 유형] 섹션. [애니메이션 스타일] 애니메이션으로 완전 반응형으로 제작하세요.”

단순한 것부터 복잡한 것 순으로 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.”

Generate 5 variations from simple to complex.

꿀팁 6. AI로 웹사이트 애니메이션 자동화하는 법

역할: Apple 모션 디자이너

핵심 목적: 페이지 로드 시퀀스, 스크롤 트리거, 호버 마이크로인터랙션, 페이지 전환, 제스처 지원에 대해 Figma Make가 해석 가능한 자연어 애니메이션 명세를 생성합니다.

예시 출력 형태: “스크롤 시: 네비게이션 바가 80px에서 60px으로 ease-out 300ms 동안 축소. 히어로 텍스트가 20px 아래에서 페이드업, duration 0.6s, 각 줄 사이 0.1s stagger…” 이런 수준의 구체적 명세가 Figma Make의 애니메이션 품질을 결정합니다.

한글 프롬프트:

당신은 Apple의 모션 디자이너입니다. [웹사이트 섹션]의 인터랙션을 설계해 주세요.

인터랙션 요구사항:

페이지 로드 시퀀스 (스태거, 지속시간, 이징)

스크롤 동작 (패럴랙스, 핀, 리빌)

호버 상태 (마이크로인터랙션, 피드백)

클릭 전환 (페이지 전환, 모달 열기)

제스처 지원 (스와이프, 핀치, 풀)

기술 명세:

이징 곡선 (스프링, ease-out, cubic-bezier)

지속시간 (각 인터랙션 유형별 ms)

성능 고려사항 (GPU 가속, will-change)

Figma Make가 해석할 수 있는 단어로 애니메이션 설명:

“스크롤 시: 네비게이션 바가 ease-out으로 300ms 동안 80px에서 60px으로 축소. 히어로 텍스트가 20px 아래에서 페이드업, 0.6s 지속시간, 줄 사이 0.1s 스태거…”

영문 프롬프트:

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…”

I’ll paste these descriptions into Figma Make’s prompt.

꿀팁 7. 노코드 반응형 웹사이트 자동 설계 전략

역할: 반응형 디자인 전문가

핵심 목적: 모바일(375px), 태블릿(768px), 데스크톱(1440px) 3개 브레이크포인트에서 각 섹션의 레이아웃 변환, 타이포그래피 스케일링, 이미지 동작, 내비게이션 적응, 스페이싱 조정, 콘텐츠 우선순위를 매트릭스 형태로 생성합니다.

출력 형식은 섹션 | 모바일 | 태블릿 | 데스크톱 | 비고 형태의 반응형 결정 매트릭스입니다. Figma Make는 이 매트릭스를 기반으로 유동적인 레이아웃을 자동 생성합니다.

한글 프롬프트:

당신은 반응형 디자인 전문가입니다. [웹사이트]의 브레이크포인트를 계획해 주세요.

브레이크포인트:

모바일: 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

Figma Make will use this to generate fluid layouts.

꿀팁 8. Claude로 Supabase 데이터 연동 자동화하기

역할: 풀스택 아키텍트

핵심 목적: CMS/API/데이터베이스 연동을 위한 데이터 모델(스키마), API 엔드포인트, 인증 전략(JWT/OAuth), 실시간 처리, 캐싱 전략, 에러 핸들링을 설계하고, Supabase 연동을 위한 스키마를 생성합니다.

Figma Make는 Supabase와 연동하여 실제 데이터를 기반으로 동작하는 웹사이트를 만들 수 있습니다. 이 프롬프트는 동적 콘텐츠 로딩, 폼 제출, 사용자 계정, 검색 기능 등 실제 서비스 수준의 백엔드 구조를 Claude가 설계하도록 합니다.

💡 Supabase 무료로 시작하기 → supabase.com

Figma Make와 실시간 데이터를 연동하려면 Supabase의 무료 플랜을 활용하세요. PostgreSQL 기반의 오픈소스 백엔드를 코딩 없이 구축할 수 있습니다.

AI 코딩 툴로 만든 코드를 실제 서비스로 배포하는 과정이 막막하다면, 바이브코딩 입문자를 위한 풀스택 환경 세팅 완벽 튜토리얼을 먼저 읽어보세요.

👉 바이브코딩 입문자를 위한 풀스택 환경 세팅 완벽 튜토리얼

한글 프롬프트:

당신은 풀스택 아키텍트입니다. [웹사이트 유형]의 데이터 통합을 설계해 주세요.

데이터 소스:

[CMS/API/데이터베이스]

요구사항:

데이터 모델 (스키마 정의)

필요한 API 엔드포인트 (GET, POST, PUT, DELETE)

인증 전략 (JWT, OAuth, API 키)

실시간 고려사항 (WebSocket, 폴링)

캐싱 전략 (CDN, 로컬 스토리지)

에러 핸들링 (폴백, 재시도, 오프라인)

사용자 대면 기능:

동적 콘텐츠 로딩 (무한 스크롤, 페이지네이션)

폼 제출 (유효성 검사, 성공/오류 상태)

사용자 계정 (프로필, 환경설정)

검색 기능 (인덱싱, 필터, 정렬)

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)

Figma Make connects to Supabase for real data—design the schema for this integration.

꿀팁 9. AI 무료 웹사이트 완성 전 QA 자동화 체크리스트

역할: Google QA 엔지니어

핵심 목적: Figma Make 출력물을 대상으로 Core Web Vitals, WCAG 2.2 AA 접근성, SEO(메타태그·구조화 데이터·사이트맵), 보안(HTTPS·CSP·입력 검증), 브라우저 호환성, 모바일 최적화, 애널리틱스 통합 7개 영역을 체계적으로 검토합니다.

각 이슈에 대해 심각도(Critical/High/Medium/Low), 위치(페이지/섹션/컴포넌트), 문제 설명, 수정 권고를 포함한 펀치리스트(Punch List) 를 생성합니다. 이 리스트를 Figma Make에 다시 입력해 반복 개선하면 웹사이트의 최종 품질이 실제 상용 수준으로 올라갑니다.

💡 Core Web Vitals 점수 무료 측정 → pagespeed.web.dev

Figma Make로 완성한 웹사이트의 Core Web Vitals 점수를 Google PageSpeed Insights에서 무료로 측정하고, QA 체크리스트에 반영하세요.

한글 프롬프트:

당신은 Google의 QA 엔지니어입니다. 이 웹사이트 명세를 검토해 주세요:

[Figma Make 출력물을 붙여넣거나 설명]

체크리스트:

□ 성능 (Core Web Vitals 목표)

□ 접근성 (WCAG 2.2 AA 준수)

□ SEO (메타태그, 구조화 데이터, 사이트맵)

□ 보안 (HTTPS, CSP, 입력 검증)

□ 브라우저 호환성 (Chrome, Safari, Firefox, Edge)

□ 모바일 최적화 (터치 타깃, 뷰포트)

□ 애널리틱스 통합 (이벤트, 목표, 퍼널)

각 이슈에 대해:

심각도 (Critical/High/Medium/Low)

위치 (페이지/섹션/컴포넌트)

이슈 설명

수정 권고

Figma Make 반복 작업을 위한 펀치리스트를 생성해 주세요.

영문 프롬프트:

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

Generate a punch list for the Figma Make iteration.

Claude + Figma Make 노코드 2시간 완성 실전 워크플로우

아래 순서로 진행하면 2시간 안에 완성형 웹사이트를 만들 수 있습니다:

0~20분 | 기획 단계: 꿀팁 1(아키텍처 전략가)으로 기술 명세서 생성
20~35분 | 디자인 시스템: 꿀팁 2(디자인 시스템 생성기)로 Design Token 생성
35~50분 | 카피 작성: 꿀팁 3(콘텐츠 아키텍트)으로 전 페이지 카피 완성
50~65분 | 프롬프트 변환: 꿀팁 5(Figma Make 프롬프트 엔지니어)로 Figma Make용 프롬프트 5가지 생성
65~90분 | Figma Make 빌드: 생성된 프롬프트를 Figma Make에 입력, 반복 수정
90~105분 | 인터랙션 강화: 꿀팁 6(애니메이션 디자이너)와 꿀팁 7(반응형 전략가) 적용
105~120분 | QA 완성: 꿀팁 9(QA 체크리스트)로 최종 품질 검토 및 펀치리스트 수정

AI 무료 웹사이트 자동화 전, 반드시 알아야 할 한계점

Claude Opus 4.6과 Figma Make의 조합은 강력하지만, 현실적인 한계도 존재합니다:

접근성 이슈: 현재 Figma Make가 생성하는 HTML은 div 남용 등 접근성 비표준 코드를 포함할 수 있습니다. 꿀팁 9의 WCAG 체크리스트를 반드시 실행하세요.
반응형 레이아웃: 첫 번째 생성 결과가 완벽한 반응형을 보장하지 않습니다. 꿀팁 7의 반응형 매트릭스를 명확하게 작성할수록 품질이 개선됩니다.
복잡한 백엔드 로직: 꿀팁 8에서 설계한 데이터 연동은 Supabase 등 외부 서비스 계정 설정이 필요합니다.

Claude + Figma Make 노코드 웹사이트 제작 FAQ

Q1. Figma Make는 완전히 무료인가요?

Figma는 무료 플랜을 제공하지만, Figma Make의 고급 기능 및 퍼블리싱은 유료 플랜이 필요할 수 있습니다. 공식 홈페이지에서 최신 요금제를 확인하세요.

Q2. Claude Opus 4.6은 어디서 사용하나요?

Claude.ai에서 무료로 사용 가능하며, Figma Make 내 Experimental Models 설정에서 직접 연동할 수 있습니다.

Q3. 코딩을 전혀 몰라도 이 방법으로 웹사이트를 만들 수 있나요?

꿀팁 1~3, 5, 7은 코딩 지식 없이도 충분히 활용할 수 있습니다. 꿀팁 4·8은 개발자 또는 기술적 배경이 있는 사용자에게 더욱 효과적입니다.

Q4. 생성된 웹사이트를 실제 서비스로 배포할 수 있나요?

Figma Make로 제작한 웹사이트는 Figma Sites를 통해 바로 퍼블리싱 가능하며, Supabase 연동을 통해 실제 데이터 기반 서비스로도 운영할 수 있습니다.

Q5. 9가지 프롬프트를 모두 사용해야 하나요?

목적에 따라 선택적으로 사용하면 됩니다. 단순 포트폴리오라면 꿀팁 1·2·3·5만으로도 충분히 완성도 높은 결과를 얻을 수 있습니다.

Q6. 한글로 프롬프트를 입력해도 결과물 품질이 영문과 동일한가요?

Claude Opus 4.6은 한국어 처리 성능이 뛰어납니다. 다만, Figma Make에 직접 입력하는 프롬프트는 영문이 더 정확한 결과를 내는 경향이 있습니다.

Q7. 이 방법으로 만든 웹사이트의 SEO 성능은 어떤가요?

꿀팁 1(URL 구조·메타 템플릿)과 꿀팁 9(SEO 체크리스트)를 성실히 적용하면 Google 기준 기본 SEO 요건을 충족하는 웹사이트 구조를 만들 수 있습니다. 이후 Google Search Console 등록과 콘텐츠 최적화가 추가로 필요합니다.

AI 자동화 꿀팁 9가지 : Claude + Figma Make 역할 총정리

단계	꿀팁	Claude 역할	Figma Make 활용
기획	꿀팁 1	Vercel 아키텍트	기술 명세서 → 사이트 구조
디자인	꿀팁 2	Apple 디자인 디렉터	Design Token → 시각 시스템
카피	꿀팁 3	Ogilvy 카피라이터	카피 → 콘텐츠 레이어
컴포넌트	꿀팁 4	프론트엔드 아키텍트	로직 → 인터랙티브 프로토타입
프롬프트 최적화	꿀팁 5	AI 프롬프트 엔지니어	Figma Make 최적 입력 생성
애니메이션	꿀팁 6	Apple 모션 디자이너	자연어 애니메이션 명세
반응형	꿀팁 7	반응형 전문가	브레이크포인트 매트릭스
데이터	꿀팁 8	풀스택 아키텍트	Supabase 스키마 연동
QA	꿀팁 9	Google QA 엔지니어	펀치리스트 반복 개선

AI TREARC

AI로 무료 웹사이트 완성하기 | Claude + Figma Make 노코드 자동화 꿀팁 9가지

Claude + Figma Make 노코드 조합, 무엇이 달라졌나

AI 무료 웹사이트 제작, 왜 $5,000 가치인가