리오티 리액트 네이티브

당신은 현재 두 가지 위치 중 하나에 있을 것입니다. 디자이너가 당신에게 Lottie JSON을 제공하고, “오늘 앱에 이어서 넣을 수 있나요?”라고 묻는 경우, 또는 이미 연결을 설정하고 개발 단계에서 애니메이션을 작동시키지만, 실제 장치, 시작 시간, 릴리즈 빌드가 들어오면 비용이 많이 들 때를 알게 될 것입니다.

Lottie React Native는 흥미로운 곳에서 시작됩니다. 기본 데모는 쉽습니다. 프로덕션 준비된 implementation은 그렇지 않습니다. 차이점은 일반적으로 설치 방법, 재생 제어 방법, 애니메이션 파일을 무해한 자산으로 다루는지, 성능 예산의 일부로 다루는지에 따라 결정됩니다.

Why Lottie Is Essential for React Native Apps
- 디자인과 엔지니어リング이 같은 싸움에서 싸우지 않도록
- Lottie이 어디에 가장 잘 맞는지
Lottie 개발 환경을 설정하는 방법
첫 번째 Lottie 애니메이션을 표시하는 방법
로티 애니메이션 제어를 마스터하세요
생산 앱의 성능 최적화
로티 애니메이션 문제 해결

리오티는 리액트 네이티브 앱에서 필수적인 이유

리액트 네이티브에서 고급 제품 애니메이션을 재현하려는 시도가 있으셨나요? 애니메이션의 작은 동작 세부 사항은 타이밍 로직, 이너폴레이션, 플랫폼 특이성으로 변해 버립니다. 애니메이션은 가깝게 보이지만 '가깝게'는 디자이너가 배송한 것과는 다릅니다.

리오티는 이 워크플로를 바꾸었습니다. 에어비앤비는 2016년에 리오티를 오픈 소스로 출시했으며, 이 출시로 모바일 애니메이션을 디자이너가 직접 배송할 수 있도록 해 주었습니다. 엔터프라이즈 환경에서 이 변화는 개발 비용을 40%까지 줄였습니다.에어비앤비의 리오티 개요 디자인과 엔지니어링은 같은 싸움을 하지 않습니다.

리오티 리액트 네이티브의 주요 이점은 'JSON에서 예쁜 애니메이션'만이 아닙니다. 그것은 관심사 분리를 의미합니다. 디자이너는 아프터 이펙트에서 작업하고 Bodymovin으로 내보냅니다. 개발자는 원본을 native-backed 플레이백으로 렌더링합니다. motion을 커스텀 __CAPGO_KEEP_0__으로 번역하는 대신

A key benefit of Lottie React Native isn’t just “pretty animations in JSON.” It’s the separation of concerns. Designers work in After Effects and export with Bodymovin. Developers render the output with native-backed playback instead of translating motion into custom code.

실용적인 규칙:

리오티를 사용할 때는 애니메이션이 제품 경험의 일부일 때, 단순한 투명도나 변환 전환만 필요할 때만 사용하세요. 리오티는 리액트 네이티브 앱에서 필수적인 이유

사용자 경험의 또 다른 측면도 있습니다. Motion은 feedback을 제공하고, 동작을 확인하고, 로딩 상태를 느리게 만듭니다. 팀이 인터페이스에 대한 폴리시, 유지율, 신뢰에 대해 진지하게 생각하고 있다면, 애니메이션은 그 대화의 일부입니다. 더 광범위한 앱 사용자 경험 토론 일반적으로 같은 장소로 끝나게 됩니다: 빠른 feedback이 정적 화면보다 낫습니다.

Lottie가 가장 잘 맞는 곳

Lottie React Native는 다음에 가장 잘 작동합니다.

브랜드 미니 인터랙션 좋아요, 저장, 체크마크, 구매 성공 상태와 같은 것
온보딩 일러스트 비디오를 배송하지 않고도 커스텀으로 느껴지도록 해야 하는 것
로딩 및 빈 상태 정적 UI가 완성되지 않은 것처럼 느껴질 때
기능 교육 제품이 GIFs 또는 MP4s를 임베딩하지 않고도 동작을 원할 때

