Argos
AI 실시간 수업 분석 플랫폼
Role: Frontend 전담 (4개 역할 뷰 전체 구축)
Award
제1회 코리아IT아카데미 바이브코딩 공모전(KIT 해커톤) 장려상 — 500팀 중 3위
Overview
학원의 수업 품질을 데이터로 보는 플랫폼입니다. 수강 신청 단계에서 AI가 지원자 역량을 사전 진단하고, 수업 중에는 실시간 이해도를 히트맵으로 보여주며, 수업 후에는 개인별 리포트를 만들고, 운영 차원에서는 이탈 위험을 조기에 감지합니다. 강사·수강생·원장·멘토 네 역할이 각각 다른 화면을 쓰기 때문에 같은 데이터를 네 가지 관점으로 다시 그려야 했고, 저는 이 프론트엔드 전체를 맡았습니다. 코리아IT아카데미가 주최한 제1회 바이브코딩 공모전(KIT 해커톤)에 출품해 500팀 중 3위(장려상)로 수상했습니다.
이 프로젝트의 핵심
제1회 코리아IT아카데미 바이브코딩 공모전(KIT 해커톤) 장려상
500팀 중 3위
프론트엔드 전담
약 16,000줄 기여, 강사·수강생·원장·멘토 4개 역할 뷰 전체 구축
실시간 이해도 히트맵
퀴즈 응답이 들어올 때마다 개념별 이해/미이해를 색으로 시각화
과목별 AI 역량 진단
정기 측정 결과를 레이더 차트로 시각화하고 역할별 화면에 연동
나머지 3개 더 보기접기
원장 경영 대시보드 5탭 + 멘토 이탈 방지 뷰 시각화 전면 개편
강사 AI 코칭 구조화
오개념 클러스터를 묶어 '어느 개념에서 몇 %가 약한지' 표출
Next.js 16 App Router + Supabase Realtime + Gemini, Zod로 AI 응답까지 전수 검증
자세히
네 역할, 네 개의 화면5
강사
세션 생성과 참여 코드 발급, 라이브 대시보드에서 실시간 이해도 히트맵과 AI 코칭 확인
수강생
모바일에서 객관식·주관식 퀴즈에 실시간 응답, 개인 대시보드와 학습 리포트, 과목별 역량 진단
원장
학원 전체 수업 품질, 반별 평균 이해도, 이탈 위험 감지, 과목별 수준 분포를 5개 탭으로 구성
멘토
이탈 위험 레이더와 상담 브리핑을 보고 선제적으로 개입하는 뷰
같은 데이터를 네 관점으로 다시 그려야 해, 화면별로 무엇을 강조하고 무엇을 접을지 기준을 나눔
실시간과 AI5
Supabase Realtime 구독으로 퀴즈 응답이 들어올 때마다 이해도 히트맵을 갱신
양방향 피드백 루프
보충 설명 후 재퀴즈를 돌려 이해도 변화(델타)를 시각화
AI 코칭 결과를 그대로 나열하지 않고 오개념 클러스터로 묶어 강사가 바로 행동할 수 있는 형태로 구조화
Zod로 외부 입력뿐 아니라 AI 응답까지 전수 검증
모델이 형태를 흔들어도 화면이 깨지지 않게 함
레이더 차트·추이 그래프 등 Recharts 기반 시각화를 역할별 화면에 재사용
마감 품질4
심사 동선을 고려한 랜딩 페이지와 원클릭 테스트 계정
심사위원이 6개 역할 계정을 바로 체험
데모 시드 데이터 구성
이탈 위험·정체·향상 패턴을 가진 수강생을 미리 심어 시나리오가 보이게 함
Toast 피드백과 SEO 메타 정리, 미사용 데이터까지 전수 표출해 빈 화면을 없앰
팀 차원에서 E2E 1,146건과 15화면 97건 테스트케이스, 73페이지 위키를 함께 남김