본문으로 바로가기

 

Figma로 광고 소재 템플릿 만들기 — 사이즈 설정부터 CTA 버튼 디자인까지

광고의 클릭률은 이미지 혼자 만들지 않습니다. 카피의 위치, 폰트 크기, CTA 버튼 하나가 결과를 바꿉니다.
어떤 요소를 어디에 어떻게 배치해야 하는지, Figma로 광고 소재를 완성하는 전 과정을 단계별로 정리합니다.


1. 광고 디자인 원칙 — 텍스트 위계와 가독성

좋은 광고는 단순히 이미지만으로 결정되지 않습니다.
카피 내용과 배치, CTA 버튼이 클릭률에 직접적인 영향을 줍니다.

텍스트 위계 설정

텍스트는 광고의 핵심 메시지 역할을 합니다. 중요도 순서를 명확히 보여줘야 합니다.

헤드라인
가장 큰 크기 / 굵은 산세리프 / 상단·중앙 배치
핵심 메시지를 담습니다. 3초 안에 읽혀야 합니다.
서브 카피
중간 크기 / 헤드라인 위 또는 아래 배치
헤드라인의 부연 설명을 담당합니다.
CTA
버튼 형태 / 강조 색상 / 하단 중앙 또는 우하단
행동을 유도하는 최종 메시지입니다.
고지·심의필
작은 크기 / 하단 모서리 배치
눈에 크게 띄지 않되 읽을 수 있는 크기로 배치합니다.
가독성 최우선 규칙
배경과 텍스트의 색상 대비를 크게 주어야 합니다.
행간은 1.2~1.4배를 유지하고, 텍스트 주변과 프레임 가장자리에 충분한 여백을 확보합니다.

2. 플랫폼별 프레임 사이즈 설정

플랫폼마다 최적화된 이미지 크기가 다릅니다. 잘못된 사이즈는 이미지 잘림이나 화질 저하로 이어집니다.

Instagram 피드
1080 × 1350
4:5 세로형 권장
Instagram 스토리
1080 × 1920
9:16 / 상하단 250px Dead Zone
YouTube 썸네일
1280 × 720
16:9 가로형
웹 배너
728 × 90
리더보드 배너
Safe Zone 설정
Instagram 스토리는 상단 프로필·하단 댓글 UI로 인해 상하단 각 250px가 Dead Zone입니다.
Figma에서 가이드라인을 설정해 핵심 요소가 해당 영역에 걸치지 않도록 제작합니다.

3. 이미지 불러오기 및 마스킹

AI로 생성한 이미지를 Figma에 가져와 원하는 형태로 정리하는 과정입니다.

  • 컴퓨터에 저장된 이미지를 프레임 안으로 드래그해 배치합니다
  • Shift 키를 누른 채 모서리를 드래그하면 비율을 유지하면서 크기를 조정합니다

마스킹(Masking)

이미지를 원형, 둥근 모서리 사각형 등 특정 도형 안에 맞춰 넣는 기능입니다.

  • 원하는 도형을 그리고 이미지를 그 위에 겹치게 배치합니다
  • 도형과 이미지를 함께 선택한 후 '마스크로 사용' 기능을 적용합니다
  • 우측 속성 패널에서 '모서리 둥글게' 값을 입력하면 이미지 테두리를 둥글게 조정할 수 있습니다

4. 폰트 설정 — 추천 무료 폰트

텍스트 도구(T)를 선택하고 캔버스를 클릭한 뒤 내용을 입력합니다.
우측 속성 패널에서 폰트 종류·크기·색상·정렬을 세밀하게 설정합니다.

한글 — 깔끔한
Pretendard
현대적, 가독성 최상
한글 — 안정적인
Noto Sans KR
범용성, 안정감
한글 — 친근한
나눔스퀘어
친근함, 캐주얼
한글 — IT 느낌
Spoqa Han Sans
테크, 깔끔함
영문 — 세련된
Montserrat
패션, 브랜드
영문 — 현대적인
Roboto
범용성, 읽기 편함
영문 — 테크
Inter
IT, 스타트업
영문 — 고급스러운
Playfair Display
럭셔리, 명품

5. CTA 버튼 디자인 원칙

CTA 버튼은 광고에서 행동을 최종적으로 유도하는 요소입니다.
디자인 하나가 클릭률을 직접 바꿉니다.