그것이 해결하지 않는 것은 모든 애니메이션 문제입니다. 기본적인 화면 전환 애니메이션에 대해서는 React Native의 내장 애니메이션 도구가 종종 더 단순합니다. 매우 큰 또는 상호작용이 많은 동작 시스템의 경우 JSON 형식이 이점이 아닌 트레이드 오프가 될 수 있습니다. 이 트레이드 오프가 더 중요해지는 것은 프로덕션에 도달했을 때입니다. 그곳에서 대부분의 튜토리얼이 너무 일찍 중단됩니다.

Lottie 개발 환경 설정

설치 경로가 하나의 결정에 달려 있습니다: Expo 관리 워크플로우 또는 Bare React Native두 가지 모델을 혼동하지 마세요. 대부분의 설정 문제가 개발자가 Expo 내의 Bare 워크플로우 가이드를 따르거나 Expo가 모든 네이티브 세부 사항을 추상화한다고 가정할 때 발생합니다.

Lottie 애니메이션 설정을 위한 흐름 차트

워크플로우를 선택하기 전에 설치하세요

앱이 Expo에 살고 있고 가장 빠른 설정을 원한다면, Expo 경로를 유지하세요. 네이티브 작업이 필요하다고 확신한다면만 예외를 인정하세요. Bare 앱에 있다면 또는 이미 네이티브 모듈에 직접 제어를 필요로 하는 경우, 일반 네이티브 의존성을 설치하고 iOS 및 Android 빌드를 즉시 검증하세요.

많은 팀이 설정이 프로젝트 유형과 일치할 때 디버깅이 얼마나 더 쉬워지는지 과소 평가합니다. 그 것도 많은 팀이 커스텀 네이티브 통합을 구축하는 데 있어서 개발 클라이언트 워크플로우로 이른 시기에 이동하는 이유입니다. Expo 개발 클라이언트 워크플로우 __CAPGO_KEEP_0__

Expo 관리 설정

Expo 관리 앱의 경우, 최소한으로 유지하세요.

패키지를 설치하세요
```
npx expo install lottie-react-native
```
메트로를 재시작하세요
```
npx expo start -c
```
장치 또는 시뮬레이터에서 확인하세요 지역 JSON 파일부터 시작하여 매우 작은 애니메이션을 렌더링하세요. 큰 자산과 새로운 설치를 동시에 디버그하지 마세요.

Expo에서 몇 가지 실용적인 주의 사항이 중요합니다:

지역 파일을 우선으로 사용하세요: 원격 애니메이션 디버깅은 네트워크 노이즈를 추가하여 라이브러리가 작동하는지 증명하려는 경우에만 문제를 일으킵니다.
릴리즈 동작을 빠르게 테스트하세요: 개발 모드는 타이밍과 성능과 관련된 문제를 숨길 수 있습니다.
자산 경로를 확인하세요: JSON 파일이 잘못된 위치에 있는 경우 가장 일반적인 "nothing이 렌더링되지 않는" 원인 중 하나입니다.

Expo는 "it works"로 가장 빠른 길이지만 "it scales"로 가장 빠른 길은 아닙니다.

bare React Native 설정

bare 프로젝트에서 native 의존성을 설치하고 즉시 유효성을 검사하세요.

패키지를 설치하세요
```
npm install lottie-react-native
```
iOS pods를 설치하세요
```
cd ios && pod install && cd ..
```

앱을 다시 빌드하세요

npx react-native run-ios

또는

npx react-native run-android

설치 후에 앱을 다시 빌드하여 문제가 있는지 확인하세요. Hot reload는 native 의존성이 올바르게 컴파일되지 않은 앱을 구원하지 못합니다.

시간을 절약하는 bare workflow 확인 항목

이러한 단축된 확인 항목을 사용하여 다음 단계로 넘어가기 전에 확인하세요:

체크	왜 중요한가
설치 후 재구축	자연스러운 모듈은 최신 컴파일이 필요합니다
실행 `pod install`	iOS는 그것이 없으면 신뢰할 수 없습니다
단순한 로컬 JSON을 사용하세요	자산 문제와 분리된 설치 문제
두 플랫폼 모두 초기에 테스트하세요	Android와 iOS는 서로 다른 이유로 실패할 수 있습니다

__CAPGO_KEEP_0__

