애니메이션 베타

트랜지션이 Scene과 Scene 사이를 애니메이션한다면, 애니메이션은 하나의 Scene 안에서 일어납니다. 모든 Scene은 자기 시계를 가지고 있고, 그 안의 Object는 모두 이 시계를 함께 봅니다. 에디터를 Animation 모드로 바꾸고 플레이헤드를 원하는 시각으로 옮긴 뒤 무언가를 바꾸면, SSHOW가 그 시각의 값을 키프레임으로 기록하고 사이는 알아서 채웁니다. 모든 Object가 한 시계를 공유하므로 Scene 전체가 같은 박자로 움직입니다 — 제목이 미끄러져 들어오고, 차트가 자라나고, 캡션은 클릭을 기다립니다.

참고 애니메이션과 트랜지션은 서로를 보완합니다. 트랜지션은 시선을 다음 Scene으로 옮기고, 타임라인은 한 Scene 안에서 벌어지는 일을 연출합니다. 대부분의 이야기는 둘을 함께 씁니다.

Design과 Animation

에디터 헤더에는 두 개의 모드가 있습니다. 캔버스·도구·패널은 그대로이고, 편집이 디자인을 바꾸는지 그 위의 애니메이션을 바꾸는지만 달라집니다.

Design

평소의 편집 모드입니다. 캔버스는 디자인한 그대로를 보여주고, 모든 편집은 Object 자체를 바꿉니다. 만들어 둔 애니메이션은 건드리지 않은 채 뒤에 남아 있습니다.

Animation

Objects 패널이 타임라인으로 바뀌고, 애니메이션 가능한 속성마다 키 배지가 나타나며, 캔버스는 플레이헤드 시각의 Scene을 보여줍니다. 여기서의 편집은 그 시각에 기록됩니다.

팁 글자를 입력 중이 아닐 때 Tab으로 모드를 전환합니다(Shift+Tab은 역방향). 에디터는 마지막 모드를 기억했다가 그대로 다시 엽니다.

타임라인

Animation 모드에서는 Objects 패널에 눈금자와 Object별 레인이 생깁니다. 헤더는 트랜스포트와 시계 설정이고, 본문은 키프레임이 사는 곳입니다.

헤더

시계

지금 편집 중인 시계입니다. Scene 자체의 타임라인이면 Scene으로, 프레임 안으로 들어가면 브레드크럼(Scene ▸ Card)으로 바뀝니다. 세그먼트를 클릭하면 상위로 돌아갑니다.

트랜스포트

처음으로·재생/일시정지·끝으로·반복, 그리고 작업 영역 토글과 정지점 추가 버튼 — 뒤의 두 가지는 아래에 각각 별도 섹션이 있습니다. 미리보기는 실제 시계를 그대로 돌리므로, 보이는 것이 곧 관객이 볼 것입니다.

자동 키프레임

열쇠 모양 토글입니다. 켜져 있으면(기본값) 플레이헤드 위치의 편집이 키프레임으로 기록됩니다 — 아래 섹션 참고.

키 추가

자동 키프레임 옆의, 플러스가 들어간 열쇠입니다. 자동 키프레임이 편집을 기다린다면 이 버튼은 지금 바로 키를 찍습니다 — 선택한 레이어가 이미 애니메이션 중인 트랙 전부에 현재 값 그대로 플레이헤드에 키가 들어갑니다. 아직 아무것도 애니메이션하지 않는 레이어는 위치·회전·크기 배율·불투명도로 시작합니다. 선택 전체가 한 번의 실행 취소로 되돌아갑니다.

그래프 뷰

키 레인을 값-시간 그래프로 바꿉니다. 양 끝의 키 두 개가 아니라 곡선 자체를 편집하게 됩니다. 아래에 별도 섹션이 있습니다.

플레이헤드 시각

현재 시각으로, 눈금 단위에 따라 밀리초 또는 프레임으로 표시됩니다. 값을 입력하면 정확히 그 지점으로 이동합니다.

