← 포트폴리오 목록

중등 영어학원 학생·학부모 학습 서비스

본 요구사항(모바일 상담·입학 접수, 온라인 레벨테스트와 자동채점, 숙제 제출, 학부모 리포트 열람)을 반영한 학생·학부모용 웹 맞춤 구현한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종교육 플랫폼
기술 스택
React 18TypeScriptTailwind CSSNode.jsExpressPrismaPostgreSQL
주요 기능
  • 홈·상담 입학 접수
  • 레벨테스트 응시
  • 숙제 확인·제출
  • 학부모 리포트 열람

프로젝트 개요

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

본 요구사항(모바일 상담·입학 접수, 온라인 레벨테스트와 자동채점, 숙제 제출, 학부모 리포트 열람)을 반영한 학생·학부모용 웹 맞춤 구현한 프로젝트입니다.

작업 범위

  • 홈·상담 입학 접수: 학생과 학부모가 첫 화면에서 상담 희망 일정과 레벨테스트 일정을 신청하고, 접수된 학생은 오늘 숙제와 최근 진단 요약을 바로 봅니다. 접수 상태는 접수·연락·예약 단계로 표시됩니다
  • 레벨테스트 응시: 학생이 온라인으로 레벨테스트를 응시하고 제출하면 제공된 정답·채점 기준에 따라 영역별 점수가 계산됩니다. 결과 화면에서 영역별 점수와 권장 반을 확인합니다
  • 숙제 확인·제출: 학생이 배포된 숙제 목록에서 진단 기반 보충 숙제와 반별 숙제를 구분해 확인하고 답안을 제출합니다. 제출 후에는 강사가 확인한 오답 피드백을 열람합니다
  • 학부모 리포트 열람: 학부모가 알림톡 링크로 열어 출결·성취도·숙제·오답·다음 과제를 담은 주간 리포트를 봅니다. 지난 리포트는 목록에서 날짜별로 다시 열 수 있습니다

주요 업무

  • 홈·상담 입학 접수 화면: 상담 신청 대화상자, 레벨테스트 신청 폼, 접수 단계 표시, 오늘 숙제 카드, 진단 요약 카드, 커리큘럼 안내 구조를 설계합니다
  • 레벨테스트 응시 화면: 문항 진행 화면, 남은 시간 고정 띠, 답안 임시 저장, 제출 확인 대화상자, 영역별 점수와 권장 반 결과 구조를 설계합니다
  • 숙제 확인·제출 화면: 숙제 목록과 상태 필터, 숙제 상세와 답안 입력, 제출 완료 안내, 오답 피드백 열람 구조를 설계합니다
  • 학부모 리포트 열람 화면: 리포트 본문, 출결 요약, 영역별 성취도 차트, 숙제 현황, 오답 요약, 다음 과제, 지난 리포트 목록 구조를 설계합니다
중등 영어학원 학생·학부모 학습 서비스
요구사항 정의

프로젝트 핵심 과제

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

레벨테스트 응시 중 새로고침·접속 끊김에도 응답이 유실되지 않

문항 단위 임시 저장과 이어 풀기 설계 필요

학생·문항·응답·채점 결과가 서로 어긋나지 않

식별자 연결과 재채점 일관성 설계 필요

학부모 리포트 링크가 외부로 전달되어도 다른 학생 정보가 노출되지 않

토큰 범위 제한 설계 필요

알림톡 템플릿 심사가 선행되어야 하므로 링크 연결 구조를 먼저 갖추고 심사 일정에 맞춰 문구를 확정하는 순서 설계

구현 내용

핵심 기능 상세

핵심 기능 1

홈·상담 입학 접수

학생과 학부모가 첫 화면에서 상담 희망 일정과 레벨테스트 일정을 신청하고, 접수된 학생은 오늘 숙제와 최근 진단 요약을 바로 봅니다. 접수 상태는 접수·연락·예약 단계로 표시됩니다.

  • 상담·입학 신청 폼을 휴대폰 폭 기준으로 구성하고 제출 시점에 입력 검증과 오류 안내 구현
  • 희망 일정을 후보 슬롯으로 저장하고 운영자 확인 후 예약 확정으로 전이하는 상태 모델 구성
  • 신청자·학생·보호자 정보를 학생 ID 기준으로 연결하는 Prisma 스키마 설계

접수 단계(접수·연락·예약)를 서버 상태값 하나로 관리해, 학부모 화면의 진행 표시와 운영자 화면의 처리 목록이 같은 값을 보도록 구현합니다.

홈·상담 입학 접수
홈·상담 입학 접수 실제 화면
핵심 기능 2

레벨테스트 응시