첫 번째 로티 애니메이션을 표시하는 방법

첫 번째 작동 애니메이션은 평범해야 합니다. 로컬 파일. 고정 크기. 자동 재생. 반복 옵션. 조건부 재생, 원격 JSON, 또는 심각한 레이어 애니메이션 내보내기와 함께 시작하지 마세요.

최신 개발 워크스페이스에 노트북과 모니터가 보여주는 code

지역 애니메이션 파일을 추가하세요

자신이 이미 하나가 있으면 asset 폴더를 만들지 마세요:

assets/
  animations/
    success.json

이름이 간단해야 합니다. 공백, 이상한 기호, 여러 단계의 폴더 구조를 피하세요. 경로가 명확해야 합니다. require() 시작 시 로딩 화면이나 런치 후 핸드오버를 위해 Lottie를 사용하는 경우, 큰 애니메이션을 시작 경로에 넣기 전에 신중하게 생각하세요. 특히 React Native 스플래시 화면 동작을 튜닝하는 경우 especialmente

LottieView를 사용하여 렌더링하세요 대형 화면 파일에 직접 넣기보다는 전용 컴포넌트를 만들세요:.

3 가지 유용한 일을 합니다:

라이브러리가 올바르게 렌더링되는지 증명합니다

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

export function SuccessAnimation() {
  return (
    <View style={styles.container}>
      <LottieView
        source={require('../assets/animations/success.json')}
        autoPlay
        loop={false}
        style={styles.animation}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  animation: {
    width: 220,
    height: 220,
  },
});

자산 경로가 올바르게 해결되는지 증명합니다

3 가지 유용한 일을 합니다:
라이브러리가 올바르게 렌더링되는지 증명합니다
이것은 재생 및 크기 조정을 나중에 조정할 수 있는 단일 고립된 장소입니다.

기본 사항을 생략하면 몇 가지 함정들이 즉시 나타납니다:

너무나도 좁거나 높지 않다. 애니메이션은 존재할 수 있지만 보이지 않을 수 있습니다.
잘못된 require() 경로: 메트로가 파일을 찾을 수 없습니다.
유효하지 않은 내보내기: 일부 JSON 파일은 기술적으로 유효하지만 모바일에서 예상치 못한 동작을 하는 특징을 포함할 수 있습니다.

첫 번째 렌더링을 지역화하고 결정적입니다. 통합 테스트를 하는 것이 아님을 기억하세요.

더 나은 첫 번째 화면 테스트

컴포넌트를 단순한 화면에 neutral 배경으로 배치하세요:

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { SuccessAnimation } from './src/SuccessAnimation';

