3-8 이미지 보정 및 A/B 테스트용 배리에이션
1. Figma 이미지 보정 기능
1) 보정 가능한 항목
- 이미지 선택 → 우측 속성 → 채우기 → 이미지 선택 → 이미지 하단에서 보정
- 노출 : 밝기/어둡기 조절
- 역할: 이미지 전체의 밝기/어둡기 조절
- 사용: 이미지가 너무 어두우면 +20~+40
- 대비 : 선명도 조절
- 역할: 명암 차이 강조(선명도 조절)
- 사용: 평범한 이미지 → +10~+20 (선명하게)
- 채도 : 채도를 높이면 색이 선명해지고, 낮추면 색이 흐려짐
- 역할: 색상 선명도
- 채도를 높이면 색이 선명해지고, 낮추면 색이 흐려짐
- 채도 높이기: +10~+20 (생생하게), 채도 낮추기: -20~-50 (흑백 느낌)
- 온도 : 색감의 따뜻함 정도 조절
- 역할: 색감의 따뜻함 정도 조절 (따뜻함/차가움 조절)
- 따뜻하게: +20~+40 (노란빛), 차갑게: -20~-40 (파란빛)
- 색조 : 이미지에 초록색 필터/빨간색 필터 조절
- 역할: 이미지에 초록색 필터/빨간색 필터 조절
- 사용: 특수 효과
- 하이라이트 : 밝은 부분의 밝기 조절
- 역할: 밝은 부분의 밝기 조절
- 사용: 밝은 부분이 너무 밝으면 -20~-40
- 그림자 : 어두운 부분의 밝기 조절
- 역할: 어두운 부분의 밝기 조절
- 사용: 어두운 부분 밝히기 +20~+40
2. A/B 테스트
1) A/B 테스트 = 광고 최적화의 핵심
- 같은 광고의 2가지 버전을 만들어서 어느 것이 더 효과적인지 비교하는 방법입니다.
2) 왜 A/B 테스트를 해야 할까?
- 예측 불가능
- 마케터가 생각한 좋은 광고 ≠ 고객이 클릭하는 광고
- 실제 데이터로 검증 필요
- 지속적 개선
- A/B 테스트 → 성과 좋은 버전 선택 → 다시 A/B 테스트
- 반복하면 CTR 2-3배 향상 가능
- 비용 절감
- 같은 예산으로 더 많은 클릭
- 클릭당 비용(CPC) 감소
3) A/B 테스트 변수
- 주의: 한 번에 1가지 변수만 테스트하세요. 2개 이상 바꾸면 무엇이 효과적인지 알 수 없습니다.
- 변수 1: 카피 (텍스트)
- 변수 2: 비주얼 (이미지)
- 변수 3: CTA (행동 유도 문구)
- 변수 4: 색상
- 변수 5: 레이아웃
3. Figma에서 배리에이션 빠르게 만들기
1) 방법 1: 프레임 복제
- 원본 프레임 선택 → alt+드래그 → 그대로 복제
- 텍스트만 변경
2) 방법 2: 컴포넌트 활용
- 컴포넌트 = 재사용 가능한 템플릿
Figma의 강력한 기능 중 하나! 템플릿을 한 번 만들면 여러 곳에서 재사용 가능합니다.
- 인스턴스에서 수정 가능한 항목 : 오토레이아웃, 투명도, 텍스트, 색상, 선, 그림자효과
- 인스턴스에서 수정 불가능한 항목 : 레이어정렬, 위치, 크기
- 컴포넌트 만드는 법
- 컴포넌트 생성하기 : 프레임 선택 → 우클릭 → 컴포넌트 만들기 선택
- 컴포넌트 사용하기 :좌측 Assets 패널 → 컴포넌트 클릭 → ‘이 파일에서 생성됨’ 클릭 → 컴포넌트 드래그&드롭 → 인스턴스 생성
- 인스턴스 수정하기 : 텍스트, 이미지만 변경 (레이아웃은 동일)
4. [실습] A/B 테스트용 3가지 배리에이션 제작하기
[과제] 아래 브랜드를 1개 선택하거나, 실제 브랜드를 선택하여 3가지 배리에이션을 제작하세요.
브랜드 1: “퓨어슬립” (수면 베개 브랜드)
브랜드 2: “플랜티” (실내 공기정화 식물 브랜드)
브랜드 3: “마이보이스” (온라인 보이스 트레이닝 서비스)
1. 기본 템플릿
- 사이즈: 1080 x 1350
- 이미지: Midjourney 생성
- 레이아웃: 일관성 유지
2. 3가지 배리에이션
- 변수 선택: 카피, 비주얼, 또는 CTA 중 1가지
- 예: 카피 A/B/C 테스트
3. 내보내기
- JPG, 90% 품질
- 파일명: 버전A.jpg, 버전B.jpg, 버전C.jpg
※ 본 글은 학습을 목적으로 작성된 게시물로, 특정 브랜드·제품·서비스명이 언급될 수 있습니다. 이는 순수한 예시일 뿐이며, 상업적 목적은 전혀 없음을 밝힙니다.