학생이 온라인으로 레벨테스트를 응시하고 제출하면 제공된 정답·채점 기준에 따라 영역별 점수가 계산됩니다. 결과 화면에서 영역별 점수와 권장 반을 확인합니다.

  • 응답을 문항 단위로 저장해 새로고침 후에도 이어 풀 수 있게 하는 임시 저장 구조 구현
  • 정답·배점 기준 테이블을 기반으로 객관식과 단답형을 서버에서 자동채점하는 로직 구성
  • 학생·문항·응답·채점 결과를 식별자로 연결해 재채점과 이력 조회가 가능한 구조 설계

채점을 서버에서만 수행하고 응답·정답·결과를 식별자로 연결해, 같은 응답을 다시 채점해도 같은 결과가 나오도록 구현합니다.

레벨테스트 응시
레벨테스트 응시 실제 화면
핵심 기능 3

숙제 확인·제출

학생이 배포된 숙제 목록에서 진단 기반 보충 숙제와 반별 숙제를 구분해 확인하고 답안을 제출합니다. 제출 후에는 강사가 확인한 오답 피드백을 열람합니다.

  • 숙제 상태를 미제출·제출·확인 완료로 정의하고 마감 시각을 서버 시간으로 검증
  • 보충 숙제와 반별 숙제를 같은 숙제 모델의 유형 값으로 관리하는 스키마 구성
  • 강사가 승인한 피드백만 학생 화면에 내려가도록 응답 단계에서 필터링

AI 초안 피드백과 강사 승인본을 상태로 분리해, 학생 화면에는 승인된 내용만 조회되도록 서버 응답에서 제한합니다.

숙제 확인·제출
숙제 확인·제출 실제 화면
핵심 기능 4

학부모 리포트 열람

학부모가 알림톡 링크로 열어 출결·성취도·숙제·오답·다음 과제를 담은 주간 리포트를 봅니다. 지난 리포트는 목록에서 날짜별로 다시 열 수 있습니다.

  • 알림톡 링크에 만료 시각이 있는 열람 토큰을 포함하고 서버에서 토큰과 학생 연결을 검증
  • 출결·성취도·숙제·오답 데이터를 학생 ID 기준 집계 쿼리로 조합해 리포트 화면에 전달
  • 성취도 추이를 SVG 차트로 직접 그려 외부 차트 라이브러리 없이 구현

열람 토큰이 연결된 학생 한 명의 리포트만 조회되도록 서버에서 범위를 제한해, 다른 학생 정보가 화면 코드에 내려가지 않도록 구현합니다.

학부모 리포트 열람
학부모 리포트 열람 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

접수·학생 도메인 모델과 DB 설계 · 2026.11

신청자·학생·보호자·접수 단계 테이블과 학생 ID 기준 식별자 구조 설계

STEP 2

레벨테스트 응시·자동채점 API 구현 · 2026.11

문항·정답 기준 조회, 응답 임시 저장, 서버 채점과 영역별 점수 계산 API 구현

STEP 3

학생·학부모용 반응형 화면 구현 · 2026.11

홈, 응시, 숙제, 리포트 화면을 휴대폰 폭 기준 반응형으로 구현

STEP 4

열람 토큰·알림톡 연결과 시험 스크립트 · 2026.11

만료형 리포트 열람 토큰, 알림톡 링크 연결, API 시험 스크립트 작성

개발 결과

서버 자동채점과 재채점 구조 설계정답·배점 기준 테이블로 서버에서 채점하고 응답·결과를 식별자로 연결해 재채점이 같은 결과를 내는 구조를 설계합니다.
접수 단계 상태 모델 구현접수·연락·예약 단계를 서버 상태값 하나로 관리해 학부모 진행 표시와 운영 목록이 같은 값을 보게 구현합니다.
승인본 한정 피드백 노출 구현AI 초안과 강사 승인본을 상태로 나눠 학생 응답에는 승인된 피드백만 내려가도록 서버에서 제한합니다.
만료형 열람 토큰 리포트 접근 구축알림톡 링크의 토큰이 학생 한 명과 만료 시각에 묶이도록 서버에서 검증하는 열람 구조를 구축합니다.

기술적 주안점

  • 접수 단계(접수·연락·예약)를 서버 상태값 하나로 관리해, 학부모 화면의 진행 표시와 운영자 화면의 처리 목록이 같은 값을 보도록 구현합니다
  • 채점을 서버에서만 수행하고 응답·정답·결과를 식별자로 연결해, 같은 응답을 다시 채점해도 같은 결과가 나오도록 구현합니다
  • AI 초안 피드백과 강사 승인본을 상태로 분리해, 학생 화면에는 승인된 내용만 조회되도록 서버 응답에서 제한합니다

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

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의