📝 한줄 요약
네이버 블로그만 운영하던 복지용구 판매업체가, Claude Code를 활용해 326개 상품이 등록된 전문 홈페이지를 외주 없이 2일 만에 직접 만들고 배포까지 완료한 이야기입니다.
바쁘시면 이것만 읽어도 돼요:
Claude Code로 복지용구 홈페이지를 처음부터 끝까지 직접 제작 — 외주 비용 수백만원 절약
326개 상품 데이터를 AI가 자동으로 수집해서 등록 — 수작업이었다면 몇 주 걸릴 작업
스크린샷만 보내면 문제를 알아서 파악하고 바로 수정해줌
참고 사이트 링크를 주면 스타일을 분석해서 비슷하게 만들어줌
모바일 최적화, 보안 설정, 배포까지 AI가 단계별로 안내
🎯 이런 분들께 도움돼요
홈페이지가 필요한데 외주 비용이 부담되는 분
AI 코딩 도구로 실제 결과물을 만들어보고 싶은 분
"코딩을 전혀 몰라도 웹사이트를 만들 수 있을까?" 궁금하신 분
😫 문제 상황 (Before)
저는 경기도 용인에서 복지용구 판매·대여 업체를 운영하고 있습니다. 어르신들이 필요로 하는 목욕의자, 보행기, 휠체어 같은 복지용구를 상담하고 배송·설치까지 해드리는 일을 하고 있어요.
그동안 네이버 블로그만 운영하고 있었는데, 블로그로는 전체 상품 326개를 한눈에 보여주기가 어려웠습니다. 고객이 "어떤 제품이 있나요?"라고 물어보면 일일이 설명하거나 도매업체 사이트 링크를 보내드려야 했어요.
홈페이지를 만들어야겠다고 생각은 했지만, 외주 제작 견적을 알아보니 최소 수백만원. 상품이 326개나 되고, 상세페이지도 다 만들어야 하니 비용이 만만치 않았습니다. 그래서 계속 미루고 있었는데, AI 코딩 도구인 Claude Code를 알게 되면서 "직접 만들어볼까?" 하는 생각이 들었습니다.
🛠️ 사용한 도구
AI 도구: Claude Code (VSCode 확장 프로그램)
모델: Claude Opus 4.6
배포: Netlify (무료)
비용: 0원 (Claude Code 구독 외 추가 비용 없음)
🔧 작업 과정
참고 사이트 링크 하나로 시작 — "이런 느낌으로 만들어줘"
처음에 뭘 어떻게 요청해야 할지 막막했습니다. 그래서 비슷한 사이트 3개 링크를 주고 "이런 느낌의 복지용구 홍보 사이트를 만들어줘"라고 했어요.
복지용구 홍보용 웹페이지를 제작해야 합니다.
유사한 웹사이트: [참고 사이트 3개 링크]
Claude Code가 참고 사이트들을 직접 분석한 뒤, 사업 정보(전화번호, 주소, 대표명 등)를 질문해왔습니다. 답변을 하니 바로 홈페이지, 제품목록, 상세페이지, 회사소개, 이용절차, 문의 페이지까지 기본 구조를 한번에 만들어줬어요.
핵심 팁: 말로 길게 설명하는 것보다 참고 사이트 링크를 주는 게 훨씬 효과적이었습니다. AI가 사이트를 직접 분석해서 레이아웃과 스타일을 파악하고, 그 느낌에 맞게 만들어줍니다.
326개 상품을 AI가 알아서 수집 — "여기서 데이터 긁어와줘"
가장 놀라웠던 순간입니다. 도매업체 사이트 주소를 알려주고 "여기서 상품 정보를 수집해줘"라고 했더니, AI가 8개 작업을 동시에 돌리면서 전 카테고리의 상품을 자동으로 수집했습니다.
도매업체 사이트에서 상품 정보를 수집해줘. 이미지와 상세페이지 사용 허락 받음.
도매가/납품가는 절대 노출하면 안됨.
결과:
목욕의자 13개, 이동변기 15개, 안전손잡이 73개, 미끄럼방지양말 52개... 총 311개 구입 품목 자동 수집
상품 이미지 311장 다운로드
상세 설명 이미지 약 1,000장 이상 다운로드
여기에 대여 품목(전동침대, 수동휠체어) 15개를 추가해서 최종 326개
이걸 사람이 수작업으로 했다면 상품 하나당 이름, 가격, 스펙, 이미지 복사... 최소 몇 주는 걸렸을 겁니다. AI는 이걸 몇 시간 만에 끝냈어요.
스크린샷만 보내면 알아서 고쳐줌 — "이거 좀 이상한데?"
모바일로 사이트를 확인하다 보면 글자가 잘리거나, 레이아웃이 어긋나는 부분이 보였습니다. 이런 걸 말로 설명하려면 "products.html의 카테고리 탭 부분에서 768px 이하에서 overflow가..." 이렇게 해야 하잖아요. 저는 그런 용어를 모릅니다.
그냥 해당 화면을 캡처해서 보내고 "이거 고쳐줘"라고 했습니다.
그랬더니 AI가 스크린샷에서 문제가 뭔지를 스스로 파악하고, 어떤 파일의 어느 부분을 수정해야 하는지 알아서 찾아서 바로 고쳐줬어요. 코드를 전혀 몰라도 "화면이 이상하다"는 것만 보여주면 되니까, 비개발자 입장에서 이게 가장 편했습니다.
모바일 최적화도 한번에 — "폰에서 보니까 여기저기 수정 필요해"
PC에서 잘 보이던 사이트가 모바일에서는 글자가 너무 작거나, 상품이 한 줄에 하나씩만 나오거나, 탭이 길어서 스크롤이 많이 필요했습니다.
모바일에서 확인해봤는데 여기저기 수정이 필요해
AI가 한번에 처리한 것들:
상품 목록을 모바일에서 2열로 변경
카테고리 탭을 드롭다운 방식으로 변경
폰트 크기 조정
가격 표시 줄넘김 방지
배송 사진 갤러리 2열 배치
그 외 10가지 이상의 세부 조정
하나하나 "이것도 고쳐줘, 저것도 고쳐줘" 할 필요 없이, 전체적으로 모바일 환경에 맞게 한번에 최적화해줬습니다.
배포까지 직접 — "이제 세상에 공개하자"
사이트가 완성된 후, 배포를 어떻게 하는지 몰랐습니다. Claude Code에게 물어보니 Netlify라는 무료 호스팅 서비스를 추천해주고, 가입부터 배포까지 단계별로 안내해줬어요.
이제 사이트 배포해야해. 처음에는 무료로 쓰다가 나중에 유료로 변경 예정이야
결과:
Netlify 가입 → 프로젝트 폴더 드래그앤드롭 → 48초 만에 배포 완료
사이트 주소:
neulbomcare.netlify.appSSL 보안 인증서 자동 적용
비용: 0원
이미지 최적화 — "로딩이 느린데?"
배포 후 사이트를 확인해보니 일부 페이지에서 이미지 로딩이 느렸습니다. 원본 사진들이 한 장당 2~7MB로 너무 무거웠거든요.
배송 설치 사진 로딩이 오래 걸려. 상세페이지 배너와 회사소개 이미지도 압축해줘.
AI가 16장의 이미지를 자동으로 리사이즈하고 압축했습니다. 총 29.3MB → 1.1MB로 96% 감소. 코드도 자동으로 업데이트해줬어요.
✅ 결과 (After)
Before vs After
항목
Before
After
홈페이지
없음 (블로그만 운영)
326개 상품이 등록된 전문 사이트
제품 안내
전화/카카오톡으로 일일이 설명
링크 하나로 전체 제품 확인 가능
제작 비용
외주 시 수백만원 예상
0원 (AI 구독 외 추가 비용 없음)
소요 시간
외주 시 2~4주
2일
상품 등록
수작업 시 수주 소요
AI가 자동 수집 (몇 시간)
결과물
사이트 주소: neulbomcare.netlify.app
등록 상품: 326개 (구입 311 + 대여 15)
페이지: 홈, 제품목록, 상세페이지, 회사소개, 이용절차, 문의
기능: 상품 검색, 카테고리 필터, 본인부담금 자동 계산, 카카오톡/전화 상담 연결
💬 이 과정에서 배운 AI 활용 팁
효과적이었던 것
참고 사이트 링크 주기 — "이런 느낌으로 만들어줘"가 긴 설명보다 효과적
스크린샷으로 소통하기 — 기술 용어 몰라도 화면 캡처 하나면 AI가 문제를 파악
단계별로 요청하기 — 한번에 다 하려 하지 않고, 기본 구조 → 데이터 → 디자인 → 배포 순서로 진행
제약사항 먼저 말하기 — "도매가는 절대 노출하면 안 돼" 같은 핵심 제약을 먼저 전달
🌍 다른 업무에 적용한다면?
소상공인 홈페이지: 카페, 식당, 학원 등 자기 사업 홍보 사이트 직접 제작
제품 카탈로그: 많은 상품을 체계적으로 보여줘야 하는 도매/소매 업체
포트폴리오 사이트: 사진작가, 디자이너 등 작업물을 보여줄 개인 사이트
이벤트/프로모션 페이지: 행사나 캠페인용 임시 랜딩 페이지
🚀 앞으로의 계획
방문자가 늘면 커스텀 도메인(neulbomcare.co.kr 등)을 연결하고, 네이버/구글 검색에 등록할 예정
신규 상품이 추가되면 데이터를 업데이트하고, 네이버 블로그와 연동할 계획
📋 재사용 가능한 프롬프트
프롬프트 1: 홈페이지 제작 시작
당신은 웹사이트 제작 전문가입니다. [업종] 홍보용 웹페이지를 제작해야 합니다. 유사한 웹사이트: [참고 사이트 URL 2~3개] 제작 전 어떤 사이트를 원하는지 질문해주세요. 클로드코드를 사용하신다면 플래닝 모드 사용을 추천합니다.
프롬프트 2: 모바일 최적화 요청
모바일에서 확인해봤는데 여기저기 수정이 필요해. [스크린샷 첨부] 모바일 환경에 맞게 전체적으로 최적화해줘.
