ArchiFit - 아키텍처 설계 역량 진단/학습 SaaS
Next.js 16TypeScriptSupabase (PostgreSQL, Auth, RLS)XYFlow (React Flow)TanStack QueryZustandTailwind CSSGoogle Gemini (Vercel AI SDK)
링크
스크린샷
ArchiFit 메인 랜딩 페이지
프로젝트 개요
ArchiFit은 Drag & Drop 캔버스에서 소프트웨어/클라우드 아키텍처를 설계하고, 자동 채점과 AI 피드백으로 학습을 지원하는 SaaS 플랫폼입니다. 학습/테스트/자유 설계 모드를 제공하며, 대시보드에서 사용자별 역량과 오답 패턴을 추적할 수 있습니다.
담당 역할
풀스택 개발 (요구사항 정의 → 캔버스 UX 설계 → 검증/채점 알고리즘 구현 → AI 피드백 API 및 데이터 모델 설계 → 인증/권한/배포)
주요 기능
- 학습/테스트 모드 분리
- Learn 모드 힌트(최대 3단계), Test 모드 제한시간 타이머
- 시나리오 카테고리 3종 지원: 프로젝트 내부 구조, 시스템 아키텍처, 아키텍처 패턴
- 프레임워크/클라우드별 노드 팔레트: Spring Boot, NestJS, Django, AWS, GCP, Azure, Network
- XYFlow 기반 캔버스 편집: 드래그앤드롭, 다중선택, Undo/Redo, 줌/미니맵/그리드 스냅
- Placeholder/Locked 노드 기반 빈칸 채우기 학습 플로우
- Edge 흐름 타입 및 프로토콜 자동 추천/수동 선택(HTTP, gRPC, MQTT 등)
- 실시간 검증 엔진: 연결 규칙, 순환 참조, 레이어 위반, 고립 노드 검사
- Graph Traversal 기반 자동 채점: 구조(50)·관계(30)·효율(20) 가중치
- 힌트 사용 패널티 자동 반영 및 노드/엣지 단위 피드백 하이라이트
- 리팩토링 전/후 그래프 diff 시각화 및 개선 요약
- AI 교육 피드백 스트리밍(시나리오 기반) + 자유 캔버스 AI 분석
- AI 피드백 히스토리 저장 및 follow-up 대화 스레드 조회
- 사용자 대시보드: 통계 카드, 역량 레이더, 최근 활동, 오답 패턴 분석
- Supabase 이메일/소셜 OAuth 인증, 비밀번호 재설정, 보호 라우트 미들웨어
- RLS + Service Role 분리로 정답 데이터/점수 데이터 접근 제어
- 모듈형 SQL seed 및 DB reset 자동화 스크립트 운영
기술적 의사결정
- 서로 다른 도메인(프로젝트 내부 구조, 클라우드 인프라, 패턴 학습)을 단일 캔버스에서 일관되게 다루기 위해 툴박스를 프레임워크/카테고리 기반으로 추상화하고, General 노드에 프레임워크별 어노테이션 자동 주입 로직을 적용함.
- LLM 품질과 비용을 동시에 관리하기 위해 그래프 직렬화 경량화, 토큰 추정 기반 복잡도 제한, 사용자별 rate limit, 스트리밍 응답 + 히스토리 저장 구조를 도입함.