YouthCodeX 해커톤을 위해 우리가 AI 기반 커리어 RPG 퀘스트를 구축한 방법

안녕하세요 DEV 커뮤니티 여러분! 👋

YouthCodeX AI 해커톤을 위해, 제 파트너와 저는 십 대들이 겪는 거대한 문제인 '진로 결정 장애'와 '취업 준비 부족'을 해결할 수 있는 무언가를 만들고 싶었습니다.

대부분의 커리어 상담은 정적인 링크 목록에 불과합니다. 우리는 살아있는 듯한 느낌을 주는 무언가를 만들고 싶었습니다. 그래서 우리는 PathFinder AI를 구축했습니다. 이는 Web Audio 합성 효과, Apple Siri 스타일의 음성 시각화 도구, ATS(채용 관리 시스템) 이력서 비교 기능, 그리고 보스전 형태의 연봉 협상 기능을 갖춘 게임화된 레벨 잠금 방식의 커리어 RPG 시뮬레이터입니다.

우리가 이것을 어떻게 구축했는지, 기술 스택(Tech Stack), 그리고 우리가 배운 점들을 소개합니다.

💡 핵심 경험: "인턴"에서 "경영 파트너"까지
커리어 가이드를 매력적으로 만들기 위해, 우리는 전체 흐름을 게임화했습니다. 사용자는 다음과 같은 방식으로 경험치(EXP)를 획득합니다:

• 커리어 트리(Career Trees)의 마일스톤 완료
• 대시보드(Dashboard)에서 빠른 코딩 수수께끼 풀기
• 모의 음성 인터뷰 진행
• '일상 생활(Day-in-the-Life)' RPG 시나리오 생존

계급이 올라감에 따라 기능이 점진적으로 해제됩니다:

레벨 1: 대시보드(Dashboard) 및 AI 음성 인터뷰
레벨 2: 나이지리아 생활비 임대료 계산기 및 이력서 ATS 비평
레벨 3: 연봉 협상 샌드박스 (Scrooge & Victoria 보스전)
레벨 4: 3D 홀로그래픽 기술 레이더 맵 및 커리어 탐색기
레벨 5: 일상 생활(Day-in-the-Life) 텍스트 RPG 시뮬레이터
레벨 6: 하드 모드 멘토 마켓플레이스(Mentor Marketplace)

사용자가 레벨업하면 전체 화면의 레벨업 축하 모달(Level Up Celebration Modal)이 트리거되며, 화면 전체에 물리적인 파티클 폭발이 일어나고 신시사이저의 메이저 스윕 코드(Major Sweep Chord)가 함께 연주됩니다!

🛠️ 주요 기능 및 기술 스택
우리의 스택은 로딩 속도와 반응성을 최적화하기 위해 의존성이 없는 가벼운 구조로 설계되었습니다:

프론트엔드(Frontend): React (Vite) + Context API
AI 통합(AI Integration): Google Gemini API (@google/generative-ai)를 클라이언트 측에서 직접 SDK로 통합하였으며, 데모 모드를 위해 고충실도 로컬 모의(Mock) 폴백(Fallback)을 갖추었습니다.
스타일링(Styling): 매끄러운 글래스모피즘(Glassmorphic) 다크 네온 디자인 시스템을 구축하기 위한 Vanilla CSS
시각화(Visualizations): 3D 투영 및 물리 연산을 위한 의존성 없는 HTML5 Canvas 렌더링

1. Canvas 기반의 의존성 없는 (Zero-Dependency) 3D 벡터 수학 🌐 무거운 WebGL 패키지를 가져오는 대신, HTML5 2D 컨텍스트에 직접 커스텀 3D 회전 투영 행렬 (rotation projection matrices)을 작성했습니다:

• 인터랙티브 3D 스킬 레이더 (Interactive 3D Skill Radar): 핵심 역량과 격차를 보여주는 동심원 형태의 거미줄 다각형 (spider-web polygons). 마우스 기울기에 따른 시차 효과 (parallax mouse-tilt)와 점선 궤적으로 연결된 플로팅 코스 태그를 포함합니다.
• 시네마틱 실험실 공간 (Cinematic Laboratory Space): 느린 팬 매트릭스 (panning matrix)와 함께 떠다니는 홀로그램(코드 블록, AI 코치, 이력서 점수표)을 가리키는 실루엣 처리된 십 대들의 모습.

