이 애니메이션은 수동 키프레임을 사용하여 만들었는데, 특히 Adobe After Effects 같은 복잡한 소프트웨어에서 만들었다면 얼마나 오래 걸렸을지 상상해 볼 수 있습니다. 그리고 이 애니메이션은 AI를 사용해서 1분 안에 만들었습니다.00:00

둘 다 같은 피그마 파일에서 시작했고, 같은 UI 디자인으로 시작했어요.00:12

안녕하세요, 제 이름은 아메드입니다. 피그마 디자인의 창업자고요. 오늘 피그마 디자인을 AI로 애니메이션화하는 방법을 보여드릴게요.00:15

지금 우리가 사용할 도구는 헤라라고 합니다. 헤라는 프롬프트를 입력받아 피그마 디자인에서 모션을 추출해내는 AI 기반 모션 디자인 도구입니다. 이 비디오의 좋은 점은 모션 디자인 경험이 없어도 괜찮다는 거예요.00:21

노트북만 있으면 돼요. 정말로 따라하실 수 있습니다. 모션 디자인 경험도 필요 없어요. 피그마에서 디자인할 수 있으면 그냥 따라하시면 돼요.00:33

자, 계획은 이거예요. 피그마를 열고, 피그마 파일을 하라에 바로 불러올 거예요. 그리고 거기서 AI 프롬프트를 이용해서 모션 디자인을 할 겁니다.00:40

그리고 계속해서 프롬프트를 주면서, 최종적으로 우리가 보기 좋다고 생각하는 영상으로 편집할 수 있도록 할 거예요.00:49

그럼 이제 함께 내보내는 방법도 배우고, 필요할 때 사용할 수 있게 해볼게요. 따라와 주세요, 시작해 봅시다. 자, 우선 지금부터 시작하겠습니다.00:56

세 개의 UI 카드부터 시작하는데, 당연히 이건 고정되어 있고 피그마 안에 들어가 있어요.01:05

다 같이 뭉치고 싶어서, 잘 뭉쳐지게 다시 묶어볼게요. 그리고 제가 가고 싶어요.01:13

제 플러그인으로 들어가서 헤더 모션 그래픽이나 피그마에서 특정 그룹이나 요소를 선택할 수 있어요. 이번에는 세 개의 UI 카드, 하나를 선택해 볼게요.01:21

기록용 하나랑 프로젝트 완료용 하나, 모두 하나의 그룹 안에 묶어서 UI 카드 그룹이라고 부르겠습니다. 자, 이제 시작하겠습니다.01:33

이거 이제 이런 요소들 다 복사하기 시작할 거고, 프롬프트 상자를 띄워주고, 아마 이런 식으로 질문할 거예요. '커스텀 프롬프트를 원하세요?' 이런 식으로요.01:49

나중에 깜짝 놀라게 하거나 애니메이션으로 움직여도 괜찮아요. 지금은 놀라고 싶지 않거든요, 튜토리얼 녹화 중이니까요. 그래서 커스텀 프롬프트를 한번 해볼게요, 커스텀 프롬프트로요.01:59

여기 좀 자세하게 프롬프트를 넣고 싶지만, 너무 자세하게는 안 되겠어. 그래서 내가 이 세 개의 카드들을 애니메이션 시키라고 알려주고 싶어.02:14

만약 카드들이 하나씩 순서대로 나타났다 사라진다면, 카드들이 해야 할 일은...02:21

카드 한 장씩, 한 번에 하나씩만 보여줘야 해.02:37

카드들이 나타났다 사라지고, 만나고, 느껴지고, 프리미엄, 부드럽고 우아한 느낌을 선사합니다.02:46

우리가 피하고 싶은 것들은 무엇인가요?02:58

너무 튀거나 지터링처럼 보이는 애니메이션은 피해주세요.03:04

그리고 아마도 부드러운 이징 효과와 블러 효과를 적용해서 말씀드릴 수도 있을 것 같아요.03:11

