상세페이지 GIF 만들기, 피그마에서 그래프가 쑥 올라오게

짠~ 피그마에서 움직이는 그래프를 만들어봤어요.

예전에는 상세페이지에 넣을 GIF를 애프터 이펙트로 만들었는데요. 이번에는 아스트라와 피그마로 그래프를 만들고, 움직임까지 넣어봤어요.

위 그래프처럼 막대가 쑥 올라오는 GIF, 같이 만들어볼게요 :)

01. 먼저, 멈춰 있는 그래프부터 만들었어요

먼저 그래프의 완성된 모습부터 만들었어요.

흰 배경에 ‘사용 전’은 회색, ‘사용 후’는 초록색으로 배치했어요. 제목은 크게, 설명은 짧게 넣었고요.

크기는 860×1080, 제목은 페이퍼로지 8 ExtraBold를 썼어요.

아스트라에 피그마 파일 링크를 붙이고 이렇게 요청해 주세요.

이 피그마 파일에 상세페이지용 비교 그래프를 만들어 줘. 크기는 860×1080, 흰 배경에 초록색 #49624F를 써 줘. 제목은 ‘사용 전·후, 차이가 보여요.’로 넣고 페이퍼로지 8 ExtraBold를 적용해 줘. 사용 전은 회색 막대 20%, 사용 후는 초록색 막대 60%로 표시해 줘. 두 막대의 바닥은 같은 선에 맞추고, 높이는 수치에 비례하게 만들어 줘. 그래프 위에는 ‘3배’, 아래에는 ‘모션 제작을 위한 가상 데이터예요.’를 넣어 줘. 글자와 막대는 각각 수정할 수 있는 레이어로 만들고, 기존 작업은 그대로 남겨 줘.

아스트라와 피그마를 연결하는 방법은 지난 글에 있어요.

02. 막대가 아래에서 쑥 올라오게 했어요

이번에는 막대가 올라오고 → 숫자가 나타나고 → 마지막에 ‘3배’가 보이는 순서로 만들었어요. 제목과 기준선은 그대로 두고, 비교할 부분에만 움직임을 넣었어요.

이때 막대 밑부분은 고정하고, 높이만 늘어나게 해주세요. 막대 전체가 위로 이동하면 바닥에서 떠버리거든요.

방금 만든 그래프에 피그마 모션을 적용해 줘. 회색 막대가 먼저 올라오고, 초록색 막대가 조금 늦게 따라 올라오게 해 줘. 두 막대의 밑부분은 기준선에 고정하고, 거의 보이지 않는 높이에서 원래 높이까지 늘어나게 해 줘. 끝으로 갈수록 부드럽게 느려지게 해 줘. 각 막대가 올라온 뒤 숫자가 나타나고, 마지막에 ‘3배’ 표시가 나오게 해 줘. 완성된 모습을 잠깐 보여준 뒤 막대와 숫자가 사라지게 해서, 약 4초 길이로 반복해도 자연스럽게 만들어 줘. 제목과 배경, 기준선은 움직이지 않게 해 줘.

03. 피그마에서 움직임을 확인했어요

피그마 툴바에서 모션(Motion) 모드로 바꾸고, 아래 타임라인의 재생 버튼을 눌러보세요.

너무 빠르게 느껴진다면 “막대가 올라오는 시간을 조금 늘려 줘”라고 요청하면 돼요. 결과가 금방 사라진다면 “완성된 상태를 1초 더 보여 줘”처럼 바꿀 부분을 짚어주세요.

04. GIF로 저장했어요

저장할 때는 그래프 전체를 담은 프레임을 선택해 주세요. 이번 파일에서는 ‘01 · 상세페이지 그래프 · 4초 모션’이에요.

1. 오른쪽 패널의 내보내기에서 애니메이션을 선택해 주세요.
2. 형식을 GIF로 바꿔주세요.
3. 크기와 프레임 속도를 정하고, 계속 반복하려면 루프를 켜주세요.
4. 프레임 내보내기를 누른 뒤, 열린 결과 화면에서 다운로드를 눌러 저장해 주세요.

저는 1배 크기(860×1080), 15fps, 루프 켜기로 저장했어요. 더 부드럽게 만들고 싶다면 프레임 속도를 올려보세요.

다음 그래프에도 그대로 써먹어요

한 번 만들어두면 다음에는 프레임을 복제해서 제목, 색, 수치를 바꾸면 돼요. 막대 높이도 새 수치에 맞춰 바꿔주고요.

상세페이지에서 눈에 띄게 보여주고 싶은 그래프가 있다면, 이렇게 움직임을 넣어보세요 :)

---

참고문서: 피그마 모션 · GIF 내보내기