[TIL] AI 그래픽 디자이너 D-21 배너 실전 콘텐츠 제작

AI 디자인 실전 콘텐츠 제작

7-1. 배너 디자인 필수 요소 이해하기 

 

배너 목적 : 사용자의 행동을 유도하는 것이 주된 목적

• 사용자가 머무르는 시간이 매우 짧으니, 순간에 핵심을 전달하고 행동을 유도(CTA) 해야한다. 

시선집중

→

메시지 전달

→

클릭유도

 

CTA 구성 원칙 3가지

 

1. 버튼 형태로 명확하게 보여주기
단순 텍스트만 있으면 클릭 요소인지 알아보기 어려워요.
버튼 배경, 라운드, 그림자 등을 활용해 클릭 가능한 요소임을 알려주세요.

 

2. 주변 대비 확실히 하기
배경과 CTA 버튼의 컬러 대비가 중요해요.
버튼이 시각적으로 구분되어야 해요.

 

3. 시선 흐름 마지막 지점에 배치하기
시선 흐름은 보통 좌 → 우 → 아래 방향으로 내려와요.
또는 이미지 속 인물 시선 방향으로 시선이 이동해요.

 

 

대표적인 배너 활용 예시

 

배너예시

출처 : 피그마

 

랜딩페이지 상단

• 웹사이트 방문자가 가장 먼저 보게되는 위치
• 주요이벤트, 서비스 핵심 메시지 전달에 활용됨.

출처 : 쉐이크베이비

쇼핑몰 메인 및 카테고리 배너 

• 특정 상품군 유도, 시즌 프로모션 등을 시각적으로 강조
• 구매 전환율을 높이는 데 효과적

앱 프로모션 팝업   

ex) 오늘의 집, 29CM, 무신사 등

• 앱 내 이벤트, 포인트 지급, 신규 기능 안내 등
• 사용자의 즉각적인 행동을 유도하는 데 자주 사용(CTA)

 이제 어플을 켤 때 팝업 무조건 끄지말고  주의깊게 보기 :)

 

SNS 광고 연동 이미지

• 특정 상품군 유도, 시즌 프로모션 등을 시각적으로 강조
• 구매 전환율을 높이는 데 효과적

플랫폼별 배너 사이즈 체크하기

출처: 제미나이 AI제작

웹 메인 가로형 배너
사이즈 1920 × 600px
주로 홈페이지 상단 큰 공간에 배치됩니다.
가로는 Full HD 기준으로 데스크톱 화면 가로폭을 의미해요.
세로는 300~600px 사이로, 사이트 레이아웃에 따라 조정됩니다.

 

Instagram Post(피드)
사이즈 1080 × 1350px(세로형)

 

Instagram Story
사이즈 1080 × 1920px(세로형)
스마트폰 전체 화면을 꽉 채우는 세로형 콘텐츠입니다.

 

Facebook Post
사이즈 1200 × 630px(가로형)

 

Facebook Cover
사이즈 820 × 312px(가로형)

 

7-2. 카드뉴스 콘텐츠를 배너로 확장하기

• 이전 수업에서 제작한 카드뉴스를 발전시켜 시리즈 배너 제작하기

사이즈 : 1080*1350

 

사이즈 : 1200*630

폰트 :

• 메인 : 카페24 아네모네 
• 본문 : Pretendard

 

---

[느낀점]

전체적으로 필요한 실무를 직접 해보는 느낌이라 실습이 도움이 많이 되었습니다.