# MGX.dev로 바이브코딩 미완성 기록

![SRC From: https://x.com/MetaGPT_/status/1901634631008493599](https://upload.cafenono.com/image/slashpagePost/20250606/230002_nrXQccHJ4j08fHM2c7?q=80&s=1280x180&t=outside&f=webp)

> 본 글은 작업 중 GPT와 채팅을 통해 기록된 내용을 기반으로 정리된 글 입니다.

웹 서비스를 처음부터 혼자 만들려는 시도는 언제나 흥미롭지만, 동시에 복잡하고 번거로운 작업이기도 합니다. 특히 프론트엔드, 백엔드, 인프라 등 다양한 기술 스택을 모두 직접 다뤄야 한다는 점에서, 개인 개발자나 초기 기획자에게는 높은 진입장벽이 존재합니다. 이러한 고민 속에서 최근 발견한 플랫폼이 바로 MGX.dev입니다. 이곳에서는 AI 기반 멀티 에이전트들이 실제 팀처럼 역할을 분담해 사용자의 요청에 따라 웹 서비스를 개발해 줍니다. 덕분에 기획에서 설계, 구현에 이르기까지 한결 수월하게 접근할 수 있었습니다.

이번 글에서는 제가 MGX.dev를 통해 시도한 프로젝트의 개요와 개발 과정, 그리고 느낀 점을 간단히 공유해 보겠습니다.

---

## 프로젝트 개요

제가 기획한 서비스는 다음과 같은 목표를 가지고 있습니다.

**_"인사이트를 얻을 수 있는 아티클 기반의 RSS 피드 큐레이션 서비스"_**

- 신뢰할 수 있는 블로그 및 뉴스 소스를 직접 큐레이션

- LLM을 활용해 각 콘텐츠의 핵심을 한국어와 영어로 3줄 요약

- 주요 내용을 항목 중심의 핵심정리 형태로 제공

- 자동 번역을 통해 언어의 장벽을 낮춤

- 사용자의 비판적 사고와 주체적인 판단을 돕는 정보 제공

이 프로젝트는 기본적인 RSS 리더에 AI 요약 기능과 언어 번역 기능을 결합한 형태로, 정보 과잉 시대 속에서 사용자가 빠르게 핵심만 파악하고 선택할 수 있도록 돕는 데 중점을 두고 있습니다.

## 핵심 기능 정의

버전 0.1 기준으로 다음과 같은 주요 기능을 설정했습니다:

- RSS 수집: 특정 웹사이트에서 RSS를 수집

- 저장 및 처리: 수집한 피드를 데이터베이스에 저장

- LLM 요약: 각 피드에 대해 한국어/영어 3줄 요약 및 핵심정리 생성

- 소스 분석: 소스 웹사이트에 대한 요약 설명 제공

- 최신 상태 유지: 사용자가 페이지를 열 때 항상 최신 피드 반영

이러한 기능을 바탕으로, 기본적인 웹 페이지 구조와 UI/UX 요소도 다음과 같이 설계했습니다:

- 홈(Home): 피드를 카드뷰 형태로 나열 (썸네일, 제목, 요약 등 포함)

- 소스(Source): 각 소스 사이트별 카드 구성 및 통계 제공

- 계정(Account): 로그인, 프로필 이미지 설정, 언어 선택 기능 등

- 상세 페이지: 피드 또는 소스의 세부 정보를 보기 위한 개별 페이지 구성

- 프롬프트 예시는 다음과 같이 명확하게 정의해 두었습니다:

- 3줄 요약: 글의 핵심 주장을 3줄로 요약

- 핵심정리: 주장 중심의 구조화된 내용 요약

- 소스 분석: 작성자 및 아티클 성향 분석 제공

## MGX.dev의 AI 팀 구성

MGX.dev는 마치 실제 팀처럼 구성된 AI 에이전트들이 사용자 입력에 반응해 작업을 수행합니다. 저의 경우에는 세 명(마지막 2명은 구경도 못했음)의 에이전트가 참여했습니다:

- Mike: 프로젝트 팀장으로 전체 흐름과 전략을 조율

- Emma: 제품 기획자로 서비스 구조와 화면 구성을 기획

- Bob: 아키텍트로 기술적 구조 설계를 담당

- Alex: 엔지니어로 구현 담당(출현하자마자 종료)

- David: 데이터분석가로 데이터 구조 설계 및 구성 담당(구경 못함)

이러한 협업은 별도의 도구 설치나 코드 작성 없이 채팅창에서만 이루어졌으며, 대화가 진행될수록 점차 고도화된 결과물을 만들어 주는 점이 인상적이었습니다.

**MGX.dev 간단 소개**

> MGX.dev는 AI 멀티 에이전트를 기반으로 다양한 디지털 결과물을 제작할 수 있는 웹 플랫폼입니다. 
> 사용자는 단순한 텍스트 명령만으로도 웹사이트, 앱 프로토타입, 블로그 등을 만들 수 있습니다. 팀장, 기획자, 아키텍트 등 역할을 가진 AI 에이전트들이 협업하여 프로젝트를 수행합니다. 반응형 웹 구현, 기존 결과물 리믹스, 즉시 배포 기능까지 지원합니다.
> 

참고: [https://g.co/gemini/share/dc45282d6e68](https://g.co/gemini/share/dc45282d6e68)

## 작업내용

### A.구현리딩

![Image](https://upload.cafenono.com/image/slashpagePost/20250606/225413_Writ5EFAqgw5Obz46W?q=80&s=1280x180&t=outside&f=webp)

Mike (Team Leader)는 전체 프로젝트를 관리함과 동시에 주요 기능 구현을 주도하였다. 그는 React, JavaScript 및 Tailwind CSS를 활용하여 웹 애플리케이션을 개발하고 있으며, 다음과 같은 페이지를 포함하고 있다:

- 홈(Home), 소스(Source), 계정(Account) 페이지

- 레이아웃은 Substack 스타일, 카드 뷰는 Poudr.site와 유사한 형식

- RSS 피드 수집, LLM 요약 처리, 사용자 계정 기능을 포함

### B.기획 및 분석

Emma (Product Manager)는 사용자 요구사항을 바탕으로 서비스의 전반적인 기획을 담당하였으며, 그 결과물로 Product Requirement Document (PRD)를 작성하였다. 해당 문서는 다음과 같은 내용을 포함한다:

- 프로젝트 정보 및 개요 (project_info)

- 제품 목표 및 기능 정의 (product_definition)

- 주요 사용자 페르소나와 사용자 시나리오 (user_stories)

- 경쟁 서비스에 대한 벤치마킹 분석 (competitive_analysis)

PRD 문서에서 정의된 핵심 목표는 다음과 같다:

- 사용자가 시간을 절약하며 신속하게 핵심 정보를 파악할 수 있도록 LLM 기반 요약 제공

- 다국어 번역 기능을 통해 글로벌 콘텐츠 접근성 향상

- 콘텐츠 신뢰도와 다양성을 고려한 큐레이션 소스 구성

Emma의 기획 문서는 docs/prd.json 경로에 버전 정보(0.1)와 함께 시스템 개발의 기준 문서로 등록되었으며, 전체 개발 흐름을 구조화하는 데 중요한 역할을 수행하였다.

### C.시스템 설계

![Image](https://upload.cafenono.com/image/slashpagePost/20250606/225653_9WcXAD9UPncCdkvRUB?q=80&s=1280x180&t=outside&f=webp)

Bob (Architect)는 RSS 피드 서비스 전반의 시스템 아키텍처를 설계하였다. 그는 프론트엔드, 백엔드, 데이터베이스 계층을 포함한 전체 흐름을 시퀀스 다이어그램으로 시각화하였으며, 이 다이어그램은 다음과 같은 주요 상호작용을 포함한다:

- 사용자 요청에 따른 최신 피드 조회 (getLatestFeeds())

- 개별 피드 상세 조회 및 조회수 증가 처리 (getFeedById(), incrementViewCount())

- 소스 목록 및 상세 정보 조회 기능 (getAllSources(), getSourceById())

시퀀스 다이어그램 파일은 insight_rss_sequence_diagram.mermaid로 등록되었으며, 각 API 컨트롤러의 역할과 DB 간 인터랙션이 명확히 도식화되어 있다. 이는 개발자가 기능을 구현함에 있어 참조할 수 있는 기술적 기준으로 활용된다.

---

## MGX.dev 사용 후기

초기에는 Replit을 사용할 예정이었으나, 무료 플랜 한도를 초과하여 MGX.dev를 먼저 체험하게 되었습니다. MGX는 명확한 프롬프트와 구조화된 요청만 있다면 꽤 빠르고 직관적으로 결과물을 제공해줍니다. 특히 LLM 기능이 포함된 서비스를 만들기에는 적절한 가이드와 기능을 갖추고 있다고 느꼈습니다.

다만, 실제로 여러 기능을 추가하고 반복 작업을 진행하다 보니 무료 크레딧이 빠르게 소진되었고, 유료 전환이 사실상 필수라는 점은 아쉬움으로 남았습니다. 특히 Product Hunt 등의 리뷰에서도 ‘비용’에 대한 피드백이 몇 번 언급되는 것을 보면, 빠른 크레딧 소진이 아쉬운 점이라고 생각됩니다.

---

## 마무리하며

이번 MGX.dev 체험은, 혼자서는 시간이 오래 걸릴 수밖에 없는 개발 과정을 AI 팀과 함께 빠르게 압축해서 진행해볼 수 있는 좋은 기회였습니다. 시각적으로 에이전트 페르소나를 구분해서 보여주는 점은 UX관점에서 흥미롭게 볼 수 있습니다. 완성도를 판단하기엔 너무 짧은 사용기였지만 결제를 해서 작업해보고 싶은 마음이 들기에는 충분했습니다.(Replit을 먼저 사용해 볼 예정) 다음 기회에 유료 결제를 통해 프로젝트를 완성한 리뷰를 작성해보겠습니다.

For the site tree, see the [root Markdown](https://slashpage.com/dogma13.md).