면접을 어려워하는 친구를 위한 개인용 오픈 소스 AI 면접 코치 제작기

이 글은 Hacktoberfest 주말 챌린지: 친구를 위해 만들기에 제출하는 내용입니다.

제가 만든 것

**플래이스먼트 면접 코치(Placement Interview Coach)**는 현실적인 면접 질문을 던지고, 사용자가 자신의 말로 답변하게 한 뒤, STAR 기법(Situation, Task, Action, Result)을 사용하여 즉각적인 피드백을 제공하는 웹 애플리케이션입니다. 이 앱은 **오픈 가중치 AI 모델(open-weight AI model)**이 브라우저 내부에서 완전히 실행됩니다.

사용자는 준비할 역할을 선택합니다 (소프트웨어, 데이터, IT 또는 파트타임 학생 직무). 옵션으로 회사 이름을 추가하고 **새 질문(New question)**을 클릭합니다. 답변을 한 후 코치는 다음 내용을 제공합니다:

색상 코드가 적용된 링 형태로 표시되는 10점 만점 점수
답변에 어떤 부분이 포함되었고 어떤 부분이 누락되었는지 보여주는 STAR 체크
**잘한 점(what went well)**과 개선할 점(how to improve)
사용자의 실제 세부 정보만을 사용하여 작성된 답변의 더 나은 버전(stronger version)
예상되는 후속 질문(follow-up question), 따라서 당황하지 않도록 합니다.

누가 사용하기 좋은가

저는 이 앱을 친구 Hetvi와 저 자신을 위해 만들었습니다. 저희 둘 다 올해 기회를 찾고 있으며, 면접이 가장 두려운 부분입니다. 긴장해서 말이 막히거나, 최고의 예시를 잊어버리거나, 자신의 답변이 정말 좋았는지 알 수 없는 경우가 많습니다.

대학 모의 면접은 유용하지만 자리가 많지 않습니다. 저는 Hetvi가 면접 전날 밤 11시에 접속해서 자신이 원하는 만큼 마음껏 연습할 수 있으면서도 평가받는 느낌을 받지 않을 무언가를 원했습니다.

데모

🔗 실시간 앱: https://huggingface.co/spaces/EmanAdnan/placement-interview-coach

(노트북에서 Chrome 또는 Edge로 열고, "*AI 모델 로드(Load AI model)"를 클릭한 다음, "*새 질문(New question)"을 클릭하세요.)

Placement Interview Coach home page with the headline and 4 steps

Interview question, answer, a score of 7 out of 10 and the STAR check

코드 (Code)

🔗 출처: https://huggingface.co/spaces/EmanAdnan/placement-interview-coach/tree/main

전체 앱은 백엔드나 API 키 없이 단일 index.html 파일로 구성되어 있습니다. MIT 라이선스이므로 누구나 포크(fork)할 수 있습니다.

구축 과정 (How I Built It)

정적 Hugging Face Space에 무료 호스팅된 단일 HTML 페이지:
브라우저 내 오픈 가중치 모델 (Open-weight models in the browser): WebLLM을 통해 노트북의 GPU에서 Qwen 2.5 3B (기본값), Qwen 2.5 1.5B, 또는 Gemma 2 2B를 WebGPU로 구동합니다. 모델은 한 번 다운로드되며 캐시됩니다.
두 가지 프롬프트가 핵심 역할 수행:
1. _질문(question)_ 프롬프트는 선택한 직무와 회사에 맞는 현실적인 역량 또는 동기 질문을 작성해 줍니다.
2. _피드백(feedback)_ 프롬프트는 고정된 구조(점수, STAR 체크, 팁, 개선 버전, 후속 질문)를 반환합니다. 앱은 답변이 스트리밍되는 동안 이를 점수 링과 별도의 피드백 카드로 변환하여 보여줍니다.
가드레일 (Guardrails):
- 모델에게 경험, 기술 또는 숫자를 절대 지어내지 않도록 지시합니다. 결과가 누락된 경우, 개선 버전에서는 임의로 만들지 않고 _[여기에 당신의 숫자 추가]_와 같이 표시합니다. 과장하는 법을 가르치는 면접 코치는 쓸모없다는 것보다 더 나쁠 것입니다.
- 매우 짧은 답변이나 무작위 키보드 입력은 모델에 도달하기 전에 포착되며, 실제 문장을 요청하는 친근한 메시지가 표시됩니다.
- WebGPU를 사용할 수 없는 경우, 앱은 그 이유를 설명하고 충돌(crashing)하는 대신 클래식한 시작 질문을 제공합니다.

잘못된 점 (What went wrong)과 해결 방법 (and how I fixed it)

Plan A는 작동하지 않았습니다. 처음에는 Gradio를 사용해 Python으로 만들었지만, 현재 Gradio Spaces는 유료 플랜이 필요합니다. 그래서 브라우저에서 완전히 실행되도록 재구축했는데, 이게 더 좋았습니다. 무료이고 답변이 개인 정보로 유지되기 때문입니다.
작은 모델이 제 지침을 복사했습니다. 1.5B 모델의 경우, 피드백이 때때로 제가 입력한 프롬프트 텍스트를 반복하거나 플레이스홀더로 빈칸을 채웠습니다. 저는 기본값을 3B 모델로 변경하고, temperature(온도)를 낮추고, 모든 플레이스홀더가 무엇을 작성해야 하는지 명확하게 지시하는 방향으로 프롬프트를 다시 작성했으며, 출력물에서 남아 있는 모든 지침 텍스트를 정리하여 이 문제를 해결했습니다.
Safari는 아직 WebGPU를 지원하지 않기 때문에, 앱이 이를 감지하고 Chrome이나 Edge를 사용하도록 안내합니다.

오픈 혁신(Open Innovation)이 중요한 이유?

개인 정보 보호: 면접 답변은 개인적인 내용입니다. 모델이 오픈 웨이트(open-weight)이기 때문에 Hetvi의 기기에서 실행되며, 답변이 서버로 전송되지 않습니다.
학생들에게 무료: API 키도 없고, 구독료도 없고, 서버 비용도 없습니다. 링크만 있으면 누구나 연습할 수 있습니다.
투명하고 교체 가능: 어떤 모델이 사용되는지 정확히 볼 수 있고, 드롭다운 메뉴 하나로 Qwen과 Gemma 사이를 전환할 수 있으며, 코드를 포크(fork) 할 수도 있습니다.

다음 계획은?

5개의 질문을 연속으로 하고 마지막에 요약하는 모의 면접 모드
답변 저장 기능, 이를 통해 Hetvi가 개인적인 STAR 스토리 은행을 구축할 수 있도록 합니다.
더 많은 오픈 모델 지원 및 WebGPU 보급에 따른 휴대폰 지원

읽어주셔서 감사합니다! 올해도 인턴십이나 배치(placement)를 준비하고 계시다면 한번 사용해 보세요. 행운을 빕니다! 🎃