7일동안 1억 토큰으로 바이브 코딩해 만든 Cloud 관제 시스템(Raindrop+Vultr)

최근에 Hackathon에 참여했는데, 그 개발 과정을 기술해 보려고 합니다.

이 프로젝트는 AI Coding Assistant 활용해서 개발해야 한다고 해서 최대한 바이브 코딩으로 구성해 보았습니다.

제작은 대략 7일정도 소요될거 같으며, 그 과정에서 문제 발생했던 부분과 해결 방법등, 제작 과정을 적어 보겠습니다.

아래에는 경어체는 사용하지 않으니, 이점 양해 주시면 감사하겠습니다.

---

 

들어가며

이 해커톤은 특정 플랫폼을 사용하도록 되어 있었다. 즉, 홍보성이 강한 해커톤이였다.

LiquidMetal AI의 Raindrop Platform을 필수로 사용해야 하고, Vultr 인프라 연동이 의무였으며, 거기에 AI Coding Assistant(Claude Code 또는 Gemini CLI)를 활용한 개발을 요구했다. 솔직히 말하면, AI를 활용한 개발 속도를 보겠다는 의도가 보여서 바이브 코딩으로 개발하게 되었다.

 

 

Voice Agent 트랙에 참여했기 때문에 ElevenLabs 연동도 필수였다. 결과적으로 Raindrop + Vultr + ElevenLabs 세 가지 서비스를 엮어서 채팅 인터페이스로 클라우드 서버를 관리하는 MVP를 만들었다.

이 글에서는 바이브 코딩으로 빠르게 MVP를 구성한 과정과 그 과정에서 마주친 문제들을 정리해본다.

 

그래서 나온 결과물이다.

대시보드에서는 마우스로 클라우드의 서버를 시작/중지/재시작/삭제가 가능하도록 구성해 두었으며, 서버 상태를 간단히 출력해주면, 상세정보를 보면 api를 통해 서버의 상세 정보를 출력해 준다.

그리고, Command Center에서는 채팅 형태로 명령어를 입력하면 서버 제어가 가능해진다.

대시 보드 화면

 

서버 상세정보

 

Command Center에서는 채팅으로 서버를 제어 한다.

 

 

사용된 플랫폼, 개발 도구

필수 플랫폼: LiquidMetal AI의 Raindrop Platform
필수 인프라: Vultr Services (최소 1개 이상 연동)
개발 도구: Cusor + Cloud Code + Raindrop Code
Voice: ElevenLabs 

시작시 Raindrop과 Vultr 각각 $500씩 크레딧을 제공 받아서 진행했다. 다만 Vultr는 신용카드 등록이 필수였다.

 

Raindrop을 다들 잘 모를거 같아서 조금만 더 설명하면, Raindrop은 백엔드 애플리케이션을 호스팅하는 서버리스 플랫폼이다.

Vultr API를 직접 연동해주는 게 아니라, Vultr를 호출하는 "내 애플리케이션"을 배포하고 실행해주는 역할입니다.

쉽게 말해 Vercel / AWS Lambda 같은 신생 호스팅 플랫폼으로 보면 될거 같다.

Vultr 는 관리 대상이 되는 클라우드 서버 (EC2 같은)와 같다고 보면 된다.

서버리스 플랫폼(Raindrop) 위에서 Vultr API를 호출하는 구조

 

무엇을 만들었나?

raindrop-code로 백엔드 구성하기

우선 Raindrop 플랫폼을 사용하기 위해서는 raindrop-code 명령어를 실행해 주면 초기 세팅을 해 주게 된다.

Raindrop Code(AI 에이전트)를 사용하여 프로젝트의 초기 구조(Scaffolding)를 생성해 주게 된다. 이 에이전트는 Raindorp 플랫폼에 특화된 에이전트로 Raindrop Framework 기반의 인프라 구축, 배포, 관리를 쉽게 하도록 도와 준다.

이 에이전트는 Raindrop의 내부 아키텍처(Actor, SmartSQL 등)와 워크플로우를 완벽히 이해하고 있기 때문에 초기에 반드시 실행을 해 주어야 한다.

raindrop-code 초기 실행되는 화면

 

그렇게 생성된 백엔드쪽 디렉토리 구조

├── _app                  # 전역 설정 (Auth, CORS 등)
├── api-service           # API 진입점 및 라우팅 (Hono.js)
├── server-manager        # 서버 제어 및 NLP 처리 로직, Vultr API 호출 (Actor)
├── server-task-processor # 비동기 작업 처리 (Observer)
├── shared                # 공통 유틸리티 및 라이브러리
├── user-manager          # 사용자 인증 및 세션 관리 (Actor)
└── websocket             # 실시간 상태 업데이트 처리

 

