이제 시작이다, AI가 모두 준비해줬으니 달려 - 도전 3주차

📝 한줄 요약

코딩 못 해도 됩니다. 5분 발표 스크립트 작성, 랜딩페이지 기획(PRD), 그리고 실제 배포 가능한 HTML까지 — 하루 만에 만들었습니다.

바쁘시면 이것만 읽어도 돼요:

• 줌 모임 발표 스크립트를 슬라이드 5장·5분 분량으로 완성

• 랜딩페이지가 뭘 담아야 하는지 PRD로 먼저 정리한 후 HTML 생성

• 코드 한 줄 없이 Pretendard 폰트, 오렌지+네이비 컬러, 모바일 우선 페이지 완성

• python3 -m http.server로 로컬 미리보기 확인, Firebase Hosting 배포까지 준비

🎯 이런 분들께 도움돼요

• PPT나 발표 스크립트 쓰는 게 막막한 1인 사업자

• 랜딩페이지가 필요한데 어디서 어떻게 만들어야 할지 모르는 분

• 디자이너·개발자 없이 혼자 서비스 론칭 준비 중인 분

• Claude Code로 실제 결과물을 만들어보고 싶은 분

😫 3주차 시작 전 상황

2주차에 사업의 뼈대는 완성됐습니다.

• 포지셔닝 확정: "AI 계획서, 제조업 사업 경력 현직 10년차가 검토합니다"

• 가격 확정: A 5만원 / B 9만원 / C 28만원

• 당근 비즈프로필 소개글 완성

• Threads 30일 콘텐츠 완성

그런데 이 내용을 줌 모임에서 5분 안에 발표해야 했습니다. 그리고 당근에서 채팅이 오면 보내줄 링크 — 랜딩페이지도 없었고요.

🛠️ 사용한 도구

• 도구: Claude Code (터미널)

• 모델: Claude Sonnet

• 비용: Claude Pro/Max 구독 (추가 없음)

• 코딩 경험: 없음

🔧 작업 과정

발표 스크립트: "5분 안에 설득"을 역설계했습니다

슬라이드 5장 / 총 5분
S1 (30초): 누구를 위한 거야
S2 (1분): 어떤 문제를 풀어
S3 (1분30초): 어떻게 풀어 (MVP)
S4 (1분): 왜 나야
S5 (1분): 다음 주 실행 계획

Claude Code에 이전 작업 파일들을 @로 참조해서 넣었습니다.

@03_최종_아이디어.md @08_타겟_고객.md @09_MVP_정의.md @10_사업계획서.md @12_가격.md
이걸 기반으로 3주차 줌 모임 5분 발표 스크립트를 써줘.
슬라이드 5장 기준. 각 슬라이드 시간 배분과 실제 말할 내용 포함.

3분 만에 완성본이 나왔습니다. 스크립트를 기반으로 제미나이에 맡겼더니 이런 슬라이드는 12장 짜리가 나왔네요.

마지막 슬라이드에는 동료들한테 물어볼 질문도 넣었어요.

"AI 계획서 현실 검토, 처음 들었을 때 어떤 사람이 쓸 것 같았어요?
5만원이라는 가격, 당근에서 보면 어떻게 느껴지세요?"

피드백을 설계하는 거라고 생각했습니다.

랜딩페이지: 코드 전에 기획서(PRD)를 먼저 만들었습니다

HTML부터 만들고 싶었지만 참았습니다. 뭘 담을지 정하지 않으면 결과물이 어중간해질 것 같아서요.

PRD(Product Requirements Document)를 먼저 만들었습니다. 거창한 게 아니라, "이 페이지에 뭐가 있어야 해?"를 정리한 문서예요.

@08_타겟_고객.md @09_MVP_정의.md @12_가격.md
이걸 바탕으로 랜딩페이지 PRD를 만들어줘.
타겟, 감정 흐름, 섹션 구성, 섹션별 카피 후보, 색상·폰트 방향까지.

나온 것들:

감정 흐름 설계

• 처음: "나 얘기네" (공감)

• 중간: "이 사람 진짜 알겠다" (신뢰)

• 끝: "한번 물어봐도 되겠다" (행동 유발)

섹션 7개

• 히어로: 핵심 메시지 + CTA

• 문제: "이런 분 계신가요?" 공감 카드 3개

• 서비스 흐름: 4단계 상담 과정

• 왜 나야: 경력 + 차별화 3가지

• 가격: 3종 메뉴 + 얼리버드 배너

• 후기: 플레이스홀더 (첫 후기 대기)

• CTA: 당근 채팅 + 카카오 오픈채팅

PRD를 보고 "OK"를 치자마자 HTML 생성으로 넘어갔습니다.

HTML 생성: "생성해보자" 한 마디로 나왔습니다

생성해보자

실제로 이게 전부였습니다. PRD에 다 정의해놨으니까요.

나온 것들:

• Pretendard 폰트 CDN (jsdelivr) 적용

• CSS 변수로 컬러·스페이싱 시스템 구성

  • 오렌지 #FF6F0F + 네이비 #1A1A2E

• 모든 섹션 완성본 (히어로부터 푸터까지)

• 모바일 우선 / 데스크탑 max-width 680px

• 스무스 스크롤 JS 포함

• CTA 버튼 href는 # 플레이스홀더 (실제 당근 링크 연결 시 교체)

로컬에서 바로 확인했습니다.

python3 -m http.server 8899
# → http://localhost:8899

브라우저에서 열리는 순간, 진짜 서비스처럼 보였어요. 2주 전까지만 해도 "내가 랜딩페이지를 만들 수 있을까?"라고 생각했는데. 색깔이나 모습이 맘에 쏙들지는 않았습니다만 결과물이 그래도 나오네요?

✅ 결과 (After)

Before vs After

💬 이 과정에서 배운 것

PRD를 먼저 쓰면 코드가 1회에 나옵니다

HTML부터 만들면 "이 부분 바꿔줘", "이거 추가해줘"가 반복됩니다. PRD로 요구사항을 한 번에 정리해두면 생성물이 1회에 쓸 수 있는 수준으로 나왔어요. 기획 10분이 수정 1시간을 줄여줬습니다.

이전 파일 @참조는 계속 쓰면 쓸수록 강력해집니다

3주차가 되니 참조할 파일이 10개가 넘었습니다. @08_타겟_고객.md @12_가격.md 두 개만 넣어도 Claude가 타겟·가격 맥락을 이미 아는 상태에서 글을 써줍니다. 앞 단계 결과물이 쌓일수록 다음 단계 품질이 올라갔어요.

"생성해보자"가 가능한 건 준비가 됐을 때입니다

"생성해보자" 한 마디로 HTML이 나온 건 그 전에 PRD에서 디자인 방향, 섹션 구성, 카피를 다 정의해놨기 때문이에요. 준비가 충분하면 실행 명령은 짧아집니다.

붙이는글

아직 배포해서 실제 URL 생성하고 당근 연결하는 것은 시간이 부족해 하지 못했지만 오늘 중으로 마무리를 해보려고 합니다. 가격 설정 한 것이 맞나 싶으면서도 이번 프로젝트에 중점은 실행에 있기 때문에 일단 못먹어도 고를 합니다. 과연 상담 1건을 잡을 수 있을지..?