1. Apple Siri 스타일의 베지에 파형 (Bezier Waveform) 🎙️ 모의 면접 중, 캔버스에 다양한 진폭 (amplitudes)과 위상 (phases)을 가진 여러 개의 중첩된 반투명 베지에 곡선 (Bezier curves)이 그려집니다. Web Speech API가 질문을 소리 내어 읽을 때 파형의 높이가 역동적으로 맥동하며, 침묵 시에는 평탄해집니다.

// Siri 스타일 파형 엔벨로프 생성기 프리뷰
const drawWave = (ctx, width, height, time, speed, amplitude, offset) => {
ctx.beginPath();
for (let x = 0; x < width; x++) {
const scale = Math.sin((x / width) * Math.PI); // 파형 가장자리 제한 (Clamp wave edges)
const y = Math.sin(x * 0.02 + time * speed + offset) * amplitude * scale + height / 2;
if (x === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();
};

1. Web Audio Synth Soundscapes (Web Audio 신스 사운드스케이프) 🔊
   고충실도(High-fidelity)의 레트로-모던 미학을 유지하기 위해, 우리는 무거운 오디오 에셋을 사용하는 대신 Web Audio API를 사용하여 게임 큐(cue)를 로컬에서 합성했습니다:
   // 레벨 업 시 재생되는 가벼운 메이저 아르페지오 스윕 코드
   export const playLevelUpSound = () => {
   const ctx = new AudioContext();
   const now = ctx.currentTime;
   const notes = [261.63, 329.63, 392.00, 523.25, 659.25, 1046.50]; // C4 -> C6 스윕
   notes.forEach((freq, idx) => {
   const osc = ctx.createOscillator();
   const gain = ctx.createGain();
   osc.type = "triangle";
   osc.frequency.setValueAtTime(freq, now + idx * 0.06);
   gain.gain.setValueAtTime(0.06, now + idx * 0.06);
   gain.gain.exponentialRampToValueAtTime(0.001, now + idx * 0.06 + 0.3);
   osc.connect(gain);
   gain.connect(ctx.destination);
   osc.start(now + idx * 0.06);
   osc.stop(now + idx * 0.06 + 0.35);
   });
   };

2. Interactive Salary Negotiator Boss Fight (대화형 연봉 협상 보스전) 💼
   단순한 연봉 슬라이더 대신, 사용자는 엄격한 가상 채용 담당자들(인턴 Alex, 재무 팀장 Scrooge, 부사장 Victoria, 그리고 CFO 보스 Karen)과 정면 승부를 벌입니다.

Gemini API는 역제안(counter-offers)을 분석하는 엄격한 보스 역할을 수행합니다.
최종 스트레스 HUD: 사용자는 커리어 키워드(예: React, PyTorch)를 사용하여 역제안의 타당성을 입증해야 합니다. 구걸하거나 과도한 연봉을 요구하면 보스의 인내심 게이지가 소진되며 생체 인식 경보 사운드 펄스가 트리거됩니다. 게이지가 0에 도달하면 최종적으로 채용 제안이 철회됩니다!

💡 우리가 배운 점
AI 프롬프트(Prompts)에는 엄격한 구조가 필요합니다: 차트, 진행 바, 스코어카드를 실시간으로 제공하기 위해, 우리는 Gemini가 구조화된 JSON을 반환하도록 설정했습니다. 클라이언트 측의 JSON.parse() 파서 충돌을 방지하기 위해, 깨끗한 정규 표현식(RegExp) 치환을 사용하여 마크다운 블록(```json 래퍼 오버라이드)을 정리하는 것이 매우 중요했습니다.
Web Audio는 강력한 무기입니다: 애플리케이션을 몰입감 있게 만들기 위해 메가바이트 단위의 .wav 에셋이 필요하지는 않습니다. 몇 줄의 오실레이터 노드(Oscillator nodes)만으로도 거의 제로에 가까운 지연 시간(latency)으로 비프음, 클릭음, 코드를 재생할 수 있습니다.
...