길이

시계가 도는 시간(밀리초)입니다. 길이를 줄여도 끝 바깥의 키는 지워지지 않습니다 — 다시 늘리면 그대로 남아 있습니다.

프레임 레이트

플레이헤드와 키가 맞춰지는 프레임 격자입니다. 낮게(8–12fps) 두면 또박또박한 스톱모션 느낌이, 높게 두면 매끄러운 모션이 됩니다.

눈금 단위

눈금자·시각 입력·모든 표시값을 초와 프레임 사이에서 전환합니다.

줌

화면에 담기는 시간의 양입니다. 슬라이더를 더블클릭하거나 F를 누르면 시계 전체가 화면에 맞고, Alt / ⌘ + 스크롤은 포인터를 기준으로 확대·축소합니다.

본문

눈금자

시간 축입니다. 아무 곳이나 누르거나 드래그하면 스크럽되고, 정지점 마커도 이 위에 놓입니다.

Object 행

Object마다 한 행씩, 첫 키부터 마지막 키까지의 범위 막대와 움직이는 시각마다 원형 마커가 표시됩니다. 원형 마커를 드래그하면 그 시각의 모든 속성 키가 함께 이동합니다.

속성 행

이름 옆 화살표로 Object를 펼치면 애니메이션 중인 속성마다 한 행이 나옵니다 — Position X, Opacity, Fill 1 … — 각 행에는 자기 다이아 키가 있습니다.

플레이헤드

현재 시각을 가리키는 선입니다. 캔버스는 언제나 이 시각의 Scene을 그대로 보여줍니다.

첫 애니메이션 만들기

Object를 서서히 나타나게 하는 데 1분이면 충분합니다.

1. 1

   Object를 최종 모습대로 디자인한 뒤 Animation으로 전환합니다.

2. 2

   플레이헤드를 0에 두고 인스펙터에서 불투명도를 0으로 내립니다.

3. 3

   플레이헤드를 0.5초로 옮기고 불투명도를 다시 100으로 올립니다.

4. 4

   Space나 재생 버튼을 눌러 서서히 나타나는 모습을 확인합니다.

5. 5

   느낌이 다르다면 두 번째 다이아를 좌우로 끌어 타이밍을 바꾸거나, 더블클릭해 Motion 패널에서 커브를 바꾸세요.

팁 "키프레임 추가"를 따로 누른 적이 없다는 점에 주목하세요. 자동 키프레임이 켜져 있으면 플레이헤드가 놓인 시각에서 무언가를 바꾸는 것 자체가 키프레임입니다 — 위치·회전·크기·색, 무엇을 만지든 마찬가지입니다.

자동 키프레임

타임라인 헤더의 열쇠 토글이 Animation 모드에서의 편집이 무엇을 뜻하는지 정합니다. 기본은 켜짐입니다.

켜짐

모든 변경이 플레이헤드 시각의 키프레임으로 남습니다 — 캔버스 드래그, 패널 입력, 화살표 미세 이동 모두. 실제로 바꾼 속성만 기록됩니다.

꺼짐

아직 애니메이션되지 않은 속성을 편집하면 Design 모드와 똑같이 디자인 자체가 바뀝니다 — 작업 도중 레이아웃을 고쳐도 타임라인이 지저분해지지 않습니다. 이미 키가 있는 속성은 여전히 플레이헤드에 키가 찍히므로, 만들어 둔 모션이 조용히 덮이는 일은 없습니다.

참고 어떤 속성에 첫 키를 만들면 0초에도 디자인한 값을 담은 키가 함께 놓입니다 — 그래서 0프레임은 언제나 당신의 디자인입니다. Animation 모드를 나가도 화면이 튀지 않는 이유입니다.

키프레임 다루기

키는 속성 행에서는 다이아, Object 행에서는 원으로 보입니다. 할 수 있는 일은 다음과 같습니다.