백엔드쪽은 raindrop 플랫폼을 사용하기 위해서는 계속해서 raindrop-code를 이용해 사용해야 한다. 특이점은 raindrop이외엔 제대로 된 처리를 못한다. 즉, 다른 에이전트 비해 기능이 떨어지니 주의해야 한다. 그래서 다시 에이전트를 사용하라고 한거 같다.

배포시 typescript 오류가 발생하면.. 오류를 무지막지하게 뿜어내니 주의해야 한다.

그래서 이를 보완하기 위해서 claude code를 같이 사용했다.

 

프론트단 구성하기

프론트단은 별거 없이 react+tailwind+vite로 구성했다. UI와 api 연동에 주의해서 구성해야 한다.

특이점은 개발 초기에는 모든 통신을 실시간으로 처리하려 했으나, 보안과 안정성을 위해 역할을 명확히 분리했다.

• 실시간 감시 (WebSocket): 서버가 켜지거나 꺼지는 '상태 변화'는 WebSocket을 통해 즉시 푸시(Push) 받음.
• 제어 및 실행 (REST API): 명령을 내리거나(Command) 외부 Vultr API와 통신하는 작업은 안정적인 HTTP REST API(프록시)를 사용하여 CORS 문제와 보안 이슈를 해결

Command Center라는 이름으로, 채팅창에서 자연어 형태의 명령어를 입력하면 Vultr 서버를 관리할 수 있는 시스템을 만들었다. 

지원하는 명령어는 다음과 같다.

list all servers
start server test-server
stop server test-server
status test-server
details test-server
create server web-server
delete server test-server

솔직히 말하면, 이 명령어들은 정형화된 패턴이다. "자연어 처리"라고 표현하기엔 민망한 수준이고, 단순 문자열 파싱에 가깝다. 실제 AI 기반 NLP를 연동하면 더 유연한 질의 분석이 가능했지만, 외부 api를 구지 연동 시킬 필요가 없을거 같아서 구현은 하지 않았다. 차후 LLM을 연동해서 질의어를 분석하고 적절한 명령으로 변환하는 방식으로 쉽게 개선할 수 있을 것이다.

 

바이브 코딩으로 개발하기

이번 프로젝트는 Raindrop 플랫폼을 사용하기 위해서는 raindrop-code라는 AI 에이전트를 사용할 수 밖에 없었다.

이 에이전트를 사용하지 않고, 플랫폼이 올리는게 가능한지는 모르겠으나 없었으면 무지 복잡하고, 기간이 몇배가 더 소요될 것이 분명했을 것이다. (그래도 Actor 구조 잡고, API 라우팅하고, 기본적인 CRUD 로직 만드는 데는 확실히 도움이 됐다)

다만, raindrop에 특화된 에이전트다 보니, 불편한 점이 많기는 했다. 초기의 cli 에이전트라고 보면 될거 같다.

• 프롬프트 실행 중 취소가 안 된다. 잘못된 방향으로 코드를 생성하기 시작하면 멈출 수가 없다. 종료만 가능
• 세션 간 연계가 없다. 종료 후 다시 시작하면 이전 작업 맥락을 모르니까 처음부터 다시 설명해야 했다.
• 그러다 보니 전체적인 사용 비용이 생각보다 많이 나왔다.

작업 완료후 청구된 비용

$500달러는 지원이 된 상태이기는 했지만, 전체적으로 $1,000달러 이상 나오면서 $500달러 정도를 청구 되었다.

물론 이 비용은 지불하지 않았다. 이정도 비용이 나온다는 것을 보여주기 위한 것이다.

(물론, 초기에 raindrop-code에 익숙하지 않아서 질의어를 난발한 것도 있지만, 비용이 많이 비싸다는 생각이 들었다.)

 

사용된 토큰 양

입력 토큰이 1억개를 넘어서게 되었지만, 출력 토큰은 10만이 되지 않았다. 이는 비정상적인 부분이라고 생각이 되어진다.

이는 매 질문마다 엄청나게 긴 문맥(전체 코드베이스나 로그 파일 등)을 반복해서 전송하고 있을 가능성이 매우 높아 보였다. 내부 구성은 알수 없으니, 더 자세히는 모르겠으나, 이 부분과 가격 부분은 더 나아질거라 생각이 된다.

(현재는 약간 초기-베타 버전이라는 그런것으로 보여진다.)

 

 

가장 힘들었던 부분: Proxy

