안 읽히는 OG 이미지 고치기,
키워드부터 공유 카드까지 한 줄기로 자동화한 기록

모니터에선 완벽한 카드가 채팅창에선 사라진다. 그런데 그 카드는 사슬의 끝이다. 키워드를 정하고, 제목을 만들고, 노출을 확인하고, 그 끝에 카드가 있다. 첫 결과물에서 최종 결과물, 그리고 매일 굴리는 운영까지 한 줄기로 정리한다.

대상: 마케터 · 기획자 · 1인 운영자  ·  형식: 구축 기록 + 원리(1차 출처 검증)  ·  2026-06-25

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

카드는 사슬의 끝이다, 전체 그림부터

공유 카드를 공들여 만들어 메신저에 붙였더니 작은 회색 덩어리만 떴다. 흔한 장면이다. 그런데 고칠 곳은 카드 한 장이 아니었다. 어떤 페이지를, 어떤 키워드로 검색에 띄우고, 그 페이지를 누르게 만드는 마지막 한 칸이 카드이기 때문이다.

그래서 통신·렌탈 비교 사이트 한 곳을 키워드 조사부터 카드 자동 생성, 그리고 매일 굴리는 운영까지 한 줄기로 묶었다. 흐름은 네 단계다. 키워드를 정해 제목을 만들고(1), 그 페이지가 실제로 뜨는지 보고(2), 누르게 만들 카드를 기획·제작하고(3·4), 스프레드시트로 운영한다(5). 원리는 그 흐름 안에서, 막히는 자리마다 꺼낸다.

키워드 조사페이지 제목노출 체크공유 카드시트 운영

키워드 한 줄에서 공유 카드, 그리고 운영까지. 카드는 이 사슬의 끝이다.

1키워드를 정하고 페이지 제목을 만든다

홈 기획이 페이지로 떨어지면, 먼저 정보 구조(IA)와 폴더 구조를 눈으로 본다. 검색 노출의 단위가 URL(페이지)이라, 폴더가 엉키면 거기서부터 노출이 샌다.

키워드는 추측하지 않고 세 군데서 실측한다. 검색광고 API(실제 클릭·전환, 즉 수요와 의도), 데이터랩(검색량 추세·시즌), 그리고 네이버 검색 결과 페이지(SERP)를 직접 긁는 스크래퍼다. 스크래퍼로는 그 키워드를 누가, 어느 영역(웹문서·블로그·쇼핑)에서 점유했는지 본다.

여기서 판단 하나. 광고 데이터만으로 뽑으면 '광고를 많이 돌린 키워드'로 쏠린다. 한 카테고리가 87%를 먹는 편중이 실제로 나왔다. 그래서 경쟁사 키워드까지 긁어 범위를 넓히고, 검색량은 큰데 강한 사이트가 점유하지 않은 빈자리(롱테일)를 '승산'으로 골라낸다.

선정한 키워드는 페이지마다 메인·서브로 할당한다. 마지막에 형태소로 쪼개 제목을 만든다. '인터넷 가입 현금 지원'을 통째로 넣지 않고 인터넷·가입·현금·지원으로 쪼갠 뒤 어순을 재조합해, 다양한 검색 변형에 한 제목이 걸리게 한다. 자연스러움보다 검색 매칭 폭이 우선이다. 결과는 스프레드시트의 페이지별 행에 쌓는다.

2그 페이지가 실제로 뜨는지 자동으로 본다

제목을 잘 지었다고 노출되는 게 아니다. 그래서 선정한 메인·세부 키워드로 자사 페이지가 검색 결과에 실제로 뜨는지 확인하는 파이썬을 따로 만들어 시트에 기록한다.

이때 블로그·지식iN 같은 네이버 자사 UGC나 협찬·리뷰는 빼고, 사이트 페이지(웹문서·광고)가 떴는지만 본다. 사이트가 검색에 뜨는 경로는 사실상 오가닉 웹영역과 광고 둘뿐이기 때문이다. 신규 도메인은 0에서 시작하는 게 정상이라, 단발 점수가 아니라 추세를 본다.

여기서 배운 게 다음 단계로 이어진다. 제목·메타 같은 온페이지 작업은 필요조건이지 충분조건이 아니다. 신규 사이트는 강한 사이트가 쥔 웹영역을 단기간에 못 뚫는다. 그러니 일단 들어온 사람을 확실히 누르게 만들어야 한다. 그게 카드다.

3이제 카드인데, 첫 결과물이 채팅창에서 사라졌다

페이지로 들어오게 하는 마지막 칸, 카드를 만들었다. 모니터에선 멀쩡했다. 그런데 채팅창에 붙이니 글씨도 얼굴도 뭉개졌다. 원인은 단순했다. 카드는 1200픽셀 모니터에서 검수하지만, 받는 사람은 폭 300픽셀 말풍선에서 본다. 디자인한 크기와 보이는 크기가 다르다.