팁 키를 우클릭하면 같은 동작들이 메뉴로 열리고, 이전/다음 키로 이동도 함께 있습니다 — 줌이 낮아 키가 붙어 보일 때 특히 편합니다.

애니메이션할 수 있는 것

옆에 키 배지가 있는 것은 모두 트랙을 가질 수 있습니다. 타임라인의 속성 행은 인스펙터와 같은 이름을 씁니다.

위치·회전(X·Y·Z)·깊이·원근·배율·기울임·기준점

변형 전체를 축 단위로 다룹니다 — X로 미끄러져 들어오는 동안 회전이 가라앉게 하거나, 옮긴 기준점을 중심으로 돌릴 수 있습니다. 회전 X/Y·깊이·원근도 트랙이라, 카드가 시간에 따라 공간에서 뒤집히게 할 수 있습니다.

너비와 높이

배율 눈속임이 아니라 실제 지오메트리라서, 커지는 동안에도 선·모서리 반경·텍스트 배치가 정확하게 유지됩니다.

불투명도

서서히 나타나고 사라집니다. 가장 흔한 트랙이자 재생 비용이 가장 낮습니다.

채우기·선·효과

채우기와 효과는 항목 단위로 키가 찍힙니다 — Fill 1, Stroke 1, Effect 1 — 그래서 색만 변하고 그림자는 그대로 둘 수 있습니다. 그라디언트는 색 정지점별로 보간됩니다.

모서리 반경

네 모서리를 각각 따로, 별·링의 안쪽 반경까지 키로 다룹니다 — 사각형을 알약 모양으로 굴렸다가 되돌리기에 충분합니다.

텍스트 내용

글자 자체입니다. 텍스트는 섞이지 않고 키에서 교체되므로 3 · 2 · 1 카운트다운이나 바뀌는 라벨에 꼭 맞습니다.

패스 모양

패스의 점들이 통째로 키가 되어 곡선을 유지한 채 다른 모양으로 모핑됩니다. 두 키의 점 구성이 같아야 하므로, 점을 더하거나 빼지 말고 같은 패스에서 시작해 정점만 옮기세요.

Scene 배경

Scene 자체의 채우기와 효과도 같은 시계 위에서 움직여, 배경이 앞의 콘텐츠와 함께 변할 수 있습니다.

참고 그룹의 크기는 자식이 정하므로 그룹에는 너비·높이 트랙이 없습니다 — 자식에 직접 키를 찍거나, 박스가 고정된 프레임을 쓰세요.

두 키프레임 사이

각 키는 자기 다음 구간의 움직임을 결정합니다. 원하는 사이 처리를 고르세요.

키를 더블클릭하면 그 키에 맞춰 Motion 패널이 열립니다. 트랜지션에서 쓰는 바로 그 에디터라서 — 베지어 핸들 두 개를 끌거나, 스프링을 맞추거나, Templates 탭에서 이름 붙은 프리셋을 고르면 — 한 번 다듬은 느낌을 어디서든 그대로 쓸 수 있습니다.

팁 구간의 길이는 두 키의 간격에서 나오므로, 여기서의 이징 커브는 자체 지속 시간을 갖지 않습니다. 타이밍은 키를 끌어서 조정하세요.

그래프 뷰

레인이 언제 일어나는지를 보여준다면, 그래프는 어떻게 움직이는지를 보여줍니다. 타임라인 헤더에서 자기 그룹에 놓인 버튼으로 켜면 키 레인이 값-시간 그래프로 바뀝니다 — 움직임의 모양이 그대로 그려집니다. 레인과 같은 클록·플레이헤드를 쓰므로 오가며 켜고 꺼도 아무것도 움직이지 않습니다.

축

가로는 레인과 같은 눈금자의 시간축입니다. 세로는 값이고, 트랙 고유의 단위로 표시됩니다 — 위치·깊이·원근·크기는 px, 회전과 기울임은 °, 크기 배율과 불투명도는 숫자 그대로입니다.

한 번에 한 곡선

