소개
VibeLoop는 반복적인 행동 기록과 회고, 그리고 자동화된 질문 생성을 통해 일상의 리듬을 정리하는 개인화 루틴 앱입니다. 처음에는 간단한 웹앱 형태로 시작했지만, 실제 개발을 진행하며 여러 제약과 문제를 경험하게 되었고, 그 과정에서 클로드와의 협업 자동화 시스템, Replit 최적화, 직관적인 UI/UX 설계라는 세 가지 핵심 과제를 해결하고자 노력했습니다.
진행 방법
1️⃣ 세션 자동화 시스템 도전
문제: 클로드(Claude)의 토큰이 짧아 세션이 자주 끊기며, 이전 맥락을 매번 수동으로 전달해야 했습니다.
시도한 방법:
Notion API → 쓰기 권한 제한으로 실패 ❌
GitHub README 자동화 → 맥락 연결 어려움 ❌
Google Docs 수동 로그 → 작동은 되나 매번 복사/붙여넣기 필요 😓
결론: 아직 자동화된 세션 관리가 어렵고, Replit에서도 지속 맥락 공유가 불가능한 상황이 반복되었습니다.
👉 해결 아이디어: VibeTrack.js 같은 간단한 토큰/세션 관리 CLI 툴 제안
2️⃣ Replit 환경에 맞춘 개발 구조 재설계
기존 PRD는 React, Tailwind, PostgreSQL 기반이었지만 Replit에서는 과부하 및 충돌 문제가 발생했습니다.
Session-1 실패 분석 후, 아래와 같이 전환했습니다:
Express 4.x + Vanilla JS + JSON 저장소
Node-cron을 통한 스케줄링 유지
파일 구조를 8개 이하로 단순화
project/
├── server.js # Express 서버
├── package.json # express, node-cron만
├── public/
│ ├── index.html # 3C×5W UI 매트릭스
│ ├── app.js # 앱 로직
│ └── style.css # 간단한 UI 스타일
└── data/
└── projects.json # 프로젝트 데이터 저장소3️⃣ 원하는 UI/UX 구성 찾기
3C×5W 매트릭스 UI(행동기록 + 분류 + 회고)를 설계했지만 실제 사용 시:
정보 시각화가 직관적이지 않음
드래그 앤 드롭 구현은 되었지만 몰입감 부족
문제: 사용성, 리듬감, 집중도를 줄 수 있는 구성은 아직 부족
향후 계획:
Figma 기반 인터페이스 리디자인 시도
Vanilla JS + Tailwind로 가벼운 전환형 UI 구성 테스트 예정
결과와 배운 점
✅ 얻은 교훈:
"자동화"는 코드만으로 되지 않으며, 맥락 유지 시스템과 연결돼야 진짜 쓸모가 생깁니다.
단순하고 명확한 구조가 오히려 더 강력한 UX를 만들어줄 수 있습니다.
📌 아직 미해결:
클로드와의 자동 세션 연동 어려움
완벽한 UI/UX 만족을 위한 사용자 피 드백 필요
💡 다음 단계:
GPT API 연동 및 회고 질문 생성 자동화
UI 리디자인 시도 → 몰입형 회고 환경 설계
세션 로그 자동화 도구(VibeTrack.js) 개발 검토
도움 받은 글
Replit 메모리 제약 분석
3C×5W 모델 소개
이 글은 지피터스 ✕ 개발자F의 협업을 통해 생성된 사례입니다 🙌
