애니메이션 (타임라인 · 키프레임)

캔버스 하단의 타임라인에서 키프레임 애니메이션을 만듭니다.

타임라인 켜기

Timeline 메뉴(맥·iPad)에 타임라인 바의 명령이 있습니다: Enable Timeline, Play / Pause, Go to Start / End(Home / End), Previous / Next Frame(⌥← / ⌥→), Previous / Next Keyframe(⇧⌥← / ⇧⌥→, 캔버스에서는 After Effects 처럼 J / K), Loop Playback, Play Full Screen(⇧⌘F), Add Keyframe(⌥⌘K), Copy / Paste / Delete Keyframe, Reverse Keyframes, Add Marker(캔버스에서는 M), Previous / Next Marker(⌥⌘← / ⌥⌘→), Loop Between Markers. iPad 에서는 스페이스로 재생/정지합니다.

하단의 Enable Timeline 을 누르면 타임라인이 활성화됩니다.
타임라인 패널 위쪽 경계선에 커서를 올리면 상하 리사이즈 커서가 되며, 드래그하면 패널 높이를 조절할 수 있습니다(트랙이 많을 때 넓게 보기).
룰러에는 전체 길이에 맞춘 시간 눈금(1s, 2s …) 이 표시되며, 룰러를 드래그하면 재생헤드(빨간 선) 가 움직이며 그 시각의 상태를 미리 봅니다.
컨트롤 오른쪽 ⋯ 메뉴에서 타임라인 표시 옵션을 켤 수 있습니다 — 예: 이징 곡선 표시(기본 꺼짐) — 그리고 트랙 확대 / 축소 / 맞춤.
이름 열: 레이어 이름과 트랙 사이의 구분선을 끌면 이름 열이 넓어지거나 좁아집니다(깊은 그룹은 행이 들여써지므로). 너비는 기억됩니다. iPhone·iPad 에서는 구분선의 작은 손잡이를 끕니다.
확대: 1×에서는 타임라인 전체가 들어가고, 확대하면(최대 16×) 눈금자와 트랙이 함께 옆으로 스크롤되며 레이어 이름은 제자리에 있습니다. 트랙패드로 스크롤하거나 그냥 재생 위치를 옮기세요 — 재생 위치가 가운데를 벗어나면 화면이 따라갑니다.
재생 시간 표시 옆의 길이(초) 입력란으로 타임라인 전체 길이를 직접 설정할 수 있습니다(비디오 삽입 시 자동으로 늘어난 길이도 여기서 조정).
재생 컨트롤(왼쪽부터): 맨 처음으로 ▎◀ · 이전 키프레임 ⇤ · 1프레임 뒤로 · 재생/일시정지 ▶ · 1프레임 앞으로 · 다음 키프레임 ⇥ · 맨 끝으로 ▶▎ · 반복(loop) 토글 ↻ · 재생 속도(0.25×~4×, 기본 1×) · 전체 화면 재생(화면 안 재생 아이콘).
이전/다음 키프레임은 선택한 레이어(선택한 그룹은 그 안의 것까지)의 가장 가까운 키프레임으로 재생헤드를 옮깁니다. 아무것도 선택하지 않았으면 모든 레이어가 대상입니다. 자체 타이밍이 있는 그룹 안의 키프레임은 실제로 재생되는 시각에서 찾습니다.
재생은 실시간 기준으로 진행됩니다 — 비디오 디코딩 등으로 한 프레임이 느려도 시계는 실제 시간을 따라가고(프레임을 건너뛸 뿐) 전체 재생 길이가 늘어나지 않습니다. 반복이 켜져 있으면(강조 표시) 끝에서 처음으로 돌아가 계속 재생하고, 꺼져 있으면 한 번 재생한 뒤 재생 헤드가 처음으로 돌아가 다시 재생할 준비를 합니다. 프레임 이동·처음/끝 이동은 재생을 일시정지합니다.

전체 화면으로 재생

보는 사람이 볼 모습 그대로 확인합니다: Timeline ▸ Play Full Screen(⇧⌘F), 타임라인 바의 전체 화면 재생 버튼, 또는 프레임의 빈 곳을 우클릭 ▸ Play Full Screen. 프레임이 검은 화면에 비율을 유지한 채 꽉 차게(모양이 다르면 위아래나 양옆에 검은 여백) 소리와 함께 실제 속도로 재생됩니다(재생 속도 설정은 편집용).

처음부터 재생합니다. 재생 헤드에서 시작하려면 ⌥ 를 누른 채로(Play Full Screen from Playhead, ⌥⇧⌘F, 또는 버튼을 ⌥-클릭). iPhone·iPad 는 ⋯ ▸ Play Full Screen from Playhead.
Loop Playback 이 켜져 있으면 반복하고, 꺼져 있으면 한 번 재생한 뒤 마지막 프레임에 멈춰 있습니다.
맥: Esc(또는 ⌘.)를 누르면 편집 화면으로 돌아옵니다 — 재생 헤드는 그대로입니다. 스페이스는 일시정지/계속. 포인터는 잠시 뒤 숨고, 마우스를 움직이면 다시 나타납니다. 타임라인이 없는 프레임은 그대로 전체 화면에 보여 줍니다.
디스플레이가 여러 개(맥): Timeline ▸ Play Full Screen On 에 This Screen(문서 창이 있는 화면)과 다른 디스플레이가 이름으로 나옵니다. 고른 것은 기억되어 다음 ⇧⌘F 도 그 화면에서 재생합니다(그 디스플레이가 연결돼 있지 않으면 이 화면). 다른 디스플레이에서 재생하는 동안에도 편집 화면을 그대로 쓸 수 있고, 고친 내용은 재생 화면에 바로 반영됩니다. Esc 는 어느 Layerz Canvas 창에서 눌러도 멈춥니다. 재생 중인 디스플레이가 분리되면, 또는 문서 창과 같은 화면을 덮고 있을 때 다른 앱으로 전환하면 저절로 멈춥니다.
iPhone·iPad: 화면 아무 곳이나 탭하면 멈추고 돌아옵니다(키보드가 있으면 Esc·⌘., 스페이스는 일시정지). 재생하는 동안 화면이 꺼지지 않습니다. iPad 에 외부 디스플레이를 연결하면 재생 화면이 그대로 미러링됩니다.

프레젠테이션 (Present)

Presentation Mode 는 프레임을 전체 화면으로 하나씩 보여 줍니다 — 발표, 고객 시연, 앱 화면 흐름을 클릭해 보는 프로토타입에 씁니다.

View ▸ Present(⌥⌘P)는 첫 슬라이드부터, Present from Current Frame(⇧⌥⌘P)은 지금 편집 중인 프레임부터 시작합니다. 툴바의 Present 버튼(사각형 안 ▶︎)도 같습니다. iPhone·iPad 는 ⋯ ▸ Present(iPad 는 View 메뉴에도).
다음: 클릭, 또는 → ↓ 스페이스, Return, Page Down. 타임라인이 있는 프레임은 나타날 때 처음부터 애니메이션을 재생합니다. 재생 중에 클릭하면 끝 상태를 바로 보여 주고, 한 번 더 클릭하면 넘어갑니다. 마지막 슬라이드 다음은 프레젠테이션 종료입니다.
이전: ← ↑ ⇧스페이스, Delete, Page Up, 우클릭 — 실제로 지나온 슬라이드(링크로 건너뛴 것 포함)를 되짚어 갑니다. Home / End 는 첫·마지막 슬라이드.
끝내기: Esc(또는 ⌘.) — 어느 Layerz Canvas 창에서든 — 편집 화면으로 그대로 돌아옵니다(재생 헤드는 움직이지 않음).
넘길 때마다 아래쪽에 슬라이드 번호("3 / 12")와 얇은 진행 막대가 잠깐 나타났다 사라집니다. 포인터는 잠시 움직이지 않으면 숨습니다.
디스플레이(맥): 디스플레이가 둘 이상이면 View ▸ Present On 으로 화면을 고릅니다 — Play Full Screen On 과 같은 선택이고 기억됩니다. 그 디스플레이가 분리되면 끝나고, 문서 창과 같은 화면에서는 다른 앱으로 전환해도 끝납니다.
iPhone·iPad: 탭 = 다음, 왼쪽 가장자리 탭 또는 오른쪽으로 쓸기 = 이전, 왼쪽으로 쓸기 = 다음, 아래로 쓸기(또는 번호와 함께 나타나는 ✕) = 종료. 키보드가 있으면 맥과 같은 키. 화면이 꺼지지 않고, 앱을 떠나면 끝납니다. 외부 디스플레이에는 미러링됩니다.

Presentation Settings(View ▸ Presentation Settings…, iPhone·iPad ⋯ ▸ Presentation Settings):

