AI 이미지에 한글이 깨질 때: 배경은 AI, 글자는 코드로 굽는다 | 비교원

대상: 마케터 · 1인 운영자 · 콘텐츠 제작자  ·  형식: 구축 기록 + 제작법  ·  2026-06-26

이미지: 글자를 그림 안에 넣으면 뭉개지고, 그림 밖에 두면 또렷하다. 이 글이 말하려는 한 줄이다.

AI한테 글자를 맡기면, 글자가 그림이 되어 뭉개진다

AI 이미지 생성기는 그림을 픽셀로 그린다. 문제는 글자도 똑같이 '글자처럼 보이는 픽셀'로 그린다는 거다. 그러니 한글 제목을 넣어달라고 하면, 획만 어설프게 흉내 낸 깨진 덩어리가 나온다.

로고도 마찬가지다. 진짜 로고를 모르니 비슷하게 생긴 가짜를 지어낸다. 색이며 자간이며 어딘가 미묘하게 어긋나 있다. 프롬프트를 아무리 손봐도 매번 제대로 나오질 않는다. 운 좋게 한 장 그럴듯하게 건져도 다음 장에서 다시 무너지고.

크기도 안 맞는다. "800 곱하기 400으로 뽑아줘" 해도 딱 그 치수로는 안 나온다. 규격이 어긋난 카드는 카톡이나 페북이 알아서 잘라버린다. 정작 카드에 꼭 필요한 세 가지, 글자랑 로고랑 정확한 치수가 하필 전부 AI가 제일 약한 부분인 셈이다.

그래서 글자를 그림에서 떼어냈다

한참을 프롬프트와 씨름하다 방향을 틀었다. 글자까지 AI한테 맡긴 게 애초에 잘못이었다. AI는 분위기랑 장면 잡는 데만 쓰고, 글자는 글자대로 따로 얹기로 했다.

그러고 나니 원리가 한 줄로 정리됐다. AI는 그림을 만들고, 글자는 픽셀 밖에 산다. 배경 그림과 텍스트(제목·로고)를 아예 다른 층으로 보는 거다. 그림은 좀 뭉개져도 그만인 '분위기'고, 글자는 절대 깨지면 안 되는 '정보'니까.

그림 층은 AI가, 글자 층은 코드가. 둘을 겹쳐 한 장으로 만든다. 도구는 둘, 원리는 하나.

이 한 줄이 두 군데에 똑같이 통한다. 글자가 아예 없는 블로그 일러스트는 숫자를 그림 밖 캡션이 대신 말해준다. 글자가 꼭 들어가야 하는 공유 카드는 코드가 픽셀 바깥에서 제목을 얹는다. 쓰는 도구만 다를 뿐, 원리는 하나다.

그림은 클로드가 코덱스를 빌려 만든다

그런데 그 그림은 대체 누가 그리나. 지금 이 글을 쓰는 클로드(Claude)한테는 이미지 생성 기능이 없다. 글은 써도 그림은 못 그린다. 그래서 옆에 있는 다른 도구를 불러다 쓴다.

그 도구가 코덱스(Codex)다. 터미널에서 돌아가는 코딩 에이전트인데, ChatGPT 계정으로 한 번 로그인해두면 그림 그리는 기능(imagegen)이 딸려 온다. 클로드는 명령어 한 줄로 코덱스를 깨워서 "이런 그림 그려서 여기 저장해"라고 시키기만 하면 된다.

실제 명령은 이렇게 생겼다. 코드라고 겁먹을 것 없다. "코덱스야, imagegen으로 그려서 assets 폴더에 PNG로 저장해"라는 말을 기계가 알아듣게 옮긴 것뿐이다.

codex exec --dangerously-bypass-approvals-and-sandbox - <<'PROMPT'
use the imagegen skill (built-in image_gen tool).
Flat vector editorial illustration, navy #1c3d5a base + beige,
single orange #ff8649 accent, no text, no faces.
Save to .../05-outputs/blog/assets/2026-06-26_hero.png
PROMPT

클로드가 코덱스를 부르면, 코덱스가 그림을 내놓는다. 그림은 ChatGPT 로그인으로 빌려 쓰는 셈이다.