각 UI 카드들이 나타날 때 애니메이션 효과에 맞춰 카드 안의 요소들이 엇갈리게 배치되도록 하겠습니다.03:26

자, 이제 임포트할 건데, 피그마에서 가져오고, 그다음에 실제로 애니메이션을 시작하게 될 거고, 또 우리에게… 우리에게 제공해 줄 거예요.03:43

왼쪽에 채팅창이 있고, 이제 로딩을 시작하는 것 같아요.03:59

마음에 드네요. 보시다시피 몇 가지는 틀렸지만, 많은 부분은 잘 맞췄어요. 아주 흥미롭네요.04:16

좋아요. 자, 이제 이걸 고치기 시작해 봅시다.04:32

첫 번째 결과가 벌써 꽤 괜찮은데요. 부드러운 인아웃 애니메이션도 있고, 부드러운 인아웃 애니메이션도 있어요.04:38

이 요소들 중 몇몇은 좀 이상하게 보일 수도 있어요. 하지만 좋은 점은, 채팅창 자체를 건드리지 않고 바로 레이어 패널로 들어갈 수 있다는 거죠.04:49

수동으로 이것저것 조절해봐야겠네요. 자, 그럼 제 원래 차 디자인이 어떻게 생겼나 한번 볼까요?05:03

이런 느낌이 드는군요, 그래서 대체로 템포가 괜찮은 것 같아요. 자.05:14

여기 아래에 이 컨테이너가 있는데, 괜찮아요. 이거 조금 위로 움직일 수도 있고, 이 컨테이너를 여기 아래로 내려갈 수도 있어요.05:34

조금만 그것도요.05:48

이게 좋은 점은 제가 원하는 방식으로 특정 요소를 그냥 제어할 수 있다는 거예요, 어떤 방식으로든 프롬프트로 다시 돌아가지 않고도요.05:53

알겠습니다, 지금은 괜찮네요.06:08

헤더 부분이 조금씩 빠진 것 같아요. QR 코드를 포함해서요.06:14

네, 그리고 이 것들을 아마 여기서 내보내야 할 것 같아요.06:22

제가 할 일은 이걸 가져다가 SVG 형식으로 내보내는 거예요. 그리고 여기 들어가서 실제로 들어가서...06:28

내 로고에 넣고 이미지 교체 및 가져오기 해주세요.06:38

그런데, 이미 여기로 가져온 상태거든요. 파일 선택하실 수도 있고, 이 SVG 파일, 바로 이거예요.06:44

조금만 확대해 볼게요.06:56

그리고 나서 QR 코드 부분은 이걸 SVG 파일로 내보내서 여기에서 불러올 수도 있어요.07:01

그리고 나서 QR 코드 안으로 들어가서 이 부분을 SVG 형식의 QR 코드를 업로드하여 대체해주세요.07:11

SVG라서 벡터 그래픽으로 불러와지니까 픽셀화도 안 되고 괜찮아졌네. 자, 이제 괜찮아졌는지 한번 볼까요.07:19

정말 멋져 보이나요?07:33

처음 시도치고 정말 괜찮아 보이네요. 엄청 놀랍네요, 음. 좋아요, 좋아요. 자, 그럼 이제 편집을 좀 해볼게요. 가장 먼저 수정하고 싶은 게 하나 있어요.07:37

여기 아이콘이 조금 엉망인 것 같아요. 바로 점과 프롬프트로 넘어가볼게요.07:54

이 부분으로 들어가서 이 선 그래프 아이콘으로 바꿔줄 수 있나요?08:02

오른쪽 위를 가리키는 화살표를 눌러주세요.08:15

모든 변경 사항을 제출해 주세요.08:29

네, 여기 수정사항을 적용했어요. 이제 이걸 업로드해 볼까요. 좋아요.08:32

가끔은 수동으로 편집해야 할 때가 있는데, 이 편집 사항들을 먼저 적용한 다음에야 실제로 클릭하고 프롬프트를 낼 수 있어요.08:39