Slides — 모든 프레임 목록, 체크 = 보여 줌. 드래그로 순서를 바꿉니다. 기본은 모든 프레임이 캔버스 순서대로 슬라이드이고 새 프레임도 자동으로 들어갑니다. 체크를 끄거나 순서를 바꾸면 그 뒤 새 프레임은 체크할 때까지 빠져 있습니다.
Scale — Fit to Screen(비율 유지로 꽉 차게, 남는 곳은 배경색 — 작은 프레임은 확대) 또는 Actual Size(1pt = 1pt, 가운데 정렬, 화면보다 크면 잘림). 슬라이드마다 덮어쓸 수 있습니다(행의 슬라이더 버튼).
슬라이드별: Loop the animation(타임라인이 있는 프레임; 끄면 한 번 재생 후 마지막 프레임에 멈춤), Next slide after … s — 애니메이션이 끝나고 그 초만큼 뒤 저절로 넘어갑니다(정지 프레임은 나타난 뒤부터).
Background — 슬라이드 바깥 색(기본 검정). Reset 은 모든 프레임·Fit·검정으로 되돌립니다.

링크(클릭되는 프로토타입): 레이어·그룹·프레임을 선택하고 인스펙터 Layer 섹션의 Link to Frame 에서 프레임을 고릅니다. 프레젠테이션 중 그 부분을 클릭하면 해당 프레임으로 갑니다(맥은 포인터가 손 모양). 클릭한 곳에 링크가 겹치면 가장 안쪽 레이어의 링크가 이기고, 링크가 없는 곳의 클릭은 "다음"입니다. 링크로 간 뒤에는 대상 프레임의 슬라이드 목록 위치 다음으로 이어집니다. 목록에 없는 프레임은 링크로만 갈 수 있고 거기서 "다음"은 종료입니다 — 숨은 화면을 만들 때 쓰세요. 레이어 패널에서 링크가 걸린 레이어에 ↗ 표시가 붙고, 대상 프레임이 지워진 링크는 Missing frame 으로 표시되며 무시됩니다.

설정은 문서와 함께 저장됩니다(패키지 안 별도 파일 — 이전 버전의 Layerz Canvas 로 열어 저장해도 남습니다). 슬라이드 전환 효과, 발표자 노트, 클릭형 HTML 내보내기는 아직 없습니다.

키프레임 만들기

레이어 하나를 선택합니다.
재생헤드를 원하는 시각으로 옮깁니다.
Add Keyframe 을 눌러 현재 포즈(위치·크기·스케일·회전·불투명도·채움색·패스)를 키프레임으로 기록합니다.
- t=0이 아닌 곳에서 처음 추가하면 t=0에 기준(Baseline) 키프레임이 함께 생성됩니다.
다른 시각으로 옮겨 값을 바꾸면(아래 "자동 키프레임"), 두 키프레임 사이가 보간되어 애니메이션됩니다.

애니메이션 프리셋 (등장·퇴장)

레이어를 우클릭(캔버스 또는 레이어 패널) ▸ Animate(애니메이션)에서 미리 만든 움직임을 고릅니다: Fade In / Out, Slide Up · Down · Left · Right In / Out, Pop In / Out(살짝 튀어나왔다 돌아옴), Rotate In, Blur In / Out, Draw Line(선이 그려짐).

재생헤드 위치에서 시작해 0.6초 동안 움직입니다. 등장은 지금 모습으로 끝나고, 퇴장은 지금 모습에서 시작합니다.
여러 레이어를 선택하면 레이어 목록의 위쪽부터 하나씩 차례로(0.08초 간격) 움직입니다.
결과는 일반 키프레임이라 타임라인에서 옮기거나 지울 수 있습니다. 타임라인이 없으면 만들고, 짧으면 늘립니다. 그룹은 안의 레이어와 함께 움직입니다.

내 프리셋

키프레임이 있는 레이어를 선택 ▸ 우클릭 ▸ Animate ▸ Save Animation as Preset…(iPhone·iPad: … ▸ Animate). 이름을 주고 Relative(이동·크기·회전은 지금 위치 대비 차이, 배율은 비율로 저장 — 어느 레이어에나 같은 움직임) 또는 Absolute(값 그대로)를 고릅니다. 타임라인에서 키를 골라 두었으면 그 구간만 저장합니다. 반복·흔들림·발진기도 함께 저장됩니다.
저장한 프리셋은 같은 Animate 메뉴의 내장 프리셋 아래에 나오고, 내장처럼 재생 헤드부터 레이어마다 차례로 적용됩니다. Delete Preset ▸ 으로 지웁니다. 문서가 아니라 이 기기(Application Support)에 보관됩니다.

물리 (떨어지고 튕기고 쌓이기)

레이어를 선택 ▸ 우클릭 ▸ Animate ▸ Physics…(물리, iPhone·iPad 는 … ▸ Animate ▸ Physics…): 재생헤드 시점의 자리에서 레이어가 떨어져 프레임 바닥·양옆·서로에 부딪혀 튕기다 멈춥니다. 상자와 글자가 서로 위에 쌓이고 무더기가 됩니다.

Start(시작) — Drop(그냥 놓기)·Toss Up(위로 던지기)·Throw Left·Throw Right(옆으로 던지기). Gravity(중력) — Light·Normal·Heavy. Bounciness(탄성)·Friction(마찰).
바닥(프레임 아래 가장자리)과 벽(양옆)은 끌 수 있습니다 — 바닥이 없으면 프레임 밖으로 떨어집니다. Tip over and spin(넘어지고 회전)을 끄면 위치만 움직이고 돌지 않습니다.
여러 레이어를 선택했다면 제자리에 둘 레이어를 체크하세요. 나머지가 그 위에 떨어집니다(선반, 바닥 막대, 글자를 쌓을 단어).
동그란 타원은 공처럼 구르고, 나머지 레이어(텍스트·그룹·이미지…)는 회전된 상자로 부딪힙니다.
결과는 일반 Position X / Y·Rotation 키프레임입니다. 움직임에 필요한 키만(부딪히는 순간과 튀어 오른 꼭대기, 보통 한 번 튈 때 두세 개) 남기므로 편집·시간 조정·내보내기(Lottie·HTML 포함)가 그대로 됩니다. 재생헤드 이후의 해당 키프레임은 바뀌고 이전 것은 남습니다. 모두 멈출 때까지(최대 5초) 계산하며, 같은 레이어·설정이면 언제나 같은 움직임이 나옵니다. 배치를 바꿨다면 다시 실행하세요.

텍스트 애니메이션 (키네틱 타이포)

텍스트 레이어를 선택하고 인스펙터의 Text Animation 섹션에서 글자·단어·줄이 차례로 움직이게 합니다.

Add Animation — 페이드, 올라오기, 떨어지기, 왼쪽/오른쪽으로 밀기, 팝, 흐림, 회전, 타자기, 물결, 디코드(글자가 자리 잡을 때까지 무작위 문자로 바뀜), 자간 모으기(넓게 퍼진 글자가 모임), 색으로 등장(다른 색으로 나타나 원래 색으로 돌아옴).
방향 — 등장(시작 상태 → 원래 텍스트) 또는 퇴장(원래 텍스트 → 끝 상태).
단위 — 글자 / 단어 / 줄(자동 줄바꿈도 한 줄, 공백은 세지 않음). 순서 — 앞에서부터, 뒤에서부터, 가운데부터, 무작위.
타이밍 — 시작(타임라인 초), 길이(하나가 움직이는 시간), 간격(다음 것이 시작하기까지). 이징 — Ease Out / In / In Out, Linear, Spring(통통 튐), Back Out(넘쳤다 돌아옴), Expo Out(빠르게 출발해 길게 멈춤), Hold.
시작 상태 / 끝 상태 — 움직이는 상태의 위치 이동 X/Y, 크기, 회전, 불투명도, 흐림, 그리고:
- Colour — 그 상태에서 글자가 띠는 색(원래 칠 위에 섞임, 그라디언트도).
- Tracking — 글자마다 뒤에 더해지는 간격. 줄의 나머지 글자가 함께 밀립니다(가운데 정렬은 가운데 유지).
- Scramble — 글자가 도착할 때까지 Characters 의 무작위 문자를 보여 줍니다(초당 바뀌는 횟수 지정) — 디코드 연출.
Range Selector(범위 선택기) — 차례로 움직이는 대신 After Effects 처럼 *어떤* 글자(단어·줄)가 그 상태를 가질지 고릅니다: Start·End(글자 수 대비 %, 애니메이터 순서 기준 — Random 순서면 흩어짐), Offset(둘을 함께 이동), Shape — Square(걸친 글자는 걸친 만큼), Ramp Up / Ramp Down(부드러운 가장자리: 범위를 지난 글자는 선택 유지 / 범위 앞 글자 선택), Triangle·Round·Smooth(가운데가 가장 강함) — 그리고 Amount. Start·End·Offset 에 키프레임 다이아몬드가 있습니다: 폭 30 % Triangle 범위에 위치 Y −20 을 주고 Offset 을 −30 % → 100 % 로 키를 넣으면 단어 위로 물결이 지나가고, Ramp Up 에 불투명도 0 으로 키를 넣으면 부드럽게 쓸려 나타납니다. 키가 없으면 정지된 디자인입니다(예: 한 단어만 강조색). 범위를 켜면 방향과 타이밍은 쓰지 않습니다.
여러 개를 함께 쓸 수 있습니다(예: 0초 등장 + 3초 퇴장). 캔버스·재생·PNG·동영상·GIF·HTML 내보내기에 반영됩니다. SVG 는 재생 헤드 시점의 모습(움직이는 동안은 글자 윤곽, 흐림은 빠짐)으로 나가고, Lottie 는 글자마다 윤곽 그룹으로 움직임·불투명도·색(스크램블 포함)을 구워 넣습니다. 흐림과, 내용·크기·자간에 키프레임이 있는 텍스트의 애니메이터는 안내와 함께 빠집니다.

