# Remotion UI 컴포넌트 및 흐름 애니메이션 템플릿

콤보박스, 명령 메뉴, 토스트, 슬라이더, 탭, 그리고 가입-결제-설정 전체 흐름까지 무료 Remotion UI 애니메이션 템플릿 14개. 편집하거나 코드를 받으세요.

Canonical URL: https://www.subclip.app/ko/motion-graphics-templates/remotion/ui-animations

이 Remotion 템플릿들은 인터페이스의 부분들을 움직입니다. 열리는 콤보박스, 걸러지는 명령 메뉴, 클릭 후 미끄러져 들어오는 토스트, 드래그되는 슬라이더 같은 것들입니다. 일부는 커서가 가입 양식을 채우거나 결제를 끝내는 전체 흐름입니다. 앱을 직접 녹화하지 않고도 작동하는 모습을 보여 줘야 하는 제품 데모와 SaaS 출시 영상에 유용합니다.

## 컴포넌트와 흐름

컴포넌트 템플릿은 각각 하나의 상호작용을 재생합니다. Combobox는 쿼리를 입력해 결과를 고르고, Command Menu는 명령 목록을 거르며, Context Menu는 우클릭으로 열리고, Tabs는 패널을 전환하고, Slider는 값을 드래그하며, Stepper는 단계를 진행하고, Resizable은 구분 핸들을 드래그하며, Skeleton은 로딩된 콘텐츠로 바뀌고, Toast는 동작 완료를 확인하며, Typing Indicator는 점 세 개의 맥동을 보여 줍니다. Search Reveal은 보조 원들로 검색창을 만들어 냅니다.

흐름은 이것들을 이어 붙입니다. Signup Flow는 모든 항목을 채우고 제출하며, Checkout Flow는 요금제를 고르고 카드 정보를 입력하고, Settings Toggle Flow는 스위치를 켜고 테마를 고른 뒤 저장합니다.

## 인터페이스 편집하기

각 템플릿은 라벨, 값, 타이밍이 간단한 props와 배열에 들어 있는 TSX 컴포넌트이므로, 문구를 내 제품에 맞게 바꿀 수 있습니다. Subclip에서 화면 녹화와 나란히 편집하거나, 코드를 내 Remotion 프로젝트에 복사하세요.

## 템플릿 14개

- [Search Reveal](https://www.subclip.app/ko/motion-graphics-templates/remotion/search-reveal) (Remotion, UI): 가는 보조선 원이 커지며 검색창으로 맞춰지고, 텍스트가 입력되며, 그 뒤로 화려한 그래픽 패널이 열립니다.
- [Combobox](https://www.subclip.app/ko/motion-graphics-templates/remotion/combobox) (Remotion, UI): 플레이스홀더가 있는 트리거, 열린 옵션 패널, 강조된 행이 있는 검색형 선택 컴포넌트로, UI 데모 영상에 쓸 수 있습니다.
- [Command Menu](https://www.subclip.app/ko/motion-graphics-templates/remotion/command-menu) (Remotion, UI): 검색창과 단축키가 달린 명령 목록이 있는 키보드 명령 팔레트를 어둡게 처리한 배경 위에 열린 상태로 보여 줍니다.
- [Context Menu](https://www.subclip.app/ko/motion-graphics-templates/remotion/context-menu) (Remotion, UI): 네 가지 동작과 마우스가 올라간 행이 있는 우클릭 메뉴 패널로, UI 데모에서 커서 위치에 바로 놓을 수 있습니다.
- [Resizable](https://www.subclip.app/ko/motion-graphics-templates/remotion/resizable) (Remotion, UI): 구분 핸들이 있는 두 패널 레이아웃으로, UI 데모 영상에 맞게 분할 비율과 핸들 상태를 설정할 수 있습니다.
- [Skeleton](https://www.subclip.app/ko/motion-graphics-templates/remotion/skeleton) (Remotion, UI): 둥근 아바타와 텍스트 두 줄 위로 반짝임이 지나가는 스켈레톤 로딩 카드입니다.
- [Slider](https://www.subclip.app/ko/motion-graphics-templates/remotion/slider) (Remotion, UI): 채워진 값과 손잡이 상태를 설정할 수 있는 깔끔한 범위 슬라이더로, 손잡이 위에 현재 값이 표시됩니다.
- [Stepper](https://www.subclip.app/ko/motion-graphics-templates/remotion/stepper) (Remotion, UI): 라벨이 붙은 세 단계로 된 가로형 온보딩 스테퍼로, 활성 단계를 설정해 진행 상황을 보여 줄 수 있습니다.
- [Tabs](https://www.subclip.app/ko/motion-graphics-templates/remotion/tabs) (Remotion, UI): 알약 모양 또는 밑줄 표시기와 활성 탭의 짧은 문구 패널이 있는 탭 컴포넌트입니다.
- [Toast](https://www.subclip.app/ko/motion-graphics-templates/remotion/toast) (Remotion, UI): 아이콘, 제목, 세부 문구 한 줄이 있는 작은 알림 카드로, 기본 또는 성공 스타일이 있으며 앱 데모 영상에 쓸 수 있습니다.
- [Typing Indicator](https://www.subclip.app/ko/motion-graphics-templates/remotion/typing-indicator) (Remotion, UI): 채팅 앱의 입력 중 표시처럼, 작은 점들이 차례로 부드러운 물결을 이루며 튀어 오릅니다.
- [Signup Flow](https://www.subclip.app/ko/motion-graphics-templates/remotion/signup-flow) (Remotion, UI): shadcn 스타일 가입 카드로, 커서가 이름, 이메일, 비밀번호를 채우고 로딩 상태를 거쳐 제출하면 성공 토스트를 받습니다.
- [Checkout Flow](https://www.subclip.app/ko/motion-graphics-templates/remotion/checkout-flow) (Remotion, UI): 결제 주기 전환, 카드 입력란, 약관 체크박스가 있는 결제 카드를 커서가 채우고 결제하며, 마지막에 성공 토스트가 나타납니다.
- [Settings Toggle Flow](https://www.subclip.app/ko/motion-graphics-templates/remotion/settings-toggle-flow) (Remotion, UI): 두 열로 된 설정 카드에서 커서가 알림을 켜고, 테마를 고르고, 슬라이더를 드래그한 뒤 저장합니다.