안녕하세요! 오늘은 클립 스튜디오 페인트에서 귀여운 꼬마 캐릭터를 간단하게 그리는 방법과 애니메이션하는 방법을 살펴보겠습니다! 트윈 애니메이션을 사용할 예정이지만, 나중에는 일부 프레임별 애니메이션과도 결합할 것입니다. 마지막으로, Streamlabs와 같은 소프트웨어에 애니메이션을 통합하는 방법을 보여드리겠습니다.

 

이 튜토리얼의 비디오 버전은 여기에서 시청할 수 있습니다:

꼬마 캐릭터 그리기

꼬마 캐릭터를 실제로 그려보면서 시작해봅시다. 이 예시에서는 선화 없는 그림을 사용하기로 했습니다. 이 간단한 캐릭터 렌더링 방식은 우리가 원하는 단순하고 귀여운 꼬마 캐릭터의 모습에 잘 어울리며, 또 다른 큰 이점도 있습니다.

 

선화에 대해 걱정할 필요가 없으므로 애니메이션 작업을 훨씬 쉽게 할 수 있고 선이 완벽하게 일치하는지 걱정할 필요가 없습니다.

 

우리가 만들고자 하는 종류의 애니메이션을 위한 일러스트를 만들 때 몇 가지 사항을 염두에 두어야 합니다:

1. 벡터 레이어 사용:

 

이것은 그림을 변형할 때 더 나은 이미지 품질을 유지하는 데 도움이 됩니다(비트맵/래스터 레이어를 사용하는 것과 비교하여). 벡터 레이어에 대한 자세한 내용은 제 다른 튜토리얼을 참조하세요:

레이어의 투명도를 잠가 그림의 일부를 다시 채색할 수 없다는 점을 명심하세요. 하지만 레이어를 아래 레이어에 클리핑하여 비슷한 효과를 얻을 수 있습니다.

2. 일러스트의 각 요소에 대한 레이어 생성:

 

트윈 애니메이션이 유연하고 생동감 있게 보이려면 일러스트의 충분한 요소들을 제어할 수 있어야 합니다. 각 레이어는 독립적으로 애니메이션될 수 있으므로 캐릭터를 여러 부분으로 나누는 것이 합리적입니다.

3. 요소 겹치기:

 

다른 요소들이 겹치더라도 디테일이 유지되도록 요소를 설정해야 합니다. 이렇게 하면 요소를 움직일 때 연결된 것처럼 보입니다.

4. 일러스트의 그룹화된 요소에 대한 폴더 생성:

 

이것은 함께 속하는 요소들을 그룹화한다는 의미입니다. 예를 들어, “왼쪽 팔” 폴더에는 “왼쪽 위팔”, “왼쪽 아래팔” 및 “손”이 포함됩니다. 이렇게 하면 나중에 각 개별 부분을 항상 애니메이션할 필요 없이 전체 팔을 한 번에 애니메이션할 수 있습니다. 이것은 엄청난 시간 절약입니다!

애니메이션 설정

그림이 완성되면 애니메이션을 준비해봅시다. 애니메이션 전용 작업 공간으로 전환하세요. 클립 스튜디오 페인트의 작업 공간에 대한 자세한 내용은 제 다른 튜토리얼을 참조하세요:

또는 간단히 “창”으로 이동하여 “타임라인”을 선택하세요. 이제 “새 타임라인” 버튼을 누르세요.

프레임 속도 12, 재생 시간 24를 선택해봅시다. 이것은 초당 12프레임으로, 24프레임 재생으로 2초짜리 애니메이션을 만들 수 있다는 의미입니다. 더 많은 프레임으로 애니메이션을 만들고 싶다면 클립 스튜디오 페인트 EX 버전을 구매해야 합니다. 하지만 우리가 만들고자 하는 간단한 애니메이션 루프에는 클립 스튜디오 페인트 PRO에서 사용할 수 있는 24프레임으로 충분할 것입니다.

 

