2026.01 — 2026.03개인 프로젝트
OnMeet
AI 회의록 자동 생성 B2B 화상회의 SaaS 플랫폼
- 맡은 일
- 팀장 · Frontend 단독 개발 + Backend MSA 설계·구현
- 기간
- 2026.01 — 2026.03
- 소속
- 코리아IT 풀스택 과정
- 수상
- 코리아IT 풀스택 과정 수강생 우수상
코리아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 보안까지 프론트와 백엔드를 함께 다룬 풀스택 프로젝트입니다.
i.Problem
AI 회의록이 붙은 화상회의를 4인 팀이 석 달 안에 만들어야 했습니다. P2P로 연결하면 참가자가 늘수록 대역폭이 O(N²)로 불어났고, 회의 중 자막은 인증 헤더가 필요한 스트림이라 브라우저 기본 EventSource로는 받을 수 없었습니다.
ii.Action
팀장을 맡아 팀원들과 서비스 경계를 나눠 7개 서비스로 설계하고, 미디어 전송은 LiveKit SFU에 맡겨 Video Service는 권한과 비즈니스 로직만 쥐게 했습니다. 프론트에서는 fetch + ReadableStream으로 SSE 파서를 직접 만들어 STT를 250ms 단위로 흘려 보여 주고, 서비스 4곳의 응답은 Zod fetcher로 런타임에 검증했습니다. 메모리를 많이 쓰던 File Service는 Go로 다시 썼습니다.
iii.Result
N:N 대역폭을 O(N)으로 낮췄고, File Service는 메모리 96% · Docker 이미지 94%를 줄였습니다. 팀이 함께 기획부터 배포까지 마쳐 과정 내 수강생 우수상을 받았습니다.
핵심
- 01
코리아IT 풀스택 과정 수강생 우수상
팀장을 맡아 팀원들과 기획부터 배포까지 함께 진행
- 02
프론트엔드 구현
Feature-Based 아키텍처, Zustand + TanStack Query 하이브리드 상태 관리
- 03
Zod 런타임 스키마 검증 fetcher 패턴
타입 안전한 API 계층 설계
- 04
SSE 기반 실시간 STT 스트리밍
Ref 버퍼링 + 쓰로틀링 + 자동 재연결 커스텀 훅
나머지 4개 더 보기접기
- 05
Polyglot MSA 7개 서비스
서비스 특성에 맞춰 언어 선택 (Kotlin/Java/Go)
- 06
Go File Service 전환
메모리 96% 감소, API 응답 ~100x 향상
- 07
LiveKit SFU
N:N 대역폭 O(N²) → O(N), DataChannel 채팅으로 추가 인프라 제거
- 08
참가자별 개별 트랙 Egress → Whisper STT → Claude 요약 AI 파이프라인
화면
Pl. 2of5
제품 화면이 아니라 기술 발표 자료입니다. 무엇을 왜 그렇게 만들었는지를 팀이 직접 정리한 문서라, 결과 화면보다 이쪽이 더 많은 걸 보여 준다고 봤습니다.
자세히
궁금한 항목을 펼치면 그때 무엇이 문제였고 어떻게 판단했는지 나옵니다.
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 패턴으로 캐시 키 일관성 관리
LiveKit WebRTC 통합
갤러리/스피커 뷰 전환, PIP 모드, 디바이스 선택 미리보기
회의실 상태 머신: preparing → joining → waiting → connected → disconnected, Phase별 UI 자동 전환
SSE 기반 실시간 STT
useSSEStream 커스텀 훅으로 Ref 버퍼링 → 250ms 쓰로틀 → 문장 경계 flush
스트림 종료 시 TanStack Query 캐시 자동 무효화로 데이터 동기화
AI 녹음 요청/승인 큐 시스템
회의 종료 후 요약 자동 생성
배운 것
보안 개발 8년차 팀원과 함께 일하며 백엔드 안정성을 보는 눈을 얻었습니다. 기능이 도는 것과 서비스가 버티는 것은 다른 문제라는 걸 이때 알았습니다.
AWS 운영도 곁에서 배웠습니다. 올리고 끝이 아니라 올린 뒤에 무엇을 지켜보고 어디를 조여야 하는지를 이 과정에서 익혔습니다.
LiveKit 연동을 맡으면서 WebRTC를 깊게 들여다봤습니다. SFU가 왜 필요한지, 인원이 늘 때 대역폭이 어떻게 달라지는지를 직접 붙여 보며 이해했고, 이 경험이 이후 지하철 폐쇄망 CCTV 작업의 바탕이 됐습니다.