반복과 흔들림

속성별 하위 트랙(레이어 트랙을 펼친 것)의 키프레임을 선택하면 타임라인 바에 버튼 두 개가 나타납니다.

반복(Loop) — 마지막 키프레임 뒤에 멈추지 않고 처음부터 반복 또는 왕복합니다. 돌아가는 아이콘, 숨 쉬는 빛 같은 효과에 씁니다.
흔들림(Wiggle)(숫자 속성) — 키프레임 위에 부드러운 무작위 움직임을 더합니다: 빈도(초당 흔들림 수), 크기(양쪽으로 얼마나), 시드(다르지만 매번 같은 패턴). 떠다니는 배지, 흔들림, 깜빡임에 씁니다. Start·Stop(초, 0 = 처음부터 / 끝없이)으로 움직이는 구간을 정하고, Fade 를 주면 시작 뒤에 서서히 커지고 멈추기 전에 서서히 잦아듭니다 — 2초에 가라앉는 흔들림처럼.

모션 비헤이비어: 발진·연결·소리로 움직이기

인스펙터의 키프레임 다이아몬드를 우클릭(iPhone·iPad 는 길게 누르기) ▸ Motion Behaviors… 로 속성을 키프레임 없이 움직입니다. Property 를 고른 뒤:

Oscillate(발진) — 속성의 키프레임(없으면 지금 값) 위에 더해지는 반복 파형: Wave Sine·Triangle·Square(켜짐/꺼짐)·Noise(부드러운 무작위), Amount(양쪽으로 얼마나), Frequency(초당 횟수), Phase(주기의 어디서 시작, 90° = 꼭대기), Decay(잦아듦 — 2 면 약 2초에 멈춤), Start(그때까지 쉼), Stop(그때 멈춤, 0 = 끝없이), Fade(시작 뒤·멈춤 전에 서서히 바뀌는 초). 진자·숨쉬기·깜박이는 커서·충돌 뒤 흔들림.
Link to Another Layer(연결) — 다른 레이어의 속성을 따라갑니다: Multiply·Add·Delay(몇 초 늦게). 기본은 상대 레이어가 놓인 자리에서 움직인 만큼을 이 속성 값에 더하고, Use Its Value 를 켜면 값 자체를 씁니다(회전 = 다른 레이어의 X × 0.5). 공을 따라가는 그림자, 함께 도는 기어, 물결을 따라 하는 점. 사슬(A → B → C)도 되고, 순환이 되는 연결은 거부합니다.
Drive with Sound(소리로 움직이기) — 소리·동영상 레이어를 고르면 Loudness 는 음량을 따라가고(조용함 → Quiet 값, 큼 → Loud 값, Release = 떨어지는 속도), Beats 는 비트마다 Loud 값으로 튀었다가 돌아옵니다. 프레임마다가 아니라 맞춰 줄인 적은 수의 일반 키프레임으로 굽고, 설정은 속성에 남습니다.

비헤이비어는 캔버스·재생·모든 내보내기에 나옵니다. HTML 은 발진·연결을 실시간으로 재생하고, Lottie·동영상은 구워 넣습니다.

카운터 · 글자 크기 · 자간

텍스트 레이어 인스펙터에서 Counter 를 켜면 숫자가 됩니다: Number(키프레임 다이아몬드 있음), 소수 자릿수, 앞·뒤 글자(예: "$", "%"), 천 단위 구분. 두 시각에 Number 키프레임을 넣으면 그 사이를 셉니다("$0" → "$1,250.00").
텍스트의 Size 와 Tracking 에도 키프레임 다이아몬드가 있어 제목을 키우거나 자간을 벌리는 애니메이션을 만들 수 있습니다. 자동 너비/높이 상자는 따라갑니다.
모서리 반경(사각형·다각형), 다각형의 꼭짓점 수(키 사이에서 모양이 부드럽게 바뀝니다 — 첫 꼭짓점에서 새 꼭짓점이 자라나거나 접혀 들어가 4 → 3 이 튀지 않음)와 별의 내부 반경, 첫 번째 그림자(오프셋·블러·색 — 옆의 다이아몬드), 글로우(반경·색), 그레인 양도 키프레임을 받습니다: 둥글어지는 버튼, 꼭짓점이 늘어나는 별, 그림자가 떠오르는 카드. HTML 에서 재생되고, Lottie 는 모서리·별 키는 Lottie 고유 사각형·별로 옮기지만 이펙트는 빠집니다.
경로 위 텍스트에는 Offset 다이아몬드가 있습니다(Text on Path 섹션): 0 % 와 100 % 에 키를 넣으면 원을 한 바퀴 돌고, 트랙을 Cycle 로 반복하면 끝없이 돕니다. 텍스트 애니메이션과 함께 써도 됩니다.

모션 블러

타임라인 옵션(⋯) ▸ 내보내기에 모션 블러 를 켜면 동영상·GIF/APNG·PNG 시퀀스 내보내기에서 빠른 움직임이 번집니다: 셔터 90°(약하게) / 180°(영화) / 360°(강하게), 품질(프레임마다 평균하는 순간 수 4 / 8 / 16 — 많을수록 부드럽고 느림). 캔버스 미리보기는 또렷하게 유지됩니다.

그룹 타이밍 (애니메이션 재사용)

그룹이나 프레임을 선택하고 인스펙터 Timing 섹션에서 자체 타이밍을 켜면, 안의 모든 애니메이션이 그룹의 시계로 재생됩니다 — 시작 지연, 속도(2 = 두 배 빠르게), 반복(처음부터 / 왕복, 반복 길이). 애니메이션된 그룹을 복제해 지연만 다르게 주면 같은 애니메이션을 재사용할 수 있습니다. 타임라인에서 그룹 행에는 시계 표시가 붙고 안의 레이어가 그 아래에 놓이며, 키프레임은 실제로 재생되는 시각(지연·빠르게·느리게)에 그려지고 반복(또는 시간 재매핑)이 다시 재생하는 자리에는 흐린 사본이 보입니다. 끌면 그룹의 시간으로 옮겨집니다.

Time Remap(시간 재매핑)(Timing ▸ Time Remap ▸ Add Time Remap Keys)은 그룹의 시간을 자유롭게 휩니다. 그룹의 Time Remap 행에 찍은 키가 각 시각에 자식의 어느 순간을 보여 줄지 정합니다 — 같은 값을 두 번 찍으면 정지 화면, 기울기가 작으면 슬로모션, 값이 줄어들면 거꾸로 재생. 처음 키는 원래 시계와 같아서 고치기 전까지는 그대로입니다. Remove Time Remap 은 시계로 되돌립니다. 안의 동영상 프레임·텍스트 애니메이션도 따라갑니다. HTML 은 재생하고, Lottie 는 자식 키를 그 시간에 맞춰 굽습니다.

카메라

레이어 우클릭 ▸ 여기로 카메라 이동: 재생헤드에서 0.8초 동안 화면이 이동·확대되어 그 레이어들이 화면을 채웁니다. 카메라 원위치는 프레임 전체로 돌아갑니다. 같은 시각에 이동을 다시 하면 다음 이동이 출발하는 자세도 함께 바뀝니다. 처음 쓸 때 장면이 Camera 그룹에 들어가고, 카메라 움직임은 그 그룹의 키프레임이라 타임라인에서 그대로 고칠 수 있습니다. Camera 그룹 밖의 레이어(제목, 자막)는 화면에 고정됩니다.

