기존 Figma 프레임으로 새 배너 생성하기

기존 Figma 프레임 하나 이상으로 여러 새 배너 크기를 만들고, 원하면 Bannerify가 새 출력 크기마다 콘텐츠 크기와 레이아웃을 다시 조정하게 하세요.

Figma에서 이미 배너 프레임을 하나 이상 디자인했다면, Bannerify가 그 원본으로 여러 크기의 새 배너 프레임을 생성할 수 있어요.

잘 다듬은 마스터 크기 하나를 완성한 뒤, 모든 레이아웃을 처음부터 직접 다시 만들지 않고 다른 표준 광고 크기의 1차 세트를 Bannerify로 만들고 싶을 때 유용해요.

이 기능으로 할 수 있는 일 ​

  • 선택한 최상위 Figma 프레임이나 인스턴스를 새 프레임으로 복제해요.
  • 여러 표준 배너 크기를 한 번에 고를 수 있어요.
  • 사용자 지정 출력 크기를 지원해요.
  • 원하면 새 화면 비율마다 텍스트, 로고, CTA, 그래픽의 레이아웃을 다시 조정할 수 있어요.
  • 원본 프레임은 바뀌지 않아요.

이 기능은 크리에이티브 검토를 대신하는 것이 아니라 제작 시간을 줄이는 지름길로 사용하세요. Bannerify로 빠르게 완성에 아주 가까운 결과를 얻은 뒤, 마지막 디자인 조정은 Figma에서 바로 하면 돼요.

1단계. Generate 탭 열기 ​

Figma에서 Bannerify를 열고 일반 Load Banners from Figma Frames 탭에서 Generate New Banner Sizes from Figma Frames 탭으로 전환하세요.

Bannerify가 현재 페이지에서 원본 배너로 쓸 수 있는 최상위 Figma 프레임과 인스턴스를 찾아요.

2단계. 원본 프레임 선택하기 ​

시작점으로 사용할 원본 프레임을 하나 이상 체크하세요.

다음과 같은 프레임이 좋아요.

  • 완성된 배너 디자인
  • 300x250이나 1200x628처럼 잘 다듬은 마스터 크기
  • 구조가 깔끔하고 요소가 명확하게 그룹으로 묶인 프레임

Bannerify는 선택한 원본으로 새 프레임을 생성하며, 원본을 덮어쓰지 않아요.

3단계. 출력 크기 고르기 ​

생성할 배너 크기를 켜세요.

Generate 탭에는 다음과 같은 일반적인 광고 크기가 들어 있어요.

  • Leaderboard (728x90)
  • Medium Rectangle (300x250)
  • Large Rectangle (336x280)
  • Skyscraper (120x600)
  • Wide Skyscraper (160x600)
  • Half-Page Skyscraper (300x600)
  • Banner (468x60)
  • Square (250x250)

비표준 크기가 필요하다면 사용자 지정 너비와 높이를 입력하고 Add Custom Size를 클릭하세요.

4단계. 필요하면 스마트 레이아웃 켜기 ​

Bannerify가 새 배너마다 콘텐츠를 자동으로 맞추게 하려면 다음 옵션을 켜세요.

  • Auto re-layout new Figma frame content layers (BETA)

이 옵션을 켜면 Bannerify가 새 프레임마다 콘텐츠의 크기와 위치를 조정해 대상 화면 비율에 더 자연스럽게 맞추려고 해요. 또한 콘텐츠를 원래 프레임에서 치우쳐 있던 방향에 가깝게 유지하려고 하므로, 원래 위쪽에 몰려 있거나 가장자리에 정렬된 레이아웃이 가운데로 쏠릴 가능성이 줄어들어요.

이 옵션을 끄면 Bannerify가 새 프레임 크기는 그대로 만들지만, 바깥 프레임 크기만 조정하고 안쪽 콘텐츠 배치는 원본 레이아웃에 더 가깝게 둬요.

5단계. Generate 클릭하기 ​

Generate 버튼을 클릭해 선택한 크기를 생성하세요.

Bannerify가 페이지에 새 Figma 프레임을 만들고, 원본 프레임 이름에 출력 크기를 붙여 이름을 지정해요. 예를 들면 다음과 같아요.

  • Homepage Promo / Leaderboard (728x90)
  • Homepage Promo / Medium Rectangle (300x250)
  • Homepage Promo / Half-Page Skyscraper (300x600)

스마트 레이아웃이 조정하려는 항목 ​