한 번에 여러 장을 몰아서 시킬 수도 있는데, 시간이 좀 걸리니까 백그라운드로 돌려놓고 그동안 글을 마저 쓴다. 정리하면 이렇다. 클로드가 직접 그리는 게 아니라, 그림 잘 그리는 코덱스를 ChatGPT 로그인으로 빌려 쓰는 구조다.

글자 없는 그림은 쉽다, 숫자를 캡션에 넘기면 된다

글자가 아예 없는 그림부터. 이 블로그에 깔린 일러스트들이 그렇다. 개념이나 은유, 분위기만 담고 수치나 결론처럼 '글자로 말해야 하는 것'은 그림 안에 절대 안 넣는다.

스타일은 한 세트로 묶어둔다. 평면 벡터에 navy 베이스, 모래·베이지 톤, 그리고 주황 #ff8649 포인트 하나. 글자도 숫자도 없고, 얼굴은 디테일 없이 뭉뚱그린다. 한 글에 들어가는 그림끼리 형제처럼 보이게 하려는 거다.

그림엔 글자가 없다. 수치와 결론은 그림 밖 캡션이 맡는다.

그럼 "생존율 30 대 10" 같은 숫자는 어디서 말하느냐. 그림 바로 아래 캡션이 맡는다. 그림은 분위기를 깔고, 숫자는 캡션이 박는다. 글자를 픽셀 밖에 두는 가장 손쉬운 방식이다.

글자가 필요한 카드, 코드가 픽셀 밖에서 헤드라인을 얹는다

글자 없는 그림은 사실 쉬운 축이다. 진짜 골치는 글자가 반드시 들어가야 하는 카드다. 링크를 채팅방에 붙였을 때 뜨는 그 공유 카드(OG 이미지) 말이다. 거기엔 제목도, 로고도, 보조 문구도 또렷해야 한다.

여기에 아까 그 원리를 한 번 더 쓴다. 배경 장면만 AI로 만들되, 이번엔 한쪽을 비워둔다. 왼쪽 45%를 글자 자리로 남기고, 텍스트나 로고 없이 모델과 소품만 채운다. 그 빈자리에 코드가 글자를 올린다.

글자는 HTML로 짠다. 한글 웹폰트를 입힌 제목, 진짜 로고 SVG, 포인트 색으로 강조한 단어. 이 HTML을 헤드리스 브라우저(화면 안 띄우는 크롬)로 열어서 사진 찍듯 캡처하면 PNG가 떨어진다. 글자는 폰트로 그려지니까 늘 또렷하고, 크기도 정확하다.

배경은 AI, 글자는 HTML. 헤드리스 크롬으로 캡처하면 글자가 또렷한 PNG가 나온다.

chrome --headless=new --hide-scrollbars \
  --force-device-scale-factor=1 --window-size=800,400 \
  --screenshot=card.png "file:///.../card.html"

제목 길이는 페이지마다 다르다. 그래서 글자 크기를 자동으로 맞춘다. 왼쪽 글자 영역 폭을 440px로 잡아두고, 한글은 1.0, 영문이나 공백은 0.45로 글자 폭을 어림잡아 폰트 크기를 40~62px 사이에서 조절한다. 짧은 제목은 큼직하게, 긴 제목은 줄여서 한 줄에 억지로 욱여넣지 않는다.

왜 이렇게 키워두냐면, 카톡 카드는 폭 300px 안팎으로 줄어서 뜨기 때문이다. 작게 줄어도 읽히게 설계하는 요령은 따로 정리해뒀으니(안 읽히는 OG 이미지 고치기), 이 글에서는 '어떻게 만드느냐'에만 집중한다.

헤드리스에서도 한글이 깨졌다, 폰트를 파일에 박았다

이제 다 됐다 싶었는데, 함정이 하나 더 숨어 있었다. 헤드리스 크롬은 그 PC에 깔린 폰트로 글자를 그린다. 그러다 보니 디자인 폰트가 안 깔린 PC나, 글을 통째로 공유한 파일에서는 글자가 또 엉뚱하게 떨어졌다.

원인은 간단하다. 폰트를 '이름'으로만 걸어두면, 그 폰트가 없는 환경은 대충 비슷한 걸로 바꿔 끼운다. 그래서 폰트 파일 자체를 HTML 안에 base64로 박아 넣었다. 이러면 폰트가 글이랑 한 몸으로 따라다닌다. 다른 PC에서도, 인터넷이 끊겨도 디자인 폰트 그대로다.

