- Claude Code란?
- Claude Code란 Anthropic사의 AI “Claude”와 터미널 위에서 대화하면서 코드의 생성·편집·실행까지 진행할 수 있는 개발 툴입니다.
안녕하세요. Webflow 전문가로 활동하면서 AI의 최전선을 좇고 있는 마사토입니다.
2026년 7월, Webharu의 자사 사이트를 Claude Code로 전면 리뉴얼했습니다. 26페이지의 신규 구축·글 62편의 이전·폼 4종의 연동을 구축 3일(기획 포함 7일)에 완료했습니다. 이 글에서는 Claude Code를 사용한 홈페이지 제작의 실록을, 앞으로 직접 해 보고 싶은 기술 지향의 독자를 위해 “순서”로 재구성합니다.
✓ 이 글의 내용
- Claude Code로 기업 사이트를 만드는 5단계(기획 → 설계 → 구축 → 검증 → 공개)
- 26페이지를 3일에 구축한 실제 타임라인과 사용한 툴
- 공개 후의 운영(AIO 일괄 구현·계산 툴 개발)도 AI로 한 실례
먼저 결론부터 적겠습니다. Claude Code만으로 26페이지의 기업 사이트는 만들 수 있습니다. 다만 제 경우에는 디자인을 잘 생성할 수 있게 되기까지 약 1개월이 걸렸고, 쓰레기를 대량으로 만들었습니다. 순서 그 자체보다 “어디를 사람이 판단하는가”가 품질을 결정합니다.
전제 | 사용한 툴과 비용
- Claude Code(Opus와 Fable): 월 약 30,000엔의 AI 이용료
- Astro: 정적 사이트 제너레이터. Cloudflare와의 호환성과 표시 속도로 선택했습니다
- Cloudflare: 호스팅. 서버 비용은 무료이고, 운영비는 도메인 비용인 연 1,500엔뿐입니다
사람은 저 한 명입니다. 다만 디자인·구축·SEO의 기초 지식은 원래 갖고 있었다는 전제입니다. 예전 사이트는 Webflow였고 구독 비용은 연 10만 엔 가까이 들었습니다. 전환 후에는 도메인 비용만 남았습니다.
단계 1 | 기획(Day 1)
가장 먼저 하는 것은 코드가 아니라 정리입니다. 유입 경로는 어디인가, 타깃은 누구인가, 지금까지 어떤 고객이 많았는가. 손에 있는 숫자를 늘어놓고, 리뉴얼로 달성할 목표를 언어화했습니다.
제 경우 처음에는 대기업 프로젝트 쪽으로 맞출 생각이었습니다. 그러나 실제 고객의 약 90%가 스타트업이나 중소기업이었기에 타깃을 그쪽으로 다시 설정했습니다. 이 판단은 AI에게는 불가능합니다. 여기가 애매한 채로 구축에 들어가면 후속 단계의 텍스트 점검에서 전부 다시 하게 됩니다.
단계 2 | 설계(Day 2~4)
데이터 이전과 디자인 정의
예전 사이트(Webflow)에서 글 62편과 실적 24건을 스크래핑으로 추출해 로컬로 내려받았습니다. 동시에 색·버튼 배치·표현하고 싶은 방향성 같은 디자인의 근간을 텍스트로 정의합니다. 이 정의문이 이후 계속 프롬프트의 토대가 됩니다.
메인 페이지를 50패턴 왕복한다
새 디자인은 HTML 기반으로 작성했습니다. 메인 페이지에 무게를 두고 “3패턴을 낸다 → 마음에 들지 않는 부분과 그 이유를 전한다 → 다시 3패턴”을 반복해 합계 50패턴 정도를 만들었습니다. 여기가 AI와의 왕복이 가장 많은 단계입니다. 감상이 아니라 이유를 전하는 것이 요령이며, “뭔가 다르다”로는 같은 것이 돌아옵니다.
사이트맵은 일부러 나중에
메인 페이지가 정해진 다음에 사이트맵을 작성했습니다. 일반적으로는 사이트맵이 먼저이지만, 처음에 굳히면 AI에 이상한 제약이 붙는다고 판단해 뒤로 미뤘습니다. 메인에서 디자인이 확정되어 있으면, 그것을 참조하게 하는 것만으로 하위 페이지는 단숨에 양산할 수 있습니다.
단계 3 | 구축(Day 5)
HTML로 확정한 디자인을 Astro로 이식합니다. Next.js가 아니라 Astro를 고른 이유는, Cloudflare와의 호환성과 로딩 속도에서 제가 시험한 범위로는 SEO 매체로서 가장 성능이 잘 나오는 조합이었기 때문입니다.
아울러 전 페이지의 SEO 최적화와 AI 최적화를 실시했습니다. 구조화 데이터·sitemap·llms.txt의 정비까지 Claude Code에게 시켰습니다. 글 쪽은 상세 페이지의 디자인을 HTML로 한 페이지만 먼저 만들고, 그것을 템플릿으로 삼아 62편을 흘려 넣었습니다.
단계 4 | 검증(Day 6~7)
Google 태그·Cloudflare·4종의 폼 연동을 진행해 실제 공개 직전까지 가져갑니다. 여기서 가장 중요한 것이 텍스트 점검입니다. AI가 만든 페이지에는 제가 상정하지 않은 문구와 수치가 대량으로 들어 있었습니다. 기획과 대조해 단숨에 고칩니다.
마지막에는 전 페이지를 사람의 눈으로 확인했습니다. 기업 정보의 오류는 신뢰와 직결되므로 여기는 AI에게 맡기지 않습니다. 손을 움직이는 것이 AI, 판단하는 것이 사람. 이 분담이 품질을 결정한다고 생각합니다.
단계 5 | 공개와 결과
공개는 Cloudflare로의 배포와 예전 URL로부터의 이전 처리입니다. 결과적으로 리뉴얼 다음 날 시점에 예전 글 30편 중 24편의 인덱스이 유지되고 있었습니다(Search Console 실측). 이전 설계를 제대로 하면 리뉴얼로 SEO가 날아가는 일은 없었습니다.
Day별 자세한 기록과 사람 쪽이 무엇을 생각하고 있었는지는 리뉴얼 전 공정의 글에 적어 두었습니다.
공개 후의 운영도 Claude Code로 할 수 있다 | 실제로 한 2가지
글 63개에 대한 AIO 일괄 구현
공개 후인 2026년 7월, 블로그 글 63개에 요점 박스·FAQ(FAQPage 구조화 데이터)·한 문장 정의·Speakable을 일괄 구현했습니다. 자사 채점은 평균 47.8점에서 97.3점이 되었습니다. 겸사겸사 오탈자 교정 450건 이상과, 키워드가 겹치던 글의 301 통합을 3조 진행했습니다. 수작업으로는 현실적으로 할 수 없었던 규모이지만, 글을 JSON으로 구조화해 템플릿으로 생성하는 구조로 만들어 두었기에 돌릴 수 있었습니다.
계산 툴의 구현
인보이스 경과 조치의 계산 툴도 Claude Code로 구현했습니다. “블로그에 툴을 하나 더한다” 같은 개발이 외주 없이 완결되는 것은 AI 구축으로 전환한 큰 이점입니다. 이 부근의 실측의 후속은 뉴스레터(메일은 일본어)에서 먼저 공개하고 있습니다.
솔직한 이야기 | 느렸던 것·하지 못했던 것
- 세세한 미세 조정은 노코드보다 느립니다. “섹션 사이의 여백을 조금 넓히고 싶다”가 전체 조정으로 번지기 쉬워, Webflow에서 힘으로 밀어붙이던 시절이 더 빠른 장면도 있었습니다
- 디자인이 안정적으로 나오기까지 약 1개월이 걸렸습니다. 프롬프트의 단어 선택이 어려워, 도중까지 만든 사이트를 버리고 0에서 다시 만드는 판단도 몇 번 했습니다
- AI에 100% 맡겨 공개하면 어느 사이트나 같은 얼굴이 됩니다. 브랜드 가치를 떨어뜨리므로 심미적 판단은 사람이 가져야 합니다
그래도 모르는 언어나 기술의 벽은 거의 사라졌습니다. 이 진행 방식은 AI 웹사이트 제작으로 상품화하고 있습니다(상담 포함 약 1개월·¥1,000,000부터). 우선 이 글의 순서로 자사 사이트를 만져 보시고, 어려워 보이면 그때 상담해 주셔도 괜찮습니다.
자주 묻는 질문
Claude Code만으로 기업 사이트를 만들 수 있습니까?
구현 자체는 가능합니다. 필자는 26페이지의 자사 사이트를 구축 3일에 만들었습니다. 다만 기획·디자인의 심미적 판단·사실 확인은 사람의 일이며, 그곳을 포기하면 어디선가 본 듯한 AI 느낌의 사이트가 됩니다.
비용은 어느 정도 듭니까?
필자의 경우 AI 이용료가 월 약 30,000엔 정도입니다. 호스팅은 Cloudflare로 서버 비용이 무료이며, 운영비는 도메인 비용인 연 1,500엔만 남았습니다. Webflow 시절에는 연 10만 엔 가까이 들었습니다.
프레임워크는 왜 Astro를 골랐습니까?
Cloudflare와의 호환성과 로딩 속도에서 SEO 매체로서 가장 높은 성능을 낼 수 있다고 확인했기 때문입니다. Next.js도 후보였지만 채용하지 않았습니다.
리뉴얼로 SEO는 떨어지지 않았습니까?
리뉴얼 다음 날 시점에 예전 글 30편 중 24편의 인덱스가 유지되고 있었습니다(Search Console 실측). 예전 URL로부터의 이전 처리를 포함한 설계를 먼저 진행하는 것이 전제입니다.
