DYO 공부하는 블로그
[Frobot] CS 평가 면접 봇 웹페이지 제작기 ( 1 ) 본문
면접준비를 하면서 가장 불편하다고 느낀 지점은, 정량적으로 내 수준을 평가해주면 어디가 부족한지 이해 할 수 있을 것 같은데, 면접은 그게 쉽지 않다. 비슷한 결을 가지고는 있지만 질문 개수도 정말 다양하고, 자기 자신을 평가하기가 애매한 지점이 있다.
그래서 GPT를 이용해 기술 면접 준비를 하고 있었는데, 평가는 좋지만 가장 불편한 지점은 내가 어느 정도 했는지 통계를 내거나, 어떤 질문이 잘못되었는지 잘 알기 어렵다는 점이다. ( 세션이 길어지면 오류 확률이 올라가니까. )
프로젝트를 시작할 때는 자신의 불편한 점부터 해소하는 것으로 시작하라는 이야기를 들은 적이 있다. 그래서 CS평가 면접 봇 웹페이지 프로젝트를 시작하기로 결심했다.
기획서
📝 FroBot [가제]
프론트엔드 면접 질문을 AI에게 제출해 채점받고, 채점 기록은 DB에 기록됩니다. 유저는 채점 결과와 제출한 답안, 점수 기록을 시각적으로 확인할 수 있습니다.
📌 페이지
- 메인 페이지 ( 채팅 )
- 문제 범위 선택
- 문제 제출 채팅창
- 설정 메뉴
- 통계 메뉴
- 유저 대시보드
- 유저가 제출한 정답과 평가 정보
- 유저 이용 통계 ( 깃허브 잔디 형식 사용 streak 시스템, 분야별 채점 통계 등 )
- 문제집
- 문제 목록 공유
- 문제 가져오기
🖥️ 핵심 기능
- 문제 제시
- 랜덤으로 문제를 AI가 선택하여 유저에게 표출
- 유저가 문제를 선택하여 정답을 제출
- 유저의 답변에 대해 꼬리질문
- 답변 채점
- 사전 정의된 프롬프트를 기준으로 답변을 채점
- 유저의 답변에 대해 피드백과 채점 점수를 제시
- 유저에게 점수 그래프를 제시
- 유저의 답변과 AI 피드백을 서버에 저장
- 대시보드
- 유저가 제출한 정답과 평가 정보 표출
- 그래프를 통한 유저 점수 통계 시각화
- 깃허브 잔디 형식 사용 streak 시스템
🧩 문제 정의
- AI봇은 있지만 사용자가 부족하거나 잘 알고 있는 부분을 정돈된 형태로 파악하기 어려움
- 기존 만들어진 AI 면접 봇 페이지는 서비스가 중단되거나 정보 저장을 지원하지 않음
💁♂️ 목표 사용자
- 면접을 준비하는 프론트엔드 개발자
- CS지식 점검을 하고 싶은 개발자
✅ 사용자 흐름
- 사용자는 메인 페이지에서 질문 범위를 선택한다.
- 사용자 질문 범위에서 무작위로 질문 1개를 출력한다.
- 사용자가 질문을 보고, 답변을 입력해 제출한다.
- AI가 해당 답변을 받고, 질문의 목적에 적절한지 평가한다.
- 평가된 점수와 피드백을 사용자에게 보여준다.
- 좌측의 질문 목록에 사용자의 점수에 따라 아이콘이 갱신된다.
- 사용자가 대시보드 페이지로 이동해 이전 답변 목록과 통계를 확인한다.
💡유사 서비스 분석
- GPT 면접왕
- Frontend Handbook
✨ 차별점
- 데이터가 정돈된 상태로 저장되지 않는 ai봇과 달리, 답변 목록이 정돈된 상태로 제공된다.
- 연속 달성, 잔디 시스템 등과 같이 사용자의 사용 통계를 시각적으로 제시할 수 있다.
- 유저가 강한 부분과 약한 부분을 통계로 확인할 수 있다.
디자인 문서 작성
나는 디자이너도 아니고, 그저 figma 작업에 익숙할 뿐이니 최대한 깔끔하게 구성해보려고 했다.
대시보드는 차트가 많아 직접 그릴 엄두가 안 나서 제미나이한테 기능을 설명하고 UI를 그려달라고 요청했는데, 이런 느낌이다.
직접 구현할 때는 왼쪽 사이드바를 빼고 다른 메뉴를 넣어야 할 것 같다.
마무리
혼자서 진행하다 보면 길을 자주 잃을 것 같아, 블로그에 기록할 겸 요구사항 정의, 디자인 문서, MVP 정의까지 기록하면서 진행해보려고 한다.
함 가보자고.
현 상태....
취직한 곳이 Vue 기반이라, 기존에 작성하던 코드를 사용할 수 없게 되었습니다. 다른 프로젝트와 공부 진행중이에요