Gemini AI와 React로 구현한 역설적 플래너, The Warrior's Planner

Context

과도한 계획 수립이 실제 실행을 방해하는 심리적 제약 발생. 완벽한 일정 관리 도구가 주는 통제감과 실제 현실 사이의 괴리 존재. 생산성 최적화 강박에서 벗어난 새로운 관점의 인터페이스 필요.

Technical Solution

• React와 TypeScript 기반의 엄격한 타입 시스템 적용으로 애플리케이션 안정성 확보
• @dnd-kit 라이브러리를 활용하여 Task Bank에서 타임라인으로 이어지는 직관적인 Drag & Drop 인터페이스 구현
• Google AI Studio 환경에서 Gemini AI를 통합하여 정형화된 일정을 무작위적이고 추상적인 텍스트로 변환하는 프롬프트 엔지니어링 적용
• Framer Motion과 canvas-confetti를 결합하여 AI 변환 시점의 시각적 피드백과 사용자 경험(UX) 강화
• 반응형 레이아웃 설계를 통해 데스크톱과 모바일 환경 모두에서 동일한 사이드-바이-사이드 인터페이스 제공

Key Takeaway

AI를 단순한 효율성 도구가 아닌, 사용자의 고정관념을 깨는 창의적 변환 도구로 활용한 사례. 기술적 완결성과 유머러스한 사용자 경험의 결합을 통한 서비스 가치 창출.