산수를 대보면 분명하다. 카카오톡 채팅 카드는 대략 폭 300px로 그려진다(카카오 공식 수치가 아니라 실측 추정이다). 800px로 설계한 카드가 300px로 뜨면 축소율은 0.375. 설계할 때 24px이던 글자는 화면에서 24 × 0.375 = 9px이 된다. 본문 가독 하한 16px의 절반을 겨우 넘는다. 카드에서 16px로 보이려면 설계 때 약 43px로 키워야 한다는 뜻이다.

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

제목을 더 키우면 될 것 같지만 키울수록 그림 자리가 없어진다. 접근이 틀렸다. 카카오·페북은 이미지와 제목·설명을 서로 다른 영역에 표시한다. 이미지 카드 아래에 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)도 의미가 있다. 치수를 미리 알려주면 크롤러가 이미지를 비동기로 받지 않고 즉시 렌더한다. 안 적으면 첫 공유 때 이미지가 빈 채 뜨는 일이 생긴다.

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

얼굴도 함정이었다. 신뢰를 준다고 웃는 인물을 큼직하게 넣었더니, 작은 카드에선 정체불명의 살색 덩어리가 됐다. 그런데 얼굴 자체가 잘못은 아니다. 사람의 시각계는 얼굴을 극도로 빠르게 잡는다. 얼굴로 눈이 움직이기 시작하는 게 빠르면 100밀리초였고, 다른 걸 찾으라고 시켜도 시선이 얼굴로 쏠릴 만큼 의지를 벗어났다.

더 중요한 건 방향이다. 사람은 그림 속 인물이 보는 쪽을 반사적으로 따라본다. "이 시선은 정답을 알려주지 않는다"고 미리 말해줘도 사람들은 시선이 향한 쪽에 더 빨리 반응했다. 유명한 아기 광고 시연이 있다. 아기가 카메라를 보면 사람들은 아기 얼굴만 보고 카피를 안 읽었고, 아기가 고개를 돌려 헤드라인을 보면 헤드라인을 읽은 사람이 확 늘었다.

그래서 원칙이 바뀐다. 작은 카드일수록 텍스트를 키우고, 인물은 어깨까지 헤드샷으로 좁혀 보조로 쓴다. 풀 바디는 제거. 얼굴이 너무 작아져 효과가 통째로 날아간다. 얼굴을 키워 식별되게 만들어야 그 시선 방향도 비로소 읽힌다. 그리고 인물 시선은 카메라가 아니라 카피 쪽으로 돌린다.

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

마지막으로 대비. 흔히 믿는 두 규칙은 이미 가짜다. "이미지 텍스트 20% 넘으면 페북이 도달을 깎는다"는 2020년 9월 폐지됐다. "뇌는 이미지를 텍스트보다 6만 배 빠르게 처리한다"는 원전이 없다. 글자를 줄이는 진짜 이유는 정책이 아니라 가독성이다.

진짜 지킬 수치는 명도 대비다. 웹 접근성 표준은 일반 텍스트 4.5:1을 최소로 보지만, 작은 카드는 7:1이 안전하다. JPEG 압축이 작은 컬러 글자의 가장자리를 뭉개고, 축소되면 획이 더 적은 픽셀에 걸려 실제 대비가 설계값 아래로 떨어지기 때문이다. 어두운(또는 흰) 배경에 검정/흰 글자, 포인트색 하나가 무난한 이유가 이거다.

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

원리를 카드 기획으로 옮기면, 모든 판단을 세 지표로 환원하게 된다. 클릭률(누르게), 이탈률(눌렀더니 기대와 달라 튕기지 않게), 전환율(클릭이 가입·상담으로). 특히 이탈률이 페이지마다 카드를 다르게 만드는 진짜 이유다. 아이폰 페이지엔 아이폰이, 정수기 렌탈엔 정수기가, FAQ엔 FAQ 화면이 보여야 한다. 한 장을 돌려쓰면 누른 사람이 '내가 본 거랑 다른데' 하고 곧장 나간다. 그래서 카드 장면을 URL 의도에 맞춰 타입으로 나누고, 훅도 의도에 맞춰 섞는다.

4첫 시안에서 최종 결과물까지

제작은 둘로 쪼갠다. 위에서 본 '글씨를 굽지 마라'와 같은 이유다. 이미지 생성 AI는 한글과 로고와 정확한 픽셀 크기를 못 맞춘다. 그래서 배경 장면(모델·소품·비교 카드)만 AI로 만들고, 로고와 한글 글씨는 코드로 얹는다.

배경을 만들기 전에 이미지 형식부터 못박는다. 인물은 오른쪽에 약 40%, 왼쪽은 글자 자리로 비우고, 위아래 여백은 얼마, 모델은 풀 바디가 아니라 가슴 위 헤드샷, 표정은 미소, 배경은 흰색에 연한 포인트색. 이 형식은 이미지 생성 웹에서 시안을 여러 장 뽑아 눈으로 고른 뒤 확정한다. 모델은 브랜드 전속 인물 컷을 레퍼런스로 줘 같은 얼굴을 유지한다.

