상세페이지 GIF 만드는 법: 애니메이션 모드로 저장까지
안녕하세요, 상세뚝딱팀입니다. 상세페이지에 움직이는 요소를 하나 넣으면 시선이 멈추는 구간이 생깁니다. 제품이 돌아가는 모습, 문구가 차례로 나타나는 연출, 할인 안내 배너의 깜빡임처럼 작은 움직임만으로도 정지된 이미지와는 다른 느낌을 줄 수 있습니다. 하지만 막상 만들려고 하면 "어디에 넣어야 하지?", "GIF로 저장해야 하나, 영상으로 저장해야 하나?", "용량은 어떻게 줄이지?" 같은 질문이 따라옵니다. 이 글에서는 상세페이지 GIF, 즉 움직이는 요소를 어디에 쓰면 좋은지, 상세뚝딱 에디터의 애니메이션 모드로 어떻게 만드는지, 저장 형식은 무엇을 기준으로 고르는지를 화면과 함께 정리했습니다.
1. 움직임, 어디에 쓰면 좋을까
움직임은 많이 넣을수록 좋은 것이 아니라 필요한 곳에만 넣을수록 효과가 큽니다. 아래 표처럼 움직임이 도움이 되는 곳과 정지 이미지가 나은 곳을 구분해 보세요.
- 첫 화면의 핵심 혜택을 강조하고 싶을 때
- 사용 방법을 순서대로 보여주고 싶을 때
- 이벤트·쿠폰 배너에서 시선을 끌고 싶을 때
- 제품의 구성이나 변화 과정을 보여주고 싶을 때
반대로 사양표, 배송·교환 안내처럼 정확히 읽어야 하는 구간에는 움직임이 오히려 방해가 될 수 있습니다. 한 페이지에 움직임은 한두 곳으로 제한하는 것을 권합니다.
2. 상세뚝딱에서 움직임 만들기
상세뚝딱 에디터 오른쪽 위에는 애니메이션 모드 버튼이 있습니다. 여기로 들어가면 왼쪽에 애니메이션 패널이 열리고, 화면 아래에는 시간 흐름을 보여주는 타임라인이 나타납니다. 아래는 애니메이션 모드로 들어간 에디터 화면입니다.
왼쪽 패널의 AI 애니메이션 적용 버튼을 누르면 선택한 페이지에 모션을 적용할 수 있고, 요소를 선택하면 적용된 모션을 미리 볼 수 있습니다. 화면 하단의 타임라인에는 0초부터 12초까지 눈금이 표시되어 시간 흐름에 따라 어떤 요소가 움직이는지 확인할 수 있습니다.
타임라인을 기획할 때는
모션을 적용하기 전에 몇 초에 무엇이 나타나는지 간단히 정해 두면 훨씬 깔끔하게 만들 수 있습니다. 아래는 4초짜리 배너를 기준으로 한 구성 예시입니다.
핵심은 읽을 시간입니다. 문구가 나타나자마자 바로 사라지면 정보가 전달되지 않습니다. 가장 중요한 문구는 충분히 오래 머물도록 구성하세요.
3. 저장 형식 고르기
움직이는 결과물은 GIF, MP4, WebP 형식으로 내보낼 수 있고, 형식에 따라 FPS와 품질 옵션을 조정할 수 있습니다. 어떤 형식을 쓸지는 올리려는 곳이 지원하는 형식과 용량 제한에 따라 정합니다.
아래 표는 형식별로 어떤 경우에 맞는지를 정리한 가이드입니다. 마켓과 채널마다 허용하는 형식이 다를 수 있으므로, 등록 화면의 안내를 먼저 확인하는 것이 안전합니다.
용량을 줄이는 방법
움직이는 파일은 정지 이미지보다 용량이 커지기 쉽습니다. 용량이 문제가 되면 FPS를 낮추거나 품질 옵션을 조정하고, 움직임의 길이를 줄여 보세요. 길이가 짧고 움직임이 단순할수록 용량은 작아지는 경향이 있습니다. 처음에는 기본 설정으로 저장해 보고, 업로드가 막히거나 로딩이 느려질 때 조정하는 순서를 추천합니다.
4. 만들 때 지킬 것
- 움직임은 짧고 단순하게: 반복이 지나치면 피로감을 줍니다.
- 글자는 충분히 오래 보이게: 읽을 시간이 없으면 정보가 전달되지 않습니다.
- 파일 용량 확인: FPS와 품질을 낮추면 용량을 줄일 수 있습니다.
- 모바일에서 확인: 대부분의 고객이 모바일로 보기 때문에 모바일 화면에서 재생 상태를 확인합니다.
- 정보는 정지 화면에서도 전달되게: 움직임이 재생되지 않는 환경에서도 핵심 문구가 읽히도록 구성하세요.
5. 작업 순서 요약
- 템플릿으로 정지 이미지를 먼저 완성합니다.
- 애니메이션 모드에서 모션을 적용하고 미리보기로 확인합니다.
- 형식(GIF/MP4/WebP)과 FPS·품질을 선택해서 저장합니다.
- 마켓·채널에 올려 재생 상태를 확인합니다.
- 반응을 보고 움직임의 길이와 위치를 조정합니다.
마치며
움직임은 장식이 아니라 시선을 안내하는 도구입니다. 지금 상세페이지를 보면서 이렇게 물어보세요. 이 움직임은 고객이 어떤 정보를 더 쉽게 알게 해 줄까? 움직임이 없어도 핵심 메시지는 전달될까? 올리려는 곳은 어떤 형식을 지원할까? 질문에 답할 수 있는 곳 한두 곳에만 움직임을 더해도 상세페이지의 인상은 충분히 달라집니다.
