ZenithFlow: AI 에이전트를 활용한 개인 맞춤형 4주 학습 로드맵 생성기

실용적 조언

학습용 RAG 시스템 구축 시 단순 검색보다는 에이전트가 리소스를 한 번 더 정제(Pruning)하도록 설계하면 품질이 향상된다.
사용자 데이터를 서버 없이 유지하려면 localStorage를 활용한 상태 관리가 간단한 해결책이 될 수 있다.

섹션별 상세

ZenithFlow는 세 가지 핵심 에이전트로 구성된 멀티 에이전트 시스템을 채택했다. Architect Agent는 사용자와의 인터뷰를 통해 목표와 가용 시간을 파악한 뒤 구조화된 JSON 로드맵을 생성한다. Resource Scavenger는 노이즈를 제거하고 각 학습 단계에 필요한 공식 문서, 저장소, YouTube 영상 등 최적의 리소스를 선별한다. Progress Auditor는 학습자가 다음 주차로 넘어가기 전 검증 챌린지나 회고를 거치도록 설계되어 학습의 실질적인 성취를 돕는다.

기술 스택은 최신 프론트엔드 성능과 디자인 트렌드인 '바이브 코딩'에 최적화되었다. React 19와 Vite를 사용하여 즉각적인 로드 속도를 구현했으며, Tailwind CSS v4 엔진을 통해 글래스모피즘 스타일의 UI를 구축했다. Framer Motion 라이브러리는 학습 진행에 따라 진화하는 'Progress Nebula' 애니메이션 등 상태 전환 효과를 처리한다. 데이터 지속성을 위해 localStorage를 활용하여 탭을 닫아도 로드맵과 진행 상황이 보존되도록 구현했다.

작성자는 단순한 챗봇 인터페이스에서 벗어나 학습 여정 내내 사용자와 함께하는 에이전트 중심의 인터페이스를 지향했다. 특히 다음 단계로 넘어가기 위해 검증 과정을 거쳐야 하는 'Auditor' 로직의 실효성에 대해 커뮤니티의 의견을 구했다. 이는 학습자가 수동적으로 정보를 소비하는 것에 그치지 않고 실제 기술을 습득했는지 확인하는 장치로서 기능한다.

용어 해설

에이전트 시스템(Agentic System): — 단순한 챗봇을 넘어 특정 목표를 달성하기 위해 스스로 계획을 세우고 도구를 사용하는 AI 시스템입니다. 이 프로젝트에서는 인터뷰, 리소스 검색, 학습 감사 등 각기 다른 역할을 수행하는 에이전트들이 협력하여 개인화된 학습 로드맵을 생성하고 관리합니다.
글래스모피즘(Glassmorphism): — 배경 흐림(backdrop blur)과 반투명한 레이어를 사용하여 유리 같은 질감을 표현하는 UI 디자인 트렌드입니다. 사용자에게 시각적인 깊이감과 현대적인 느낌을 주며, 이 프로젝트에서는 학습자의 집중을 돕는 차분한 환경을 조성하는 데 사용되었습니다.
JSON 로드맵(JSON Roadmap): — 데이터 교환 형식인 JSON 구조로 생성된 학습 계획표입니다. AI 에이전트가 사용자의 목표와 가용 시간을 분석하여 기계가 읽을 수 있는 정형화된 데이터로 출력함으로써, 프론트엔드에서 이를 시각적인 로드맵으로 변환하여 표시할 수 있게 합니다.

언급된 도구

React 19추천

프론트엔드 UI 라이브러리

Tailwind CSS v4추천

스타일링 엔진

Framer Motion추천

상태 전환 및 애니메이션 처리