콘텐츠 마케터 5기 본캠프 36일차 Figma 이미지 보정 + 광고 A/B 테스트 변수 설정 방법

 

같은 이미지라도 보정 값 하나로 느낌이 완전히 달라지고, 같은 카피라도 한 단어 차이로 클릭률이 갈립니다.
감으로 좋다고 생각한 광고와 실제 고객이 클릭하는 광고는 다를 수 있습니다.
Figma 색상 보정 7가지 항목부터 A/B 테스트 변수 설정, 배리에이션 빠르게 만드는 법까지 정리합니다.

목차

1. Figma 이미지 보정 기능 — 7가지 항목
2. A/B 테스트란?
3. 테스트 변수 설정 방법 5가지
4. Figma에서 배리에이션 빠르게 만들기
5. 배리에이션 테스트 시나리오 예시
6. 핵심 정리

---

1. Figma 이미지 보정 기능 — 7가지 항목

Figma에는 광고 이미지 제작에 충분한 보정 기능이 내장되어 있습니다.
브랜드 컬러에 맞게 한 번에 한 항목씩 조정하면서 이미지 색감을 변경합니다.

노출 (Exposure)+20 ~ +40

 

 

이미지 전체의 밝기·어둡기를 조절합니다. 너무 어두울 때 사용합니다.

대비 (Contrast)+10 ~ +20

 

 

명암 차이를 강조해 선명도를 조절합니다. 평범한 이미지를 선명하게 할 때 사용합니다.

채도 (Saturation)+10~+20 / -20~-50

 

 

색상의 선명도를 조절합니다. 높이면 생생해지고 낮추면 흑백에 가까워집니다.

온도 (Temperature)±20 ~ ±40

 

 

색감의 따뜻함 정도를 조절합니다. 양수는 노란빛, 음수는 파란빛을 띱니다.

색조 (Hue)상황별

 

 

이미지에 초록·빨강 필터를 조절합니다. 특수 효과가 아니면 일반적으로 사용하지 않습니다.

하이라이트 (Highlights)-20 ~ -40

 

 

밝은 부분의 밝기를 조절합니다. 너무 밝을 때 낮춰서 사용합니다.

그림자 (Shadows)+20 ~ +40

 

 

어두운 부분의 밝기를 조절합니다. 디테일을 살리기 위해 밝게 조정합니다.

---

2. A/B 테스트란?

마케터가 좋은 광고라고 생각한 것과 실제 고객이 클릭하는 광고는 다를 수 있습니다.
이 간극을 데이터로 검증하는 과정이 A/B 테스트입니다.

이유 01

예측 불가능성

마케터의 직관과 실제 고객 반응은 다를 수 있어 데이터 검증이 필요합니다.

이유 02

지속적 개선

성과가 좋은 버전을 선택하고 반복 테스트하면 클릭률을 끌어올릴 수 있습니다.

CTR 2~3배 향상

이유 03

비용 절감

같은 예산으로 더 많은 클릭을 유도해 클릭당 비용(CPC)을 감소시킵니다.

---

3. 테스트 변수 설정 방법 5가지

어떤 요소가 효과적인지 정확히 파악하려면 한 번에 1가지 변수만 테스트해야 합니다.
여러 요소를 동시에 바꾸면 무엇이 효과를 만들었는지 알 수 없습니다.

1

카피

텍스트 내용을 변경합니다

"지금 구매하면 30% 할인" vs "오늘만 특가! 30% 할인"

2

비주얼

제품 클로즈업, 사람 사용 장면, 라이프스타일 장면 등 이미지를 변경합니다

3

CTA

행동 유도 문구를 변경합니다

"지금 구매하기" vs "자세히 보기"

4

색상

버튼 등의 색상을 빨간색, 파란색 등으로 변경합니다

5

레이아웃

텍스트를 상단, 하단, 중앙 등 다른 위치에 배치합니다

---

4. Figma에서 배리에이션 빠르게 만들기

테스트할 버전이 여러 개일 때, 매번 처음부터 새로 만들 필요는 없습니다.

방법 1 — 프레임 복제 (기본)

• 원본 프레임 선택 후 Alt 키를 누르고 드래그하여 복제
• 복제된 프레임에서 테스트할 변수만 변경
• 소량 버전 제작에 적합

방법 2 — 컴포넌트 활용 (고급)

• 원본을 마스터 컴포넌트로 등록
• 마스터 수정 시 모든 인스턴스가 자동 업데이트
• 대량 배리에이션 제작에 유용
• 인스턴스는 텍스트·색상만 수정 가능 (레이아웃·크기는 고정)

컴포넌트 만드는 방법

프레임 선택 후 우클릭 → '컴포넌트 만들기'를 클릭해 생성합니다.
좌측 Assets 패널에서 만들어진 컴포넌트를 드래그 앤 드롭하면 복사본(인스턴스)이 생성됩니다.

---

5. 배리에이션 테스트 시나리오 예시

3개 버전을 만들었다면, 아래 순서로 실제 테스트를 진행합니다.

STEP 1

Meta 광고에 3개 버전 모두 등록

›

STEP 2

각 1만 원씩 광고 집행

›

STEP 3

1주일 후 CTR 확인

›

STEP 4

가장 높은 버전에 예산 집중

A/B 테스트의 핵심

적은 예산으로 먼저 검증하고, 데이터가 증명한 버전에만 예산을 집중합니다.
감으로 결정하지 않고, 숫자로 결정하는 것이 A/B 테스트의 본질입니다.

---

6. 핵심 정리

이것만 기억하세요

1Figma 보정 7항목 — 노출·대비·채도·온도·색조·하이라이트·그림자를 한 번에 하나씩 조정합니다

2A/B 테스트는 직관과 데이터의 간극을 메우는 과정 — CTR을 2~3배 향상시킬 수 있습니다

3한 번에 1가지 변수만 테스트해야 어떤 요소가 효과적인지 정확히 파악할 수 있습니다

4대량 배리에이션이 필요하면 프레임 복제보다 컴포넌트 기능이 효율적입니다

5소액으로 먼저 테스트하고, 데이터가 증명한 버전에 예산을 집중하는 것이 핵심입니다

좋은 광고는 한 번에 완성되지 않습니다. 보정과 테스트를 반복하며 다듬어집니다.
오늘 정리한 보정 기준과 5가지 테스트 변수를 다음 광고 캠페인에 바로 적용해보세요.

---

추천 태그

#AB테스트#Figma이미지보정#광고배리에이션 #CTR최적화#광고테스트#Figma컴포넌트 #디지털마케팅#콘텐츠제작#광고소재제작 #메타광고#광고기획#마케팅데이터 #TIL#내일배움캠프

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

💬 카카오톡 네이버 X(트위터) 🔗 링크 복사

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