Claude와 Figma로 2시간 안에 웹사이트 만드는 방법

Claude를 사용하면 Figma 디자인에서 배포된 라이브 웹사이트까지 하나의 오후 안에 만들 수 있습니다. 코딩 경험이 필요 없습니다. 워크플로우는 간단합니다: Figma에서 디자인하고, 디자인을 Claude로 내보내거나 설명한 후, 코드를 생성하고, Vercel 또는 Netlify에 배포합니다. 무료 티어를 사용하면 전부 0원입니다.

사람들이 X에 "$5,000 웹사이트 2시간 만에" 클립을 올리고 있지만, 대부분은 실제 단계를 건너뜁니다. 이 가이드가 그 간격을 채웁니다. 모든 프롬프트가 포함되어 있고, 모든 결정 지점이 설명되어 있으며, 트레이드오프가 솔직합니다.

지금 작동하는 이유 (1년 전에는 아니었던)

1년 전에는 AI로 디자인을 코드로 변환하는 것은 스크린샷을 붙여넣고 정리하는 데 몇 시간이 필요한 대략적인 근사값을 받는 것을 의미했습니다. 오늘날 Claude의 100만 토큰 컨텍스트 윈도우는 전체 디자인 시스템(색상, 타이포그래피, 간격, 컴포넌트 세부 정보)을 제공할 수 있으며 첫 번째 패스에서 디자인과 밀접하게 일치하는 프로덕션 품질의 코드를 다시 받을 수 있다는 의미입니다.

핵심 통찰력: 얻는 것의 품질은 거의 전적으로 디자인을 설명하는 방법에 따라 결정됩니다. 모호한 설명은 모호한 웹사이트를 생성합니다. 구체적이고 구조화된 설명은 구체적이고 세련된 웹사이트를 생성합니다.

필요한 것

모두 무료 티어가 있는 3가지 도구:

Figma — 디자인용. 무료 티어로 충분합니다. 디자인이 없으면 Figma Community에서 무료 템플릿을 가져와서 커스터마이징하세요.

Claude — 코드 생성용. 무료 티어는 Sonnet을 제공하며, 이것으로 잘 처리됩니다. Pro ($20/월)는 더 복잡한 사이트를 위해 Opus 4.7을 제공합니다.

Vercel 또는 Netlify — 배포용. 둘 다 무료 티어가 있습니다. GitHub 저장소를 연결하고, 코드를 푸시하면, 사이트가 라이브됩니다.

단계 1: Figma 디자인 준비

Claude를 사용하기 전에 Figma 파일을 정리하세요. 이 단계가 이후의 모든 것의 품질을 결정합니다.

디자인에는 명확하게 정의된 페이지(홈, 소개, 연락처 등), 일관된 간격과 정렬, 가시적인 색상 팔레트(정확한 16진수 값 표기), 식별된 글꼴, 그리고 가능하면 데스크톱 및 모바일의 반응형 breakpoint가 있어야 합니다.

픽셀 완벽함을 걱정하지 마세요. Claude는 구현 세부 정보를 잘 처리합니다. 중요한 것은 디자인이 구조, 계층 및 시각적 스타일을 명확하게 전달하는 것입니다.

팁: Figma 레이어에 의미 있는 이름을 지정하세요. "Hero Section", "Feature Cards", "Pricing Table"은 프롬프트를 작성할 때 "Frame 247"보다 훨씬 더 유용합니다.

단계 2: 디자인 정보 내보내기

Claude는 Figma 파일을 직접 읽을 수 없으므로, 디자인을 Claude가 작업할 수 있는 정보로 변환해야 합니다. 가장 쉬운 것부터 가장 정확한 것까지 3가지 접근 방식이 있습니다:

방식 A: 스크린샷 + 설명. 디자인의 각 페이지의 전체 페이지 스크린샷을 찍습니다. 레이아웃, 색상 및 상호작용에 대한 서면 설명과 함께 이를 Claude에 업로드합니다. 가장 빠른 접근 방식이며 놀랄 정도로 잘 작동합니다.

방식 B: Figma Dev Mode 내보내기. Figma의 유료 플랜이 있으면 Dev Mode를 사용하여 CSS 값, 간격 토큰 및 컴포넌트 명세를 내보냅니다. 더 정확한 출력을 위해 이것을 스크린샷과 함께 Claude에 제공합니다.

방식 C: 작성된 디자인 명세. 모든 섹션(헤더, 히어로, 기능, 추천글, 푸터)에 대한 상세 설명을 작성합니다. 여기에는 색상, 글꼴, 크기 및 레이아웃을 포함합니다. 시간이 더 걸리지만 출력에 대한 가장 많은 제어를 제공합니다. Figma 디자인 없이 빌드하는 경우 이것이 당신의 경로입니다.

단계 3: 초기 프롬프트 작성

여기가 대부분의 사람들이 잘못하는 부분입니다. "이 스크린샷처럼 보이는 웹사이트를 만들어줘"라고 작성하고 일반적인 출력을 받습니다. 일관되게 고품질 결과를 생성하는 프롬프트 구조는 다음과 같습니다:

사용자가 보는 것에 대해 구체적일수록 출력이 더 좋습니다. 코드를 설명하지 마세요 — 경험을 설명하세요. 보내기 전에 이 프롬프트를 좀 더 날카롭게 할 필요가 있으면, 우리의 무료 프롬프트 optimizer가 더 나은 결과를 위해 구조화하는 데 도움을 줄 수 있습니다.

단계 4: 검토 및 반복

Claude의 첫 번째 출력은 보통 디자인의 60-80%를 캡처합니다. 나머지 20-40%는 반복에서 나옵니다. 이것이 대부분의 "vibe coding" 튜토리얼이 끝나는 단계이지만, 실제 품질이 일어나는 곳입니다.