1
색상 — 고대비
주변 배경과 확실히 구분되는 색상을 사용합니다. 레드·오렌지 계열이 효과적입니다.
2
크기 — 충분히 크게
모바일에서도 쉽게 탭할 수 있을 만큼 충분한 크기로 제작합니다.
3
텍스트 — 동사 사용
"구매하기", "지금 확인하기", "혜택 받기" 등 행동을 명확히 지시하는 동사를 사용합니다.
4
위치 — 하단 중앙
시선이 자연스럽게 도달하는 하단 중앙에 배치합니다.
5
효과 — 입체감
그림자 또는 테두리로 버튼임을 명확하게 인식시킵니다.

6. 브랜드 로고 삽입 전략

로고는 작지만 반드시 필요한 브랜드 인지의 핵심 요소입니다.
PNG(투명 배경) 파일을 사용하면 어떤 배경에도 자연스럽게 배치할 수 있습니다.
권장 크기는 전체 이미지의 5~10%입니다.

LOGO

 

상단 좌측 — 가장 일반적
시선이 좌→우, 위→아래로 흐르므로 가장 먼저 보이는 위치
LOGO
상단 우측
깔끔한 느낌, 우측 정렬을 선호하는 디자인에 사용
LOGO
하단 중앙
마무리 느낌, CTA 버튼 아래에 배치할 때 사용
LOGO
하단 우측
조용한 존재감, 미니멀 디자인에 적합

7. 광고 소재 완성 단계 가이드

처음부터 순서대로 따라가면 광고 소재 한 장을 완성할 수 있습니다.

STEP1
프레임 설정
F 단축키로 프레임을 만들고 플랫폼에 맞는 사이즈를 입력합니다 (예: 1080 × 1350)
STEP2
배경 이미지 배치
AI 생성 이미지를 프레임 안으로 드래그한 후 Shift + 모서리 드래그로 비율을 유지하며 크기를 조정합니다
STEP3
마스킹 적용 (필요 시)
도형과 이미지를 함께 선택 후 '마스크로 사용'을 적용합니다. 둥근 이미지가 필요하면 모서리 둥글기 값을 조정합니다
STEP4
텍스트 추가
T 단축키로 헤드라인·서브카피 순서로 입력합니다. 폰트·크기·색상·정렬을 속성 패널에서 설정합니다
STEP5
CTA 버튼 디자인
사각형으로 버튼을 만들고 강조 색상을 적용합니다. 그 위에 동사형 텍스트를 배치하고 그림자 효과로 입체감을 줍니다
STEP6
로고 삽입
PNG 투명 배경 로고를 불러와 상단 좌측에 배치합니다. 전체 이미지의 5~10% 크기를 유지합니다
STEP7
내보내기
SNS 광고용은 JPG, 투명 배경이 필요한 소재는 PNG로 내보냅니다

8. 핵심 정리

이것만 기억하세요
1텍스트 위계 — 헤드라인(상단·크게) → 서브카피 → CTA(하단) → 고지사항 순서를 지킵니다
2플랫폼 사이즈를 정확히 맞춰야 합니다 — 잘못된 사이즈는 잘림과 화질 저하로 이어집니다
3CTA 버튼의 5원칙 — 고대비 색상 · 충분한 크기 · 동사 텍스트 · 하단 중앙 · 입체감
4로고는 PNG 투명 배경으로, 전체 이미지의 5~10% 크기로 상단 좌측에 배치하는 것이 가장 일반적입니다
57단계 순서대로 따라가면 광고 소재 한 장을 완성할 수 있습니다

광고 소재는 이미지만 예쁘다고 끝이 아닙니다.
텍스트 위계, CTA 위치, 로고 크기까지 원칙을 지킬 때 클릭률이 달라집니다.
오늘 정리한 7단계를 따라 내 브랜드의 첫 광고 소재를 직접 만들어보세요.


추천 태그
#Figma#광고소재제작#CTA디자인 #광고디자인#SNS광고#브랜드디자인 #피그마기초#디지털마케팅#콘텐츠제작 #광고이미지#마케팅디자인#무료폰트

도움이 됐다면 공유해 주세요!

💬 카카오톡 네이버 🔗 링크 복사
※ 본 글은 학습을 목적으로 작성된 게시물로, 특정 브랜드·제품·서비스명이 언급될 수 있습니다. 이는 순수한 예시일 뿐이며, 상업적 목적은 전혀 없음을 밝힙니다.

judyabot 님의 블로그
블로그 이미지 judyabot 님의 블로그
MENU
VISITOR 오늘 / 전체