3-1 이미지 제작 개념과 브랜드 일관성
1. 광고 이미지의 역할과 중요성
'3초의 승부'
사용자들은 평균 3초 안에 콘텐츠를 넘길지 결정하므로, 광고 이미지는 이 짧은 순간에 승부를 봐야 합니다.
성공적인 광고 이미지는 다음 3가지 핵심 역할을 수행합니다.
- 1. 3초 안에 시선 끌기: 무한 스크롤을 중단시키기 위해 고대비 색상 조합, 사람의 얼굴 및 감정 표현, 예상 밖의 비주얼, 호기심을 유발하는 텍스트 오버레이를 활용합니다.
- 2. 브랜드 인지도 강화: 일관된 컬러와 고유한 비주얼 스타일, 자연스러운 로고 배치를 통해 로고를 자세히 보지 않아도 "이 이미지 = 우리 브랜드"라는 인식을 심어줍니다.
- 3. 메시지 전달력 극대화: 복잡한 메시지를 5~7단어로 압축하고, 제품의 특장점을 Before-After 구조 등 직관적인 비주얼로 보여주어 핵심 가치를 명확히 전달합니다.
좋은 광고 이미지의 조건
- 시각적 임팩트 (첫눈에 시선이 가는가?, 다른 콘텐츠와 차별화되는가?)
- 메시지 명확성 (무엇을 광고하는지 3초안에 알 수 있는가?, 제품의 핵심 가치가 드러나는가?, CTA가 명확한가?)
- 브랜드 일관성 (브랜드 컬러가 반영되었는가?, 브랜드 톤앤매너와 일치하는가?
- 플랫폼 최적화 (플랫폼에 맞는 비율인가?, 모바일에서 보기 좋은가?, Dead Zone을 피했는가?)
2. AI 이미지 제작 방식의 4가지 핵심 장점
전통적인 촬영 방식(모델 섭외, 스튜디오 예약 등)에 비해 AI 도구를 활용하면 비용은 1/100, 시간은 1/10 수준으로 혁신적인 절감이 가능합니다.
- 빠른 프로토타이핑: 전통적 방식이 2주 걸릴 작업을 AI는 30분 만에 10개 이상의 버전을 생성하여 즉각적인 A/B 테스트를 가능하게 합니다. (다양한 방향성 테스트 및 여러 옵션 비교 및 제시 가능)
- 무한한 크리에이티브: 우주, 판타지 배경은 물론 여름에 겨울 광고를 만드는 등 비용이나 물리적 제약으로 불가능했던 상상을 모두 구현할 수 있습니다.
- 정확한 브랜드 컬러: 조명 등으로 색감이 달라지는 실제 촬영과 달리, 프롬프트에 특정 컬러 코드(#FCE4EC 등)를 지정해 완벽하게 일관된 색감을 유지합니다.
- 플랫폼 맞춤 즉각 변형: 인스타그램 피드용(4:5)으로 만든 이미지를 파라미터(--ar 9:16 등)만 변경하여 스토리용이나 유튜브 썸네일(16:9)용으로 즉시 생성할 수 있습니다.
3. 신뢰도를 높이는 '브랜드 일관성' 3대 원칙
소비자가 피드에서 일관된 비주얼의 광고를 3번 이상 접하면 브랜드 인지도는 2.5배나 높아집니다.
이를 위한 3가지 원칙은 다음과 같습니다.
원칙 1. 컬러 팔레트 반영: 모든 이미지에 등장하는 '메인 컬러', 이를 보완하는 '보조 컬러', 그리고 CTA 버튼이나 중요 텍스트를 강조하는 대비되는 '액센트 컬러'를 전략적으로 조합해 사용합니다. (컬러 팔레트: 메인 컬러 2~3가지, 보조 컬러 1~2가지의 조합)
원칙 2. 톤에 맞는 타이포그래피(폰트): 혼란을 막기 위해 폰트는 최대 3가지(헤드라인 1, 본문 1, 강조 1)만 사용합니다 .
고급스럽고 신뢰감을 주려면 '세리프' 체를, 현대적이고 깔끔한 느낌은 '산세리프' 체를 사용하며 굵기로 임팩트를 조절합니다 .
고급스럽고 신뢰감을 주려면 '세리프' 체를, 현대적이고 깔끔한 느낌은 '산세리프' 체를 사용하며 굵기로 임팩트를 조절합니다 .
원칙 3. 일관된 이미지 스타일: 현실감과 강한 신뢰도가 필요한 경우 '사진' 스타일을, 독특하고 친근한 느낌이 필요한 경우는 '일러스트' 스타일을 일관되게 선택해야 합니다. 또한, 높은 신뢰도를 바탕으로 고객을 설득해야 할 때는 '현실적' 스타일을, 압도적인 창의성으로 강렬한 시각적 충격을 주어야 할 때는 '판타지' 스타일을 전략적으로 활용해야 합니다.
4. AI 생성부터 Figma 편집까지의 4단계 워크플로우
AI로 뽑아낸 이미지를 실제 광고 소재로 최종 완성하기 위해 가볍고 편리한 웹 기반 디자인 툴인 피그마를 활용합니다 .
- 1단계 (프롬프트 기획): ChatGPT를 활용하여 브랜드의 핵심 키워드, 색상, 스타일이 포함된 정교한 톤앤매너 프롬프트를 작성합니다 .
- 2단계 (베이스 이미지 생성): Midjourney에 프롬프트를 입력해 4개의 베이스 이미지 옵션을 뽑아본 뒤, 가장 좋은 것을 선택해 고해상도(Upscale)로 변환합니다 .
- 3단계 (Figma 최종 편집): Figma로 이미지를 가져와 헤드라인과 CTA(행동 유도) 텍스트를 오버레이하고, 브랜드 로고 삽입, 레이아웃 정렬, 밝기 및 대비 등 색상 보정을 진행합니다 .
- 4단계 (플랫폼별 내보내기): 각 플랫폼의 권장 비율에 맞춰 이미지를 자릅니다. 이때 일반적인 SNS 광고나 웹 게시용은 JPG(품질 90%)로, 투명 배경이 필요한 로고나 스티커 요소는 PNG 포맷으로 내보내는 것이 가장 효율적입니다 .
챕터 3-2 Figma 기본 인터페이스 및 핵심 기능
1. 왜 마케터는 포토샵 대신 Figma를 쓸까?
Figma는 웹 브라우저 기반의 디자인 툴로, 광고 이미지 제작 시 포토샵보다 압도적으로 유리한 점이 많습니다.
- 가볍고 빠름: 별도 설치 없이 웹에서 바로 구동되며(폰트 연동을 위해 데스크톱 앱 권장), 인터페이스가 직관적이라 초보자도 쉽게 배울 수 있습니다.
- 강력한 협업과 무료 플랜: 실시간 동시 작업이 가능하며, 3개의 프로젝트까지 무료(스타터 플랜)로 이용할 수 있어 광고 소재 제작에 충분합니다.
- 실무 활용 3대 시나리오:
- SNS 피드 이미지 대량 제작: 템플릿 하나를 만들어 복제하면, 피드 이미지 20개를 1시간 만에 만들 수 있습니다. (포토샵은 약 4시간 소요)
- A/B 테스트용 배너 제작: 마스터 컴포넌트 하나를 두고 텍스트만 다르게 여러 버전을 찍어내기 좋습니다.
- 브랜드 가이드 준수: 컬러 팔레트와 텍스트 스타일을 공유해 팀원 모두가 똑같은 톤앤매너를 유지할 수 있습니다.
2. Figma 화면 구성 완벽 이해 (4가지 영역)

- ⬅️ 좌측 (레이어 패널): 스케치북의 장수에 해당하는 '페이지'와, 화면에 올라간 요소들의 순서를 보여주는 '레이어' 목록이 있습니다. (레이어 그룹화 및 잠금 가능)
- ⏹️ 중앙 (캔버스): 무한한 작업 공간입니다.
(단축키: 확대/축소 Ctrl + 휠, 이동 Space + 드래그, 전체보기 Shift + 1, 선택한 요소에 맞추기 Shift + 2) - ⬇️ 하단 (툴바): 선택(V), 프레임(F), 도형(R/O/L), 펜(P), 텍스트(T) 등 도구를 꺼내 쓰는 곳입니다.
- ➡️ 우측 (속성 패널): 선택한 요소의 크기(W, H), 위치(X, Y), 색상(채우기), 테두리(외곽선), 효과(그림자), 내보내기 등을 세밀하게 조절합니다.
3. 실무 필수 핵심 기능 5가지 완벽 정리
① 프레임 (Frame, 단축키 F)
- 광고 이미지가 올라갈 '도화지(캔버스)'입니다.
- 우측 속성 패널에서 'Instagram 게시물(1080x1350)'처럼 플랫폼별 프리셋(미리 정해진 크기)을 한 번에 불러올 수 있어 매우 편리합니다.
② 레이어 (Layer)
- 요소가 쌓이는 순서입니다. 레이어 순서가 위쪽에 있을수록 맨 앞에, 아래쪽일수록 뒤(배경)에 배치됩니다.
- 여러 요소를 하나로 묶으려면 Shift+클릭으로 다중 선택 후 우클릭하여 그룹화(Ctrl+G)를 할 수 있고, 자물쇠 아이콘을 눌러 실수로 움직이지 않게 잠금 처리할 수 있습니다.
③ 도형 (Shape)
- 버튼이나 배경을 만드는 직사각형(R), 강조용 원(O) 등을 그릴 수 있습니다.
- 우측 속성 패널에서 색상, 모서리 둥글기, 외곽선, 바깥쪽 그림자 효과(Drop shadow)를 자유롭게 줍니다.
④ 텍스트 (Text, 단축키 T)
- 도구 모음에서 T를 누르고 클릭해 글자를 씁니다.
- 우측 속성 패널에서 폰트, 크기, 색상을 바꾸고, 가독성을 위해 행간(줄 간격)과 자간(글자 간격)을 세밀하게 조절할 수 있습니다. 글자에 외곽선이나 그림자 효과를 줘서 눈에 띄게 만들기도 합니다.
⑤ 내보내기 (Export)
- 완성된 프레임을 선택 후 우측 하단의 '내보내기(+)'를 눌러 최종 이미지로 저장합니다.
- 포맷 선택: SNS 광고나 웹 게시용은 용량이 작은 JPG, 로고나 투명 배경이 필요할 땐 무손실 PNG, 확대해도 안 깨지는 아이콘은 SVG를 선택합니다.
- 해상도 선택: 웹/SNS용은 원본 크기인 1x로, 인쇄용이나 고해상도 화면용은 크기를 2~3배 뻥튀기하는 2x, 3x로 내보냅니다.
챕터 3-3 Figma 광고 소재 템플릿 제작 및 편집 기초
1. 광고 텍스트 디자인의 3대 원칙
아무리 비주얼이 좋아도 텍스트가 안 읽히면 좋은 광고가 될 수 없습니다.
광고 텍스트는 헤드라인, 서브 카피, CTA, 고지/심의필(추가 정보)로 구성
- 원칙 1: 명확한 위계 (중요도 순서)
- 헤드라인 (Primary): 핵심 메시지. 가장 크고 굵은 산세리프체 계열로 중앙/상단에 배치합니다.
- 서브 헤드라인 (Secondary): 부연 설명. 중간 크기로 헤드라인 근처에 둡니다.
- CTA (행동 유도): 짧은 동사형 문구로 눈에 띄는 버튼 형태로 하단에 배치합니다.
- 고지/심의필: 하단 모서리에 작게 배치합니다.(눈에 띄지 않지만 읽을 수 있는 정도 크기)
- 원칙 2: 가독성 최우선
- 글자 크기는 모바일 기준 최소 14pt 이상, 행간(줄 간격)은 1.2~1.4배가 답답하거나 산만하지 않아 가장 권장됩니다.
- 배경과 텍스트의 명도 대비를 확실히 주어야 합니다 (밝은 배경엔 어두운 글씨).
- 원칙 3: 여백 활용
- 텍스트 상하좌우 및 프레임 가장자리에 숨 쉴 수 있는 여백을 충분히 두어야 합니다.
추천 한글 폰트: 깔끔하고 모던한 Pretendard(프리텐다드), 귀엽고 친근한 느낌의 나눔스퀘어, IT/스타트업 느낌의 Spoqa Han Sans, 안정적인 Noto Sans KR.
영문 폰트: Montserrat, Roboto, Inter, Playfair Display 등
2. 플랫폼별 프레임 설정과 '안전 영역'
정확한 사이즈로 만들지 않으면 이미지가 잘리거나 화질이 떨어집니다.
- 인스타그램 피드: 1080 x 1350
- 인스타그램 스토리: 1080 x 1920
🚨 안전 영역(Safe Zone) 필수: 스토리 상단(프로필/아이디)과 하단(댓글창)에는 UI로 인해 이미지가 가려지는 'Dead Zone(상하단 각 250px)'이 존재합니다. 핵심 내용은 반드시 이 영역을 피해서 중앙의 안전 영역에 배치해야 합니다.
- 유튜브 썸네일: 1280 x 720.
- 구글 웹 배너: 리더보드(728 x 90), 스카이스크래퍼(160 x 600) 등 다양하므로 한 파일에 모아두면 관리가 편합니다.
3. 이미지 마스킹(Masking) 기법
마스킹이란 생성한 이미지를 원형이나 둥근 사각형 등 '특정 도형 안'에 깔끔하게 집어넣는 기능입니다.
- Figma 캔버스에 사각형(Rectangle)을 그립니다.
- 가져온 이미지를 사각형 위에 겹치게 올립니다. (레이어 순서를 이미지가 사각형 위에 오도록)
- 이미지와 사각형을 모두 선택한 후, 우클릭하여 '마스크로 사용(Use as mask)'을 누릅니다.
- 우측 속성 패널에서 '모서리 둥글기(Corner Radius)' 값을 조절해 부드러운 형태를 만듭니다.
4. 클릭률을 높이는 CTA 버튼 디자인
광고의 최종 목적은 클릭이므로, CTA 버튼은 무조건 눈에 띄어야 합니다.
- CTA 디자인 5원칙: 주변과 확실히 구분되는 고대비 색상, 충분한 크기, 텍스트는 동사 사용, 그림자/테두리를 활용한 입체감, 그리고 하단 중앙 등 눈에 잘 띄는 위치가 중요합니다.
- 문구 작성법: "지금 구매하기", "자세히 보기", "무료 체험 시작" 등 명확한 동사형 문구를 써야 하며, "오늘만 특가", "마감 임박"처럼 긴급성을 더해주면 효과가 큽니다.
- CTA 문구 예시: 구매 유도(30% 할인받기, 오늘만 특가), 정보 유도(자세히 보기, 더 알아보기), 가입 유도(무료 체험 시작, 이메일로 받기), 앱 다운로드(지금 설치하기, 무료로 시작하기), 긴급성 추가 (오늘만 50% 할인, 마감 임박)
5. 브랜드 인지를 위한 '로고 삽입' 전략
광고에 로고가 없으면 누구의 광고인지 아무도 모릅니다. 작지만 필수적인 요소입니다.
- 형식 및 크기: 배경이 투명한 PNG 파일이어야 하며, 크기는 전체 이미지의 5 ~ 10% 가 적당합니다. 너무 크면 광고티가 심하게 나고, 너무 작으면 안 보입니다. (로고 파일이 없다면 텍스트로 삽입)
- 위치 전략:
- 상단 좌측 (가장 추천): 사람의 시선은 '좌->우, 상->하'로 이동하므로 가장 먼저 인지하게 됩니다.
- 이외에도 디자인 무드에 따라 상단 우측, 하단 중앙(CTA 아래), 하단 우측 등에 여백(약 40px)을 두고 레이어 최상단에 배치합니다.
챕터 3-4 상황별 이미지 프롬프트 구성 실습
1. 완벽한 이미지를 만드는 '프롬프트 5요소'
모든 프롬프트는 다음 순서로 작성하면 일관된 고품질 이미지를 얻을 수 있습니다.
[Subject] + [Style] + [Lighting] + [Composition] + [Color Tone] + [parameter]
프롬프트 5요소
- Subject (주제): 무엇을 그릴 것인가? (예: a premium watch).
- Style (스타일): 어떤 느낌으로 표현할 것인가?
(예: product photography(제품 중심), lifestyle photography(일상 감성), minimalist 등). - Lighting (조명): 어떤 빛으로 표현할 것 인가?
(예: studio lighting(스튜디오), natural lighting(자연광), golden hour(일몰)). - Composition (구도): 어떤 각도에서 찍을 것인가?
(예: 구도 키워드 - centered(중앙), close-up(클로즈업), 앵글 키워드 - top-down view(탑뷰), eye-level (눈높이)). - Color Tone (색감): 어떤 분위기로 표현할 것인가? (예: warm tones(따뜻한), pastel colors(파스텔)).
- (필수 추가) 비율 파라미터: 문장 맨 끝에 --ar 4:5 (인스타 피드용), --ar 9:16 (스토리용) 등 비율을 지정합니다.
자주 쓰는 비율:
--ar 1:1 (정사각형, 1080x1080)
--ar 4:5 (Instagram 피드, 1080x1350)
--ar 9:16 (스토리/릴스, 1080x1920)
--ar 16:9 (YouTube 썸네일, 1280x720)
2. 업종별 맞춤 이미지 프롬프트 전략
- 이커머스 (쇼핑몰): 제품의 디테일과 색상을 100% 명확히 보여주고, 구매 욕구를 자극하는 것이 목표입니다.
- 전략: 제품에 100% 집중, 깔끔한 배경, 전문적인 느낌, 제품 색상 정확히 표현
- 핵심 키워드: white background (또는 minimal background), clean, centered, studio lighting.
- 뷰티 (화장품/스킨케어): 텍스처(질감)와 고급스러운 느낌, 피부와의 조화를 강조해야 합니다.
- 전략: 디테일 강조 + 감성 연출 (제품 디테일 클로즈업, 텍스처 강조, 부드럽고 여성스러운 분위기 등)
- 핵심 키워드: dewy skin(이슬 맺힌 피부), texture, close-up, soft pink lighting, luxurious mood.
- 푸드 (음식/식당): 먹음직스러운 신선함과 감성적인 연출로 식욕을 자극해야 합니다.
- 전략: 감성 연출형 (먹음직 스럽게, 따뜻한 조명, 김이 모락모락, 생생한 식감)
- 핵심 키워드: steam rising(김이 모락모락), warm lighting, appetizing, cinematic food photography.
- 앱 서비스 (App/SaaS): 실제 사용 상황을 담은 현대적이고 편안한 라이프스타일 연출이 필요합니다.
- 전략: 라이프스타일 연출 (실제 사용 장면, 현대적이고 밝은 분위기, 모바일 기기 활용)
- 핵심 키워드: using mobile app, modern lifestyle, bright daylight, casual mood, coffee shop.
3. ChatGPT를 활용한 프롬프트 자동 작성법
영어 프롬프트를 직접 쓰기 막막하다면, 브랜드가 가진 '5가지 핵심 키워드'를 ChatGPT에 입력해 번역 및 조합을 요청하면 됩니다.
- 1단계 (브랜드 키워드 준비 및 입력): "우리 브랜드 키워드는 [자연적인, 따뜻한, 진정성 있는, 미니멀한, 편안한]이야. 이걸 Midjourney용 영문 키워드로 변환하고 이유를 설명해 줘"라고 요청합니다.
- (결과 예시: 자연적인 ➡️ natural aesthetic, botanical elements 등으로 변환됨).
- 2단계 (광고 이미지 상황 설정 및 프롬프트 조합): "비건 립스틱을 대리석 테이블 위에 둔 상황으로, 앞서 변환한 키워드를 섞어서 미니멀, 라이프스타일, 화보 스타일 3가지 버전의 프롬프트를 영어로 만들어 줘"라고 요청합니다.
- 3단계 (프롬프트 검토 및 파라미터 추가): ChatGPT가 짜준 프롬프트 끝에 --ar 4:5 --v 7 --q 2(비율, 버전, 품질)를 붙여 Midjourney에 입력합니다. 결과물이 어둡다면 ChatGPT에게 "더 밝고 화사하게 수정해 줘"라며 대화형으로 점진적 개선을 진행합니다.
- 4단계 (Midjourney 테스트 및 수정): 이미지 확인 후 마음에 들지 않으면 ChatGPT에게 프롬프트 수정 요청
4. 프롬프트 작성 시 '이것만은 피해주세요' (주의사항)
- 너무 긴 문장 금지: AI가 혼란스러워하므로 20단어 이내로 핵심만 간결하게 적어야 합니다.
- 부정 표현 금지: "no dark background(어두운 배경 빼줘)" 대신 "white background(흰 배경으로 해줘)"처럼 긍정형으로 지시해야 합니다.
- 모순된 키워드 금지: "미니멀하면서도 복잡한(minimalist but detailed and complex)"처럼 충돌하는 단어는 피해야 합니다.
- 저작권 우려 단어 금지: "iPhone", "Nike logo", 유명인 이름 등은 저작권 문제가 발생할 수 있어 사용을 금합니다.
챕터 3-5 플랫폼별 광고 이미지 제작 (Instagram 피드형)
1. 인스타그램 피드 최신 트렌드 3가지
- 트렌드 1: 정방형(1:1)에서 '세로형(4:5)'으로 변화
- 과거 1080x1080 사이즈에서, 이제는 모바일 화면을 더 넓게 차지해 시선 집중도를 높일 수 있는 1080x1350 (4:5 비율)이 대세입니다.
- 트렌드 2: 업종에 따른 '미니멀 vs 텍스트 중심' 스타일 분화
- 미니멀: 텍스트를 최소화하고 여백을 두어 감성적이고 고급스러운 느낌을 줍니다. (패션, 뷰티, 라이프스타일 추천).
- 텍스트 중심: 큰 텍스트와 강한 대비로 정보 전달과 실용성을 극대화합니다. (교육, 금융, 커머스 추천).
- 트렌드 3: 피드 전체를 하나의 작품으로 만드는 '그리드 일관성'
- 프로필 화면의 3열 그리드를 고려해, 3개/6개 단위로 색상 패턴을 반복하거나(색상 통일), 제품과 텍스트를 교차 배열(체스판 패턴)하여 시각적 리듬감을 줍니다. + 레인보우 전략 (색상 그라데이션을 통해 시각적 화려함을 줌)
2. 가독성을 극대화하는 '텍스트 배치' 원칙
인스타그램 피드에서 텍스트는 무조건 '가독성'이 최우선입니다.
- 원칙 1: 화면 3등분 전략
- 상단 1/3: 강력한 임팩트를 주는 헤드라인이나 브랜드명 배치.
- 중앙 1/3: 텍스트를 비우고 '제품 이미지' 자체에 시선이 가도록 강조.
- 하단 1/3: 구체적인 혜택이나 행동을 유도하는 CTA 배치.
- 원칙 2: 폰트 크기
- 모바일 환경을 고려해 핵심 메시지인 헤드라인은 48~70pt, 부연 설명인 서브 헤드라인은 24~36pt 수준을 유지
- 원칙 3:대비 강한 색상
밝은 배경 → 어두운 텍스트, 어두운 배경 → 밝은 텍스트, 복잡한 배경 → 반투명 박스 깔기 - 복잡한 배경에서 글자 살리기 (3가지 스킬)
- 배경이 복잡해 글씨가 안 보일 때는 1) 반투명 사각형 (검은색 50% 투명도 등)을 깔거나, 2) 바깥쪽 그림자 효과를 주거나, 3) 텍스트에 외곽선(2px)을 추가하여 가독성을 강제로 확보합니다.
3. Midjourney 피드 이미지 생성 실무
- 원하는 이미지를 뽑기 위해 주제 + 친환경 등 주변 요소 + 스타일(제품 사진 등) + 조명 + 구도 + 색감의 프롬프트 공식을 활용합니다.
- 인스타그램 피드 규격에 맞추기 위해 프롬프트 맨 끝에 반드시 --ar 4:5 파라미터를 붙여 세로형 이미지를 생성합니다.
- 4개의 시안 중 마음에 드는 것을 골라 해상도와 디테일을 높이는 'Upscale' 작업을 거친 후 저장합니다.
4. Figma 최종 편집 프로세스 6단계
Midjourney로 뽑은 배경 이미지를 Figma로 가져와 최종 광고 소재로 조립합니다.
- Step 1 (프레임 생성): 소셜 미디어 프리셋에서 'Instagram 게시물(1080x1350)' 사이즈의 캔버스를 엽니다.
- Step 2 (이미지 배치): 이미지를 드래그 앤 드롭한 후, Shift 키를 누른 채 늘려 프레임에 꽉 차게 맞춥니다.
- Step 3 (색상 보정): 우측 패널의 채우기 속성에서 노출(밝기), 대비, 채도, 온도 등을 조절해 브랜드 무드에 맞게 색감을 세밀하게 보정합니다.
- Step 4 (텍스트 추가): 중앙이나 하단에 헤드라인을 눈에 띄게 추가하고 그림자 효과 등을 적용합니다.
- Step 5 (로고 삽입): 전체 이미지 크기의 5~10% 사이즈로 조정하여 광고티가 너무 나지 않으면서도 인지가 되게 합니다. 상단 좌측 모서리에서 40px 여백을 두고 배치하는 것이 가장 추천됩니다.
- Step 6 (내보내기): 인스타그램 업로드 용량 제한인 8MB 이하에 맞추어, 인쇄 수준의 고화질이 필요하면 PNG로, 일반적으론 JPG로 내보내기(Export) 합니다.
챕터 3-6 : 플랫폼별 광고 이미지 제작 (인스타그램 스토리)
1. 인스타그램 스토리 광고의 특성과 '안전 영역'
스토리는 스마트폰 전체 화면을 차지하여 몰입도가 100%에 달하지만(이미지, 텍스트 명확), 정해진 시간(또는 스와이프) 후 빠르게 넘어가 버리므로 메시지가 한눈에 들어와야 합니다.
- 기본 규격: 1080 x 1920px (9:16 세로형 비율).
- 안전 영역 (Safe Zone) 사수 필수:
스토리 화면의 상단 250px(계정 프로필 영역)과 하단 250px(댓글 및 좋아요 영역)에는 인스타그램 자체 UI가 덮이게 됩니다.따라서 헤드라인, 제품 정보, 로고 등 핵심 내용은 반드시 상하단 250px을 제외한 중앙의 안전 영역(1080 x 1420px) 안에 배치해야 잘리지 않고 고객에게 전달됩니다.
2. 클릭을 부르는 CTA 배치 전략
CTA = 행동 유도
스토리 광고의 최종 목적은 '링크 클릭'을 유도하는 것입니다.
- 이미지 자체에 버튼을 그리는 것보다, 인스타그램 자체의 '링크 스티커' 기능을 사용하는 것이 일반적입니다.
- 배치 팁: 링크 스티커는 이미지나 중요한 텍스트를 가리지 않으면서도, 사람의 시선 흐름(위에서 아래로)에 자연스럽게 닿는
안전 영역 내 가장 하단에 배치하는 것이 제일 효과적입니다.
3. Midjourney 세로형 이미지 생성 팁
스토리용 이미지를 Midjourney로 뽑을 때는 피드용과 프롬프트 비율 설정이 다릅니다.
- 주제 + 스타일 + 구도 + 조명 + 무드의 공식을 사용하되, 문장 맨 끝에 반드시 세로형 비율을 뜻하는 --ar 9:16 파라미터를 입력해야 합니다.
- 생성된 4개의 시안 중 가장 마음에 드는 것을 선택해 화질을 높이는 'Upscale'을 진행한 후 다운로드합니다.
4. Figma 스토리 맞춤 편집 5단계 워크플로우
- Step 1 (프레임 및 가이드 설정): 'Instagram 스토리(1080x1920)' 프레임을 열고 가장 먼저 우측 속성의 '레이아웃 가이드' 기능으로 상/하단에 각각 높이 250px의 행(Row)을 만들어 안전 영역 경계선을 시각적으로 표시해 둡니다.
- Step 2 (이미지 배치): Midjourney 이미지를 가져와 Shift 키를 누른 채 드래그하여 프레임에 꽉 차게 맞춥니다.
- Step 3 (텍스트 추가): 피드보다 화면이 크고 빨리 넘어가기 때문에 텍스트 크기를 더 키워야 합니다 (110pt 수준). 글자는 중앙에 정렬하되 반드시 빨간선(안전 영역) 안쪽에 위치하는지 확인합니다.
- Step 4 (브랜드 로고): 전체 이미지 크기의 5~8% 크기로 조절하여, 안전 영역 내의 상단 중앙이나 하단 중앙에 배치합니다.
- Step 5 (내보내기): 완성된 레이어를 1x 크기, JPG 형식으로 내보내기 하여 저장합니다.
- Step 6 (CTA 버튼 추가): 인스타그램 게시물 업로드 전 링크 스티커 선택, 링크 및 CTA 문구 삽입
챕터 3-7 플랫폼별 광고 이미지 제작 (배너·썸네일형)
1. 배너·썸네일의 핵심 목표와 '작은 공간' 생존법
배너·썸네일의 목표: 클릭률(CTR) 최대화
- 광고가 노출된 횟수 대비 사람들이 클릭한 비율인 '클릭률(CTR)'을 높이는 것이 궁극적인 목표입니다.
- 일반적으로 CTR이 3% 이상이면 우수한 것으로 평가합니다.
- 클릭을 이끌어내기 위해서는 '강렬한 비주얼, 명확한 카피, 호기심 유발' 이 세 가지 요소가 반드시 갖춰져야 합니다.
특징: 작은 크기에서도 가독성 확보
- 유튜브 썸네일은 모바일에서 작게 보일 때 100x56px까지 작아지며, 웹 배너 역시 728x90px처럼 가로로 좁고 긴 극단적인 형태로 노출되곤 합니다.
- 글씨가 작으면 아예 읽히지 않고, 비주얼이 복잡하면 무엇인지 알아볼 수 없다는 치명적인 환경적 제약을 가집니다.
- 이를 위해 요소 3개 이하의 단순한 구도, 최소 36pt 이상의 큰 텍스트, 고대비 색상을 활용해야함
'작은 공간' 생존법
- 고대비 색상: 배경과 텍스트가 확실히 구분되어야 합니다.
검정+노랑(경고/긴급), 파랑+주황(IT/테크), 빨강+흰색(할인/세일), 검정+흰색(프리미엄) 조합이 대표적입니다.
(Tip: Figma에서 채우기 컬러 선택 후 윗부분의 태극기 모양을 누르면 'n:1' 형태의 대비 수치를 확인할 수 있습니다) - 크고 굵은 폰트: 썸네일은 최소 70pt 이상, 배너는 60pt 이상이어야 하며, 두께는 Bold 이상 (Extra Bold 권장)'이 필수입니다 (추천: Pretendard Extra Bold 등).
- 단순한 구도 (3요소 법칙): '메인 비주얼(얼굴/제품) + 헤드라인 텍스트 + 로고(부가정보)' 딱 3가지 요소만 명확하게.
- 아이콘/이모지 활용: 시선을 집중시키고 메시지를 직관적으로 강화하는 역할을 합니다.
(Tip: 이모지 추천 사이트 -Emojipedia, emojimix by Tikolu)
2. 클릭을 부르는 YouTube 썸네일 특화 전략
유튜브는 조회수의 50% 이상이 썸네일에서 결정됩니다. (권장 사이즈: 1920x1080, JPG 형식, 100~500KB).
- 사람의 얼굴과 감정: 사람 얼굴이 있으면 CTR이 30% 상승합니다. 놀람, 웃음 등의 감정이 담긴 표정을 클로즈업하여 화면의 30~50%를 채우는 것이 효과적입니다.
- 호기심 유발 텍스트 (4가지 패턴): 거짓 낚시(클릭베이트)가 아닌 실제 내용에 기반해 10자 내외로 짧고 강렬하게 써야 합니다.
- 질문형: "이거 모르면 손해", "정말 이렇게 달라져?"
- 충격형: "믿을 수 없는 반전", "은근히 놀라운 변화"
- 숫자형: "오늘부터 쓸 이유 3가지", "TOP 5"
- Before-After형: "1주 전 vs 지금", "이렇게 맑아집니다"
3. 실전 썸네일 제작 워크플로우
썸네일은 출연자나 제품이 명확히 보여야 하므로, 전체 이미지를 한 번에 AI로 뽑지 않고 조립하는 방식을 씁니다.
- ChatGPT 기획 프롬프트 입력: 제품과 타깃을 입력해 썸네일 컨셉, 문구, 표정, 그리고 Midjourney용 프롬프트(배경 전용)를 요청합니다.
- Midjourney 배경 이미지 생성: --ar 16:9 비율로 텍스트를 얹기 좋은 빈 배경(사람/사물 없음)만 생성합니다.
- 프롬프트에 맞는 영상 잘라 누끼 따기: 실제 영상 속 출연자나 제품 이미지의 배경을 외부 툴(미리캔버스 등)로 지웁니다.
- Figma에서 프레임 생성 및 이미지, 텍스트 배치: 1280x720 프레임을 열고 '배경 ➡️ 인물(제품) ➡️ 텍스트(외곽선/그림자 추가) ➡️ 로고' 순으로 배치합니다.
- 로고 및 이미지 추가: 로고 - 상단 왼쪽 or 오른쪽 (크기 5-10%), 디자인 - 이모지 or 그림자 추가
4. 웹 배너 (디스플레이 광고) 규격
구글 Ads, 네이버 GFA, 카카오 비즈보드 등에서 활용되는 웹 배너는 정해진 규격과 최적의 배치 비율이 존재합니다.
- 가장 많이 쓰이는 표준 3대 사이즈:
- 300 x 250 (중형 직사각형): 상단 헤드라인(30%) / 중앙 비주얼(50%) / 하단 CTA(20%)로 나눕니다.
- 728 x 90 (리더보드): 좁고 긴 공간. 좌측 로고(20%) / 중앙 텍스트(60%) / 우측 CTA(20%) 순으로 시선이 흐르게 합니다.
- 336 x 280 (대형 직사각형)
챕터 3-8 이미지 보정 및 A/B 테스트용 배리에이션
1. Figma를 활용한 이미지 보정 기초
전문 툴인 포토샵이 없어도 Figma의 기본 기능만으로 광고 이미지에 충분한 색상 보정이 가능합니다.
우측 속성 패널의 '채우기(Fill) ➡️ 이미지 아이콘'을 눌러 다음 값들을 조절합니다.
- 노출(밝기): 어두운 이미지를 밝힐 때 (+20~+40).
- 대비(명암 차이): 선명도를 높이고 싶을 때 (+10~+20).
- 온도: 따뜻한 노란빛(+20~+40) 또는 차가운 파란빛(-20~-40).
- 채도: 색상 선명도 (높이면 색이 선명해지고, 낮추면 흐려짐) (채도 높이기: +10~ +20, 채도 낮추기: -20 ~ -50)
- 하이라이트: 밝은 부분의 밝기 조절 (-20 ~ -40)
- 색조: 이미지에 초록색/빨간색 필터 조절 (일반적 사용 X)
- 그림자: 어두운 영역만 선택적으로 밝게 살릴 때 (+20~+40).
(Tip: 자주 쓰는 보정 값 레시피를 메모장에 기록해두면 일관성 유지에 좋습니다.)
2. 광고 최적화의 핵심: A/B 테스트
A/B 테스트란 같은 광고의 2가지 버전을 만들어 어느 것이 클릭률(CTR)이 높은지 검증하는 방법입니다.
- 왜 해야 할까? 마케터의 감보다 실제 데이터로 검증이 필요하며, 지속적 개선을 클릭률을 2~3배까지 높이고 비용을 절감할 수 있습니다.
- 철칙: 무조건 한 번에 1가지 변수만 테스트해야 합니다. 무엇 때문에 성과가 달라졌는지 명확히 알기 위함입니다.
- 주요 테스트 변수: 카피(혜택 vs 긴급성), 비주얼(제품 확대 vs 사용 장면), CTA 버튼 색상(빨강 vs 파랑), 레이아웃 등.
3. Figma 배리에이션(변형) 초고속 제작법
- 프레임 복제: 가장 직관적인 방법으로, 원본 프레임을 선택 후 Alt(Option) + 드래그하여 복제한 뒤 텍스트나 이미지만 쏙쏙 바꿉니다.
- 컴포넌트 기능 (고급): 원본 템플릿을 '컴포넌트(Ctrl+Alt+K)'로 만들면, 복사본(인스턴스)들의 텍스트나 색상을 한 번에 수정할 수 있어 대량 작업 시 매우 강력합니다. (같은 레이아웃 내 다른 내용을 넣을 때 사용하면 좋음)
- 내보내기: 여러 개의 테스트용 프레임을 Shift+클릭으로 다중 선택한 뒤 한 번에 내보낼 수 있으며, 파일명(예: 버전A_카피1.jpg)을 명확히 써두면 관리가 편합니다.
챕터 3-9 시각적 통일성 & 피드 구성 실습
1. 인스타그램 피드 3x3 '그리드' 전략
사용자가 프로필을 방문했을 때 보이는 첫 9개(3x3) 게시물이 팔로우를 결정짓는 핵심입니다.
시선은 전체를 훑은 뒤 첫 줄(최근 3개)로 향하므로, 게시물은 가급적 3개 또는 6개 단위로 묶어서 계획 (색상 패턴 반복, 메시지 연결 또는 비주얼 조화)해야 합니다.
성공적인 피드 그리드의 공통점: 일관된 색상 팔레트, 반복되는 레이아웃, 브랜드 정체성 명확
2. 시각적 통일성(일관성)을 만드는 3대 요소
일관성은 브랜드의 전문성과 고객이 브랜드를 신뢰하는 요소로 직결됩니다.
- 요소 1: 색상 팔레트 통일: 2~3가지의 메인/보조 컬러만 사용합니다.
- 요소 2: 레이아웃 패턴 반복: 텍스트 위치나 여백을 규칙적으로 유지하거나, 제품/사람을 교차 배치해 리듬감을 줍니다.
- 요소 3: 필터 및 보정 스타일: 모든 피드에 동일한 '온도'와 '대비' 레시피를 적용합니다.
3. '3장 1세트' 피드 기획의 3가지 유형
- 스토리텔링형: 1장씩 내용이 이어지도록 구성 (티저 ➡️ 공개 ➡️ 구매 유도 CTA) 신제품 출시 과정에 사용
- 비주얼 통일형: 같은 배경/조명 톤에서 제품(색상 등)만 바꿔 보여줌 (가장 깔끔하고 추천됨). 제품 라인업 소개에 사용
- 메시지 분할형: 큰 텍스트나 이미지를 3장으로 쪼개어 올려, 프로필에서 한 줄로 이어지게 보임.
4. Midjourney 연속성 이미지 생성 팁
- 프롬프트 유지: 주변 배경, 조명, 스타일 키워드는 그대로 복사해 붙여넣고 맨 앞의 주제(Subject) 단어만 바꿉니다.
- 스타일 레퍼런스(--sref) 활용: 기준이 되는 첫 번째 이미지를 미드저니에 업로드한 뒤,
프롬프트 끝에 --sref [이미지 주소] --sw 100을 입력하면 동일한 무드와 스타일의 이미지를 매우 쉽게 뽑아낼 수 있습니다.
5. Figma의 '그리드 시스템' 활용법
레이아웃 가이드 설정 방법
캔버스에서 작업할 '프레임'을 클릭하여 선택 → 화면 우측 속성 패널에서 '레이아웃 가이드' 메뉴를 찾아 '+' 버튼을 클릭합니다.
3가지 그리드 유형과 용도
- 그리드(격자): 바둑판 같은 촘촘한 정사각형 칸 형태입니다. 주로 아이콘을 세밀하게 정렬할 때 사용합니다.
- 행(가로 행): 가로 방향으로 줄을 긋는 형태입니다. 상하 간격을 맞추어 시각적인 수평 리듬을 만들 때 사용합니다.
- 열(세로 컬럼): 세로 방향으로 기둥을 세우는 형태입니다. 웹사이트나 잡지의 텍스트 레이아웃을 잡을 때 가장 널리 쓰이며, 기둥의 개수(컬럼 수)와 너비를 자유롭게 설정할 수 있습니다
Instagram 피드에 적합한 그리드: 열 - 12 또는 행 - 3
웹/모바일 표준인 '12컬럼' 설정
효과: 모든 요소가 정확히 정렬되고 전문적인 느낌을 줌
피그마 우측 패널의 '레이아웃 가이드'에서 + 버튼을 누른 뒤, 아래의 4가지 값만 그대로 입력하시면 완벽한 세팅이 끝납니다.
- 유형: 열(Columns) 선택
- 개수(Count): 12 (기둥을 12개 세웁니다)
- 유형(Type): 늘리기(Stretch) (화면 크기에 맞춰 유연하게 변합니다)
- 마진(Margin): 40 (안전 영역을 위해 화면 맨 좌우 가장자리에 40만큼의 여백을 둡니다)
- 간격(Gutter): 20 (기둥과 기둥 사이의 간격을 20으로 띄웁니다)
이후 텍스트나 이미지를 컬럼에 맞춰 배치
'강의 내용 요약 정리' 카테고리의 다른 글
| 광고 캠페인의 이해 - 챕터 1,2,3 요약 (0) | 2026.06.26 |
|---|---|
| AI를 활용한 광고 콘텐츠 제작 - 챕터 6 요약 정리 (0) | 2026.06.05 |
| AI 활용한 광고 콘텐츠 제작 - 챕터 2 요약 정리 (0) | 2026.05.29 |
| AI 활용한 광고 콘텐츠 제작 - 챕터 1 요약 정리 (0) | 2026.05.29 |
| AI를 활용한 광고 기획법 - 챕터 1 요약 정리 (0) | 2026.05.27 |