모든 HTML 배너 내보내기에 사용자 지정 HTML/CSS/JavaScript 코드 삽입

HTML 내보내기 설정 패널에서 원하는 사용자 지정 HTML, CSS, JavaScript를 모든 배너에 삽입할 수 있어요(선택 사항).

영상 튜토리얼: Figma 배너 내보내기에 사용자 지정 HTML, CSS, JavaScript 추가

Bannerify 플러그인으로 Figma 배너 내보내기에 사용자 지정 HTML, CSS, JavaScript를 추가하는 방법을 보여 주는 영상이에요.

모든 HTML 배너 내보내기에 직접 작성한 HTML/CSS/JavaScript를 추가해야 한다면 내보내기 설정에서 Inject Custom Code 토글을 켜세요. 그러면 닫는 </body> 태그(콘텐츠 추가용)나 </head> 태그(메타 태그나 에셋 링크 추가용) 앞에 사용자 지정 HTML을 넣거나, 새 style 태그에 사용자 지정 CSS를 넣거나, 새 <script></script> 태그 안에 사용자 지정 JavaScript 코드를 넣을 수 있어요.

사용자 지정 고지 문구 오버레이 토글 예시. 이 기능의 흔한 사용 사례로, 배너 위에 켜고 끌 수 있는 고지 문구 팝업을 삽입하는 CodePen HTML/CSS/JS 코드 예시를 기본 예제로 참고할 수 있어요. 스타일과 내용은 필요에 따라 자유롭게 복사하고 수정하세요.

저장된 사용자 지정 코드 프리셋(선택 사항) ​

Saved Custom Code Presets 기능을 사용하면 배너를 내보낼 때 사용자 지정 HTML, CSS, JavaScript 코드의 여러 구성을 저장해 두고 다시 쓸 수 있어요. 사용하려면 네 가지 입력 영역(Head HTML, Body HTML, CSS, JavaScript)에 사용자 지정 코드를 넣고, 알아보기 쉬운 이름을 입력한 다음, Save as New Preset을 클릭해 이후에 쓸 수 있도록 구성을 저장하세요.

저장한 뒤에는 Load Saved Preset (Optional) 드롭다운 메뉴에서 원하는 프리셋을 불러와, 모든 사용자 지정 코드 영역을 저장한 구성으로 바로 채울 수 있어요. 요구 사항이 다른 배너를 내보낼 때마다 코드 스니펫을 직접 복사해 붙여 넣을 필요가 없어요. 더 이상 필요 없는 프리셋은 삭제하고, 기존 프리셋은 불러와서 수정한 다음 같은 이름으로 저장해 업데이트할 수 있어요. 모든 프리셋은 현재 Figma 앱 안에 로컬로 저장되며(Figma의 clientStorage API 사용), 다른 Figma 파일에서 Bannerify 코드 패널을 다시 열어도 유지돼요. 그래서 여러 번 내보내더라도 코드를 일관되게 유지하기 쉬워요.

편집 가능한 HTML 텍스트에 사용자 지정 폰트 추가 ​

편집 가능한 텍스트에 사용하는 굵기와 스타일마다 웹 폰트 파일을 하나씩 사용하세요. Figma에 폰트를 설치해도 그 폰트가 HTML 내보내기에 포함되지는 않아요.

  1. 브랜드에서 웹용으로 승인한 .woff2 또는 .woff 파일을 준비하세요.
  2. 문단 텍스트 내보내기를 켜세요. 편집할 텍스트는 Figma에서 잠그지 않은 상태로 두세요.
  3. HTML 내보내기 패널에서 Inject Custom Code를 켠 다음 Add custom CSS styles를 선택하세요.
  4. CSS 필드에 <style> 태그로 감싸지 않은 @font-face 규칙을 붙여 넣으세요. 샘플 패밀리 이름은 Figma와 내보낸 텍스트의 font-family 선언에 쓰인 정확한 패밀리 이름으로 바꾸고, 실제 폰트 굵기와 스타일에 맞추세요.
css
@font-face {
  font-family: "Your Brand Font";
  src: url("fonts/brand-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
  1. 굵기/스타일이 더 있다면 각각 별도의 규칙을 추가하세요(예: 굵은 폰트는 700, 기울임꼴 파일은 italic).
  2. 배너를 내보내고 압축을 푸세요. 각 배너의 HTML 파일 옆에 있는 fonts 폴더에 폰트 파일을 넣은 다음, 그 배너의 전체 내용을 다시 압축하세요. Bannerify는 CSS를 삽입하지만 이런 로컬 폰트 파일을 ZIP에 복사하지는 않아요. 상대 경로 폰트 URL은 스타일시트 위치를 기준으로 해석되므로, CSS를 다른 폴더에 저장했다면 경로를 조정하세요.
  3. 로컬 웹 서버나 게재처 플랫폼의 미리보기에서 패키지를 테스트하고, 폰트가 설치되지 않은 기기에서도 확인하세요. 폰트 로딩, 줄바꿈, 더 긴 대체 텍스트를 확인하세요. 폰트 파일도 패키지 크기에 포함되며, 게재처에서 해당 파일을 허용해야 해요.

광고 플랫폼에서 외부 폰트 요청을 허용한다면 호스팅된 HTTPS 폰트 파일 URL을 직접 사용할 수도 있어요. 폰트 서버는 교차 출처 폰트 로딩을 허용해야 해요. MDN font-face 레퍼런스를 참고하세요.