요약 및 주요 성과 (Summary & Key ROI)

• 애니메이션 스코어보드 도입 이후, 평균 시청 시간 23% 증가

  • 기존 정적 UI 평균 시청 시간: 7.6분 → Lottie UI 평균 시청 시간: 9.3분

• UI 개발 사이클 70% 단축

  • HTML/CSS/JS 기반 개발: 평균 4.5일 → Lottie 기반 개발: 평균 1.3일

• 전체 생중계 콘텐츠 중 40% 이상이 Lottie UI를 사용

  • Lottie UI가 포함된 방송 수: 일평균 5,530건

시청자 피드백:
“새로운 스코어보드가 정말 멋져요. 경기 보는 재미가 훨씬 살아났어요!”

CameraFi 소개

Vault Micro는 CameraFi Live와 CameraFi Studio를 개발한 글로벌 테크 기업입니다.

• CameraFi Live는 누구나 YouTube, Facebook, Twitch 등으로 간편하게 생방송을 송출할 수 있는 모바일 라이브 스트리밍 앱입니다.

• CameraFi Studio는 아마추어 스포츠 팀과 선수들을 위한 영상 제작 및 경기 추적 플랫폼으로, 실시간 스코어보드, 팬 멤버십 시스템, 랭킹 기능 등을 제공합니다.

현재까지 2,000만 건 이상의 다운로드, 500만 명 이상의 등록 사용자를 기록하며, 미국, 한국, 일본, 동남아시아 등으로 빠르게 확장 중입니다.

과제 – 방송 데이터를 인터랙티브하게 만들기

CameraFi Studio가 진화함에 따라, 팀은 시청자의 몰입도와 실시간 정보 전달력을 높일 수 있는 UI 솔루션을 고민하게 되었습니다. 기존의 HTML/CSS 기반 오버레이는 시스템 리소스를 많이 소모하고, 유연성에도 한계가 있었습니다.
이러한 이유로 벡터 기반으로 가볍고, 실시간 데이터 연동에 최적화된 Lottie 포맷이 주목받게 되었습니다.

Lottie의 도입을 통해 CameraFi는 시각적으로 정교하면서도 실시간 데이터를 반영할 수 있는 방송용 오버레이를 제작할 수 있게 되었으며, 대표적인 활용 예시는 다음과 같습니다:

• 실시간 스코어보드 애니메이션

• 팀 및 선수 소개 화면

• 리플레이 인터페이스

• 커머스 오버레이

• 애니메이션 이모티콘 및 채팅 버블

솔루션 – 실시간 UI 엔진으로서의 Lottie

CameraFi는 LottieFiles를 도입하면서 디자인부터 개발까지의 워크플로우를 크게 혁신했습니다.
디자이너는 After Effects로 애니메이션을 제작하고, LottieFiles for After Effects 플러그인을 통해 JSON 파일로 내보낸 후, 이를 React Web 및 Android 앱에 손쉽게 통합했습니다.

Lottie는 벡터 기반이기 때문에 모든 기기에서 선명하게 렌더링되며, JSON 구조 덕분에 실시간 콘텐츠 삽입도 유연하게 처리됩니다. 그 구현 방식은 다음과 같습니다:

1. 실시간 텍스트 업데이트

CameraFi는 Lottie의 JSON 구조를 활용해 실시간 점수, 선수 이름 등 텍스트 콘텐츠를 실시간으로 삽입합니다.
텍스트 레이어를 nm 키로 식별하고 layer.t.d.k[0].s.t 값을 수정함으로써 애니메이션 내 텍스트를 동적으로 업데이트할 수 있습니다.

// Paste a code snippet
import { motion } from "framer-motion";

function Component() {
    return (
        <motion.div
            transition={{ ease: "linear" }}
            animate={{ rotate: 360, scale: 2 }}
        />
    );
}

신뢰성 있는 텍스트 렌더링을 위해 After Effects에서 "Glyphs" 및 "Global Glyph" 내보내기 옵션을 비활성화하여 폰트 정보를 그대로 유지합니다.
글리프 기반 벡터 데이터 대신 사전 로딩된 웹폰트를 사용함으로써 기기와 플랫폼 간의 일관된 표현이 가능합니다.

이 모든 업데이트는 Realtime Database에서 수신하는 실시간 데이터를 기반으로 이루어지며, 거의 지연 없이 현재 경기 상황을 반영할 수 있어 시청자에게 몰입감 있는 경험을 제공합니다.

2. 실시간 이미지 업데이트

CameraFi는 assets 배열과 asset.p 경로를 활용해 팀 로고나 선수 프로필 사진을 실시간으로 교체합니다:

// Paste a code snippet
import { motion } from "framer-motion";

function Component() {
    return (
        <motion.div
            transition={{ ease: "linear" }}
            animate={{ rotate: 360, scale: 2 }}
        />
    );
}

3. Dynamic Property 제어

카메라Fi는 방송 컨텍스트에 맞게 글꼴 크기, 색상, 위치, 회전 등을 실시간으로 조정하여 반응형 UI를 구현하고 있습니다.

“Lottie가 다른 포맷과 다른 점은 JSON 기반이라 코드를 통해 실시간 앱 환경에 맞게 직접 수정이 가능하다는 점입니다. 애셋을 다시 내보내지 않아도 비주얼을 동적으로 업데이트할 수 있습니다.”
— 권시현, CameraFi Studio 리드 개발자

CameraFi Studio의 미래

CameraFi는 앞으로 Lottie의 활용 범위를 더욱 넓혀갈 계획입니다. 랭킹 시스템, 리플레이 시퀀스, AI 기반 해설 기능 등 다양한 기능에도 Lottie를 적용하여 시청자 경험을 한층 강화하고자 합니다.

또한, 콘텐츠 제작자와 팀이 손쉽게 커스터마이징할 수 있도록 템플릿 기반의 Lottie 마켓플레이스를 개발 중이며, 방송사와 제작 파트너를 위한 전용 B2B 패키지도 함께 준비하고 있습니다.

“Lottie의 도입은 우리에게 전환점이었습니다.
방송 품질이 획기적으로 향상되었고, 개발자들에게도 훨씬 유연하고 효율적인 워크플로우를 제공하게 되었죠.”
— 권시현, CameraFi Studio 리드 개발자