# Checkout Flow: 결제 애니메이션

커서가 연간 결제를 고르고, 카드 번호를 입력하고, 약관 체크박스에 체크한 뒤 Pay를 누르면 성공 토스트로 마무리됩니다. 동영상 템플릿. Claude용 코드를 복사하거나 Subclip에서 편집하세요.

Canonical URL: https://www.subclip.app/ko/motion-graphics-templates/remotion/checkout-flow

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-checkout-flow.mp4?v=62e416395c

결제 주기 전환, 카드 입력란, 약관 체크박스가 있는 결제 카드를 커서가 채우고 결제하며, 마지막에 성공 토스트가 나타납니다.

- 프레임워크: Remotion
- 카테고리: UI
- 길이: 11초
- 화면 비율: 16:9 가로
- 코드: 코드 받기(무료 로그인): https://www.subclip.app/ko/motion-graphics-templates/remotion/checkout-flow

"Upgrade your plan" 카드가 나타나고 항목들이 하나씩 흐릿하게 드러납니다. 커서가 결제 주기 전환에서 Yearly를 클릭하고, 카드 번호 칸에 초점을 맞추면 "4242 4242 4242 4242"가 입력되며, "I accept the terms and conditions"에 체크합니다. 이어서 "Pay $49"를 누르면 로딩 상태를 거쳐 성공으로 바뀌고, "Payment successful" 토스트가 미끄러져 들어왔다가 나중에 닫힙니다. 약 11초 동안 재생됩니다.

재생 속도와 장면 주변 배경을 조정할 수 있고, 라벨, 값, 색상은 코드에서 편집할 수 있습니다. SaaS 요금제 데모, 결제 서비스 제품 영상, 빠른 결제 광고, 요금제 업그레이드 안내에 사용하세요.

## 이럴 때 쓰세요

- SaaS 요금제 데모
- 결제 서비스 제품 영상
- 빠른 결제 광고
- 업그레이드 과정 안내

## 바꿀 수 있는 항목

- `speed`: 재생 속도 (숫자)
- `stageBackground`: 현장 주변의 배경 (색상)

## 이 템플릿 사용 방법

1. Mac 또는 Windows용 Subclip을 내려받으세요. 이 페이지의 모든 템플릿이 미리 설치되어 있습니다.
2. 템플릿 패널을 열고 Checkout Flow을(를) 골라 타임라인에 끌어다 놓으세요.
3. 레이어 설정에서 텍스트, 색상, 타이밍을 바꾸거나 AI 에이전트에게 수정을 맡기세요.
4. 영상을 내보내거나, 코드를 내려받아 내 프로젝트에서 템플릿을 사용하세요.

remocn의 Checkout Flow을(를) 바탕으로 제작: https://remocn.dev