내보낸 HTML 배너의 미리보기 페이지 사용자 지정

Bannerify는 내보낸 배너 .zip 파일에 HTML 미리보기 페이지를 포함해요. 클라이언트나 팀 담당자에게 모든 배너의 미리보기를 공유할 때 유용해요.

HTML 배너를 내보내면 Bannerify가 HTML 미리보기 페이지를 자동으로 포함해요. 이 파일은 내보낸 모든 배너를 한 페이지에 불러와 그리드로 배치하므로, 모든 배너를 한눈에 볼 수 있어요.

HTML 내보내기 설정 패널에서 Generate Preview Page 토글은 기본적으로 켜져 있어요. 미리보기 페이지를 생성해 .zip 패키지에 추가하고 싶지 않다면 필요에 따라 이 토글을 끌 수 있어요.

미리보기 페이지 제목 ​

Bannerify에서 내보낸 HTML 미리보기 페이지의 <title></title> 태그에는 Figma 문서 이름이 사용돼요.

미리보기 페이지의 배너 순서 ​

미리보기 페이지의 배너 순서는 Figma 레이어 패널의 배너 프레임 순서를 따라요.

미리보기 페이지 레이아웃 선택 ​

preview page layout 선택 상자의 옵션을 바꾸면, 생성된 index.html 미리보기 페이지에서 배너를 배치하는 그리드 스타일이 설정돼요. 선택 상자에서 다른 옵션을 고르면 레이아웃을 바꿀 수 있어요.

메이슨리 레이아웃 그리드 ​

메이슨리 레이아웃 모드는 모든 배너가 들어갈 최적의 레이아웃을 자동으로 찾아요. 배너 세트가 클 때 좋은 선택이에요.

가운데 정렬 레이아웃 그리드 ​

가운데 정렬 레이아웃 모드는 모든 배너를 세로로 정렬하고 가로 가운데에 배치해요. 배너 세트가 작을 때 좋은 선택이에요.

미리보기 페이지에서 “다크 모드” 켜기 ​

Use Dark Mode 설정을 켜면 생성된 index.html 미리보기 페이지에 어두운 테마와 배경이 적용돼요. 배너 디자인이 어두운 배경에서 더 잘 보인다면 이 설정을 켜세요.

미리보기 페이지에 브랜드 헤더 추가 ​

index.html 미리보기 페이지를 클라이언트나 외부 담당자에게 보여 준다면, 사용자 지정 HTML과 CSS를 추가해 자체 브랜딩이나 사용자 지정 헤더를 페이지에 적용할 수 있어요.

사용자 지정 HTML ​

Custom HTML 필드에 추가한 코드는 생성된 index.html 페이지의 <body></body> 태그 바로 뒤에 그대로 삽입돼요. 사용자 지정 헤더든, 회사 로고를 불러오는 간단한 <img> 태그든 무엇이든 추가할 수 있어요.

사용자 지정 CSS ​

Custom CSS 필드에 추가한 코드는 index.html 페이지의 사용자 지정 style 태그 안에 삽입돼요(그래서 입력할 때 style 태그를 직접 추가할 필요가 없어요). 추가한 Custom HTML의 스타일을 지정할 때 사용할 수 있어요.

미리보기 페이지 온라인 공유 ​

내보낸 Bannerify .zip에는 내보낸 배너를 모두 보여 주는 루트 index.html 파일이 포함돼 있어요. 이 패키지는 Bannerify의 기본 제공 연동 중 하나로 업로드하거나, 정적 호스팅 서비스에 직접 업로드할 수 있어요.

Tiiny Host로 빠르게 직접 업로드 ​

드래그 앤 드롭으로 빠르게 올리고 싶다면 내보낸 Bannerify .zip을 Tiiny Host에 직접 업로드할 수 있어요. 패키지에 필요한 루트 index.html이 이미 들어 있으므로, 내보낸 파일을 먼저 재배치할 필요가 없어요.

기본 제공 직접 업로드 ​

Bannerify HTML 내보내기 패널에서 Upload Preview Page를 켠 다음, 다음 호스팅 서비스 중 하나를 선택하세요.

  • Netlify 는 미리보기 패키지를 Netlify 사이트에 업로드해요.
  • Cloudflare Pages 는 Cloudflare API 토큰, 계정 ID, Pages 프로젝트 이름을 사용해요. Pages 프로젝트가 아직 없으면 Bannerify가 자동으로 만들어요.
  • Vercel 은 Vercel 액세스 토큰과 프로젝트 이름을 사용하며, Team ID는 선택 사항이에요. 내보낼 때마다 새 미리보기 배포 URL이 만들어져요.

Cloudflare Pages에는 정적 사이트용 무료 플랜이 있으며, 현재 Pages 제한이 적용돼요. Vercel에도 무료 Hobby 플랜이 있지만, Vercel은 Hobby 계정을 개인적·비상업적 용도로 제한해요. 비즈니스 및 팀 작업에는 자격을 갖춘 유료 플랜이 필요해요.

사용자 지정 자동화에는 계속 Zapier와 Make를 사용할 수 있어요. 이 연동은 내보낸 .zip을 웹훅으로 보내므로, 공개 미리보기 URL을 받으려면 Zap이나 Make 시나리오에 이어서 연결할 정적 호스팅이 필요해요.

Commentful과 함께 미리보기 사용 ​

현재 Commentful 리뷰 링크는 외부 라이브 HTML 미리보기를 임베드하지 않고 Figma 프레임을 표시해요. QA를 진행할 때는 애니메이션과 인터랙션 확인용으로 호스팅된 Bannerify 미리보기 URL을, 프레임 기반 댓글과 승인용으로 Commentful 리뷰 링크를 함께 공유하세요.