깊이(시차). Camera 그룹 바로 안의 레이어를 선택하고 인스펙터 Layout 섹션의 Depth(깊이)를 정합니다. 0 은 카메라의 초점면, 양수는 더 멀리, 음수는 더 가까이입니다. 카메라가 이동·확대될 때 먼 레이어는 덜, 가까운 레이어는 더 움직이고 커집니다 — 실제 카메라처럼 — 그래서 시차 장면에 레이어별 키프레임이 필요 없습니다: 하늘 800, 언덕 300, 전경 −100 으로 두고 카메라만 움직이세요. 카메라가 제자리에 있을 때는 모든 레이어가 놓은 그대로 보입니다. 깊이도 키프레임이 되고(레이어가 카메라 쪽으로 다가오게), 카메라 위치이거나 그 뒤로 간 레이어는 그려지지 않아 음수 깊이는 렌즈를 지나쳐 사라집니다. 쌓는 순서는 레이어 목록 순서입니다 — 단, Camera 섹션의 Sort by Depth 를 켜면 카메라 안 레이어를 깊이에 따라 먼 것부터 그립니다(애니메이션 중에도 — 서로를 통과하는 카드). 동영상·GIF·PNG·HTML 내보내기는 정렬된 순서를 보여 주고, Lottie 는 레이어 순서를 유지합니다(경고 표시).

Camera 그룹을 선택하면 Camera 섹션에서 렌즈를 바꿉니다: Perspective 는 카메라에서 깊이 0 까지의 거리(작을수록 시차가 강함, 기본 1000 pt). Depth of Field(피사계 심도)는 깊이가 Focus Depth 에서 멀수록 레이어를 흐리게 합니다(Blur per 100 pt, 최대 Max Blur). Focus Depth 에 키프레임을 주면 랙 포커스가 됩니다. 피사계 심도는 매 프레임 장면의 레이어를 흐리게 하므로 재생·내보내기가 느려집니다 — 필요할 때만 켜세요.

장면 전환

레이어 두 개(보통 장면 그룹 두 개)를 선택 ▸ 우클릭 ▸ Animate ▸ 전환: 크로스페이드, 밀기(4방향), 덮기(위 레이어가 아래 레이어를 덮음), 줌 전환, 흐림 전환 — 레이어 목록의 아래 레이어에서 위 레이어로, 재생헤드부터 0.8초. 들어오는 장면은 그 전에 숨겨지고, 나가는 장면은 그 뒤에 숨겨집니다.

모양 모핑

패스 키프레임은 점 개수가 다른 두 모양 사이에서도 이어집니다(원 → 별). 단순한 쪽에 점을 더하고 비틀리지 않게 맞춥니다. Arrange ▸ 합치기 / 빼기 / 교차 / 제외는 선택한 도형(같은 부모)을 하나의 패스로 합칩니다.

비트와 마커

레이어 패널에서 오디오·동영상 레이어 우클릭 ▸ 비트 찾기: 비트가 시간 눈금 위의 주황색 마커가 되고, 키프레임을 드래그하면 마커에 붙습니다. 앱이 만든 음악(Add Soundtrack)은 작곡한 박자 그대로가 마커가 됩니다. 타임라인 옵션(⋯) ▸ 마커 지우기로 없앱니다.

재생헤드에 직접 마커 추가: 캔버스에서 M, Timeline ▸ Add Marker, 또는 타임라인 옵션(⋯) ▸ 마커 추가 — "로고 착지", "드롭" 같은 신호를 표시할 때.
마커를 눈금 위에서 드래그하면 옮겨집니다(키프레임처럼 스냅, 맥에서 ⌘ 를 누르면 자유롭게). 더블클릭(맥)하거나 마커 메뉴(맥은 우클릭, iPhone·iPad 는 길게 누르기)에서 이름 바꾸기·마커로 이동·삭제합니다. 이름이 있는 마커는 눈금에 이름이 보입니다. 옮긴 비트 마커는 일반 마커가 되어 다음 비트 찾기에서 지워지지 않습니다.
이전 / 다음 마커(⌥⌘← / ⌥⌘→)로 재생헤드가 마커 사이를 오갑니다.
마커 사이 반복 재생(Timeline 메뉴 또는 ⋯): 재생헤드를 둘러싼 두 마커 사이만 반복 재생합니다 — 장면의 한 박자만 다듬을 때.

사운드트랙과 효과음

완성한 영상의 소리를 Layerz Canvas 가 직접 만듭니다 — 이 타임라인에 맞춰 쓴 배경음악과 클릭·전환에 맞춘 효과음. 모두 기기 안에서 합성하며(다운로드·녹음 샘플 없음), 만든 소리는 영상에 자유롭게 써도 됩니다.

타임라인 옵션(⋯) ▸ 사운드트랙 추가…(메뉴 Timeline ▸ 사운드트랙 추가… 도 같음)를 고르면 시트가 열립니다: 분위기(Upbeat Tech·Chill Lo-fi·Cinematic·Minimal·Energetic·Corporate), 강도, 자동 템포(끄면 BPM 지정), 조성, 스템 분리(드럼·베이스·음악을 레이어 세 개로 — 균형을 직접 맞출 때), 효과음과 스타일(Soft·Punchy·Retro). 미리 듣기는 전체 믹스를 재생하고, 다른 버전은 같은 설정으로 다른 음악을 만듭니다. 추가를 누르면 타임라인에 들어갑니다.
음악은 영상을 따라갑니다: 장면이 바뀌는 시각(밀기·슬라이드·줌·블러·크로스페이드 전환, 컷, 큐 마커)이 마디 경계에 오도록 템포를 고르고, 그 사이 구간마다 에너지가 다르며(고조될수록 악기가 더해짐), 바뀌기 전 마디에는 라이저와 드럼 필, 바뀌는 순간에는 임팩트가 들어가고, 마지막 화음은 타임라인 끝에 정확히 끝납니다. 박자는 눈금자의 마커가 되어 키프레임이 음악에 붙습니다.
효과음은 움직임에서 찾습니다: 가상 커서·녹화 클릭, 팝 등장, 큰 이동과 밀기·슬라이드 전환(왼쪽·오른쪽으로 지나가는 휙), 줌·블러 전환(라이저와 임팩트), 타자 코드·타자기 텍스트(키 소리), 카운터(틱), 텍스트 애니메이션(부드러운 스윕), 파티클(터짐·반짝임), 자라나는 차트(올라가는 음), 세게 떨어지는 착지(쿵). 스타일이 소리의 성격을 정합니다: Soft(둥글고 가까운 UI 소리, 작은 방 울림 — 데모), Punchy(더 또렷하고 묵직한 저음 — 광고), Retro(8비트 게임기 소리). 효과음은 화면에서 그 물체가 있는 쪽(왼쪽·오른쪽)에서 들리고, 클릭·키 소리는 칠 때마다 조금씩 다르며, 종류별로 음악과 어울리는 크기로 맞춰집니다. 효과음마다 오디오 레이어 하나 — 열두 개가 넘으면 Sound Effects 레이어 하나로 합칩니다. ⋯ 메뉴의 효과음 추가는 타임라인 전체의 효과음만, 레이어 우클릭 ▸ 효과음 추가는 선택한 레이어의 것만 넣습니다(iOS: … 메뉴).
음악은 웹 영상 기준으로 마스터링되고(약 −14 LUFS, 클리핑 없음) 타임라인에 이미 있는 효과음·내레이션·동영상 소리 아래에서 조금 물러납니다 — 그래서 효과음을 먼저 넣으세요.
만든 소리는 보통의 오디오 레이어입니다: 볼륨·페이드·음소거·트림·분할이 그대로 되고, 동영상·HTML 내보내기에 섞입니다. 어떻게 만들었는지 기억하므로, 타이밍을 바꾼 뒤 ⋯ ▸ 사운드트랙 다시 생성을 고르면 맞춰 다시 만듭니다(설정한 볼륨·페이드·음소거는 유지).

경로 따라 이동 (모션 패스)

레이어 하나와 도형(그린 패스·타원·사각형·다각형)을 함께 선택 ▸ 우클릭 ▸ Animate ▸ Follow Path…(레이어 패널 행 메뉴에도 있음, iPhone·iPad 는 … ▸ Animate). 재생 헤드부터 레이어의 기준점이 도형의 윤곽을 따라 이동합니다.

