카드뉴스 5장이 하나도 안 읽혔다 — 정체성과 가독성 사이 — 프라이밋 메이커스로그
premium 무드를 지키려고 폰트를 얇게 깔았더니 폰에서 안 보였다. 레퍼런스를 따라하면서도 브랜드를 지키는 법.
3주차 인스타 카드뉴스 5장을 다 만들고 폰으로 보는데, 가만히 보다가 깨달았다.
잘 안 읽힌다.
분명히 디자인은 깔끔하다. 베이지·다크·세리프·여백. Aesop, Nothing 무드. 의도한 대로 나왔다. 그런데 인스타에서 빠르게 스와이프하면서 보면, 헤드라인이 흐릿한 회색 배경처럼 지나간다. 멈춰서 볼 만한 위계가 없다.
이게 어디서 어긋난 건지 추적하는 데 한나절을 썼다.
왜 안 읽혔나
문제는 단순했다. 브랜드 가이드대로 한 거였다.
1
2
3
font-family: 'Noto Serif KR', serif;
font-weight: 300; /* Light */
color: rgba(255,255,255,0.45); /* 본문 */
Noto Serif KR의 300 (Light) 웨이트는 한글로 보면 거의 손글씨에 가까울 정도로 얇다. 거기에 본문 색을 0.45 alpha로 깔면, 라이트박스 안에서는 멋있어 보이는데 1080x1350 사이즈로 폰에서 보면 그냥 안 보인다.
랜딩 페이지도 마찬가지였다. 검사해보니 font-weight: 200 이 19곳, 300이 19곳. 본문 색상은 --secondary (#6B6762) 또는 --soft (#9A9690). 폰트 사이즈는 0.85rem~0.9rem (~14px). 데스크탑에서는 무드가 살지만, 모바일 reading distance에서는 회색 안개가 깔린다.
“premium 무드”와 “안 읽힘”이 같은 디자인 결정에서 나온다. 이게 함정이었다.
레퍼런스: 잘 보이는 카드뉴스의 공통점
내가 평소에 멈춰서 보던 카드뉴스들을 다시 봤다.
LayerLab — 정보형 콘텐츠의 위계
LayerLab — 정보 위계가 분명한 구조 (1~3 번호, 각 항목 들여쓰기, 핵심 헤드라인 굵게)
굵은 sans-serif로 핵심 메시지를 박는다. 흰 베이지 배경에 까만 글자. 좌측 상단에는 LayerLab 로고를 검정 배경 박스로 박아서 시그니처 마크가 됐다. 번호로 매긴 항목들은 각자 들여쓰기와 화살표로 위계를 시각화. 읽으려고 멈출 이유가 있는 카드.
oxxx (3분의일?) — 굵기 하나로 끝낸다
oxxx — 한 문장. 굵기. 끝.
oxxx — 한 문장 + 컬러 코드 + 작은 설명
상단 좌측에 작은 워드마크. 거대한 한 문장. 부가 정보는 작게. 한 슬라이드 한 메시지 원칙이 폰트 사이즈와 굵기 차이로 시각화된다.
Young Boss — 다크 + 손글씨 로고
Young Boss — 상단 중앙 손글씨 로고 + 인물 사진 + 굵은 헤드라인
Young Boss — 다크 배경 + 중앙 정렬 + 호흡 느린 인용
Young Boss — 굵은 sans-serif가 보장하는 가독성
상단 중앙 손글씨 로고. 인물 사진 위에 굵은 헤드라인. 다크 배경에서도 흰 글자가 또렷하다. 로고 위치가 일관되니까 시리즈로서의 톤이 살아난다.
공통점만 추리면
세 브랜드를 비교해보니 패턴이 보였다.
| 요소 | 공통점 |
|---|---|
| 로고 위치 | 상단 중앙 (또는 상단 좌측 고정) — 시리즈성 |
| 폰트 굵기 | 본문도 400 이상, 헤드라인은 700~900 |
| 색상 콘트라스트 | 회색 본문이 거의 없음. 검정/흰색 직접 |
| 사이즈 | 헤드라인이 화면의 30%+ 차지 |
| 위계 | 헤드라인 → 본문 사이의 사이즈 차이가 명확 |
문제는 — 그대로 따라하면 프라이밋이 아니게 된다.
프라이밋의 톤은 Aesop, Nothing Phone, 고급 멤버십 클럽이다. 두꺼운 sans-serif로 외치는 톤이 아니다. 카드뉴스 잘 만드는 법을 배우려고 굵기와 색을 통째로 바꾸면, 브랜드는 무너진다.
결정: 정체성은 유지, 가독성만 빼앗기
레퍼런스에서 흡수해야 할 것과 거부해야 할 것을 분리했다.
흡수
- 상단 중앙 로고 (◎◎ + PRIMEET)
- 본문 weight 400 (light 300 폐기)
- alpha 0.7+ (희미한 회색 폐기)
- 본문 사이즈 +20%
거부
- 굵은 sans-serif 헤드라인 → Noto Serif KR 유지 (premium tone)
- 화이트/블랙 풀콘트라스트 → 베이지·다크 팔레트 유지
- 큰 박스 로고 → 두 원 ◎◎ 라인 심볼 유지
핵심 원칙 한 줄:
레퍼런스는 가독성을 빼앗고, 폰트와 색은 그대로 둔다.
Before / After
기존(카드 7) — Noto Serif KR 300 + alpha 0.4 회색 본문:
Before — 무드는 있는데 본문 회색 (alpha 0.45)이 흐릿하다
Before — 우측 상단 작은 PRIMEET 워드마크. 본문 텍스트 가독성 약함
리디자인 후 (카드 8) — 같은 폰트, 같은 팔레트, 위계만 정리:
After — 상단 중앙 ◎◎PRIMEET 로고. 본문 alpha 0.78. 폰트는 그대로 Noto Serif KR
After — split 레이아웃에서 이미지 영역 660 → 820px로 확대. 카페 분위기가 살아남
After — 카피도 차별화. “합류를 고려하고 있다면” 4번 반복 → 카드별 다른 톤
같은 폰트, 같은 팔레트인데 폰에서 비교해보면 다르다. 멈출 이유가 생긴다.
카피 차별화 — “합류를 고려하고 있다면” 반복 끊기
가독성 정리하면서 또 발견한 게 있었다. CTA가 4장 연속 같은 카피를 쓰고 있었다.
1
2
3
4
07 — 합류를 고려하고 있다면
08 — 합류를 고려하고 있다면.
11 — 합류를 고려하고 있다면, 지금이 가장 좋은 타이밍입니다.
12 — 합류를 고려하고 있다면,
시리즈로 보면 같은 말 4번 외치는 모양. 카드별로 톤을 분화했다.
| 카드 | Eyebrow | 헤드라인 | 의도 |
|---|---|---|---|
| 8 — 트렌드 | Selective | 아무나 받지 않지만, 지금은 받습니다. | 도발 / 자신감 |
| 9 — 앱 피로 | Not An App | 알고리즘 대신, 사람이 연결합니다. | 본질 강조 |
| 10 — 그리운 밤 | Early Member | 결이 맞는 사람과의 커피 한 잔. | 감성 회수 |
| 11 — 혜택 (광고) | Now or Never | 이 혜택은, 지금 들어온 사람만. | 한정 / 행동 유도 |
| 12 — 최종 | Last Call | 기다리는 자리는 없습니다. | 마지막 단호 |
5장이 각자의 톤으로 메시지 전달. 시리즈로서 호흡이 생겼다.
랜딩 페이지도 같은 원칙으로
카드뉴스 정리하다 보니 랜딩 페이지도 같은 병에 걸린 게 보였다. font-weight: 200이 19곳, 300이 19곳. 디자인 토큰부터 갈아엎었다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- font-weight: 200;
+ font-weight: 400;
- font-weight: 300;
+ font-weight: 400;
- font-size: 0.85rem; /* 본문 */
+ font-size: 1rem;
- color: var(--secondary); /* #6B6762 + weight 300 = 안개 */
+ color: var(--text); /* #2C2C2A + weight 400 = 명확 */
- color: rgba(255,255,255,0.45); /* 다크 섹션 */
+ color: rgba(255,255,255,0.85);
폰트 URL도 200/300만 받던 걸 400/500/600으로 갈았다. 헤드라인은 weight 500으로 살짝 ↑, 사이즈도 clamp 범위 +0.2rem씩.
“디자인을 바꾼다”가 아니라 “선택지를 좁힌다”에 가까웠다. weight 200/300이라는 도구를 손에서 뺀 것뿐이다.
배운 것
1. premium = 얇음 이라는 등식은 위험하다. 얇은 폰트와 낮은 콘트라스트가 premium을 만든다고 학습한 디자이너는 많다. 데스크탑 큰 화면에서는 맞다. 인스타·모바일에서는 가독성이 곧 정체성이다. 안 읽히면 무드도 없다.
2. 레퍼런스는 흡수, 모방이 아니다. LayerLab/oxxx/Young Boss를 그대로 따라하려는 충동을 한 번 누른 게 컸다. “잘 보이는” 부분만 가져오고, “폰트와 색”은 건드리지 않았다. 정체성을 지키는 게 더 어려웠지만 결과적으로 프라이밋답게 남았다.
3. CTA 반복은 디자인이 아니라 카피의 문제다. 같은 디자인이어도 카피가 4장 연속 같으면 시리즈가 무너진다. 5장이 각자의 한 마디씩 가지면 시리즈가 호흡을 만든다.
4. 한 번 정한 디자인 토큰은 끝까지 의심해야 한다. 브랜드 가이드에 “Noto Serif KR 300 Light”라고 적혀있어도, 실제 사용 환경(인스타 1080x1350, 모바일)에서 안 읽히면 그건 이미 가이드가 아니라 함정이다. 가이드는 토론 가능해야 한다.
다음
이번 주 안에 인스타에 카드 8~9 업로드. 카드 11(광고용 — 골드 톤 유지) / 12(최종 CTA) 차별화도 같은 원칙으로 마무리. 랜딩 페이지는 라이브에 반영해서 실제 폰에서 다시 검증.
같은 폰트, 같은 팔레트, 다른 가독성. 이게 이번 작업의 결론이다.
이번 작업도 Claude Code와 함께. 카드뉴스 HTML/CSS, 스크린샷 자동화, 랜딩 페이지 수십 곳 일괄 수정까지 — 디자인 의사결정만 사람이 하고 손을 거의 안 댔다.