웨비나 라이브 스트리밍 페이지
2026년 2월Frontend Developer주식회사 루멘테라
Next.js (App Router)ReactTypeScriptNaver Cloud PlayerTanStack Query
Overview
약국 대상 웨비나를 위해 라이브 스트리밍 시청 페이지와 사전예약·시청 현황 기능을 구현했습니다. 이 화면에서 처음 적용한 라우트 코로케이션 구조가 이후 전사 아키텍처 마이그레이션의 실증 사례가 됐습니다.
제약사가 약국을 대상으로 진행하는 웨비나를 서비스 안에서 직접 시청할 수 있도록, 외부 스트리밍 플레이어를 연동한 시청 페이지를 만들었습니다. 사전예약 신청과 실시간 참여 현황을 함께 제공하고, 시청 이력과 연관 상품을 연결해 웨비나에서 상품 구매로 이어지도록 구성했습니다.
Challenges & Solutions
외부 스트리밍 플레이어 연동
Before
서비스 내에 라이브 영상 송출 수단이 없어, 웨비나가 외부 플랫폼에서 따로 진행되던 상황
After
Naver Cloud Player를 연동한 시청 페이지를 구현해 서비스 안에서 라이브 시청이 가능하도록 하고, 시청 이력과 연관 상품을 연결
사전예약과 참여 현황 파악
Before
누가 신청했고 실제로 몇 명이 보고 있는지 확인할 방법이 없음
After
사전예약 신청 기능과 실시간 참여 현황 확인 기능을 함께 구현해 운영 측에서 바로 파악 가능하도록 구성
기능 단위로 코드를 모아본 첫 시도
Before
기존 구조에서는 한 기능의 컴포넌트·훅·타입이 레이어별 폴더에 흩어져 있어 변경 범위를 짚기 어려움
After
웨비나 관련 컴포넌트를 라우트 폴더 안에 모아두는 방식으로 구현했고, 이 구조가 이후 전사 아키텍처 마이그레이션에서 채택 근거로 인용됨
Impact
라이브
Naver Cloud Player 기반 스트리밍 송출
사전예약
신청 접수 + 실시간 참여 현황
구조 실증
라우트 코로케이션 첫 적용 → 전사 마이그레이션 근거