그게 지금 사람들이 그렇게 부르고 있는데, 이름 정말 멋지다고 생각해요. 하지만 이 편집 이후로 더 흥미로운 일들이 많이 기다리고 있어요.08:46

자, 한번 볼까요? 아이콘이 제대로 수정되었는지 확인해 봅시다.08:54

됐어요. AI가 아이콘을 만들어주면 좋겠지만, 피그마에서 가져올 수 있는 더 좋은 아이콘이 분명히 있을 거예요. 자, 이제 다른 것도 해볼까요.09:07

다른 건 여기 있는데, 제가 이거를 짚고 프롬프트를 넣어야 해요.09:22

그리고 프롬프트, 이걸 선택하고, 그리고 제가 할 수 있는 말은, 이 부분을 애니메이션으로 채워야 한다는 거예요.09:34

녹색 막대를 65퍼센트까지 채워서요. 이 애니메이션에 조금 방향을 잡아줄게요. 이 애니메이션은...09:47

시작하려면 카드 애니메이션이 시작될 때부터 시작해야 합니다.10:03

전체 카드가 애니메이션 효과로 나타나는 동안10:14

숫자가 위로 움직이게 만들어 주세요.10:22

하지만 아마 '상승 애니메이션'이 맞는 표현일 수도 있어요. 아니면 지금 표현이 잘못된 걸 수도 있고요. 이 숫자를 0%에서 65%로 바꿔주세요.10:36

퍼센트니까, 1%씩 증가하는 거죠. 좀 더 맥락을 덧붙이면, 제로에서 시작해서 1로 가는 거죠.10:49

하나, 둘, 그리고 65%까지 쭉 올라갔다가, 이걸 하고, 한번 해보자.11:00

모든 변경 사항을 제출하세요. 만약 After Effects에서 그걸 해야 한다면, 복잡한 코드를 사용해야 할 거예요.11:17

사실은 특정 요소를 움직이거나 크기나 위치를 조절하는 애니메이션처럼 제어하는 것이 아니라, 단순히 숫자를 세는 컴포넌트를 만드는 겁니다.11:28

실제로 이 텍스트 상자 안의 내용을 움직이고 있는 상태예요.11:40

애프터 이펙트에서 이 작업을 한다면 코드를 사용해야 하는데, 지금 헤더 테스트를 위해 코드를 어떻게 활용하는지 살펴보겠습니다.11:45

좋아요, 이제 로딩 중이에요. 한번 해볼까요? 바로 맞출 수도 있겠네요.12:01

꽤 놀랍네요, 그렇죠?12:09

보시다시피 숫자들이 하나하나 올라가고 있어요. 인공지능을 활용하기에 정말 적합한 사례예요. 제가 말씀드리기 좀 어렵겠지만, 얼마나 훌륭한지 아시겠죠?12:19

우리가 특정 픽셀을 움직이는 게 아니라, 실제로 특정 카드에 대한 개별 텍스트를 조작하고 있어요. 그리고 최종 결과가 정말 매혹적이고, 너무 멋있어 보이네요.12:33

그리고 왼쪽에는... 헤라가 저에게 좋은 편집을 했다고 말해주고 있으니, 읽을 때마다 제가 좀 더 자신감이 생기는 것 같아요.12:48

와, 우리 꽤 괜찮은 편집을 했나 봐요, 여러분. 좋아요. 이제 실제로 내보내야 할 것 같아요. 왜냐하면 이걸 소셜 미디어, X에 올리거든요.13:00

다양한 형식으로 내보낼 수 있어요. 저는 MP4로 내보낼 거고, 60프레임으로 내보낼 수도 있죠. 보통 여기 FPS는 최종 결과물, 즉 최종 영상이 얼마나 부드럽게 보이는지를 의미해요.13:16

60 프레임으로 내보낼게요.13:26

투명 배경은 안 하고, 이 특정 배경을 사용할 거예요.13:28

그리고 4K로 내보내도록 해봐요. 내보내는 데 시간이 좀 걸리겠지만, 내보내고 있는 영상에서는 잘 돌아가고 있어요.13:33

