<학습영상>
https://www.youtube.com/watch?v=q50nmbs7PN0
웹사이트 제작 | gemini, ai studio/ 마케팅 트루먼쇼 Marketing Truman Show
#gemini.cli#vscode#copilot(chat)
ai로 오토 에이전시 운영을 위한 홈페이지 제작 (feat. Gemini.cli )
# 물론 claude code 좋은 점 안다. 긍뎀 구독박기 싫어서 gemini.cli 사용중!
완성된 코드
https://github.com/git2583/aiautoagency
홈페이지 작성 with copilot
홈페이지 기획안 작성
나는 한국의 AI 자동화 에이전시를 운영하고 있습니다.
서비스: 마케팅 자동화, 테이터 파이프라인, AI 챗봇 구축.
이 서비스의 이상적인 고객이 누구인지,
이 고객이 어떤 문제를 갖고 있는지,
어떤 키워드로 검색할지 정리해주세요.
결과를 JSON으로 작성해주세요.
json으로 작성하는 이유:
요청결과
{
"market_analysis": {
"ideal_customer_profile": {
"segment": "Korean SMBs (소규모 및 중소 기업)",
"employee_count": "50-500 employees",
"annual_revenue": "500M - 50B KRW",
"industries": [
"E-commerce / Retail",
"SaaS / Software",
"Financial Services (FinTech)",
"Marketing / Advertising Agencies",
"Manufacturing / Supply Chain",
"Logistics / Fulfillment",
"Real Estate / Property Management"
],
"company_stage": ["Growth Stage", "Series A-B funded startups"],
"characteristics": {
"pain_points": [
"Manual, repetitive marketing tasks drain team bandwidth",
"Fragmented customer data across CRM, email, web analytics",
"No centralized lead scoring or qualification process",
"Limited budget for enterprise software—need cost-effective solutions",
"High customer churn due to poor customer experience",
"Can't respond quickly to customer inquiries",
"Difficult to measure marketing ROI",
"Scaling operations without hiring big teams"
],
"decision_factors": [
"Total cost of ownership (licensing + implementation + training)",
"Time-to-value (quick wins within 2-3 months)",
"Local language support and compliance (Korean)",
"Ease of integration with existing systems",
"Post-launch support and training quality"
],
"budget": "30M - 300M KRW per project (annual or project-based)",
"decision_makers": [
"Chief Marketing Officer / Growth Lead",
"Operations Manager",
"CTO / Tech Lead",
"CEO (for final approval)"
]
}
},
"customer_problems": {
"marketing_automation": {
"problem": "Marketing team manually manages email campaigns, social, web events—no workflow automation",
"symptoms": [
"Email list unmanaged; low open/click rates",
"Leads sit in inbox instead of flowing through qualification process",
"Same manual outreach repeated every month",
"Campaign performance buried in spreadsheets"
],
"job_to_be_done": "Automate lead capture → scoring → nurture → handoff to sales with measurable results",
"value_delivered": [
"50-70% reduction in marketing operations time",
"3-5x improvement in lead response time",
"20-40% increase in qualified leads per month",
"Departmental ROI visible in 60-90 days"
]
},
"data_pipelines": {
"problem": "Customer and business data lives in silos—CRM, email, web analytics, sales tools don't talk",
"symptoms": [
"Reports created manually in Excel from multiple sources",
"Single source of truth doesn't exist",
"Delays in decision-making due to stale data",
"Customer 360 view impossible—team doesn't know full customer journey"
],
"job_to_be_done": "Unify all data sources → clean & enrich → accessible dashboard for operations, marketing, sales",
"value_delivered": [
"Unified customer view across all touchpoints",
"Real-time dashboards replace monthly reports",
"Data-driven decisions reduce guesswork by 60%+",
"Better customer segmentation for targeted campaigns"
]
},
"ai_chatbot": {
"problem": "Customer support team overwhelmed with repetitive questions; long response times hurt satisfaction",
"symptoms": [
"Support backlog growing every week",
"High response time (6-24 hours) to common questions",
"After-hours support impossible—customers feel ignored",
"Team frustrated with repetitive work"
],
"job_to_be_done": "Deploy AI chatbot to handle 60-80% of FAQ, routine inquiries, and escalate complex issues to humans smartly",
"value_delivered": [
"24/7 customer support coverage (no overnight gaps)",
"Response time reduced from hours to seconds",
"Customer satisfaction score increases 15-25%",
"Support team freed up for complex issues and strategy"
]
}
},
"customer_search_keywords": {
"marketing_automation": {
"korean_keywords": [
"마케팅 자동화 솔루션",
"리드 스코링 시스템",
"이메일 자동화 플랫폼",
"한국 CRM 자동화",
"고객 여정 자동화"
],
"english_keywords_korean_context": [
"Marketing automation for SMB Korea",
"Lead nurturing workflow setup",
"Email campaign automation platform Korean",
"Marketing operations tool for growing companies",
"Customer journey automation software"
],
"search_intent": "Looking for tools or agencies to automate their marketing workflows",
"search_volume": "High (1K-5K monthly searches in Korea)"
},
"data_pipelines": {
"korean_keywords": [
"데이터 파이프라인 구축",
"ETL 솔루션 한국",
"데이터 통합 서비스",
"고객 데이터 통합",
"대시보드 구축 서비스"
],
"english_keywords_korean_context": [
"Data pipeline development Korea",
"ETL engineering service Korean companies",
"Data warehouse setup SMB",
"Customer data integration platform",
"Business intelligence dashboard setup"
],
"search_intent": "Looking for data infrastructure help or outsourced data engineering",
"search_volume": "Medium (500-2K monthly searches in Korea)"
},
"ai_chatbot": {
"korean_keywords": [
"AI 챗봇 구축",
"한국어 챗봇 개발",
"고객 AI 챗봇",
"챗봇 구현 서비스",
"AI 상담 봇",
"카카오톡 챗봇",
"웹사이트 챗봇"
],
"english_keywords_korean_context": [
"AI chatbot development Korea",
"Korean language chatbot builder",
"Conversational AI for customer service",
"Chatbot implementation consulting",
"KakaoTalk chatbot development",
"Website chatbot setup"
],
"search_intent": "Looking for chatbot builders or AI customer service solutions",
"search_volume": "High (2K-8K monthly searches in Korea)"
}
},
"outbound_targeting": {
"top_industries_to_target": [
{
"industry": "E-commerce",
"why": "High customer volume, constant marketing/support needs, strong ROI case for automation",
"company_examples": ["Coupang-adjacent", "Fashion/Retail marketplaces", "Food delivery platforms"]
},
{
"industry": "SaaS / Software",
"why": "Data-driven mindset, quick to adopt automation, viral growth potential from SDR automation",
"company_examples": ["Korean FinTech startups", "B2B SaaS marketplaces"]
},
{
"industry": "FinTech",
"why": "Rapid scaling, compliance-conscious (data pipelines), high customer lifetime value",
"company_examples": ["Loan platforms", "Payment processors", "Insurance tech"]
},
{
"industry": "Marketing Agencies",
"why": "Agencies need automation for clients, re-sellable services, consistent revenue",
"company_examples": ["Performance marketing agencies", "Digital transformation consultants"]
}
],
"outbound_channels": [
"LinkedIn (B2B focus, targeting Korean professionals)",
"Naver / Korean tech forums (where Korean SMBs research tools)",
"Startup networks / accelerator alumni lists",
"Existing CRM tool user communities",
"Direct cold outreach via corporate directories"
]
}
}
}
깃헙에 업로드
랜딩페이지 카피 요청:
<요청결과>
market-analysis.json
# 랜딩페이지 카피
## 1️⃣ Hero Section### 제목**팀이 집계 작업에 잡혀 있나요?** 마케팅, 고객 데이터, 지원을 2-3배 빠르게 자동화하세요.### 부제50-500명 규모의 성장 중인 기업들이 우리와 함께 **60-90일 내에** 운영 시간을 50% 줄이고 있습니다.### CTA 버튼```🚀 무료 자동화 진단받기 (5분)또는이메일로 요청 → hello@aiautoagency.kr```---
## 2️⃣ Problem Section### 헤딩**당신의 팀, 이 중 하나라도 겪고 있나요?**### 문제 1: 마케팅 팀이 엑셀에 묻혀 있다- 매달 반복되는 이메일 캠프인을 **수동으로 관리** - 리드 응답 시간: **6-24시간** (경쟁사는 5분) - 스프레드시트 3개에 흩어진 캠프인 성과 데이터 **결과**: 월 20-30건 리드 놓치고, ROI 추적 불가능### 문제 2: 데이터가 흩어져 있다- CRM, 이메일, 웹분석, 결제 시스템이 **독립적으로 존재** - 고객 전체 여정을 알 수 없음 (누가 구매층인지, 이탈자인지 모름) - 영업, 마케팅, 운영팀이 **다른 숫자**를 믿음 **결과**: 의사결정이 추측일 뿐, 세그먼트 기반 캠프인 불가능### 문제 3: 고객 지원팀이 같은 질문으로 번아웃- 일일 **중복 문의 60-80%** ("배송 언제?", "환불 가능?") - 야간/휴일: 고객 응답 0 → 이탈로 연결 - 지원팀은 반복 업무에 묶여 **전략 업무 불가능** **결과**: CSAT 하락 → 재구매율 20% 감소---
## 3️⃣ Services Section### 헤딩**우리가 3가지로 해결합니다**### 서비스 1: 마케팅 자동화**리드 캡처 → 스코링 → 육성 → 영업 연결까지 자동**✅ **60-90일 내 효과**- 마케팅 운영 시간: **50-70% 단축**- 리드 응답 시간: **3-5배 빠름** (6시간 → 2시간)- 월 신규 리드: **20-40% 증가**- ROI 계산 자동화 (숫자 10분 안에 나옴)**어떻게?** 이메일, CRM, 웹 폼 연결 → 자동 분류 & 영업 알림 설정---### 서비스 2: 데이터 파이프라인 구축**CRM, 이메일, 분석, 결제 → 한 대시보드**✅ **즉시 효과**- 고객 정보 **360도 통합 조회** (누가 구매층/위험군인지 한눈에)- 월간 보고서 작업: **5시간 → 0시간** (실시간 대시보드)- 데이터 기반 결정 시: **추측 60% 제거**- 세그먼트 기반 캠프인으로 전환율 **15-25% 향상****어떻게?** 모든 데이터 소스 연결 → 정제 & 통합 → BI 대시보드 구성---### 서비스 3: AI 챗봇 구축**고객 문의를 **초**로 해결. 지원팀은 복잡한 이슈에만 집중**✅ **첫 달 효과**- 지원팀 부담: **60-80% 감소** (반복 질문 자동 처리)- 응답 속도: **평균 6시간 → 초 단위** (24/7)- 고객 만족도 +**15-25%** (야간/휴일 대응)- 월간 지원팀 시간: **200시간 절감****어떻게?** 한국어 AI 학습 + 웹/카카오톡/Slack 연결 → 스마트 에스컬레이션---
## 4️⃣ Testimonials Section### 헤딩**실제 고객들은 이렇게 변했습니다**---### 후기 1**"매달 80시간 잃던 마케팅 팀이 전략가가 됐어요"**> **김민지** | 이커머스 스타트업 마케팅 리드 > > 이전: 엑셀로 캠프인 관리, 리드는 매일 수동 입력 > 이후: 모든 리드가 자동 분류되고, 점수까지 매겨짐 > > 가장 놀라웠던 건 **60-90일 후 ROI 계산이 초 단위로 나온 것**. 이제 "어떤 캠프인이 효과 있는지" 데이터로 얘기할 수 있어요. 팀의사 시간도 절반이 됐어요.---### 후기 2**"고객 데이터가 통합되니 영업이 확 달라졌습니다"**> **박준호** | SaaS 회사 CTO > > 이전: 영업팀 "고객 재구매율이 뭐라고 아세요?" 난 CRM 봤는데 데이터가 다름 > 이후: 한 대시보드에서 모든 고객 정보 실시간 조회 > > 가장 실질적인 변화는 **데이터 갈등이 없어진 것**. 다들 같은 숫자를 본다. 그리고 고객 세그먼트별 캠프인을 구성했더니 전환율이 18% 올랐어요.---
## 5️⃣ CTA Section### 최종 액션 유도### 헤딩**다음 달 자동화, 오늘부터 시작하세요**### 설명당신의 팀 상황 (마케팅 / 데이터 / 고객지원) 에 맞춰 **2주 내 맞춤 제안**을 드립니다. 비용? **초기 무료 진단** → 필요한 것만 구성 → ROI 명확.### CTA 버튼 (2개)```가장 많이 선택 (Primary):📅 무료 상담 예약 (1:1 온라인, 30분)→ hello@aiautoagency.kr 또는 캘린더 링크대안 (Secondary):📧 이메일로 자동화 체크리스트 받기```### 신뢰 요소 추가✓ 지난 1년 동안 E-커머스, SaaS, 핀테크 30+ 팀 지원 ✓ 평균 **60-90일 내 ROI 달성** ✓ 국내 데이터 센터 & PIPA 완전 준수---## 💡 추가 구성 팁**이 카피를 웹에 배치할 때:**1. **Hero** - 풀스크린 비디오 배경 (자동화 프로세스 영상 또는 대시보드 화면)2. **Problem** - 3개 카드 레이아웃, 각각 아이콘 (📊 📩 🤖)3. **Services** - 3단 병렬 구성, 이미지/스크린샷 포함4. **Testimonials** - 좌우 2개 카드, 프로필 사진 + 별점5. **CTA** - 하단 고정 배너 또는 팝업 (스크롤 깊이 50% 지점)**전체 톤 검증:**- ✅ 구체적 숫자 사용 (60%, 3-5배, 50-70% 등)- ✅ "혁신적", "최적의" 같은 뻔한 표현 제거- ✅ 고객의 구체적 상황 언급 (엑셀, 스프레드시트, 수동 입력)- ✅ 실질적 효과 강조 (ROI, 시간 절감, CSAT)
---
## 1️⃣ Hero Section
### 제목
**팀이 집계 작업에 잡혀 있나요?**
마케팅, 고객 데이터, 지원을 2-3배 빠르게 자동화하세요.
### 부제
50-500명 규모의 성장 중인 기업들이 우리와 함께 **60-90일 내에** 운영 시간을 50% 줄이고 있습니다.
### CTA 버튼
```
🚀 무료 자동화 진단받기 (5분)
또는
이메일로 요청 → hello@aiautoagency.kr
```
---
## 2️⃣ Problem Section
### 헤딩
**당신의 팀, 이 중 하나라도 겪고 있나요?**
### 문제 1: 마케팅 팀이 엑셀에 묻혀 있다
- 매달 반복되는 이메일 캠프인을 **수동으로 관리**
- 리드 응답 시간: **6-24시간** (경쟁사는 5분)
- 스프레드시트 3개에 흩어진 캠프인 성과 데이터
**결과**: 월 20-30건 리드 놓치고, ROI 추적 불가능
### 문제 2: 데이터가 흩어져 있다
- CRM, 이메일, 웹분석, 결제 시스템이 **독립적으로 존재**
- 고객 전체 여정을 알 수 없음 (누가 구매층인지, 이탈자인지 모름)
- 영업, 마케팅, 운영팀이 **다른 숫자**를 믿음
**결과**: 의사결정이 추측일 뿐, 세그먼트 기반 캠프인 불가능
### 문제 3: 고객 지원팀이 같은 질문으로 번아웃
- 일일 **중복 문의 60-80%** ("배송 언제?", "환불 가능?")
- 야간/휴일: 고객 응답 0 → 이탈로 연결
- 지원팀은 반복 업무에 묶여 **전략 업무 불가능**
**결과**: CSAT 하락 → 재구매율 20% 감소
---
## 3️⃣ Services Section
### 헤딩
**우리가 3가지로 해결합니다**
### 서비스 1: 마케팅 자동화
**리드 캡처 → 스코링 → 육성 → 영업 연결까지 자동**
✅ **60-90일 내 효과**
- 마케팅 운영 시간: **50-70% 단축**
- 리드 응답 시간: **3-5배 빠름** (6시간 → 2시간)
- 월 신규 리드: **20-40% 증가**
- ROI 계산 자동화 (숫자 10분 안에 나옴)
**어떻게?** 이메일, CRM, 웹 폼 연결 → 자동 분류 & 영업 알림 설정
---
### 서비스 2: 데이터 파이프라인 구축
**CRM, 이메일, 분석, 결제 → 한 대시보드**
✅ **즉시 효과**
- 고객 정보 **360도 통합 조회** (누가 구매층/위험군인지 한눈에)
- 월간 보고서 작업: **5시간 → 0시간** (실시간 대시보드)
- 데이터 기반 결정 시: **추측 60% 제거**
- 세그먼트 기반 캠프인으로 전환율 **15-25% 향상**
**어떻게?** 모든 데이터 소스 연결 → 정제 & 통합 → BI 대시보드 구성
---
### 서비스 3: AI 챗봇 구축
**고객 문의를 **초**로 해결. 지원팀은 복잡한 이슈에만 집중**
✅ **첫 달 효과**
- 지원팀 부담: **60-80% 감소** (반복 질문 자동 처리)
- 응답 속도: **평균 6시간 → 초 단위** (24/7)
- 고객 만족도 +**15-25%** (야간/휴일 대응)
- 월간 지원팀 시간: **200시간 절감**
**어떻게?** 한국어 AI 학습 + 웹/카카오톡/Slack 연결 → 스마트 에스컬레이션
---
## 4️⃣ Testimonials Section
### 헤딩
**실제 고객들은 이렇게 변했습니다**
---
### 후기 1
**"매달 80시간 잃던 마케팅 팀이 전략가가 됐어요"**
> **김민지** | 이커머스 스타트업 마케팅 리드
>
> 이전: 엑셀로 캠프인 관리, 리드는 매일 수동 입력
> 이후: 모든 리드가 자동 분류되고, 점수까지 매겨짐
>
> 가장 놀라웠던 건 **60-90일 후 ROI 계산이 초 단위로 나온 것**. 이제 "어떤 캠프인이 효과 있는지" 데이터로 얘기할 수 있어요. 팀의사 시간도 절반이 됐어요.
---
### 후기 2
**"고객 데이터가 통합되니 영업이 확 달라졌습니다"**
> **박준호** | SaaS 회사 CTO
>
> 이전: 영업팀 "고객 재구매율이 뭐라고 아세요?" 난 CRM 봤는데 데이터가 다름
> 이후: 한 대시보드에서 모든 고객 정보 실시간 조회
>
> 가장 실질적인 변화는 **데이터 갈등이 없어진 것**. 다들 같은 숫자를 본다. 그리고 고객 세그먼트별 캠프인을 구성했더니 전환율이 18% 올랐어요.
---
## 5️⃣ CTA Section
### 최종 액션 유도
### 헤딩
**다음 달 자동화, 오늘부터 시작하세요**
### 설명
당신의 팀 상황 (마케팅 / 데이터 / 고객지원) 에 맞춰 **2주 내 맞춤 제안**을 드립니다.
비용? **초기 무료 진단** → 필요한 것만 구성 → ROI 명확.
### CTA 버튼 (2개)
```
가장 많이 선택 (Primary):
📅 무료 상담 예약 (1:1 온라인, 30분)
→ hello@aiautoagency.kr 또는 캘린더 링크
대안 (Secondary):
📧 이메일로 자동화 체크리스트 받기
```
### 신뢰 요소 추가
✓ 지난 1년 동안 E-커머스, SaaS, 핀테크 30+ 팀 지원
✓ 평균 **60-90일 내 ROI 달성**
✓ 국내 데이터 센터 & PIPA 완전 준수
---
## 💡 추가 구성 팁
**이 카피를 웹에 배치할 때:**
1. **Hero** - 풀스크린 비디오 배경 (자동화 프로세스 영상 또는 대시보드 화면)
2. **Problem** - 3개 카드 레이아웃, 각각 아이콘 (📊 📩 🤖)
3. **Services** - 3단 병렬 구성, 이미지/스크린샷 포함
4. **Testimonials** - 좌우 2개 카드, 프로필 사진 + 별점
5. **CTA** - 하단 고정 배너 또는 팝업 (스크롤 깊이 50% 지점)
**전체 톤 검증:**
- ✅ 구체적 숫자 사용 (60%, 3-5배, 50-70% 등)
- ✅ "혁신적", "최적의" 같은 뻔한 표현 제거
- ✅ 고객의 구체적 상황 언급 (엑셀, 스프레드시트, 수동 입력)
- ✅ 실질적 효과 강조 (ROI, 시간 절감, CSAT)
디자인
참조링크
https://pixelcloudtemaplate.framer.website/
Home - Multi-Layout Tech Framer Template | Pixelcloud
Want a website for your startup company? Discover Pixelcloud, the impeccable Multi-Layout Tech Framer Template built for cutting-edge businesses and tech startups.
pixelcloudtemaplate.framer.website
https://www.framer.com/marketplace/templates/pixelcloud/
홈페이지 작성요청
GPT4.1로 후속 작업 진행
홈피 보려면
cd web
rpm run dev
홈페이지 완성
홈페이지 작성 with gemini cli
copilot 토큰이 바닥났다. 그래서 터미널에서 gemini cli 사용, 나머지 작업을 완성중
코파일럿에서 처럼 이미지를 올릴 수 없다. 해당 디자인 링크를 주면 가능도 할듯... ! 그러나 결과는 x
press tab to focus
이 탭을 누르면 박스안 옵션 선택이 가능하다.
web/src/index.css
web/src/App.tsx
github 업데이트
홈페이지 확인
실행화면
skill.md 작성 요청
/skills reload: 웹페이지제작 스킬 불러오기 명령어
'생성형 AI > web 프로젝트' 카테고리의 다른 글
| design skill + claude code+ Netlify Drop : 랜딩페이지 (0) | 2026.04.04 |
|---|---|
| Gemini cli 로 smb를 위한 자동화 솔루션 만들기 2(feat. 홈페이지) (0) | 2026.03.30 |