OnMeet
AI 회의록 자동 생성 B2B 화상회의 SaaS 플랫폼
Role: 팀장 · Frontend 단독 개발 + Backend MSA 설계·구현
Award
코리아IT 풀스택 과정 수강생 우수상
Overview
코리아IT에서 들은 풀스택 보강 수업에서 팀장을 맡아 시작한 프로젝트로, 과정 내 수강생 우수상을 받았습니다. AI 회의록 자동 생성 기능을 갖춘 B2B 화상회의 SaaS 플랫폼입니다. 프론트엔드를 맡아 개발(React + Vite + Zustand + TanStack Query)하고, 백엔드 Polyglot MSA 7개 서비스(Gateway/Auth/Video/AI/Notification/File/Email)를 설계·구현했습니다. 화상회의·채팅 영역을 중심으로 주도하며, LiveKit SFU 기반 WebRTC, Kafka 이벤트 드리븐 비동기 통신, Zod 런타임 스키마 검증, SSE 실시간 STT 스트리밍, Defense-in-Depth 보안까지 프론트-백 전 영역을 아우르는 풀스택 프로젝트입니다.
이 프로젝트의 핵심
코리아IT 풀스택 과정 수강생 우수상
팀장으로 기획부터 배포까지 주도
프론트엔드 구현
Feature-Based 아키텍처, Zustand + TanStack Query 하이브리드 상태 관리
Zod 런타임 스키마 검증 fetcher 패턴
타입 안전한 API 계층 설계
SSE 기반 실시간 STT 스트리밍
Ref 버퍼링 + 쓰로틀링 + 자동 재연결 커스텀 훅
나머지 4개 더 보기접기
Polyglot MSA 7개 서비스
서비스 특성별 최적 언어 선택 (Kotlin/Java/Go)
Go File Service 전환 → 메모리 96% 감소, API 응답 ~100x 향상
LiveKit SFU
N:N 대역폭 O(N²) → O(N), DataChannel 채팅으로 추가 인프라 제거
참가자별 개별 트랙 Egress → Whisper STT → Claude 요약 AI 파이프라인
자세히
Frontend — 아키텍처 & 상태 관리5
Feature-Based 도메인 모듈 구조
auth/meeting/dashboard/schedule/notification/team 각 모듈이 자체 api/hooks/store/components 보유
하이브리드 상태 관리: Zustand(UI 상태) + TanStack Query(서버 상태) + Context(인증/테마) 역할 분리
Zustand Slice 패턴 + useShallow()로 모달 컴포넌트가 자신의 slice만 구독 → 레이아웃 리렌더 차단
Zod 런타임 스키마 검증 + 제네릭 createFetcher 팩토리
스키마와 타입이 하나의 소스에서 파생 (Single Source of Truth)
Query Key Factory 패턴으로 캐시 키 일관성 관리
Frontend — 실시간 화상회의 & STT5
LiveKit WebRTC 통합
갤러리/스피커 뷰 전환, PIP 모드, 디바이스 선택 미리보기
회의실 상태 머신: preparing → joining → waiting → connected → disconnected, Phase별 UI 자동 전환
SSE 기반 실시간 STT
useSSEStream 커스텀 훅으로 Ref 버퍼링 → 250ms 쓰로틀 → 문장 경계 flush
스트림 종료 시 TanStack Query 캐시 자동 무효화로 데이터 동기화
AI 녹음 요청/승인 큐 시스템
회의 종료 후 요약 자동 생성
Frontend — 빌드 & 모니터링4
Vite 매뉴얼 청크 분리 (vendor/query/livekit/editor/firebase/charts/motion)
초기 로딩 최적화
React.lazy() 라우트 기반 코드 스플리팅
Sentry
Session Replay + 환경별 샘플링 차등 적용, React Router 연동 트레이싱
FCM 푸시 알림 + 실시간 알림 목록, 알림 유형별 세부 설정
Backend — 시스템 아키텍처3
Polyglot MSA 7개 서비스: Gateway(Kotlin/WebFlux) · Auth(Kotlin) · Video(Java) · AI(Java) · Notification(Java) · File(Go) · Email(Java)
Kafka 이벤트 드리븐
meeting.ended → AI 회의록 트리거, audio.segment → 실시간 음성 스트림
Database-per-Service 패턴
서비스별 독립 DB, 스키마 변경 시 타 서비스 무영향
Backend — Video Service 핵심 설계5
LiveKit SFU 통합
미디어 전송은 LiveKit, 비즈니스 로직은 Video Service가 담당하는 책임 분리
Token 기반 권한 제어 (canPublish/canSubscribe/canPublishData/roomAdmin)
역할별 세분화된 미디어 접근
SSE 대기실
호스트/참가자 별도 스트림으로 관심사 분리, 승인 시 LiveKit 토큰 즉시 발급
참가자별 개별 오디오 트랙 Egress
Late-join 자동 녹화, S3 직접 저장
LiveKit Webhook
참가자 입퇴장, 트랙 발행, Egress 완료 서버사이드 동기화
기술적 의사결정6
LiveKit SFU 채택
P2P 대비 N:N 대역폭 O(N) 절감, gRPC 서버사이드 트랙 제어
DataChannel 채팅
WebSocket 대신 LiveKit 중계 활용, 추가 인프라 불필요
Go File Service 전환
빌드 73% 단축, 메모리 96% 감소, Docker 이미지 94% 축소
TrackEgress
전체 믹스 대신 개별 트랙으로 화자 분리 정확도 확보
Zustand + TanStack Query 분리
UI 상태와 서버 상태 경계 명확화로 리렌더링 최소화
Zod fetcher 패턴
런타임 타입 검증으로 백엔드 스키마 변경에도 프론트 안정성 유지
보안 & 인프라4
RSA-256 비대칭 JWT + AES-256-GCM 키 암호화 + Gateway Secret 상수 시간 비교
Cookie-based Auth (HttpOnly/Secure), 게스트 토큰 4시간 만료, GDPR 탈퇴 처리
GitHub Actions 선택적 빌드/배포
git diff 변경 감지, 멀티 아키텍처 빌드
AI 파이프라인: Kafka → Redis 버퍼 → VAD → Whisper STT → Claude 요약 → S3