웹 프로젝트 / 나만의 홈 스쿨 개발해보기~~ (한달치 한번에 정리) -완-

 

 

25.12.23일 프로젝트 완료 

 

3일차 까지 개발을 완료하고 이녀석~! 개발을 안하는구나.... 라고 생각하실수 있겠습니다. ㅎㅎ..  약 12월 1일 부터 23일까지

일차별로 개발 진행상황을 정리하려고 했지만, 워낙에 개발이란게 생각과 방향성이 그때그때 다르고, 한번 개발에 들어가면

하루를 온전히 다 쓰기 때문에 블로그에 작성하려고 시간을 보면 항상 새벽 3~4시 였습니다...;;

 

그럴바에는 깃에 commit 하면서 효율을 높여 빠르게 끝내고 한번에 정리하는 것이 옳다고 생각해 이렇게 최종 마무리하고 

글을 작성하게 되었습니다.

 

그럼 어떻게 개발이 진행이 되었는지 설명하겠습니다. ^^

 

전체적인 피그마 디자인 네비게이션

 

 

https://github.com/shincharl/homeSchools

GitHub - shincharl/homeSchools: 홈스쿨 홈페이지 제작입니다 ~~

 

 

1. 프로젝트 소개

홈스쿨 프로그램은 실시간 채팅과 1:1 화상 수업 기능을 제공하는 웹 서비스입니다.
누구나 지식을 공유하고 배울 수 있는 환경을 목표로 하여,
Spring Boot 기반의 REST API와 React + TypeScript 기반 SPA 구조로 개발되었습니다.

사용자는 회원 가입 후 로그인하여
1:1 화상 통신과 실시간 채팅 기능을 통해
선생님 또는 학생의 역할로 자유롭게 소통할 수 있습니다.

2. 기획 배경 & 목표

최근에는 나이, 성별, 직업과 상관없이
누구나 지식을 가르칠 수 있고, 또 배울 수 있는 환경이 중요해지고 있다고 생각했습니다.

하지만 여전히 배움의 기회에 접근하지 못하는 사람들이 존재하며,
이를 조금이나마 해소할 수 있는 지식 공유 플랫폼을 만들고자 본 프로젝트를 기획하게 되었습니다.

기획 목표

- 누구나 선생님이 될 수 있고, 누구나 학생이 될 수 있는 환경 제공

- 실시간 소통(화상·채팅)을 통한 몰입도 높은 학습 경험

- 사용자 의견을 반영하여 함께 성장하는 서비스 구조 설계

본 프로젝트는 이러한 목표를 바탕으로
지식을 나구고 배우는 선순환 구조를 만드는 것을 지향합니다.

3. 주요 기능

홈스쿨 프로그램은 1.0 버전으로,
핵심 기능 위주의 컴팩트한 구조로 설계되었습니다.

주요 기능 목록

- 회원가입 / 로그인
  : 서비스 이용을 위한 사용자 인증 기능
- 1:1 화상 통신
  : 선생님과 학생 간 실시간 화상 수업 지원
- 실시간 채팅
  : 수업 중 또는 별도의 소통을 위한 채팅 기능
- 건의 및 버그 신고 게시판
  : 사용자들이 원하는 기능이나 개선 사항을 자유롭게 제안
  : 서비스 개선을 위한 소통 창구 역할

사용자는 상황에 따라
선생님 또는 학생의 역할을 자유롭게 선택할 수 있으며,
서비스 개선에 직접 참여할 수 있는 구조를 갖추고 있습니다.

4. 기술 스택

본 프로젝트는 프론트엔드와 백엔드를 분리한 구조로 개발되었으며,
각 기술의 장점을 최대한 활용할 수 있도록 설계하였습니다.

 

Frontend

 

 

- React
  : 컴포넌트 기반 UI 설계

 

 

- TypeScript
  : 정적 타입을 통한 안정적인 코드 작성

 

 

- Redux Toolkit
  : 전역 상태 관리
  : 로그인 상태, 사용자 정보, 화상/채팅 관련 상태 관리

 

 

- Vite
  : 빠른 개발 환경 및 빌드 속도

 

 

 

- CSS Module
  : 컴포넌트 단위 스타일 관리

Backend (Main API Server)

 

 

- Java 17
  : LTS 기반 안정적인 개발 환경

 

 

- Spring Boot
  : REST API 서버

 

- Spring Security
  : JWT 기반 인증 및 인가 처리

 

- JPA (Hibernate)
  : ORM 기반 데이터 관리

Realtime Server

 

 

- Node.js
  : WebSocket 전용 서버

 

 

- WebSocket (Socket.IO)
  : 실시간 채팅 기능 처리

Communication

 

 

- WebRTC
  : 1:1 화상 통신 기능 구현 (클라이언트 간 P2P)

Database

 

 

- PostgreSQL
  : 관계형 데이터베이스, 사용자, 채팅, 게시판 데이터 관리

Infra / Deployment

 

 

 

- Heroku
  : Spring Boot API 서버 배포

 

 

 

- Vercel
  : React 프론트엔드 배포 , Node.js WebSocket Server 배포 (별도 서버로 운영)

 

개략적인 개발 디자인

 

5. 시스템 아키텍처

홈스쿨 프로그램은 API 서버와 실시간 통신 서버를 분리한 구조를 기반으로 하여,
확장성과 역할 분리를 고려한 아키텍처로 설계되었습니다.