개발 과정에서 가장 많은 시간을 잡아먹은 건 HTTPS 프록시 구성이었다. Raindrop에서 배포한 API 서버에 도메인을 붙이지 않아서 HTTPS 접근이 안 됐다. 브라우저에서 HTTP 엔드포인트를 직접 호출하면 Mixed Content 에러가 발생하고, 모바일에서는 아예 연결이 안 됐다. 결국 Vercel에 프록시 서버를 하나 더 만들어서 우회했다.

 

Cloudflare Workers 환경(Raindrop)에서 Vultr API를 호출할 때 CORS 문제와 보안 이슈로 보였다. 그래서 이중 프록시 구조가 된 셈이다. 그러면서 당연히 응답 속도는 느려졌고, 실 사용시에는 도메인을 장착하면 되기에 구지 이중 proxy로 구성할 필요는 없을거 같다.

그래서 영상에서 데모 시연시 Vultr API 호출 시에도 네트워크 에러가 종종 발생하니, 이 부분을 감안해 주기 바란다.

 

포인트: 결과를 음성으로 알려주기

서버를 제어하고 난뒤에 결과를 단순 텍스트를 알려주는데서 끝나지 않고, 백엔드의 VoiceService는 이 텍스트를 ElevenLabs API로 전송하여 음성 합성을 요청하고, 응답으로 받은 바이너리 오디오 데이터를 웹 브라우저로 전송하기 위해 Base64 문자열로 변환해서, 마지막으로 프론트엔드가 이 문자열을 넘겨받아 브라우저의 오디오 객체를 통해 즉시 재생함으로써, 사용자는 화면을 보지 않고도 AI 비서가 직접 보고하는 듯한 생생한 음성 피드백을 주도록 구성해 보았다.

아.. 관리자 설정에 의해 원하는 음성으로 출력이 되게 구성은 해 두었다.

 

말은 거창하기는 한데, 실제 보면 심플하게 구성되었다. 하지만 이런 구성도 가능하다는 것을 보여주기 위해서 구성한 것이지만, 확장시키면 괜찮은 기능이 될 수도 있을것이다.

 

보다 자세한 것은 동영상을 보면 이해가 가능할 것이다.

(이 음성이 뒤에서는 영상이랑 맞지 않는 부분이 발생하는데, 이는 영상 편집 실수이니 이해해 주시면 감사하겠습니다.)

 

 

마무리

실제 서비스를 하기에는 다소 무리가 있는 프로젝트이기는 하나, MVP로는 기본 기능에 충실히 만든다고 만들었다.

대시보드에서 제어도 가능하고, 채팅창에서 서버 생성하고 시작/정지/삭제도 가능하고, audit logs로 해당 서버의 기록을 확인 할수도 있다.

 

다만 이게 실제 프로덕션에서 쓸 수 있는 수준이냐고 하면 당연히 아니다. 정형화된 명령어만 인식하고, 에러 핸들링도 부족하고, 프록시 구조도 지저분하다.

그래도 Raindrop이라는 새로운 플랫폼을 경험해보고, AI 코딩 도구로 빠르게 프로토타입을 만드는 과정을 체험한 건 의미가 있었다. 특히 Actor 모델 기반 서버리스 아키텍처는 개념이 흥미로웠다.

 

이 프로젝트는 서버 인프라 관리 용도로 구성된 것이라, API 키 관리나 보안 설정 부분을 정리하지 않은 상태에서 코드를 공개하기 어렵다. 차후 민감 정보를 분리하고 구조를 정리한 뒤 GitHub에 오픈할 예정이다.

다시 자세한 것은 영상을 참조해 주기 바란다.

https://youtu.be/7-zsKW6YMDc

 

관련 사이트

LiquidMetal AI : https://liquidmetal.ai/
Vultr : https://www.vultr.com/
Elevenlabs : https://elevenlabs.io/
데모 영상 : https://youtu.be/7-zsKW6YMDc

---

 

MVP 수준의 프로젝트라 글로 남길까 고민했지만, 기록 차원에서 작성했습니다.

내용만 보면 대단한 건 없습니다. 다만 확장성을 고려해 제대로 구성하면 충분히 서비스화할 수 있다고 봅니다.

평소에 AWS의 복잡한 설정에 익숙해지면 세밀한 구성이 가능하지만, 반대로 심플하게 비용과 서버를 제어할 수 있는 관제 시스템도 필요하지 않을까 하는 생각을 해왔습니다.

 

이번 프로젝트가 그 아이디어를 직접 구현해볼 기회가 되었습니다. Raindrop은 아직 초기 단계라 아쉬운 부분도 있지만, 앞으로 기능과 안정성이 보완될 것으로 기대합니다.

Serverless 백엔드 플랫폼에 관심 있으신 분들은 한 번 살펴보셔도 좋을 것 같습니다.

 

그럼 즐거운 코딩 되시기 바라겠습니다.

끝.