개요

• 프론트엔드 개발자로서 내 분야에 대한 전문 지식 습득 및 최근 트렌드의 활용 극대화 프로젝트 구현
• On-device AI 를 활용한 프로젝트 select
  • On-deviceAI란?: 서버를 거치지 않고 브라우저에서 직접 AI 모델을 돌리는 방식. 보안과 비용측면에서 매우 유리하여 개인 프로젝트에 적합한 방법이라고 판단됨.
• 진행할 프로젝트?: “보안과 비용 걱정 없는 On-Device AI 프론트엔드 면접 튜터”

• 이는 기존 프론트엔드 개발자로서 단순 API 호출을 통한 데이터 UI/UX 뿐만 아닌 ‘브라우저 자원 최적화’ 적인 측면 까지 적극 어필할 수 있어 이에 초점을 두었음.

핵심 기술 스택 (Tech Stack)

프로젝트 주요 기능 명세 (Feature Spec)

1. AI 모델 로드 및 최적화
   1. 가벼우면서 똑똑한 모델 선택
   2. 프로젝트 시작시 모델 다운로드 진행률(%) 시각화 및 WebGPU 지원 여부 체크
   3. 다운받은 모델 캐싱
2. 면접 질문 로직 구현
   1. AI에게 “너는 3년차 주니어 프론트엔드 개발자야. 주관식 질문을 하나씩 던지는 면접을 진행해줘” 라는 페르소나 부여
   2. 사용자가 입력한 답변에서 키워드를 추출하여 점수를 산출 (100점 만점)
   3. 피드백 및 꼬리질문 생성기능
3. UX 고도화

폴더 구조 (예시)

src/
├── components/
│   ├── chat/            # 채팅 인터페이스 (Input, MessageList)
│   ├── layout/          # 사이드바, 헤더 (카테고리 선택)
│   └── model-loader/    # 모델 다운로드 진행 바, WebGPU 체크
├── hooks/
│   ├── useWebLLM.ts     # AI 모델 로딩 및 추론 커스텀 훅
│   └── useChatLog.ts    # 대화 내역 관리 훅
├── workers/
│   └── ai-worker.ts     # 메인 스레드 간섭 없이 AI를 돌릴 워커 파일
├── store/
│   └── useStore.ts      # 전역 상태 (현재 문제, 점수 등)
└── lib/
    ├── webLLMConfig.ts  # 모델 설정 및 파라미터(Temp, Top_p 등)
    └── interviewData.ts # 기본 면접 질문 풀 (RAG용 기초 데이터)

이 포트폴리오의 강점 및 차별화

1. 성능 지표 기록: 모델 로딩속도 측정, 추론 속도 측정 하여 비교
2. WebGPU 미지원 기기 대응?
3. 답변의 정확도를 높이기 위한 프롬프트 기법