아키텍처 설명

- Spring Boot API 서버
  : 회원가입, 로그인, 게시판 등 주요 비즈니스 로직 처리
  : JWT 기반 인증 및 인가 담당

- Node.js WebSocket 서버
  : 실시간 채팅 전용 서버
  : API 서버와 역할 분리로 성능 및 확장성 고려

- Redux Toolkit
  : 로그인 상태 및 사용자 정보 전역 관리
  : 화상 및 채팅 관련 상태 공유

- WebRTC
  : 클라이언트간 1:1 화상 통신 (P2P)

- PostgreSQL
  : 서비스 전반의 데이터 영속화

6. ERD / DB 구조

홈스쿨 프로그램은 사용자 중심의 서비스 구조를 기반으로
회원(Member)과 문의/건의(Contact) 간의 관계를 중심으로 데이터베이스를 설계하였습니다.

주요 엔티티

Contact (문의 / 건의 게시글)

사용자가 서비스에 대해 기능 건의, 버그 신고, 문의 사항 등을 등록할 수 있는 게시글 엔티티입니다.

 

CONTACT_ID	BIGINT (PK)	게시글 고유 ID
TITLE	VARCHAR	게시글 제목
CONTENT	TEXT	게시글 내용
READ_COUNT	INTEGER	조회 수
CREATED_AT	TIMESTAMP	생성 일시
UPDATED_AT	TIMESTAMP	수정 일시
MEMBER_ID	BIGINT (FK)	작성자 회원 ID

Member (회원 게시글)

- LOCAL / 소셜 로그인 확장을 고려한 구조입니다.

- PROVIDER 필드를 통해 로그인 방식을 구분했습니다.

- TEMP_PASSWORD, 최초 로그인 또는 비밀번호 재설정 시 강제 변경 처리에 활용됩니다.

 

MEMBER_ID	BIGINT (PK)	회원 고유 ID
NAME	VARCHAR	사용자 이름
NICK_NAME	VARCHAR	닉네임
USER_ID	VARCHAR	로그인 아이디
PASSWORD	VARCHAR	비밀번호
ADDRESS	VARCHAR	주소
EMAIL	VARCHAR	이메일
TEMP_PASSWORD	BOOLEAN	임시 비밀번호 여부
PROVIDER_ID	BIGINT	소셜 로그인 제공자 ID
PROVIDER	ENUM	로그인 타입 (LOCAL, KAKAO, GIT, GOOGLE 등)

엔티티 관계

- Member:Contact = 1:N

- 한 명의 회원은 여러 개의 문의글을 작성 할 수 있습니다.

- Contact는 반드시 하나의 Member에 소속됩니다.

7. 핵심 구현 내용

홈스쿨 프로그램은 단순 기능 구현이 아닌,
인증, 실시간 통신·확장성을 고려한 구조로 핵심 기능들을 구현하였습니다.

JWT 기반 인증 / 인가

구현 배경

- 프론트엔드와 백엔드를 분리한 SPA 구조에서
  세션 방식보다 확장성과 유연성이 높은 JWT 방식을 채택했습니다.

구현 내용

- 로그인 성공 시 JWT 토큰 발급

- 이후 모든 API 요청은 Authorization Header를 통해 인증을 합니다.

- Spring Security Filter에서 토큰을 검증합니다.

특징

- 서버 상태를 저장하지 않는 Stateless 인증

- 토큰 만료 기반 보안 강화

- Redux를 통해 로그인 상태 전역 관리

소셜 로그인 구조 (확장 고려)

구현 배경

- 일반 로그인뿐만 아니라
  소셜 로그인 확장을 고려한 사용자 구조 설계

구현 내용

- Provider Enum을 통한 로그인 방싱을 구분합니다. (LOCAL, KAKAO, NAVER 등)

- 소셜 로그인 사용자 식별을 위한 providerId 필드 분리

- 기존 회원 테이블 구조 변경 없이 로그인 방식 확장이 가능합니다.

WebSocket 기반 실시간 채팅 (Node.js 서버)

구현 배경

- 실시간 채팅은 잦은 연결과 메시지 송수신이 발생

- 비동기 처리에 강한 Node.js를 사용해 Spring Boot API 서버와 역할 분리

구현 내용

- Node.js 기반 WebSocket 전용 서버 구축

- 채팅 메시지는 WebSocket을 통해 실시간 송수신

- 인증은 API 서버에서 발급된 JWT 기반으로 처리

WebRTC 기반 1:1 화상 통신

구현 배경

- 지연 시간이 낮은 실시간 화상 수업 환경 제공 필요

- 서버 부하를 최소화하기 위해 P2P 통신 방식 채택

구현 내용

- WebRTC를 이용한 클라이언트 간 1:1 화상 연결

- 시그널링 과정은 별도 통신을 통해 처리

- 미디어 스트림은 클라이언트 간 직접 송수신

Redux를 활용한 전역 상태 관리

관리 대상 상태

- 로그인 여부

- 사용자 정보

- 화상 수업 및 채팅 관련 상태

도입 이유

- 여러 컴포넌트에서 공통으로 사용하는 상태 증가

- 인증 상태와 실시간 기능 상태의 일관성 유지

6월 말 즈음 대천 해수욕장