어때요 참 쉽죠? 👨‍🎨 아임웹 디자인 모드 꿀팁 4탄

2023. 02. 15

여러분은 어떤 이유로 웹사이트를 즐겨찾기 목록에 추가하시나요? ‘웹사이트 디자인이 감각적이라서’, ‘자주 찾는 상품을 빠르게 구매하기 위해서’ 등 여러 이유가 있겠지만 ‘다양한 콘텐츠를 많이 볼 수 있는 웹사이트’도 즐겨찾기를 하실 거예요.


웹사이트에 이미지, 영상, 글 등 콘텐츠가 다양할수록 방문자는 웹사이트를 자주 방문하고 오래 머무르게 됩니다. 결국, 웹사이트 방문율을 높이고 이탈률을 낮추기 위해서는 웹사이트에 다양한 콘텐츠를 많이 구성하는 것이 중요하다는 것이죠! 오늘은 콘텐츠를 효과적으로 노출할 수 있는 디자인 모드 꿀팁을 소개하려 합니다.




트렌디한 콘텐츠, 유튜브 쇼츠(Shorts)를 추가해보세요📸



요즘 짧은 시간 내에 즉각적인 즐거움을 얻을 수 있는 쇼츠 영상이 MZ세대에게 큰 인기를 끌고 있죠. 유튜브 쇼츠 영상을 웹사이트에도 노출할 수 있습니다. 코디 룩북, 상품 사용법, 브랜드 소개 영상 등을 제작하여 웹사이트에 추가해보세요!


유튜브 쇼츠 동영상은 일반적으로 세로 비율로 촬영합니다. 한 페이지에 여러 쇼츠 동영상을 삽입하는 경우, 갤러리 위젯을 함께 활용하여 동영상을 추가하고 9:16 비율로 설정하면 더 정돈된 모양으로 배치할 수 있어요. 페이지에 쇼츠 동영상을 추가하는 자세한 방법은 아래의 가이드를 참고해주세요!


유튜브 쇼츠 추가 가이드 보러가기 ➡️





콘텐츠를 빠르고 상세하게 보여줄 수 있는 롤오버✨


롤오버(Hover) 효과란 텍스트, 이미지, 버튼 등에 마우스 포인터를 올렸을 때 적용되는 전환 효과를 말합니다. 이미지 위젯에 롤오버 효과를 적용하면 콘텐츠를 빠르고 상세하게 보여줄 수 있습니다. 이미지 위젯은 두 가지 이미지를 추가할 수 있도록 기본 이미지와 롤오버 이미지 항목으로 나누어져 있어요. 기본 이미지에 기본으로 표시될 이미지를 추가하고, 롤오버 이미지에 전환될 이미지를 추가해보세요!


기본 이미지로 상품 사진을 적용하고, 롤오버 이미지에 착용 사진 및 디테일 컷을 넣어둔다면 방문자가 상품의 활용법과 연출법을 자세히 알 수 있겠죠? 옵션 설정을 통해 이미지 위에 올릴 색상을 선택하거나, 이미지에 링크를 추가할수도 있으니 다양한 옵션을 설정해보세요!


롤오버 설정 가이드 보러가기 ➡️





강조하고 싶은 콘텐츠가 있다면 모달창을 띄워 보세요🧐


웹사이트 방문자에게 꼭 강조하고 싶은 콘텐츠가 있다면 모달창을 띄워보세요! 모달창을 띄우면 콘텐츠를 기존 페이지의 새로운 창을 통해 보여줄 수 있습니다. 새로운 페이지로 이동하여 노출되는 것이 아니기 때문에 콘텐츠에 대한 집중도를 높일 수 있어요. 품의 상세 스펙을 보여주거나, 신제품이 출시되었을 때 이를 홍보하는 콘텐츠를 노출시켜보세요!


모달은 일반 팝업창과 다르게 방문자가 버튼 또는 링크를 클릭했을 때만 동작합니다. 여러 위젯을 사용하여 설정할 수 있지만 일부 위젯(게시판, 캘린더, 쇼핑 등)에서는 사용할 수 없으니, 아래의 가이드를 참고하여 제작해주세요.


모달창 제작 가이드 보러가기 ➡️





웹사이트를 자주 방문하고 오래 머무르게 된다면 방문자가 상품을 서치하고, 구매할 확률까지 높아질 수 있어요. 오늘의 꿀팁을 적용하여 다양한 콘텐츠를 노출하고, 많은 사람들이 즐겨 찾을 수 있는 웹사이트를 완성해보세요! 



by 마케팅 유진