이미지·영상 위에 여러 URL 영역 추가하는 법🔗 | 1분 디자인 레시피

2023. 12. 22

blog cover image

※ 이번 레시피는 고객님의 소중한 의견을 바탕으로 제작되었습니다.


👥 영상 위에 URL 버튼을 코딩 없이 마음껏 추가할 수 있다고?


웹사이트 메인 페이지부터 고객의 행동을 다방면으로 유도할 수 있는 마법의 위젯이 있다는 사실, 알고 계신가요? 바로 아임웹 디자인모드의 [이미지맵] 위젯인데요. 하나의 이미지(GIF) 위에 여러 URL 영역을 설정할 수 있어 상품 페이지 방문, 전화 연결, 회원가입 등 특정한 액션을 유도할 수 있죠.

이번 아임웹 레시피에서는 재사용 문화를 만들어가는 다회용기 대여 서비스 <트래쉬버스터즈>의 사례를 통해 이미지맵 위젯 설정법을 1분 안에 알아보고자 합니다. 이 브랜드는 서비스를 소개하는 GIF 영상 위에 ‘관련 페이지’로 연결되는 URL 버튼을 추가하여, 방문자가 자연스럽게 서비스를 알아가게끔 유도했는데요.


트래쉬버스터즈의 레시피, 지금 알아볼까요?👩‍🍳


📌이런 분이라면 특히 주목해 주세요!

  • 하나의 이미지(GIF) 위에 여러 가지 URL 영역을 구현하고 싶은 분
  • 메인 페이지에서부터 특정한 행동을 유도하고 싶은 분
  • 방문 고객에게 알리고 싶은 이벤트, 제품, 콘텐츠 등이 있는 분




준비물
URL 영역을 적용할 이미지 파일 (10MB 이하)


STEP 1
아임웹 디자인 모드에 접속 후 좌측 ‘+’ 버튼 클릭. [이미지맵] 위젯을 추가해 주세요.


STEP 2
[이미지맵] 위젯 우클릭. [이미지 맵 설정] 메뉴로 들어가 원하는 이미지를 업로드 해주세요.

✋여기서 잠깐!
이미지맵 위젯에서는 비디오 파일 형식을 지원하지 않아요. 변환 툴을 이용해 영상을 GIF로 만든 뒤 업로드해 주세요.

  • 영상 무료 변환 최적화 툴: EZGIF
    • 영상 무료 변환: [Video to Gif] 메뉴
    • 이미지 용량 최적화: [Optimize] 메뉴
      *이미지맵 위젯에서는 10MB까지 업로드가 가능합니다. 업로드할 이미지의 용량이 크다면 해당 기능을 꼭 활용해 주세요!


STEP 3
좌측에 [추가] 버튼 클릭. 영역 클릭 시 이동될 URL을 원하는 만큼 추가해 주세요.


STEP 4
우측 이미지에 추가된 링크 영역들을 자유롭게 설정해 주면 끝이에요!

💡TIP

  • 링크 영역을 겹쳐서 사용할 경우, 제일 마지막에 추가된 영역이 우선 클릭됩니다.
  • URL 이동 외에도 전화걸기, 문자/이메일 발송, 파일 첨부 등 다양하게 활용할 수 있어요!




다른 브랜드들은 이 기능을 어떻게 활용했을까요?


🔎 G.G UNIVERSE
특정 위치를 클릭하면 관련 페이지나 외부 링크로 이동되게끔 설정했어요.

 

🔎 키들 KEEDLE
각 제품의 연출 컷 위에 URL 영역을 만들어, 클릭 시 상품 페이지로 이동되게끔 설정했어요.


이미지맵 위젯, 이런 용도로도 활용할 수 있어요!

  • 여러 상품이 담긴 이미지를 재배치해 한번에 보여주기 → 각 상품 클릭 시 해당 상품 페이지로 이동
  • 제품/프로모션 영상(GIF)을 재배치해 한번에 보여주기 → 각 영상 화면 클릭 시 관련 외부 페이지로 이동
  • 연락처가 담긴 이미지 보여주기 → 특정 영역 클릭 시 전화걸기, 문자/이메일 발송 화면으로 이동
    • 전화연결/문자 발송/이메일 발송은 모바일 화면에서만 지원됩니다.




우리 브랜드만의 감도 높은 웹사이트, 쉽고 빠르게 만들어 보세요!


아임웹은 웹사이트, 온라인 쇼핑몰 제작을 고민하는 여러분들을 위해 70여 개의 템플릿을 무료로 제공하고 있어요. 조금만 수정해도 꽤 그럴듯한 웹사이트가 완성되죠! 마음에 드는 템플릿을 발견했다면, 지금 바로 가볍게 만들어 보세요👇





레시피 사례로 소개한 트래쉬버스터즈를 비롯해 G.G UNIVERSE, 키들 KEEDLE은 아임웹과 함께 성장하는 브랜드입니다.


by 마케팅 소영














by 마케팅 소영