GPTeacher 프로젝트
프로젝트 개요
ChatGPT로 영어를 공부하며 생기는 불편함을 해소하고, 학습 효율을 높여주기 위한 웹 어플리케이션을 만드는 프로젝트입니다. 다양한 자연어 처리 API를 활용하여 사용자가 영어를 효과적으로 학습할 수 있도록 도와줍니다.
•
프로젝트명
•
팀명
•
진행 기간
•
참여 인원
: GPTeacher
: 수아와아재들
: 2023.03.27 ~ 2023.05.09
: 5명
•
멀티캠퍼스 자바 취업캠프 6회차 프로젝트 경진대회 최우수상 수상 
프로젝트 제작 동기
최근 자연어 AI 모델인 ChatGPT를 이용해 영어공부하는 방법이 매우 각광받고 있습니다. 하지만 ChatGPT를 이용해 영어공부를 할 경우 아래처럼 여러 문제점들이 발생합니다.
•
상황극을 하자고 했는데 GPT 혼자 모든 대본을 줄줄 외워버림
•
GPT와 대화는 자연스럽게 이어가면서도 내가 쓴 영어 문장에 대한 피드백은 또 따로 받고싶을 때, GPT에게 요청하는 것이 매우 번잡하고 주의력을 떨어뜨림
•
피드백을 달라고 정확히 요청하기도 쉽지 않음
•
음성으로 대화를 주고받을 수 없음
•
이전 학습 내역들을 저장하고 복습하기 어려움
이런 문제점을 해결하고자 자연어 처리 API를 통해 학습을 보조해주는 애플리케이션을 제작하였습니다.
사용 기술 스택
•
백엔드
Spring Framework 5.2.23
Java 11
Apache Tomcat
JSP
Maven
•
프론트엔드
HTML/CSS
Javascript ES6+
Bootstrap 5.2
JQuery
•
DB
Oracle DB 11g XE
MyBatis
Redis
•
형상관리
Git, Github
Sourcetree
•
IDE
IntelliJ IDEA
•
협업 툴
Figma - UI/UX 설계
Diagram.net - 유즈케이스 작성
ERD cloud - DB 설계
Google docs
•
기타
Lombok
주요 기능
랜딩페이지
메인페이지
슬라이딩 배너를 통해 학습하기로 넘어갈 수 있고, 활용법을 소개합니다.
학습 기능 - 말하기 연습
시험 선택: 어학 시험 중 하나를 선택해 말하기 연습을 진행할 수 있습니다.
음성 답변: 문제가 출제되면 음성으로 답변을 제출할 수 있습니다.
스크립트 교정 화면: 유저가 말한 스크립트를 교정해주고, 실제 AI 음성을 통해 들어볼 수 있습니다.
문장별 분석 화면: 또한 문장별로 분석해 상세한 피드백을 해줍니다. 좋아요를 표시하거나 플래시카드에 넣어 복습할 수 있습니다.
발음 평가 받기: 각 문장별로 발음 정확도를 평가받을 수 있습니다.
글쓰기 연습
주제 선정: 직접 주제를 선정하거나 GPT를 통해 랜덤 질문을 받을 수 있습니다.
답변 제출: 글쓰기를 통해 답변을 제출할 수 있습니다.
단어 추천받기: 현재 질문과 글쓰기 내용을 통해 GPT로부터 다음에 올 단어를 추천받을 수 있습니다.
이후 과정은 스크립트 교정 화면 → 문장별 분석 화면으로, 말하기 연습과 동일합니다.
회화 연습
주제 선정: GPT와 대화를 주고받을 가상 상황을 설정할 수 있습니다. 주제를 랜덤 추천 받거나 역할을 바꿀 수도 있습니다.
회화 연습: GPT와 음성으로 대화를 주고받으면서 동시에 실시간으로 교정을 받을 수 있습니다. 각 문장은 실시간으로 발음 평가를 받아볼 수 있고, 좋아요 및 플래시카드 저장이 가능합니다.
이후 대화를 그만하면 문장별 분석 화면으로 넘어갑니다.
마이페이지
최근 학습: 최근 진행한 두 학습 정보 출력 및 연간 학습 히트맵(잔디심기)을 보여줍니다.
학습 이력: 학습한 이력들을 여러 필터를 통해 조회할 수 있습니다.
나의 문장: 학습한 문장들을 여러 필터를 통해 조회할 수 있습니다.
플래시 카드: 나의 문장들을 일정한 간격으로 복습할 수 있는 기능입니다.
부가 기능
회원가입 및 로그인
회원가입 화면
로그인 화면
•
SMTP + Redis를 이용한 이메일 인증 방식 구현
•
OAuth 2.0을 통한 구글 로그인 구현
•
JSR-303 Validator(Hibernate)를 통한 유효성 검증
계정 관리
회원 정보 수정
비밀번호 변경
회원 탈퇴
커뮤니티
•
사용자 간 자유롭게 소통하고 GPT의 피드백에 대한 질문/답변을 할 수 있는 커뮤니티입니다.
게시글 리스트
게시글 작성: 나의 문장을 첨부해서 질문 또는 정보 공유가 가능하도록 했습니다.
•
나의 문장은 필터링을 통해 탐색할 수 있고, 무한 스크롤을 페이징을 구현했습니다.
게시글 조회: 커뮤니티에 작성된 게시글을 조회하는 화면입니다.
게시글 수정: 첨부한 문장을 제거하거나 다른 문장으로 교체할 수 있습니다.
댓글 기능: 대댓글(1단), 신고 기능 등
어드민 페이지
사용자 통계: 월별 가입자 분석 및 연령별 사용자 분석
회원 관리: 회원의 활동 내역을 확인, 차단 및 해제 기능
신고 관리: 신고된 글 및 댓글 확인 가능
고객센터
공지사항
자주 묻는 질문
문의사항
프로젝트 기여 내용
프로젝트 주제 제공
•
팀원 분들이 저의 아이디어를 긍정적으로 봐주셔서 프로젝트 주제로 선정되었습니다.
데모 애플리케이션 제작
•
프로젝트의 뿌리가 되는 OpenAI사의 Chat GPT 및 Whisper(음성 인식) API를 테스트하고 팀원 분들이 기본 사용법을 참조하실 수 있도록 데모 버전 어플리케이션을 제작해 공유했습니다( GitHub 링크)
GitHub 링크)•
실제 사용자가 제출한 영어 스크립트를 GPT에게 전달해 문장별로 분석하고 JSON 형태로 돌려받는 로직까지 테스트하여 본 어플리케이션의 실현 가능성을 사전 검증하였습니다.
•
이 과정에서 한국전자통신연구원(ETRI)의 발음 평가 API도 테스트 하였는데, ETRI 서버의 응답이 불안정하여 Microsoft의 Azure 발음평가 API로 전환하게 되었습니다.
자연어 처리 관련 API Client 클래스 제작 (총 5개 중 4개 API에 기여)
•
OpenAI ChatGPT API client (Chat GPT)
◦
GPT-3.5-turbo 모델을 사용합니다. 이전 모델인 davinci-003이나 이후 모델인 GPT-4보다 10배 저렴하고, GPT-4보다 정확도는 떨어지지만 속도는 더 빠른 것이 특징입니다.
•
OpenAI Whisper API client (음성 → 텍스트 변환 및 자동 변역)
•
MS Azure Pronunciation Accessment API client (발음 평가)
◦
라이브러리(Record.JS)를 이용해 API 요청 스펙에 맞게 wav 파일 추출 및 포맷 변환
•
Naver Cloud Platform TTS API client (텍스트 → 음성)
보조 기능
그 밖에 아래 보조 기능들을 구현하였습니다.
•
학습하기
◦
글쓰기 연습 기능
▪
단어 추천받기 기능을 추가하여 글쓰기 진행 시 힌트를 받을 수 있도록 함
◦
회화 연습 기능
▪
유저가 GPT와 가상 상황에서 영어로 대화를 진행하면 실시간으로 유저의 발화를 피드백
▪
MS Azure Speech API를 통한 문장별 발음 평가 기능 구현
•
회원 기능
◦
회원가입 및 로그인
▪
OAuth 2.0 회원가입 및 로그인 (Google)
▪
회원 정보 변경, 회원 탈퇴 기능 구현
▪
Redis를 통한 이메일 인증 관리
◦
비밀번호 암호화
▪
PBKDF2 알고리즘 사용
▪
각 유저별로 UUID를 고유 salf로 부여하여 rainbow table 공격 방지
▪
SHA-256 방식으로 400,000회 반복 해싱하도록 하여 개별 유저에 대한 brute-force 공격 방지
•
커뮤니티 기능
◦
기본 게시판(글, 댓글) 기능 및 글, 댓글 신고 기능 구현
◦
게시판 문장 첨부 기능 구현
프로젝트 기반 설정
•
라이브러리 의존성 관련 설정
•
패키지 구조 설정
•
주요 API key 관리
UI/UX
•
디자인 컨셉 설정 - 초기 아이디어 발표 시 제가 만들었던 프로토타입으로 프로젝트 디자인 컨셉이 정해졌습니다.
초기 아이디어 발표 시 만든 프로토타입
•
협업 툴 Figma 컴포넌트 관리
과거 스케치업이라는 3D 프로그램을 다룬 경험으로 컴포넌트 개념에 친숙했고, 피그마를 다루는 데 도움이 되었습니다. 레이아웃의 일관성을 유지하고 중복되는 작업을 제거했습니다.
기타
•
약 4000라인의 시연용 데이터 PL/SQL을 작성해 일관된 시연 데이터를 확보했습니다.
•
발표 시연을 담당했습니다.
•
그 외 노션 정리 노하우를 살려 프로젝트 대시보드를 제공하여 팀 생산성을 제고했습니다.
•
프로젝트에 상대적으로 많은 양의 코드를 기여했습니다(#1).
개선할 점
•
배포를 고려하지 못한 기술 스택
AWS Elastic Binstalk를 통해 배포를 시도했는데, 무료 버전인 free-tier에서는 tomcat을 8.5까지만 지원하고(본 프로젝트는 tomcat 9) oracle DB는 지원하지 않아서 배포를 하지 못했습니다. 기술 스택도 배포 용이성을 고려해서 설정해야겠다고 느꼈습니다.
•
Javascript 객체지향 프로그래밍 부족
JS 개념이 부실하여 객체지향을 적용하지 못했습니다. 리팩터링 시에는 모듈화를 통한 객체지향을 적용할 예정입니다.
•
파일 입출력
음성 데이터를 다룰 때 파일로 서버에 임시 저장했다가 HTTP 요청을 보내는데, 불필요한 파일 입출력을 생략할 수 있으면 성능이 크게 올라갈 것 같습니다. 실제 운영 시에는 이 파일 입출력 부분이 큰 병목 지점이 될 것 같다는 생각이 듭니다.
•
명확한 변수명 지정
예를 들어 ChatGpt를 API 단에서는 Assistant라고 하는데, 유저가 볼 때는 GPT로 보여야 했습니다. 이 과정에서 JS에서는 GPT, Java에서는 Assistant 등으로 다르게 불렸는데, 이를 사전에 통일하여 명확한 컨벤션을 정해 놓아야겠다고 생각했습니다.
•
로그인 관련
세션을 통해 로그인 상태를 관리했는데, 추후에 분산 서버 등을 고려해 JWT로 연결 상태를 클라이언트 쪽에 저장할 수 있도록 하는 것이 좋다는 생각이 들었습니다.