- 풀스크래치 웹사이트란?
- 풀스크래치 웹사이트란 템플릿을 쓰지 않고 Figma로 제로에서 설계해, 코드 일체(Astro / Next.js, 또는 Webflow)로 납품하는 웹사이트를 말합니다. Webharu에서는 SEO·폼과 메일 기반·CMS·계측·감시까지 하나로 만들고, AI(Claude Code)로 구축해 ¥1,000,000〜(세금 별도)·약 1.5〜2개월에 납품하고 있습니다.
안녕하세요, Webharu의 마사토입니다.
풀스크래치 웹사이트란 템플릿을 쓰지 않고 Figma로 제로에서 설계해, 코드 일체(Astro / Next.js, 또는 Webflow)로 납품하는 웹사이트를 말합니다.겉모습뿐 아니라 검색에서 발견된다·문의가 도착한다·직접 업데이트할 수 있다·숫자가 보인다·망가지지 않는다·더할 수 있다, 까지 하나로 만듭니다. Webharu는 이것을 AI(Claude Code)로 구축하고 있습니다.
이 글에서는 “풀스크래치 웹사이트로 무엇을 실현할 수 있는가”만 씁니다. 어떻게 만드는지의 공정은 글에 쓰면 따라 하게 되므로, 기업의 AI 도입 매뉴얼(일본어)과 뉴스레터(비공개)로 내고 있습니다. 회원·예약·결제까지 움직이는 풀스택 웹사이트는 다른 글로 나누고, 두 가지의 차이도 정리했습니다.
풀스크래치 웹사이트란? “만들고 끝”이 아니라 “키울 수 있는 상태”로 건네는 사이트
홈페이지 견적에 나오는 것은 대개 “디자인”과 “페이지 수”입니다. 하지만 공개한 뒤에 효과를 내는 것은 뒤쪽입니다. 폼의 전송처, 메일이 스팸함에 들어가지 않는 설정, 업데이트 구조, 접속과 문의의 계측, 망가지지 않았는지의 감시. 템플릿을 쓰지 않고 제로에서 설계해, 여기까지 하나로 만든 것을 저는 풀스크래치 웹사이트라고 부릅니다.
겉모습의 디자인은 7가지 중 하나에 지나지 않습니다. 뒤집어 말하면, 디자인만 예쁜 사이트는 나머지 6가지가 빠져 있는 경우가 많습니다. 다음 섹션에서 하나씩 “무엇이 일어나는가”를 씁니다.
풀스크래치 웹사이트로 실현할 수 있는 7가지
1. 브랜드를 만들어 넣을 수 있다
템플릿을 쓰지 않습니다. Figma로 제로에서 설계하고, BEM 구조로 무너지지 않는 구현으로 만들어, 스타일 가이드를 붙여 납품합니다. “템플릿 = 양산형”으로 보이는 사이트에서 벗어나고 싶은 회사를 위한 만드는 방식입니다.
2. 검색에서 발견된다
SEO·AI 검색(AIO) 대응·구조화 데이터를 공개 시점에 넣습니다. 나중에 더하는 것이 아닙니다. 실례로, 미야기의 도장 전문점 New Paint 님은 Webflow에서 자사 기반으로 전면 리뉴얼해, 공개 8일 만에 “시오가마 외벽 도장” 검색 1위를 차지했습니다.
3. 문의가 사라지지 않는다
폼의 전송은 자사의 메일 기반으로 중계하고, 발신 도메인의 인증(SPF·DKIM·DMARC)까지 설정합니다. “문의가 와 있었는데 스팸함에 들어가 있었다”를 처음부터 없애 두기 위해서입니다.
4. 직접 업데이트할 수 있다
CMS와, AI에 지시해 업데이트하기 위한 AI 업데이트 지침서를 붙여 납품합니다. 공지도 블로그도 사내에서 돌릴 수 있습니다. 글은 AI와 함께 쓸 수 있으므로, 한 달에 몇 편이라면 외주하지 않아도 됩니다.
5. 숫자가 보인다
GA4와 CV(문의·전화)의 계측을 넣고, ChatGPT나 Perplexity 등 AI를 경유한 유입까지 나눠서 볼 수 있게 합니다. 운영을 맡겨 주시는 경우에는 월간 리포트로 “접속·검색 쿼리·CV·AI 경유 유입”을 내고, 고치는 데까지 포함해 돌립니다.
6. 망가지지 않는다·멈추지 않는다
공개 후에는 자동 감시가 매일 돌면서, 리디렉션 누락이나 계측의 정지를 감지합니다. 품질은 제3자의 채점으로 확인합니다. 자사 사이트의 실측은 SSL Labs A+·Mozilla Observatory A+·Lighthouse(접근성·모범 사례·SEO) 100입니다(2026년 7월 시점).
7. 더할 수 있다
다국어·캠페인 LP·시즌 페이지를 추가 비용 거의 없이 더할 수 있습니다. 자사 사이트의 한국어판은 Webflow 시절에 월 $9로 운영하던 것을 추가 비용 0엔으로 다시 만들었습니다. New Paint 님의 오봉 캠페인 LP는 기획부터 공개까지 하루입니다. 그리고 회원·예약·결제 같은 “움직이는 구조”가 필요해지면, 같은 코드 위에서 풀스택 웹사이트로 넓힐 수 있습니다.
Webflow를 검토 중인 분께 | 풀스크래치 웹사이트(AI 바이브 코딩)와의 차이
저는 Webflow 전문으로 6년을 해 왔기에 Webflow의 좋은 점은 알고 있습니다. 보이는 그대로 편집할 수 있고, 방치해도 무너지지 않습니다. 그 위에서 2026년부터는 AI로 코드를 쓰는 바이브 코딩이라는 만드는 방식이 실용이 되어, Webflow를 검토하고 있는 분께 대안으로 제안할 수 있게 되었습니다. 풀스크래치의 납품처는 코드든 Webflow든 고를 수 있고, 어느 쪽이든 가격은 달라지지 않습니다.
보이는 그대로 편집하는 것을 놓고 싶지 않다면 Webflow. 운영비를 낮추고 다국어나 LP를 더하면서 키우고 싶다면 코드 납품의 풀스크래치. 어느 쪽이 위라는 이야기가 아닙니다. Webflow 자체의 해설은 Webflow란?, 바이브 코딩의 의미와 한계는 바이브 코딩이란?에 썼습니다.
공정의 상세는 글에 쓰지 않습니다(비공개로 냅니다)
“어떻게 만들고 있는가”는 이 글에 쓰지 않습니다. 상세를 공개하면 따라 하게 되어, 고객께 드리고 있는 가치가 옅어지기 때문입니다. 전 공정은, AI의 기초부터 기업 규격의 구축·보안·계측·글 운영까지 정리한 “기업의 AI 도입 매뉴얼(일본어)”(2026년 9월 10일 정식 릴리스 예정)에 넣었습니다. 선행 안내는 뉴스레터 독자 한정입니다.
비용에 대하여 | “AI라서 싸다”고는 말하지 않습니다
AI로 만들고 있으니 싸게 할 수 있습니다, 라고는 말하지 않습니다. 위의 7가지를 봐 주시면 아시겠지만, 납품하고 있는 것은 디자인이 아니라 키울 수 있는 상태의 사이트와 그 뒤쪽입니다. Webharu의 풀스크래치 웹사이트 구축은 ¥1,000,000〜(세금 별도)·약 1.5〜2개월이 기준입니다(2026년 시점·하한 표시). 확정 금액은 요건을 듣고 나서 알려 드리고, 착수 후에 금액을 바꾸는 일은 없습니다.
요금의 전체상은 요금 페이지, 실제로 무엇을 납품하고 있는지는 AI 홈페이지 제작에서 실제로 납품하고 있는 것, 제작의 흐름은 클로드 코드에 의한 사이트 제작의 전 순서에 썼습니다. 우선 무료 상담부터 해 보세요.
자주 묻는 질문
풀스크래치 웹사이트란 무엇입니까?
템플릿을 쓰지 않고 Figma로 제로에서 설계해, 코드 일체(Astro나 Next.js, 또는 Webflow)로 납품하는 웹사이트를 말합니다. Webharu에서는 SEO·폼과 메일 기반·CMS·계측·감시까지 하나로 만들고, AI(Claude Code)로 구축하고 있습니다.
풀스크래치와 풀스택은 무엇이 다릅니까?
풀스크래치는 “보여 주는 사이트”를 제로에서 설계해 만드는 것, 풀스택은 거기에 회원 가입·예약·결제·데이터베이스·관리 화면 같은 “움직이는 구조”까지 하나로 갖춘 것입니다. Webharu에서는 풀스크래치가 ¥1,000,000〜, 풀스택(웹 애플리케이션 개발)이 ¥2,500,000〜입니다(모두 세금 별도·2026년 시점).
AI로 만들면 싸집니까?
“AI라서 싸다”고는 말하지 않습니다. 납품하고 있는 것은 디자인이 아니라, 검색에서 발견되고·문의가 도착하고·직접 업데이트할 수 있고·숫자가 보이는 상태의 사이트와 그 뒤쪽입니다. 풀스크래치는 ¥1,000,000〜(세금 별도)이 기준이며, 확정 금액은 요건을 듣고 나서 알려 드리고 착수 후에 금액을 바꾸는 일은 없습니다.
Webflow와 풀스크래치 중 어느 쪽이 좋습니까?
보이는 그대로 편집하는 것을 놓고 싶지 않다면 Webflow, 공개 후의 운영비를 낮추고 다국어나 LP를 더하면서 키우고 싶다면 코드 납품의 풀스크래치입니다. 풀스크래치의 납품처는 Webflow도 고를 수 있습니다. 어느 쪽이 맞는지는 무료로 진단하고 있습니다.
만드는 방법의 상세는 어디에서 읽을 수 있습니까?
글에는 쓰지 않았습니다. AI의 기초부터 기업 규격의 구축·보안·계측·글 운영까지 전 공정을 정리한 “기업의 AI 도입 매뉴얼”(2026년 9월 10일 정식 릴리스 예정)에 넣었습니다. 선행 안내는 뉴스레터 독자 한정입니다.
