이 사이트는, AI로 만들었습니다.
지금 보고 계신 webharu.com 자체가 AI(Claude Code)로 구축되어 있습니다. 디자인도, 코딩도, 글 이전도.“AI로 사이트를 만들 수 있습니다”라고 말만 하는 회사와,자사 사이트에서 실제로 해 보이는 회사— 어느 쪽에 맡길지 판단하는 재료로서, 과정을 모두 공개합니다.
※ 숫자는 모두 git의 실제 이력에 근거합니다(2026년 7월 8일~10일). 3일은 구축에 걸린 일수이며, 기획·전략을 포함한 전체는 7일입니다. 자사 사이트라 요구사항 정리·확인의 왕복이 없어 이 속도가 나왔습니다. 수주 프로젝트의 경우 AI 웹사이트 제작은 1~2주, 오리지널 디자인 사이트 제작은 요구사항 정리와 리뷰가 들어가므로 약 1.5~2개월이 기준입니다.
3일 동안 무엇을 했는가.
설계와 26페이지 일괄 구축
사이트맵 → 페이지 구성 → 디자인 시안(AI가 HTML로 생성, 사람이 리뷰) → Astro로 구현. 상단의 벚꽃 연출·스크롤 손글씨 같은 움직임도 이날 AI가 구현했습니다.
콘텐츠 이전과 측정·폼 기반
구 사이트(Webflow)에서 글 62편·실적 24건을 스크래핑으로 추출해 이미지 최적화까지 포함하여 이전. GA4·Clarity 측정 기반, GAS 연동 4개 폼, 구조화 데이터를 정비했습니다.
SEO·고속화와 이 페이지를 포함한 확충
폰트 서브셋화·sitemap·llms.txt(AI용 사이트 안내)를 정비. 앱 개발 페이지·계산 도구·용어집·비교 페이지 등 유입 페이지를 AI가 양산 — 지금 보고 계신 이 페이지도 AI가 쓰고 있습니다.
AI가 한 일. 사람이 한 일.
“전부 AI”라고 하면 거짓말이 됩니다. 실제 분담은 이랬습니다 — 그리고 이 분담이야말로 AI 제작의 품질을 결정합니다.
AI(Claude Code)의 담당
- 디자인 시안 HTML 생성(복수 안)
- 전 페이지 코딩(Astro·애니메이션 포함)
- 글·실적 데이터의 추출, 변환, 이전
- 구조화 데이터·SEO 설정·퍼포먼스 개선
- 버그 조사와 수정, 실기기 표시 확인
사람(대표·구리타)의 담당
- 콘셉트와 구성 결정(무엇을 전하는 사이트인가)
- 디자인의 심미 판단 — 고치는 것은 여기가 부족할 때
- 문장의 사실 확인과 영업 판단(가격·보여주는 방식)
- 각 공정의 리뷰와 GO 사인
즉,손을 움직이는 것은 AI, 판단하는 것은 사람. Webflow 해설 글을 계속 써 왔고 디자인에 끝까지 공을 들여 온 사람이 리뷰에 집중하기 때문에, AI의 속도와 사람의 품질이 양립합니다.
AI×제작의 실천 기록
이 사이트 외에도 AI로 제작·개발을 실천하고 그 과정을 글로 남기고 있습니다.
AI로 근태 관리 앱을 만드는 방법 | Figma Make 활용
음식점 근태 관리 앱을 Figma Make와 AI로 만든 실제 기록.
바이브 코딩AI 바이브 코딩×Webflow로 할 수 있는 것
코드를 쓰지 않고 AI에게 지시해 개발하는 방법의 철저 해설.
Webflow AIWebflow App Gen을 사용해 봤다
프롬프트 하나로 백엔드까지 포함한 웹 앱을 구축.
MCPWebflow MCP란? AI가 사이트를 관리하는 시대
AI가 Webflow를 직접 조작하는 구조와 실용 예.
자사 앱App Store에 공개 중인 자사 앱 3개
명상·도검·독서. AI 개발로 스토어 공개까지.
용어집웹 제작·AI 용어집
바이브 코딩·MCP·LLMO 등 41개 용어를 한 문장으로.
같은 방식으로 귀사의 사이트를 만들 수 있습니다.
이 사이트와 같은 AI 제작 플로우를 그대로 제공하는 것이AI 웹사이트 제작(¥1,000,000~ · 세금 별도)입니다. “AI로 어디까지 가능한가”는 이 사이트 자체가 답입니다. 브랜드를 제로부터 만들고 싶다면풀스크래치 웹사이트 구축을 참고해 주세요.