Loading...

바이브코딩

텍스트 기반 MUD 게임으로 구현한 ‘AI 플랫폼 체험 페이지’ 제작기

페이지 정보

작성자 바이브입니다만
작성일 2025.10.14 01:52
296 조회
1 추천
0 비추천

본문

AI 도구 Claude

바이브 코딩에서 가장 핫한 플랫픔을 꼽는다면 Bmad-method라는 AI 에이전트 플랫폼입니다. 

여러 에이전트들이 각 업무별로 각기 역활을 수행하면서  소크라테스의 꼬리에 꼬리를 무는 문답식 대화로 바이브 코딩을 가장 정교하게 만들어 줍니다. 

개발자로서 이 플랫폼 구조의 잠재력을 누구보다 잘 알고 있었지만, 동시에 이런 생각이 들었습니다.

“비개발직군 동료들은 이 환경을 얼마나 쉽게 경험할 수 있을까?”

터미널 환경은 본질적으로 개발자 친화적인 도구입니다. 클라이언트 설치, 명령어 입력, 단계별 탐색 등은 익숙하지 않은 사용자에게 높은 진입장벽이 됩니다. 그래서 고민했습니다.

“복잡한 학습을 별도의 설치 없이 실제 동작되는 것처럼 재미있는 체험으로 바꾸면 어떨까?”

아이디어의 출발: ‘MUD 게임’에서 얻은 영감

어릴 적 즐기던 MUD 게임은 그래픽이 아닌 텍스트만으로도 몰입감 있는 탐험을 가능하게 했습니다.  
그 단순함이 오히려 MCP의 복잡한 환경을 체험하기에 딱 맞았습니다.
터미널처럼 명령어를 입력하고 실제 해당 플랫폼과 유사하게 AI가 답변을 주는 구조 — 이것이 바로 실제 구현한 체험 방식입니다.
[이미지는 추억의 머드게임중 하나]
 

1c14f1b1c03f6c44fd37ee13176f28751bgH.png


게임의 핵심은 해당 플랫폼의 개발자가 소개한 영상의 내용대로 BMAD-METHOD 의 구조를 그대로 가져오는 것이었습니다.
이 방식은 AI 에이전트들이 각각의 역할을 수행하며 사용자의 목표 달성을 돕는 구조입니다.
 


제작 과정: “AI로 AI 체험을 만든다”

실제 구현은 몇 시간 만에 완료되었습니다.
핵심은 AI 도구를 활용한 빠른 프로토타이핑이었습니다.

- YouTube 자막 추출 – BMAD 개발 영상 자막을 기반으로 시나리오 구성

- Google AI Studio – URL Context Tool로 블로그 콘텐츠 분석

- Claude – PRD(게임 기획서) 자동 생성 및 대화 시나리오 생성

️- 웹 제작 – 텍스트 기반 인터랙션 페이지로 구현

결과적으로 단 실제처럼 동작하는 MUD형 웹 체험 페이지를 완성했습니다.

체험 페이지:  UX RESEARCH MUD GAME

UX 설계: “명령어 대신 선택지를”

비개발자에게 친숙한 방식으로 접근하기 위해 ‘프롬프트 입력’과 ‘선택형 여정’을 결합했습니다.

프롬프트 입력: MCP 환경처럼 명령어를 직접 입력해보며 경험

선택형 여정: 선택지를 따라 자연스럽게 에이전트와 대화

미션 구조화: ‘메인 퀘스트 + 서브 퀘스트’로 단계적 학습 설계

예를 들어,

“시장 데이터 분석” 미션 → “Mary와 브레인스토밍 시작하기”
사용자는 이를 통해 자연스럽게 AI와 협업하며 Bmad의 가상 워크플로를 체험합니다.

기대 효과: “학습에서 실제 호기심있는 탐험으로”

비개발직군에게 AI 플랫폼은 여전히 낯선 기술일 수 있습니다.
하지만 ‘게임’이라는 포맷은 그 거리감을 확실히 줄여줍니다.
실제 이것을 통해 다른 비개발직군들이 사용후 문의가 늘어나는 효과가 생겼습니다.
 

e0271f08bd8a936e6cf6faf214153d618Vsn.png

비개발직군이 이 해당 체험 서비스를 통해 처음 만나는 순간이 ‘재미’와 ‘탐험’으로 기억된다면,
그 자체로 이미 성공입니다.

“터미널 환경에 NPM을 설치하여 이런 저런 설명하는 과정보다 사전이 미리  시작해볼수 있는 즐거운 경험을 주는것 ”
이것이  체험 페이지의 진짜 목표입니다.

배를 만들고 싶다면,
사람들이 나무를 모으고 일을 분담하게 시키는 대신
사람들이 넓고 끝없는 바다를 동경하게 하라.
- <어린왕자, 생텍쥐페리>

 

댓글 0
전체 36 / 1 페이지
홈으로 전체메뉴 마이메뉴 새글/새댓글
전체 검색
회원가입