실습 01 — 기본 배치 · 키프레임 · 트리거 박스
그림을 무대에 올리고, 키프레임으로 움직이게 하고, 스크롤에 반응시킵니다.
먼저 읽으면 좋습니다
이 편에서 만드는 것
그림을 무대에 올리고, 키프레임으로 움직이게 하고, 스크롤에 반응시킵니다.
4컷 만화 한 편이 인터랙티브 웹툰이 되기까지 — 여기서 시작합니다.
영상
재생 시간 3:55 · 자막 한국어 / English (플레이어의 CC 버튼)
단계별 따라하기
영상 위 챕터 목록을 누르면 해당 구간부터 다시 볼 수 있습니다. 아래 단계는 영상 내레이션을 글로 옮긴 것입니다.
① 기본 배치 — 그림을 무대에 올리기
새 프로젝트에는 '테이크'가 하나 준비되어 있습니다. 테이크는 만화로 치면 한 컷입니다.
IMAGE의 + 버튼 또는 + Import로 리소스 임포트 창을 열고, 사용할 이미지를 끌어다 등록합니다.
등록된 이미지를 더블클릭하거나 계층으로 드래그하면 '유닛'이 되어 무대에 올라갑니다.
씬 뷰에서 기즈모(조절 손잡이)로 위치와 크기를 잡습니다. Q 선택 · W 이동 · E 크기
배경과 캐릭터를 겹쳐 구도를 만듭니다. 여기까지는 아직 움직임 없는 정지 장면입니다.
② 키프레임 애니메이션 — 그림을 시간 위에 놓기
움직일 유닛을 선택하고 Enter를 누르면 타임라인에 SELF(자기 자신) 트랙이 열립니다.
트랙 추가에서 Transform을 고릅니다 — 위치·크기·회전을 시간에 따라 바꾸는 채널입니다.
속성 줄의 다이아몬드(◆)를 누르면 그 순간의 값이 키프레임으로 찍힙니다.
키프레임은 '원화'입니다. 그 사이는 메이커가 동화처럼 자동으로 이어 그립니다 — 보간
구간을 골라 커브를 곡선 그래프로 편집합니다 — 가속·감속, 움직임의 성격이 여기서 정해집니다.
천천히 출발해서 부드럽게 멈추도록 — 곡선 하나로 느낌이 달라집니다.
재생해 보면 — 찍어 둔 키를 따라 그림이 부드럽게 움직입니다.
이번엔 말풍선 세 개 — 각자 움직이도록 하나하나에 따로 키를 잡습니다.
하나씩 시차를 두고 나타나게 하면 대화에 리듬이 생깁니다.
유닛마다 타임라인이 독립적이라 모두가 각자의 시간표대로 움직입니다.
재생 — 말풍선이 차례로 톡, 톡, 톡 떠오릅니다.
③ 트리거 박스 — 언제 움직일지 정하기
트리거 라인의 막대가 각 유닛의 '발동 지점'입니다. 독자의 스크롤이 여기 닿으면 애니메이션이 시작됩니다.
막대를 옮겨 등장 타이밍을 조절합니다. 시간이 아니라 '스크롤 위치'가 연출의 지휘봉입니다.
SIM으로 트리거 라인을 직접 움직여 보며 연출 타이밍을 확인합니다.