Bolt 사례 연구: 2인 에이전시가 1주일 만에 5개 클라이언트 랜딩페이지를 구축한 방법
개요: 소규모 에이전시의 대규모 성과
서울 기반 2인 디지털 에이전시 ‘픽셀크래프트’는 한 주 안에 5개 클라이언트의 랜딩페이지를 동시에 구축·배포해야 하는 도전에 직면했습니다. 전통적인 워크플로우로는 클라이언트당 최소 3~5일이 소요되지만, Bolt의 AI 기반 컴포넌트 생성과 실시간 프리뷰 공유 기능을 활용해 7일 만에 모든 프로젝트를 성공적으로 완료했습니다.
프로젝트 배경
| 항목 | 상세 |
|---|---|
| 에이전시 규모 | 디자이너 1명 + 개발자 1명 |
| 클라이언트 수 | 5개 (카페, 법률사무소, 피트니스, SaaS 스타트업, 부동산) |
| 기한 | 7일 (영업일 기준) |
| 요구사항 | 반응형 디자인, 커스텀 도메인, 실시간 클라이언트 프리뷰 |
1단계: Bolt 프로젝트 일괄 생성 (Day 1)
Bolt에서 각 클라이언트별 프로젝트를 생성하고, AI 프롬프트로 초기 구조를 빠르게 세팅합니다.
# Bolt 프로젝트 생성 시 사용한 프롬프트 예시 (카페 랜딩페이지)
“모던 카페 랜딩페이지를 만들어줘.
히어로 섹션에 큰 타이틀과 CTA 버튼,
메뉴 섹션은 카드 그리드 레이아웃,
위치 및 영업시간 섹션,
고객 리뷰 캐러셀,
하단 연락처 폼 포함.
Tailwind CSS 사용하고, 다크 톤 컬러 스킴으로.”
Bolt는 이 프롬프트 하나로 완전한 React + Tailwind CSS 기반 랜딩페이지 코드를 생성합니다. 헤더, 히어로, 메뉴 그리드, 리뷰 슬라이더, 연락처 폼까지 모든 섹션이 포함됩니다.
2단계: AI 컴포넌트 커스터마이징 (Day 2-3)
Bolt가 생성한 기본 컴포넌트를 각 클라이언트 브랜드에 맞게 조정합니다.
# Bolt 채팅에서 컴포넌트 수정 프롬프트
“히어로 섹션의 배경색을 #1a1a2e로 바꾸고,
CTA 버튼을 #e94560 컬러의 라운드 버튼으로 변경해줘.
폰트는 Pretendard를 기본으로 설정해.”
// Bolt가 생성한 커스텀 CTA 버튼 컴포넌트 예시 const CTAButton = ({ text, href, variant = ‘primary’ }) => { const styles = { primary: ‘bg-[#e94560] hover:bg-[#c81d4e] text-white’, secondary: ‘border-2 border-[#e94560] text-[#e94560] hover:bg-[#e94560] hover:text-white’ };return ( <a href={href} className={
px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 inline-block ${styles[variant]}} > {text} ); };
export default CTAButton;
3단계: 실시간 클라이언트 프리뷰 공유 (Day 3-4)
Bolt의 프리뷰 공유 기능을 활용해 각 클라이언트에게 실시간 진행 상황을 공유합니다. - Bolt 에디터 상단의 **Share** 버튼 클릭- **Generate Preview Link** 선택- 생성된 프리뷰 URL을 클라이언트에게 전달- 클라이언트가 브라우저에서 실시간으로 변경사항 확인프리뷰 링크를 통해 클라이언트는 별도 소프트웨어 설치 없이 모바일·데스크탑 모두에서 페이지를 확인할 수 있으며, 피드백을 즉시 전달할 수 있습니다.
4단계: 반응형 최적화 (Day 4-5)
# Bolt에 반응형 최적화 요청
“모든 섹션을 모바일 퍼스트로 최적화해줘.
- 모바일: 1열 레이아웃, 터치 친화적 버튼 크기(최소 48px)
- 태블릿: 2열 그리드
데스크탑: 3열 그리드 네비게이션은 모바일에서 햄버거 메뉴로 변경해줘.”
5단계: 커스텀 도메인 연결 및 배포 (Day 5-6)
Bolt에서 직접 커스텀 도메인을 연결하고 프로덕션 배포를 진행합니다.
- Bolt 프로젝트 설정에서 **Deploy** 선택- **Custom Domain** 옵션에 클라이언트 도메인 입력 (예: www.clientcafe.kr)- 도메인 DNS 설정에서 Bolt가 제공하는 CNAME 레코드 추가- SSL 인증서 자동 발급 확인 후 배포 완료# DNS 설정 예시 (도메인 관리 패널에서 추가)
# 타입: CNAME
# 호스트: www
# 값: cname.bolt.new
# TTL: 3600
### 6단계: 최종 QA 및 수정 (Day 6-7)
5개 사이트 전체에 대해 성능 점검과 최종 클라이언트 피드백 반영을 진행합니다.
# Lighthouse 성능 점검 (각 사이트별 실행)
npx lighthouse https://www.clientcafe.kr --output html --output-path ./reports/cafe-report.html
## 최종 결과
| 지표 | 기존 워크플로우 | Bolt 활용 |
|---|---|---|
| 프로젝트당 소요 시간 | 3~5일 | 1.2일 평균 |
| 클라이언트 피드백 반영 | 24시간 이상 | 실시간 (~30분) |
| 코드 작성 비율 | 수동 90% | AI 생성 70% + 커스텀 30% |
| Lighthouse 평균 점수 | 78점 | 92점 |
| 총 프로젝트 비용 절감 | - | 약 60% 절감 |
커스텀 도메인 연결 실패
**증상**: 도메인 연결 후 "DNS not configured" 오류 표시
**해결**: DNS 전파에 최대 48시간이 소요될 수 있습니다. CNAME 레코드가 정확한지 확인하고, 기존 A 레코드와 충돌하는 항목을 삭제하세요.
# DNS 전파 상태 확인
nslookup www.clientcafe.kr
# 또는
dig www.clientcafe.kr CNAME
### AI 생성 코드가 예상과 다를 때
**증상**: 프롬프트와 다른 레이아웃이나 스타일 생성 **해결**: 프롬프트를 더 구체적으로 작성하세요. 색상 코드, 정확한 레이아웃 구조(열 수, 간격), 참조 사이트 URL을 포함하면 정확도가 크게 향상됩니다.
배포 후 모바일 레이아웃 깨짐
증상: 데스크탑에서는 정상이나 모바일에서 요소 겹침 발생
해결: Bolt 채팅에서 “모바일 뷰포트(375px)에서 모든 섹션의 레이아웃을 검증하고 수정해줘”라고 요청하세요. viewport meta 태그가 누락되지 않았는지도 확인합니다.
프리뷰 링크 로딩 속도 저하
**증상**: 클라이언트가 프리뷰 링크 접속 시 로딩이 느리다고 보고 **해결**: 대용량 에셋(비디오, 고해상도 이미지)을 외부 CDN으로 분리하고, Bolt 프로젝트 내에서는 최적화된 에셋만 사용하세요.
핵심 교훈
- AI 코드 생성은 초기 구조 세팅 시간을 획기적으로 단축하지만, 브랜드 맞춤 커스터마이징은 여전히 사람의 판단이 필요합니다.- 실시간 프리뷰 공유가 클라이언트 커뮤니케이션 비용을 가장 크게 절감한 요소였습니다.- 2인 팀이라도 Bolt를 활용하면 5인 팀 수준의 산출물을 만들어낼 수 있습니다.
자주 묻는 질문 (FAQ)
Q1: Bolt 무료 플랜으로도 이 워크플로우가 가능한가요?
기본적인 페이지 생성과 프리뷰는 무료 플랜에서도 가능하지만, 커스텀 도메인 연결과 다수 프로젝트 동시 관리를 위해서는 Pro 플랜 이상이 권장됩니다. 특히 5개 프로젝트를 병렬로 진행하려면 Pro 플랜의 토큰 한도가 필수적입니다.
Q2: 클라이언트가 직접 내용을 수정할 수 있는 CMS 기능도 포함되나요?
Bolt 자체는 CMS 기능을 내장하지 않지만, Bolt에서 생성한 코드를 Headless CMS(Contentful, Sanity 등)와 연동하도록 프롬프트에 요청할 수 있습니다. 간단한 텍스트 수정이라면 배포 후 Bolt 에디터에서 직접 수정하고 재배포하는 것이 가장 빠릅니다.
Q3: 생성된 코드의 품질은 프로덕션 수준인가요?
Bolt가 생성하는 코드는 React + Tailwind CSS 기반으로 구조적으로 깔끔한 편이며, 이 사례에서 Lighthouse 평균 92점을 달성했습니다. 다만 복잡한 비즈니스 로직이나 보안이 중요한 폼 처리 부분은 반드시 개발자가 검토하고 보강해야 합니다. AI 생성 코드를 그대로 사용하기보다 전문가의 리뷰를 거치는 것이 권장됩니다.