레이어가 많으므로 썸네일을 비활성화하여 애니메이션 타임라인을 단순화할 수 있습니다. 메뉴를 열고 “썸네일 크기”를 클릭한 다음 “없음”을 선택하면 됩니다.

이제 애니메이션 프로세스를 위해 일러스트 요소를 준비해봅시다.

 

1단계: 모든 레이어(및 폴더)를 선택하고 “이 레이어에 키프레임 활성화” 버튼을 클릭합니다.

2단계: 오브젝트 도구로 각 레이어(및 폴더)를 선택하고 회전 중심을 조정합니다. 이것은 캔버스 중앙에 나타나는 작은 십자 표시입니다. 일러스트의 각 관절, 즉 한 요소가 다른 요소와 겹치는 부분으로 이동합니다. 예를 들어, 손 레이어의 경우 손목으로 이동합니다. 아래팔 레이어의 경우 팔꿈치로 이동합니다. 위팔 레이어의 경우 어깨로 이동합니다.

이것은 애니메이션을 시작하기 위해 취해야 할 첫 번째 단계입니다. 완료되면 파일을 저장하는 것이 항상 좋습니다!

트윈으로 캐릭터 애니메이션하기

실제로 애니메이션을 시작하기 전에 애니메이션이 어떻게 보일지 잠시 생각해봅시다. 여기 두 가지 다른 애니메이션을 스케치했습니다. 간단한 대기 애니메이션과 스트림이 일시 중지되었을 때 사용할 “BRB” 애니메이션입니다.

두 가지 애니메이션을 만들고 싶다는 것을 이미 알고 있으므로, 회전 중심을 이미 설정해 둔 현재 타임라인을 복제해봅시다. 메뉴로 이동하여 타임라인을 선택한 다음 “타임라인 관리”를 선택합니다. 여기에서 현재 타임라인을 복제할 수 있습니다.

하지만 이제 실제로 애니메이션을 해봅시다.

 

각 레이어의 회전 중심을 조정할 때 타임라인에 작은 다이아몬드 모양이 생성되는 것을 눈치챘을 수도 있습니다. 이것은 키프레임을 생성했음을 의미합니다.

애니메이션을 만들려면 더 많은 키프레임을 만들어야 합니다. 타임라인의 중간, 12프레임으로 이동해봅시다. 이제 캐릭터의 개별 부분들을 우리의 스케치처럼 보이도록 재배치해봅시다. 이동, 회전, 크기 조정을 통해 할 수 있습니다.

서로 나란히 놓았을 때 차이가 미묘해 보일 수 있지만, 대기 애니메이션의 경우 실제로 화려하고 미친 듯한 것을 원하지 않으므로 미묘한 변화를 주는 것을 두려워하지 마세요. 움직임 속에서는 여전히 눈에 띨 것입니다!

 

도구 속성 창에서 “종횡비 유지”를 선택 해제하고 요소들을 찌그러뜨리거나 늘릴 수도 있습니다. 하지만 이것을 요소 회전과 함께 시도하지 않는 것을 권장합니다. 제 경험상, 이것은 항상 요소가 자체적으로 재배치되는 버그로 이어졌습니다. 이것이 전역적인 문제인지 아니면 제 컴퓨터에서만 나타나는 문제인지는 알 수 없습니다.

우리는 이미 애니메이션을 테스트해볼 수 있으며, 클립 스튜디오 페인트가 이 키프레임들 사이에 모든 프레임을 자동으로 생성하는 것을 볼 수 있습니다. 특히 “BRB” 애니메이션의 경우, 애니메이션에 더 많은 단계를 만들기 위해 추가 키프레임을 만들고 싶을 수도 있습니다.

 

마지막으로, 애니메이션이 루프되기를 원하므로 애니메이션이 시작한 방식대로 끝나도록 해야 합니다. 첫 번째 키프레임의 다이아몬드를 마우스 오른쪽 버튼으로 클릭하면 복사할 수 있습니다. 이제 마지막 프레임을 마우스 오른쪽 버튼으로 클릭하고 붙여넣을 수 있습니다. 이렇게 하면 첫 번째 프레임과 동일한 변형이 적용됩니다.

