상세페이지 GIF, 사용법·질감·전후 장면에만 쓰고 용량 줄이기

상세페이지 GIF를 넣을지 고민 중이라면, 먼저 결론부터 말씀드립니다. GIF는 사진 한 장으로는 설명이 안 되는 장면에만 쓰세요. 구체적으로는 사용법(동작 순서), 질감(늘어나고 흐르는 느낌), 전후 장면(바뀌는 순간) 세 가지입니다.

움직임이 있다고 시선이 무조건 오래 머무는 것은 아닙니다. 아무 의미 없이 흔들리는 GIF는 오히려 페이지를 무겁게 만들고, 모바일에서 늦게 뜨면서 읽는 흐름을 끊습니다.

이 글에서는 GIF를 써야 할 세 자리, 페이지 안에서 놓을 위치와 개수, 촬영부터 변환까지의 순서, 용량을 줄이는 설정을 차례로 정리합니다. 다 읽고 나면 지금 내 상세페이지에서 어떤 사진을 GIF로 바꿀지 바로 고를 수 있습니다.

상세페이지 GIF, 어디에 써야 효과가 있나요

기준은 간단합니다. "이걸 사진으로 찍으면 고객이 상상해야 하는 부분이 남는가"를 물어보세요. 상상이 필요하면 GIF 후보이고, 사진만으로 충분하면 사진이 낫습니다.

예를 들어 수제 캔들의 용기 디자인은 사진 한 장이면 충분합니다. 반면 불을 붙였을 때 표면이 고르게 녹아드는 모습은 사진으로 보여 주기 어렵습니다. 같은 상품 안에서도 GIF가 필요한 장면과 필요 없는 장면이 나뉘는 셈입니다.

01사용법

순서가 있는 동작. 뚜껑 여닫기, 조립, 접기

02질감

만져 봐야 아는 느낌. 늘어남, 흐름, 거품, 탄성

03전후 장면

바뀌는 순간. 정리 전후, 펼치기 전후, 데우기 전후

04GIF가 필요 없는 곳

외관, 구성품, 크기표, 성분표, 배송 안내

정보를 읽어야 하는 섹션은 정지 이미지가 더 편합니다.

반대로 GIF로 만들면 손해인 곳도 있습니다. 성분표, 사이즈표, 배송·교환 안내처럼 글자를 읽어야 하는 정보는 움직이면 읽기 어렵습니다. 이런 섹션은 정지 이미지로 두세요.

사용법 GIF: 순서가 있는 동작을 한 번에 보여 주세요

사용법을 사진으로 설명하면 보통 "1번 사진, 2번 사진, 3번 사진"이 이어집니다. 고객은 사진 사이의 동작을 머릿속으로 채워 넣어야 합니다. GIF는 그 빈칸을 없애 줍니다.

예를 들어 원터치로 열리는 텀블러를 판다고 가정해 보겠습니다. "버튼을 누르면 뚜껑이 열립니다"라는 문장과 사진 세 장보다, 엄지로 버튼을 누르자 뚜껑이 튀어 오르는 2초짜리 GIF 한 개가 더 빨리 이해됩니다.

사진 3장 + 긴 설명

① 잠금 버튼을 옆으로 밉니다 ② 상단 버튼을 누릅니다 ③ 뚜껑이 열립니다 (사진 3장이 세로로 이어짐)

→

GIF 1개 + 짧은 설명

"한 손으로, 엄지 한 번." 버튼을 누르자 뚜껑이 열리는 2초 GIF, 아래에 잠금 방법 한 줄

GIF는 동작을, 글은 GIF에 안 보이는 정보(잠금 방법)를 맡습니다.

사용법 GIF는 한 개에 동작 하나만

강아지 간식을 판다면 "지퍼백을 열고, 간식을 꺼내고, 다시 닫는" 과정을 하나에 다 넣고 싶어집니다. 하지만 길어지면 용량이 커지고, 고객은 어디가 핵심인지 놓칩니다.

이럴 때는 정말 보여 줘야 할 한 동작만 고르세요. 이 상품의 강점이 "한 번에 꽉 닫히는 지퍼"라면, 손가락으로 지퍼를 쭉 밀어 닫는 장면만 담으면 됩니다.

첫 장면만 봐도 뜻이 통하게

통신이 느리거나 데이터 절약 환경에서는 GIF가 다 불러와지기 전에 첫 장면만 한동안 보일 수 있습니다. 첫 장면이 멈춰 있어도 무슨 장면인지 알 수 있게 만드세요.

