Part 4 마지막에 코멘트했던 프론트엔드 화면에 API를 호출하여 실제 기능을 구현하도록 구성해보았다. 참고로 프론트엔트 화면은 ChatGPT를 사용하여 기 설계된 wireframe을 캡처 후 업로드 하여 화면을 코딩시켰고, 이후 API 호출에 맞게 화면을 리펙토링 하여 각 화면별로 기능을 구현하였다.
LLMEdubank 처음 진입하면 목록 현재 등록되어 있는 문항 정보들이 목록으로 표시된다. 학습자에게 전달 할 문제가 있다면 사용자 ID를 입력 후 전송을 누르면 생성된 문제를 학습 할 수 있는 전용 URL을 학습자에게 메일로 발송한다.

왼쪽 상단의 등록 메뉴를 클릭하면 개념 및 지문형 문제를 등록하는 화면으로 이동한다. 등록화면에서는 작업자가 원하는 모델을 선택하고 생성하고자 하는 프롬프트를 작성 후 요청하면, 생성형 AI 기반으로 구현된 API를 호출하여 응답 받는다.

학습자에게 발송된 메일은 아래 화면 처럼 수신을 받게 되며, 문제를 풀이할 수 있는 전용 URL을 통해 문제 풀이 화면으로 이동한다.

문제 풀이 화면에서는 생성형AI를 통해 생성된 개념과 지문형 문제를 풀이하며, 풀이 결과를 저장한다.

Part1 부터 Part5 현재까지 생성형 AI기반 문제은행 시스템을 만들어 보았다. 틈틈히 시간 나는대로 작업을 하다보니, 전체적인 작업 기간 대비 산출물이 잘 나왔나에 대해선 개인적으로 아쉬움이 남는다..
그러나, 생성형 AI라는 생소한 영역을 어떻게 일반적인 시스템에 통합하는지에 대해 깊이 있게 고민해볼 수 있었고, 미지의 영역이었던 Foundation Model이 각 CSP사별로 어떻게 동작하고, 이를 Frontend/Backend/Database 의 3-Tire에 어떻게 통합해야 하는지에 대한 나만의 노하우를 습득할 수 있게 되어 나름대로 뿌듯한 사이드 프로젝트로 기억될 것 같다.
아래 영상은 지난 3개월동안 혼자서(?) 진행했던 사이드 프로젝트에 대한 결과물을 동영상으로 촬영하였다. 생성형 AI을 어떻게 도입해야할까 고민을 하고 있는 현업 개발자분들에게 조금이나마 도움이 되었으면 한다.

위의 프로젝트를 로컬 환경에서 구성 했다면 많이 아쉬울듯 해, Bedrock도 쓰는 마당에(?) 시스템을 AWS에 구성해 보았습니다.
(무려 API G/W + Lambda + Bedrock 조합!!! ~~ I Love Serverless.)
어떻게 구성했는지는 다음 시간에...
(허접한 설계서 하나를 힌트로...)
