4년차 기획자인 나는 요즘 들어 업무에 흥미가 떨어지고 ‘기획이 정말 나랑 맞는 일일까?’ 하는 생각을 자주 하게됐다.
불안한 마음에 이것저것 마구잡이로 인풋에 집착하기도 했는데, 의욕은 줄고, 방향은 흐릿해지는 상태였다.
그러던 중, 하이아웃풋클럽에서 레플릿(Replit)으로 직접 서비스를 만들고 배포까지 해볼 수 있는 워크샵 공고를 보게 됐다.
딱 내가 필요하던 자극이었다. 망설임 없이 신청했다.
참고로 내 코딩 경험을 간단히 말하자면, 기획자로 IT 업계에 들어온 뒤 부트캠프 열풍에 휩쓸려 개발을 배운 적이 있다. 약 1년 정도 임베디드 개발자로 일했던 시기도 있었고, 지금은 다시 기획자로 복귀한 지 1년 반 정도 됐다. 요즘은 직접 코딩을 하진 않지만, 코드만 보면 대충 무슨 뜻인지는 읽을 수 있는 정도다.
그렇게 가벼운 마음으로 참여한 워크샵이었지만, 생각보다 훨씬 큰 자극과 재미를 안겨줬다.
직접 만들고, 배포까지 해보는 이 과정이 나에게 어떤 전환점을 줬는지 이야기해보려 한다.
레플릿 x 하이아웃풋클럽 워크샵
💡 아이디어에서 시작
워크샵 신청 시, 평소에 생각해오던 사이드 프로젝트 아이디어를 간단히 작성해 제출했다.
나는 국내 여행을 기록하고, 지역별로 도장을 수집할 수 있는 서비스를 아이디어로 제출했다.
참가가 확정된 이후에는, 이 아이디어를 실제로 구현하기 위해 필요한 기능들을 정리해보는 사전 설문 폼을 한 번 더 제출했다.
이 과정을 통해, 워크샵 시간 안에 구현할 수 있을 정도로 기능을 최소화하고, 간단한 유저 스토리 형태로 정리해보았다.
👩🏻💻 워크샵 진행 방식
워크샵은 오후 7시, 온라인 Zoom을 통해 진행되었다.
간단한 오리엔테이션과 함께 레플릿의 주요 기능 소개, 그리고 멘토의 실전 활용 사례 발표가 이어졌다.
이후 각 참가자는 줌 소회의실로 이동해, 자신이 만들 서비스를 간단히 소개한 뒤, 본격적으로 Replit을 활용한 개발을 시작했다.
🤖 Replit Agent + ChatGPT 로 바이브코딩
이번 워크샵의 핵심은 Replit Agent와 ChatGPT를 활용해 직접 서비스를 구현해보는 것이었다.
나는 처음에 유저 스토리만 대략적으로 정리해둔 상태였고, 이를 바탕으로 ChatGPT에게
→ "Replit에서 이해할 수 있는 프롬프트로 바꿔달라" 요청했고,
→ Replit에 입력한 결과를
→ 다시 ChatGPT에게 해석 요청하며
→ 다음 작업을 위한 프롬프트를 반복해서 생성했다.
이 과정을 반복하며 Replit Agent와 ChatGPT 사이를 오가며 필요한 기능들을 하나씩 구현해나갔다.
말 그대로 대화만으로 MVP를 완성해가는 경험이었다.
🤖 레플릿의 편리한 코딩 경험
ChatGPT가 만들어 준 프롬프트를 레플릿에 입력했을 때, 정말 충격 받았다.
나는 워크샵 시간 내에 MVP, 그 중에서도 아주 일부 기능만 만들 수 있을 거라 생각해서, 정말 기능을 최소한으로만 정리해뒀다.
그런데 Replit Agent는 그 최소한의 프롬프트를 받고, “Later”라는 항목으로 자연스럽게 확장 가능한 부가기능들까지 제안해줬다.
게다가 그 기능들은 체크박스 형식으로 선택할 수 있었고, 선택만 하면 개발 범위에 포함해 알아서 구현을 시작했다.
(“기능 범위 컷”에 부딪히던 기획자는 이런 자동화된 기능 제안에 큰 감동을 받음..)
Replit의 화면을 살펴보면, 좌측은 Agent와 대화하는 영역, 우측은 Preview, Console, Deployments 등 다양한 기능이 표시되는 영역으로 나뉘어져 있다.
Agent와 대화하며 코드를 수정하면, 그 결과가 우측 Preview 창에 실시간으로 반영되어 바로 확인할 수 있었다.
단순히 보는 것에 그치지 않고, Preview 창에서 버튼 클릭, 글 저장 등 실제 서비스처럼 인터랙션도 가능해서 훨씬 더 빠르게 피드백을 주고받을 수 있었다.
덕분에 "요기 버튼 색이 안 보여요", "글 저장했는데 반영이 안 돼요" 같은 피드백을 Agent에게 바로 전달할 수 있었고,
Agent도 마치 실시간으로 옆에서 수정해주는 팀원처럼 신속하게 반응해주었다.
🚀 마무리는 실시간 배포와 공유
밤 10시 30분, 각자가 구현한 서비스를 직접 배포하고 서로 공유하는 시간이 이어졌다.
나도 완벽히 완성되지는 안았지만, 당일에 만든 서비스를 버튼 클릭 한번으로 배포 후 URL을 공유해 소개할 수 있었다.
내가 만든 MVP, 국내 여행 도장깨기
이번 워크샵을 통해 만들어본 서비스는 국내 여행 도장깨기 서비스이다.
나는 특별한 계획 없이 훌쩍 떠나는 국내 여행을 좋아하는 편인데,
여행을 다닐수록 ‘아직 가보지 않은 지역은 어디일까?’, ‘예전에 다녀온 곳은 어디였더라?’ 하는 궁금증이 자주 생기곤 했다.
그래서 방문한 지역은 스탬프처럼 표시하고, 간단한 여행 기록도 함께 남길 수 있는 서비스가 있다면 정말 좋겠다는 생각을 늘 해왔고,
이번 워크샵을 기회 삼아 직접 만들어보기로 했다.
구현된 서비스의 기능을 간략하게 소개하자면...
1. 나의 여행지도 영역에 지도 UI가 표시되고, 방문 기록이 있는 곳은 스탬프(이미지)가 표시된다. 지역을 누르거나 [도장 추가하기] 버튼을 통해 새로운 기록을 남길 수 있다.
2. 전국 시/군/구 단위로 도장을 남길 수 있고, 도장 현황이 프로그래스바로 표시된다.
3. 좌측 영역과 나의 여행지도 영역 하단에 최근 도장 기록이 표시된다.
'나의 여행지도' 영역은 Kakao 지도 API를 활용해 구현하고자 했다.
하지만 아쉽게도 워크샵 시간 안에는 API 연동이 완전히 정상적으로 이루어지지 않아,
지도를 불러오지 못하는 경우에는 지역명을 버튼 UI로 대체할 수밖에 없었다.
레플릿과 함께 다시 수정해볼 계획이다.
UI도 더 예쁘게 다듬고 싶고, 기능도 하나씩 추가해보고 싶은 마음이 크다.
무엇보다 지금처럼 ‘손에 잡히는 MVP’가 하나 생기니, 아이디어가 샘솟는 느낌이다!
📌 느낀 점
이번 워크샵을 통해 느낀 건, 아이디어만 잘 정리하고, 프롬프팅에 조금 익숙해지기만 해도
정말 ‘제대로 된 IT 프로덕트’를 직접 만들어볼 수 있다는 자신감이었다.
놀라운 건 이 모든 걸 해내는 데 4달러도 쓰지 않았다는 점.
MVP 구현, 배포까지 이렇게 저렴하게 가능하다는 게 정말 놀라웠다.
말 그대로 극한의 가성비 개발 경험이었다.
평소에 아이디어가 넘치지만 실행까지 이어지지 않았던 분이라면,
지금 바로 레플릿을 통해 한 번 만들어보길 진심으로 추천드린다.
상상했던 서비스가 실제로 동작하는 순간의 짜릿함은 말로 다 표현할 수 없다. 🐴
https://blog.highoutputclub.com/replit-agent-guide-for-beginners/
Replit Agent 사용법 소개 - AI 코딩 도구 추천
Replit Agent 사용법: AI 기반 코딩 도구로 초보자도 쉽게 웹 애플리케이션 제작 및 배포! 코드 생성, 디버깅, 데이터 처리 등 다양한 기능과 함께 프로토타입 제작과 자동화 작업까지 Replit Agent로 간
blog.highoutputclub.com
댓글