텀블러라면 손이 버튼 위에 올라가 있는 장면에서 시작하는 편이 좋습니다. 빈 화면이나 흐릿한 장면에서 시작하면, 움직이기 전까지는 의미 없는 이미지로 남습니다.

질감 GIF: 만져 봐야 아는 것을 대신 보여 주세요

온라인에서 가장 전달하기 어려운 것이 촉감입니다. "부드럽다", "쫀쫀하다"는 말은 누구나 쓰기 때문에 잘 믿기지 않습니다. 질감 GIF는 그 말을 눈으로 확인시켜 주는 장치입니다.

예를 들어 발목이 조이지 않는 양말을 판다면, 양 손으로 발목 밴드를 쭉 늘렸다가 놓아 원래대로 돌아오는 장면을 보여 주세요. "신축성이 좋아요"라는 문장보다 구체적입니다.

형용사만 있는 문장

부드럽고 신축성 좋은 고급 소재로 편안한 착용감을 선사합니다.

→

GIF + 장면 설명

발목 밴드를 두 배로 늘렸다 놓는 GIF. 아래 문구: "늘렸다 놓아도 다시 제자리로. 발목에 자국이 덜 남는 밴드예요."

문장은 GIF로 본 것을 고객의 생활로 옮겨 주는 역할만 합니다.

반찬이라면 숟가락으로 떴을 때 양념이 윤기 있게 흘러내리는 장면, 수제 캔들이라면 녹은 표면이 잔잔하게 일렁이는 장면이 질감 GIF가 됩니다.

질감은 가까이, 배경은 단순하게

질감 GIF는 상품을 화면 가득 크게 담아야 효과가 있습니다. 멀리서 찍으면 늘어나는지 흐르는지 잘 보이지 않습니다.

배경은 단색에 가깝게 고르세요. GIF는 한 장면에 쓸 수 있는 색이 최대 256개라서, 복잡한 배경이나 부드러운 그러데이션은 얼룩처럼 깨져 보이기 쉽습니다. 배경이 단순하면 상품 색을 지키기에도 유리합니다.

식품의 맛을 글로 어떻게 표현할지는 식품 상세페이지 카피, 맛 표현법과 피해야 할 광고 문구에서 따로 다뤘습니다. 질감 GIF 아래에 붙일 한 줄을 쓸 때 함께 참고하세요.

전후 장면 GIF: 바뀌는 순간을 끊지 말고 이어 붙이세요

전후 비교는 보통 사진 두 장을 나란히 놓습니다. 그런데 두 사진이 정말 같은 장소, 같은 조건에서 찍힌 것인지 고객은 알 수 없습니다. 바뀌는 과정을 끊지 않고 보여 주면 그 의심이 줄어듭니다.

예를 들어 접이식 수납함을 판다고 가정하면, 납작하게 접힌 상태에서 손으로 펼쳐 박스 모양이 되는 3초짜리 장면이 그 예입니다. "접으면 2cm"라는 숫자도 이 장면 옆에 놓일 때 더 와닿습니다.

사진 두 장

• 두 장면 사이의 과정이 안 보임
• 같은 조건인지 확인하기 어려움
• 인쇄물처럼 정보만 전달됨
• 용량이 가볍고 글자 넣기 쉬움

VS

GIF 한 개

• 바뀌는 과정이 그대로 보임
• 같은 장면이 이어져 믿기 쉬움
• 걸리는 시간·힘을 짐작할 수 있음
• 용량 관리가 필요함

변화가 '얼마나 쉬운지'가 중요하면 GIF, 결과만 중요하면 사진 두 장.

전후 장면은 있는 그대로만

전후 GIF는 설득력이 큰 만큼 조심해야 합니다. 중간을 잘라 붙여 실제보다 빠르게 보이게 하거나, 결과 장면만 다른 조명으로 찍으면 과장이 됩니다.

찍은 그대로 이어지는 장면만 쓰고, 편집으로 결과를 바꾸지 마세요. 시간이 오래 걸리는 변화라면 "실제로는 약 몇 분 걸립니다"처럼 아래에 한 줄을 붙이는 편이 정직합니다. 효과·효능을 내세우는 전후 비교는 표시광고 문제로 이어질 수 있으니, 판매 채널의 최신 공지를 확인하세요.