함정: 헤드리스 캡처는 결국 그 컴퓨터에 깔린 폰트에 기댄다. 한글 디자인 폰트를 파일에 심어두지 않으면, 폰트 없는 PC나 공유본에서 글자가 대체 폰트로 떨어진다. "내 PC에선 멀쩡하던데"가 나오는 지점이 정확히 여기다.

폰트를 이름으로만 걸면 폰트 없는 PC에서 어긋난다. 파일에 심어두면 어디서든 또렷하다.

로고랑 모델도 같은 이치다. 로고는 AI가 그린 가짜 말고 공식 SVG·PNG로, 모델은 배경 지운 공식 누끼 이미지로 얹는다. 깨지면 안 되는 건 죄다 코드가 정확한 원본으로 올리는 거다.

수십 장은 손으로 못 만든다, 시트 두 칸이 만든다

카드 한 장 만드는 법이 잡혔으면, 다음은 물량이다. 페이지가 수십 개면 카드도 수십 장이다. 이걸 한 장씩 HTML 열어 고치다간 금방 나가떨어진다. 그래서 스프레드시트 한 장을 관제탑으로 세운다.

시트엔 칸 두 개만 채운다. 장면 키 칸엔 어떤 배경을 쓸지 적고(기기별·기능별·콘텐츠형), 카피 칸엔 제목과 보조 문구를 한 셀에 몰아 적는다. 줄바꿈은 //, 강조할 단어는 *별표*로 감싸고, 보조 문구는 || 뒤에 붙인다. 스크립트가 행마다 읽어서 카드를 한꺼번에 굽는다.

한 셀 안에서 //는 줄바꿈, *별표*로 감싼 단어는 포인트 색 강조, || 뒤는 보조 문구로 갈린다. 스크립트가 이 기호를 읽어 알아서 배치한다.

사람은 시트 두 칸, 장면 키와 카피만 채운다. 카드 수십 장은 스크립트가 굽는다.

마지막은 호스팅이다. 카드가 카드로 뜨려면 공개 URL이어야 한다. 그래서 깃허브 같은 공개 저장소에 올려 그 주소를 쓴다. 여기 함정이 딱 하나 있다. 이미지를 갈아끼웠는데 며칠째 옛날 카드가 그대로 뜬다. 캐시가 파일 내용이 아니라 주소를 기억하는 탓이다. 주소 끝에 ?v=2처럼 버전을 하나 올려주면 새 주소로 인식해서 캐시가 깨진다.

캐시는 주소를 기억한다. 파일만 갈면 안 바뀐다. ?v= 버전을 올려 자물쇠를 연다.

정리, 다음에 이미지가 깨지면

결국 한 줄기다. 글자는 AI한테 안 맡긴다. 그림은 코덱스를 빌려 만들고, 글자는 코드가 픽셀 밖에서 얹고, 폰트는 파일에 심고, 물량이 많아지면 시트가 굽는다.

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

AI는 그림을 만들고, 글자는 픽셀 밖에 산다. 깨지면 안 되는 건 코드한테 맡겨라.

근거·출처

• og:image·공개 URL·캐시·재스크랩: Meta Sharing Images
• 오픈그래프 속성 표준: ogp.me
• 카카오톡 링크 미리보기 캐시: Kakao devtalk
• 헤드리스 크롬 스크린샷: Chrome for Developers, Headless
• 웹폰트 파일 임베드(data URL): MDN @font-face
• 작은 카드 가독성(9px·대비·시선): 안 읽히는 OG 이미지 고치기

이 글의 제작법(배경은 AI, 글자는 코드, 헤드리스로 굽기, 시트로 일괄)은 실제 한 사이트의 공유 카드와 이 블로그의 이미지들을 그렇게 만들어 온 기록이다. AI가 한글·로고·정확한 픽셀을 못 만든다는 건 직접 겪어 본 것이고(생성기나 시점에 따라 정도 차이는 있다), 카드 사이즈·캐시·재스크랩은 위 1차 출처로 확인했다. 회사·브랜드 세부는 일반화해서 적었다.