# Stepper: 진행 단계 UI

Account, Plan, Done 세 단계로 된 가로형 진행 표시기를 두 번째 단계 상태로 보여 줍니다. 동영상 템플릿. Claude용 코드를 복사하거나 Subclip에서 편집하세요.

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

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-stepper.mp4?v=acda60c86a

라벨이 붙은 세 단계로 된 가로형 온보딩 스테퍼로, 활성 단계를 설정해 진행 상황을 보여 줄 수 있습니다.

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

가로형 스테퍼에 선으로 이어진 세 단계 Account, Plan, Done이 표시되고, 두 번째 단계 Plan이 활성화되어 있습니다. 템플릿은 이 상태를 4초 동안 유지합니다. 코드에서는 진행이 연속적인 단계 위치를 따라 움직이므로, 흐름이 앞으로 갈수록 선이 채워지고 각 단계가 불이 들어옵니다.

활성 단계와 함께 재생 속도와 배경도 설정할 수 있습니다. 온보딩 안내, 결제-가입 데모, "세 단계로 끝나는 사용법" 설명 영상, 디자인 시스템 소개에 사용하세요.

## 이럴 때 쓰세요

- 온보딩 안내
- 결제와 가입 데모
- 세 단계 설명 영상
- 디자인 시스템 소개

## 바꿀 수 있는 항목

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

## 이 템플릿 사용 방법

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

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