콘텐츠는 단순히 보기 좋게 만드는 것만으로 충분하지 않다. 빠르게 스크롤하는 피드 안에서 먼저 시선을 멈추게 하고, 한 화면 안에서 전달하고 싶은 메시지를 명확하게 보여주어야 한다.
01. 피드에서는 0.5초 안에 시선을 멈춰야 한다
SNS 피드에서는 콘텐츠를 천천히 읽기보다 빠르게 넘겨보는 경우가 많다. 따라서 첫 화면의 역할은 모든 내용을 설명하는 것이 아니라 스크롤을 멈추고 다음 내용을 보게 만드는 것이다.
시선을 멈추게 하는 요소 4가지
얼굴과 눈 - 사람은 얼굴에서 멈춘다. 과하면 브랜드가 아니라 모델이 남는다.
움직임 - 정지된 것들 사이에서 움직이면 걸린다. 계속 움직이면 다시 무시된다.
큰 여백 - 빽빽한 피드에서 빈 화면 자체가 대비를 만든다. 다만 여백만으로는 2번은 안 통한다.
숫자 - 구체적인 숫자는 문장보다 빨리 읽힌다. 하지만 근거 없는 숫자는 신뢰를 깎는다.
피드에서 튀는 방법은 화려해지는 게 아니라 주변과 달라지는 것이다
02. 첫 화면
첫 화면의 역할은 설명이 아니라 다음 화면으로 넘기는 것이다.
첫 화면에 모든 걸 담으려 하면 아무것도 전달되지 않는다.
한 장에 한 페이지
카드뉴스 한 장에 여러 가지 메시지를 동시에 담으면 정보의 우선순위가 흐려진다.
전달할 내용이 세 가지라면 한 장에 모두 넣기보다 세 장으로 나누어 각각 하나씩 전달하는 방식이 더 명확하다.
한 장에 하나. 할 말이 셋이라면 3장을 만든다.
한 장의 정보는 4단계로 쌓는다
한 화면의 정보는 다음과 같은 순서로 구성할 수 있다.
훅 → 근거 → 비주얼 → 버튼(CTA)
1. 훅
화면에서 가장 먼저 보여야 하는 요소이다.
가장 큰 크기로 배치하며, 사용자가 콘텐츠를 계속 볼 이유를 만든다. 긴 설명보다는 짧고 강한 문장이나 숫자 등이 적합하다.
2. 근거
훅에서 제시한 내용을 뒷받침한다.
훅보다는 작은 크기로 배치하고, 데이터나 설명 등을 통해 메시지에 설득력을 더한다.
3. 비주얼
이미지나 그래픽을 통해 내용을 직관적으로 전달한다.
단순히 화면을 꾸미기 위한 장식이 아니라 메시지를 이해하도록 돕고 브랜드의 분위기를 보여주는 역할을 한다.
4. 버튼(CTA)
사용자가 다음에 해야 할 행동을 알려주는 요소이다.
화면의 마지막 단계에 위치하며, 너무 강하게 강조하기보다 자연스럽게 다음 행동으로 연결하는 역할을 한다.
정보를 배치할 때는 처음부터 크기나 위치를 정하기보다 무엇을 먼저 읽어야 하는지 우선순위를 정한 뒤 시각적 위계를 만드는 것이 중요하다.
03. 읽히는 카피
카피는 짧고 구체적으로 작성한다.
3가지 규칙
1. 짧게 쓴다
불필요한 표현을 줄이고 핵심만 남긴다.
길게 설명하기보다 짧은 문장으로 빠르게 의미가 전달되도록 한다.
2. 구체적으로 쓴다
많은 사람이 만족했다와 같은 추상적인 표현보다 재구매율 62%처럼 구체적인 정보를 사용한다.
숫자나 명확한 사실을 활용하면 메시지를 빠르게 이해할 수 있고 설득력도 높일 수 있다.
3. 고객의 언어로 쓴다
브랜드가 하고 싶은 말을 그대로 전달하기보다 고객이 실제로 듣고 싶은 말로 바꾸어야 한다.
제품의 기능을 나열하는 것보다 고객이 얻는 변화나 이점을 중심으로 표현하는 방식이다.
브랜드가 하고 싶은 말이 아니라, 고객이 듣고 싶은 말로 쓴다.
버튼
CTA는 누르게 만드는 이유를 보여주어야 한다
버튼이 눈에 띄지 않는 이유를 색상이나 크기에서만 찾기 쉽다. 하지만 사용자가 버튼을 누르지 않는 이유는 눌러야 할 이유가 명확하지 않기 때문일 수도 있다.
따라서 [자세히 보기]처럼 결과가 모호한 표현보다 버튼을 누른 뒤 무엇을 확인할 수 있는지 알려주는 문구가 효과적이다.
예를 들어 제품의 성분을 보여주는 페이지라면 [자세히 보기]보다 [성분 확인하기]가 구체적이다.
CTA는 단순한 버튼명이 아니라 다음 화면에 무엇이 있는지를 알려주는 예고라고 볼 수 있다.
04. 매체가 다르면 규격도 다르다.
하나의 콘텐츠를 여러 매체에 활용하더라도 단순히 크기만 변경해서는 안 된다.
대표적인 화면 비율은 다음과 같다.
| 비율 | 대표 사이즈 | 주요 용도 |
|---|---|---|
| 1:1 | 1080 × 1080 | 인스타그램 피드, 상품 썸네일 |
| 4:5 | 1080 × 1350 | 인스타그램 피드 |
| 9:16 | 1080 × 1920 | 스토리, 릴스, 쇼츠 |
| 16:9 | 1920 × 1080 | 웹 배너, PC 히어로, 유튜브 썸네일 |
가로 폭을 1080px로 통일한 뒤 기본 작업을 시작하면 다른 규격으로 확장하기 편리하다.
다만 매체가 달라지면 화면 비율뿐 아니라 사용자가 콘텐츠를 보는 환경도 달라진다. 따라서 같은 메시지를 사용하더라도 각 매체에 맞게 다시 구성해야 한다.
세로형 콘텐츠에서는 안전 영역을 고려한다
9:16 화면 전체를 자유롭게 사용할 수 있는 것은 아니다.
릴스나 숏폼 콘텐츠에는 상단의 상태 표시 영역, 하단의 아이디·캡션·음원 정보, 좌우의 인터랙션 버튼 등 여러 UI가 콘텐츠 위에 표시된다.
수업에서 제시된 1080 × 1920 기준 예시는 다음과 같다.
- 상단 약 250px
- 하단 약 420px
- 좌우 약 60px
따라서 중요한 텍스트나 제품 이미지는 UI와 겹치지 않는 중앙 영역에 배치해야 한다.
광고 콘텐츠의 경우 하단에 CTA 버튼 등이 추가되어 가려지는 범위가 더 커질 수 있으므로 실제 노출 환경을 함께 고려해야 한다.
반면 1:1이나 4:5 피드 이미지는 이미지 자체 위에 UI가 직접 겹치는 구조가 아니므로 동일한 안전 영역을 적용할 필요는 없다.
디자인 툴의 글자 크기와 실제 화면의 글자 크기는 다르다
디자인 툴에서는 일반적으로 글자 크기를 px 단위로 설정하지만, 모바일 환경에서는 기기와 운영체제에 따라 실제 표시 크기가 달라진다.
수업에서는 1080px 작업 캔버스에서 44px 정도가 실제 모바일 화면의 약 16px 수준으로 보일 수 있다는 예시를 다룬다.
따라서 디자인 툴에서 숫자만 보고 글자가 충분히 크다고 판단해서는 안 된다. 실제 스마트폰 화면에서 확인하며 가독성을 판단하는 과정이 필요하다.
특히 작은 본문이나 부가 정보는 축소되었을 때 읽기 어려워질 수 있으므로 최종 결과물을 실제 노출 크기로 확인해야 한다.
같은 메시지도 매체에 맞게 다시 구성한다
하나의 디자인을 만든 뒤 비율에 맞춰 단순히 잘라내는 방식만으로는 각 매체에 최적화하기 어렵다.
1:1에서는 안정적으로 보였던 구성이 9:16에서는 지나치게 비어 보일 수 있고, 세로형에서 잘 보였던 텍스트가 16:9에서는 지나치게 크게 느껴질 수 있다.
따라서 매체가 바뀌면 다음 요소를 다시 조정해야 한다.
비율 · 안전 영역 · 정보의 위치 · 글자 크기 · 이미지 크기 · 여백 · CTA 위치
같은 소재와 메시지를 유지하더라도 매체마다 정보 구조를 다시 설계해야 한다.
같은 메시지를 매체마다 다시 자른다. 단순히 잘라서 옮기는 것이 아니다.
💡 오늘 기억해둘 것
1. 피드에서 시선을 끄는 것은 화려함보다 대비이다.
얼굴과 눈, 움직임, 큰 여백, 숫자처럼 주변 콘텐츠와 다른 요소가 스크롤을 멈추게 한다. 첫 화면은 모든 것을 설명하기보다 다음 화면을 보게 만드는 역할을 한다.
2. 한 장에는 하나의 메시지를 담고 정보의 순서를 만든다.
전달할 내용이 많다면 한 화면에 모두 넣지 않고 여러 장으로 나눈다. 각 화면에서는 훅 → 근거 → 비주얼 → CTA의 순서로 정보의 위계를 만든다.
3. 카피는 브랜드가 하고 싶은 말보다 고객이 듣고 싶은 말로 작성한다.
짧고 구체적으로 작성하며, CTA 역시 버튼을 눌렀을 때 얻을 수 있는 내용을 명확하게 보여주어야 한다.
4. 콘텐츠는 매체에 맞게 다시 설계한다.
1:1, 4:5, 9:16, 16:9 등 매체마다 비율과 사용 환경이 다르다. 특히 숏폼에서는 UI가 차지하는 안전 영역까지 고려해야 한다. 단순한 리사이즈가 아니라 같은 메시지를 각 매체에 맞게 다시 구성하는 과정이 필요하다.
