본 과제는 "AI 캐릭터 기반 채팅 서비스"를 개발하는 프로젝트로,
기획–설계–구현–테스트 전 과정에서 AI 에이전트를 적극적으로 활용하여
개발 효율성과 코드 품질을 향상시키는 것을 목표로 하였습니다.
AI는 코드 자동 생성 도구가 아니라, 설계 및 품질 검증을 보조하는 협업 파트너로 활용했습니다.
- 프로젝트명: ChatZPT - AI 캐릭터 기반 채팅 서비스
- 개발 기간: 2024년 12월
- 기술 스택:
- Frontend: React 19, TypeScript, Vite, Tailwind CSS, Jotai, Framer Motion
- Backend: Node.js, Express, TypeScript, LowDB, JWT
- AI: OpenAI API (GPT-4o-mini, gpt-3.5-turbo)
- 주요 기능:
- 사용자 인증 및 세션 관리
- AI 캐릭터 채팅 (기본 3개 + 사용자 정의 캐릭터)
- 실시간 대화 및 대화 기록 관리
- 캐릭터 생성 및 관리
- 반응형 UI/UX 및 다크모드 지원
- Cursor (Auto)
- 설계 및 구조 설계 보조, 비동기 로직 검증, 에러 핸들링 로직 개선, 문서 작성 지원
- ChatGPT/Gemini (보조)
- 반복적인 타입 정의 및 단순 로직 자동완성
- OpenAI API (서비스 내부 사용)
- AI 캐릭터의 실제 대화 응답 생성
- 질문 내용: "프론트엔드와 백엔드를 폴더 분리한 구조에서, 채팅 서비스의 폴더 구조를 어떻게 구성하는 게 효율적일까?"
- AI 응답 요약:
frontend/와backend/를 분리하고,
프론트엔드에서는components,hooks,store,api등 모듈화 구조 제안.- 백엔드는 RESTful API 구조와
.env기반 환경 변수 관리 방식 제안.
- 활용 방법:
응답을 토대로 프로젝트 디렉토리 구조를 표준화하고,.env.example파일에 필요한 환경 변수 명세 추가.
- Spec Kit 활용: GitHub Spec Kit을 사용하여 체계적인 개발 프로세스 구축
- 주요 단계:
- Specify: 프로젝트 요구사항 및 사용자 스토리 정의
- Clarify: 요구사항 명확화 및 아키텍처 설계
- Plan: 개발 계획 수립 및 태스크 분해
- Implement: 단계별 기능 구현
- Test: 기능 검증 및 버그 수정
- 결과: 체계적인 개발 프로세스로 개발 품질 향상 및 일정 관리 개선
- 질문 내용: “비로그인 사용자의 접근을 막고, 로그인 상태를 Jotai 상태로 유지하는 최적 패턴은?”
- AI 응답 요약:
Axios 인터셉터 기반의 토큰 검증 로직, Jotai atom 간 상태 공유 구조 예시 제시. - 활용 방법:
제안을 참고해authAtom을 중심으로 상태관리 구조를 설계하고,
로그인 상태가 변경될 때 전역적으로 반영되도록 구현.
- 질문 내용: “사용자 정의 캐릭터의 프롬프트를 기반으로 OpenAI API 호출을 관리하려면?”
- AI 응답 요약:
캐릭터별 프롬프트 + 사용자 입력을 context로 묶어 전송하는 구조,
백엔드에서 API 키를 안전하게 관리하는 패턴 제안. - 활용 방법:
백엔드에서 API 키를.env로 관리하고,
캐릭터별로 개별 대화 세션을 분리 저장하는 로직을 구현.
- 질문 내용: “채팅 UI를 직접 구현하면서 로딩 상태, 스크롤, 반응형 UI를 효율적으로 처리하려면?”
- AI 응답 요약:
- Skeleton UI와 메시지 로딩 인디케이터 구조 제안
IntersectionObserver기반 메시지 무한 스크롤 예시 제공- 반응형 레이아웃 구성 시 Tailwind breakpoint 활용 팁 제시
- 활용 방법:
제안을 기반으로 로딩 상태, 메시지 추가 애니메이션, 다크모드 대응을 구현.
- 질문 내용: “OpenAI API 호출 실패 시 재시도 로직을 어떻게 안전하게 구성할까?”
- AI 응답 요약:
exponential backoff패턴과 메시지 큐잉 구조 제안. - 활용 방법:
네트워크 장애 시 메시지 재전송이 가능하도록 큐잉 로직을 적용.
- 질문 내용: "README와 AI 활용 내역서를 어떤 구조로 작성하면 평가자가 이해하기 쉬울까?"
- AI 응답 요약:
실행 방법 / 기술 스택 / AI 활용 내역을 분리한 Markdown 템플릿 제시. - 활용 방법:
해당 템플릿을 기반으로 README.md 및 본 AI_USAGE.md 작성.
- 질문 내용: "사용자 정의 캐릭터 생성 및 관리 시스템을 어떻게 구현할까?"
- AI 응답 요약:
- 캐릭터 CRUD API 설계 및 데이터베이스 스키마 제안
- 프론트엔드 캐릭터 생성 모달 및 관리 UI 구조 제안
- 캐릭터별 대화 세션 분리 관리 로직 제안
- 활용 방법:
- 백엔드:
characterController.ts,characterService.ts구현 - 프론트엔드:
CreateCharacterModal.tsx,CharacterCard.tsx컴포넌트 구현 - 데이터베이스: LowDB를 활용한 캐릭터 데이터 저장 구조 설계
- 백엔드:
- 질문 내용: "OpenAI API를 활용한 실시간 채팅 시스템을 어떻게 구현할까?"
- AI 응답 요약:
- OpenAI API 호출 최적화 및 비용 관리 전략 제안
- 대화 컨텍스트 관리 및 토큰 제한 처리 방법 제안
- 에러 처리 및 재시도 로직 구조 제안
- 활용 방법:
openaiService.ts: OpenAI API 호출 및 응답 처리 로직 구현chatController.ts: 채팅 API 엔드포인트 구현- 프론트엔드: 실시간 메시지 표시 및 로딩 상태 관리 구현
- 질문 내용: "사용자 경험을 향상시키는 UI/UX 및 애니메이션을 어떻게 구현할까?"
- AI 응답 요약:
- Framer Motion을 활용한 페이지 전환 및 컴포넌트 애니메이션 제안
- 반응형 디자인 및 다크모드 지원 구조 제안
- 접근성 고려사항 및 사용자 인터랙션 개선 방법 제안
- 활용 방법:
- 모든 페이지에 Framer Motion 애니메이션 적용
- 반응형 레이아웃 및 다크모드 지원 구현
- 사용자 인터랙션 피드백 및 로딩 상태 표시 개선
- 질문 내용: "한글 가독성을 높이는 폰트 시스템을 어떻게 구축할까?"
- AI 응답 요약:
- Pretendard 웹폰트 적용 방법 및 폴백 폰트 체인 제안
- Tailwind CSS와의 통합 방법 제안
- 폰트 로딩 최적화 및 성능 고려사항 제안
- 활용 방법:
- Pretendard 웹폰트를 전역적으로 적용
- Tailwind CSS 설정에서 폰트 패밀리 통합
- 폰트 로딩 최적화 및 폴백 처리 구현
- AI의 제안은 검토 후 직접 구현 및 수정함.
- 과제 요구사항과 코드 스타일 가이드를 준수하기 위해 직접 검증 과정을 수행함.
- 모든 핵심 코드는 직접 작성 및 테스트를 통해 안정성 확보함.
- 보안상 민감한 정보(API Key 등)는 AI에 직접 입력하지 않음.
- 사용자 인증 시스템: JWT 기반 로그인/로그아웃, 세션 관리
- AI 캐릭터 시스템: 기본 3개 캐릭터 (Vicky, Genie, Spike) + 사용자 정의 캐릭터
- 실시간 채팅: OpenAI API 연동, 대화 기록 관리, 컨텍스트 최적화
- 캐릭터 관리: CRUD 기능, 이미지 업로드, 시스템 프롬프트 관리
- 반응형 UI: 모바일/데스크톱 대응, 다크모드 지원
- 애니메이션: Framer Motion 기반 부드러운 사용자 경험
- 프론트엔드: React 19 + TypeScript + Vite + Tailwind CSS
- 상태관리: Jotai를 활용한 전역 상태 관리
- 백엔드: Node.js + Express + TypeScript + LowDB
- AI 연동: OpenAI API (GPT-4o-mini, gpt-3.5-turbo)
- 폰트: Pretendard 웹폰트 적용으로 한글 가독성 향상
- 애니메이션: Framer Motion으로 인터랙티브 UI 구현
- 토큰 관리: OpenAI API 호출 비용 최적화 (max_tokens: 1500)
- 컨텍스트 관리: 대화 기록 최적화로 토큰 사용량 감소
- 폰트 최적화: Pretendard 웹폰트 CDN 활용으로 로딩 속도 개선
- 상태 관리: Jotai를 통한 효율적인 상태 업데이트
- 직관적 UI: 깔끔하고 모던한 디자인 시스템
- 반응형 디자인: 모든 디바이스에서 최적화된 경험
- 애니메이션: 부드러운 페이지 전환 및 인터랙션
- 접근성: 키보드 네비게이션 및 스크린 리더 지원
AI를 적극적으로 활용함으로써:
- 설계 초기 단계에서 구조적 오류를 줄일 수 있었고,
- 상태관리 및 API 연동의 복잡도를 줄여 개발 속도를 향상시켰습니다.
- 프론트엔드와 백엔드 간 데이터 구조를 명확히 정의할 수 있었습니다.
- 복잡한 UI/UX 구현을 효율적으로 진행할 수 있었습니다.
- 한글 폰트 시스템 구축으로 사용자 경험을 크게 개선했습니다.
- 개발 속도 향상: 복잡한 로직 구현 시간 단축
- 코드 품질 개선: 에러 처리 및 최적화 로직 강화
- 사용자 경험 개선: UI/UX 설계 및 애니메이션 구현 지원
- 기술적 도전 해결: OpenAI API 연동 및 비용 최적화 전략 수립
- 캐릭터 관리 기능: 수정/삭제 기능 추가
- 대화 내보내기: 채팅 기록 다운로드 기능
- 성능 모니터링: 실시간 사용자 활동 추적
- 다국어 지원: 영어/일본어 등 다국어 인터페이스
이번 과제에서 AI는 단순한 코드 도구가 아니라,
설계 검토자이자 학습 파트너로서의 역할을 수행했습니다.