안녕하세요, Webflow 전문가에서 AI 최전선을 늘 쫓고 있는 마사토입니다.
Webharu의 사이트를 리뉴얼했습니다. 사이트 전부를 AI로 리뉴얼했습니다. 구축만이라면 3일, 기획을 포함하면 7일. 이번에는 그 제작 과정을 실제 로그와 함께 전부 공개합니다.
무엇을 했는가
- 26페이지의 정적 페이지를 신규 구축(톱 페이지의 벚꽃 애니메이션 포함)
- 구 사이트(Webflow)에서 글 62개·실적 24건을 이전
- 문의·자료 청구 등 4개 폼의 연결
- GA4·Search Console·구조화 데이터·sitemap·llms.txt 정비
인간은 저 혼자. 손을 움직인 것은 AI(Claude Code)입니다.
저는 지금까지의 경험으로 타깃을 좁히고, 거기에 맞춘 사이트로 리뉴얼했습니다.
대략 1주일 만에 완성했습니다. 그중 대부분은 기획 부분입니다.
이 공정을 범용 절차서로 일반화한 글도 썼습니다: Claude Code로 하는 사이트 제작의 전체 순서 | 26페이지를 3일에 구축
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 | 전 페이지 육안 체크→공개
전 페이지를 육안으로 체크합니다. 실제로 사이트를 방문하는 것은 일본 회사에서 일하는 분이나 사이트 제작을 의뢰하고 싶은 기업의 대표 같은 분들이므로, 기업 정보를 잘못 실을 수는 없습니다. 그래서 전편을 확인하며 틀린 곳이 없는지를 체크했습니다. 체크 후 공개했습니다.
이상이 7일간의 흐름입니다.
다만 솔직히 말하겠습니다. 디자인을 잘 생성할 수 있게 되기까지 약 1개월, AI로 쓰레기를 대량으로 만들어 버렸습니다.
프롬프트와 말 표현의 조정이 대단히 어렵습니다. 도중까지 만든 사이트를 한번 버리고 0부터 다시 만드는 판단도 있었습니다. 백엔드가 필요한 항목이 나왔을 때는 좀처럼 잘 생성되지 않습니다. 서버비까지 전부 무료로 운영하는 방법에 다다르기까지 그만큼의 시간이 걸렸습니다.
그렇다고는 해도 AI는 나날이 진화하고 있습니다. 이번에는 Claude Code의 Opus와 Fable을 사용했는데, AI가 사이트를 만든다는 점에 있어서는 이미 정점 수준에 도달한 것이 아닐까 생각합니다. 만들고 싶은 것을 명확히 지시하면 거의 무엇이든 만들 수 있습니다.
다만 어떤 정보를 싣고 어떤 디자인이 신뢰를 주는가. 여기는 아직 인간이 생각하는 영역입니다.
애초에 사이트 제작 자체는 노코드 툴 시대부터 초보자도 할 수 있는 간단한 일이었습니다. 그러나 어떤 디자인을 만들고, 어떻게 보여 주고, 어느 타깃에게 전할 것인가. 여기에는 아직 전문직의 일이 남아 있다고 느낍니다.
그 한편으로, 무료는 아니지만 월 약 30,000엔 정도의 AI에 과금하면 약 1개월의 노력으로 깔끔한 사이트를 만들 수 있을 정도까지 성장할 수 있다고 생각합니다. 물론 제 경우에는 원래 디자인 지식도 구축 지식도 SEO 지식도 전부 있었기 때문에, 그 기초 학습은 필요하지 않았습니다.
그러한 기초 학습을 하고 앞으로 오래도록 스스로 사이트를 운영해 가는 것은, 앞으로 비용을 억제하며 홍보 활동을 하고 싶은 회사에는 안성맞춤인 방법이 될 것입니다. 그러나 그 한편으로, 늘 유행을 계속 좇고 최첨단 기술을 계속 도입하는 것은 사람에 따라서는 힘든 일일 것입니다.
그 점에서 저는 유행을 늘 좇는 것을 취미처럼 하고 있습니다. 그리고 당사가 운영하는 사이트는 늘 최신 정보가 나오면 그것을 적용하는 사이트로 만들고 있습니다.
위와 같이 사이트 제작에는 요구사항 청취를 포함해 약 1개월의 시간이 필요합니다. 실제 작업 시간은 7일 정도일지도 모르지만, 그것은 전제가 전부 굳어진 상태를 의미합니다.
저(인간)는 무엇을 하고 있었는가
반복이 되지만, 생각하고 실행하는 일은 전부 인간이 담당합니다. AI는 시킨 것을 하는 일밖에 할 수 없습니다.
- 콘셉트와 구성의 결정(무엇을 전하는 사이트인가)
- 디자인의 심미 판단
- 문장의 사실 확인과 영업 판단(가격·보여 주는 방식)
- 각 공정의 리뷰와 GO 사인
즉, 손을 움직이는 것이 AI, 판단하는 것이 사람. 이 분담이 품질을 정합니다.
어떤 의미에서 고집이 센 사장은 스스로 사이트를 만들어야 한다고 생각합니다.
머릿속에 있는 아름다운 이미지와, 실제로 형태로 옮겼을 때 아름다운지는 전혀 다른 이야기입니다. 머릿속이 반짝이는 그대로 이것저것 다 집어넣으면, 겉보기는 예쁘지만 엉망진창인 사이트가 완성될 것입니다. 저는 그것을 정돈하는 역할입니다.
그것을 정돈해 주는 것도 AI입니다만, 인간은 참 비효율적이어서 AI의 제안을 기각하며 점점 더 어수선하게 만들어 버립니다. 저도 처음에는 그랬습니다. 그래서 방침을 정하는 것이 중요합니다.
처음에는 대기업 프로젝트용으로 커스텀하려고 생각했습니다.
그러나 PV 수와 고객의 유입 경로에서 볼 때, 타깃은 역시 스타트업이나 중소기업이 좋다고 판단했습니다.
사업 자체는 2020년부터 하고 있고, JTB나 닛폰테레비의 프로젝트를 받은 적도 있습니다. 다만 이런 일은 재현성이 낮습니다. 전체의 10% 정도밖에 되지 않고, 나머지 90%는 스타트업이나 이제 사업을 시작하려는 분, 리뉴얼하고 싶은 분이었습니다. 대기업의 여신 심사를 통과하기 위해 보험에 들 마음도 들지 않았고요.
해 보고 알게 된 것
먼저 결론 3가지.
- 세세한 미세 조정은 노코드로 힘으로 밀어붙이던 시절보다 느리다
- 모르는 언어·기술의 벽은 거의 사라졌다(App Store 앱도 낼 수 있었다)
- AI에게 100% 맡겨 공개하면 어느 사이트나 같은 얼굴이 되어 브랜드 가치를 떨어뜨린다
솔직히 말해 시간이 단축되었는가 하면, 아직 잘 모르겠습니다.
본 곳을 그대로 수정할 수 있는 것이 아니어서, 예를 들어 어바웃과 블로그 섹션 사이를 조금 넓히고 싶다고 생각했을 때, 지금까지라면 그 부분을 클릭해 마진을 넓히기만 하면 됐습니다. 그런데 AI가 되면 거기만 넓혀 달라고 해도 그다지 잘되지 않고, 디자인이 예쁘게 보이지 않게 됩니다. 즉 조금의 조정=전체 조정으로 발전해 가는 것입니다.
물론 그 덕분에 예쁜 디자인이 완성되고 좋은 일이라고 생각합니다만, 실제로는 힘으로 억지로 조정하던 때가 이것저것 더 빨리 끝나지 않았을까 하고 솔직히 생각합니다. 여백을 조금 넓히는 정도는 그저 저의 작은 고집일 뿐이고, 찾아온 손님들이 그것을 보고 이상하게 여기는 일은 거의 없을 것입니다.
그러한 쓸데없는 작업이 쌓이고, 없애려고 해도 좀처럼 없앨 수 없습니다. 그것이 AI로 구축할 때의 함정이 아닐까 생각합니다.
물론 AI가 만든 것을 수정하지 않고 그대로 공개해 가는 것도 충분히 가능합니다. 다만 그렇게 하면 AI다움이 강해져서 대체로 다들 같은 사이트가 되어 갑니다. 결국 브랜드 가치를 떨어뜨려 “노코드로 만드는 편이 낫지 않았을까” 하는 결과가 되어 버립니다.
그 한편으로, 모르는 코드라도 전부 다룰 수 있게 된 기분입니다. 예를 들어 지금 저는 App Store에 앱을 여러 개 출시하고 있습니다. App Store에 앱을 등록하려면 Swift라는 언어를 써야 했지만, 기획과 전략, 디자인을 생각할 수 있다면 어떤 코드를 쓰든 무엇이든 만들 수 있게 되었습니다.
대응하지 않는 언어나 Unity 같은 3D 계열 게임은 아직 다소 어렵다고 생각하지만, 이것도 시간문제일 것입니다.
자주 묻는 질문
Q. AI만으로 웹사이트를 만들 수 있나요?
구현만이라면 만들 수 있습니다. 다만 기획·디자인의 심미 판단·사실 확인은 인간의 일입니다. 그 부분을 포기하면 “AI 같은, 어디선가 본 사이트”가 됩니다.
Q. 기간은 어느 정도인가요?
이 사이트는 구축 3일＋기획 4일로 총 7일이었습니다. 고객 프로젝트에서는 요구사항 청취를 포함해 약 1개월을 봐 주세요.
Q. 비용은 얼마인가요?
AI 웹사이트 제작은 ¥1,000,000〜(세금 별도·최단 1〜2주), 공개 후 운영 관리 플랜은 월 ¥15,000〜입니다.
Q. 무슨 AI를 썼나요?
Claude Code(Opus와 Fable)입니다. 사용법 해설은 AI 바이브 코딩 글에 적어 두었습니다.
이 진행 방식은 상품으로 만들었습니다
AI 웹사이트 제작이란, 기획·판단·품질 체크를 인간이 하고 코딩과 페이지 생성을 AI가 담당하는 웹사이트 제작 기법입니다. 이 사이트와 같은 방식으로 만드는 AI 웹사이트 제작을, 이 글의 공개와 동시에 모집 시작합니다.
- AI 웹사이트 제작: ¥1,000,000〜(세금 별도·최단 1〜2주)
- 공개 후 운영 관리 플랜: 월 ¥15,000〜(매달 최신 AI·SEO 정보를 쫓아 적용합니다)
제작 과정의 자세한 기록은 AI 제작의 전 기록에 있습니다. 관심이 있으시다면 꼭 문의해 주세요.
자주 묻는 질문
AI만으로 웹사이트를 만들 수 있나요?
구현만이라면 만들 수 있습니다. 다만 기획·디자인의 심미 판단·사실 확인은 인간의 일입니다. 그 부분을 포기하면 “AI 같은, 어디선가 본 사이트”가 됩니다.
AI 웹사이트 제작의 기간은 어느 정도인가요?
이 사이트는 구축 3일＋기획 4일로 총 7일에 완성했습니다. 고객 프로젝트에서는 요구사항 청취를 포함해 약 1개월이 기준입니다.
AI 웹사이트 제작의 비용은 얼마인가요?
AI 웹사이트 제작은 ¥1,000,000〜(세금 별도·최단 1〜2주), 공개 후 운영 관리 플랜은 월 ¥15,000〜입니다.
무슨 AI를 사용해 만들었나요?
Claude Code(Opus와 Fable)를 사용했습니다. 손을 움직이는 것은 AI, 콘셉트 결정·심미 판단·사실 확인·공개 GO 사인은 인간이라는 분담입니다.
