이러닝 플랫폼

2024.09 - 2025.03

6명 팀 프로젝트

프로젝트 개요

Spring Boot와 Next.js를 활용한 이러닝 플랫폼을 개발했습니다. 넷플릭스 스타일의 사용자 경험을 제공하기 위해 프론트엔드에 배경색으로 블랙을 적용했습니다. JWT 기반의 보안 시스템과 WebSocket을 통한 실시간 통신을 구현하여, 안정적이고 효율적인 시스템을 구축했습니다.

주요 기능

JWT 기반 보안 시스템

Access Token(2시간)과 Refresh Token(100일)을 활용한 안전한 인증 시스템 구현. OAuth2.0 소셜 로그인(Google, GitHub, Kakao) 통합

실시간 코딩 테스트 시스템

WebSocket(STOMP)을 활용한 실시간 코드 실행 및 채점 시스템. 사용자별 코드 실행 환경 격리 및 결과 분석

AWS S3 기반 파일 관리

강의 자료, 이미지, 비디오 등의 파일을 AWS S3에 저장하고 CDN을 통한 빠른 전송 구현

실시간 채팅/알림

WebSocket을 활용한 실시간 채팅과 알림 시스템. 강사-학생 간 소통 및 학습 진행 상황 실시간 업데이트

결제 시스템

아임포트 API를 활용한 안전한 결제 시스템 구현. 결제 내역 관리 및 환불 처리 자동화

담당 역할

시스템 구조 설계 및 관리

프로젝트의 기본적인 백엔드 및 프론트엔드 구조를 설계하고, AWS EC2, MySQL(RDS), AWS S3 등 클라우드 인프라를 구축 및 관리했습니다.

코딩 테스트 개발

코딩 테스트 시스템 개발을 담당했습니다.

프론트엔드 디자인 및 개발

프로젝트의 전체적인 프론트엔드 디자인을 홀로 설계하고 구현했으며, Next.js의 SSR을 활용한 성능 최적화 및 Tailwind CSS로 반응형 UI를 구현했습니다.

팀 코드 지원 및 통합

다른 팀원들의 코드 개발을 지원하고 통합하는 역할을 수행했습니다.

CI/CD 배포 자동화

Docker 컨테이너화 및 GitHub Actions를 활용한 CI/CD 파이프라인을 포함한 전체 배포 설정을 담당했습니다.

보안 시스템 구현

JWT 기반 인증/인가 시스템 구현, CORS, CSRF 보안 설정 및 토큰 관리를 담당했습니다.

시스템 아키텍처

Spring Boot와 Next.js를 활용한 모놀리식 아키텍처를 구현하여 안정적이고 효율적인 시스템을 구축했습니다.

주요 컴포넌트

Frontend (Next.js)

Vercel에 배포된 Next.js 기반 프론트엔드. SSR을 지원하는 반응형 UI 구현

Backend (Spring Boot)

EC2에 Docker로 배포된 Spring Boot 백엔드. RESTful API와 WebSocket 제공

Database (MySQL)

RDS를 활용한 MySQL 데이터베이스. 트랜잭션 관리와 데이터 일관성 보장

Storage (AWS S3)

이미지와 비디오 파일을 저장하는 S3 스토리지 시스템

요청 처리 흐름

1. Client Request → Next.js (Vercel)

2. Next.js → Spring Boot API (EC2)

3. Spring Boot → MySQL (RDS)

4. Spring Boot → AWS S3 (Storage)

5. Response → Client

배포 파이프라인

GitHub Actions를 활용한 자동화된 배포 파이프라인을 구축했습니다. 프론트엔드는 Vercel을 통해, 백엔드는 AWS EC2를 통해 배포됩니다.

백엔드 배포 (AWS EC2)

GitHub Actions를 통해 main 브랜치에 push가 발생하면 자동으로 EC2에 배포됩니다. Docker를 활용하여 컨테이너화된 애플리케이션을 실행하며, 환경 변수를 통해 보안 설정을 관리합니다.

1. GitHub Actions 워크플로우 실행

2. JDK 17 환경 설정 및 Maven 빌드

3. 빌드된 JAR 파일과 Dockerfile을 EC2로 전송

4. Docker 컨테이너 재빌드 및 실행

5. 환경 변수를 통한 보안 설정 주입

프론트엔드 배포 (Vercel)

Next.js 기반의 프론트엔드는 Vercel을 통해 자동 배포됩니다. GitHub 저장소와 연동하여 main 브랜치의 변경사항이 자동으로 반영됩니다.

1. GitHub 저장소와 Vercel 프로젝트 연동

2. main 브랜치 변경사항 감지

3. Next.js 애플리케이션 빌드

4. Vercel 엣지 네트워크에 자동 배포

5. 환경 변수를 통한 API 엔드포인트 설정

보안 및 환경 설정

민감한 정보는 GitHub Secrets를 통해 관리되며, 환경별로 다른 설정을 적용할 수 있습니다.

JWT 시크릿 키 관리OAuth2.0 클라이언트 정보 보호데이터베이스 접속 정보 암호화AWS 인증 정보 보안이메일/SMS 서비스 인증 정보 관리

성과 및 배운 점

본 프로젝트는 쌍용교육센터 3차 프로젝트입니다. 2차 프로젝트(무신사 PC 버전 클론) 진행 시 무리한 기술 스택 사용으로 완성도 있는 개발에 어려움을 겪었습니다. 이러한 경험을 바탕으로 3차 프로젝트에서는 완성도에 최종 목표를 두었으며, 개인적인 코드 개발보다는 팀원 전체의 개발 상황을 살피는 데 집중했습니다. 이 과정 속에서 개발자로서 프로젝트 팀워크를 통해 크게 성장할 수 있었습니다.