3가지를 확인하여 출력을 검토하세요: 레이아웃이 디자인과 일치합니까? 색상과 타이포그래피가 맞습니까? 모바일에서 보기 좋습니까?

그런 다음 구체적인 피드백으로 반복하세요. "더 좋게 해줘"라고 말하지 마세요. 다음과 같이 말하세요:

• "히어로 섹션에는 더 많은 수직 패딩이 필요합니다. 상단과 하단에 120px 추가"
• "기능 카드는 데스크톱에서 3열 그리드, 모바일에서 단일 열이어야 합니다"
• "CTA 버튼에 호버 효과가 있어야 합니다 — 배경을 10% 어둡게 하고 약간 확대"
• "푸터 링크는 4개 열로 정렬되어야 합니다: Product, Company, Resources, Legal"

각 피드백 라운드는 3-5개의 구체적인 문제를 해결해야 합니다. 3라운드는 보통 디자인의 95%에 도달합니다.

단계 5: 실제 콘텐츠 및 이미지 추가

placeholder 텍스트를 실제 복사본으로 바꿉니다. placeholder 이미지 드래그를 실제 이미지로 바꿉니다. 웹사이트 복사본을 작성하는 데 도움이 필요하면 Claude가 뛰어납니다 — 브랜드 설명을 제공하고 당신의 톤과 일치하는 홈페이지 복사본을 요청하세요.

이미지의 경우 Unsplash 또는 Pexels에서 무료 스톡을 사용하거나, AI 이미지 도구로 커스텀 이미지를 생성합니다. 이미지 파일을 프로젝트의 /public 폴더에 놓고 src 속성을 업데이트합니다.

단계 6: 한 번의 클릭으로 배포

Next.js를 사용했다면(권장), Vercel에 배포하는 데 60초가 걸립니다:

1. GitHub 저장소로 코드를 푸시합니다
2. vercel.com으로 이동하여 GitHub로 로그인합니다
3. "Import Project"를 클릭하고 저장소를 선택합니다
4. Vercel이 Next.js를 자동 감지하고 모든 것을 구성합니다
5. "Deploy"를 클릭합니다

사이트가 .vercel.app URL로 라이브됩니다. 있으면 Vercel의 설정에서 커스텀 도메인을 연결하세요.

Netlify는 거의 동일하게 작동합니다 — GitHub에서 가져오기, 프레임워크 자동 감지, 배포. 두 플랫폼 모두 SSL, CDN 및 지속적인 배포를 자동으로 처리합니다. GitHub로 푸시할 때마다 사이트가 업데이트됩니다.

어느 배포 플랫폼을 사용할지 확실하지 않습니까? 우리는 완전한 비교를 작성했습니다: Vibe Coding 후 어디에 배포합니까?

사람들을 당황하게 하는 일반적인 실수

1. 작성된 컨텍스트 없이 Claude에게 스크린샷을 제공합니다. 스크린샷은 도움이 되지만, Claude는 정확한 코드를 생성하려면 색상, 글꼴, 간격 및 레이아웃에 대한 작성된 설명이 필요합니다. 스크린샷은 참조이고, 텍스트가 지침입니다.

2. 하나의 프롬프트로 모든 것을 빌드하려고 시도합니다. 애니메이션, 양식 및 CMS가 있는 6페이지 웹사이트는 한 번에 너무 많습니다. 페이지별로, 섹션별로 빌드하세요. 홈페이지로 시작하여 올바르게 얻은 후 다음 페이지로 이동합니다.

3. 모바일 반응형을 건너뜁니다. 프롬프트에서 모바일을 언급하지 않으면 Claude는 데스크톱 전용 레이아웃을 빌드합니다. 항상 기술 요구 사항에 "mobile responsive"를 포함하고 375px 너비에서 출력을 테스트하세요.

4. 상호작용을 테스트하지 않습니다. 모든 버튼을 클릭하고, 모든 양식을 작성하고, 모든 페이지를 스크롤합니다. AI 생성 코드는 종종 맞게 보이지만 끊어진 링크, 비작동 양식 또는 누락된 호버 상태를 가집니다. 배포 전에 테스트하세요.

5. 배포 전 완벽함을 추구합니다. 90%에서 배포하고 반복하세요. 첫 번째 배포가 완벽할 필요는 없습니다 — 라이브여야 합니다. 초 단위로 업데이트를 푸시할 수 있습니다.

클라이언트 빌드? 전달하기 전에 모든 vibe coder가 하는 5가지 보안 실수에 대한 가이드를 읽으세요.

결론

Figma-to-Claude-to-deploy 워크플로우는 코딩 없이 디자인을 작동하는 웹사이트로 변환하는 가장 빠른 방법입니다. 품질은 코딩 기술이 아니라 프롬프트의 구체성에 따라 달라집니다. 3라운드의 반복은 보통 초안에서 프로덕션 준비 완료까지 도달합니다.

간단한 프로젝트(포트폴리오 또는 랜딩 페이지)로 시작하여 한 번은 전체 사이클을 거쳐보세요. 두 번째는 프롬프트를 구조화하는 방법을 정확히 알게 되므로 절반의 시간이 걸립니다.

어느 AI 도구가 당신의 워크플로우에 가장 좋은지 확실하지 않습니까? 우리의 60초 Model Picker Quiz를 받으세요 알아보거나, 전체 AI 모델 상태 비교를 보세요.

공개: 이 기사의 일부 링크는 제휴 링크입니다. 우리는 개인적으로 테스트했고 정기적으로 사용하는 도구만 권장합니다. 전체 공개 정책을 참조하세요.