[하이아웃풋클럽 워크샵 후기] 레플릿(Replit)으로 만든 영어 단어장

선정될거란 기대를 하나도 안 했을만큼 커뮤니티 안에서도 엄청난 경쟁률 보여줬던 "하이아웃풋클럽 MVP 만들기 워크샵"에 정말 운이 좋게 선정이 됐습니다.

그래서 구정 연휴의 시작인 1월 24일 금요일 저녁에 들뜬 마음으로 하이아웃풋클럽 사무실로 향했습니다.

오랜만에 뵙는 분들, 그리고 처음 뵙는 분들과 인사를 시작으로 워크샵이 시작됐습니다. 워크샵의 진행은 미국 배달의 민족으로 알려진 DoorDash에서 개발자로 일하셨고, 지금은 하이아웃풋클럽 공동 창업자님이 맡아주셨습니다.

이번 워크샵에서 MVP를 만들기 위해 사용한 도구는 레플릿(Replit)이라는 웹 기반 개발 도구입니다. 특히, 이 도구에서는 레플릿 에이전트(Replit Agent)라는 기능을 제공합니다.

평소에 ChatGPT를 필두로 하는 생성형 AI를 사용하는 방식처럼 이 에이전트와 대화를 하면서 서비스를 만들어볼 수 있는 기능입니다. 에이전트와의 대화만으로 프로그래밍부터 배포까지 모든 프로세스를 최소한의 추가 작업으로 진행할 수 있는 도구입니다.

어떤 서비스를 어떻게 만들 것인가

이번 워크샵에서 제가 만들어보기로 한 서비스는 "영어 단어장"입니다.

이번에 만들 영어 단어장을 유저가 어떻게 사용하면 좋을지 구상한 내용을 적어보면 아래와 같습니다.

• 구글 로그인을 진행하고
• 단어가 저장되어있는 노션 데이터베이스 주소를 입력하고
• 데이터베이스에 접근할 수 있는 api 키 값을 설정하고
• 몇 개의 단어를 공부할 것인지 설정하면
• 카드에 영단어와 문장이 나오고
• 한 번 클릭하면 동의어가 나오고
• 한 번 더 클릭하면 한글 뜻이 나오고
• 다음 카드로 넘기려면 오른쪽으로 드래그
• 이전 카드로 가려면 왼쪽으로 드래그

ChatGPT 등의 여러 AI와 많은 대화를 나눠보고 일하면서 몸소 느낀 점은

내가 원하는 바를 달성하기 위해서는 최대한 일을 잘게 쪼개서 자세하게 시켜야한다는 것

입니다. 이번 워크샵에서도 AI 서비스 개발 도구인 레플릿 에이전트(Replit Agent)에게 일을 시켜야하는 상황이기에 모든 단계를 최대한 디테일하게 하나 하나 작성해두고 개발을 시작했습니다.

레플릿 에이전트(Replit Agent)를 이용한 MVP 개발 과정

레플릿 에이전트

이번 워크샵에서는 감사히도 Replit Core 1달 이용권($25 바우처)을 지원해주셔서 바로 레플릿 에이전트를 이용해볼 수 있었습니다.

레플릿 홈페이지로 들어가면 아래와 같은 화면을 볼 수 있습니다.

흔히 사용하는 것처럼, 위의 채팅창에 원하는 서비스를 어떻게 만들어 달라고 주문하면 서비스를 만들어주는 방식으로 동작합니다.

설명이 뭔가 부족하거나, AI가 제대로 알아듣지 못한 것 같다 싶으면 위 사진에서 볼 수 있는 것처럼 Improve prompt 기능을 이용해서 작성한 프롬프트를 개선할 수도 있다고 합니다.

물론, 사용할 때마다 바우처에서 비용이 차감된다고 하여 저는 사용하지 않았습니다. 대신 ChatGPT를 이용하여 프롬프트를 만들었고, 개발을 시작했습니다.

개발 진행

개발을 진행하면서 위에 적어둔 것처럼 "구글 로그인" 기능을 처음에 만들려고 했습니다. 그런데 이 기능이 아무래도 외부 사이트와 연동하는 작업이고, 로그인 기능이 다소 복잡하다보니, 생각보다 기능 구현이 잘 안되어 다른 기능들을 먼저 개발하기로 했습니다.