색에서 한 번 헛디뎠다. 첫 시안은 브랜드색(핫핑크)을 배경에 꽉 깔고 글자에 형광 노랑을 얹었다. 결과는 동네 전단지였다. 채도 높은 두 색이 부딪치면 비교 서비스가 아니라 할인 이벤트 광고로 보인다. 그래서 비율을 뒤집었다. 흰 배경 70%, 연한 핑크 20%, 진한 브랜드색은 강조 10%. 글자는 검정, 포인트색은 핵심 단어 하나에만. 모델은 하드컷으로 오려 붙이지 말고 부드러운 그림자로 배경에 녹인다.

왼쪽 첫 시안은 전단지, 오른쪽 최종은 비교 서비스. 같은 브랜드색인데 비율을 뒤집었다. (모델 얼굴 모자이크)

글씨는 깨지니까 HTML로 만들어 PNG로 변환한다. 디자인 원본을 HTML 템플릿으로 두고, 페이지별 제목·서브카피만 스프레드시트에서 읽어 갈아끼운 뒤, 헤드리스 브라우저로 화면을 찍어 정확한 크기의 PNG로 굽는다. 한글은 웹폰트로 또렷하고, 로고는 진짜 파일을 얹으니 가짜가 안 나온다. 페이지가 수십 개라도 시트 두 칸만 채우면 한 번에 다 뽑힌다.

최종 결과물. 배경 장면은 AI, 로고·한글은 코드로 얹어 800×400으로 구운 카드.

마지막은 호스팅이다. 카드 이미지는 공개 URL이라야 og:image가 먹는다. 깃허브 공개 저장소에 올려 raw 주소를 og:image에 쓴다. 여기까지가 '한 장을 만드는' 과정이고, 진짜 일은 이걸 수십 페이지로 굴리는 운영이다.

5그래서, 스프레드시트로 굴린다

페이지가 수십 개면 카드도 수십 개다. 한 장씩 손으로 만들면 무너진다. 그래서 스프레드시트 한 장이 관제탑이 된다. 페이지마다 한 행이고, 거기에 키워드·제목·메타가 이미 쌓여 있다. 카드는 거기에 칸 세 개를 더한 것뿐이다.

장면 타입 칸엔 그 페이지가 쓸 배경 장면 키(통신사별·기기별·기능별·콘텐츠형)를 적는다. 카피 칸엔 헤드라인과 서브를 한 셀에 적는다(줄바꿈·강조·서브 구분 기호로). 미리보기 칸엔 만든 이미지의 공개 주소를 =IMAGE로 걸어, 시트에서 페이지별 카드를 썸네일로 바로 본다.

관제탑은 스프레드시트다. 페이지마다 장면·카피·미리보기 칸, 오른쪽에 카드 썸네일. 사람은 카피만 만진다. (모델 얼굴은 모자이크)

운영은 단순해진다. 카피를 고치고 싶으면 그 행의 카피 칸만 바꾸고 일괄 생성 스크립트를 한 번 돌린다. 그러면 바뀐 페이지 카드만 새로 구워진다. 사람이 하는 건 시트에서 문구를 다듬는 것뿐이고, 디자인·크기·로고·렌더는 코드가 일정하게 찍어낸다.

딱 하나, 갱신이 안 보이는 함정이 있다. 새 이미지를 올렸는데 채팅창엔 며칠째 옛 카드가 뜬다. 캐시 키가 파일이 아니라 이미지 주소(URL)이기 때문이다. 같은 주소 뒤 파일만 갈면 플랫폼은 바뀐 줄 모른다. 그래서 주소 뒤에 ?v=2처럼 버전을 올리거나, 페이스북 Sharing Debugger·카카오 캐시 초기화로 강제로 다시 읽힌다.

캐시 키는 URL이다. 파일만 갈면 안 바뀐다. 버전을 올리거나 디버거로 재스크랩한다.

정리, 내보내기 전 점검

핵심은 한 줄기다. 키워드를 실측으로 정해 제목을 만들고, 노출을 확인하고, 그 페이지로 들어오게 할 카드를 줄어든 화면 기준으로 거꾸로 설계해, 시트로 굴린다. 카드를 내보내기 전엔 이 순서로 점검한다.

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

큰 화면에서 검수하지 마라. 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
• 시선 추종(gaze cueing): Friesen & Kingstone 1998, Frischen 2007
• 낯선 얼굴 저해상도 취약: Hancock & Bruce 2000
• "6만 배" 괴담 폐기: PolicyViz

앞부분의 원리(9px 산수·시선·대비·캐시)는 위 1차 출처로 검증했고, 키워드~카드~운영 파이프라인은 실제 한 사이트를 그 흐름으로 구축한 기록이다(87% 편중 같은 수치는 그 과정의 실측). 카카오 렌더 폭(~300px)·표정과 신뢰처럼 단정이 어려운 건 추정·정성으로 표기했다. 장면 분류·훅이 CTR·이탈·전환에 주는 효과는 가설이라 채널별 A/B로 확인할 것. 관리 화면·카드·before/after에 등장하는 모델 얼굴은 모두 모자이크 처리했고, before/after는 실제 첫 시안과 최종 결과물을 재현한 것이다.