AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

핵심 포인트

LIFF가 LINE 인증과 사용자 정보(userId, displayName)를 추상화해, 별도 인증 시스템 없이 바로 WebRTC 통화에 진입할 수 있다.
LINE Planet SDK의 MediaStreamManager(MSM)를 싱글톤으로 유지해 미리보기 → 통화 전환 시 카메라/마이크 권한 재요청을 방지한다.
참가자 수(1~5명+)에 따라 동적 그리드 레이아웃과 비디오 해상도(VGA)를 함께 조정해 대역폭과 디코딩 부담을 줄인다.
Firebase Cloud Functions를 앱 서버로 활용해 LINE Planet 액세스 토큰 발급 인프라를 서버 설정 없이 빠르게 구성했다.
MediaPipe 기반 가상 배경 블러를 제공하나 모바일 웹뷰는 미지원, 데스크톱에서만 권장한다.

상세 정리

프로젝트 배경: PM + Android 엔지니어 2명이 웹 엔지니어 없이 LINE OA(공식 계정) 기반 그룹 영상 통화 서비스를 개발, LIFF/LINE Planet이 인증·WebRTC·글로벌 네트워크 인프라를 추상화해 가능했다.
아키텍처 4레이어: LINE OA(진입점) → LIFF(웹뷰 관리 + 사용자 정보) → 웹 앱(React/Vite, UI + 비즈니스 로직) → 앱 서버(LINE Planet 액세스 토큰 발급) 순으로 구성된다.
방 ID 설계: 16자리 영숫자 랜덤 문자열로 방을 생성, 초대 링크의 query string에서 roomId를 복원하는 방식으로 참가자 진입을 처리한다.
MSM 싱글톤 패턴: PlanetKit의 MediaStreamManager 인스턴스를 미리보기 화면부터 그룹 통화까지 동일하게 유지해, 카메라/마이크 권한 재요청 없이 스트림을 재사용한다.
카메라 전환: enumerateDevices() 라벨 매칭으로 deviceId를 역산해 전/후면 전환 구현, 라벨은 권한 허용 후에만 채워져 최초 호출 시 undefined 반환하는 함정이 있다.
모바일 감지: 뷰포트 크기 대신 User Agent 기반 감지 방식을 채택해 정확성을 높였다.
LIFF 사용자 인증: liff.getProfile()로 userId/displayName을 획득, 외부 브라우저 진입 시 liff.login()으로 리다이렉트한다.
액세스 토큰 발급: Firebase Cloud Functions로 LINE Planet 서버 인증을 처리해 별도 서버 인프라 없이 빠르게 구성했다.
Conference 참가: new PlanetKit.Conference()로 인스턴스 생성 후 joinConference()에 mediaStreamManager를 그대로 전달, delegate 콜백(evtConnected/evtDisconnected/evtPeerListUpdated)으로 상태를 관리한다.
동적 그리드: 1명(전체 스크린), 2명(2분할), 3명(상단 2+하단 1), 4명(2×2), 5명+(2×2 유지, 최근 발언자 우선) 레이아웃을 VGA 해상도와 함께 적용해 대역폭과 디코딩 부담을 절감한다.
초대 기능: shareTargetPicker API로 LINE 친구 다중 초대 가능, LINE Login 채널이 Published 상태여야 동작하는 필수 조건이 있다.
트러블슈팅: CORS는 LINE Planet Console Project Settings에서 도메인 등록, 로컬 앱 서버 통신은 Vite server.proxy 활용, 카메라 전환 실패는 'back' 먼저 매칭 후 SDK 기본 카메라로 폴백하는 방식으로 해결한다.