유학생 학사정보 열람 시스템 – 프로젝트 기획서

목차

 

1. 프로젝트 개요

이 프로젝트는 과거 JSP 기반의 MVC2 구조로 개발했던 학사정보 시스템을 최신 기술 스택을 활용하여 SPA(Single Page Application) 기반으로 재구성하는 작업이다.

기존 시스템은 기능적으로는 작동했지만, 다음과 같은 한계가 있었다:

• 프론트엔드와 백엔드가 강하게 결합되어 있어 유지보수가 어려움
• 서버 템플릿(JSP)을 사용하는 구조로, 사용자 경험이 제한적
• RESTful API 미흡으로 데이터 분리 및 재사용 어려움
• 반응형 미지원, UX 개선 여지 부족

이를 개선하기 위해 Vue.js + Node.js + MySQL 조합으로 기술을 전환하며, 더 나은 유지보수성, 사용자 경험, 개발 구조의 유연성을 확보하고자 한다.

2. 기획 배경

기존의 JSP 기반 시스템은 다음과 같은 구조였다:

JSP (View)
 ↑↓
Servlet (Controller)
 ↑↓
DAO / JDBC (Model)

 

하지만 다음과 같은 문제를 겪었다:

• View와 로직이 강하게 결합되어 유지보수 어려움
• UI/UX가 고정적이고 모바일 대응이 부족
• 데이터 요청마다 전체 페이지 재로딩
• API 기반 아키텍처가 부재

이에 따라 최신 기술로 구조를 전환하고자 했다:

Frontend (Vue.js 3 + Pinia)
  ↑↓ Axios
Backend (Node.js + Express)
  ↑↓
Database (MySQL)

이를 통해 다음을 기대할 수 있다:

• 프론트-백 완전 분리로 유지보수 용이
• 컴포넌트 기반 설계로 UI 재사용성 향상
• RESTful API 설계 학습
• 모바일 대응 가능한 반응형 UI

3. 주요 기능

📌 공지사항 열람

• 유학생 대상 공지사항 리스트 제공
• 상세보기 기능 포함
• 관리자용 공지사항 작성/수정/삭제 기능은 향후 확장 예정

📌 성적 열람

• 입학 연도 기준으로 학년/학기별 성적 목록 표시
• 학기 클릭 시 해당 과목, 교수명, 요일, 성적 정보 확인 가능

📌 학비 확인

• 유학생 전용
• 일시불 또는 1~4회 분할 납부 내역 열람

📌 수강 스케줄 확인

• 주간 시간표 형태로 구성
• 등록된 과목 및 요일, 시간 표시

4. 기술 스택

구분	기술	설명
프론트엔드	Vue.js 3 + Pinia + Vue Router	SPA 기반 UI 구성
백엔드	Node.js + Express	REST API 서버 구축
데이터베이스	MySQL	학사 데이터 저장
통신 방식	Axios	클라이언트-서버 데이터 통신
개발 환경	M1 MacBook Pro + VSCode	로컬 테스트 및 개발
배포	(추후 예정)	Vercel + Railway 고려 중

5. 대상 사용자

• 해외 유학생
  • 성적, 학비, 수강 과목 등 주요 정보 열람
  • 모바일에서도 접근 가능
• 관리자 (확장 예정)
  • 공지사항 등록 및 관리

 

6. 프로젝트 목적

• 기존 JSP 기반 프로젝트를 최신 기술로 리뉴얼
• SPA 구조 학습 및 실전 적용
• REST API 설계 및 통신 구조 경험
• 반응형 UI 구현 및 UX 향상
• 실용적이고 목적 있는 포트폴리오 구축

7. 디렉터리 구조 (예정)

📁 foreign-student-system/
 ┣ 📁 frontend/        # Vue 프로젝트
 ┣ 📁 backend/         # Node.js Express API
 ┗ 📁 database/        # MySQL 스키마 및 샘플 데이터

 

 

향후 블로그 시리즈 확장 계획

1. 프로젝트 세팅 (Vite + Express + MySQL 구성)
2. 데이터베이스 설계 및 샘플 데이터 작성
3. API 구축 및 프론트 연동 (공지사항)
4. 성적 열람 화면 개발 및 연결
5. 학비 조회 기능 구현
6. 수강 스케줄 시간표 구성
7. SPA vs JSP MVC2 기술 비교 정리
8. 배포 및 최적화

---