배너에 클릭 가능한 URL 링크 추가하기

Bannerify에서 HTML 배너 내보내기에 URL 링크를 추가하는 방법은 두 가지예요. 배너 전체를 <a> 링크 태그로 감싸거나, 타임라인의 개별 레이어에 클릭 가능한 링크를 추가할 수 있어요.

링크는 HTML 내보내기에만 적용돼요. 참고로 이 설정은 모든 HTML 내보내기 옵션에만 적용되며, 플러그인의 GIF나 동영상 내보내기에는 아무 영향도 주지 않아요.

배너 전체에 클릭 가능한 URL 추가하기 ​

배너 전체에 링크를 걸려면 내보내기 설정 패널의 URL 필드에 링크를 붙여 넣으세요. 그러면 배너 전체가 <a> 태그로 자동으로 감싸지고, 이 태그의 href는 입력 필드에 지정한 URL로 설정돼요.

특정 타임라인 레이어에 클릭 가능한 URL 추가하기 ​

특정 타임라인 레이어를 클릭할 수 있게 만들려면, Figma 캔버스에서 해당 레이어를 클릭한 다음 Figma 기본 Prototype 패널에서 Open link 인터랙션을 추가하세요. Figma 인터랙션의 URL 필드에 링크를 붙여 넣으면 HTML 배너 내보내기에서 해당 요소에 onclick="window.open('https://yourwebsitelink.com', '_blank')" 속성이 자동으로 포함돼요.

Bannerify 타임라인에 표시되는 레이어에만 적용돼요. 참고로 이 설정은 Figma 타임라인에 표시되는 레이어에만 적용돼요. 기본적으로는 배너 프레임의 직계 자식 레이어가 해당돼요. 원하면 플러그인에서 중첩 레이어를 포함한 다음, 그 중첩 레이어에도 프로토타입 링크 인터랙션을 적용할 수 있어요.

DoubleClick 내보내기에서 타임라인 레이어에 Enabler.exit() 사용하기 ​

DoubleClick Studio 형식으로 내보낸다면, 타임라인 레이어의 Figma 프로토타입 URL을 일반 웹사이트 URL 대신 Enabler.exit(...) 호출로 설정할 수도 있어요.

  1. 타임라인에서 레이어를 선택하세요(예: CTA 버튼).
  2. Figma의 Prototype 패널에서 On click -> Open link 인터랙션을 추가하세요.
  3. URL 필드에 다음과 같은 DoubleClick exit 호출을 입력하세요.
js
Enabler.exit("CTA Exit");
  1. Bannerify에서 DoubleClick Studio 형식으로 배너를 내보내세요.

그러면 Bannerify가 다음과 같이 처리해요.

  • 해당 레이어를 Enabler.exit("CTA Exit")에 연결해요.
  • 기본 배너 전체 배경 exit(Enabler.exit("Background Exit"))는 그대로 유지해요.
  • 레이어 클릭이 배경 exit로 전파되지 않게 막아서 exit 호출이 중복되지 않아요.

DoubleClick 내보내기에서만 사용하세요. DoubleClick이 아닌 HTML 형식에서는 Prototype 링크에 일반 웹사이트 URL(예: https://example.com)을 사용하세요.