소개
원래는 n8n을 셀프 호스팅하기 위해 미니PC를 하나 구매했습니다. 네트워크나 이런 클라우드 환경 세팅에 대해서는 전혀 지식이 없는데 커뮤니티에서 우연히 특가로 나왔다는 걸 보고 충동적으로 덜컥 구매 해버렸습니다.
제가 산 제품은 아닌데 그냥 이해를 돕기 위해... 크기는 굉장히 작습니다. 가로 세로 12~13cm정도? 미니 PC의 장점은 전력 소비량이 적어서 24시간 켜두어도 전기세가 별로 나오지 않는다고 합니다. 그래서 24시간 돌아가는 로컬 서버로 쓰는 거겠죠?
원래는 n8n 세팅 일단 하고 뭐에 쓸까는 고민 중이었는데 스터디에서
'MSA라는게 있는데...react..qdrant...'진짜 대충 이렇게만 알아들었습니다. 일단 메모해뒀다가 GPT와 대화를 시작합니다.
진행 방법
MSA에 대해
반대되는 개념은 Monolith 아키텍쳐 입니다. 한 군데에서 전부 하지 않고 분산해서 관리하는 방식이군요.
기능 기반 분류
User Service: 사용자 관리 (가입, 인증 등)
Order Service: 주문 관리
Inventory Service: 재고 관리
Payment Service: 결제 처리
Notification Service: 이메일/SMS 등 알림
이렇게 도메인 중심의 분리를 할 수도 있고 기술적 역할로 분류할 수도 있다 합니다.
장점과 단점
장점
독립적으로 개발가능
장애 격리(한 서비스 문제 발생 시 전체 다운 방지)
단점
서비스 간 통신 복잡성 증가 (예: 네트워크 지연, 장애 대응)
운영 및 모니터링 복잡도 증가
일단 이해한 건 주식 투자에서 한 바구니에 계란 다 담지 말라고 하는 것처럼 분산해서 리스크를 줄이는 건가봐요.
이거 왜 권하셨을까?
뭔지는 알겠는데 왜 이걸 세팅해보라고 권하셨을까요? 그래서 GPT에게 물어봤습니다.
현대 AI 시스템의 핵심은 MSA + 벡터 검색 + LLM
미니PC = 로컬 서버 = 실험 환경 구성에 적합
Qdrant는 자체 호스팅 가능하고 러스트로 작성되어 고성능
MSA 방식은 향후 실무나 사이드 프로젝트에 매우 유리
MSA로 실험한다는 것 = 서비스들을 역할별로 나누고 독립적으로 배포해보는 것
아직 감은 안잡히는데 결국 어떤 프로덕트를 배포하는데 필요한 개 념이나 방법을 알아보는 거구나 정도로 이해했습니다.
(사실 그래도 못 알아들어서 중학생 수준으로 끌어내려서 이해)
그럼 Qdrant는 뭐야?
보통 우리가 "단어"로 검색하잖아?그런데 Qdrant는 “뜻이 비슷한 걸 찾아주는 검색기계”야.“귀여운 동물”이라고 검색하면, 고양이, 강아지, 팬더 사진을 찾아줌(단어가 똑같진 않아도, 의미가 비슷하니까)qdrant는 벡터 데이터베이스라고 하는 신기한 것이었군요. RAG로 가는 길이었나 봅니다.
아하! AI시스템을 만들어보는 거군요. GPT가 쉬운 예시로 "간단 챗봇+ Qdrant검색기"를 알려준대서 해보기로 합니다.
미니 PC에 Virtual Machine(VM)만들기
proxmox라는 미니PC관리 프로그램이라고 100,101,102,103이 생성한 VM입니다.
그 증 playground에는 qdrant를, React에는 react를 설치했습니다. 이러면 장점은 VM하나가 문제가 생겨도 그 부분만 고치면 되고 다른 기능들은 정상 작동하겠죠?
그런데 다른 VM간에 연결은?
분리 되는 건 좋은데 이러면 IP주소도 달라지고 뭔가 가상이지만 다른 컴퓨터에 있는 건데 연결이 쉬울까?해서 물어봤습니다. 세팅 하면 된다는 군요.
그리고 결국 같은 내부 네트워크 안이라서 그리 어렵지도 않고요.
Qdrant와 예를 들어 React같은 프론트엔드를 다른 VM에서 실행 시키는 것의 다른 장점이 있어?
좋은 건 알겠는데 이게 그냥 기술 지식에 대한 탐구가 끝이면 안되겠죠?
제가 즐겨보는 코딩애플님의 진격의 거인 설명법 영상의 한 부분입니다.
qdrant는 DB이고 외부에서 직접 접근하면 난리 날 수 있으니까 private한 VM에 분리하고 React는 프론트엔드니까 외부에 열어야겠죠?React가 있는 VM은 클라우드 플레어 같은 거 써서 외부로 열어줍니다. 그러면 좀 더 안전하겠...죠? 저는 그렇게 이해했습니다.
구현은 성공. 따라하면 되니까요. 그래도 클로드코드로 하는 바이브 코딩하고 다르게 뭐를 해야하는지 묻고 실행은 직접 해봤는데 명령어 몇 가지를 외우게 되서 그냥 기분이 좋습니다ㅎㅎ
왼쪽 위 터미널이 qdrant VM터미널, 왼쪽 아래 터미널이 React VM터미널 입니다. 오른쪽은 메인컴퓨터의 웹 화면이고요.
내부 네트워크 안이지만 세개의 다른 IP가 상호작용해서 어떤 결과를 나오도록 한다는게 재밌었습니다.
벡터 데이터베이스?
여기까지 구현하고 위에서 GPT가 설명해줬던 내용들을 다시 읽어보니 좀 더 이해가 잘 됩니다.
qdrant는 벡터 데이터베이스이고 뜻이 비슷한 걸 찾아준다고 했었죠. 몇 가지 질문을 해봅니다.
일단 배경이 될 지식은 아래처럼 아주 간단한 걸 넣어줬습니다.
그리고 이걸 정말 참고할까 하고 몇 가지 질문을 해봤습니다.
사전 지식의 내용을 참고해서 이야기 해주네요. RAG를 살짝 맛을 본 기분입니다.
문서에 없는 일반 지식에 대한 내용도 답변해주고요.
qdrant에 대한 지식이 없는게 아쉽지만 이렇게 짜준 코드 넣으니까 RAG 맛을 또 좀 보여줘서 재밌었습니다.
여기서 더 공부하면 chunking이라던지 임베딩, Top_p 등등 배워서 RAG도 세팅할 수 있겠죠?해봐야 할 것들이 참 많네요.
결과와 배운 점
이것저것 더 많이 해보고 싶은 것들이 있는데 생각만큼 못해서 아쉽습니다. 비지니스 탭에 올릴 건데 너무 비지니스 이야기가 없어서 첨언하자면, 요즘 어떤 서비스를 만들까 고민이 많습니다.
처음 만든 어플리케이션이 지금 제대로 활용이 안되고 있거든요. 왜 사용을 못하고 있는지는 너무 눈에 보이는 이유이고, 내가 무엇을 만드는가 보다 사용할 사람들이 있는 지가 더 중요하다는 반성을 하고 있습니다.
지난 주에 클로드 코드 서브 에이전트 기능도 추가되었고 vooster도 더 업데이트 된 거 같고 코드 래빗도 써보고 싶고 RAG세팅도 해보고 싶은데 그러면서 아이템 고민도 하느라 이래저래 쉴 틈이 없는 것 같습니다.
추가
원래는 이렇게 마무리 하려고 했는데, 같은 스터디의 원혁님이 멀티에이전트에 대한 굉장한 성과 사례글을 올려주 셔서 자극을 받았습니다. 그냥 공부 좀 했다 정도의 사례글로는 너무 수준이 뒤쳐지는 것 같아서요. 그래서 급하게 바이브 코딩으로 MVP를 하루 동안 만들었습니다. 그 과정을 대충 스크린 샷으로만 추가하고 발표 때 스크린 샷 보면서 러프하게 설명하고 끝내려고 했는데요.
...덜컥 베스트 사례에 선정되어 버렸네요. 4주차에 좋은 글들이 참 많았습니다. 저에게 자극을 주신 원혁님의 멀티에이전트 프로젝트 개발부터, 첫 참여에 바이브 코딩으로 MVP를 뽑아낸 굇수분들이 많아서 제가 왜 베스트지라는 의구심이 아직도 있지만 뽑아주셨으니까 좀 더 베스트 발표에 성의를 더하기로 했습니다.
비개발자의 바이브 코딩에 대한 느낌
배휘동님의 슬라이드에서 가져온 내용입니다.
구현에서 병목이 바이브 코딩으로 많이 줄어들었고 이제 설계, 운영에 더 신경을 쓸 수 있게 되었다고 합니다. 많은 분들이 바이브코딩으로 만들면 나중에 유지, 보수할 때 많이 어려워 질 거라고 하시더라구요. 하지만 어쨌든 좋은 아이디어와 기획으로 제품을 만들고 사용자가 유입이 되어야 유지, 보수라는 문제를 마주할 수도 있는 거니까...
저는 16기 에창패에도 참여했었고 이번 17기까지 오는 동안 총 3개의 MVP...비슷한 걸 만들었습니다. 물론 아직까지 실사용자가 있는 서비스는 하나도 없어서 내세울만한 건 아닌데요.
그래도 계속 낚싯대를 드리우다보면 뭔가 걸리지 않을까라고 생각하면서 낚싯대 던지는 공부를 열심히 하고 있습니다.
Vooster ai
4주 스터디 하는 동안에도 계속해서 업데이트된 멋진 툴입니다. CTO 방 버디였던 커서맛피아님이 만드신 건데요. PRD(Product Requirement Document)를 아주 잘 만들어 줍니다. 그리고 그 외에도 바이 브코딩에 필요한 rules, TRD 문서도 아주 잘 만들어 줍니다.
그리고 바이브 코딩할때 커서 agent든 클로드 코드든 PRD 문서 하나만 주고 알아서 만들어 내라 하면 막막하잔아요. 보통 task라는 todo 같은걸 여러개 만들어서 전체적인 계획을 짜고 개발하는 방법도 있다고 하는데(비개발자라서 잘 모름) 위 이미지 처럼 task도 저렇게 잘 쪼개줍니다. 여러 개발자 분들의 바이브 코딩에 대한 강의에서 vooster가 자주 등장하고 저 task 기능도 유용하게 활용하고 계시다고 하니 저희도 믿고 쓰면 될 것 같습니다.
사용자 여정이라는 것도 얼마전에 업데이트 되었습니다. 이건 UX영역에 들어갈까요? 아무튼 이런 이런저런 내용들을 미리 만들고 ai agent에게 주는 걸 context engineering이라고 하는 것 같습니다. 요즘은 워낙 새로 나오는 개념도 많고 해서 따라가기가 버겁긴 해요.
클로드 코드나 커서로 바이브 코딩을 하다보면 허가를 많이 구합니다. 어느 정도 권한을 주면 좀 덜 물어보지만 그래도 아주 중요한 것들은 여전히 물어보죠. 하지만 위 이미지 가장 아래쪽에 'Bypassing Permissions'라는 문구가 보이시나요?
네, 클로드는 터미널에서 claude --dangerously-skip-permissions라는 명령어로 실행을 하면 중간에 허가를 구하는 걸 생략할 수 있습니다. 위험하지 않냐고요? 당연히 위험하죠.
하지만 한번 써보면 그렇게 편할 수가 없습니다. agent에게 작업을 시켜두고 무슨 일을 하는지 보고 계신다면 사용하면 안되고, 사실 저도 코드는 볼 줄 모르지만 중간 중간 논리적으로 말도 안되는 작업을 agent가 수행하고 있어서 중단 시키기도 합니다.
...그래도 정말 바쁠 땐 중간에 작업이 멈춰져 있어서 답답할 때 활용하면 좋을 것 같습니다. 저는 기능 구현 시켜 놓고 빨래 정리했거든요. 충분히 바쁘고 중요한 이유죠.
클로드 코드는 최근 업데이 트에서 서브 에이전트라는 기능을 추가했습니다. 저렇게 여러가지 마치 페르소나 같은 설정을 미리 해두고 작업 시 적절한 에이전트를 호출할 수 있습니다. 이 업데이트가 아직 2주가 안된 걸로 알고 있습니다. 바이브 코딩 쪽은 지금 핫해서 새로운 기능 추가도 빠르고 유능한 개발자분들이 더 쉽고 더 정확하게 원하는 결과를 얻는 방법을 유튜브로 계속 올려주시고 있어서요. 공부하는 재미가 있습니다.
보라색으로 backend-architext라고 되어 있는게 저 agent를 지금 사용해서 작업한다는 표시입니다.
바이브 코딩에 유용한 mcp들도 설치했습니다. context7은 최신 코딩 문법 확인, playwright는 웹페이지 크롤링, supabase 는 DB에 연결, vooster-ai는 vooster웹페이지와 연동해서 작업할 때 사용됩니다. serena라는 유용한 mcp도 있다는데 아직 적용해보진 못했습니다.
바이브 코딩을 한다면 깃과 깃허브를(둘은 다릅니다.) 꼭 활용 하시는게 좋을 것 같습니다. 요즘 뭔가 이쪽을 공부하다보면 만나게 되는 두 장벽이 깃이랑 도커 아닐까(+터미널) 싶습니다. 얘들만 등장하면 뭔가 움츠러 들죠.
깃은 정말 쉽습니다. 그냥 게임에서 세이브, 로드 같은 거에요. 내가 만든 코드 중간 저장하고 바이브 코딩으로 시키다가 문제가 생기면 저장한 시점(커밋한 시점)으로 되돌릴 수 있습니다. 로컬에서 이렇게 중간 저장하는 걸 깃 커밋이라고 합니다. 그리고 이 코드를 깃허브라는 사이트에 올려서 클라우드에 저장하는 걸 깃 허브에 푸시한다고 하지요.
전혀 어렵지 않습니다. 원래는 커밋하고 푸시하는 명령어 같은 것들도 있는데 공부하면 금방이지만 어려우면 그냥 클로드 코드나 커서한테 해달라고 하면 됩니다. 로컬에서 커밋한 깃을 깃허브에 올리는 것도 그냥 내 깃허브 아이디 전해주고 올려라고 하면 다 올려주니까 편하게 도전해보시면 좋을 것 같아요.
깃 허브에 올리면 좋은게 저런 내 코드를 리뷰해주는 기능들이 있어서 코드에 문제가 없는지 검토도 해줍니다. 그리고 웹에 배포하기도 편해요. vercel이라는 사이트에서 깃허브와 연동이 되어 있어서 깃허브에 올려둔 내 프로젝트를 바로 가져와서 웹에 배포해주기도 합니다.
coderabbit이라는 서비스도 있습니다. 내 코드들을 보고 뭐가 문제인지를 ai가(!)검토해서 이런 걸 고치면 좋겠다고 알려줍니다. 그리고 깃허브에 코드를 수정해서 올릴 때 마다 변경사항들을 검토해서 지속적으로 수정이 필요한 걸 알려주고요.
개발자 분들이라면 이걸 읽어보고 적절하게 수정할 수 있겠지만 비개발자인 저는 그런거 못하잔아요?정말 멋진 서비스인건 이미지 가장 아래쪽에 보면 'prompt for AI agents'라는 항목이 보이실 겁니다. 이 프롬프트 그대로 붙여넣기 하면 클로드 코드든 커서든 ai agent가 고쳐줄겁니다...라는 기능입니다. 바이브로 ai에게 코딩을 시키고 그 코딩한 걸 ai에게 리뷰도 시키고 그 리뷰를 전달할 프롬프트도 ai가 짜주고 그 프롬프트로 디버깅도 ai가 하고.
아직은 완벽하지 않지만 이런 기능들이 계속 개발되고 있다는게 중요할 것 같습니다.
내 코드를 체크해주는 친구들이 모두 통과 도장을 찍어준 화면입니다. 기분이 좋아요 ㅎㅎ
그래서 하루만에 만들어낸 앱 화면입니다. ui까지 신경쓸 시간이 없어서 따로 건들진 않았고 적당히 구현되어 있습니다.
중간에 갑자기 vooster mcp가 작동을 안해서 그냥 내용 쭉 복사 붙여넣기 한 다음 알아서 검토하고 아직 구현 안된 거 검토하라고 했습니다. 잘 해줍니다.
아직 완벽하게는 기능하지 않지만 하루만에 만든 mvp치고는 괜찮죠. 과거 mvp만들 때 걸리는 시간 생각하면 훨씬 시간이 단축될 것 같습니다.
