Codex로 1인 사업자 홈페이지 뚝딱 만들기 (랜딩페이지·OG이미지·카톡 문의 연결까지)

한줄 요약

서비스 아이디어만 있던 상태에서 Codex와 함께 PRD 작성, 랜딩페이지 제작, OG 이미지, Firebase 배포, 카카오 오픈채팅 연결까지 진행했습니다.


이런 분들께 도움돼요

  • 1인 사업을 준비 중인데 홈페이지 제작이 막막한 분

  • 당근마켓이나 SNS에 보여줄 소개 링크가 필요한 분

  • 서비스 설명이 자꾸 딱딱하거나 전문용어처럼 느껴지는 분

  • AI에게 “예쁘게 만들어줘”라고 했는데 결과가 아쉬웠던 분


문제 상황

저는 15년차 물리치료사이고, 지금은 “운동 첫날을 같이 시작해주는 서비스”를 준비하고 있습니다.

서비스 아이디어는 있었지만, 홈페이지를 만드는 일은 막막했습니다. 특히 이 서비스를 설명할 때마다 자꾸 PT처럼 들리거나 치료 서비스처럼 느껴지는 문제가 있었습니다.

제가 진짜 전하고 싶었던 메시지는 단순했습니다.

  • 운동을 잘하지 못해도 괜찮다

  • 처음부터 무리하지 않아도 된다

  • 걷기부터 함께 시작하면 된다

  • 운동의 첫날을 혼자 버티지 않게 도와주고 싶다

하지만 이 문장을 홈페이지 구조와 카피로 바꾸는 일은 생각보다 쉽지 않았습니다.


사용한 도구

  • Codex

  • Firebase Hosting

  • 카카오 오픈채팅

  • 기존 사업 소개 MD 문서들


진행 과정

처음부터 “예쁘게 홈페이지 만들어줘”라고 요청하지 않았습니다.
대신 제가 가진 사업 관련 문서를 먼저 읽히고, 홈페이지의 방향을 잡는 것부터 시작했습니다.

처음 사용한 프롬프트는 아래와 같았습니다.

폴더의 MD 파일들을 읽고 랜딩페이지 PRD를 짜줘. 내가 오케이하면 그때 진행해.

이 요청을 통해 Codex가 먼저 서비스의 목적, 타겟 고객, 핵심 메시지, 페이지 구성을 정리했습니다.

그다음 실제 제작을 요청했습니다.

index.html 하나에 HTML + CSS + JS를 다 넣고, 모바일 우선으로 랜딩페이지를 만들어줘.

Codex는 한 페이지짜리 랜딩페이지를 만들고, 아래 섹션을 구성해줬습니다.

  • 히어로 영역

  • 고객의 문제 상황

  • 서비스가 제공하는 해결 방법

  • 가격 안내

  • 후기 영역

  • 문의 CTA 버튼

특히 좋았던 점은 제가 중요하게 생각했던 표현을 살려준 것이었습니다.

운동 못해도 괜찮아요. 걷기부터 시작합니다.

이 문장들이 들어가면서 서비스가 훨씬 부드럽고 명확하게 전달됐습니다.


결과

단순한 HTML 파일에서 시작했지만, 실제 고객에게 보여줄 수 있는 홈페이지 첫 버전까지 완성했습니다.

Before

  • 서비스는 정했지만 소개 페이지가 없었음

  • 설명이 PT나 치료처럼 들렸음

  • 당근에 올릴 때 보여줄 링크가 없었음

  • 홈페이지 제작이 막막했음

After

  • 모바일 우선 랜딩페이지 완성

  • 핵심 메시지 정리

  • 김천 율곡 안산공원 배경사진 적용

  • 티울짐 로고 기반 OG 이미지 제작

  • Firebase로 배포

  • 카카오 오픈채팅 문의 버튼 연결


배운 점

이번에 가장 크게 배운 점은, AI에게 처음부터 “예쁘게 만들어줘”라고 하면 결과가 흔들릴 수 있다는 것입니다.

대신 내 사업 문서와 생각을 먼저 읽히고, PRD부터 만들게 하면 결과가 훨씬 안정적이었습니다. AI가 디자인만 대신해준다기보다, 먼저 내 생각을 정리해주고 그다음 결과물로 옮겨주는 느낌이었습니다.

1인 사업자는 서비스 기획, 홍보, 고객 응대, 운영까지 혼자 챙겨야 합니다. 그런 상황에서 Codex는 홈페이지 첫 버전을 빠르게 만드는 데 큰 도움이 됐습니다.

완벽한 홈페이지는 아니어도, 고객에게 보여주고 반응을 확인할 수 있는 출발점은 충분히 만들 수 있었습니다.


다른 분들께 드리는 팁

홈페이지가 막막하다면 처음부터 디자인을 요청하기보다, 먼저 이렇게 요청해보면 좋겠습니다.

내 사업 문서들을 읽고, 누구를 위한 서비스인지, 고객이 어떤 문제를 느끼는지, 홈페이지에서 어떤 순서로 설득해야 하는지 PRD로 정리해줘.

그다음에 제작을 요청하면 AI가 훨씬 덜 흔들립니다.

앞으로는 이 랜딩페이지를 바탕으로 실제 문의 전환율을 확인하고, 고객 반응에 따라 문구와 구성을 계속 다듬어볼 계획입니다.

1
3개의 답글

뉴스레터 무료 구독