1200px로 만든 카드가 카톡에서 안 읽힌 이유
OG 이미지를 300px 기준으로 거꾸로 설계하기

모니터에선 완벽한 카드가 채팅창에선 글씨도 얼굴도 사라진다. 디자인하는 크기와 실제 보이는 크기가 다르기 때문이다.

대상: 마케터 · 기획자 · 1인 운영자  ·  형식: 설명 가이드  ·  2026-06-25

이미지: 같은 그림인데, 캔버스(1200px)와 채팅 카드(약 300px)에서 전혀 다르게 보인다.

채팅창에선 흐릿한 회색 덩어리가 된다

공유 카드를 공들여 만들어 메신저에 붙였더니, 채팅창엔 작은 회색 덩어리만 뜨는 일이 흔하다. 큰 제목도 인물 얼굴도 뭉개진다. 분명 같은 파일인데 왜 이럴까.

원인은 단순하다. 카드는 보통 1200픽셀짜리 모니터에서 검수하지만, 받는 사람은 폭 300픽셀 안팎의 말풍선에서 본다. 디자인한 크기와 보이는 크기가 다르다.

그래서 OG 이미지는 "큰 예쁜 그림"이 아니라 "축소돼도 살아남는 그림"으로 설계해야 한다. 아래는 공식 문서와 연구로 확인한 설계 규칙이다.

캔버스는 1200, 화면은 300, 그래서 9px

먼저 용어. OG(Open Graph) 이미지는 링크를 메신저나 SNS에 붙였을 때 따라 뜨는 그 미리보기 카드다. 페이스북이 만든 규약이고 지금은 카톡·X·슬랙·아이메시지까지 거의 다 읽는다.

함정은 축소율이다. 카카오톡 채팅 카드는 기기에 따라 대략 폭 300px로 그려진다(이건 카카오 공식 수치가 아니라 실측 추정이다, 카카오는 렌더 폭을 공개하지 않는다). 800px 폭으로 설계한 카드가 300px로 뜨면 축소율은 0.375다.

여기에 산수를 대보자. 설계할 때 24px이던 글자는 화면에서 24 × 0.375 = 9px이 된다. 본문 가독 하한으로 흔히 드는 16px의 절반을 살짝 넘는다. 사라지는 게 당연하다. 카드에서 16px로 보이게 하려면 설계 단계에서 약 43px로 키워야 한다는 뜻이다.

축소율 0.375. 24px이 9px로. 카드에서 읽히려면 설계 때 40px 이상으로.

크기만 문제가 아니다. 사람은 작은 카드를 읽지 않고 훑는다. Nielsen Norman Group의 아이트래킹 연구(232명)는 사용자가 글을 단어 단위로 정독하지 않고 F자 패턴으로 빠르게 스캔한다고 정리한다. 핵심은 "처음 두 문단", 정보를 나르는 단어를 앞에 두라는 것이다.

작은 미리보기 카드가 받는 시선은 1초가 안 된다. 정독을 전제로 정보를 채우면 통째로 버려진다. 그래서 거꾸로 설계해야 한다. 글자는 크게, 메시지는 하나만, 핵심은 가운데로.

글씨를 이미지에 굽지 마라, 기계는 그걸 못 읽는다

제목을 더 키우면 될 것 같지만, 키울수록 그림 자리가 없어진다. 접근 자체가 틀렸다.

카카오·페북은 이미지와 제목·설명을 서로 다른 영역에 표시한다. 이미지 카드 아래에 og:title과 og:description이 별도 텍스트로 깔린다. 그러니 제목을 이미지 안에 새길 이유가 없다. 메타 태그로 빼면 그 글자는 축소와 무관하게 또렷하다.

더 결정적인 이유가 있다. 이미지에 구운 글자는 기계가 안 읽는다. 페이스북의 자동 대체텍스트는 글자를 읽는 OCR이 아니라 사진 속 사물을 알아보는 객체 인식이다. 이미지 안의 숫자나 헤드라인은 스크린리더 사용자에게도, 텍스트만 가져가는 미리보기에도 안 보인다. 메시지가 살아야 한다면 반드시 메타로 빼야 한다.

코드처럼 보여도 겁먹지 말자. 그냥 페이지 머리에 한 줄씩 적는 꼬리표다.

<meta property="og:title" content="여기에 제목">
<meta property="og:description" content="여기에 한 줄 설명">
<meta property="og:image" content="https://.../card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

마지막 두 줄(width·height)도 의미가 있다. Meta 문서는 치수를 미리 알려주면 크롤러가 "이미지를 비동기로 받아 재지 않고 즉시 렌더한다"고 적는다. 안 적으면 첫 공유 때 이미지가 빈 채 뜨는 일이 생긴다, 흔한 증상이다.

