이미지·영상 위에 여러 URL 영역 추가하는 법🔗 | 1분 디자인 레시피
2023. 12. 22
2023. 12. 22
※ 이번 레시피는 고객님의 소중한 의견을 바탕으로 제작되었습니다.
👥 영상 위에 URL 버튼을 코딩 없이 마음껏 추가할 수 있다고?
웹사이트 메인 페이지부터 고객의 행동을 다방면으로 유도할 수 있는 마법의 위젯이 있다는 사실, 알고 계신가요? 바로 아임웹 디자인모드의 [이미지맵] 위젯인데요. 하나의 이미지(GIF) 위에 여러 URL 영역을 설정할 수 있어 상품 페이지 방문, 전화 연결, 회원가입 등 특정한 액션을 유도할 수 있죠.
이번 아임웹 레시피에서는 재사용 문화를 만들어가는 다회용기 대여 서비스 <트래쉬버스터즈>의 사례를 통해 이미지맵 위젯 설정법을 1분 안에 알아보고자 합니다. 이 브랜드는 서비스를 소개하는 GIF 영상 위에 ‘관련 페이지’로 연결되는 URL 버튼을 추가하여, 방문자가 자연스럽게 서비스를 알아가게끔 유도했는데요.
트래쉬버스터즈의 레시피, 지금 알아볼까요?👩🍳
📌이런 분이라면 특히 주목해 주세요!
준비물
URL 영역을 적용할 이미지 파일 (10MB 이하)
STEP 1
아임웹 디자인 모드에 접속 후 좌측 ‘+’ 버튼 클릭. [이미지맵] 위젯을 추가해 주세요.
STEP 2
[이미지맵] 위젯 우클릭. [이미지 맵 설정] 메뉴로 들어가 원하는 이미지를 업로드 해주세요.
✋여기서 잠깐!
이미지맵 위젯에서는 비디오 파일 형식을 지원하지 않아요. 변환 툴을 이용해 영상을 GIF로 만든 뒤 업로드해 주세요.
STEP 3
좌측에 [추가] 버튼 클릭. 영역 클릭 시 이동될 URL을 원하는 만큼 추가해 주세요.
STEP 4
우측 이미지에 추가된 링크 영역들을 자유롭게 설정해 주면 끝이에요!
💡TIP
🔎 G.G UNIVERSE
특정 위치를 클릭하면 관련 페이지나 외부 링크로 이동되게끔 설정했어요.
🔎 키들 KEEDLE
각 제품의 연출 컷 위에 URL 영역을 만들어, 클릭 시 상품 페이지로 이동되게끔 설정했어요.
✅ 이미지맵 위젯, 이런 용도로도 활용할 수 있어요!
아임웹은 웹사이트, 온라인 쇼핑몰 제작을 고민하는 여러분들을 위해 70여 개의 템플릿을 무료로 제공하고 있어요. 조금만 수정해도 꽤 그럴듯한 웹사이트가 완성되죠! 마음에 드는 템플릿을 발견했다면, 지금 바로 가볍게 만들어 보세요👇
by 마케팅 소영