4BFC/ExamLab

한성대학교 졸업 프로젝트

ExamLab

배포 링크
https://exam-lab.store/

팀 노션   |   개발위키   |   기획서   |   그라운드 룰
figma   |   백로그

📄 목차

• 📄 목차
• 📝 프로젝트 개요
• 💡 핵심 기능
  • 빠른 맞춤 검색
  • AI 문제 생성
  • PDF 시험지 생성
• 🛠️ 기술 스택
• 🖇️ 시스템 구조도
• 🔎 FE 기술적 도전
  • 사이드바 네비게이션 구현
  • 문제 검색 페이지의 구성
  • 문제 편집 툴 제작
  • PDF 변환
• 🔎 BE 기술적 도전
  • 테스트코드로 Swagger생성
  • 서버 성능에 맞춰 DB 구축
  • 데이터 베이스 선택을 위해 추상화를 사용해서 NoSQL, SQL 둘 다 사용
  • Testcontainer를 이용한 Test코드 작성
  • AI 문제 생성하기
• 🧑🏻‍💻 팀원 소개 👩🏻‍💻

📝 프로젝트 개요

웹 프로젝트 “시험지 연구소"는 사용자 중심의 효율적인 학습 도구를 제공하는 것을 목표로 합니다. 저희는 문제에 태그, 검색어와 같은 조건을 통해 맞춤형 시험지를 생성합니다. 손쉽게 AI문제 생성하고 활용할 수 있습니다. 사용자는 제작한 시험지를 pdf로 생성 및 출력이 가능하며 이를 통해 효율적인 학습 및 점검이 가능합니다.

💡 핵심 기능

빠른 맞춤 검색

Elasticsearch 검색 엔진을 활용하여, 사용자는 검색어와 태그를 통해 원하는 문제를 빠르고 정확하게 찾을 수 있습니다. 다양한 주제, 난이도, 문제 유형 등을 설정하여 필요한 문제를 즉시 검색해 맞춤형 시험지를 생성해 보세요.

AI 문제 생성

최신 GPT-4o를 사용하여 학습 자료를 기반으로 10초 만에 5개의 문제를 자동 생성합니다. 빠르고 정확한 문제 생성으로 학습 효율을 높이세요.

PDF 시험지 생성

사용자가 선택한 문제들을 모아 표준화된 형태로 시험지를 생성하고 출력 할 수 있습니다. '나만의 시험지'를 통해 효율적인 학습과 출제가 가능한 PDF 시험지를 만들어보세요.

🛠️ 기술 스택

분류	기술 스택
개발 도구
언어
데이터 베이스
프레임 워크
AI
배포
협업

🖇️ 시스템 구조도

🔎 FE 기술적 도전

사이드바 네비게이션 구현

• 페이지의 가독성을 높이기 위해 상단 네비게이션바 대신 사이드바를 구현하였습니다.
• 사이드바는 모든 페이지에서 활용되며, 상태에 따라 동적으로 움직이도록 설계되었습니다.
• 이 과정에서 전역 상태 관리와 관련된 여러 어려움이 있었지만, 이를 통해 인터페이스의 일관성을 유지할 수 있었습니다.

문제 검색 페이지의 구성

• 문제, 지문, 이미지, 선택지 등 문제의 규격이 제각각이라 사용자에게 보기 좋게 페이지를 구성하는 데 어려움이 있었습니다.
• 사용자가 원하는 문제를 장바구니처럼 담아 나만의 시험지를 제작할 수 있도록 하였으며, 문제를 한눈에 볼 수 있고 중복되지 않도록 구성했습니다.

문제 편집 툴 제작

• 필요한 편집 기능만을 제공하여 입력 칸을 제어하기 위해 직접 편집 툴을 제작했습니다.
• 사용자에게 필요한 편집 기능을 제공하기 위해 라이브러리를 사용하지 않고 직접 편집 툴을 제작하였습니다.
• 단순히 input 요소를 사용하는 대신 contentEditable을 활용하고 다양한 이벤트를 통해 사용자 입력의 UX를 개선하고자 했습니다.
• 이 과정에서 사용자 경험(UX) 요소와 디자인적인 고려 사항을 배우게 되었습니다.
• 아쉬운 점은 execCommand() 메소드를 대체할 로직을 완전히 구현하지 못한 부분이 있었습니다. 하지만 이를 통해 에디터를 제작하는 많은 기술적 도전을 경험하였습니다.