이미지와 제목·설명은 다른 영역. 메시지는 이미지에 굽지 말고 메타로 빼면 축소와 무관하게 또렷하다.

이미지를 바꿨는데 옛 카드가 계속 뜬다

새 이미지를 올렸는데 채팅창엔 며칠째 옛날 카드가 뜨는 일이 잦다. 브라우저 캐시를 비워도 그대로다. 버그가 아니라 설계가 그렇다.

Meta 문서의 한 줄이 답이다. "이미지는 URL 기준으로 캐시되고, URL을 바꾸지 않으면 갱신되지 않는다." 캐시 키가 파일이 아니라 이미지 주소다. 같은 주소 뒤의 파일만 갈면 플랫폼은 바뀐 줄 모른다.

그러니 둘 중 하나다. 이미지 주소를 바꾸거나(예: 뒤에 ?v=2를 붙인다), 강제로 다시 읽게 한다. 페이스북은 Sharing Debugger에 URL을 넣고 "Scrape Again", 카카오는 개발자도구의 캐시 초기화다. 공식 갱신 주기는 24시간이라 그냥 기다려도 결국 바뀌지만, 급하면 디버거로 깬다.

캐시 키는 URL이다. 파일만 갈면 안 바뀐다. 디버거로 재스크랩하거나 주소를 바꾼다.

큰 얼굴을 넣으면 더 나빠지는 이유, 그리고 시선의 방향

인물 사진이 신뢰를 준다고들 한다. 그래서 웃는 인물을 큼직하게 넣으면, 작은 카드에선 역효과가 난다. 얼굴이 신뢰의 단서가 아니라 정체불명의 살색 덩어리가 되기 때문이다.

그런데 얼굴 자체가 잘못은 아니다. 사람의 시각계는 얼굴을 극도로 빠르게 잡는다. 한 실험에서 얼굴 쪽으로 눈이 움직이기 시작하는 게 빠르면 100밀리초(평균 140밀리초)였는데, 차량을 찾으라고 시켜도 시선이 얼굴로 쏠릴 만큼 의지를 벗어났다. 뇌에 전극을 댄 연구에서는 얼굴 영역이 자극 후 50~75밀리초에 이미 "얼굴인가"를 잡았다. 카드에 얼굴이 있으면 시선이 거기로 먼저 간다는 뜻이다. 문제는 그 얼굴이 식별이 안 될 때다. 낯선 브랜드의 작은 얼굴은 저해상도에 특히 약하다는 게 얼굴 인지 연구의 결론이다.

여기서 더 중요한 사실이 있다. 사람은 그림 속 인물이 보는 방향을 반사적으로 따라본다. 1998년 한 실험은 "이 시선은 정답 위치를 알려주지 않는다"고 미리 말해줘도, 사람들이 시선이 향한 쪽 표적에 더 빨리 반응했음을 보였다. 따라가는 게 의지가 아니라 반사라는 뜻이다.

유명한 시연이 있다. 아기 광고로 한 아이트래킹인데, 아기가 카메라를 보면 사람들은 아기 얼굴만 보고 카피를 안 읽었다. 같은 아기가 고개를 돌려 헤드라인을 보면 헤드라인을 읽은 사람이 확 늘었다. 얼굴을 어디로 향하게 하느냐가 시선 동선을 바꾼다.

정면 응시는 시선을 얼굴에 가둔다. 인물이 카피를 보면 보는 사람 눈도 카피로 끌린다.

그래서 원칙이 바뀐다. 작은 카드일수록 텍스트를 키우고, 인물은 어깨까지 헤드샷으로 좁혀 보조로 쓴다. 풀 바디는 제거. 얼굴이 너무 작아져 효과가 통째로 날아간다. 이 한 수가 앞의 두 가지를 동시에 푼다. 얼굴을 키워 식별 가능하게 만들어야, 그 시선 방향도 비로소 읽히기 때문이다. 그리고 인물 시선은 카메라가 아니라 카피 쪽으로 돌린다. 다만 시선 추종 근거는 실험실과 큰 광고에서 나온 것이라, 손바닥만 한 카드로의 확장은 합리적 추정으로 본다. 둘 다 살려야 할 때 쓸 배치가 셋이다.