편집되는 건 포커스된 트랙 하나뿐입니다. 그 곡선만 키를 얹고 진하게 그려지고, 선택의 나머지 트랙은 옅게 뒤에 남아 서로 어떻게 맞물리는지 보여줍니다. 옅은 곡선을 — 또는 옆 레일의 그 줄을 — 클릭하면 포커스가 옮겨갑니다.

값 편집

키를 위아래로 끌면 값이 바뀝니다. 키를 고르는 순간 레일 위의 숫자 칸이 활성화되므로, 정확한 값을 직접 입력해도 됩니다.

타이밍 조정

키를 좌우로 끌면 시간이 옮겨집니다. 양옆 키 사이를 벗어나지 않으므로 끌어서 순서가 뒤바뀌는 일은 없습니다.

탄젠트 핸들

선택한 키에는 양쪽으로 핸들이 하나씩 나옵니다 — 들어오는 이징과 나가는 이징입니다. 하나를 끌면 곡선이 매끄럽게 이어지도록 양쪽이 함께 움직이고, Alt를 누르면 짝을 끊어 그쪽만, Shift를 누르면 한 축으로 고정해서 끌 수 있습니다.

곡선 위에 삽입

포커스된 곡선을 더블클릭하면 그 자리에 키가 생깁니다. 곡선이 이미 그 지점에서 갖고 있던 값을 그대로 가져오므로, 옮기기 전까지는 모양이 변하지 않습니다.

숫자가 아닌 트랙

채우기·텍스트·패스 포인트는 그릴 값 축이 없습니다. 대신 그래프 아래 스트립으로 놓입니다 — 페인트는 색 리본으로, 키는 다른 트랙과 똑같이 고르고 옮길 수 있습니다. 포커스하면 그래프에는 변화의 진행이 그려집니다.

참고 그래프의 키를 우클릭하면 레인에서와 같은 메뉴가 나옵니다 — 트윈 종류, 복사, 삭제. 더블클릭하면 그 구간에 Motion 패널이 열립니다.

정지점 — 클릭 기다리기

발표는 한 번에 흘러가는 영상이 아닙니다. 정지점은 시계가 멈춰 발표자를 기다리는 지점으로, 파워포인트가 클릭 한 번을 쓰는 바로 그 박자입니다.

1. 1

   멈출 시각에 플레이헤드를 두고 트랜스포트의 깃발 버튼을 누릅니다.

2. 2

   깃발 마커를 눈금자 위에서 끌어 타이밍을 바꿉니다(Shift는 가까운 키에 붙입니다).

3. 3

   깃발을 우클릭하면 플레이헤드를 그 지점으로 옮기거나 삭제할 수 있습니다.

Play 모드에서는 Scene에 들어서는 순간 시계가 돌기 시작해 첫 정지점에서 멈춥니다. 클릭할 때마다 다음 정지점까지 재생되고, 정지점을 다 쓰면 그다음 클릭이 다음 Scene으로 넘어갑니다. 재생 중에 클릭하면 그 구간의 끝으로 건너뛰므로, 서두르는 발표자를 애니메이션이 붙잡지 않습니다.

팁 뒤로 갈 때는 Scene이 처음부터 다시 재생되지 않고 끝난 모습으로 나타납니다 — 방금 보여준 화면 그대로입니다.

작업 영역

눈금자 아래의 바는 프레젠테이션이 실제로 재생하는 구간을 표시합니다. 한 대목만 리허설하거나 긴 시계에서 그 구간만 발표하고 싶을 때 줄여 보세요 — 바깥은 지워지지 않고, 재생만 되지 않습니다.

핸들 드래그

양 끝에서 구간을 조절합니다. Shift를 누르면 키프레임·정지점·플레이헤드에 달라붙습니다 — 키프레임이 쓰는 스마트 스냅 그대로입니다.

스팬 드래그

길이를 유지한 채 구간 전체를 밀어 옮깁니다. Shift를 누르면 스냅 대상에 더 가까운 쪽 가장자리가 거기에 안착합니다.

