안녕하세요, Webflow 전문가에서 AI 최전선을 늘 쫓고 있는 마사토입니다.
Webharu의 사이트를 리뉴얼했습니다. 사이트 전부를 AI로 리뉴얼입니다. 구축만이라면 3일, 기획 포함 7일. 이번에는 그 제작 과정을 실제 로그와 함께 전부 공개합니다.
무엇을 했는가
- 26페이지의 정적 페이지 신규 구축(톱의 벚꽃 애니메이션 포함)
- 구 사이트(Webflow)에서 글 62개·실적 24건 이전
- 문의·자료 청구 등 4개 폼 연결
- GA4·Search Console·구조화 데이터·sitemap·llms.txt 정비
인간은 저 혼자. 손을 움직인 것은 AI(Claude Code)입니다.
저는 지금까지의 경험으로 타깃을 좁히고, 거기에 맞춘 사이트로 리뉴얼했습니다.
대략 1주일에 완성했습니다. 그중 대부분은 기획 부분입니다.
7일간의 내역｜AI 리뉴얼 공정
Day 1｜기획과 목표 설정
기획 전략부터. 유입 경로는 어디인지, 타깃은 누구인지, 지금까지 어떤 고객이 많았는지 정보를 정리해 리뉴얼로 달성할 골을 설정했습니다.
Day 2｜이전과 디자인 방향성 정의
구 사이트의 글과 실적을 스크래핑으로 추출해 이전. 공개 중인 정보와 타깃이 맞는지 확인하고 각 소재를 로컬로 내려받았습니다. 이때 디자인의 근간이 되는 부분을 함께 정의하고, 색감과 버튼 배치, 표현하고 싶은 방향성을 명확히 정의했습니다.
Day 3｜디자인을 50패턴 만든다
새 디자인을 HTML 기반으로 작성. 디자인은 아마 50패턴 정도 만들었습니다. 톱 페이지에 무게를 두고, 마음에 들지 않는 곳의 어디가 마음에 들지 않는지 AI에게 전하면서 3패턴 작성을 반복해 진행했습니다.
Day 4｜사이트맵과 하위 페이지
톱 페이지 완성 후 명확하게 사이트맵을 작성. 처음에 사이트맵을 만들지 않은 것은 AI에 이상한 제약을 걸고 싶지 않았기 때문입니다. 일반적으로 사이트맵은 처음에 만드는 것이므로 이번에는 조금 이례적인 스텝이었다고 할 수 있습니다. 이 사이트맵을 바탕으로 하위 페이지를 단숨에 만들었습니다.
톱 페이지에서 디자인이 정해져 있으면 그것을 참고로 하위 페이지를 만들어 가기만 하면 되므로 디자인 작업은 대폭 단축됩니다.
Day 5｜SEO 최적화와 Astro 구축
전 페이지의 SEO 최적화, AI 최적화를 하고 CMS의 글 페이지와 실적 페이지를 이전, 상세 페이지는 먼저 HTML로 1페이지만 디자인을 만들었습니다. 그 후 Astro 구축으로 이전. Next.js가 아니라 Astro를 고른 이유는 Cloudflare와의 호환성, 로딩 속도 등에서 SEO 매체로서 최고의 퍼포먼스를 낼 수 있다고 확인했기 때문입니다.
Day 6｜연동과 텍스트 정밀 검토
Google 태그와 폼, Cloudflare 등의 연동을 해 프로덕션 배포 직전까지 가져갔습니다. 여기서부터 사이트 전체의 텍스트 정밀 검토와 기획과의 대조, GA4 등에서 도출한 숫자로 사이트 방향성을 재정의. AI로 만든 페이지에는 제가 상정하지 않은 문구와 수치가 많이 들어 있어 그것들을 한꺼번에 정밀 검토했습니다.
Day 7｜전 페이지 육안 체크→공개
전 페이지를 육안으로 체크합니다. 실제로 사이트를 방문하는 것은 기업의 대표 같은 분들이므로 기업 정보를 잘못 실을 수는 없습니다. 전편 체크 후 공개했습니다.
이상의 흐름으로 AI 사이트를 만들어 갔습니다만, 솔직히 말하면 디자인을 잘 생성할 수 있게 되기까지 약 1개월간 AI로 쓰레기를 대량 생산했습니다. 프롬프트와 표현 조정이 매우 어려웠고, 도중까지 만든 사이트를 버리고 0부터 다시 만드는 판단, 백엔드가 필요한 항목이 생겼을 때 잘 생성되지 않는 일 등도 있었습니다. 서버비까지 전부 무료로 운영하는 방법에 도달하기까지 그만큼의 시간이 걸렸습니다.
그래도 AI는 나날이 진화하고 있습니다. 무료는 아니지만 월 약 30,000엔 정도의 AI에 과금하면 약 1개월의 노력으로 깔끔한 사이트를 만들 수 있는 수준까지 성장할 수 있다고 생각합니다. 물론 저는 원래 디자인·구축·SEO 지식이 모두 있었기 때문에 그 기초 학습은 필요 없었습니다. 이번에는 Claude Code의 Opus와 Fable을 사용했는데, AI가 사이트를 만든다는 것에 있어서는 이미 정점 수준에 도달했다고 생각합니다. 만들고 싶은 것을 명확히 지시하면 거의 무엇이든 만들 수 있습니다. 다만 어떤 정보를 싣고 어떤 디자인이 신뢰를 주는가에 대해서는 아직 인간이 생각해야 하는 영역입니다.
나(인간)는 무엇을 하고 있었나
반복하지만 생각하고 실행하는 것은 전부 인간이 담당합니다. AI는 시킨 것을 할 수 있을 뿐입니다.
- 콘셉트와 구성의 결정(무엇을 전하는 사이트인가)
- 디자인의 심미 판단
- 문장의 사실 확인과 영업 판단(가격·보여주기)
- 각 공정의 리뷰와 GO 사인
즉, 손을 움직이는 것이 AI, 판단하는 것이 사람. 이 분담이 품질을 정합니다.
처음에는 대기업 프로젝트용으로 커스텀하려 했습니다. 그러나 PV 수와 고객 유입 경로에서 타깃은 역시 스타트업과 중소기업이 좋다고 판단했습니다. 사업 자체는 2020년부터 하고 있고 JTB나 니혼TV 프로젝트를 받은 적도 있지만, 이는 재현성이 낮다고 판단했습니다. 전체의 10% 정도밖에 되지 않고, 나머지 90%는 스타트업이나 이제 사업을 시작하는 분, 리뉴얼하고 싶은 분이 많았기 때문입니다.
해 보고 알게 된 것
먼저 결론 3가지.
- 세세한 미세 조정은 노코드로 힘으로 밀어붙이던 때보다 느리다
- 모르는 언어·기술의 벽은 거의 사라졌다(App Store 앱도 냈다)
- AI에 100% 맡겨 공개하면 모든 사이트가 같은 얼굴이 되어 브랜드 가치를 떨어뜨린다
솔직히 시간이 단축됐는지는 아직 잘 모르겠습니다. 예를 들어 섹션 사이 여백을 조금 넓히고 싶을 때, 지금까지는 그곳을 클릭해 마진을 넓히면 끝이었습니다. 그러나 AI에게 그곳만 넓혀 달라고 해도 잘 안 되고, 디자인이 예뻐 보이지 않게 됩니다. 즉 작은 조정=전체 조정으로 발전해 가는 것입니다.
한편, 모르는 코드도 전부 다룰 수 있게 된 기분입니다. 예를 들어 지금 저는 App Store에 앱을 여러 개 출시했습니다. 앱 등록에는 Swift라는 언어를 써야 했지만, 기획과 전략, 디자인을 생각할 수 있으면 어떤 코드를 쓰든 무엇이든 만들 수 있게 되었습니다.
자주 묻는 질문
Q. AI만으로 웹사이트를 만들 수 있나?
구현만이라면 만들 수 있습니다. 다만 기획·디자인의 심미 판단·사실 확인은 인간의 일입니다. 그것을 포기하면 “AI스러운, 어디서 본 사이트”가 됩니다.
Q. 기간은 어느 정도?
이 사이트는 구축 3일＋기획 4일의 총 7일이었습니다. 고객 프로젝트에서는 요구사항 청취 포함 약 1개월을 봐 주세요.
Q. 비용은?
AI 사이트 제작은 ¥500,000〜(체험단 선착순 5개사는 ¥350,000), 공개 후 운영 플랜은 월 ¥15,000〜입니다.
Q. 무슨 AI를 썼나?
Claude Code(Opus와 Fable)입니다. 사용법 해설은 AI 바이브 코딩 글에 있습니다.
이 진행 방식은 상품으로 만들었습니다
AI 사이트 제작이란 기획·판단·품질 체크를 인간이 하고, 코딩과 페이지 생성을 AI가 담당하는 웹사이트 제작 기법입니다. 이 사이트와 같은 방식으로 만드는 AI 사이트 제작(일본어)을 제공하고 있습니다.
- AI 사이트 제작: ¥500,000〜
- 공개 후 운영 플랜: 월 ¥15,000〜(매달 최신 AI·SEO 정보를 쫓아 적용합니다)
관심이 있다면 문의해 주세요.
제작 과정의 자세한 기록은 AI 제작 전 기록(일본어)에 있습니다.