상세페이지 GIF는 몇 개, 어디에 배치하나요

개수에 정답은 없지만, 출발점은 "세 자리 중 내 상품에 해당하는 곳마다 하나"입니다. 대부분의 상품은 2~4개면 충분합니다. 그 이상이 되면 무엇이 중요한지 흐려지고 페이지가 무거워집니다.

위치는 상세페이지 흐름에서 그 GIF가 맡을 역할로 정하세요. 섹션별 역할은 상세페이지 구성 순서 글에서, 사진 배치 순서는 상세페이지 이미지 순서 글에서 정리했습니다.

섹션	GIF 사용	이유
첫 화면	가볍다면 1개 가능	늦게 뜨면 첫인상을 해침
특징·장점	질감 GIF 추천	형용사를 장면으로 증명
사용법	사용법 GIF 추천	사진 나열보다 빨리 이해됨
전후 비교	전후 GIF 추천	과정이 보여야 믿기 쉬움
상세 정보·사이즈	쓰지 않음	글자를 읽어야 하는 구간
배송·교환 안내	쓰지 않음	움직이면 읽기 불편

GIF끼리 바로 붙이지 말고 사이에 정지 섹션을 두면 리듬이 생깁니다.

GIF 사이에는 정지 섹션을 두세요

GIF 두 개가 연달아 붙어 있으면 화면이 산만해지고, 어느 쪽을 봐야 할지 헷갈립니다. 사용법 GIF와 질감 GIF 사이에는 정지된 설명 섹션을 하나 두세요.

첫 화면에 GIF를 쓰고 싶다면 용량이 아주 가볍고, 첫 장면만으로도 상품이 무엇인지 알 수 있을 때만 쓰세요. 첫 화면에 꼭 들어가야 할 요소는 상세페이지 첫 화면 글을 참고하세요.

GIF 위치를 정하려면 결국 페이지 전체 구성이 먼저 잡혀 있어야 합니다. 어떤 섹션이 어떤 순서로 이어지고, 각 섹션에 무슨 문장이 들어가는지 정해야 "여기는 GIF, 여기는 사진"이 갈립니다.

상세페이지 GIF 만드는 법: 촬영부터 변환까지

GIF는 처음부터 GIF로 찍는 것이 아니라, 짧은 영상을 찍어 GIF로 바꾸는 방식이 가장 쉽습니다. 스마트폰으로 충분합니다.

핵심은 카메라를 고정하는 것입니다. 손으로 들고 찍으면 화면 전체가 흔들려 보기 불편하고, 바뀌는 부분이 많아져 용량도 커지는 경우가 많습니다.

1. 1
   1. 한 동작 정하기

   보여 줄 동작 하나와 시작·끝 장면을 정합니다

2. 2
   2. 고정해서 촬영

   거치대나 책 더미로 폰을 고정하고 5~10초 찍습니다

3. 3
   3. 2~4초만 자르기

   동작이 시작해 끝나는 구간만 남깁니다

4. 4
   4. 화면 자르기

   상품이 화면을 채우도록 위아래를 잘라 냅니다

5. 5
   5. GIF로 변환

   변환 앱·프로그램에서 프레임과 크기를 낮춰 저장합니다

6. 6
   6. 폰으로 확인

   실제 모바일 화면에서 속도·선명도·용량을 확인합니다

시작과 끝 장면을 비슷하게 맞추면 반복될 때 끊기는 느낌이 줄어듭니다.

자연스럽게 반복되게 찍는 요령

GIF는 계속 반복 재생됩니다. 끝 장면에서 첫 장면으로 넘어갈 때 툭 끊기면 어색해 보입니다.

양말 밴드를 늘리는 장면이라면 "놓은 상태 → 늘림 → 다시 놓은 상태"로 찍어 처음과 끝을 맞추세요. 텀블러라면 뚜껑을 열고 다시 닫는 데까지 담으면 반복이 자연스럽습니다.

글자는 GIF 밖에 두세요

GIF 안에 문구를 넣고 싶다면, 움직이지 않는 위치에 고정해서 넣으세요. 문구가 나타났다 사라지면 읽기 전에 지나가 버립니다.

더 좋은 방법은 문구를 GIF 위나 아래의 정지 이미지에 따로 넣는 것입니다. 이렇게 하면 문구를 고칠 때 GIF를 다시 만들 필요가 없고, GIF 용량도 줄어듭니다.

