← 포트폴리오 목록

모의고사 온라인 응시 플랫폼

문제은행 기반 실시간 모의고사 응시, 서버 동기화 타이머, 동시 제출 트랜잭션 처리, 자동 채점을 포함한 온라인 시험 응시 플랫폼을 React + Node.js/Express + PostgreSQL 기반으로 설계·구현합니다.

동시 제출 트랜잭션 처리 구조 설계PostgreSQL 행 단위 락과 제출 큐를 결합해 동시 접속 상황에서도 데이터 누락 없는 제출 처리 구조를 구현합니다.
서버 동기화 타이머 엔진 구현WebSocket 기반 서버 기준 시각 동기화로 클라이언트 시계 오차와 무관하게 일관된 시험 종료 시점을 유지하는 구조를 설계합니다.
이벤트 기반 자동 채점 파이프라인 구축제출 이벤트를 트리거로 즉시 채점이 실행되는 파이프라인과 난이도별 정답률 집계 쿼리를 설계합니다.
서비스 타입Web
업종교육 플랫폼
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaWebSocket
주요 기능
  • 실시간 응시 화면
  • 문제 네비게이터
  • 동시 제출 처리
  • 자동 채점 리포트
Overview

프로젝트 개요

범위: 개발, 디자인, 기획

문제은행 기반 실시간 모의고사 응시, 서버 동기화 타이머, 동시 제출 트랜잭션 처리, 자동 채점을 포함한 온라인 시험 응시 플랫폼을 React + Node.js/Express + PostgreSQL 기반으로 설계·구현합니다. 다수 학생이 한 시각에 접속해도 데이터 정합성을 보장하는 구조가 핵심입니다.

작업 범위

  • 실시간 응시 화면: 학생이 문제은행에서 불러온 문항을 순서대로 풀며 남은 시간을 실시간으로 확인하고 답안을 임시 저장하는 응시 화면입니다
  • 문제 네비게이터: 전체 문항의 답변 상태(미답변/답변완료/검토표시)를 한눈에 확인하고 원하는 문항으로 즉시 이동할 수 있는 네비게이터입니다
  • 동시 제출 처리: 다수 학생이 동시에 답안을 제출하는 상황에서도 데이터 정합성을 보장하는 제출 처리 화면입니다
  • 자동 채점 리포트: 제출된 답안을 정답과 자동으로 비교해 점수를 산출하고, 문항별 정오 여부를 정리해 보여주는 리포트 화면입니다

주요 업무

  • 실시간 응시 화면 화면: React 상태관리로 문항별 답안을 로컬에 임시 저장하고, WebSocket으로 서버 기준 시각과 동기화하여 클라이언트 시계 오차에 따른 시험 종료 시점 불일치를 방지하는 구조를 설계합니다
  • 문제 네비게이터 화면: 좌측 사이드바에 문항 목록을 상태별 배지로 표시하고, 커맨드 팔레트(⌘K)로 문항 번호를 입력하면 즉시 해당 문항으로 이동하는 구조를 구현합니다
  • 동시 제출 처리 화면: PostgreSQL 트랜잭션과 행 단위 락을 적용하여 동시 접속 시 제출 데이터가 누락되거나 중복 기록되지 않도록 처리하는 구조를 구현하며, 인덱싱을 통한 조회 성능도 함께 고려합니다
  • 자동 채점 리포트 화면: 제출 즉시 채점 로직이 실행되어 점수와 난이도별 정답률을 계산하고, 학생 개인정보와 성적 데이터는 역할 기반 접근 제어로 보호하는 구조를 설계합니다
모의고사 온라인 응시 플랫폼
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

다중 학생 동시 접속 시 제출 데이터 누락을 방지하는 트랜잭션 격리 수준 설계

클라이언트 시계 오차와 네트워크 지연을 보정하는 서버 동기화 타이머 로직 설계

가상 유저 부하 테스트로 동시 제출 처리 한계를 사전에 검증하는 시나리오 구성

학생 성적·개인정보 데이터의 열람 범위를 세분화하는 역할 기반 권한 체계 설계

구현 내용

핵심 기능 상세

핵심 기능 1

실시간 응시 화면

학생이 문제은행에서 불러온 문항을 순서대로 풀며 남은 시간을 실시간으로 확인하고 답안을 임시 저장하는 응시 화면입니다.

  • WebSocket 기반 서버-클라이언트 시간 동기화로 타이머 오차를 보정하는 구조 설계
  • React Query로 문제은행 데이터를 캐싱하고 문항 전환 시 즉시 렌더링되는 구조 구현
  • Debounced 자동저장으로 답안 변경 시마다 서버에 임시 저장 요청을 전송하는 구조 구현

서버 기준 시각을 주기적으로 동기화하는 타이머 엔진을 구현하여, 클라이언트 시계 오차나 네트워크 지연에도 시험 종료 시점을 일관되게 유지하는 구조를 설계합니다.