저도 여기서 실제로 하고 싶은 일이 하나 있는데, 바로 이걸 새로운 프로젝트에 복사해서 뭔가 시도해 보려고 해요.13:41

보통 특정 현재 동작을 기반으로 새로운 동작을 만들고 싶을 때요.13:51

모션 디자인 파일인데, 아시다시피 화면 비율을 다르게 만들려고 하면 사실 엄청 어렵습니다.14:03

인스타그램용 네모 모양으로 한번 해보죠. 보시는 것처럼, 특정 화면 비율에 맞춰서 알아서 변환해주는 걸 확인할 수 있습니다.14:10

그리고 이걸 재수출할 수도 있습니다. 세로로 배치했을 때 어떻게 보이는지 한번 살펴봅시다.14:24

알 수 있듯이, 카드가 딱 맞도록 조정해주는 게 정말 놀랍네요. 이해하는 방식이 대단한 것 같아요.14:39

이 프레임들을 어떻게 배치해야 하는지, 모서리로부터 얼마나 떨어져야 하는지, 그리고 패딩은 어떻게 조절해야 하는지 아시죠? 이걸 실시간으로 조작하면서, 이런 다양한 포맷으로 내보낼 수 있습니다.14:51

와, 동시에 여러 포맷으로 만들 수 있다니 정말 놀라운 도구인데요! 여러분, 꼭 한번 사용해 보셔야 해요. 좋아요, 자, 그럼 워크플로우 전체를 보여드릴게요. 피그마 디자인부터 완성된 애니메이션까지, 딱 10분 안에 만들 수 있다니 정말 굉장하죠! 제가 항상 궁금한 게 있는데, 이거 한번 물어볼게요.15:04

이 도구는 대체로 누구를 위한 걸까요? 저는 특히 훌륭한 퀄리티의 소셜 미디어 콘텐츠를 빠르고 쉽게 만들고 싶어하는 창업가나 마케터들에게 큰 도움이 될 거라고 생각해요.15:18

모션 디자이너를 고용하지 않아도 충분히 활용할 수 있고, UI 애니메이션을 만들고 싶거나 특정 제품 기능을 보여주고 싶어하는 디자이너들에게도 좋습니다.15:30

그리고 피그마 디자인을 그대로 불러와서 AI한테 애니메이션을 해달라고 요청할 수도 있는데, 이게 고급 모션 디자이너 분들이 다양한 시도를 해보는데도 정말 유용해요.15:44

특정 프레임을 애니메이션 처리하는 다양한 방법이나, 기존 워크플로우에 추가하여 특정 장면이나 영상의 특정 부분을 애니메이션 처리하는 데 사용할 수 있는 도구로 보이네요, 네, 네.15:55

특정 용도로는 사용될 수 있지만, 세밀한 조정이나 매우 정확한 키프레임이 필요하다면 현재 이 도구가 적합하지 않을 수도 있습니다.16:07

다른 부분에 있어서는 이 도구가 정말 꽤 괜찮다고 생각하고, 꼭 한번 사용해 보셨으면 좋겠어요. 지금 바로 사용해보고 싶으시다면, 설명란에 링크가 있는데, 거기에 들어가시면 25% 할인된 가격으로 이용하실 수 있습니다.16:20

그리고 피그마 파일이나 헤어 파일, 또는 영상 제작에 사용한 다른 파일들에 접근하고 싶으시다면, effect.community에 가입하셔도 좋습니다. 현재는 무료인데, 영원히 무료는 아니니까요. 곧 유료로 변경될 예정입니다. 링크는 설명란에 있습니다.16:35

effect.design으로 가시면 거기서 커뮤니티에 참여하실 수 있습니다. 자, 이것으로 오늘 영상은 마치겠습니다. 영상이 도움이 되셨다면 좋아요와 구독 부탁드리고요. 음, 그리고 유튜브에서 추천하는 다음 영상은 이게 아니면 다음 영상에서 만나요.16:50