밝기가 번쩍이며 빠르게 바뀌는 장면은 피하세요. 보는 사람이 피로를 느끼고, 빛에 민감한 사람에게는 불편할 수 있습니다.

상세페이지 GIF 용량 줄이는 법

GIF는 사진 여러 장을 묶은 파일이라 용량이 금방 커집니다. 용량이 크면 모바일에서 늦게 뜨고, 채널에 따라 업로드 자체가 막히기도 합니다.

채널마다 이미지 한 장의 용량·크기 제한과 GIF 지원 여부가 다르고 바뀌기도 합니다. 정확한 기준은 판매 채널의 최신 공지를 확인하세요. 전체 페이지의 가로 폭과 용량 기준은 스마트스토어 상세페이지 사이즈 글에 정리해 두었습니다.

용량을 움직이는 손잡이는 네 가지입니다. 길이, 초당 프레임 수(1초에 보여 주는 장면 수), 가로세로 크기, 색 수입니다. 앞의 셋이 효과가 큽니다.

장면 수 = 길이(초) × 초당 프레임 수

계산 예시

가정: 4초 × 초당 15장 = 60장

길이를 2.5초로, 초당 10장으로 줄이면 25장

장면 수가 60장 → 25장, 절반 아래로 줄어듦

가로·세로를 각각 절반으로 하면 장면 하나 면적은 1/4

실제 용량은 장면 내용에 따라 달라지는 대략적인 감입니다.

어떤 순서로 줄이면 되나요

먼저 길이를 자르세요. 동작이 끝난 뒤 멈춰 있는 구간, 손이 들어오기 전 빈 구간만 잘라도 꽤 줄어듭니다.

다음은 초당 프레임 수입니다. 상품 동작은 대부분 초당 10~15장이면 충분히 자연스럽게 보입니다. 그다음 화면을 잘라 상품이 있는 부분만 남기고, 가로 폭을 상세페이지 폭에 맞추세요. 상세페이지보다 넓게 만들 필요는 없습니다.

• 원본 변환100%
• 길이 자르기65%
• + 프레임 줄이기40%
• + 화면 자르기25%
• + 색 수 줄이기20%

원본을 100으로 둔 가정 수치입니다. 실제 결과는 영상마다 다릅니다.

이해를 돕기 위한 예시 수치예요(실제 통계 아님).

색 수를 줄이는 것은 마지막에 하세요. 너무 줄이면 상품 색이 달라 보일 수 있습니다. 특히 반찬처럼 색이 맛의 인상을 좌우하는 상품은 색을 지키고 길이와 크기를 먼저 줄이는 편이 낫습니다.

줄인 뒤에는 꼭 폰으로 확인하세요. 컴퓨터 화면에서는 괜찮아 보여도, 모바일에서는 작게 보여 동작이 잘 안 보이거나 늦게 뜰 수 있습니다. 모바일 화면 기준은 모바일 상세페이지 글을 참고하세요.

정리

상세페이지 GIF는 꾸미기가 아니라 설명 도구입니다. 사진으로 찍으면 고객이 상상해야 하는 부분, 즉 사용법·질감·전후 장면에만 쓰면 됩니다.

한 개에는 동작 하나, 길이는 2~4초, 첫 장면만 봐도 뜻이 통하게 만드세요. 문구는 GIF 밖 정지 이미지에 두고, 식품이나 전후 비교는 찍은 그대로만 보여 주세요.

용량은 길이, 초당 프레임 수, 화면 크기 순서로 줄이고 색 수는 마지막에 손대세요. 채널별 제한은 공지를 확인하고, 실제 폰 화면에서 최종 점검하면 됩니다.

오늘은 내 상세페이지에서 "사진 세 장으로 설명하고 있는 동작" 하나를 찾아보세요. 그 자리가 첫 번째 GIF 자리입니다.

• 내 상세페이지에서 사진 여러 장으로 설명 중인 동작 찾기
• 사용법·질감·전후 장면 중 해당하는 자리 2~4곳 표시하기
• 각 자리에 담을 한 동작과 시작·끝 장면 정하기
• 폰을 고정하고 5~10초 촬영해 2~4초로 자르기
• 초당 10~15장, 상세페이지 폭에 맞춰 GIF로 변환하기
• 판매 채널의 GIF 지원 여부와 용량 제한 공지 확인하기
• 폰에서 첫 장면·속도·로딩을 직접 확인하기