Duration(길이), From / To(경로 길이의 퍼센트 — 닫힌 도형은 이어지므로 0 → 200 % 는 두 바퀴), Easing. 경로 위 속도는 일정하고, 이징만으로 빨라지고 느려집니다.
Turn Along the Path 를 켜면 레이어가 나아가는 방향을 바라봅니다(레이어 자신의 회전은 그 위에 더해짐 — 오른쪽을 향하게 그려 두세요).
Path: Remove the Path(도형은 지우고 레이어가 윤곽 사본을 가짐), Keep the Path(보이는 가이드로 남김), Draw a Trail(레이어 뒤로 도형이 그려짐 — Trim End 가 함께 움직임), Comet Trail(꼬리 끝이 Tail 초만큼 늦게 따라오다 끝에서 따라잡음).
움직임은 Path Progress 키프레임입니다. 인스펙터 Follow Path 섹션에 Progress(키프레임 다이아몬드 — 키 추가, Cycle 반복으로 궤도 돌기, 흔들림), Orient to Path, Remove from Path 가 있습니다. 레이어를 옮기면 경로도 함께 옮겨집니다.
레이어를 선택하면 캔버스에 경로가 보라색으로 보입니다. 앵커와 핸들을 끌어 경로 모양을 바꿉니다(레이어는 경로 위 제자리를 지킴, 앵커를 더블클릭하면 모서리 ↔ 부드러운 점).
동영상·GIF·HTML(플레이어가 경로를 따라 움직임)·Lottie(위치·회전을 키프레임으로 기록) 내보내기에 모두 반영되고, SVG 는 지금 위치에 그립니다.

반복·캐스케이드·외곽선 바꾸기

도형의 Repeater(인스펙터 ▸ Modifiers)는 복제를 최대 200개까지 줄·격자·원형으로 만듭니다. 복제가 몇 개든 레이어 하나라 타임라인이 가볍습니다. 모두 애니메이션됩니다.

리피터 애니메이션: Copies·Offset·Rotation(원형은 시작 각)·Scale 에 키프레임 다이아몬드가 있습니다 — 복제가 하나씩 늘고, 부채가 펼쳐지고, 고리가 돕니다.
복제 캐스케이드: 레이어에 애니메이션 하나(팝인·슬라이드·색 변화)를 주고 리피터 Delay 를 정하면 복제마다 앞 복제보다 그만큼 늦게 재생합니다. Falloff ▸ From the Centre 와 Delay Follows Falloff 를 켜면 격자가 가운데서 물결처럼 퍼집니다.
Falloff 는 복제 순서를 따라(또는 가운데에서 바깥으로) 크기·회전·투명도·색을 이징 곡선으로 바꿉니다.
Shape Modifiers 는 외곽선 자체를 바꿉니다 — Round Corners, Zig Zag(뾰족한 선·물결선), Wiggle Path(재생하며 흔들리는 손그림 선), Offset Path, Pucker & Bloat. 순서를 바꿀 수 있는 스택이며 양에 키프레임을 줄 수 있습니다.
내보내기: 동영상·GIF·PNG 는 정확합니다. HTML 은 복제를 써 내고(늦은 복제는 자기 타이밍 유지) 움직이는 외곽선은 샘플합니다. Lottie 는 단순한 줄 리피터와 Round Corners·Zig Zag·Offset·Pucker & Bloat 를 자체 애니메이션 항목으로 유지하고, 격자·원형·감쇠·지연은 복제로, Wiggle Path 는 패스 키프레임으로 씁니다. SVG 는 그 시각의 복제와 외곽선을 그립니다.
AI 도우미는 이 모두를 한 번의 호출로 합니다: set_modifiers, choreograph(AI 도우미).

따라가기

인스펙터 Layer ▸ 따라가기로 다른 레이어에 연결하면, 그 레이어가 원래 모습에서 움직인 만큼 함께 이동·회전·크기 변경합니다 — 그룹으로 묶지 않는 부모 연결입니다(팔과 손, 카드와 라벨). 선택 상자는 레이어 자신의 위치에 표시됩니다.

3D 회전 (2.5D)

Layout ▸ 3D 회전으로 레이어를 깊이 방향으로 돌립니다: X는 위쪽 가장자리가 멀어지고, Y는 오른쪽 가장자리가 멀어집니다(둘 다 키프레임 다이아몬드). 원근으로 깊이감의 세기를 정하고, 뒷면 보이기를 끄면 뒤를 향할 때 숨겨집니다(카드 뒤집기). 캔버스에서는 선택한 레이어를 ⌥⌘ 드래그하면 돌아갑니다: 옆으로 끌면 Y, 위아래로 끌면 X(Shift 로 15° 단위), 다이아몬드가 켜져 있으면 인스펙터처럼 재생 헤드에 키프레임이 기록됩니다. PNG·동영상·GIF 내보내기에 반영되고, SVG·Lottie 내보내기와 선택 상자는 평면 그대로입니다.

3D 모델

삽입 ▸ 3D 모델… 로 USDZ 파일을 모델 레이어로 추가합니다(.usdz 를 캔버스에 드롭해도 됨). 모델은 레이어 상자 안에서 카메라로 본 모습으로 그려지고, 뒤의 레이어 위에 얹힙니다. 기기는 모델 파일이 없어도 됩니다 — 이미지·동영상·프레임 우클릭 ▸ 기기 프레임 추가 ▸ iPhone (3D) / iPad (3D) / Mac (3D) / iPhone Duo (3D) 가 기기를 추가하고(iPhone 은 앱에 실린 정밀 모델 — iPhone 18 Pro 또는 iPhone 18 Pro Max, 블랙·실버·글레이셔·버건디 중 인스펙터에서 고름; iPhone Duo 는 접히는 폰으로 나이트 스카이·스타 화이트; iPad·Mac 은 단순한 본체) 그 레이어를 화면에서 재생합니다(그 레이어는 목록에서 모델 아래에 표시되고 모델 화면에만 그려지며, 가로 녹화는 폰을 눕힘). 녹화의 자동 줌·커서 강조·자막도 보드에서처럼 화면에 나타납니다.

인스펙터 3D: 회전 X / Y / Z(피치·요·롤), 오프셋 X / Y / Z(모델 크기 비율), 배율, 카메라 화각·카메라 거리, 환경(스튜디오·주광·해질녘·없음), 조명(세기·각도), iPhone 의 모델·마감(iPad·Mac 은 대신 본체 색), 화면 레이어. iPhone Duo 는 접기가 0 %(펼침)~100 %(접힘)이고 키프레임 다이아몬드가 있어 키 두 개로 타임라인에서 열고 닫습니다. 화면 레이어는 안쪽 화면에, 바깥 화면 레이어는 접었을 때 보이는 바깥 화면에 재생됩니다. 캔버스에서 모델을 ⌥⌘ 드래그하면 돌아갑니다(옆=Y, 위아래=X, Shift 15° 단위). 회전·오프셋·배율·화각에는 키프레임 다이아몬드가 있어, 턴테이블은 회전 Y 키 두 개(0°·360°), 등장은 회전 X·오프셋·화각 키 몇 개로 만듭니다. PNG·동영상·GIF·시퀀스 내보내기는 프레임마다 모델을 렌더하고, SVG·Lottie·애니메이션 SVG·HTML 은 정지 그림으로 내보내며 그렇게 알립니다.

모션 조각

삽입 메뉴(툴바 ＋ 메뉴도 같음)로 미리 만든 조각을 넣습니다. 모두 일반 레이어와 키프레임으로 만들어지므로 안의 모든 것을 고치고, 타이밍을 바꾸고, 내보낼 수 있습니다(Lottie 포함).

