Habit Hustle - UI 애니메이션 제작 과정

Habit Hustle: The Creative Process Behind a UI Animation

 

안녕하세요! 저는 스톡홀름에 사는 비주얼 디자이너 마이클이에요. 미국 중서부에서 자랐고, 광고 일을 하다가 지금은 인터랙티브 프로젝트를 하고 있답니다. 여가 시간에는 AfterEffects랑 Blender로 프로토타입을 만들면서 새로운 스킬을 연습하는 게 취미예요. 이번에는 보석에서 영감을 받아서 애니메이션을 만들어봤어요.

 

 

사용한 툴

• Blender - 3D 모션과 비주얼 작업
• Figma - 레이아웃과 UI 디자인
• AfterEffects - 모션 작업과 3D 애니메이션 연결
• AEUX - Figma 파일을 AE로 변환하는 플러그인
• Motion 4 - 애니메이션 작업을 더 빠르게 해주는 스크립트 모음
• Flow  - 이징 커브 편집을 쉽게 도와주는 플러그인

 

컨셉과 아이디어

이번 프로젝트는 보석을 주된 비주얼 요소로 사용해보기로 했어요. Blender에서 보석 소재를 만들고, Figma에서 레이아웃을 잡아봤어요. 보석들은 마치 성취를 위한 작은 보상처럼 느껴졌고, 주어진 목표를 달성할 때마다 보석을 얻는다는 컨셉으로 제작하기로 마음 먹었죠.

보석이나 유리 소재는 설정이 복잡해서 항상 설정 방법을 까먹는데, blenderbitesize의 튜토리얼을 참고해 기본적인 재료를 만들었어요.

 

 

 

이게 최종 쉐이더 셋업인데요, 유리 관련 튜토리얼을 보면 대부분 이 결과물이 나오죠. Blender의 기본 Glass BSDF도 괜찮지만, 보석이나 프리즘에서 보이는 색수차 효과를 내기 위해서는 추가적인 노드 레이어가 필요해요.

 

 

이 셋업의 장점은 실제 보석의 굴절률(IOR)과 분산 특성을 찾아 그대로 적용할 수 있어서 장면에 사실감을 더할 수 있다는 거예요.

 

 

애니메이션 과정

Blender와 AfterEffects를 항상 함께 사용하지만, 둘을 동기화하는 것이 쉽지 않아요. Cinema4D를 사용한다면 AfterEffects와 더 쉽게 연동할 수 있지만, Blender는 무료니까 저는 항상 이걸 사용해요.

프로젝트마다 애니메이션 워크플로가 조금씩 다를 수 있지만, 특히 이번 스크롤 애니메이션처럼 두 프로그램 간 이징 커브를 맞추는 작업이 가장 어려워요. UI가 3D를 굴절시키거나 커서가 3D와 상호작용하는 경우(예: Dribbble 포스트에서처럼)에는 더 까다로워지죠. 이번 보석 애니메이션에서는 큰 스크롤 동작을 원했기 때문에 배경 굴절은 생략했어요.

 

 

1. Figma에서 AfterEffects로 레이아웃 내보내기

Figma와 Adobe 프로그램은 잘 호환되지 않지만, AEUX 플러그인은 그나마 과정을 단순화해줘요. 다만, 여전히 Figma와 AfterEffects 모두에서 상당한 정리 작업이 필요해요. 완벽하진 않지만 시간을 많이 절약할 수 있습니다.

 

시행착오 끝에 배운 몇 가지 팁을 공유할게요:

• 사용하지 않는 요소들을 프레임으로 묶기 – AfterEffects에서 작업할 레이어가 적을수록 애니메이션 제작이 더 수월해져요.
• 텍스트 정리 – 텍스트는 항상 정렬이 엉망이 되기 쉬워요. 5~10px 정도 높게 배치되는 경우가 많아서 수동으로 조정하거나, 텍스트 레이어 이름 앞에 별표(*)를 넣어 AEUX가 텍스트 레이어를 래스터화하도록 할 수 있어요.
• 배경 색상 자동 전송 안 됨 – AfterEffects에서 새 모양을 만들거나 Figma에서 배경 직사각형을 만들어야 해요.
• 벡터 형태는 다소 불안정 – 복잡한 도형은 내보내기 전에 Figma에서 Flatten Selection(Cmd + E)을 사용해 미리 합치는 것이 좋아요.

 

 

 

2. AfterEffects에서 애니메이션 제작

애니메이션의 타이밍을 먼저 설정하는 것이 중요해요. Blender의 Cycles 렌더링 시간이 길고, 유리 쉐이더를 사용할 때는 더 길어지기 때문에, AfterEffects에서 타이밍을 먼저 잡아두면 나중에 작업이 더 수월해져요. 이 과정에서는 몇 가지 플러그인을 사용하면 더 편리해요. 제가 주로 사용하는 플러그인은 Motion 4 (Mt. MoGraph)와 Flow입니다.

 

 

Motion 4 (Mt. MoGraph)

Flow

 

Motion 4는 여러 가지 AE 작업을 자동화할 수 있는 기능이 많아요. 예를 들어 스태거(Stagger)를 사용하면 레이어 간격을 조절해 시간차 효과를 줄 수 있어요. Flow는 이징 커브를 쉽게 편집할 수 있도록 도와주고, 이징 값을 코드로 변환할 수도 있어 개발자에게 전달하기도 좋아요.

 

 

 

3. AfterEffects에서 대략적인 애니메이션을 Blender로 내보내기

AfterEffects에서 내보낸 영상을 Blender의 평면에 텍스처로 입혀, 타이밍을 맞추기 위한 참조로 사용해요. 이 단계에서는 애니메이션이 어떻게 진행될지 대략적인 느낌만 얻으면 됩니다.

 

 

 

4. Blender에서 애니메이션 제작

Blender에서의 애니메이션 작업은 여전히 개선 중이에요. Blender의 좋은 점은 거의 모든 속성을 애니메이션화할 수 있다는 것인데, 나쁜 점은 애니메이션 전체를 한눈에 보기 어렵다는 것이죠.

하지만 시작하기는 비교적 간단해요. 타임라인에서 애니메이션 시작 프레임을 설정하고, 객체를 선택한 후, 원하는 속성을 조정하고 키프레임을 설정하면 됩니다.

 

 

 

 

5. Blender에서 테스트 렌더링 후 AfterEffects로 가져오기

최종 렌더링 전에 Workbench 렌더링 엔진을 사용해 애니메이션을 테스트합니다. 여기서 타이밍을 더 맞추기 위해 AfterEffects에서 조정합니다.

 

 

 

6. 애니메이션 루프 및 세부사항 마무리

애니메이션의 루프를 만들어 최종 세부 작업을 시작합니다. 모든 요소가 조화를 이루는 시점에서 세부 사항을 조정하는 것이 훨씬 쉬워지기 때문에, 이 단계에서 마무리합니다.

 

 

 

7. Cycles로 Blender에서 최종 렌더링

마지막 렌더링을 시작합니다. 유리 재질 때문에 렌더링 시간이 길지만, 다행히 첫 렌더링이 만족스러우면 AfterEffects에서 약간의 조정으로 마무리할 수 있어요.

 

 

최종 결과

 

최종 애니메이션이 완성됩니다! 클라이언트 프로젝트에서는 이렇게 완성도 높은 애니메이션을 만들 기회가 많지 않지만, 이런 프로토타입을 통해 새로운 기술을 연습할 수 있어서 재밌어요. 감사합니다!