당신의 계절
개요
당신의 계절은 온라인 퍼스널 컬러 진단 서비스입니다. 전문 컨설턴트와 1:1 화상 상담으로 진단받거나, 셀프 진단 모드로 직접 분석할 수 있습니다.
React 프론트엔드와 Spring Boot 백엔드, OpenVidu WebRTC 서버로 구성되어 있으며, SSAFY 7기 공통 프로젝트로 6인 팀("치명적인 당신")에서 약 7주간 개발했습니다.
주요 기능
1:1 화상 컨설팅
- OpenVidu 기반 실시간 화상 통화
- 가상 컬러 드레이프 오버레이 (패브릭 이미지 오버레이 + CSS 필터)
- 밝기·채도·색조 조절 컨트롤
- OpenVidu 시그널링 기반 실시간 채팅
- Best/Worst 컬러 선택 및 진단 결과 캡처
셀프 진단
- 컨설턴트 없이 직접 퍼스널 컬러 분석
- 컬러 비교 도구로 톤 판별
- Best/Worst 컬러 선택 후 결과 저장
- 톤 비율 분석 (봄/여름/가을/겨울)
컨설턴트 탐색·예약
- 인기순, 평점순, 리뷰순, 가격순 정렬
- 컨설턴트 이름 검색
- 캘린더 기반 날짜·시간 예약
- 자격증·경력 확인
진단 결과·리뷰
- 과거 진단 이력 및 컬러 팔레트 조회
- 시즌 톤 분류 결과 (봄 웜톤, 여름 쿨톤 등)
- 컨설팅 별점·후기 작성
- 결과 이미지 다운로드
기술 스택
| 분류 | 기술 |
|---|---|
| Frontend | React 18, JavaScript, Redux Toolkit, redux-persist, Material UI (Emotion 엔진) |
| 실시간 통신 | OpenVidu 2.x (WebRTC), OpenVidu 시그널링 (채팅·필터 동기화) |
| Backend | Java 8, Spring Boot 2.7, Spring Security, JPA, JWT |
| Database | MySQL 8.0, Redis (세션·이메일 인증 토큰) |
| 인프라 | AWS EC2, Docker, Nginx, Let's Encrypt SSL |
아키텍처
데이터 모델
| 엔티티 | 설명 |
|---|---|
| Member | 기본 회원 (Customer / Consultant 상속) |
| Consultant | 컨설턴트 프로필, 자격증(License), 휴무일(ClosedDay) |
| Customer | 일반 고객 |
| Reservation | 예약 (고객 ↔ 컨설턴트, 날짜·시간) |
| Consulting | 화상 상담 세션 (OpenVidu sessionId) |
| ConsultingResult | 진단 결과 (BestColorSet, WorstColorSet) |
| SelfConsulting | 셀프 진단 결과 (톤 비율 Percentage) |
| Review | 별점·후기 (고객 → 컨설턴트) |
| Tone / Color | 시즌 톤 및 컬러 팔레트 |
담당 역할
프론트엔드 파트 리더를 맡았습니다.
- 프론트엔드 아키텍처: Feature 기반 디렉토리 구조 설계, Redux 상태 관리 구조 수립
- OpenVidu 화상 통화: WebRTC 세션 연결, 비디오 컴포넌트 구현, 카메라 테스트
- 컬러 드레이프 시스템: 패브릭 이미지 오버레이 + CSS 필터 기반 컬러 필터, RGB 변환 유틸리티, Canvas 드로잉(react-canvas-draw) 주석 도구
- 컬러 팔레트 UI: 시즌별 컬러셋 선택·표시 컴포넌트, Best/Worst 컬러 인터페이스
회고
화상 통화를 처음 다뤄본 프로젝트입니다. 시그널링 서버를 직접 세우면 7주 안에 끝나지 않을 것 같아 OpenVidu를 썼고, 아낀 시간은 통화 화면 위에 컬러 드레이프를 얹는 쪽에 몰았습니다. 패브릭 이미지를 CSS 필터로 겹치는 방식이라 영상 위에서 색이 어떻게 보이는지 맞추는 데 손이 가장 많이 갔습니다. 채팅도 별도 서버를 두지 않고 OpenVidu 시그널링에 얹어 해결했습니다.
프론트엔드 파트 리더를 맡아 3인이 Feature 단위로 작업을 나눠 가도록 폴더를 갈랐고, Redux 슬라이스 형태를 하나로 통일했습니다. 같은 화면을 여러 명이 동시에 건드릴 때 충돌을 줄이는 것이 목적이었습니다.