차트… — 레이블, 값 행으로 세로 막대·가로 막대·선·영역·파이·도넛 차트를 만듭니다(스프레드시트에서 붙여 넣기 가능, 한 행에 값이 여러 개면 시리즈가 늘어남). 재생 헤드부터 막대가 자라고 선이 그려지며 조각이 펼쳐지고, 값 레이블과 범례가 붙습니다. 파이·도넛의 범례는 옆과 아래 중 파이가 더 크게 남는 쪽에 놓입니다. 차트를 선택하고 인스펙터 ▸ Chart(종류·값·축·범례·애니메이션)나 데이터 편집… 으로 바꿉니다 — 다시 만들면 차트 구성 요소가 바뀌어 안에서 직접 고친 내용은 사라집니다.
코드… — 제목과 창 버튼이 있는 코드 창(다크/라이트)에 Swift·JavaScript·TypeScript·Python·JSON·Kotlin·Go·Rust·셸 문법 색을 입힙니다. 타이핑 효과를 켜면 재생 헤드부터 코드가 입력됩니다.
커서 — 지점 사이를 미끄러지듯 움직이는 포인터. 재생 헤드를 옮기고 포인터를 옮긴 뒤 우클릭 ▸ 재생 헤드에 클릭 추가 로 그 자리에서 누르며 물결이 퍼집니다.
파티클 ▸ 색종이·반짝임·눈·거품·폭발 — 시뮬레이션이 입자마다 키프레임으로 구워집니다(나중에 고쳐도 다시 계산되지 않으니 새 패턴은 다시 삽입). 입자마다 키프레임은 몇 개뿐이라(경로는 이징 곡선 구간 한두 개, 좌우 흔들림은 Position X 의 흔들림(wiggle)) 입자가 수백 개여도 파일이 가볍고 재생이 매끄럽습니다. 입자들은 선택한 것(없으면 프레임)과 같은 크기의 그룹 하나로 들어가므로, 그룹을 키우거나 돌리면(터지며 커지는 폭발 등) 그 가운데를 기준으로 움직입니다 — 입자는 그룹 상자 밖으로도 날아갑니다. 폭발은 선택한 것 위에 넣으면 그 긴 변의 절반쯤까지(프레임 전체면 프레임 폭의 절반) 퍼지고, 대부분의 입자가 그 가장자리 가까이 갑니다. 반짝임은 제자리에서 반짝입니다.
기기 프레임 — 이미지·동영상 우클릭 ▸ 기기 프레임 추가 ▸ iPhone·iPad 모델(또는 그림의 픽셀 크기로 모델을 고르는 화면 크기에 맞추기; (3D) 항목은 돌릴 수 있는 3D 기기를 만듦 — *3D 모델* 참고). 그림이 둥근 화면 모서리의 벡터 베젤 안에 들어가고, 그림의 움직임은 프레임으로 옮겨집니다. 같은 메뉴에 맥 창(신호등 버튼이 있는 타이틀 바)과 브라우저 창(주소 표시줄이 있는 툴바)도 라이트·다크로 있습니다 — 앱 스크린샷·녹화·웹 페이지용. 창 장식은 그림의 픽셀 크기에 맞춰 축척되고(레티나 스크린샷은 2× 로 봄), 제목과 주소는 보통 텍스트 레이어처럼 고칠 수 있습니다.

글로우와 그레인

인스펙터 ▸ Effects 에 글로우(레이어 모양 둘레의 색 번짐 — 색·반경)와 그레인(레이어 위 필름 노이즈 — 양·크기)도 있습니다. 미리보기와 이미지·동영상 내보내기에 모두 반영됩니다.

Lottie 애니메이션 가져오기

삽입 ▸ Lottie 애니메이션…(＋ 메뉴에도 있음)나 Lottie .json 을 캔버스에 떨어뜨리면, 애니메이션이 고칠 수 있는 레이어 그룹 하나가 됩니다 — 도형(사각형·타원·패스[애니메이션 패스 포함]·별·채움·선·트림 패스), 솔리드, 널, 프리컴프(자체 시계를 가진 그룹), 포함된 이미지, 고정 텍스트 — 위치·크기·회전·불투명도·기준점 키프레임은 이징까지 그대로 옵니다. 그라디언트는 첫 번째 색이 됩니다. 익스프레션·마스크·트랙 매트·이펙트·텍스트 애니메이터·외부 이미지는 빠지고, 건너뛴 내용은 시트로 알려 줍니다. 아트보드보다 큰 컴프는 맞게 줄어들고, 타임라인은 애니메이션 길이만큼 늘어납니다.

인스펙터 키프레임 다이아몬드

타임라인이 켜져 있으면 인스펙터의 Position · Size · Rotation · Opacity · Fill · Stroke · Trim(도형) · Content(텍스트) 항목 앞에 다이아몬드(◇/◆) 가 표시됩니다. (Stroke는 색·두께를 함께 키프레임하며, 색의 투명도까지 애니메이션됩니다. Content는 텍스트 레이어에서만 나타납니다.)

캔버스의 모션 패스 — 위치에 키프레임이 있는 레이어를 선택하면(그룹 안 레이어도) 캔버스에 모션 패스가 보이고, 키프레임 점마다 주황색 점, 프레임마다 작은 점이 찍힙니다(점이 촘촘하면 느리고, 듬성하면 빠름). 키프레임 점을 끌면 그 위치 키프레임이 옮겨집니다(시각·이징은 그대로). Smooth motion path — 타임라인이 켜진 상태에서 Layout 섹션의 Smooth motion path 를 켜면, 위치 키프레임 사이를 직선이 아니라 부드러운 곡선으로 이동합니다(자동 베지어). 끄면 직선 보간으로 돌아갑니다.

각 키프레임 점에서 뻗어나온 흰 동그라미(탄젠트 핸들) 를 드래그하면 곡선 모양을 직접 조절합니다. 기본은 양쪽이 대칭으로 움직이고, Option을 누른 채 드래그하면 한쪽만(대칭 깸) 움직입니다.

흐린 ◇ — 아직 애니메이트되지 않은 속성. 누르면 현재 시각에 키프레임이 추가되며 애니메이션이 시작됩니다(0초 시점에 기준 키프레임도 함께 생성).
빈 ◇(강조색) — 애니메이트된 속성이지만 현재 시각엔 키프레임이 없음. 누르면 현재 화면 값으로 키프레임을 추가합니다.
채운 ◆(강조색) — 현재 시각에 키프레임이 있음. 누르면 그 키프레임을 삭제합니다.

자동 키프레임 (편집 시 자동 기록)

타임라인이 켜져 있고 이미 키프레임이 있는 레이어를 편집하면(캔버스 드래그/리사이즈/회전, 인스펙터 값 변경, 색·패스 편집 등), 변경한 속성이 현재 재생헤드 시각에 자동으로 키프레임으로 기록됩니다.
여러 객체를 선택해 한 번에 이동하면, 각 객체가 그 시각에 키프레임으로 기록됩니다.
키프레임이 없는 레이어는 "고정"으로 간주되어 편집해도 키프레임이 생기지 않습니다(먼저 Add Keyframe 필요).
새 키프레임은 이미 키프레임이 있는 속성에만 생깁니다. 위치가 움직이는 레이어의 불투명도를 바꾸면 불투명도가 전체 구간에서 바뀝니다(불투명도도 움직이려면 먼저 불투명도 키프레임을 추가).
편집은 재생헤드 시각에 보이는 모습에 적용됩니다. 움직이는 레이어를 오른쪽으로 30pt 끌면 그 순간의 위치에서 30pt 오른쪽이 됩니다. 맥과 iPhone·iPad 가 같은 규칙을 따릅니다.

애니메이션 가능한 속성

위치(Position), 크기(Size: W/H), 스케일, 회전(Rotation), 불투명도(Opacity)
채움(Fill) — 단색은 색을 보간, 그라디언트는 같은 종류면 스톱(색·위치)을 보간합니다. 종류가 다르면(예: 단색↔그라디언트, Linear↔Radial) 두 채움이 부드럽게 교차 전환(크로스페이드) 됩니다.
패스(펜 도형의 앵커/곡선) — 키프레임마다 다른 점 배치로 모핑
텍스트 내용(Content) — 글자는 보간하지 않고, 각 키프레임 시각에 해당 텍스트로 즉시 전환되어 다음 키프레임까지 유지됩니다(계단식/이산 전환 — 자막·문구 교체 등). 텍스트 레이어에서만 사용할 수 있습니다.
- 동영상·HTML·Lottie 내보내기에 반영됩니다(Lottie 는 바뀔 때마다 새 텍스트 문서를 씁니다. 윤곽으로 내보내는 텍스트 — 그라디언트 텍스트, 경로 위 텍스트 — 는 디자인 시점의 텍스트로 나갑니다).

키프레임 편집