실시간 응시 화면
핵심 기능 2

문제 네비게이터

전체 문항의 답변 상태(미답변/답변완료/검토표시)를 한눈에 확인하고 원하는 문항으로 즉시 이동할 수 있는 네비게이터입니다.

  • Zustand 기반 문항별 답변 상태 전역 관리로 사이드바 배지를 즉시 반영하는 구조 구현
  • 커맨드 팔레트 컴포넌트로 문항 번호 검색 시 해당 문항으로 스크롤 이동하는 구조 설계
  • 검토표시 상태를 로컬 스토리지에 백업하여 새로고침 후에도 유지되는 구조 구현

문항 단위 상태 추적과 커맨드 팔레트 이동을 결합하여, 다수 문항을 빠르게 오가며 점검할 수 있는 네비게이션 구조를 설계합니다.

문제 네비게이터
핵심 기능 3

동시 제출 처리

다수 학생이 동시에 답안을 제출하는 상황에서도 데이터 정합성을 보장하는 제출 처리 화면입니다.

  • PostgreSQL 트랜잭션과 SELECT... FOR UPDATE로 동시 제출 시 행 단위 락을 적용하는 구조 설계
  • 제출 큐를 두어 순간적인 동시 접속 폭주에도 순차적으로 안전하게 반영하는 구조 설계
  • 제출 실패 시 자동 재시도 로직과 실패 로그 테이블을 별도로 설계

동시 제출 상황에서 데이터 정합성을 보장하기 위해 트랜잭션 격리 수준과 락 전략을 조합한 처리 구조를 설계하며, 성능 저하 없이 안정적인 기록을 목표로 합니다.

동시 제출 처리
핵심 기능 4

자동 채점 리포트

제출된 답안을 정답과 자동으로 비교해 점수를 산출하고, 문항별 정오 여부를 정리해 보여주는 리포트 화면입니다.

  • 제출 이벤트를 트리거로 채점 함수가 즉시 실행되는 이벤트 기반 채점 파이프라인 설계
  • 난이도별·영역별 정답률을 집계하는 쿼리 구조 설계
  • JWT 기반 인증과 역할별 접근 제어로 성적 데이터 열람 범위를 제한하는 구조 구현

제출과 동시에 채점이 완료되는 파이프라인을 구현하고, 성적·개인정보 데이터는 역할 기반 접근 제어로 보안을 강화하는 구조를 설계합니다.

자동 채점 리포트
구현 과정

프로젝트 진행 단계

STEP 1

문제은행 스키마 및 ERD 설계 · 2026.07

문항·보기·정답·카테고리 테이블 설계, PostgreSQL 인덱스 전략 수립

STEP 2

실시간 타이머 및 응시 API 개발 · 2026.07

Express 기반 응시 세션 API, WebSocket 시간 동기화 모듈 구현

STEP 3

동시 제출 트랜잭션 처리 구현 · 2026.07

PostgreSQL 트랜잭션·락 전략 적용, 제출 큐 설계로 동시 접속 안정성 확보

STEP 4

자동 채점 및 응시 화면 UI 개발 · 2026.07

React 기반 응시·채점 결과 화면 구현, 문항 네비게이터 컴포넌트 설계

프로젝트 성과

주요 성과

동시 제출 트랜잭션 처리 구조 설계PostgreSQL 행 단위 락과 제출 큐를 결합해 동시 접속 상황에서도 데이터 누락 없는 제출 처리 구조를 구현합니다.
서버 동기화 타이머 엔진 구현WebSocket 기반 서버 기준 시각 동기화로 클라이언트 시계 오차와 무관하게 일관된 시험 종료 시점을 유지하는 구조를 설계합니다.
이벤트 기반 자동 채점 파이프라인 구축제출 이벤트를 트리거로 즉시 채점이 실행되는 파이프라인과 난이도별 정답률 집계 쿼리를 설계합니다.
역할 기반 성적 데이터 접근 제어 설계JWT 인증과 역할별 권한 분리로 학생 개인정보와 성적 데이터 열람 범위를 제한하는 구조를 구축합니다.
Highlights

기술적 주안점

  • 서버 기준 시각을 주기적으로 동기화하는 타이머 엔진을 구현하여, 클라이언트 시계 오차나 네트워크 지연에도 시험 종료 시점을 일관되게 유지하는 구조를 설계합니다
  • 문항 단위 상태 추적과 커맨드 팔레트 이동을 결합하여, 다수 문항을 빠르게 오가며 점검할 수 있는 네비게이션 구조를 설계합니다
  • 동시 제출 상황에서 데이터 정합성을 보장하기 위해 트랜잭션 격리 수준과 락 전략을 조합한 처리 구조를 설계하며, 성능 저하 없이 안정적인 기록을 목표로 합니다

유사한 프로젝트를 기획하고 계신가요?

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기