코너 컷인이 가장 실용적이다. 텍스트를 좌측·상단 70%로, 헤드샷을 우하단 코너에 작게. 오버레이는 인물을 어둡게 깐 배경으로 쓰고 위에 큰 글자를 얹어 가독성을 100% 챙긴다. 수직 컷인은 좌측 텍스트, 우측 세로 헤드샷으로 영역을 가른다. 표정은 미소가 신뢰를 올리는 경향이 있는데, 100밀리초면 신뢰 판단이 형성된다는 연구가 있다. 단 눈이 안 웃는 가짜 미소는 오히려 깎으니 거기까진 단정하지 않는다.

흔히 믿는 규칙 둘은 이미 가짜다

많은 사람을 붙드는 규칙이 있다. "이미지에 텍스트가 20% 넘으면 페이스북이 도달을 깎는다." 그래서 글자를 못 넣고 망설인다.

그 규칙은 2020년 9월에 폐지됐다. 메타는 광고 이미지의 20% 텍스트 룰을 없앴고 검사 도구도 내렸다. 지금은 페널티가 없다. "텍스트가 적은 게 대체로 낫다"는 권고만 남았다. 즉 글자를 줄여야 하는 진짜 이유는 정책이 아니라 가독성이다. 원인을 헷갈리면 엉뚱한 데서 손발이 묶인다.

또 하나 자주 인용되는 문장. "뇌는 이미지를 텍스트보다 6만 배 빠르게 처리한다." 출처를 따라가 보면 원전이 없다. 어느 마케팅 자료에서 출처 없이 퍼졌고, 추적한 사람들이 원 논문을 끝내 못 찾았다. 인용하지 않는 게 맞다. "이미지는 빠르다"를 말하고 싶으면 앞의 100밀리초 얼굴 검출 같은 진짜 근거를 쓰면 된다.

대신 진짜 지켜야 할 수치는 명도 대비다. 웹 접근성 표준(WCAG)은 일반 텍스트 4.5:1, 큰 텍스트·그래픽 3:1을 최소로 본다. 4.5라는 숫자엔 근거가 있다. 정상 시력 최소가 3:1인데, 시력이 20/40으로 떨어지면 대비 감도가 약 1.5배 줄어 3 × 1.5 = 4.5가 된다.

작은 카드는 한 단계 더 올려 7:1이 안전하다. JPEG 압축은 색 정보를 절반 해상도로 저장해 작은 컬러 글자의 가장자리를 뭉개고, 축소되면 획이 더 적은 픽셀에 걸쳐 실제 대비가 설계값 아래로 떨어진다. 그래서 설계 때 4.5를 겨우 맞추면 카드에선 미달한다. 어두운 배경에 흰 글자, 포인트색 하나가 가장 무난한 이유가 이거다. 대비 7:1을 쉽게 넘는다.

설계 4.5:1은 압축·축소를 거치면 카드에서 미달한다. 핵심 문구는 여유분 두고 7:1로.

정리, 내보내기 전 점검

핵심은 한 문장이다. 모니터가 아니라 줄어든 카드를 기준으로 거꾸로 설계하고, 글자는 메타로 빼고, 시선은 카피로 돌리고, 바꿨으면 캐시를 깬다. 내보내기 전에 이 순서로 점검한다.

그래도 하나만 챙긴다면, 이것이다.

큰 화면에서 검수하지 마라. 300px로 줄여서 안 읽히면, 그게 진짜 모습이다.

근거·출처

사이즈·1.91:1·치수 선언·URL 캐시·재스크랩: Meta Sharing Images, Best Practices, Webmasters. · og:image 속성: ogp.me. · 자동 대체텍스트(객체 인식): Meta Engineering. · X 카드 2:1·og 폴백: X Cards. · 카카오 2:1 고정: Kakao devtalk. · 20% 텍스트 룰 폐지: Search Engine Journal.

대비 공식·4.5:1/7:1 근거: WCAG 2.1 SC 1.4.3. · 스캔·F패턴: NN/g. · 얼굴로의 saccade 100ms: Crouzet, Kirchner & Thorpe 2010. · FFA 50~75ms: Ghuman 2014. · 시선 추종(gaze cueing): Friesen & Kingstone 1998, Frischen 2007. · 100ms 신뢰 첫인상: Willis & Todorov 2006. · 낯선 얼굴 저해상도 취약: Hancock & Bruce 2000. · "6만 배" 괴담 폐기: PolicyViz.

이 글은 웹 조사를 1차 출처로 검증해 정리한 설명 가이드다(겪은 경험담이 아니다). 수치는 위 출처로 확인했고, 카카오 렌더 폭(~300px)·표정과 신뢰처럼 단정이 어려운 건 추정·정성으로 표기했다. 클릭·전환 효과는 채널별 A/B로 확인할 것, 출처 없는 CTR 배수는 싣지 않았다.