소개
[사용자 흐름]
ChatGPT k-saju 앱 진입 → 생년월일 태어난 시간 입력 → 사주 팔자 설명 → 좋은 궁합 → 좋은 궁합 아이돌 추천
Widget 1: 사주 입력
├─ 생년월일 Form (Date Picker)
├─ 시간 입력 (Optional, Progressive Disclosure)
├─ [계산하기] CTA Button
└─ 로딩 애니메이션 (500-800ms)
Widget 2: 궁합 결과
├─ Top 3 아 이돌 카드 (Vertical Stack)
│ ├─ 아이돌 사진 (120x120 원형)
│ ├─ 궁합 점수 (Circular Progress, Gold/Silver/Bronze)
│ ├─ 궁합 설명 (2-3문장)
│ └─ [자세히 보기] 링크 → Web App
├─ 공유하기 버튼 (Instagram Story, KakaoTalk)
└─ [다시 하기] Secondary Button
만세력 계산 참조: https://mzsaju.co.kr
ChatGPT GPTs 참조: https://chatgpt.com/g/g-687c9dd4d86c8191928e2385452f8763-2026nyeon-saju-mz-unse-yojeum-saju-haeseog-oneulyi-unse-gunghab-hwagin-hyeondaehwa-haeseog-wanryo[실제 서버 흐름]
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
ChatGPT
바이브코딩 툴: Claude Code, Gemini, Codex
배포 플랫폼: Railway
Railway 선택 이유
MCP 서버 특성 때문입니다.
- Vercel/Edge는 장기 SSE·웹소켓, 백그라운드 워커, 커스텀 포트가 어려운데, MCP 서버는 SSE/장기 연결과 Node 22 런타임, 커스텀 환경변수가 필요한 상태라 컨테이너형 호스팅이 적합했습니다.
- Railway는 컨테이너 기반으로 포트 8080, Node 22, Redis/Supabase/Qdrant 같은 외부 의존성 연결을 쉽게 설정할 수 있고, 비용도 월 $5 수준으로 가벼운 편이라 프로토타입→프로덕션 초기 단계에 맞았습니다.
- CI/CD도 깃 연동으로 단순하며, 긴급 시 환경변수/플래그만 바꿔 재배포(롤백)하기 쉬운 점도 선택 요인이었습니다.
소스 연동: GitHub 리포지토리, Docker 이미지
[11월 24일 진행 상황]
ChatGPT 커넥터 연결을 못하고 있었는데, 드디어 제 서비스 도메인과 연결을 성공 하였고 테스트로 echo 라는 Widget 기능이 출력 되는지 확인 하였습니다.
[11월 26일 진행 상황]
앞으로 해야 할 일.
Widget UI 위젯 만들기
결과와 배운 점
MCP Build 프로세스 이해
Widget UI 위젯에 대한 이해
Widget MCP Model Context Protocol (MCP)의 확장 기능으로, AI 모델(특히 LLM)이 텍스트 응답을 넘어 대화형 사용자 인터페이스(UI) 위젯을 생성하고 상호작용할 수 있도록 하는 기술입니다.
바이브코딩의 한계는 어디인가..? Claude Code Opus 4.5 만세!