타임라인의 레이어 트랙에 키프레임이 다이아몬드(◆) 로 표시됩니다.
다이아몬드를 클릭하면 그 시각으로 이동하고 해당 키프레임이 선택됩니다.
다이아몬드를 드래그하면 키프레임의 시간을 옮깁니다.
여러 키프레임 선택 — 레이어·속성을 가로질러:
- 맥: ⇧-클릭은 선택에 더하고, ⌘-클릭은 더하거나 뺍니다. 트랙의 빈 곳을 드래그하면 여러 행에 걸친 선택 사각형이 그려집니다(⇧-드래그는 스팬 바 위에서도 시작, ⇧ 나 ⌘ 를 누르면 기존 선택에 더함).
- iPhone·iPad: 타임라인 바의 ✓(키프레임 선택) 버튼을 누르거나 키프레임을 길게 누르면 선택 모드가 되고, 그다음부터는 탭할 때마다 키프레임이 선택에 더해지거나 빠집니다.
- 타임라인 바에 선택한 개수가 보입니다. 키프레임을 고르면 그 레이어들도 선택됩니다.
함께 옮기기: 선택한 키프레임 아무거나 드래그하면 모두 같은 만큼 움직입니다. 0초 앞으로는 가지 않습니다.
스냅: 드래그하는 키프레임이 재생헤드, 마커(비트 포함), 다른 키프레임, 레이어·클립 바의 끝에 몇 픽셀 안으로 다가가면 거기에 붙습니다. 맥에서 드래그 중 ⌘ 를 누르면 자유롭게 놓습니다.
타이밍 늘이기·줄이기(맥): 선택의 첫 키프레임이나 마지막 키프레임을 ⌥-드래그하면 반대쪽 끝을 기준으로 선택 전체가 늘거나 줄어듭니다(⌥⇧-드래그: 재생헤드 기준). 두 시각 이상을 고르면 시간 눈금 위쪽에 괄호 막대가 나타나고, 그 양 끝을 끌어도 같습니다(⌥ 를 누르면 재생헤드 기준). 키 사이 간격이 고르게 바뀌어 움직임의 모양은 그대로, 빠르기만 달라집니다.
Retime 메뉴(키프레임을 여러 개 고르면 타임라인 바에 나타남 — 맥·iOS)와 키프레임 우클릭 메뉴(맥): 키프레임 뒤집기는 선택을 제자리에서 거꾸로 재생합니다(구간마다 이징도 뒤집혀 천천히 시작하던 것이 천천히 끝나고, 모션 패스 핸들도 따라감). 50 / 75 / 150 / 200 % 로 늘이기. 우클릭 메뉴에는 키프레임 복사 / 붙여넣기, 값만 붙여넣기, 이징만 붙여넣기, 이징 하위 메뉴, 키프레임 삭제도 있습니다. 선택 밖의 키프레임을 우클릭하면 먼저 그 키프레임이 선택이 됩니다.
고르게 분배(Distribute Evenly) 는 고른 키프레임의 시각을 처음과 끝 사이에 같은 간격으로 놓습니다(같은 시각의 키 — 포즈 — 는 함께 움직임). 재생 헤드로 맞추기(Align to Playhead) 는 선택의 첫 키프레임이 재생 헤드에 오도록 옮깁니다. 둘 다 Timeline 메뉴, Retime 메뉴, 키프레임 우클릭 메뉴에 있습니다.
Easy Ease(Timeline 메뉴 F9, ⇧F9 는 들어오는 쪽만, ⌘⇧F9 는 나가는 쪽만 — Retime 메뉴, 우클릭 이징 하위 메뉴, iOS 는 타임라인 바의 이징 버튼에도)는 고른 키프레임마다 33 % 영향력으로 멈춰 서며 도착하고 멈춘 채 출발하게 합니다. 키프레임의 두 쪽은 따로입니다 — 착지를 부드럽게 해도 다음 움직임의 출발은 그대로입니다. 세밀한 조정은 그래프 에디터에서 합니다.
이 편집은 모두 실행 취소 한 번이며, 한 일의 이름이 붙습니다("Move 12 Keyframes", "Reverse 6 Keyframes").
레이어의 애니메이션 통째로 옮기기: 행 이름 오른쪽 끝의 ⟷ 손잡이를 끕니다. 그 레이어의 키프레임 전부, 등장/퇴장 구간, 모션 패스 탄젠트, (클립이면) 배치 위치가 함께 실시간으로 움직이며 실행 취소는 한 번입니다. 그 레이어가 선택에 들어 있으면 선택한 레이어가 모두 함께 움직입니다 — 장면 전체를 1초 뒤로 밀거나 등장 간격을 다시 맞출 때. 0초 앞으로는 끌 수 없습니다.
인스펙터 상단 배너가 지금 어느 키프레임을 편집 중인지(Baseline / Keyframe n / m) 항상 알려줍니다. 그 상태에서 속성을 바꾸면 그 키프레임 값이 갱신됩니다.
키프레임을 고른 뒤 Delete 로 삭제할 수 있습니다(타임라인 바의 휴지통 버튼과 동일). 캔버스를 클릭하면 키프레임 선택이 풀려 Delete 가 다시 레이어에 적용됩니다.
레이어를 지우면 그 키프레임도 함께 지워집니다 — 그룹이면 안에 든 모든 레이어의 키프레임까지. 실행 취소하면 함께 돌아옵니다.
키프레임 복사(타임라인 바, Timeline 메뉴, 우클릭, 또는 키프레임을 고른 상태의 편집 ▸ 복사)는 고른 키프레임 — 개수 제한 없이, 레이어·속성을 가로질러 — 을 값·이징과 함께, 첫 키프레임 기준의 상대 시간을 유지해 복사합니다. 키프레임 붙여넣기(키프레임을 복사한 뒤의 편집 ▸ 붙여넣기도 같음)는 선택한 레이어들에 재생 위치부터 넣습니다:
- 한 레이어에서 복사한 키프레임은 선택한 모든 레이어에 들어갑니다. 여러 레이어에서 복사했으면 선택한 레이어와 같은 레이어끼리(같은 문서에 다시 붙일 때), 그다음 이름, 그다음 순서로 짝을 짓습니다.
- 값만 붙여넣기는 그 자리의 이징을 그대로 두고(새 키는 linear), 이징만 붙여넣기는 그 시각에 이미 있는 키프레임의 이징만 바꿉니다.
- 키프레임은 시스템 클립보드에 들어가므로 다른 문서에도, 유니버설 클립보드로 맥과 iPhone·iPad 사이에도 붙여 넣을 수 있습니다. 붙인 키가 타임라인 끝을 넘으면 타임라인이 늘어납니다.
- 대상 레이어가 애니메이션할 수 없는 속성(도형의 글자 크기 등)은 건너뜁니다. 붙여 넣은 키프레임이 선택이 됩니다.
레이어의 등장/퇴장 스팬 바가 그 레이어의 채움색으로 칠해지고 이름 옆에 색 견본이 붙어, 어느 도형의 트랙인지 한눈에 보입니다(채움이 없으면 회색). 채움을 바꾸면 즉시 따라갑니다.
동영상 트랙은 더 높게 표시되고, 클립 바 안에 영상 프레임 썸네일이 시간 순으로 깔립니다(트림·이동·확대에 따라 갱신). 오디오 트랙의 클립 바에는 파형 아이콘이 표시되며, 두 클립 모두 페이드 구간(어두운 쐐기)과 음소거 표시가 바 위에 그려집니다. 재생 중에는 비디오·오디오 클립의 소리가 볼륨·페이드를 반영해 함께 들립니다.
키프레임을 선택하면 타임라인 바에 Easing 버튼이 나타납니다. 누르면 이징 편집기가 열립니다:
- 프리셋: Linear · In · Out · In·Out · Hold, 그리고 스프링 네 가지 — Gentle(부드럽게) · Bouncy(탄력) · Snappy(빠르게) · Elastic(느슨하게 출렁임).
- More ▾: Smooth(After Effects 의 Easy Ease)와 고전 곡선 계열 — Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back — 각각 In · Out · In-Out. Back 은 시작 전으로 살짝 물러났다(In) 끝을 넘었다 돌아옵니다(Out) — 예비 동작과 오버슈트. 모두 일반 곡선이라 어떤 내보내기에서도 똑같이 보입니다.
- 곡선 그래프: 두 개의 제어점을 드래그해 커스텀 큐빅 베지어 가속 곡선을 직접 만들 수 있습니다(세로로 1을 넘겨 오버슈트도 가능).
- 스프링: 스프링을 고르면 그래프 대신 Stiffness(당기는 힘) · Damping(멈추는 빠르기) · Mass(무게감) 슬라이더와 응답 곡선이 나타납니다. 실제 스프링 물리로 움직이므로 목표를 지나쳤다가 튕기며 멈출 수 있습니다. 폭·높이·선 두께는 0 아래로 넘어가지 않고 0 에서 멈춥니다(0 에서 자라는 막대가 뒤집히지 않음) — 편집기와 모든 내보내기에서 같습니다.
- 이징은 그 키프레임 → 다음 키프레임 구간(오른쪽) 에 적용됩니다. 타임라인 ⋯ 메뉴 ▸ Show Easing Curves 를 켜면 각 키프레임 오른쪽 구간에 이징 곡선이 그려져 어떤 가속이 걸렸는지 보입니다(기본 꺼짐).

그래프 에디터