레이아웃 재조정 토글을 켜면 Bannerify는 다음을 시도해요.

  • 텍스트 블록의 크기와 위치 조정
  • 좁고 긴 형식이나 아주 낮고 넓은 형식에서도 헤드라인을 더 읽기 쉽게 유지
  • 위쪽, 가운데, 아래쪽에 치우친 콘텐츠를 원본 위치에 가깝게 유지
  • 새 크기의 화면 비율이 원본과 비슷할 때 전체 구성을 지나치게 축소하지 않기
  • 넓은 텍스트 영역 주변의 여백 유지
  • 장식 요소와 도형을 새 화면 비율에 맞게 이동
  • 가능하면 그룹으로 묶인 콘텐츠를 함께 유지
  • 눈에 띄는 겹침과 넘침 줄이기

정확한 결과는 원본 프레임의 구조와, 원본과 대상 크기 사이의 화면 비율 차이에 따라 달라요.

레이아웃 재조정을 켜거나 끌 때 ​

이럴 때 켜세요 ​

  • 여러 새 크기의 1차 결과를 빠르게 얻고 싶을 때
  • 원본 배너의 콘텐츠 구조가 명확할 때
  • 최종 마무리 전에 Bannerify가 힘든 작업을 대신해 주길 원할 때

이럴 때 끄세요 ​

  • 새 프레임 크기만 빠르게 만들고 싶을 때
  • Figma에서 모든 요소의 위치를 직접 조정할 계획일 때
  • 원본 레이아웃이 아주 독특해서 직접 정확하게 제어하고 싶을 때

더 좋은 결과를 위한 권장 사항 ​

Figma에서 원본 배너의 구조가 명확할수록 가장 일관된 결과를 얻을 수 있어요.

중요한 요소는 직계 자식이나 논리적인 그룹으로 유지하기 ​

예를 들면 다음과 같아요.

  • 헤드라인 그룹
  • 본문 카피 그룹
  • CTA 또는 버튼 그룹
  • 로고 그룹
  • 제품 이미지 그룹

이렇게 하면 Bannerify가 각 요소의 역할을 파악하고 레이아웃을 적절하게 다시 조정하기 쉬워요.

서로 관련 없는 레이어를 거대한 평면 프레임 하나에 몰아넣지 않기 ​

모든 요소가 논리적인 그룹 없이 루트 프레임에 흩어져 있으면 Bannerify가 활용할 수 있는 의미 정보가 줄어들어요.

긴 카피에는 알맞은 텍스트 상자 사용하기 ​

배너에 긴 법적 고지나 면책 문구가 들어간다면, 원본 프레임에서 텍스트 레이어의 너비를 현실적으로 설정하세요.

HTML 내보내기에서 카피를 스크롤할 수 있게 유지해야 한다면 스크롤 텍스트 레이어를 참고하세요.

Section은 다중 장면 배너에만 사용하기 ​

Generate 기능은 기존 프레임으로 새 크기를 만들어요.

여러 프레임을 하나의 애니메이션 배너 시퀀스로 합치려면 다중 장면 배너를 참고하세요.

생성한 뒤에는 ​

생성된 배너는 일반 Figma 프레임이에요. 다음과 같은 작업을 할 수 있어요.

  • 레이아웃을 직접 다듬기
  • Bannerify에서 애니메이션 넣기
  • HTML, GIF, MP4, WebM 또는 기타 지원되는 형식으로 내보내기

나중에 원본 디자인을 수정했다면 Generate로 새 세트를 다시 생성하세요.

문제 해결 팁 ​

  • 생성된 레이아웃을 직접 고쳐야 할 부분이 너무 많다면, 레이아웃 재조정 토글을 끄고 변형의 크기를 직접 조정해 보세요.
  • 텍스트가 많은 크기에서 여전히 조정이 필요하다면, 원본 레이아웃을 단순하게 만든 다음 다시 생성해 보세요.
  • 아주 작은 크기에 비해 생성된 배너의 카피가 너무 많다면, 원본 카피를 줄이거나 스크롤 텍스트나 팝업 텍스트 방식을 사용하세요.
  • Bannerify가 여러 프레임을 하나의 배너로 다루게 하려면 Generate 기능 대신 Figma Section을 사용하세요.

요약 ​

Generate 기능은 완성된 Figma 배너 하나 이상을 새 배너 크기 전체 세트로 바꾸는 가장 빠른 방법이에요.

원본 프레임을 선택하고, 출력 크기를 고르고, Auto re-layout new Figma frame content layers (BETA) 옵션을 켤지 정한 다음, Bannerify가 페이지에 바로 새 프레임을 생성하게 하세요.