export default function App() {
  return (
    <SafeAreaView style={styles.screen}>
      <SuccessAnimation />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

iOS와 Android 시뮬레이터에서 모두 작동하는지 확인하면 첫 번째 실제 장벽을 넘겼습니다. 그 다음 단계는 애니메이션을 더 추가하는 것이 아니라, 선언적 속성과 refs를 직접 제어할 때 사용할 때를 배울 것입니다.

Lottie 애니메이션 제어를 마스터하세요.

Lottie React Native 버그의 대부분은 애니메이션에 상태에 반응할 때 나타납니다. 자동 재생은 쉽습니다. '사용자가 아이템을 좋아할 때 이 구간을 재생하고, 사용자가 아이템을 싫어할 때 역방향으로 재생하고, 컴포넌트가 다시 렌더링될 때 stutter하지 않도록' 하는 것은 복잡한 곳입니다.

선언적 versus 명령형 애니메이션 제어 방법의 비교 차트를 설명하며, 그들의 특정 사용 사례를 강조합니다.

props를 사용할 때는 재생이 단순할 때

비활성화된 재생은 props만으로 충분합니다.

<LottieView
  source={require('../assets/animations/loading.json')}
  autoPlay
  loop
  speed={1}
/>

이 스타일은 다음에 좋습니다.

로딩 인디케이터
비활성화된 온보딩 일러스트레이션
빈 상태의 장식

이 스타일은 선언적이고 읽기 쉽습니다. 컴포넌트가 마운트되면 재생이 시작되고, React가 제어를 유지합니다. 애니메이션 로직이 props로 완전히 설명될 수 있다면, 그곳에서 유지하세요.

선언적 경우의 더 고급화된 예는 progressanimation frame을 다른 값과 연결하는 곳입니다. motion이 외부 진행 소스에 반영되어야 할 때 잘 작동하지만, one-off trigger 이벤트의 경우 불편합니다.

이전으로의 빠른 시각적 비교를 보시기 전에 refs로 넘어가겠습니다.

state가 animation을 제어할 때 refs를 사용하세요.

사용자가 탭, 토글, 또는 액션을 완료할 때, refs는 보통 더 안전한 도구입니다. 실제 세계 데이터는 68%의 개발자가 하이브리드 프레임워크를 사용하여 animation triggers가 실패하는 문제를 인식했습니다. 이는 hooks에서 refs를 적절하게 처리하지 못했기 때문입니다. useEffect __CAPGO_KEEP_0__에 집중된 실패한 트리거에 대한 논의에서 이러한 문제가 중요하다는 점을 언급했습니다.이 문제는 하이브리드 앱에만 국한되지 않습니다. 개발자가 refs를 재생성하거나, 마운트하기 전에 플레이백을 호출하거나, 불안정한 효과에 animation 호출을 연결하는 경우에도 나타납니다. animation.current.play() 믿을 수 있는 liked와 unliked 패턴 Capacitor-focused discussion of failed triggers.

이 패턴은 production에서 호출하는 것보다 더 잘 작동합니다.

import React, { useRef, useState } from 'react';
import { Pressable } from 'react-native';
import LottieView from 'lottie-react-native';

export function LikeButton() {
  const animationRef = useRef<LottieView>(null);
  const [liked, setLiked] = useState(false);

  const onPress = () => {
    if (!animationRef.current) return;

    if (liked) {
      animationRef.current.play(60, 0);
    } else {
      animationRef.current.play(0, 60);
    }

    setLiked(!liked);
  };

  return (
    <Pressable onPress={onPress}>
      <LottieView
        ref={animationRef}
        source={require('../assets/animations/like.json')}
        loop={false}
        autoPlay={false}
        style={{ width: 96, height: 96 }}
      />
    </Pressable>
  );
}

이 패턴은 production에서 호출하는 것보다 더 잘 작동합니다.

이 패턴은 production에서 호출하는 것보다 더 잘 작동합니다. play() inside useEffect every time state changes.

왜 작동하는가?

이벤트는 애니메이션 트리거를 소유합니다: 클릭 이벤트는 재생을 시작하는 안정적인 순간입니다.
리퍼는 지역적이고 지속적입니다: useRef 필요하지 않은 리렌더링을 피합니다.
컴포넌트는 자동 재생 충돌을 피합니다. 마운트 동작과 사용자 트리거 동작이 충돌하지 않도록 하세요.

주의할 만한 일반적인 실수:

리퍼가 존재하기 전에 트리거하는 경우
만약 animationRef.current null이 없으면 재생이 일어나지 않습니다. 보호하세요.
Using autoPlay with imperative controls을 사용합니다.
재생의 기본 소유자를 하나로 선택하세요.
모든 것을 통제하는 useEffect
UI 액션에 유용하지만, 대신 타이밍 문제를 추가하는 대신 제거하는 데 도움이 되는 효과입니다.

터치 핸들러 내에서 터치 핸들러를 먼저 트리거하세요. useEffect 에 도달하기 전에

production 앱의 성능 최적화

Lottie React Native는 팀이 큰 JSON 파일을 앱 번들에 넣고 시작 시간이 후퇴하는 이유를 궁금해하는 것을 보면서 가볍게 보이지만, 실제로 가볍지 않습니다. 애니메이션 자체가 항상 문제가 아닙니다. 전달 전략이 문제입니다.

Lottie 성능 최적화의 세 가지 주요 이점에 대한 인포그래픽: 번들 크기 감소, 프레임 속도 향상, 메모리 사용량 감소.

성능 최적화에 문제를 겪는 팀이 어디에 있습니다

The easiest mistake is bundling every animation directly into JavaScript and loading it all too early. According to 이 문서에 설명된 Lottie JSON을 잘못 배포하는 것에 대해이 가이드에 따르면 JS 번들을 오버로드하는 Lottie JSON과 같은 자산으로 인해 중간급 장치에서 앱 시작 시간이40% 이상 증가할 수 있습니다

그것들을 네이티브 자산으로 옮겨 demand 로딩하는 것은 critical한 최적화입니다.

이것은 실제로 많은 팀이 경험하는 문제와 일치합니다. 단일 작은 성공 애니메이션의 문제가 아니라, 그것은 쌓인 문제입니다.
온보딩 모션
로더 상태
전자 상거래 반응
브랜드 비어있는 화면

지역 파일 및 다른 번들-heavy 자산이 그들 옆에 앉아있는 것

What to optimize first

Export을 시작하세요. Export이 복잡하면 나중에 파싱, 메모리, 렌더링 안정성에 영향을 미칩니다. 모든 디자이너의 Export을 그대로 받아들이지 마세요.

이 프로덕션 체크리스트를 사용하세요:

JSON을 압축하세요: 작은 파일은 더 쉽게 로드되고 시작 시 부풀지 않습니다.
비중요한 애니메이션을 JS 번들에서 제거하세요: Keep launch code focused on what the app needs immediately.
애니메이션을 필요할 때 로드하세요: 화면이나 액션에 필요한 때 렌더링하세요.
오래된 기기 동작을 감사하세요: 최신 시뮬레이터는 비용이 많이 드는 재생을 숨길 수 있습니다.
대형 Lottie 파일을 시작 시 장식으로 사용하지 마세요: 첫 번째 상호 작용이 아니라면, 앱 런칭과 경쟁하지 않아야 합니다.

serious mobile performance 작업을 하는 팀에게는 AppLighter의 모바일 성능 가이드 모바일 성능 가이드는 앱 런칭, 렌더링, 프레임워크 트레이드 오프의 더 큰 맥락에서 애니메이션 결정에 대한 유용한 동반자입니다.

어떤 어려운 진실이 있습니다: 첫 번째 상호 작용을 늦추는 아름다운 애니메이션은 일반적으로 디자인 승리보다는 제품 버그입니다.

React Native를孤立적으로 생각하지 마십시오. Hybrid 스택에서 작업하는 팀은 유사한 자산 로딩 문제를 마주합니다. 더 광범위한 Capacitor 앱의 애니메이션 성능 지침 Lottie 결정에도 잘 매핑됩니다.

로컬 파일 versus 원격 전달

로컬 파일은 예측 가능합니다. 오프라인에서 작동하고 네트워크 변동성을 제거하며 테스트가 더 쉬워집니다. 또한 쉽게 오버 버스팅이 됩니다.

원격 전달은 바이너리가 더 가볍지만 애니메이션의 가용성, 캐싱, 폴백 문제가 발생합니다. 이 트레이드 오프는 비중심적인 동작에 대해 받아 들일 수 있습니다. 그러나 주요 UX 상태인 구매 확인 또는 인증 성공과 같은 경우에는 위험합니다.

실용적인 분할이 잘 작동합니다.

자산 유형	기본값을 더 좋게
핵심 상호작용 애니메이션	지역화된 최적화, 과도한 크기 없음
일부 홍보 애니메이션	백업이 있는 원격
시작 경로 애니메이션	절대 필요할 때만 지역화
적게 사용하는 기능 설명	요청 시 로드

이 섹션의 규칙 중 하나만 적용할 경우, 이 규칙을 사용하세요. Lottie JSON을 성능에 민감한 자산으로 다루세요. 무해한 장식으로는 안됩니다..

Lottie 문제 해결

Lottie가 깨졌을 때, 일반적인 원인이 대부분입니다. 잘못된 경로. 크기가 없는 크기. 참조 시간이 잘못되었습니다. 무거운 JSON. 디버깅을 빠르게 하려면 변수를 줄이세요.

안드로이드에서 애니메이션 렌더링이 안됩니다.

첫 번째로 JSON 파일이 해결되는지 확인하세요. 그리고 컴포넌트에 명시적인 크기를 주세요.

<LottieView
  source={require('../assets/animations/success.json')}
  autoPlay
  style={{ width: 200, height: 200 }}
/>

그렇지 않으면, 다른 알려진 좋은 애니메이션으로 교체하세요. 그럼 파일이 문제인지 설정이 문제인지 알 수 있습니다.

오래된 기기에서 플레이백이 끊기게 됩니다.

This usually points to the asset, not the component API.

이러한 해결책을 시도하세요:

애니메이션 복잡성을 줄이세요: 원본 파일이 무거우면 가벼운 내보내기를 요청하세요.
나중에 로드하세요: 초기 화면 작업과 경쟁하지 마세요.
압축된 버전을 테스트하세요: 압축된 파일이 더 잘 동작한다면, 병목 현상이 발견되었습니다.
여러 개의 동시 Lottie 뷰를 제거하세요: 화면에 여러 개의 애니메이션을 표시하는 것은 너무 많습니다.

ref가 null이거나 play가 아무런 효과가 없다면

null ref는 일반적으로 mount 전에 트리거가 발생하거나 컴포넌트가 조건부로 제거된 경우입니다.

if (animationRef.current) {
  animationRef.current.play();
}

ref를 안정적으로 유지하고, 불필요한 애니메이션 컴포넌트를 재생성하지 마세요. 개발 중에 반복적으로 이상한 현상이 발생하는 경우, 오래된 캐시를 삭제하여 도움이 될 수 있습니다. 간단한 useRefYarn 캐시 정리 루틴 개발 중에 애니메이션 자산의 오해를 제거하기 위해 때때로 충분합니다. 애니메이션은 화면 크기에 따라 올바르지 않습니다.

__CAPGO_KEEP_0__

Don’t let the animation define layout. Put it inside a container and size it intentionally.

아이콘과 반응을 위한 고정된 경계를 사용하십시오.
큰 삽화에 대한 비율에 대한 고려를 포함한 wrapper를 사용하십시오.
전체 너비로 확장하지 않고 export의 의도된 구성에 대한 확인을 먼저 하십시오.

대부분의 “Lottie은 깨졌습니다.” 보고는 레이아웃 문제, 자산 문제, 또는 타이밍 문제로 끝납니다. 라이브러리는 종종 당신이 요청한 것과 정확히 같습니다.

필요한 최종 디버깅 단축키가 있다면, 모든 고급 속성을 제거하고, 중앙 뷰에서 하나의 로컬 애니메이션을 렌더링하고, 다시부터 시작하여 문제를 분리하십시오. 이 방법은 생산 화면의 바쁜 화면을 보는 것보다 문제를 분리하는 데 더 빠릅니다.

Capgo은 JavaScript, 자산 및 구성 수정을 Capacitor 앱에 푸시하지 않고 스토어 리뷰를 기다리지 않고 팀이 JavaScript, 자산 및 구성 수정을 Capacitor 앱에 푸시할 수 있도록 도와줍니다. 유지보수 중인 하이브리드 앱을 관리하고 안전한 방법으로 업데이트를 푸시하고, 스테이지드 롤아웃을 처리하고, 프론트엔드 문제로부터 빠르게 복구할 필요가 있다면 Capgo은 가치 있는 것을 살펴보십시오. Capgo __CAPGO_KEEP_0__

Lottie React Native

목차

리오티는 리액트 네이티브 앱에서 필수적인 이유

Lottie가 가장 잘 맞는 곳

Lottie 개발 환경 설정

워크플로우를 선택하기 전에 설치하세요

Expo 관리 설정

bare React Native 설정

시간을 절약하는 bare workflow 확인 항목

첫 번째 로티 애니메이션을 표시하는 방법

지역 애니메이션 파일을 추가하세요

3 가지 유용한 일을 합니다:

더 나은 첫 번째 화면 테스트

Lottie 애니메이션 제어를 마스터하세요.

props를 사용할 때는 재생이 단순할 때

state가 animation을 제어할 때 refs를 사용하세요.

이 패턴은 production에서 호출하는 것보다 더 잘 작동합니다.

production 앱의 성능 최적화

성능 최적화에 문제를 겪는 팀이 어디에 있습니다

What to optimize first

로컬 파일 versus 원격 전달

Lottie 문제 해결

안드로이드에서 애니메이션 렌더링이 안됩니다.

오래된 기기에서 플레이백이 끊기게 됩니다.

ref가 null이거나 play가 아무런 효과가 없다면

__CAPGO_KEEP_0__