피그마 애니메이션, 개발자는 어떻게 코드로 구현할까?

 

"디자이너님, 이거 어떻게 움직여요?" 피그마 프로토타입만 보고 막막했던 경험 있으시죠? 단순 CSS 전환부터 복잡한 Lottie 적용까지, 개발자가 디자인 속 애니메이션을 정확하게 코드로 옮기는 3가지 전략을 소개합니다. 🚀

피그마의 'Smart Animate' 기능 덕분에 디자이너들은 아주 화려한 프로토타입을 만들 수 있게 되었습니다. 하지만 이 화려함이 개발자에게는 종종 숙제로 다가옵니다. 정적인 UI 코드는 피그마가 어느 정도 알려주지만, 동적인 애니메이션 값(Timing, Easing)은 명확하게 코드화되어 보이지 않기 때문이죠. 😅

"그냥 느낌대로 해주세요"라는 요청을 피하고, 디자이너의 의도를 100% 구현하려면 어떻게 해야 할까요? 오늘은 피그마로 넘어온 애니메이션 요소를 분석하고, 이를 CSS, JS 라이브러리, 또는 Lottie로 변환하는 실무적인 접근법을 정리해 드립니다.

 

1. 단순 인터랙션: Inspect 패널과 CSS 🎨

버튼 호버(Hover), 모달 팝업, 토글 스위치 같은 단순한 움직임은 피그마의 Dev Mode(개발자 모드)에서 힌트를 얻을 수 있습니다.

💡 무엇을 확인해야 할까요?
프로토타입 탭에서 화살표(Interaction)를 클릭해보세요.

• Duration (지속 시간): 300ms, 0.5s 등 시간 값
• Easing (가속도): Ease-in, Ease-out, Linear 등
• Property (속성): Opacity, Scale, Position 등 변화하는 값

특히 Easing 곡선(Bezier Curve)이 중요한데, 디자이너가 커스텀 곡선을 썼다면 해당 값을 요청하거나 CSS로 유사하게 구현해야 합니다.

/* Figma: Smart Animate, 300ms, Ease-out */
.button {
  transition: all 0.3s ease-out;
  /* 만약 커스텀 베지어 곡선이라면? */
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

 

2. 복잡한 모션: 라이브러리 활용 (GSAP, Framer Motion) 🛠️

스크롤에 따라 요소가 움직이거나, 순차적으로 나타나는(Stagger) 복잡한 애니메이션은 CSS만으로는 한계가 있습니다. 피그마에서 보여주는 'Smart Animate'는 결과물만 보여줄 뿐, 중간 과정을 코드로 뱉어주지 않기 때문입니다.

상황	추천 도구/라이브러리
React 프로젝트	Framer Motion (직관적이고 강력한 리액트 전용 라이브러리)
화려한 인터랙티브 웹	GSAP (GreenSock) (퍼포먼스가 뛰어나고 타임라인 제어가 강력함)
3D 효과	Three.js / React Three Fiber

이 단계에서는 디자이너와 협업이 필수입니다. "이 움직임은 구현 공수가 N시간 듭니다"라고 이야기하고, 모션 가이드(Motion Guide) 문서를 별도로 요청하는 것이 좋습니다.

 

3. 일러스트/캐릭터 애니메이션: Lottie (JSON) 추출 🎬

코드로 구현하기엔 너무 복잡한 그래픽(예: 손을 흔드는 캐릭터, 복잡한 로딩 스피너)은 개발자가 CSS로 그리는 영역이 아닙니다. 이때는 Lottie(로티) 파일을 요청해야 합니다.

📝 Lottie 전달 프로세스

• 디자이너 작업: After Effects에서 작업 후 'Bodymovin' 플러그인으로 JSON 추출 (또는 피그마 Lottie 플러그인 활용)
• 개발자 수령: .json 파일 수령
• 구현: lottie-web 또는 react-lottie 라이브러리를 사용해 재생. (GIF보다 용량이 훨씬 작고 해상도 저하가 없습니다!)

🤔 어떤 방식으로 구현해야 할까요?

상황에 맞는 체크박스를 선택해보세요.

단순한 색상 변화, 위치 이동, 크기 조절이다. 스크롤에 따라 움직이거나, 요소가 순서대로 등장한다. 캐릭터가 춤을 추거나 복잡한 아이콘 모션이다.

 

🚀

피그마 애니메이션 핸드오프 요약

1. 단순형: CSS Transition 사용 (Inspect 탭 확인)

2. 복합형: GSAP / Framer Motion 등 라이브러리 활용

3. 그래픽: Lottie (JSON) 파일 요청

4. 소통: 모션 가이드 문서나 레퍼런스 영상 요청하기

"느낌적인 느낌" 말고 "정확한 수치"로 소통하세요!

자주 묻는 질문 ❓

Q: 피그마의 Smart Animate 코드를 바로 복사할 순 없나요?

A: 아쉽게도 불가능합니다. 피그마는 시각적 결과물만 보여줄 뿐, 실제 웹 코드로 변환해 주지는 않습니다. 개발자가 로직을 다시 짜야 합니다.

Q: GIF를 쓰면 안 되나요?

A: GIF는 용량이 크고, 확대하면 깨지며, 투명 배경 처리가 깔끔하지 않습니다. 웹 퍼포먼스와 퀄리티를 위해 Lottie(JSON)나 APNG, WebM 사용을 권장합니다.

Q: 디자이너에게 어떤 정보를 요청해야 하나요?

A: "정확한 지속 시간(Duration)", "가속도 곡선(Bezier Curve 수치)", "트리거 조건(클릭 시인지, 스크롤 시인지)"을 명확히 물어봐야 합니다.

애니메이션은 사용자 경험(UX)을 풍부하게 만드는 핵심 요소지만, 개발자와 디자이너 간의 가장 큰 소통 비용이 발생하는 지점이기도 합니다. 피그마라는 공통의 언어를 통해 서로의 기술적 한계와 가능성을 이해한다면, 훨씬 더 멋진 결과물을 만들 수 있을 것입니다. 👨‍💻🤝👩‍🎨