PDF 변환

• 사용자가 제작한 시험지를 쉽게 출력하여 풀어볼 수 있도록 PDF 형식으로 변환할 수 있습니다.
• 이를 위해 react-pdf의 PDFDownloadLink 컴포넌트를 사용하여 구현하였습니다.
• react-pdf 라이브러리의 내장 컴포넌트인 View와 Page 등을 활용하여 pdf 라이브러리를 조금 이나마 알 수 있었습니다.
• 원하는 만큼의 퍼포먼스를 내지 못한 부분 이였습니다. 이는 제가 생각했던 CSS 방식과 pdf 라이브러리에 적용될 수 있는 부분의 한계를 느낀 아쉬운 부분이었습니다.

🔎 BE 기술적 도전

테스트코드로 Swagger생성

• API 문서에 신뢰성 : Spring REST Docs를 사용해 테스트코드를 기반으로 api 문서를 생성합니다.
• 효과적인 API 문서 : Swagger UI를 도입해 직접 api를 실행하고 볼 수 있는 문서를 생성합니다.
• 자동 생성 : Spring REST Docs로 OpenAPI3문서를 만들기 위해 restdocs-api-spec 라이브러리를 사용했습니다.
• 기술 블로그 : https://code-l.tistory.com/36

서버 성능에 맞춰 DB 구축

• 개발 과정에서 불필요한 자원을 줄이고자 제한된 서버에 DB 서버를 구축했습니다.
• 이를 위해 서버와 Docker의 로그를 분석하여 2GB 노드 1개와 1GB Kibana 구성을 통해 필요한 성능에 맞춰 DB를 최적화했습니다.
• 현재는 배포를 앞두고 향상된 서버에 4GB 노드 3개와 2GB Kibana 구성으로 전환하여 이용 중입니다. 이를 통해 불필요한 서버 유지 비용을 방지할 수 있었습니다.
• 기술 블로그: https://developerjisu.tistory.com/104

데이터 베이스 선택을 위해 추상화를 사용해서 NoSQL, SQL 둘 다 사용

JPA 구현	MongoDB 구현

• 유연한 데이터베이스 선택: Spring의 Dependency Injection(DI) 기능과 추상화를 사용하여 SQL과 NoSQL 데이터베이스를 모두 지원하는 유연한 구조를 설계하였습니다.
• 프로필 기반 구성: Spring Profiles을 사용하여 JPA와 MongoDB를 프로파일에 따라 동적으로 전환할 수 있습니다.
• 기술 블로그: https://code-l.tistory.com/37

TestContainer를 이용한 Test코드 작성

• NoSQL 데이터베이스는 SpringBootTest와 @Transactional을 사용해도 롤백 처리가 되지 않기 때문에, 실제 데이터에 영향을 주지 않고 테스트를 수행하기 위해 Testcontainer가 필요했습니다.
• Testcontainer를 사용하면 데이터베이스와 같은 외부 서비스를 격리된 환경에서 실행할 수 있습니다.
• 이를 통해 정확하고 신뢰성 있는 테스트를 보장할 수 있습니다.
• 기술 블로그: https://developerjisu.tistory.com/106

AI 문제 생성하기

• RAG를 사용한 시험 문제 생성: 검색 증강 생성(RAG) 기술을 활용하여 사용자의 학습 자료에 특화된 시험 문제를 생성합니다.
• 프라이빗 또는 독점 데이터 소스 활용: RAG는 프라이빗 또는 독점 데이터 소스의 정보를 보완하여 텍스트를 생성하는 기술입니다.
• 사용자 맞춤형 시험 문제: 사용자의 학습 자료를 바탕으로 정확하고 관련성 높은 시험 문제를 자동으로 생성하여 제공합니다.

🧑🏻‍💻 팀원 소개 👩🏻‍💻

박정제	김지수	윤성빈	김동우
BE	BE	FE	FE
@LuizyHub	@jisu-0305	@binnary	@4BFC