VDD 5주차: Promptory – AI 대화 기록 시각화 및 프론트엔드 연동 ⚙️
🎬 5주차 활동 요약
- 제출 기한: 10월 18일(토) 24:00
- 프로젝트명:
Promptory - 주제: 생성형 AI 대화 자동 수집·요약·분류 서비스
- 개발 목표:
- 백엔드(FastAPI)와 프론트엔드(Next.js) 연동
- 실시간 대화 데이터 시각화 구현
- Chrome Extension → 백엔드 → DB → Dashboard 전 흐름 완성
- GitHub: early-developer-club/promptory
💡 프로젝트 개요
Promptory는 ChatGPT, Gemini 등과의 대화를 자동으로 수집·요약·분류·시각화하는 서비스다.
이번 주에는 백엔드로 수집된 대화 데이터가 실제로 화면에 렌더링되는 전체 흐름을 구현했다.
“AI 대화가 단순 텍스트 로그가 아니라, 지식 자산으로 시각화되는 순간을 보고 싶었다.”
⚙️ 5주차 주요 개발 내용
| 항목 | 작업 요약 |
|---|---|
| 백엔드-프론트엔드 연동 | FastAPI → Next.js 간 API 연동 완료 |
| 대화 데이터 시각화 | 총 대화 수 / AI별 비율 / 태그 분포를 대시보드 형태로 구현 |
| Conversation Details 페이지 구성 | 각 대화의 프롬프트 및 응답 내용 세부 조회 가능 |
| Chrome Extension → DB 연계 테스트 | Gemini·ChatGPT 대화 데이터를 실시간 전송 후 저장 확인 |
| UI 개선 | Tailwind CSS를 활용한 카드형 대시보드, 상세 뷰 구성 |
| README 업데이트 | 개발 계획, 시각화 스크린샷, 기능별 진행상황 반영 |
🧩 결과 화면
1️⃣ 프로젝트 개발 계획 정리 (README 일부)
2️⃣ Promptory Dashboard 화면
3️⃣ Conversation Details 페이지
실제로 ChatGPT와 Gemini를 통해 수집된 대화가
FastAPI → DB → Next.js를 거쳐 프론트엔드 대시보드에 시각화되었다.
⚠️ 개발 중 이슈: “Docker 빌드 중 코드 롤백 사고”
“빌드 테스트 중 gemini가 git 옵션으로 파일을 돌려버렸다…”
이번 주 가장 큰 사건이었다.
FastAPI와 Next.js를 각각 로컬 서버로 띄워 테스트하다가
Docker 이미지 빌드 과정을 자동화하려고 했는데,
Gemini가 git 명령어로 “이전 커밋 시점”을 복원해버려
작성해둔 코드가 통째로 롤백되는 사고가 발생했다.
결과적으로 Promptory 프로젝트를 두 번 개발하게 되었고,
그 과정에서 아래 두 가지 차이가 생겼다.
| 항목 | 첫 번째 버전 | 두 번째 버전 |
|---|---|---|
| UI 구성 | 깔끔한 카드형 대시보드 & 디테일 화면 | CSS 깨짐 및 정렬 오류 발생 |
| 상태 | 완성도 높은 화면 유지 | 복구 중이던 테스트 상태 |
정상 버전(초기 개발 버전)
이 경험 덕분에 “Git 커밋은 보험이다”라는 말을 몸으로 배웠다.
자동화된 AI 환경에서도 결국 버전 관리의 주도권은 사람에게 있다.
💬 인상 깊었던 포인트
“AI와의 협업은 효율적이지만, 모든 책임은 개발자에게 있다.
개발자가 최종 책임을 갖지 않으면 프로젝트는 언제든 무너질 수 있다.”
Gemini가 빌드를 돕는 과정에서 예기치 못한 명령을 실행했지만,
그 상황을 되돌리고 복구해가는 과정 자체가 큰 배움이었다.
덕분에 Git 관리의 중요성, Docker 워크플로우의 리스크,
AI 협업 시 명령어 검증의 필요성을 절실히 깨달았다.
🧠 이번 주 회고
이번 주는 기능 완성과 사고 대응이 동시에 있었던 주차였다.
결과적으로 Promptory는 시각화 구조를 완성했고,
대화 데이터가 실제 서비스 형태로 보여지는 첫 버전을 완성했다.
다음 주에는 UI를 복구하고 요약(summary) 및 태그 자동화 로직을 추가하여
대화 데이터의 “가공 → 분석 → 가치화” 단계로 발전시킬 예정이다.
