스크린샷 아닌 진짜 코드
HTML, CSS, JavaScript — 본인 소유
모든 페이지가 실제 파일입니다. 다운로드하고, 수정하고, 엔지니어에게 넘겨주세요. 전용 에디터 잠금도, 내보내기 수수료도 없습니다.
<section class="hero"> <h1>Stories in light.</h1></section>
Genspark Build — Preview
AI가 홈페이지를 대신 만들어드립니다 진짜 배포까지.
AI에게 원하는 것을 말해주세요. 눈앞에서 코드를 쓰고, 파일마다 라이브 프리뷰가 갱신되며, 몇 분이면 실제로 배포 가능한 사이트가 완성됩니다.
템플릿으로 시작:
여기서 만드는 느낌
워크스페이스 전체가 프롬프트를 중심으로 돕니다
왼쪽엔 채팅, 가운데엔 라이브 프리뷰, 오른쪽엔 파일. 입력하고, 렌더링을 보고, 계속하세요.
genspark.ai/agents?type=build_preview
Chat
프리랜서 포토그래퍼용 다크 에디토리얼 포트폴리오. 5개 섹션, 따뜻한 타이포그래피.
`index.html`, `about.html`, `/assets/styles.css` 작성 중. 히어로에 필름 그레인 효과 추가 중…
파일 작성 중
프리뷰yoursite.pages.dev
Freelance photography
Stories in light.
파일
- index.html
- about.html
- work.html
- contact.html
- assets/styles.css
- assets/film-grain.svg
왜 Genspark Build 인가
목업만 뱉어내는 생성기가 아닙니다.
실제 파일을 쓰고, 라이브 프리뷰를 돌리고, 결과를 그대로 배포합니다.
Claude 구동
엔진은 Claude Opus 4.7
Claude가 사이트를 설계하고, 파일을 쓰고, 프리뷰가 이상할 땐 스스로 수정합니다.
다중 페이지
한 페이지가 아닌 사이트 전체
Home, About, Work, Pricing, Contact. 전부 한꺼번에 생성됩니다. 내비게이션은 동기화되고 디자인 시스템은 모든 페이지에 걸쳐 이어집니다.
라이브 프리뷰
파일마다 렌더링을 눈으로 확인
파일이 쓰이는 즉시 프리뷰가 갱신됩니다. 빌드 단계를 기다릴 필요 없음. 호버, 애니메이션, 반응형 브레이크포인트까지 라이브로 동작합니다.
클릭 한 번에 배포
Cloudflare Pages로 배포
Build it을 누르세요. Genspark가 프로토타입을 실제 프로젝트로 옮기고, Cloudflare Pages에 연결하고, 공개 URL을 돌려줍니다.
앱도 가능
오늘은 사이트, 같은 캔버스에서 모바일 앱도
타깃을 사이트에서 앱으로 바꾸면, 캔버스는 iPhone 프레임으로 바뀌고 Build it은 Dart 코드의 Flutter 프로젝트를 돌려줍니다.
검증된 프롬프트로 시작
사람들이 만들고 있는 것
이것들은 Genspark Build 안의 실제 시작 프롬프트입니다. 하나를 클릭하면 AI가 그 다음을 맡습니다.
프롬프트에서 프로덕션까지
네 단계. 빌드 파이프라인 없고, 학습 곡선 없음.
01
설명
원하는 것을 한 문장, 혹은 한 문단으로 쓰세요. 모호한 부분이 있으면 AI가 추측 대신 되물어봅니다.
02
프리뷰
파일이 트리에 나타나고 프리뷰가 렌더링합니다. 코드가 작성되는 중에도 애니메이션과 브레이크포인트를 마우스로 확인할 수 있습니다.
03
다듬기
캔버스의 아무 요소나 선택해 인라인 편집하거나, AI에게 섹션을 재작업해달라고 하세요. 스타일 변경은 모든 페이지에 반영됩니다.
04
배포
Build it을 누르세요. 프로토타입은 공개 URL이 있는 완전한 Cloudflare Pages 프로젝트가 되어 바로 공유할 수 있습니다.
두 개의 타깃, 하나의 캔버스
오늘은 사이트. 타깃을 바꾸면 같은 프롬프트가 모바일 앱이 됩니다.
캔버스는 두 타깃의 프리뷰를 모두 보여줍니다 — 하나는 브라우저에, 다른 하나는 폰 프레임에. 하나를 고르면 Build it이 그에 맞는 프로젝트를 돌려줍니다.
타깃: 사이트
Cloudflare Pages 위의 HTML / CSS / JS
- 프로덕션과 동일하게 보이도록 같은 도메인 iframe 프리뷰
- 서명된 프리뷰 URL — 공유받은 사람만 열 수 있음
- Build it 핸드오프로 Cloudflare Pages에 배포
타깃: 앱
iPhone 라이브 프리뷰가 있는 Flutter 프로젝트
- 캔버스 위 iPhone 프레임 프리뷰
- 목업이 아닌 실제 Dart · Flutter 코드
- 반복 개발을 위해 완전한 Flutter 프로젝트로 핸드오프
이미 익숙한 홈페이지 빌더와의 비교
새로운 AI 홈페이지 제작 도구가 제대로 한 것
드래그 앤 드롭 빌더
Genspark Build
시작점
800개 템플릿 탐색
한국어로 한 문장
출력
잠긴 프로프라이어터리 블록
편집 가능한 HTML / CSS / JS 파일
다중 페이지 사이트
페이지마다 직접 추가
함께 생성, 내비게이션 동기화
반복 수정
드래그, 드롭, 드래그, 드롭
채팅으로 요청, 사이트가 업데이트
호스팅
해당 호스트에 묶임, 대개 유료
Cloudflare Pages 또는 자체 서버
모바일 앱 지원
보통 없음
타깃 변경 → Flutter 앱
AI 홈페이지 제작, 자주 묻는 질문
AI 홈페이지 제작은 실제로 어떻게 동작하나요?
채팅 패널에 사이트를 설명하세요. Claude Opus 4.7이 페이지를 구성하고 코드를 작성합니다. 프리뷰 iframe은 파일이 도착하는 대로 렌더링합니다. 만족스러울 때 Build it을 누르면 Genspark가 모든 것을 공개 URL 있는 Cloudflare Pages 프로젝트로 묶어줍니다. 로컬 빌드 도구는 필요 없습니다.
Genspark Build는 무료인가요?
Genspark Build는 무료로 시도해볼 수 있고 사이트 프리뷰도 무료입니다. 지속적인 생성과 Build it 배포 단계는 Genspark Plus, Pro 플랜에 포함됩니다. 무제한 무료 제안은 없습니다 — 각 빌드는 실제 컴퓨트를 소모합니다.
이건 AI 웹사이트 빌더인가요 아니면 AI 웹사이트 제너레이터인가요?
둘 다입니다. Genspark Build는 프롬프트로 사이트를 생성한 뒤, 반복 수정하는 동안에도 같은 파일을 계속 다듬어 갑니다. 코드가 눈앞에서 살아 있는 순간, 빌더와 제너레이터의 예전 구분은 의미를 잃습니다.
자체 도메인으로 배포할 수 있나요?
네. Build it은 공개 URL이 있는 Cloudflare Pages 배포를 바로 만들고, 자체 도메인을 그 배포로 연결할 수 있습니다. 다른 곳에 호스팅하고 싶다면 프로젝트를 다운로드하세요 — 어디서든 서빙할 수 있는 표준 웹 코드입니다.
어떤 종류의 사이트를 만들 수 있나요?
랜딩 페이지, SaaS 홈페이지, 포트폴리오, 요금제 페이지, 대시보드, 가입 플로우, 내부 덱, 온보딩 화면. 위의 시작 프롬프트는 목업이 아니라 Genspark Build가 처음부터 끝까지 실제로 생성한 것입니다.
모바일 앱도 만들 수 있나요?
네. 타깃을 사이트에서 앱으로 바꾸세요. 캔버스는 iPhone 프레임으로 바뀌고, AI가 Dart와 Flutter 코드를 작성하며, Build it은 Cloudflare Pages 대신 완전한 Flutter 프로젝트를 돌려줍니다.
AI가 쓴 코드는 제 것인가요?
네. 다운로드, 편집, 포크, 엔지니어에게 넘기기 — 전부 가능합니다. 코드를 잡아두는 전용 에디터도, 내보내기 수수료도 없습니다.
Wix, Squarespace 등 다른 사이트 빌더와는 어떻게 다른가요?
전통적인 빌더는 드래그할 블록을 줍니다. Genspark Build는 채팅창을 줍니다. 당신이 사이트를 설명하면 AI가 코드를 작성하고, 당신은 타이핑으로 다듬습니다. 결과물은 당신 소유가 되는 실제 코드입니다.
만들 준비됐나요?
다음 웹사이트는 한 문장에서 시작합니다.
Genspark Build로 무료 시작하세요. 사이트를 설명하면 AI가 나머지를 맡습니다.