소개
소개팅 서비스를 운영하는 작은 회사에서 일하고 있습니다. 개발자 없이 소수 인원으로 운영하다 보니, 머릿속에 있는 아이디어를 구현하는 게 늘 숙제였어요.
개발 외주를 맡기려면 개발자와의 소통도 신경써야 하고, 뭔가 하나 바꿀 때마다 비용이 발생하는 구조가 부담이었습니다. 그래서 랜딩페이지는 아임웹이라는 노코드 홈페이지 제작 툴로 직접 제작해서 운영해왔는데요.
처음엔 "이 정도면 충분하다"고 생각했는데, 마케팅 실험을 몇 가지 해보려 하니 기능 제한에 계속 막히고, 무엇보다 페이지 로딩 속도가 너무 느려서 불만이 쌓여갔습니다. 그렇다고 다른 더 중요한 업무들에 밀려 선뜻 해결에 나서지 못하고 있었죠.
그러다 지인의 강력 추천으로 지피터스에서 바이브코딩을 배우기 시작했고, "공부를 위한 공부보다 실무에 바로 써먹을 수 있는 걸 만들어보자" 는 생각에 랜딩페이지 직접 제작에 도전하게 됐습니다.
진행 방법
사용 도구: Claude Code
강의를 시작하면서 어떤 주제로 활용할지 고민하다가, 바로 실무에 적용할 수 있는 랜딩페이지 제작을 시도해봤습니다.
Claude Code와 대화를 시작했는데, 마치 실제 개발자에게 외주를 맡기는 것처럼 "어떤 기능이 필요하세요?", "서비스의 핵심 메시지가 무엇인가요?" 하는 식으로 필요한 것들을 하나씩 짚어주더라고요. 그러면서 자연스럽게 윤곽이 잡혀갔습니다.
디자인 완성도를 높이기 위해 아래와 같은 방식을 반복했습니다.
활용 프롬프트 예시
"지금 이 페이지의 내용과 디자인을 네가 보기엔 어떤 것 같아? 평가해주고 개선해줘."
이걸 여러 차례 반복하니 완성도가 점차 올라갔습니다.
추가로 강의에서 스터디장님이 공유해주신 방법도 활용해봤는데, 효과가 좋았어요.
활용 프롬프트 예시
"AI 냄새 많이 날 때 가장 최근에 유행하는 웹페이지 스타일 CTO 팀 호출해서 분석하고 대안 가져와줘"
이 프롬프트 한 번에 디자인 퀄리티가 확 달라지는 경험을 했습니다.
그렇게 완성한 결과물을 Vercel로 배포까지 해봤습니다.
👉 https://tttingkrlandingpage.vercel.app/index.html
결과와 배운 점
솔직히 말하면 디자인 감각이 뛰어난 편이 아니라서, 결과물이 디자인적으로나 내용적으로 완벽하다는 확신은 아직 없습니다. 😅
그런데 이번 작업을 통해 느낀 가장 큰 수확은 이겁니다.
원하는 방향이 생기면 언제든지 빠르게 수정할 수 있다는 자신감
마케팅 실험용 랜딩페이지를 비용 없이 빠르게 여러 버전으로 만들 수 있겠다는 확신
아임웹(노코드 홈페이지 제작 툴)의 기능 제한과 느린 로딩 속도에서 벗어날 수 있는 현실적인 대안을 찾은 것
앞으로 강 의를 통해 다른 분들의 다양한 사례도 참고하면서 바이브코딩 실력도 키우고, 점점 더 재미를 붙여가고 싶습니다!
도움 받은 글
지피터스 바이브코딩 강의 및 스터디장님 프롬프트 팁
