스마트스토어 상세페이지용 GIF 만들기
상세페이지에 움직이는 이미지를 넣으면 설명이 훨씬 빨리 전달됩니다. 다만 잘못 만들면 페이지가 무거워져서 오히려 손해입니다. 어떤 값으로 만들어야 하는지 정리했습니다.
최종 수정
- 가로 폭
- 860px. 모바일 상세페이지가 실제로 보여 주는 폭에 맞춘 값입니다.
- fps
- 12. 제품 동작을 보여 주기에 충분하고, 15~24 보다 용량이 확실히 가볍습니다.
- 목표 용량
- 3MB 이하. 모바일에서 기다림 없이 뜨는 선입니다.
- 길이
- 2~4초. 동작 하나만 담습니다.
폭을 860px 로 잡는 이유
상세페이지 이미지는 표시되는 폭보다 크게 올려도 화질이 좋아지지 않습니다. 브라우저가 줄여서 그릴 뿐이고, 늘어난 건 용량과 로딩 시간뿐입니다. 1600px 짜리를 860px 자리에 넣으면 용량은 서너 배인데 보이는 건 똑같습니다.
반대로 너무 작게 만들면 큰 화면에서 뿌옇게 늘어납니다. 보여 줄 자리의 실제 폭에 맞추는 것 이 정답이고, 모바일 상세페이지 기준으로 860px 가 무난합니다.
용량이 왜 중요한가
상세페이지는 이미지를 여러 장 이어 붙여 만듭니다. 여기에 10MB 짜리 GIF 를 두세 개 넣으면 모바일 데이터로 접속한 구매자는 스크롤할 때마다 흰 화면을 보게 됩니다. 설명을 잘하려고 넣은 것이 이탈 원인이 되는 셈입니다.
GIF 는 원래 무거운 형식입니다. 같은 5초 영상이 MP4 로는 수백 KB 인데 GIF 로는 몇 MB 가 됩니다. 프레임마다 그림 한 장을 통째로 들고 있고, 색도 256 개까지밖에 못 쓰기 때문입니다. 그래서 "짧게, 딱 필요한 만큼" 이 GIF 를 잘 쓰는 유일한 방법입니다.
만드는 순서
- 1
보여 줄 동작 찍기
삼각대나 고정된 자리에서 찍습니다. 화면 전체가 흔들리면 용량이 급격히 커집니다. 손으로 든 영상과 고정된 영상은 결과 용량이 몇 배씩 차이 납니다.
- 2
프리셋 고르고 구간 자르기
네이버 스마트스토어 프리셋을 누르면 860px · 12fps · 3MB 가 맞춰집니다. 구간 슬라이더로 동작 하나만 남깁니다.
- 3
만들고 올리기
자동 맞춤이 3MB 안에 들어오도록 알아서 조절합니다. 내려받아 상세페이지 편집기에 이미지처럼 올리면 됩니다.
자주 겪는 문제
용량이 3MB 아래로 안 내려갑니다.
구간을 더 줄이는 것이 가장 효과가 큽니다. 그다음이 가로 폭입니다. 움직임이 많은 영상(화면 전환, 흔들림, 사람이 많이 지나감)은 GIF 로 담기 근본적으로 어렵습니다.
색이 뭉개지고 얼룩덜룩합니다.
GIF 는 256색이 한계 입니다. 용량을 맞추려고 색을 줄이면 그라데이션이나 살색처럼 부드럽게 변하는 부분에서 티가 납니다. 옵션에서 색상 수 를 올리고 손실 압축 을 낮춘 뒤, 디더링을 Floyd–Steinberg 로 바꿔 보세요. 대신 용량은 늘어납니다.
자동 맞춤을 켜면 화질이 나빠집니다.
목표 용량을 맞추려고 값을 단계적으로 낮추기 때문입니다. 화질을 지키고 싶으면 목표를 올리는 게 아니라 구간을 줄이세요. 길이가 짧아지면 같은 용량 안에서 화질에 쓸 여유가 늘어납니다.
이미지 여러 장을 이어 붙이고 싶습니다.
위쪽 이미지 시퀀스 탭을 쓰면 됩니다. PNG · JPG · WebP 를 파일 이름 순서 로 정렬해 이어 붙입니다. 1.png, 2.png, 10.png 처럼 자리수가 다르면 01 · 02 · 10 으로 맞춰 주세요.
소리도 같이 넣을 수 있나요?
GIF 는 소리를 담지 못합니다. 형식 자체의 한계라 어떤 도구로도 안 됩니다. 소리가 필요하면 영상 그대로 올려야 합니다.
상세페이지 밖이라면 WebM 도 보세요
자체 쇼핑몰이나 블로그처럼 HTML 을 직접 쓸 수 있는 곳 이라면 WebM 이 같은 화질에서 용량이 1/5 ~ 1/8 입니다. 다만 스마트스토어 편집기처럼 이미지만 받는 곳에는 올릴 수 없습니다.