TwentyTwentyOne

📘 [7편] 사용자 기록 저장하기 – 면접 이력 관리 & 날짜별 조회이제 우리의 인터뷰 트레이너 앱은질문 → 음성 답변 → GPT 피드백까지 전 과정을 완성했죠.이번 편에서는 사용자의 인터뷰 기록을 저장하고,날짜별로 복습/조회할 수 있도록 데이터 관리 기능을 추가합니다.🎯 이번 목표✅ 면접 진행 기록을 Firebase에 저장✅ 날짜별 인터뷰 결과 조회 기능✅ 간단한 히스토리 목록 UI 구현☁️ Firebase Firestore 연동✅ 1. Firebase 설치 및 초기화npm install firebase✅ 2. firebase.js// src/firebase.jsimport { initializeApp } from 'firebase/app';import { getFirestore } from 'fi..

📘 [6편] 인터뷰 시뮬레이션 루틴 만들기 – 질문 3개, 답변 3개, 피드백 3개이제 본격적으로 실제 면접처럼 질문 3개를 연속으로 진행하고,각각에 실시간으로 답변하고 평가받는 루틴을 구성해봅니다.GPT와 사용자가 대화하듯 인터뷰를 진행하며,각 질문에 대해 개별 피드백과 마지막 종합 피드백을 받아보는 게 목표입니다.🎯 이번 목표✅ GPT가 3개의 질문을 차례대로 제시✅ 질문 1 → 답변 1 → 피드백 1 (순차 진행)✅ 모든 피드백을 배열로 저장하여 표시✅ 마지막엔 종합 평가 요약🧠 GPT 질문 프롬프트 설계당신은 채용 면접관입니다. 프론트엔드 개발자 지원자에게 실전 면접 질문 3가지를 하나씩 순서대로 제시해주세요.질문은 아래 형식의 JSON 배열로 주세요:[ "첫 번째 질문", "두 번째 질..

📘 [5편] GPT 피드백을 시각화하자 – 점수 카드 & 개선 포인트 UI 구현지난 편에서 GPT가 답변을 평가하고 JSON 형태로 피드백을 주는 구조를 완성했죠.이제는 이 데이터를 사용자가 직관적으로 이해할 수 있도록깔끔한 UI로 시각화할 차례입니다.이번 글에서는 React 기준으로점수 카드, 종합 피드백 텍스트, 개선 포인트 툴팁 등을 구성해봅니다.🎯 이번 목표✅ GPT 피드백 점수 시각화 카드 만들기✅ 피드백 본문 렌더링✅ 개선 포인트 강조 표현✅ 모바일 대응 및 애니메이션 고려 (선택)🧾 GPT 응답 구조 복습{ "structure": 4, "delivery": 3, "content": 5, "vocabulary": 4, "feedback": "답변은 전체적으로 구조화되어 있으며....

📘 [4편] GPT가 면접 답변을 평가한다 – 피드백 프롬프트 설계자, 이젠 사용자가 말한 답변 텍스트를 GPT에게 넘겨서면접관처럼 피드백을 받는 기능을 구현해봅니다.이번 편의 핵심은단순한 "좋아요/나빠요"가 아니라구조, 전달력, 내용성, 어휘력 등을 기준으로 평가받는 시스템을 만드는 것!🎯 이번 목표✅ 답변을 GPT에 전달할 수 있는 프롬프트 설계✅ 면접관 역할을 명시하여 평가 유도✅ 구조화된 피드백(JSON) 형태로 받기✅ 프론트에서 시각화 준비💬 GPT 프롬프트 예시 (한국어 기준)당신은 채용 면접 전문가입니다. 아래 면접 답변을 보고 다음 항목에 대해 평가해주세요:1. 구조 (논리적인 흐름)2. 전달력 (말투, 어투, 명확성)3. 내용성 (질문에 대한 핵심 포함 여부)4. 어휘력 (다양한 단..

📘 [3편] 음성으로 면접 답변하기 – STT(음성 인식) 기능 추가이제 GPT 면접관이 질문을 던지면,사용자는 “말”로 답변할 수 있어야 하죠.이번 편에서는 브라우저나 앱에서 음성 인식(STT) 기능을 넣어사용자가 실제로 말한 내용을 텍스트로 변환하는 기능을 구현합니다.🎯 이번 목표✅ Web에서는 Web Speech API로 음성 인식 구현✅ React Native는 react-native-voice 설치 안내✅ 실시간 음성 인식 결과 표시✅ 인식된 답변을 GPT에 전달할 준비 완료💬 웹 기준: Web Speech API (크롬 전용)✅ 1. SpeechRecognition 초기화const SpeechRecognition = window.SpeechRecognition || window.webki..

🎯 [1편] AI 인터뷰 트레이너 앱 – 왜 만들려고 했는가?2025년 현재, 누가 취업 준비를 안 해봤겠냐마는…진짜로 “AI가 면접관 역할까지 대신할 수 있다면?”이런 상상을 한 번쯤 해봤을 거다.나도 그랬다.그래서, 진짜로 만들기 시작했다.면접이 제일 무서운 이유?"말을 해야 되니까."즉흥적으로, 구조 있게, 조리 있게 말하는 건 훈련 없이는 절대 불가능하다.하지만 매일 사람 붙잡고 모의 면접 보기엔 너무 번거롭고 부담스럽다.여기서 GPT가 등장한다.🧠 프로젝트 핵심 컨셉GPT가 면접관 역할을 하고→ 사용자는 음성으로 답변하고→ 답변 내용을 GPT가 실시간 평가해준다.👩‍💻 주요 기능 개요기능 설명1. GPT 질문 생성사용자의 직무/산업을 기반으로 상황형 질문 생성2. 음성 입력사용자가 실제 ..

📘 [8편] React Native 앱 배포 & 포트폴리오 정리 – APK 내보내기부터 실전 활용까지기능 개발, 디자인, 음성 인터페이스까지 모두 완료되었다면이제는 직접 만든 앱을 배포하고포트폴리오나 블로그, 깃허브 등에 잘 정리해두는 것이 중요합니다.이번 글에서는 React Native 기반 Expo 앱을APK로 빌드하거나 배포하고,포트폴리오로 정리하는 방법을 소개합니다.🎯 이번 목표✅ Android APK 파일 생성✅ Expo EAS Build 소개✅ GitHub 프로젝트 구조 정리✅ 포트폴리오에 어떻게 활용할지 가이드🚀 1. Expo EAS Build로 Android APK 만들기1) Expo EAS 설치npm install -g eas-clieas login2) 프로젝트 초기화eas buil..

📘 [7편] 디자인 시스템 정리 – 깔끔한 UI로 앱 완성도 높이기이제 기능은 거의 완성됐습니다.이번 편에서는 앱의 전체적인 디자인을 정돈하고,사용자에게 신뢰감을 주는 깔끔한 UI를 구성합니다.🎯 이번 목표✅ 다크모드 대응✅ 디자인 컴포넌트 분리✅ 공통 스타일 적용 (색상, 폰트, 간격)✅ 기본 앱 아이콘 / 스플래시 설정 (Expo 사용자 한정)🎨 1. 디자인 토큰 및 스타일 통일📄 src/constants/theme.jsexport const colors = { primary: '#007aff', background: '#f9f9f9', text: '#222', card: '#fff', border: '#ccc', completed: '#d3ffd3', darkBackground:..

📘 [6편] 음성 입력 & 음성 응답 기능 – 손 안 대고 GPT 챗봇과 대화하자이번 편에서는 음성으로 할 일을 말하면 자동으로 등록되는,그리고 GPT의 응답을 음성으로 읽어주는 기능을 구현합니다.이를 위해 React Native의 expo-speech와 [expo-speech-to-text (webview/Android 기반)]를 사용할 수 있습니다.단, 음성 입력 기능은 안드로이드에서 더 안정적하게 작동합니다.🎯 목표✅ 음성 입력 버튼 → 텍스트로 변환 → GPT로 전송✅ GPT 응답 → TTS로 읽어주기✅ 기존 챗봇 UI에 통합🧱 1. TTS(Text to Speech) 기능 – GPT 응답을 음성으로 읽기1) 설치npx expo install expo-speech📄 utils/speak.j..

📘 [5편] TODO 완료 처리 & 삭제 기능 + 화면 전환 구성하기이제 앱이 꽤 스마트해졌습니다.이번 글에서는 다음 기능을 추가합니다:✅ 할 일을 완료 상태로 변경하거나🗑️ 삭제할 수 있도록 처리하고,🧭 챗봇 화면과 TODO 리스트 화면을 전환할 수 있는 구조(Navigation)를 도입합니다.🎯 목표 기능✅ 할 일 완료 여부 변경 (check/uncheck)✅ 할 일 삭제✅ Chat ↔ 할 일 화면 전환 (React Navigation 적용)🛠️ 1. React Navigation 설치 및 세팅npm install @react-navigation/nativenpx expo install react-native-screens react-native-safe-area-context react-n..