2025 .12.09 (화) T.I.L

 

1. 오늘 학습 키워드

카드 뉴스와 배너 제작 시 유의할 점

---

2. 오늘 학습한 내용 정리

카드 뉴스와 배너의 차이

 

1. 카드뉴스 : 사용자가 페이지를 넘기거나 스크롤하면서 정보를 단계적으로 이해하게 만드는 콘텐츠

스토리의 흐름이 있고. 상대적으로 읽을거리가 많음

정보 전달이 중심이며, 메시지를 순차적으로 이해시키는 구조

마지막 페이지에 CTA(사용자가 행동하도록 이끄는 문구 혹은 요소)가 있는 경우도 있지만 정보를 읽은 후, 행동이 이어지는 콘텐츠이다.

 

2. 배너 : 사용자의 행동을 유도하는 것이 주된 목적인 콘텐츠

사용자가 머무르는 시간이 매우 짧음
스크롤 중이나 페이지 이동 중에, 스치듯 보게 되는 경우가 많다.
짧은 순간 안에 핵심을 전달하고 행동을 유도해야 한다.

---

배너 디자인의 주요 흐름

1. 시선 집중: 가장 먼저 보이는 핵심 요소(이미지 또는 메시지)를 배치

 

2. 메시지 전달: 메시지를 이해시킴

 

3. 클릭 유도: 최종적으로 CTA 버튼으로 행동을 유도하는 구조 

---

CTA 구성 원칙 3가지

CTA는 배너 디자인의 중심 요소로 3가지 구성 원칙이있다.

 

1. 버튼 형태로 명확하게 보여주기

단순 텍스트만 있으면 클릭 요소인지 알아보기 어려워,
버튼 배경, 라운드, 그림자 등을 활용해 클릭 가능한 요소임을 알려준다. 

 

2. 주변 대비 확실히 하기

배경과 CTA 버튼의 컬러 대비가 중요하기 때문에,
버튼이 시각적으로 구분되어야 한다.
 

3. 시선 흐름 마지막 지점에 배치하기

시선 흐름은 보통 좌 → 우 → 아래 방향으로 내려와서
이미지 속 인물 시선 방향으로 시선이 이동한다.

 

따라서 버튼은 방해되지 않으면서도 가장 주목받는 위치에 있어야 한다. 자연스러운 시선 이동에 따라, 내용 → CTA 버튼 순으로 이동하도록 설계하는 것이 중요하다.

---

배너가 노출되는 주요 위치

배너는 정말 다양한 위치에서 사용된다. 서비스에 처음 진입 하거나, 특정 메뉴로 이동하거나, 결제를 고려하는 순단 등 다양한 사용자 행동 포인트에서 배너는 중요한 역할을 수행한다. 어떤 플랫폼에 배너가 사용되는지 알고 제작하면 사용자가 어떤 상황에서 이 배너를 마주하는지를 예측할 수 있어 클릭으로 이어질 확률을 높일 수 있다.

대표적인 배너 활용 예시

1. 랜딩 페이지 상단
웹사이트 방문자가 가장 먼저 보게 되는 위치, 주요 이벤트나 서비스 핵심 메시지를 전달하는데 활용.

2. 쇼핑몰 메인 및 카테고리 배너
특정 상품군 유도, 시즌 프로모션 등을 시각적으로 강조하여 구매 전환율을 높이는 데 효과적이다.

3. 앱 프로모션 팝업
앱 내 이벤트, 포인트 지급, 신규 기능 안내 등 사용자의 즉각적인 행동을 유도하는데 자주 사용.

4. SNS 광고 연동 이미지
인스타그램, 페이스북, 링크드인 등 피드 스크롤 중 노출되어 클릭 후 랜딩으로 연결됨 

---

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

배너는 노출되는 플랫폼에 따라 최적화된 사이즈가 다르기 때문에 같은 콘텐츠라도 업로드되는 위치가 어디인지에 따라 이미지 크기나 비율, 화질 규정이 달라진다. 따라서 디자인 작업 전, 반드시 해당 플랫폼의 권장 사이즈를 확인해야 하며, 규격이 맞지 않으면 이미지가 잘리거나, 압축되면서 화질이 흐려질 수 있다.

 

대표 사이즈 한눈에 보기

 

1. 웹 메인 가로형 배너 (사이즈 1920 × 600px)

주로 홈페이지 상단 큰 공간에 배치.
가로는 Full HD 기준으로 데스크톱 화면 가로폭을 의미.
세로는 300~600px 사이로, 사이트 레이아웃에 따라 조정.

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

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

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

---

3. 학습하며 겪었던 문제점 & 해결 과정

• 문제: 디자인 감각훈련 2주차 진행 하는데 있어서 시각적 결과물의 구조와 원리를 분석하는 것이 다소 어려움
• 시도: 팀원들, 튜터님들 과 토의를 진행할 예정
• 해결/깨달음: -
• 다시 만나면: 혼자서 해결 하기 보다는 여러 사람의 의견을 들어보고 식견을 넓혀 보자.

---

4. 내일 학습할 내용

• 디자인 감각 훈련 2주차 진행