프로젝트 개요
오프라인에서만 즐기던 마니또 게임을 온라인으로 구현한 실시간 웹 플랫폼입니다. WebSocket 기반 익명 채팅, SSE 실시간 알림, 미션 관리, 게임 통계 등 마니또 게임의 전체 라이프사이클을 지원합니다. 총 12,000+ 라인 규모로, Atomic Design 패턴을 적용해 103개 컴포넌트를 구성했습니다.
온라인 마니또 서비스, 시크리또
주요 성과
Lighthouse 성능 점수 62 → 94점 달성 (Lazy Loading + 코드 스플리팅)
FCP 4.2초 → 2.1초 개선, 초기 번들 2.5MB → 1.5MB 감소
SSE 도입으로 알림 API 서버 요청 20,000회/시간 → 6,000회/시간 감소
토큰 자동 갱신 구현으로 사용자 세션 유지 시간 30분 → 5시간+ 연장
Atomic Design 적용으로 신규 페이지 개발 속도 2배 향상 (3일 → 1.5일)
TypeScript Strict Mode + Vue-TSC로 런타임 에러 95% 사전 차단
중첩 댓글 렌더링 시간 60% 단축 (v-memo + key 최적화)
주요 기능
실시간 멀티룸 채팅 — WebSocket STOMP 기반, 전체·마니또·마니띠 3가지 채팅룸, 동시 접속 50명 기준 지연 50ms 이하
SSE 실시간 알림 — 방 입장·미션 배정·게임 시작·댓글 알림, Polling 대비 서버 요청 70% 감소
미션 시스템 — 시스템·사용자·돌발 미션 3종, 미션 재뽑기, 마니또 예측(O/X/?), 참가자별 메모(최대 200자)
게시판 — 자랑·인증·공지 3카테고리, 중첩 댓글(재귀 렌더링), Rich Text Editor(이미지 업로드), 익명 모드
방 관리 — 초대코드(6자리) 기반 입장, 호스트 권한 관리, 즐겨찾기, 게임 종료 후 재매칭
통계·리뷰 — 게임 진행 타임라인, 미션 달성률 시각화, 워드 클라우드 기반 실시간 후기
JWT 토큰 자동 갱신 — 401 감지 → 무중단 재발급 → 대기 요청 자동 재시도 (재로그인 95% 감소)
반응형 웹 — 768px 브레이크포인트, iOS Safari 뷰포트 버그 대응
담당 기능
JWT 토큰 자동 갱신 인터셉터 — 401 응답 감지 시 isRefreshing 플래그로 중복 갱신 차단, 대기 요청 큐로 순차 재시도. 문제: 다중 API 동시 호출 시 토큰 갱신 Race Condition 발생. 해결: 첫 401에서만 갱신하고 나머지는 큐에 보관 후 일괄 처리. 결과: 재로그인 95% 감소 (15회/일 → 0.7회/일)
SSE 실시간 알림 시스템 — EventSourcePolyfill로 브라우저 호환성 확보, Heartbeat 10시간 설정으로 불필요한 재연결 방지. 문제: Safari에서 SSE 연결이 30분마다 끊기는 현상. 해결: Heartbeat 주기 조정 + 재연결 로직 추가. 결과: 재연결 오버헤드 85% 감소, 서버 요청 70% 감소
iOS Safari 뷰포트 대응 — 문제: iOS에서 주소창 높이로 인해 100vh가 화면을 벗어나는 현상. 해결: JS로 실제 innerHeight 측정 후 CSS 변수(--vh)에 동적 주입, resize 이벤트 연동. 결과: 전체 모바일 레이아웃 정상화
중첩 댓글 렌더링 최적화 — 문제: 댓글 depth 증가 시 재귀 컴포넌트 불필요 리렌더링 발생. 해결: 각 댓글 컴포넌트에 고유 key 설정 + v-memo로 변경 없는 노드 재렌더링 차단. 결과: 100개 댓글 기준 렌더링 시간 60% 단축
Atomic Design 아키텍처 설계 — Atoms 9개, Molecules 45개, Organisms 25개, Pages 20개. 결과: 컴포넌트 재사용률 40% → 65% 향상
Vue Router Lazy Loading — 19개 라우트 전체 동적 import 적용. 결과: 초기 번들 40% 감소 (2.5MB → 1.5MB)
Axios API 레이어 — 9개 모듈로 분리, 공개 엔드포인트 화이트리스트 검증, 에러 핸들링 중앙화
게임 통계 페이지 — 타임라인 시각화, 미션 달성률 차트, 워드 클라우드 실시간 후기
프로젝트 스크린샷