워크샵을 진행하기 전에 가이드를 주실 때, 문제가 발생할 때 수정 요청을 몇 번 시도해보고 같은 문제가 계속 발생하면 그 부분은 빠르게 넘어가고 다른 기능을 개발하라고 하셨습니다.

그래서 노션 데이터베이스와 연동하여 단어를 보여주는 기능을 먼저 개발했습니다.

아래와 같이 ChatGPT에 제가 원하는 기능을 넣어주고, 맨 아래 보이는 것처럼 replit으로 만들려고 하니까 그에 맞는 프롬프트를 만들어달라고 요청했습니다.

그리고 ChatGPT가 만들어준 결과를 바로 붙여넣었더니 외부 연동하는 부분들에 몇 개의 입력값을 제공해주는 부분을 제외하면 원하는 대로 거의 바로 제품을 만들어줬습니다.

사실 저렇게 주문하는 것도 굉장히 큰 덩어리라, 몇 개의 요청이 누락되어 그 부분들은 디테일하게 더 잡아주면서 개발을 완료했습니다.

이후에 미뤄뒀던 구글 로그인 기능을 추가하는데, 무수히 많은 변경사항이 추가되면서 기존 기능까지 이상해지는 현상이 발생했습니다.

위의 사진에서 볼 수 있는 것처럼 다행히 레플릿 에이전트와 작업을 할 때 체크포인트라고 부르는 매 단계마다 저장해주는 기능을 제공합니다.

해당 시점으로 돌아가는건 정말 간단히 'Rollback to here' 버튼을 누르면 됩니다. 이 기능을 이용해서 이전에 성공했던 부분으로 다시 돌아가서 작업을 다시 시작하는 식으로 기능을 추가했습니다.

만든 서비스의 MVP

위의 과정들을 거쳐 만든 제 서비스의 MVP는 아래 링크에서 확인해보실 수 있습니다.

https://vocab-ninja.replit.app

단어가 많이 보이지 않는 분들을 위해 사용 영상도 같이 공유드립니다.

제가 원했던 기능들이 잘 들어간 단어장이 만들어진 것을 볼 수 있습니다.

마치며

물론 아직 MVP 단계이기 때문에 수정해야할 내용이 있긴 합니다.

구글 계정을 연동해도 노션 데이터베이스가 이상하게 동작하는 경우도 있고, 약간의 디테일링도 필요합니다. 30분 정도 핑퐁하면서 노션 데이터베이스가 이상하게 동작하는 부분은 따로 수정 했습니다!

하지만 제가 원했던 단어를 보여주고, 드래그로 이동할 수 있는 핵심 기능들은 순식간에 개발 할 수 있었습니다. 노션 데이터베이스와 연동하고, 위의 핵심 기능을 만드는데 걸린 시간은 1시간이 채 안되는 것 같습니다.

대부분의 시간은 구글 로그인과 씨름하는데 사용했구요. 총 비용은 6.5달러가 발생했습니다. 1450원의 환율을 기준으로 하면 9,425원 정도로 하나의 제품을 만든 것입니다.

그리고 개발도 개발인데, 이를 운영하기 위해 배포하는 작업도 정말 복잡합니다. 이 부분까지 알아서 해주는 것을 보고 이제는 정말 아이디어가 중요한 시대가 됐다는 사실을 몸소 체감할 수 있었습니다.

이번 하이아웃풋클럽 MVP 만들기 워크샵을 통해서 레플릿 에이전트(Replit Agent)라는 정말 강력한 도구를 배우고, 이를 이용해서 생각만 했던 서비스의 MVP를 정말 빠르게 만들어볼 수 있는 경험을 해볼 수 있어서 즐거웠습니다.

이런 좋은 기회를 만들어주신 하이아웃풋클럽에 다시 한 번 감사드립니다!

Replit 한국 사용자 모임 오픈채팅방

Replit을 사용하며 고민했던 점이나 새롭게 알게 된 꿀팁을 함께 나눌 곳이 필요하셨다면, 오픈카톡방에 참여해보세요.

• Replit 활용법 공유
• 개발 관련 질문 & 답변
• 새로운 아이디어와 프로젝트 이야기