techlist.io
KREN
line

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

reacttypescriptnode.jswebrtcliffline-planet-sdkfirebase-cloud-functionsngrok

LINE OA와 LIFF, LINE Planet SDK를 결합하면 별도 앱 설치 없이 LINE 안에서 그룹 영상 통화 서비스를 구현할 수 있다. 글에서는 LINE Planet 팀의 PM과 Android 엔지니어가 웹 엔지니어 없이 만든 사례를 바탕으로, LIFF 웹 앱과 액세스 토큰 발급용 앱 서버만 직접 개발하면 된다는 구조를 설명한다. LINE의 인증·WebRTC·글로벌 네트워크 인프라를 활용하므로 핵심은 각 컴포넌트를 연결하고 통화 흐름을 구현하는 것이다.

LINE OA와 LIFF의 역할

  • LINE OA
    • 사용자와 소통하는 접점이자 서비스 진입 채널이다.
    • 상담, 교육, 라이브 방송, 게임 음성 채팅 등 다양한 서비스를 제공할 수 있다.
  • LIFF
    • LINE 앱 내부 웹뷰에서 실행되는 웹 애플리케이션이다.
    • LINE 로그인 정보인 userId, displayName 등을 전달하므로 별도 인증 서버 없이 사용자를 식별할 수 있다.
  • LINE Planet
    • WebRTC 기반의 음성·영상 통화와 미디어 처리를 담당한다.
    • 글로벌 네트워크 인프라를 제공해 개발자가 통화 인프라를 직접 구축하지 않아도 된다.

구현해야 하는 전체 구조

  • 직접 개발할 부분은 크게 두 가지다.
    • LIFF에서 실행되는 그룹 영상 통화 웹 앱
    • LINE Planet 액세스 토큰을 발급하는 앱 서버
  • 앱 서버는 Firebase Cloud Functions로 구성하면 별도의 서버 인프라 설정을 줄일 수 있다.
  • LINE OA와 LIFF가 사용자 인증을, LINE Planet이 미디어 통신을 처리하므로 개발자는 서비스 화면과 연결 로직에 집중할 수 있다.
  • 실제 구현 대상은 웹 앱 레이어와 서버 레이어의 앱 서버이며, LINE OA·LIFF·LINE Planet의 기반 기능은 외부 플랫폼을 활용한다.

적용 가능한 서비스 사례

  • 전문 상담
    • 변호사, 재무 설계사, 심리 상담사와의 1:1 화상 상담
    • 별도 앱 설치 없이 LINE 앱에서 상담방 입장
  • 원격 교육
    • 수업 예약과 화상 수업을 LINE OA에서 제공
    • 여러 강사가 동시에 독립적인 통화방 운영 가능
    • 화면 공유를 이용한 문서·문제 풀이 지원
  • 실시간 소통 방송
    • 기본 500명에서 최대 1만 명까지 동시 참여 가능
    • 팬미팅, 라이브 이벤트, 진행자와 청중이 대화하는 양방향 방송 구현
  • 게임 음성 채팅
    • LINE 친구와 게임 중 별도 앱 전환 없이 실시간 음성 대화

개발 전 준비 사항

  • 개발 환경
    • Node.js 20 LTS 이상
    • npm 기반 프로젝트
    • LIFF 특성상 HTTPS 배포 필요
    • 로컬 개발에서는 ngrok 같은 HTTPS 터널링 도구 사용 가능
  • LINE Developers 설정
    • Business ID로 개발자 계정 등록
    • Provider 생성
    • LINE OA 생성 후 Messaging API 활성화
    • 같은 Provider에 LINE Login 채널 생성
    • LINE Login 채널의 LIFF 탭에서 LIFF 앱 등록
  • 주의할 설정
    • 발급된 LIFF ID를 이후 모든 초기화 과정에서 사용하므로 별도 보관해야 한다.
    • 친구 초대 기능인 shareTargetPicker를 사용하려면 LINE Login 채널이 Published 상태여야 한다.
  • LINE Planet 준비
    • LINE Planet Console 계정과 서비스 ID가 필요하다.
    • 해당 정보는 LINE Planet 팀에 요청해 발급받는다.

