온라인 쇼핑몰에서 첫인상을 결정짓는 요소는 단순히 상품의 종류나 가격만이 아닙니다. 고객이 처음 방문했을 때 시선을 사로잡는 시각적 연출 또한 이미지를 결정하는 데 중요한 역할을 해요. 식스샵 프로에서는 쇼핑몰에 생동감을 불어넣는 애니메이션 효과를 손쉽게 설정할 수 있는 기능을 제공하고 있는데요. 이번 글에서는 매우 간단한 방법으로 쇼핑몰의 매력을 끌어내 줄 네 가지 애니메이션 기능을 소개할게요.

1. 고객의 시선을 단번에 사로잡는 ‘전광판 효과'

특별한 프로모션이나 신상품 소식을 알릴 때 텍스트를 단순히 배치하는 것만으로 아쉽게 느껴지셨나요? 이때 사용할 수 있는 기능이 바로 전광판 효과입니다. 텍스트에 움직임과 생동감을 더해 고객의 눈길을 붙잡는 데 효과적이죠.

예를 들어, 쇼핑몰 메인에 전광판 효과를 적용하면 방문자가 바로 이벤트나 할인 정보를 인지할 수 있어요.

너무 빠르게 설정하면 눈이 피로할 수 있으니, 부드럽고 자연스러운 속도로 설정하는 것이 더 효과적이에요. 전광판 섹션에서는 스크롤 속도를 최소 3초에서 최대 20초까지 조정할 수 있으며, 스크롤 방향과 글자 크기도 설정할 수 있어 쇼핑몰의 분위기에 맞는 연출이 가능해요.

전광판 섹션 설정 방법 🪄

[식스샵 프로 > 웹사이트 > 테마 > 디자인 편집하기]에서 좌측 메인 패널의 [섹션] 옆 + 아이콘을 클릭하면 나타나는 창에서 전광판을 추가해 주세요.
👉 가이드 확인하기

2. 상품 이미지에 ‘호버 효과’를 더해 감각적인 쇼핑몰로

상품 이미지도 작은 디테일로 큰 변화를 줄 수 있답니다. 상품 이미지에 호버 효과를 적용하면 고객이 이미지를 마우스로 가리킬 때마다 변화가 생겨요.

상품 썸네일에 마우스 오버 시 효과를 효과 없음, 밝게 하기, 어둡기 하기, 확대하기, 다음 이미지 보이기 중에 선택해 적용할 수 있어요.

신상품이나 인기 상품에 이러한 호버 효과를 더하면 고객의 시선이 자연스럽게 해당 상품으로 향하게 되겠죠? 또한, 호버 효과는 방문자가 쇼핑몰의 세련된 디자인을 인식하는 데도 긍정적인 영향을 미칠 거예요!

상품 이미지 호버 효과 설정 방법 🪄

[식스샵 프로 > 웹사이트 > 테마 > 디자인 편집하기]에서 좌측 상단의 [🪄 아이콘(테마 설정)]을 클릭하고, [상품] 항목에서 [이미지 호버 효과]를 바로 설정할 수 있어요.
👉 가이드 확인하기

3. 부드럽고 세련된 첫인상을 위한 ‘로딩 & 스크롤 애니메이션’

쇼핑몰 페이지가 처음 로딩될 때, 또는 고객이 페이지를 스크롤할 때 자연스러운 애니메이션 효과가 추가된다면 그 첫인상은 확실히 달라질 텐데요. 식스샵 프로에서는 페이지를 더욱 세련되게 만들어 줄 로딩 및 스크롤 애니메이션 기능을 제공해요.

설정 가능한 효과는 콘텐츠가 부드럽게 나타나는 효과인 ‘페이드인’과 콘텐츠가 밀려오는 듯한 효과인 ‘슬라이드인’이에요. 애니메이션 속도도 천천히, 보통, 빠르게 중 선택할 수 있어요.

스크롤할 때마다 콘텐츠가 자연스럽게 드러나는 연출은 쇼핑몰의 분위기를 한층 고급스럽게 만들 거예요!

로딩 & 스크롤 애니메이션 설정 방법 🪄

[식스샵 프로 > 웹사이트 > 테마 > 디자인 편집하기]에서 좌측 상단의 [🪄아이콘(테마 설정)]을 클릭하고, [애니메이션] 항목에서 바로 설정할 수 있어요.
👉 가이드 확인하기

4. 끊김 없는 전환을 위한 ‘계속 흐르기’ 효과

상품이나 이미지 슬라이드가 딱딱하게 멈추지 않고 부드럽게 흐르는 느낌을 주고 싶다면, 계속 흐르기 전환 효과를 활용해 보세요.

이 기능은 상품 섹션, 미디어+상품 섹션, 갤러리 섹션에서 슬라이드 레이아웃에 적용할 수 있어요. ‘천천히’, ‘보통’, ‘빠르게’ 중 속도도 선택 가능해요. 방문자에게 쇼핑몰을 탐색할 때 끊김 없는 부드러운 경험을 선사할 수 있을 거예요!

계속 흐르기 효과 설정 방법 🪄

좌측 메인 패널의 [섹션] 옆 + 아이콘을 클릭하면 나타나는 창에서 상품 섹션, 미디어+상품 섹션, 갤러리 섹션을 추가해주세요. [디자인] 창에서 레이아웃을 ‘슬라이드’로 선택하고, 슬라이드 자동 전환을 ‘계속 흐르기’로 설정해 주세요..
👉 가이드 확인하기

쇼핑몰 디자인에 움직임과 생기를 더하면 고객의 머릿속에 강렬한 이미지를 남길 수 있어요. 식스샵 프로의 애니메이션 기능을 활용해 여러분의 쇼핑몰을 한층 더 매력적이고 생동감 있게 만들어 보세요.

고객이 머물고 싶은 쇼핑몰은 디테일에서 시작된다는 것, 잊지 마세요!