레이어 타임라인 바의 왼쪽/오른쪽 가장자리를 클릭한 채로 드래그하면 애니메이션 길이와 시작/끝 지점을 조정해 속도와 지연 시간을 바꿀 수 있어요.

바가 너무 좁아 잡기 어려울 때는 마우스를 올리거나 키보드로 포커스하세요. 바의 너비가 28px 이하이면 둥근 왼쪽/오른쪽 핸들과 바 아래의 작은 이동 그립이 나타나요. 점을 드래그하면 해당 가장자리를 조정하고, 아래쪽 그립을 드래그하면 애니메이션을 옮겨요. 이 컨트롤은 잡을 수 있는 영역이 더 넓고 타임라인 열 안에 머물러요. 호버 지속 시간 바에는 오른쪽 핸들만 표시돼요. 이 컨트롤은 일반 바와 같은 스냅, 단축키, 실행 취소 기록을 사용해요.

레이어 타임라인 바의 가운데를 클릭한 채로 왼쪽이나 오른쪽으로 드래그하면 타임라인에서 애니메이션 위치를 옮길 수 있어요.

키보드로 정확한 타이밍 숫자 입력하기. 타이밍 바를 쓰고 싶지 않다면 타임라인 레이어의 두 번째 값을 클릭하고 키보드로 새 숫자(예: 1.5)를 입력해 속도와 지연 시간을 초 단위로 설정할 수도 있어요.

여러 레이어의 타이밍 조정하기

레이어를 2개 이상 선택한 다음, 선택한 레이어 중 하나에서 등장, 퇴장, 호버 타이밍 바를 드래그하세요. Bannerify는 선택한 다른 레이어의 해당 활성 타이밍 트랙에도 같은 이동을 적용하며, 레이어 간 상대적인 간격은 그대로 유지해요.

선택한 타이밍 중 가장 이르거나 가장 늦은 타이밍이 타임라인 가장자리에 닿으면 Bannerify는 그룹 이동을 그 경계에서 멈춰요. 잠긴 레이어, 비활성 타이밍 트랙, 미러링된 Figma Motion 애니메이션이 제어하는 등장 타이밍은 바뀌지 않아요.

드래그를 마칠 때마다 실행 취소할 수 있는 기록 단계 하나로 저장돼요.

타임라인 확대/축소 및 스크롤

레이어 목록 위의 +, − 버튼이나 확대/축소 슬라이더를 사용해 더 자세히 또는 더 넓게 보세요. 슬라이더 옆의 퍼센트가 현재 확대/축소 수준을 보여 줘요. Fit을 클릭하면 100%로 돌아가 타임라인 전체가 다시 보여요. 확대/축소는 보기만 바꾸며 애니메이션 타이밍이나 내보내는 길이는 바꾸지 않아요.

포인터를 눈금자나 타이밍 트랙 위에 두고 트랙패드에서 두 손가락으로 핀치 인/아웃하세요. 100~1000% 확대/축소 범위 안에서, 확대/축소하는 동안 포인터 아래의 시간이 고정돼요. 핀치는 보기만 바꾸며, 타이밍 바를 드래그하는 중에는 무시돼요. 마우스 휠로 스크롤하면서 Ctrl을 사용해도 돼요.

확대한 상태에서는 눈금자 바로 아래의 둥근 파란색 스크롤바 핸들을 클릭한 채로 왼쪽이나 오른쪽으로 드래그해 타임라인을 따라 이동하세요. 핸들은 마우스를 올리거나 누르고 있을 때 강조 표시돼요. 트랙패드로 가로 스크롤하거나, 타이밍 트랙 위에서 Shift를 누른 채 스크롤해도 돼요. 눈금자와 타이밍 바는 모든 배너에서 정렬된 상태로 유지돼요.

등장 바와 퇴장 바는 각 애니메이션이 재생되는 시간을 보여 줘요. 등장 바의 끝은 등장이 끝나는 시점을 나타내며, 그 뒤에도 레이어는 계속 보일 수 있어요. 호버 바는 호버 지속 시간을 조절하며 시작점은 고정돼 있어요.

키보드로 바 조정하기

바나 바의 가장자리 핸들 중 하나에 포커스한 다음 화살표 키를 사용하면 0.1초 단위로 옮길 수 있어요. Shift를 누르고 있으면 1초 단위로 옮겨요. 바를 옮기면 길이는 유지되고, 가장자리를 옮기면 시작이나 끝이 바뀌어요.

드래그하는 중에 Escape를 누르면 함께 움직이던 선택한 레이어를 포함해 드래그 전 타이밍으로 복원돼요. 장면 바를 옮기면 장면의 편집 가능한 애니메이션이 각각의 길이를 유지한 채 함께 움직여요.

타임라인 스냅 및 정리

Timeline Settings → Timeline Tools를 열고 Snap을 켜면 드래그하는 등장/퇴장 바, 장면 바, 그 편집 가능한 가장자리를 재생 헤드, 마커, 작업 영역 경계, 근처 애니메이션 가장자리에 맞출 수 있어요. 드래그하는 동안 Alt(macOS에서는 Option)를 누르고 있으면 스냅을 건너뛰어요. 가이드가 정렬 위치를 보여 줘요. 스냅은 현재 확대/축소 수준을 따르므로, 더 세밀하게 조정하려면 확대하세요.

같은 탭에서 레이어 필터로 All Layers, Selected Layers, Animated Layers 중 무엇을 표시할지 고르세요. 필터는 타임라인 목록만 바꾸며, 숨겨진 행도 평소처럼 재생되고 내보내져요. 같은 설정 패널에서 Collapse Groups는 장면 레이어 목록을 접고, Expand Groups는 다시 펼쳐요. 레이어를 선택하고 Zoom To Selection을 클릭하면 최대 1000% 확대/축소 한도 안에서 활성 타이밍 범위가 화면에 맞게 표시돼요.