통화방 ID 설계

  • 사용자가 통화에 입장하기 전에 방 ID를 생성하거나 URL에서 복원한다.
  • 데모에서는 crypto.randomUUID()에서 하이픈을 제거한 뒤 앞 16자리를 사용해 랜덤 방 ID를 만든다.
  • 초대 링크에 roomId가 포함되어 있으면 query string에서 해당 값을 읽어 같은 방에 입장한다.
  • 서비스 목적에 따라 다음과 같이 확장할 수 있다.
    • 관심사별 고정 방
    • 사용자 그룹별 자동 방 생성
    • 예약된 수업이나 상담 일정에 연결된 방
  • 방 ID 자체만으로 권한을 판단하지 말고, 실제 서비스에서는 서버에서 접근 권한과 만료 여부를 검증해야 한다.

MediaStreamManager를 활용한 미리보기

  • 일반적인 웹 구현의 getUserMedia 대신 PlanetKit의 MediaStreamManager를 사용한다.
  • 미리보기 화면에서 생성한 MSM 인스턴스를 통화방 입장 후에도 재사용할 수 있다.
  • 이 방식의 장점은 다음과 같다.
    • 페이지 전환 시 카메라와 마이크 권한을 다시 요청하지 않음
    • 모바일 웹뷰에서 권한 프롬프트가 반복적으로 노출되는 문제 완화
    • 기존 미디어 스트림을 통화 연결 과정까지 유지
  • 구현 흐름은 다음과 같다.
    • 컴포넌트 마운트 시 MediaStreamManager를 한 번 생성
    • 비디오가 켜져 있으면 createMediaStream()으로 미디어 스트림 생성
    • 이미 스트림이 있으면 changeVideoInputDevice()로 비디오 입력 장치만 교체
    • 스트림을 HTML <video> 요소의 srcObject에 연결
  • 마이크 끄기/켜기는 권한을 다시 요청하지 않고 오디오 트랙의 enabled 속성만 변경한다.

모바일 카메라 전환 처리

  • 모바일 기기에서는 전면·후면 카메라 전환 기능을 제공할 수 있다.
  • useIsMobileDevice로 모바일 환경을 판별하고, 모바일에서만 전환 버튼을 노출한다.
  • resolveFacingModeDeviceId를 통해 front 또는 back 방향에 해당하는 카메라 장치 ID를 찾는다.
  • 카메라가 꺼진 상태에서는 전환 버튼을 비활성화해 불필요한 장치 변경을 막는다.
  • 데스크톱에서는 기본 장치를 사용하고, 모바일에서는 방향 기반 장치 선택을 적용한다.

데모 코드의 범위와 주의점

  • 글의 코드는 핵심 흐름을 보여주는 데모 코드다.
  • 통화 셋업, 미리보기, 통화 화면의 세부 UI와 전체 사용자 경험은 직접 구현해야 한다.
  • 프로덕션 적용 전 다음 항목을 추가 검토해야 한다.
    • 액세스 토큰 및 방 접근 권한 보안
    • 네트워크 오류와 권한 거부 처리
    • 통화 종료 및 리소스 정리
    • 모바일 브라우저별 호환성
    • 성능 최적화와 사용자 상태 동기화
  • 앱 서버에서는 LINE Planet 액세스 토큰을 안전하게 발급하고 클라이언트에 비밀 키가 노출되지 않도록 해야 한다.

실용적인 결론

LINE OA를 이미 운영 중이라면 LIFF와 LINE Planet을 조합해 상담·교육·방송 같은 실시간 서비스를 빠르게 확장할 수 있다. 초기 구현은 랜덤 방 ID, MediaStreamManager 기반 미리보기, Firebase Cloud Functions 기반 토큰 서버로 단순화할 수 있지만, 실제 출시 단계에서는 방 권한 검증과 토큰 보안, 모바일 환경의 예외 처리를 반드시 보강해야 한다.