한줄 요약
보리떡 공장을 운영하는 소상공인이 코드 한 줄 모르고도, Claude Code로 랜딩페이지를 기획부터 배포까지 완성했습니다.
바쁘시면 이것만 읽어도 돼요:
Claude Code로 기획(PRD) → HTML 제작 → Firebase 배포까지 한 흐름으로 완성
"PRD 짜줘" 한 마디에 섹션 구성, 카피 후보, 색감, 폰트까지 한 번에 나옴
Firebase 로그인 딱 한 번만 직접 했고, 나머지는 전부 AI가 처리
배포 후 실제 URL 생김 — 당근 채팅 대신 링크 하나로 공유 가능
이후 사진·영상·가격·픽업 정보를 말로 수정 요청하면 즉시 반영 + 자동 재배포
이런 분들께 도움돼요
내 가게·사업을 소개할 페이지가 필요한 소상공인
개발자 없이 직접 홍보 페이지를 만들어보고 싶은 분
AI를 써보고 싶은데 뭘 시켜야 할지 모르는 분
문제 상황 (Before)
부천 도당동에서 보리떡 공장을 운영하고 있어요. 당근마켓 비즈프로필에 올리면 되지 않냐고요? 맞는데, 문제가 있었어요.
"오늘 아침에 공장에서 직접 만든 보리떡을 오늘 직접 판다"는 개념이 낯설다 보니, 프로필 한 줄로는 설명이 너무 부족했어요.
왜 마트보다 신선한지
어떻게 픽업하는지
누가 만드는지
이걸 다 담을 수 있는 공간이 필요했는데, 당근 프로필엔 한계가 있었죠. 그렇다고 개발자한테 맡기자니 비용도 시간도 부담이었고요.
그래서 Claude Code한테 물어봤습니다.
사용한 도구
도구: Claude Code
모델: Claude Sonnet
배포: Firebase Hosting (무료 플랜)
특이사항: 코딩 지식 없이 대화만으로 진행
작업 과정
먼저 "뭘 만들어야 하는지"부터 — PRD 작성
랜딩페이지를 만들기 전에 Claude Code가 먼저 PRD(기획서)를 짜자고 했어요. 처음엔 "그냥 만들면 되지 않나?" 싶었는데, 막상 요청해보니 이해가 됐습니다.
폴더에 있는 md 파일들을 읽고, 랜딩페이지를 만들려고 해. 먼저 PRD를 짜줘. PRD에 들어갈 것:
1. 페이지 목적 / 핵심 메시지 한 줄
2. 타겟 사용자 / 그 사람이 페이지 보고 떠올릴 감정
3. 섹션 구성 (히어로 / 문제 / 해결 / 가격 / 후기 자리 / CTA)
4. 각 섹션의 핵심 카피 후보
5. 톤앤매너 / 색감 / 폰트 분위기
6. CTA 행동
7. 모바일 우선 설계 메모
그랬더니 이전에 만들어둔 기획 파일 15개를 전부 읽고, 이런 걸 한 번에 뽑아줬어요.
핵심 메시지: "오늘 아침에 만든 보리떡을, 오늘 우리 동네에서 직접 삽니다."
감정 흐름 설계: 호기심 → 신뢰 → 가성비 안도 → FOMO
색감: 보리떡 황갈색 + 당근 오렌지 + 크림 화이트
섹션별 카피 후보까지
솔직히 이 부분에서 "오!" 했어요. 제가 막연하게 "페이지 만들어줘"라고 했다면 절대 이렇게 나오지 않았을 거예요. 기획이 먼저 정리되니까 이후 작업이 훨씬 빨라졌습니다.
그다음은 실제 제작 — HTML 파일 하나로 끝
PRD를 확인하고 OK 했더니, 바로 제작에 들어갔어요.
@15_랜딩페이지_PRD.md를 기반으로 단일 파일 랜딩페이지를 만들어줘. 조건: - index.html 하나에 HTML + CSS + JS 다 넣기 - 모바일 우선, 데스크탑에서도 잘 보이게 - 폰트는 Pretendard (CDN 사용) - 이미지가 필요한 자리는 placeholder로 비워두기
결과물이 나왔을 때 미리보기로 바로 확인할 수 있었는데, 8개 섹션짜리 풀페이지가 만들어져 있었어요. 모바일로 보면 하단에 "지금 주문하기" 버튼이 스크롤해도 계속 따라다니는 것까지요.
파일 하나라서 관리도 단순하고, 나중에 수정할 때도 "이 부분 이렇게 바꿔줘" 라고 말하면 바로 됩니다.
Firebase 배포 — 딱 한 번만 직접 했어요
완성된 파일을 실제 인터넷에 올리는 작업도 Claude Code가 다 처리해줬어요. 단 한 가지, Firebase 로그인만 제가 직접 했습니다.
터미널에서 로그인 명령어를 입력하면 브라우저가 열리고 구글 계정으로 로그인하면 끝. 그 이후 배포는 Claude Code가 명령어를 실행해줬어요. 1~2분 후 실제 URL이 생겼습니다.
https://carrot-06030915.web.app
"진짜 사이트가 됐다"는 느낌이 그때 왔어요.
이후 수정은 말로 — 배포까지 자동
배포 이후에도 내용을 계속 다듬었어요. 방법은 간단합니다. 그냥 말하면 돼요.
'가격 미정' 을 '10,000원'으로 수정해줘.
보리떡 접시 두손 연줄.jpg 을 히어로 사진으로 적용해줘.
보리떡 작업 영상.mp4 을 공장 생산 영상으로 적용해줘.
수정 요청할 때마다 파일을 고치고 Firebase에 자동으로 재배포해줘요. 따로 업로드할 필요 없이, 요청하면 URL에 바로 반영됩니다.
결과 (After)
Before vs After
항목
Before
After
홍보 방식
당근 프로필 한 줄 설명
랜딩페이지 링크 하나로 공유
개발 비용
개발자 필요 (수십만원~)
0원
제작 시간
며칠~몇 주
당일 완성
수정 방법
개발자에게 요청
말로 요청 → 즉시 반영
결과물
랜딩 페이지: https://carrot-06030915.web.app
구성: 히어로 / 문제 / 해결 / 생산자 소개 / 상품·가격 / 픽업 안내 / 후기 자리 / CTA
아직 오픈 전이라 고객 반응은 모르지만, "준비가 됐다"는 느낌이 생겼어요. 아이디어가 실제로 존재하는 무언가가 된 순간이었습니다.
이 과정에서 배운 AI 활용 팁
효과적이었던 것
"만들어줘" 전에 "기획해줘" 먼저 — PRD를 먼저 잡으면 이후 수정이 줄어요. AI도 방향이 명확할 때 더 잘 합니다.
수정은 구체적으로 — "보기 좋게 해줘"보다 "폰트 사이즈 키워줘", "이 문구를 이걸로 바꿔줘"처럼 짧고 구체적으로.
한 번에 하나씩 — 여러 수정을 한꺼번에 요청하면 놓치는 게 생겨요. 하나 요청하고 확인한 다음 다음 걸 요청하는 게 더 빨랐어요.
이렇게 하면 안 돼요
로그인처럼 브라우저가 필요한 건 AI가 못 해요 — Firebase 로그인처럼 내 계정 인증이 필요한 건 딱 그 부분만 직접 해야 합니다.
"알아서 예쁘게"는 안 통해요 — 원하는 느낌, 색감, 톤을 조금이라도 알려줘야 결과가 달라져요.
다른 업무에 적용한다면?
이번에 만든 구조 그대로 다른 소상공인들도 응용할 수 있어요.
배달 없는 동네 반찬가게 → 오늘의 반찬 + 픽업 안내 랜딩페이지
공방·클래스 → 강사 소개 + 수업 일정 + 수강 신청 링크
동네 세탁소·수선집 → 서비스 안내 + 가격표 + 카카오 채널 연결
Firebase Hosting 무료 플랜으로 충분하고, 도메인 연결도 나중에 말로 요청하면 됩니다.
앞으로의 계획
첫 고객이 생기고 나면 후기 섹션을 채울 예정이에요. 지금은 "첫 10명의 후기를 기다리고 있어요"라고 써있는 자리인데, 실제 후기가 쌓이면 그 자리가 가장 강력한 설득 수단이 될 거예요.
재사용 가능한 프롬프트
프롬프 트 1: 랜딩페이지 PRD 요청
내 [사업/서비스] 관련 파일들을 읽고, 랜딩페이지 PRD를 짜줘.
PRD에 들어갈 것:
페이지 목적 / 핵심 메시지 한 줄
타겟 사용자 / 그 사람이 페이지 보고 떠올릴 감정
섹션 구성 (히어로 / 문제 / 해결 / 가격 / 후기 / CTA)
각 섹션의 핵심 카피 후보
톤앤매너 / 색감 / 폰트 분위기
CTA 행동 ([원하는 채널]로 연결)
모바일 우선 설계 메모
[PRD 파일명].md으로 저장해줘.
프롬프트 2: 단일 파일 랜딩페이지 제작
@[PRD 파일명].md를 기반으로 단일 파일 랜딩페이지를 만들어줘.
조건:
index.html 하나에 HTML + CSS + JS 다 넣기
모바일 우선, 데스크탑에서도 잘 보이게
폰트는 Pretendard (CDN 사용)
이미지가 필요한 자리는 placeholder로 비워두기
[폴더명]/index.html 경로로 저장해줘.
프롬프트 3: 내용 수정 + 즉시 배포
'[기존 텍스트]'를 '[새 텍스트]'로 수정하고 바로 배포해줘.