B · N

구간의 시작(B)과 끝(N)을 플레이헤드 위치로 고정합니다 — After Effects의 작업 영역 키 그대로입니다.

스팬 더블클릭

전체 시계로 되돌립니다. 작업 영역은 시계의 속성이라 어떤 변경이든 실행 취소 한 번입니다.

작업 영역만 재생 (W)

트랜스포트의 브래킷 토글(또는 W)을 켜면 에디터의 재생이 이 구간만 리허설합니다. 재생은 구간의 시작에서 들어가 끝에서 마치고, 루프도 구간 안에서 돕니다.

참고 작업 영역이 진짜로 작동하는 곳은 프레젠테이션입니다. Play·View 모드는 Scene에 구간의 시작으로 들어가고, 구간 안의 정지점에 멈추며, 구간의 끝에서 다음으로 넘어갑니다. 에디터는 토글을 켜지 않는 한 이를 무시하고 전체 시계를 재생합니다.

프레임 타임라인

프레임은 자기 시계를 가질 수 있습니다. 카드·차트·위젯이 자신의 애니메이션을 품고 다니므로, Scene 타임라인에 흩어 놓지 않아도 됩니다.

• 캔버스에서 프레임을 더블클릭해 안으로 들어갑니다. 시계 브레드크럼이 Scene ▸ Frame으로 바뀌고 타임라인은 그 프레임의 시계를 편집합니다.
• 프레임 바깥 Object의 행은 흐려지므로 어떤 시계를 만들고 있는지 항상 분명합니다.
• Esc를 누르면 한 단계 위로 올라가고, 브레드크럼 세그먼트를 클릭하면 그곳으로 바로 이동합니다.

참고 발표가 재생하는 것은 Scene의 시계입니다. 프레임의 시계도 같은 방식으로 만들며, 준비 중인 인터랙션 트리거(클릭·호버)와 연결될 자리입니다.

재생하기

모든 화면을 같은 시계가 구동하므로, 영상이 발표와 일치합니다.

에디터에서

Space로 재생·일시정지하고, 반복 버튼으로 시계를 돌려 두고 다듬습니다. 재생은 문서를 바꾸지 않으니 마음껏 스크럽하세요.

Play 모드

발표에서는 각 Scene의 시계가 진입과 함께 재생되고 정지점을 지킵니다. 늘 쓰던 클리커 키·화살표·리모컨이 그대로 동작합니다.

영상 내보내기

각 Scene이 발표하는 구간만큼 — 작업 영역을 지정했다면 그 구간, 아니면 시계 전체 — 프레임 단위로 구워집니다. 시계가 없는 Scene은 설정한 고정 시간만큼 머뭅니다.

Lottie 내보내기

현재 Scene의 애니메이션을 벡터 키프레임의 Lottie JSON으로 내보내 웹이나 앱에 바로 쓸 수 있습니다. 텍스트·미디어·다이내믹 페인트·효과는 빠집니다.

키보드

Animation 모드의 키는 포커스가 어디에 있든 동작하므로 작업에서 손을 뗄 필요가 없습니다.

알아두면 좋은 것

긴 작업을 시작하기 전에 알아두면 좋은 몇 가지 보장입니다.

• 재생·스크럽·미리보기는 문서를 바꾸지 않습니다. 애니메이션 도중에 저장해도 중간 프레임이 아니라 당신의 디자인이 저장됩니다.
• 실행 취소는 편집만 되돌립니다 — 찍은 키와 바꾼 값만이며, 재생 위치는 대상이 아닙니다.
• Animation 모드를 나가면 캔버스는 디자인으로 돌아옵니다. 사라지는 것은 없고 시계가 잠시 세워질 뿐입니다.
• 매끄러운 재생을 위해 가볍게 유지하세요. Scene당 애니메이션되는 Object 몇 개, 속성당 키 두어 개, 그리고 한 계열의 커브가 모든 것이 한꺼번에 움직이는 것보다 잘 읽힙니다.