MetaNotes는 Google Meet, Microsoft Teams, Zoom 통화에 참여해 전사본, 액션 아이템, 대화 요약을 생성하는 AI 회의 어시스턴트다. 공개 제품이며, 사내에서는 Fireflies와 tl;dv를 대체했다. 두 서비스 모두 핵심 기능을 상위 요금제 뒤에 가둬 두었고 저장 비용도 계속 늘어나면서 팀의 필요에 더 이상 맞지 않았다. 나는 이 프로젝트의 유일한 프론트엔드 엔지니어로, 약 5개월의 개발 기간 동안 기능 범위, 배포, 제품 결정을 처음부터 끝까지 책임졌다.
내가 만든 것
- 전사본 인터페이스: 타임스탬프에 맞춰 하이라이트가 동기화되는 전사본 뷰어를 만들었다. 활성 줄은 영상 재생 위치를 따라가고, 어떤 줄을 클릭해도 그 시점으로 플레이어가 이동한다.
- 회의 인텔리전스 대시보드: 원클릭 AI 요약, 액션 아이템 추적, 감정 지표, 주제 태깅을 위한 인터랙티브 뷰를 개발했다.
- 프론트엔드 아키텍처: 초기 구상부터 프로덕션까지 이 프로젝트의 유일한 프론트엔드 엔지니어였다. 기능 범위, 컴포넌트 아키텍처, 상태 관리, 배포 모두 내 책임이었다. 백엔드 파이프라인은 비동기이며 웹훅과 크론 작업으로 동작한다: 전사본과 요약은 처리가 끝난 뒤 한 번에 가져오며, 실시간으로 스트리밍되지 않는다.
왜 중요했나
MetaNotes는 공개 SaaS 제품으로 출시됐고, 사내에서는 200명 이상의 Testlify 직원이 회의 녹화와 고객 통화에 이 도구를 쓰면서 Fireflies와 tl;dv를 대체했다. 이를 통해 이전에 그 벤더들에게 지불하던 연간 2만 4천 달러의 운영 비용을 없앴다.
프로젝트를 주도하고, 처음부터 끝까지 직접 책임진 결과물
나는 MetaNotes에서 프론트엔드 엔지니어로서 프로젝트를 주도했고, 책임 범위는 UI를 넘어섰다. 기능 범위, 배포, 일상적인 제품 결정도 내 몫이었다. 첫 커밋부터 사내 출시까지 약 5개월이 걸렸다.
전사본이 회의 중이 아니라 회의 후에 나타나는 이유
MetaNotes는 봇이 통화 중일 때 전사본 텍스트를 실시간으로 스트리밍하지 않는다. 녹화 중에는 상태 배지(Capturing/Paused)와 일시정지·재개·중지 컨트롤만 표시된다. 데이터 수집은 Attendee의 웹훅(통화에 참여해 미디어를 캡처하는 회의 봇 API)과 여러 예약된 크론 작업을 거친다: 전사와 OpenAI를 통한 요약은 통화가 끝난 뒤 비동기로 처리되고, 프론트엔드는 완성된 전사본, 요약, 액션 아이템을 서버 액션 호출 한 번으로 가져온다.
기능 범위, 배포, 제품 결정까지 함께 짊어진 5개월짜리 일정을 감안하면, 실시간 스트리밍은 그만한 비용을 들일 가치가 없었다. WebSocket 연결을 관리하고, 부분 전사본을 정합성 있게 맞추고, 재연결까지 처리해야 했을 텐데, 그렇게 해서 얻는 건 사용자가 실제로 필요로 하지 않았던 기능(전사본이 실시간으로 만들어지는 모습을 보는 것)뿐이었다. 통화가 끝난 뒤 비동기로 데이터를 가져오는 방식은 훨씬 적은 움직이는 부분으로 동일한 전사본, 요약, 액션 아이템을 제공한다. 그래서 이 방식으로 출시했다.
타임스탬프 동기화 전사본 하이라이트
영상 플레이어와 전사본 목록 사이의 단순한 양방향 바인딩이다. timeupdate 리스너가 재생 위치를 추적하고, 전사본 배열을 스캔해 현재 활성화된 줄을 찾아 하이라이트하며, 어떤 줄을 클릭해도 플레이어가 그 타임스탬프로 이동한다. 일반적인 회의 길이에서는 가상화된 목록도, 별도의 동기화 라이브러리도 필요 없다. 둘 중 하나를 도입한다면 데이터가 아직 갖고 있지도 않은 문제를 해결하려는 셈이다.
데이터 모델과 규모
- 전사본은 대화마다 하나의 JSON 블롭으로 저장되며, 데이터베이스 수준에서 청크로 나누거나 페이지네이션하지 않는다.
- 대화 목록과 캘린더 목록은 페이지당 10~20개 항목으로 페이지네이션된다.
- OpenAI 요약 호출은 요청당 800 출력 토큰으로 제한된다.
현재 회의량과 길이에서는 이 정도로 충분하다. 만약 둘 중 하나가 한 자릿수 크게 늘어난다면, 가장 먼저 다시 살펴볼 것은 단일 블롭 전사본 컬럼과 선형 스캔 방식의 하이라이트 조회다. 알고 있는 트레이드오프이지, 미처 몰랐던 맹점이 아니다.
직접 만들 것인가, 사서 쓸 것인가
Testlify는 Fireflies와 tl;dv에 비용을 지불하고 있었지만, 두 서비스 모두 핵심 기능을 더 비싼 요금제 뒤에 가둬 두었고 녹화된 회의의 저장 용량이 늘어날수록 비용도 더 커졌다. 자체 구축으로 이 두 제약을 모두 없앴고, 200명 이상의 직원이 회의 녹화와 고객 통화에 이를 사용하게 되면서 이전에 그 벤더들에게 쓰던 연간 2만 4천 달러를 절감했다.
기술 스택
Next.js 16 / React 19 App Router, TypeScript, 클라이언트 상태 관리는 Zustand(localStorage 영속화 포함), 인증은 Clerk, UI는 Radix와 Tailwind, 녹화 재생은 Vidstack, Zoom/Meet/Teams 캡처를 위한 회의 봇 API로 Attendee를 사용했다.