[피그마] 배너 디자인 제작 & 피드백
안녕하세요! 어제는 배너 디자인을 위한 기획서를 직접 작성해보셨죠?
오늘은 그 기획서를 바탕으로 실제 디자인을 피그마에서 구현해보고, 피드백을 통해 개선하는 경험까지 해보는 날입니다
Step 0. 목표
•
어제 작성한 기획서를 바탕으로 피그마에서 배너 디자인 제작
•
시각적 계층 구조 개념을 활용해 정보 전달력을 높이기
•
동료 피드백을 받아 디자인을 개선하는 경험 갖기
복습 퀴즈
어제 배운 내용을 퀴즈로 짧게 복습해볼까요?
Q1. 배너 디자인에서 가장 먼저 해야 할 일은?
•
① 색상 정하기
•
② 글자 크기 정하기
•
③ 기획서 작성하기
•
④ 이미지 찾기
정답
Q2. 배너 기획서의 핵심 요소가 아닌 것은?
•
① 배경
•
② 사용자 타깃
•
③ CTA (Call to Action)
•
④ 포토샵 레이어 수
정답
Q3. 시각적 계층 구조를 가장 잘 표현하는 요소는?
•
① 색상 대비
•
② 글자 크기
•
③ 여백
•
④ 위 모든 것
정답
Step 1. 개념 정리: 시각적 계층 구조란?
디자인은 정보를 한눈에 전달하는 구조를 갖는 게 중요합니다.
이때 사용하는 방법이 바로 시각적 계층 구조(Visual Hierarchy)예요.
시각적 계층 구조란 크기, 여백, 색상, 대비 등을 통해 매력적인 스토리를 만드는 능력이에요!
요소 | 설명 | 예시 |
크기 | 중요한 건 크게 | "50% 할인" 문구는 크게 |
색상 | 강한 색상으로 강조 | CTA 버튼은 브랜드 메인 컬러 |
여백 | 요소 간 숨 쉴 공간 | 텍스트와 이미지 사이 간격 |
정렬 | 눈의 흐름을 정돈 | 좌측 정렬로 자연스러운 시선 유도 |
Tip: "중요한 메시지 → 설명 → CTA 버튼" 순서로 구성하면 좋아요.
예시 배너 분석
아래 배너들을 보며 정보가 어떤 순서로 전달되는지 직접 살펴보세요.
무신사 배너
[무신사 배너]
•
특징: 흑백 컬러로 브랜드 톤을 강조
•
정보 구조: 이벤트 금액 → 상품 이미지 → CTA 버튼(버튼은 있는 경우가 있고 없는 경우가 있어요!)
•
장점: 군더더기 없이 시선이 할인 메시지로 바로 이동
•
가장 먼저 눈에 띄는 건 '친구 초대 이벤트'
•
그다음 혜택 내용(1천원, 2천원)
•
마지막으로 브랜드 문구(무제한 적립금)
•
→ 글자 크기 + 색상 + 여백 순으로 계층 구조 표현
튜터님의 코멘트
배달의민족 배너
[배달의 민족 배너]
•
특징: 컬러와 일러스트 활용
•
정보 구조: 카피 문구 → 캐릭터 시각 요소 → 버튼
•
장점: 브랜드 개성이 강해 사용자에게 친근함 전달
•
일러스트와 텍스트가 조화를 이룸
•
카피 문구 → 캐릭터 → CTA 버튼 흐름
•
브랜드 톤을 살린 컬러와 요소 배치
카카오 배너
•
미니멀 디자인 + 큰 메시지 강조
•
여백을 활용해 시선이 흩어지지 않음
•
명확한 시각 흐름 (상단 → 중간 메시지 → 하단 CTA)
오늘의 실습 미션
1. 배너 디자인 제작
어제 작성한 기획서를 바탕으로, 피그마에서 배너를 직접 제작해보세요.
작업 항목:
•
아트보드 사이즈: 1080×1080 또는 1200×675
•
이미지 배치 (AI 이미지 or 레퍼런스 활용)
•
컬러/폰트/버튼 적용 (기획서 기반)
•
레이아웃 구성: 여백/정렬/계층 구조 고려
배너 디자인 제출하기
2. 피드백 루프 경험
완성된 배너를 동료에게 공유하고 피드백을 받아 개선해보세요.
체크리스트 기반 피드백
•
메시지 전달력이 좋은가요?
•
버튼이 눈에 잘 띄나요?
•
여백과 정렬이 깔끔한가요?
•
브랜드 분위기와 잘 어울리나요?