그래프 에디터(타임라인 바의 차트 버튼, 또는 Timeline ▸ Graph Editor)는 고른 키프레임의 속성 곡선을 트랙 자리에 보여 줍니다. 키프레임을 고르지 않았으면 선택한 레이어의 애니메이션된 숫자 속성이 나옵니다. iPhone·iPad 에서는 시트로 열립니다.
Value(값) 는 시간에 따른 값, Speed(속도) 는 값이 얼마나 빨리 변하는지(초당 단위)를 보여 줍니다 — 이징은 키프레임에서 속도가 0으로 떨어지는 모양입니다. 곡선마다 자기 범위로 맞춰 그리고 색을 달리하며, 왼쪽 범례에 이름이 있습니다.
키프레임(사각형)을 클릭해 고릅니다(⇧ 추가, ⌘ 추가/빼기 — 트랙과 같음). 옆으로 끌면 시각이, Value 에서는 위아래로 값이 바뀝니다(⇧ 는 한 방향만). 여러 개를 고르면 함께 움직입니다.
고른 키프레임에는 핸들이 보입니다. 왼쪽은 값이 들어오는 모양(ease in), 오른쪽은 나가는 모양(ease out)입니다. 옆으로 끌면 영향력(이징이 구간 안으로 얼마나 깊이 미치는지), 위아래로 끌면 속도(Speed 에서는 키프레임에서의 속도, Value 에서는 곡선의 제어점)가 바뀝니다. 핸들을 끌면 고른 키프레임 모두의 그쪽이 같아지고 반대쪽은 그대로입니다.
핸들은 일반 이징 곡선이라 동영상·HTML·Lottie 가 그대로 재생합니다(Lottie 는 키마다 양쪽을 따로 가짐). 스프링과 홀드에는 핸들이 없습니다.

자르기 · 슬립 · 리플 삭제

재생 헤드에서 레이어 자르기(Split Layers at Playhead)(Timeline 메뉴 ⌘⇧D, 타임라인 ⋯ 메뉴)는 바가 재생 헤드를 지나는 선택 레이어를 모두 자릅니다 — 동영상·소리 클립만이 아니라 도형·텍스트·그룹도. 원래 레이어는 자른 곳에서 끝나고 사본("이름 (2)")이 거기서 시작합니다. 키프레임은 나뉘고 양쪽에 자른 시각의 키가 생겨 튀지 않습니다. 그룹 사본은 안 레이어의 애니메이션을 통째로 가집니다.
슬립(맥): 바의 가운데를 ⌥-드래그하면 바는 그대로 두고 안의 내용만 밀립니다 — 클립은 앞뒤 영상이 보이고, 레이어의 키프레임(그룹은 시계)이 시간 축으로 움직입니다.
리플 삭제(Ripple Delete) 는 고른 레이어를 지우고 생긴 빈 시간을 메웁니다: 지운 바 뒤에서 시작하는 것들이 그 길이만큼 앞으로 당겨집니다(키프레임·마커 포함).

인터랙티브 상태 (웹 페이지)

Timeline ▸ States…(iOS: 타임라인 ⋯ ▸ States…)로 작품을 인터랙티브 웹 페이지로 만듭니다. 상태는 이름 붙인 타임라인 구간(시작 … 끝, 초 — 끝이 시작보다 앞이면 거꾸로 재생, Set ▸ Between Markers 는 재생 헤드를 둘러싼 마커 구간)과 그것을 재생하는 동작입니다: 클릭, 포인터 들어옴, 포인터 나감, 스크롤해 보임, 페이지 열림 — 레이어 하나 또는 작품 전체에.
HTML 내보내기는 그러면 첫 프레임에서 기다리다가 보는 사람의 동작에 맞춰 상태를 재생합니다. 같은 레이어의 클릭 상태 둘은 번갈아(토글) 재생됩니다(열기/닫기). 재생 위치가 구간 안에 있을 때 시작한 상태는 거기서 이어서 재생하므로, 거꾸로 도는 "포인터 나감" 상태가 반쯤 재생된 호버를 매끄럽게 되돌립니다. Loop 는 현재 상태인 동안 반복합니다.
시트의 ▶ 나 ⋯ ▸ Play State 로 캔버스에서 미리 봅니다.
상태는 웹 페이지 전용입니다: 동영상·GIF·Lottie 는 타임라인 전체를 재생합니다(Lottie 내보내기가 알려 줌).

속성별 트랙 (하위 트랙)

레이어 트랙 이름 왼쪽의 펼침 화살표(▸/▾) 를 누르면 그 레이어의 속성별 하위 트랙(Position X/Y · Scale · Rotation · Opacity · Fill · Path 등)이 펼쳐집니다.
레이어 행의 키프레임은 포즈(같은 시각의 모든 속성) 단위로 선택·이동·삭제됩니다.
하위 트랙의 키프레임은 그 속성 하나만 선택·이동·삭제·이징할 수 있어 속성별로 따로 타이밍을 조절할 수 있습니다.
스스로 움직이는 속성(모션 비헤이비어)에는 ∿(발진기)·↗︎(링크) 표시가 붙고, 키프레임이 없어도 행이 있습니다.

트랙 ↔ 캔버스 선택

캔버스에서 도형을 선택하면 타임라인의 해당 트랙 행이 강조됩니다.
타임라인 트랙 행(이름)을 클릭하면 캔버스에서 그 도형이 선택됩니다.

레이어 등장/퇴장 (가시성 구간)

타임라인이 켜져 있을 때 레이어를 선택하면 인스펙터에 Timeline 섹션이 나타납니다.
Appear At / Disappear At 으로 그 레이어가 타임라인에서 보이기 시작/끝나는 시각을 정할 수 있습니다. 그 구간 밖에서는 화면에 나타나지 않습니다.
키프레임이 레이어 시작을 따라감(기본 켬, 키프레임이 있는 레이어에 표시): 인스펙터에서든 스팬 바를 끌어서든 Appear At 을 바꾸면 그 레이어의 키프레임도 같은 만큼 움직여, 레이어가 나타날 때 시작하도록 만든 애니메이션이 어디에 놓아도 같은 모양으로 재생됩니다. 키프레임을 제자리에 두어야 할 때(예: 이미 페이드인이 시작되는 시각으로 Appear At 을 맞출 때)는 끕니다. Disappear At 은 키프레임을 움직이지 않습니다. 행의 ⟷ 손잡이는 이 스위치와 상관없이 전부 함께 옮깁니다.
타임라인 클립 바: 등장/퇴장 구간은 타임라인 트랙에서도 드래그 바로 편집할 수 있습니다 — 바의 가운데를 드래그하면 구간을 통째로 이동하고, 좌우 끝(핸들)을 드래그하면 등장·퇴장 시각을 각각 조절합니다.
- 이 바는 타임라인에 이미 행이 있는 레이어(키프레임이 있는 레이어)와, 등장/퇴장이 설정된 레이어에 표시됩니다. 아직 행이 없는 정적 레이어는 인스펙터에서 Appear/Disappear At 을 한 번 설정하면 타임라인에 행과 바가 나타납니다.
(비디오 레이어는 대신 클립 트림/배치로 가시성을 조절합니다.)

그룹 안 레이어 애니메이션

타임라인에서 그룹 안 레이어는 그룹 행 아래에 들여 써서 레이어 패널 순서대로 놓입니다. 그룹 행의 ▾ / ▸ 삼각형으로 보이고 숨깁니다.
타임라인도 선택을 따라갑니다: 애니메이션된 레이어를 캔버스·레이어 패널·메뉴 어디서든 선택하면 그 행이 보이도록 스크롤되고(위의 접힌 그룹은 펼쳐짐) 키프레임이 바로 보입니다. 키프레임이 없는 레이어는 행이 없으므로 타임라인은 그대로 둡니다.
그룹 안의 자식 레이어도 독립적으로 키프레임 애니메이션할 수 있습니다. 그룹을 더블클릭해 자식을 선택한 뒤 키프레임을 추가하면, 그 자식만 따로 움직입니다(그룹 전체와 별개).
애니메이션된 레이어도 그룹으로 묶을 수 있습니다. 그룹(⌘G)으로 묶거나 레이어 패널에서 그룹 안으로 끌어 넣으면 위치 키프레임이 그룹 좌표로 옮겨져 모든 것이 원래 자리에서 그대로 재생됩니다. 회전·배율된 그룹이면 회전·배율 키도 맞춰집니다. 그룹 해제는 반대로 옮기고(회전·배율된 그룹의 자식은 그 회전·크기를 이어받음), 그룹이 자식에게 하던 것도 넘겨 줍니다: 불투명도(불투명도 키프레임에 곱함), 등장/퇴장 시각, 그룹 자체 타이밍(키프레임이 실제로 재생되던 시각으로 이동 — 반복하는 그룹은 첫 회만). 그룹 자신의 키프레임(그룹 전체를 옮기거나 흐리게 하던 것)은 그룹 해제 때 그룹과 함께 사라집니다.

완성한 애니메이션은 MP4/MOV 영상으로 내보낼 수 있습니다. 내보내기 참고.