안녕하세요! 일상의 피로를 한번에 날려주는 AI 영어코치 박카스입니다.
저는 이번에 AI 영어 코칭(홈스쿨링) 서비스의 핵심 가치를 효과적으로 전달하고, 사용자의 서비스 구독을 유도하는 매력적인 랜딩페이지 제작하고 싶었어요.
그래서 다음과 같은 핵심 기능을 가진 AI 영어 코칭 서비스를 구상했었구요.
AI 영어코치 GTPs를 활용한 사용자 개인 맞춤형 학습자료 (4컷 만화 등) 배포 서비스
텔레그램+메이크 연동 영어발음 평가 테스트 무료 서비스
AI 디지털교과서 학습진도에 맞춘 영어단어, 문법, 회화 자료 무료 배포 서비스
실시간 몰입형 원어민 영어 화상서비스 구독제 유료 서비스
"각 단계는 계단형 콘텐츠로, 무료 서비스들을 통한 최종 유료 서비스 구독을 유도함"
이러한 다층적인 서비스를 사용자에게 쉽고 효과적으로 전달하기 위해서는 잘 기획된 랜딩페이지가 필수적이란 사실을 깨닫고 작업에 착수하였습니당~!
<사용한 AI 툴: GPT, GPTs, Gemini, VO, Cursor, Cluely, 노션, Github, Vercel>
기획서 작성 with GPT or Gemini
😄 가장 먼저 서비스의 뼈대를 잡는 기획서 작성
너는 경력 10년 이상의 베테랑 기획자야. 내 아이디어를 기반으로 랜딩페이지 제작용 기획서를 작성해줘. 다른 사족은 붙이지 말고 기획서의 내용만을 답변해줘 아래 내용을 중심으로 정리해줘: - 서비스 이름 - 핵심 기능 요약 - 주요 타겟 사용자 - 사용자에게 어떤 효과나 가치를 주는지 - 가격 정책 - 디자인 컨셉 아이디어 (톤앤매너, 색상, 레이아웃 등) 내 아이디어는 다음과 같아: {1. AI 영어코치 GTPs를 활용한 사용자 개인맞춤형 학습자료(4컷 만화 등) 배포 서비스 2. 텔레그램+메이크 연동 영어발음 평가테스트 무료 서비스 3. AI 디지털교과서 학습진도에 맞춘 영어단어, 문법, 회화 자료 무료 배포 서비스 4. 실시간 몰입형 원어민 영어 화상서비스 구독제 유료 서비스 "각 단계는 계단형 컨텐츠로, 무료 서비스들을 통한 최종 유료 서비스 구독을 유도함"}=> Gemini가 기획안을 더 잘 뽑아줘서 Gemini 기획안 채택함
상세 페이지 작성 with GPTs
❤️ GPTs 탐색에서 "상세" 검색하고 상세페이지 작성 GPTs 찾음
-> GPT 또는 Gemini에서 정리된 기획서 초안을 GPTs에 넣고 재가공함
이 서비스를 사전 시장조사 목적으로 랜딩 페이지를 제작하려 해. 다른 사족은 붙이지 말고 화면 설계서의 내용만을 답변해줘 - 버튼 클릭 시 이름/이메일 입력 폼 → 노션 API로 웨이팅 리스트 등록 - 전환 흐름: 1. CTA 클릭 2. 간단한 폼 (이름, 이메일) 3. 등록 완료 후 메시지: “🎉 웨이팅 리스트 등록 완료! 출시되면 가장 먼저 알려드릴게요.” - 원페이지 스크롤형 랜딩 페이지 - 사용 시나리오 예시 포함 - 요약 데모는 실제로 동작하지 않고 예시 UI로만 구성 아래 기획서를 바탕으로 화면 설계서를 만들어줘: {GPTs에 넣고 재가공된 2차 기획안을 이곳에 복붙}=> 서비스 이름/ 핵심 기능 요약/ 주요 타겟 사용자/ 사용자에게 어떤 효과나 가치를 주는지 / 가격 정책 / 디자인 컨셉 아이디어(톤앤매너와 색상, 레이아웃, 시각요소 )를 도출함.
디자인 참조 사이트 Dribbble 활용
🎉 원하는 스타일의 디자인 시안 탐색 후 이미지 다운로드
랜딩페이지 제작 with vo
=> GPTs에서 얻은 최종 설계서를 vo에 넣고, Dribbble에서 다운로드한 이미지를 함께 첨부
랜딩 페이지 수정 with Cursor
👍 vo로 기본적인 구조를 잡은 후, 좀 더 세밀한 디자인 수정과 코드 커스터마이징을 위해 Cursor를 활용
=> 커서를 처음 다뤄보는것이기에 Node.js, PowerShell 등등 모든것들이 신세계였음. vo에서 작업한 파일을 커서로 불러온후, 첫 실행을 하였을때부터 수많은 오류가 발생함. 하지만 우리에겐 지피터스 동료들과 수많은 사례글, 유튜브 영상들이 있기때문에 괜찮음. 그리고 이때부터 정말 효율적으로 잘 써먹은 툴은 Cluely.
컨닝 천재 Cluely
😄 화면 장면 하나하나마다 이 친구에게 물어보면 즉각 해결가능한 코드 제공해줌.
=> 캡쳐로 보여드리고 싶지만, 캡쳐를 하는순간 Cluely는 꼭꼭 숨어버림.
CTA 버튼 노션 DB 연결
❤️ 랜딩페이지의 핵심 목표 중 하나는 사용자의 행동을 유도하는 것이므로, 주요 CTA(Call To Action) 버튼(예: "무료 체험 신청", "상담 문의")을 통해 수집된 사용자 정보를 효과적으로 관리하기 위해 노션(Notion) 데이터베이스와 연동함.
=> 노션도 처음 써보았다.. 힘들었던 부분은 API 연결하는 부분이 었는데, 이 부분은 커서가 의외로 해결방안을 잘 제시해줌. 특히 아래 스샷에 보이는 "연결" 메뉴를 못찾아서 한참을 헤맴. 😢
Vercel 배포 with github
😮 로컬서버로 커서의 수정작업이 있을때마다 바로 확인할수 있어서 좋았었는데, 다른사람들도 볼수있게 배포해야한다니 이 과정에서 또 한번 큰 벽을 느낌.
cd "D:\템플데이터\Language-ladder-landing (1)" # 해당 프로젝트 폴더로 이동
git init # 새로운 git 저장소 초기화
git add . # 현재 폴더의 모든 파일을 git 스테이지에 추가
git commit -m "first commit" # 첫 번째 커밋 생성
git branch -M main # 브랜치 이름을 main으로 변경
git remote add origin https://github.com/lucaspak/language-ladder-landing.git # 원격 저장소(origin) 추가
git push -u origin main # 원격 저장소로 main 브랜치 푸시
git config --global user.name "lucaspak" # 전역 사용자 이름 설정
git config --global user.email "[email protected]" # 전역 이메일 설정
=> git에 올리기 전에 Windows PowerShell에 입력한 명령어임. 노코드가 아니라서 겁먹을 필요없음. 왜냐면 이런 코드는 Gpt든 Gemini든 문제상황 캡쳐뜨고 보내면 다 알려주기때문임. 이번엔 Cluely가 다 알려줌.
=> 드디어 Github에서 도메인주소가 나옴.
🎉 https://language-ladder-landing.vercel.app/
시장조사 결과가 좋으면, 백엔드쪽을 연구하여 기능을 덧붙여나갈 예정임.