바이브 코딩 목적

• 아이디어를 빠르게 실체화하여 UI/UX의 흐름을 먼저 검증하고, 핵심 로직에 집중하기 위한 전략
• AI → 세세한 문법 구현
• 본인 → 컴포넌트 간의 의존성이나 데이터 흐름 같은 큰그림을 설계
• 코드 리뷰어로서의 역량 향상 :
  • AI가 짠 코드를 그대로 수용하지 않고, 성능(Performance)이나 유지보수성 측면에서 더 나은 대안을 직접 제시하고 수정
• 라이브 주소 : https://react-insurance-ai.vercel.app/
• 깃허브 주소 : https://github.com/jang0ha/react-insurance-app?tab=readme-ov-file

프로젝트의 설계 단계부터 AI(Taskmaster)를 활용해 PRD(제품 요구사항 정의서)를 수립하고, 단계별 검증을 거쳐 코드를 구현

Task-master

• 보험 추천 AI PRD 수립
• 다르게 진행된점
  • Claude API → Gemini api
  • GSAP 로딩 애니메이션 → CSS 애니메이션 (성능 향상)

Overview

Problem: 보험 설계사가 고객 상담 시 맞춤형 상품 추천 자료를 준비하는 데 15-20분 소요

Solution: AI 채팅 인터페이스로 고객 정보 입력 → 3초 내 맞춤형 상품 추천

Value Proposition: - 상담 준비 시간 80% 단축 (20분 → 3분) - 모바일에서도 접근 가능 (출장 중 사용) - 일관된 상품 추천 (AI 기반, 편향 최소화)

Core Features

1. AI 채팅 (geminay API 연동)

• What: 자연어로 고객 정보 입력하면 AI가 추천 상품 제시