전공나침반 (Major Compass)

교육 공공데이터(대학알리미·커리어넷·NCS) 기반 적성 진단 및 학과 추천 웹앱. 제8회 교육 공공데이터 AI 활용대회 출품작.

기술 스택

• Next.js 15 (App Router) + React 18.3
• Tailwind CSS 3.4 (PostCSS 파이프라인)
• pnpm 9 (패키지 매니저)

디렉토리 구조

MajorCompass/
├── app/
│   ├── layout.jsx          # 루트 레이아웃, 한국어 폰트 로드 (Noto Serif/Sans KR, IBM Plex Mono)
│   ├── page.jsx            # 메인 App — 팔레트, 라우팅(home/test/result/browse/detail/qna), Tweaks 패널
│   └── globals.css         # Tailwind 디렉티브 + 격자/등고선/페이지 진입 애니메이션
├── components/
│   ├── data.js             # DIMENSIONS, QUESTIONS, DEPARTMENTS, FAQ + 매칭 로직(코사인 유사도 등)
│   ├── design-system.jsx   # 디자인 atoms (CompassRose, ArchiveStamp, MatchRadar, CosineMatchDiagram 등)
│   ├── screens-1.jsx       # Home, Test, Result 화면
│   ├── screens-2.jsx       # Browse, DepartmentDetail 화면
│   ├── screens-3.jsx       # QnA (SearchMode + ChatMode)
│   └── tweaks-panel.jsx    # 우하단 Tweaks 패널 (테마/모티프/네비게이션 토글)
├── package.json
├── next.config.mjs         # outputFileTracingRoot 고정
├── postcss.config.mjs      # tailwindcss + autoprefixer
├── tailwind.config.js      # content 경로: app/**, components/**
├── jsconfig.json           # @/* → ./* 경로 별칭
└── .gitignore

실행 명령어

의존성 설치

pnpm install

개발 서버

pnpm dev

기본 포트 http://localhost:3000.

프로덕션 빌드 + 실행

pnpm build
pnpm start

화면 구성

라우트	화면	설명
home	Home	랜딩 — 데이터 출처 소개, 3가지 진입점 카드
test	Test	10문항 적성 진단 (5점 척도)
result	Result	8차원 레이더 + 코사인 매칭 다이어그램 + 차순위 추천
browse	Browse	학과 백과 (계열별 필터)
detail	DepartmentDetail	교육과정·취업률·졸업생 진로 분포
qna	QnA	RAG 검색 + AI 챗봇 (가상 선배 페르소나)

라우팅은 페이지 내 클라이언트 상태(route)로 처리. 우하단 Tweaks 패널의 "네비게이션" 섹션에서 임의 화면으로 점프 가능.

Tweaks 패널

우하단 토글로 노출되는 디자인 변형 패널:

• 컬러 팔레트: 공공 그린 / 시빅 블루 / 야간 네이비
• 나침반 마크 표시 on/off
• 모눈/측량 마크 on/off
• 네비게이션: 6개 라우트 점프 버튼

기본값은 app/page.jsx의 EDITMODE-BEGIN/END 블록에 정의 ({ theme: "azure", showCompass: true, showSurveyMarks: true }).

미구현

• AI 챗봇: components/screens-3.jsx:204의 window.claude.complete(...)는 Claude Design 환경 전용 API. 현재는 호출 시 try/catch가 잡아서 "응답을 불러오지 못했어요" 메시지를 표시. 실제 운영을 위해서는 Anthropic API를 호출하는 서버 라우트(app/api/chat/route.js)로 교체 필요 (API 키 노출 방지).
• 빠른 검색 탭(FAQ 매칭)은 LLM 호출 없이 standalone 동작.

데이터 출처

현재 components/data.js의 DEPARTMENTS, FAQ는 시연용 표본. 실 서비스에서는 다음에서 ETL:

• 대학알리미 (학과 교육과정, 연 1회)
• 대학정보공시 (졸업생 진로현황, 반기)
• 커리어넷 (직업·진로 정보, 월간)
• NCS (직무능력 표준, 분기)