[피그마] 기획부터 시작하는 배너 디자인 기획
안녕하세요, 마케터트랙 여러분!
우리는 먼저 “왜 디자인을 만드는가?”를 고민해보려고 해요.
오늘부터 진행될 배너 디자인 실습의 첫 번째 단계, 기획서를 작성해보는 시간입니다.
Step 0. 목표
“실무에서는 배너를 왜 이렇게 만들까?” 실제 스타트업 실장과 콘텐츠 디자이너의 대화를 통해 배너 디자인이 어떻게 기획되고, 어디에 활용되는지 감을 잡아보세요.
•
실무에서의 배너 디자인 목적을 이해합니다.
•
실무에서 사용하는 방식으로 기획서를 직접 작성해봅니다.
배너디자인?
배너 디자인은 시각디자이너, 콘텐츠디자이너, 콘텐츠마케터등 다양한 영역에서 제작이 가능합니다!
배너 디자인은 고객이 디자인 작업물을 봤을때 단순히 이쁘다로 그치는 것이 아닌 다음 행동(결제, 고객정보등)을 이끌어내기 위한 디자인이기 때문에
고객에게 흥미가 갈수있는 카피라이팅, 홍보할 제품 or 이벤트 이미지등 마케팅 영역과 디자인 영역이 공존하는 디자인이라고 볼 수 있어요!
Step 1. 디자인 기초 개념
아래 디자인 기초 이론1 을 읽고 함께 복습하는 퀴즈를 풀어요.
디자인 기초 이론 개념 한판 정리
복습 퀴즈 (선택 과제)
Q1. 다음 중 배너에서 ‘잘못된 색상 사용’은?
•
① 메인 컬러 1개 사용
•
② 버튼과 배경을 같은 색으로 사용
•
③ 보조 색으로 구분 주기
•
④ 텍스트와 배경 색 구분
정답
Q2. 다음 중 배너에서 좋은 폰트 사용 방법은?
•
① 한 배너에 4가지 글씨체 사용
•
② 제목과 본문을 다른 글씨 스타일로 구분
•
③ 본문을 제목보다 굵게
•
④ 모든 글자를 똑같은 크기로
정답
Step 2. 이미지FX + GPT 활용하기(프롬포트 작성)
디자인 실습에 필요한 이미지를 만들기 위해 Google의 이미지 생성 AI(ImageFX)와 GPT를 활용해볼 거예요!
[0] ImageFX란?
이미지FX는 구글의 생성형 이미지 AI 도구로, 배너 디자인에 활용할 수 있는 이미지나 그래픽을 쉽게 제작할 수 있는 플랫폼이에요!
프롬프트만 가지고 빠르게 시안을 만들고, 다양한 스타일을 실험할 수 있다는 점에서 디자인 초보자와 실무자 모두에게 유용해요!
25년 8월 구글이 나노바나나라는 생성형 이미지 AI도구도 출시했습니다. 일관성 있는 이미지를 만들기로 유명한 도구에요! (사전캠프때는 이미지FX로 만들꺼에요!)이미지 FX 장점
기능 | 설명 |
텍스트 → 이미지 | 간단한 문장만으로 배너용 이미지를 생성 |
고화질 퀄리티 | 무료이미지임에도 화질이나 퀄리티가 좋음 |
무료이미지 | 피그마에 바로 활용 가능한 무료이미지 확보 가능 |
[1] ImageFX를 배너 디자인에 활용하는 이유
•
시간 절약: 스톡이미지 검색 없이 바로 생성 가능
•
컨셉 테스트: 여러 스타일을 빠르게 시뮬레이션 가능
•
맞춤화: 브랜드에 맞는 색상 톤과 느낌을 프롬프트로 직접 반영
•
비용 절감: 유료 이미지 구매 없이 활용 가능
중요: 이미지FX는 "아이디어 스케치" 도구로 사용하고, 최종 배너는 피그마에서 편집해요. [2] GPT로 ImageFX 프롬포트 사용하기
배너 디자인을 위해 프롬프트는 구체적 + 시각적 + 목적 중심으로 작성해야 합니다.
GPT에게 아래 구조를 활용해 요청하면 효율적인 결과를 얻을 수 있습니다.
GPT 프롬프트 구조
[목적] + [스타일] + [색감] + [대상] + [구체 요소]
예시) “카페 프로모션 배너용 이미지, 파스텔톤, 여성 대상, 미니멀한 배경, 커피와 디저트 포함”
요소 | 예시 |
콘셉트/목적 | 카페 신메뉴 프로모션 배너용 |
스타일 | 사진 같은 리얼리즘 / 파스텔톤 일러스트 |
색상 톤 | 부드러운 파스텔 / 강렬한 레드 계열 |
대상 고객 | 20대 여성 / IT 스타트업 직장인 |
구체적 요소 | 커피잔, 디저트, 미니멀한 배경 |
질문:
GPT야, 이미지FX에서 사용할 "카페 신메뉴 홍보 배너" 이미지를 만들 건데 프롬프트를 작성해줘.
조건은 파스텔톤, 20~30대 여성 타깃, 미니멀한 감성, 배경은 심플하게 해줘.
GPT 결과:
"A pastel-toned minimalistic cafe promotion image, featuring a latte and dessert on a clean white table, soft natural lighting, modern and cozy atmosphere, perfect for 20-30s female audience, Instagram banner style"
GPT로 프롬프트 만들어서 제작한 이미지FX 이미지
TIP
•
GPT는 "배너 목적 중심"으로 프롬프트를 구체화하는 도구에요!
•
이미지FX는 이미지의 완성도 보단 시안과 레퍼런스 생성용으로 생각해요!
•
피그마에서 타이포그래피, 여백, 버튼 등을 조정하며 최종 디자인을 완성해봐요!
Step 3. 디자인 실습 개요
Day | 실습 목표 | 도구 |
Day 1 | 배너 기획서 작성 | Notion |
Day 2 | 기획서 기반 배너 초안 제작 | 이미지FX + Figma |
Day 3 | 피드백 반영 + 시각 계층 구조 개선 | Figma |
오늘의 과제: 배너 기획안 작성
아래 브랜드 중 하나를 선택하여 배너 기획서를 작성해주세요.
•
선택지: 무신사 or 배달의민족
레퍼런스 수집
•
해당 브랜드의 배너 이미지 5장 이상 수집
•
디자인 특징을 분석해보세요 (색감, 문구, 레이아웃 등)
배너 기획서 작성
기획서는 아래 항목으로 구성됩니다.
항목 | 설명 |
배경 | 왜 이 배너를 만들까요? |
목표 | 어떤 행동을 유도할 건가요? (ex: 클릭, 가입) |
타깃 | 누가 볼까요? (성별, 연령대, 관심사 등) |
메시지 | 강조하고 싶은 문구는? |
CTA | 클릭을 유도할 버튼 문구는? |
레퍼런스 이미지 | 수집한 배너 중 가장 참고한 것 |
예시 1 : 무신사 여름 세일 배너
예시 2 : 배달의민족 신규 서비스 홍보 배너
위 예시를 참고하여, 기획안을 작성해주세요.
기획안 제출하러 가기
다음 시간 예고
다음시간에는 오늘 작성한 기획서를 바탕으로
직접 디자인 초안을 만들고,
이미지FX + Figma를 활용한 실전 배너 제작에 들어갑니다!