일상 성향 기반 개발자 유형 테스트 + 비전공자 취업 루트 진단 서비스
라이브 URL: https://keg-devpath-ai.vercel.app
| 랜딩 페이지 | 최종 결과 페이지 |
|---|---|
 |
 |
가벼운 유형 테스트로 흥미를 유도하고, 이어지는 취업 루트 진단을 통해 예비 취준생의 준비도 / 직무 적합도 / 학습 여건을 분석하여 가장 현실적인 IT 취업 경로와 교육 코스를 추천합니다.
랜딩 → 1차 유형 테스트(8문항) → 1차 결과 + 공유
↓
2차 취업 루트 진단(10문항) → 최종 결과
├ 개발자 유형 요약
├ 적합 직무군 Top 3
├ 현재 준비 단계
├ 추천 학습 경로
├ 추천 교육 코스
├ 리스크 경고
└ 상담 CTA
| 유형 | 설명 | 대표 직무군 |
|---|---|---|
| 보여줘야 힘나는 메이커형 | 눈에 보이는 결과, 감각적 구현 | 프론트엔드 |
| 판 짜는 설계자형 | 구조와 로직 중심 사고 | 백엔드 |
| 끝까지 완성하는 빌더형 | 실행력과 완성 지향 | 풀스택/앱개발 |
| 허점을 못 지나치는 감시자형 | 디테일과 안정성 중시 | 보안/QA |
| 패턴을 읽는 탐정형 | 분석과 패턴 인식 | 데이터/AI |
| 판을 굴리는 운영자형 | 전체 시스템 운영 | 인프라/클라우드 |
- 탐색형 — 방향 정립이 우선인 단계
- 브리지형 — 기초에서 실전으로 연결이 필요한 단계
- 직행형 — 취업집중 과정 바로 진입 가능한 단계
- 프레임워크: Next.js 16 (App Router)
- 언어: TypeScript
- 스타일링: Tailwind CSS
- 상태 관리: React useState (별도 라이브러리 없음)
- 배포: Vercel
app/
├── page.tsx # 랜딩 페이지
├── layout.tsx # 루트 레이아웃
├── globals.css # Tailwind 설정
├── quiz1/
│ ├── page.tsx # 1차 유형 테스트 (8문항)
│ └── result/
│ └── page.tsx # 1차 결과 + 공유/CTA
├── quiz2/
│ └── page.tsx # 2차 취업 루트 진단 (10문항)
└── result/
└── page.tsx # 최종 결과 페이지
data/
├── quiz1.ts # 1차 문항 데이터 + TypeAxis 정의
├── quiz2.ts # 2차 문항 데이터 + 점수 구조
└── results.ts # 유형 6종 + 준비 단계 3종 메타데이터
lib/
└── scoring.ts # calcQuiz1() + calcQuiz2() 계산 로직
docs/
├── prd.md # 제품 요구사항 정의서
└── scoring.md # 점수 계산 로직 명세
npm install
npm run devhttp://localhost:3000 에서 확인 가능합니다.
- 1차 테스트는 개발 용어 없이 일상 성향 질문으로 구성
- 2차 결과는 "정답"이 아닌 "가장 현실적인 추천 경로"로 표현
- 추천은 항상 "현재 단계 기준"으로 제시
- 준비도 대비 시급성이 높은 경우 리스크 경고를 명시적으로 노출
- 모바일 우선 반응형 UI (max-w-md 기반)
이 프로젝트는 AI 코딩 에이전트(Claude Code)를 활용하여 개발되었습니다.
- 기획 구조화: PRD, scoring.md, TASKS.md 등 문서 기반 작업 흐름 설계
- 데이터 설계: 문항-점수-결과 매핑 구조 정의 및 구현
- 계산 로직: 1차 유형 판정 + 2차 준비 단계/직무 추천 로직 구현
- UI 구현: 랜딩 ~ 최종 결과까지 전체 화면 구현
- 품질 검증: 복수 케이스 테스트, 코드 리뷰, 버그 수정
이 프로젝트는 공모전 제출용으로 제작되었습니다.