애니메이션은 시행착오 과정입니다. 애니메이션을 계속 테스트하고, 요소의 위치를 계속 조정하고, 움직임의 타이밍을 계속 조정하고, 새로운 것을 계속 시도하세요. 애니메이션이 마음에 드는 지점에 도달할 때까지 시간이 좀 걸릴 수 있습니다!

프레임별로 텍스트 애니메이션하기

“BRB” 애니메이션으로 전환해봅시다. 캐릭터 애니메이션은 이미 설정해 두었습니다. 캐릭터 위에 “BRB” 글자를 추가하려면 새 애니메이션 폴더 (A)를 만듭니다. 다음으로, 글자가 나타나야 할 첫 번째 프레임 (B)을 선택하고 “새 애니메이션 셀” (C)을 클릭합니다.

간단히 글자를 그립니다. 그런 다음 다음 프레임을 선택하고 글자를 다시 그립니다. “어니언 스킨 활성화” (D)를 눌러 이전 프레임을 강조 표시할 수 있습니다. 이렇게 하면 글자를 따라 그릴 수 있습니다. 같은 글자를 계속해서 다시 그리면 귀여운 흔들림 효과가 생성됩니다. 애니메이션 전체를 완료할 때까지 계속하세요. 마지막에는 글자를 축소한 다음 “팝”하고 사라지도록 결정했습니다. 이것은 특별한 효과 없이 글자가 사라지는 것보다 루프가 더 자연스럽게 느껴지도록 도와줍니다.

애니메이션 내보내기

이제 작업이 완료되었으므로 애니메이션을 내보내야 합니다. 소셜 미디어나 다른 곳에서 사용할 계획이라면 GIF로 내보낼 수 있습니다. 하지만 꼬마 캐릭터를 스트림 오버레이의 일부로 사용하고 싶으므로 “애니메이션 내보내기 > 동영상” 옵션을 선택해야 합니다.

하지만 그렇게 하기 전에 “종이” 배경 레이어를 비활성화해야 합니다. 이렇게 하면 애니메이션을 투명 파일로 내보내어 Streamlabs의 요소 위에 오버레이할 수 있습니다.

내보내기 시 사용하는 설정은 다음과 같습니다:

애니메이션에 다른 프레임 속도를 사용했다면 여기에 해당 속도를 입력해야 합니다! 타임라인 설정 시 사용했던 기본값으로 설정되지 않습니다.

Streamlabs에 애니메이션 통합하기

이제 애니메이션이 완료되었으니 Streamlabs에 통합해봅시다. “소스” 메뉴에서 “+” 아이콘을 선택하고 “미디어 소스”를 선택합니다. 이제 파일로 이동합니다. “반복” 옵션을 선택했는지 확인하세요.

애니메이션의 두 상태를 전환하려면 현재 장면을 복제하는 것이 좋습니다. 새 장면에서 이제 새 “미디어 소스”를 추가합니다. “대신 새 소스 추가”를 토글했는지 확인하세요. 이제 "BRB" 파일을 간단히 배치합니다. 두 애니메이션의 크기와 위치를 동일하게 설정해야 합니다. 이 작업을 완료한 후에는 이전 애니메이션을 선택하고 “-” 아이콘을 눌러 삭제할 수 있습니다. 이제 각 해당 장면을 클릭하여 두 애니메이션 상태를 전환할 수 있습니다.

감사합니다

이 튜토리얼이 도움이 되었기를 바랍니다. 질문이 있거나 이 지침을 따라 만든 것을 공유하고 싶다면 언제든지 댓글을 남겨주세요! :)

 

또한, 제가 이 애니메이션을 만들어준 제 아내 cassiejwl의 Twitch 채널에서 뜨개질 및 게임 스트림을 꼭 확인해보세요!