ONE STEP AWAY
[Upstage Solar] 나만의 토익 스피킹 AI 튜터 만들기 본문
안녕하세요!
오늘은 Upstage의 강력한 LLM인 Solar API를 활용하여, 토익 스피킹 학습자들을 위한 AI 에이전트 서비스 프로토타입을 제작한 과정을 공유하려고 합니다. 혼자 연습하기 막막한 스피킹 시험, AI가 어떻게 도와줄 수 있을까요?
1. 문제 정의 (Problem Definition)
토익 스피킹 시험을 준비할 때 가장 큰 어려움은 "내가 말한 문장이 문법적으로 맞는지", 그리고 "어떻게 해야 더 높은 점수(IH/AL)를 받을 수 있는지"에 대한 즉각적인 피드백을 받기 어렵다는 점입니다.
- 학원이나 과외는 시간과 비용 부담이 큽니다.
- 혼자 녹음해서 들어보는 것만으로는 구체적인 개선안을 찾기 힘듭니다.
- 단순한 번역기나 문법 교정기로는 시험의 특성(전달력, 전략 등)을 반영한 피드백이 부족합니다.
2. 해결 방안 (Solution) 💡
이러한 문제를 해결하기 위해 Upstage Solar API를 연동한 실시간 AI 피드백 에이전트를 개발했습니다.
- 실제 시험 환경 구현: 데이터셋에서 문제를 불러와 실제 시험과 유사한 UI를 제공합니다.
- 프롬프트 엔지니어링: AI에게 '토익 스피킹 전문 강사'의 역할을 부여하여 단순 교정이 아닌, 시험 전략이 포함된 피드백을 생성합니다.
- 사용자 친화적 인터페이스: React 기반의 깔끔한 UI로 답변 입력부터 피드백 확인까지 한 번에 가능하게 구성했습니다.
3. 핵심 기술 (Key Technologies) 🛠️
입문자분들도 이해하기 쉽게 사용된 기술 스택을 정리해 보았습니다.
- Upstage Solar LLM (핵심 엔진): 32k 토큰의 넓은 문맥 이해도를 바탕으로 복잡한 토익 답변을 정교하게 분석합니다. 한국어와 영어 모두에 뛰어난 성능을 보여 자연스러운 피드백이 가능합니다.
- React (프론트엔드): useState 훅을 사용해 문제 인덱스 관리, 사용자 답변 저장, 로딩 상태 등을 효율적으로 제어합니다.
- Prompt Engineering (전략): buildSystemPrompt와 buildUserPrompt 유틸리티를 통해 AI가 답변의 문법, 어휘, 전달력(Delivery)을 체계적으로 평가하도록 지시합니다.
- React-Markdown: AI가 주는 상세한 피드백을 사용자가 읽기 편한 마크다운 형식으로 시각화합니다.
4. 기대 효과 (Expected Effects) 🚀
이 AI 에이전트를 사용하면 다음과 같은 효과를 기대할 수 있습니다.
- 비용 절감: 언제 어디서든 무료(또는 저렴한 비용)로 전문 강사 수준의 피드백을 받을 수 있습니다.
- 학습 효율 극대화: 본인의 취약점(문법 오류, 단조로운 표현 등)을 즉시 파악하여 반복 연습이 가능합니다.
- 맞춤형 전략 수립: AI가 제안하는 'IH/AL 달성 전략'을 통해 고득점을 위한 구체적인 가이드라인을 얻을 수 있습니다.
저는 오늘 프롬프트 설정하여 AI에게 지시하고 저녁 먹고 왔더니 페이지가 완성되있었습니다 !
방법은 정말 간단합니다.
step1. 데이터를 준비합니다.
저는 유투브에서 "토익스피킹"을 검색했을때 상단에 노출되는 제이크 토익스피킹 영상을 예시 데이터로 사용했는데요,
Comet 브라우저 어시스턴트 기능으로 화면에 있는 문제와 답변 스크립트를 텍스트로 받아 txt 파일을 만들고,
영상을 갤럭시 휴대폰으로 녹음한 음성 파일을 텍스트로 변환한 txt 파일을 하나 만들었습니다.
그러면 문제와 답변만 있는 텍스트파일 1개와 제이크 유투버님의 피드백 내용이 담긴 텍스트파일 총 2개 txt 파일이 준비됩니다.
step2. 프롬프트를 준비합니다.
클로드에게 내가 원하는 웹화면을 있는 그대로 생각나는 언어로 설명하면서 프롬프트 초안을 생성하고
해당 프롬프트를 .py 파일에 담아 AI 가 탑재된 IDE 프로그램 폴더로 옮깁니다.
그리고 다시한번 내가 구현하고 싶은 웹화면을 설명하면서 초안 파일을 참고하여 프롬프트를 생성하도록 지시합니다.
여기서 중요한 것은 Upstage Solar 모델의 API 를 사용하는 것입니다 !
검색창에 "업스테이지 콘솔" 이라고 검색하시면 사이트가 나오는데요,
회원가입하시고 로그인하면 아래와 같은 화면이 메인에 뜹니다.
여기서 up_ 으로 시작하는 값이 API 값이며 개인별로 암호화하여 보관하는 값이기 때문에
코드에 직접 전체를 입력하시면 안되고 .env 라는 파일을 생성하여 별도로 보관하시는 것이 안전합니다.
만약 이미 전체 코드를 공개된 장소에서 오픈하셨다면 새롭게 재발급 받으시는 것을 권장드립니다.
(혹시나 본인도 모르는 사이 비용이 과금되는 것을 막기 위해서에요 ~!! )
그러면 Solasr API 를 사용하여 내가 원하는 웹화면을 구현하기 위한 프롬프팅을 마쳤고,
이제 필요한 패키지가 없다면 설치하고 실행해보시면 됩니다.
저는 일단 Node.js 가 설치되있지 않아서 공식 홈페이지에서 다운을 받았고
터미널에서 cd 명령어로 프로젝트 중인 폴더로 이동한 뒤 npm run dev 명령을 통해 실행을 하시면 됩니다.
이렇게 하면 http 주소가 뜰 텐데요, 브라우저에 해당 주소를 입력하시면 내가 구현하고 싶은 웹화면이 나타납니다 ! ㅎㅎ
이제 자신만의 디테일을 추가하여 다듬는다면 더욱 멋진 에이전트를 구현하실 수 있겠죠!?
맺으며: "누구나 AI 에이전트를 만들 수 있습니다"
이번 프로젝트를 통해 Upstage Solar API가 얼마나 빠르고 정확하게 텍스트를 분석하는지 체감할 수 있었습니다. 복잡한 코딩 없이도 프롬프트 설계만 잘한다면 여러분만의 멋진 학습 에이전트를 만드실 수 있습니다.
// Upstage Solar API를 호출하여 피드백을 받는 핵심 로직
const response = await getFeedback(systemPrompt, userPrompt);
setFeedback(response);이렇게 짧은 호출만으로도 강력한 AI 기능을 내 서비스에 녹여낼 수 있답니다!
사용한 프롬프트와 코드가 궁금하다면? 깃허브 구경가기