Frontend Kit – AI 문답 기능 도입 (Gemma 3 27B)

Frontend Kit은 프론트엔드 면접 질문을 플래시카드 형태로 학습할 수 있도록 만든 PWA 웹앱입니다.

기존에는 면접 질문을 학습 하기 위해 잘 정리된 GitHub 저장소나 블로그를 직접 북마크 하여 학습했지만, 모바일 환경에서 더 편하게 학습하기 위해 카드 기반 UI로 재구성했습니다.

프론트엔드 개발자 면접 준비 ❘ Frontend Kit 초기 버전

초기 버전은 복습 중심 구조였습니다.

• 스와이프 / 버튼으로 카드 넘기기
• 답변 슬라이드 애니메이션으로 공개
• 6개 카테고리 필터 (CS, HTML/CSS, JavaScript, React, 자료구조, 알고리즘)
• 랜덤 셔플 모드
• 다크모드 / 라이트모드
• 글자 크기 조절 (소 / 중 / 대)
• 키보드 단축키 (← →, Space / Enter)
• PWA 지원 (홈 화면 추가, 오프라인 접속)

하지만 사용하면서 한 가지 한계가 명확해졌습니다.

 

학습을 하다가 더 깊은 설명이 필요하면 앱을 벗어나 검색하거나 별도의 AI 앱을 실행해야 했습니다.

 

이 문제를 해결하기 위해 앱 내부 AI 문답 기능을 도입했습니다.

프론트엔드 개발자 면접 준비 ❘ Frontend Kit AI 문답 기능

---

AI 모델 선정 기준

Google의 Gemini API를 검토하며 여러 모델을 비교했습니다.

 

 

처음에는 참고했던 프로젝트에서 사용 중이던 Gemini 2.5 Flash 모델을 우선적으로 고려했습니다.

응답 속도가 빠르고, 비교적 가볍게 사용할 수 있는 모델이었기 때문입니다.

 

하지만 무료 계정 기준으로 일일 요청 수가 20회로 제한되어 있었습니다.

학습 도구 특성상 사용자가 여러 번 질문하고 반복 학습하는 구조이기 때문에, 이 제한은 서비스 운영 측면에서 명확한 제약이 될 수 있다고 판단했습니다.

 

반면, Gemma 3 27B 모델은 일일 약 14.4K(14,400회) 수준의 요청을 처리할 수 있었기 때문에, 사용자가 부담 없이 질문할 수 있는 환경을 만들기에 더 적합하다고 판단했습니다.

 

그 결과, 최종적으로 Gemma 3 27B 모델을 선택하게 되었습니다.

---

Gemini 2.5 Flash vs Gemma 3 27B의 차이

두 모델을 사용하면서 느낀 가장 큰 차이점은 다음과 같습니다.

 

Gemini 2.5 Flash는 systemInstruction을 별도로 설정할 수 있지만, Gemma 3 27B는 이를 직접 지원하지 않는다는 점입니다.

 

따라서 시스템 프롬프트를 옵션으로 전달하는 대신, 첫 번째 turn에 직접 포함시키는 방식으로 구현했습니다.

const BASE_SYSTEM_PROMPT = `당신은 프론트엔드 개발자 면접 준비를 돕는 AI 튜터입니다.
JavaScript, React, CSS, CS, 자료구조, 알고리즘 등 프론트엔드 관련 개념에 대해 명확하고 이해하기 쉽게 설명해 주세요.
간결하게 답변하되, 필요한 경우 코드 예시를 포함하세요.
항상 한국어로 답변해 주세요.`;

const systemPrompt = cardContext
  ? `${BASE_SYSTEM_PROMPT}

현재 사용자가 학습 중인 플래시카드:
질문: ${cardContext.question}
답변: ${cardContext.answer}`
  : BASE_SYSTEM_PROMPT;

// Gemma는 systemInstruction을 지원하지 않기 때문에
// 첫 번째 turn에 systemPrompt를 직접 주입
const contents = [
  { role: "user" as const, parts: [{ text: systemPrompt }] },
  { role: "model" as const, parts: [{ text: "알겠습니다. 프론트엔드 면접 준비를 도와드리겠습니다." }] },
  { role: "user" as const, parts: [{ text: message }] },
];

const response = await ai.models.generateContent({
  model: "gemma-3-27b-it",
  contents,
});

 

실제로 테스트해보니 예상보다 답변 품질이 안정적이었고, 충분히 학습 보조 도구로 활용할 수 있는 수준의 답변을 제공했습니다.

---

예상치 못한 과금 이슈

API 키 생성 화면

 

API 키를 발급받고 Cloud Console을 설정하던 중, 의도치 않게 유료 플랜(Tier 1)으로 전환되는 일이 있었습니다.

 

가볍게 테스트로 7 차례 질문을 보냈을 뿐이었지만, 다음 날 13원이 청구된 내역을 확인했습니다.

 

다행히 문제를 빠르게 인지하고 프로젝트를 삭제한 뒤, 무료 계정 기준으로 다시 설정하여 더 큰 과금으로 이어지는 상황은 막을 수 있었습니다.

 

혹시 이 글을 참고하시는 분이 있다면, API를 사용하기 전에 현재 계정이 무료 플랜인지 유료 플랜인지 반드시 확인하시는 것을 권장드립니다!

---

느낀 점

이 프로젝트의 초기 질문을 구성할 수 있었던 것은 평소 참고하던 GitHub 저장소 prepare_frontend_interview의 작성자이신 이준희 님께서 흔쾌히 사용을 허락해 주신 덕분입니다.

 

또한 LinkedIn에서 비즈니스 로직을 입력하면 Flow Chart를 자동으로 그려주는 AI 프로젝트를 보고, "나도 학습 도구에 AI를 접목해볼 수 있지 않을까?"라는 영감을 받았습니다.

 

이 프로젝트를 시작하기 전까지는 AI API를 활용한 기능은 모두 비용이 드는 영역이라고 생각했습니다.

 

하지만 Gemini API를 활용하면서, 무료 플랜 범위 내에서도 충분히 구현할 수 있다는 것을 직접 경험할 수 있었습니다.

GitHub

GitHub - umsungjun/frontend-kit: 프론트엔드 개발자 면접 준비를 위한 플래시카드 웹앱입니다. 출퇴근

 

프론트엔드 개발자 면접 준비 | Frontend Kit

프론트엔드 개발자 면접 준비 | Frontend Kit