Timeline Settings → Timeline Tools를 열면 재생 헤드 위치에 이름 있는 마커를 추가할 수 있어요. Marker Name을 입력하고 Add At Playhead를 클릭하세요. 눈금자의 마커 다이아몬드나 패널의 마커 시간을 클릭하면 그 위치로 이동해요. 패널에서 마커 이름을 바꾸거나 삭제할 수 있어요. 마커는 현재 편집 세션 동안 유지되며 내보낸 애니메이션에는 영향을 주지 않아요.

모션 시퀀스 저장 및 재사용

모션 시퀀스는 여러 레이어의 조합된 등장, 퇴장, 호버 애니메이션을 저장해요. 명시적인 매핑을 사용해 이름이 다른 레이어에도 적용할 수 있어요.

1. Timeline Settings → Motion Sequences를 열고 Source Banner를 고르세요.
2. 필요하면 Selected Source Layers Only를 켜서 그 배너에서 선택한 레이어만 사용하세요.
3. 시퀀스 이름을 입력하고 Save Sequence를 클릭하세요. 저장된 시퀀스는 Bannerify 설정에 보관되며, 라이브러리에는 최대 50개까지 저장할 수 있어요. 저장하면 새 시퀀스가 선택되고 추천 대상 매핑이 새로 고쳐지므로, 적용하기 전에 다시 검토하세요.
4. 저장한 시퀀스를 고르고 대상 배너를 하나 이상 선택하세요. 저장한 시퀀스를 고르면 원본 배너 대신 그 시퀀스가 애니메이션을 제공해요. Selected Source Layers Only는 원본에서 캡처하거나 원본에서 바로 적용할 때 적용돼요. 먼저 저장하지 않고 원본 배너에서 바로 적용할 수도 있어요.
5. 추천 레이어 매핑을 검토하세요. 이름이 고유하게 일치하면 자동으로 채워지고, 이름이 중복되거나 일치하지 않으면 대상 레이어를 직접 골라야 해요. 해당 대상을 바꾸지 않으려면 매핑의 체크를 해제하거나 Skip / Choose A Layer를 고르세요.
6. 필요하면 Offset (Seconds) 값을 입력해 등장과 퇴장 타이밍을 옮기세요. 호버 지속 시간은 오프셋의 영향을 받지 않아요.
7. 검토 패널에서 빠진 원본, 대상, 레이어 매핑을 알려 줘요. 매핑된 트랙이 이미 일치하면 적용할 내용이 없어요. 변경 전후 타이밍을 검토하고 Apply Motion Sequence를 클릭하세요. 적용 전체가 실행 취소할 수 있는 편집 하나로 처리돼요. Undo, Redo 또는 History 패널로 다른 단계로 돌아갈 수 있어요.

잠긴 레이어와 렌더링할 수 없는 레이어는 제외돼요. Figma Motion 트랙은 원래 노드에 묶여 있으므로 복사되거나 덮어써지지 않아요. 텍스트 전용 애니메이션에는 텍스트 레이어가 필요해요. 타임라인 밖으로 벗어나는 트랙은 건너뛰고 미리보기에 표시되며, Bannerify가 몰래 길이를 줄이지는 않아요. 기존의 비활성 트랙은 시퀀스가 그 트랙의 애니메이션을 명시적으로 제공하지 않는 한 바뀌지 않아요.

저장한 시퀀스를 삭제하려면 Saved Sequence에서 선택한 다음 휴지통 아이콘을 클릭하세요. 라이브러리 항목을 삭제해도 배너에 이미 적용한 애니메이션은 삭제되지 않아요.

시퀀스는 기존 사용자 지정 애니메이션 라이브러리를 포함해 Bannerify에 이미 있는 애니메이션 정의를 재사용해요. 빠진 사용자 지정 애니메이션과 호환되지 않는 트랙은 알린 뒤 건너뛰어요. 애니메이션 선택기와 마찬가지로 Draw 애니메이션에는 SVG 레이어가, Split Text에는 조건을 충족하는 텍스트 레이어가 필요해요. 타이밍만 동기화할 때는 대상 애니메이션을 유지하므로 이런 원본 애니메이션 제한이 적용되지 않아요. 시퀀스는 아트워크나 사용자 지정 애니메이션 정의를 묶어서 다른 사용자의 설치 환경으로 옮기지 않아요.

배너 크기 간 타이밍 동기화

Timeline Settings → Sync Timings를 사용하면 원본 배너의 타이밍 범위를 불러온 다른 배너의 해당 레이어로 복사할 수 있어요.

1. 원본 배너를 고르고, 필요하면 선택한 원본 레이어로 제한하세요.
2. 대상 배너를 선택하고 각 레이어 매핑을 검토하세요.
3. 현재 타이밍을 유지해야 하는 매핑은 체크를 해제하세요. 모호하거나 일치하지 않는 레이어 이름은 대상을 직접 고르세요.
4. 변경 전후 타이밍 범위를 검토한 다음 Apply Timing Sync를 클릭하세요.

타이밍 동기화는 각 대상의 애니메이션 선택, 반복 설정, 기타 레이어 설정을 그대로 유지해요. 비활성 대상 트랙, 잠긴 레이어, Figma Motion 트랙은 건너뛰어요. 적용할 때마다 History 패널에서 실행 취소할 수 있는 편집 하나가 생겨요. 한 번만 복사하는 기능이라, 나중에 원본을 수정해도 대상이 자동으로 바뀌지 않아요. 다른 변경 사항을 동기화하려면 다시 적용하세요.