코드로 이미지 만들기, 디자인 툴 없이 satori로 자동 생성하는 법

블로그에 넣을 이미지 한 장 만들겠다고 디자인 툴을 켜고 글자만 한참 갈아끼워 본 적 있으시죠. 결론부터 말하면 같은 이미지를 HTML과 CSS 코드로 찍어내는 satori를 쓰면 그 반복이 거의 사라집니다. 게다가 그 코드를 직접 짤 줄 몰라도 괜찮아요. Codex나 Claude Code 같은 AI 코딩 도구한테 "이렇게 생긴 카드 이미지 만들어줘"라고 말하면 코드를 대신 짜고 이미지까지 뽑아주거든요. 실제로 지금 보고 계신 이 블로그 본문 이미지도 이 방식으로 만듭니다.

시간을 잡아먹는 건 디자인이 아니라 반복이에요

진짜 시간을 잡아먹는 건 디자인 감각이 아니라 반복입니다. 카드 한 세트를 만든다고 치면 틀을 잡는 건 처음 한 번이면 끝나요. 문제는 같은 틀에 숫자와 문구만 바꿔 끼우는 일을 열 번 스무 번 되풀이해야 한다는 점입니다.

디자인 툴은 이 반복을 손으로 해야 합니다. 텍스트 박스를 더블클릭해 글자를 고치고, 줄이 넘치면 폰트 크기를 줄이고, 정렬이 틀어지면 다시 맞추죠. 한 장이면 금방이지만 장수가 늘면 같은 동작을 기계처럼 되풀이하게 됩니다. 바로 이 구간이 코드로 덜어낼 수 있는 부분이에요.

satori는 HTML을 그림으로 바꿔줍니다

satori는 Vercel이 만든 오픈소스 라이브러리로, HTML과 CSS로 짠 화면을 그대로 이미지로 바꿔줍니다. 웹페이지 한 조각을 만들 듯 코드를 쓰면, 브라우저 없이도 그 모양 그대로 그림 파일이 나오는 거예요. 원래는 링크를 공유할 때 뜨는 미리보기 썸네일(OG 이미지)을 자동으로 찍어내려고 나온 도구입니다.

작동 방식은 생각보다 단순합니다. satori가 코드를 받아 일단 SVG라는 형식의 그림으로 그려주고, 그걸 sharp 같은 도구가 png나 webp 같은 일반 이미지 파일로 바꿔줍니다. 레이아웃은 flexbox 방식을 쓰는데, 우리가 평소 웹에서 박스를 가로세로로 배치하던 그 방식이라 익숙해요.

다만 브라우저 화면을 100% 똑같이 재현하지는 않습니다. 자주 쓰는 CSS만 골라 지원하는 구조라서요. 대신 한 가지가 확실합니다. 디자인이 코드로 적혀 있으니 내용만 바꿔 다시 돌리면 똑같은 틀로 백 장이고 천 장이고 순식간에 뽑힙니다. 사람이 손으로 갈아끼우던 그 반복을 통째로 코드가 대신하는 셈이에요.

기존 방식과 뭐가 다를까

이미지를 만드는 길은 크게 셋입니다. 디자인 툴로 직접 그리기, 생성형 이미지 AI에 맡기기, 그리고 코드로 찍어내기예요. 반복이 많고 글자가 정확해야 할수록 코드 쪽이 유리해집니다.

방식	잘하는 것	약한 것
디자인 툴 (피그마·캔바)	자유로운 디자인, 감각적인 마무리	매번 손으로 작업, 대량 반복에 약함
생성형 이미지 AI	사진풍·일러스트, 없던 그림 만들기	글자·숫자 정확도 낮음, 매번 결과가 달라 일관성 약함
satori 코드	같은 틀 대량 생산, 글자·숫자 정확, 일관성	사진·복잡한 그림은 불가, 처음 틀 짜는 품

참고로 위 비교 도식도 디자인 툴이 아니라 satori로 찍어낸 이미지입니다. 글로 설명하는 김에 직접 만들어 넣어봤어요.

생성형 이미지 AI는 멋진 그림은 잘 만들지만 카드 안에 "환급액 47만 원" 같은 정확한 글자를 넣으라고 하면 글자가 뭉개지거나 엉뚱하게 바뀌기 일쑤입니다. 반대로 satori는 코드에 적은 글자가 한 글자도 틀리지 않고 그대로 박혀요. 그래서 비교표나 도식, 카드뉴스 틀처럼 정해진 모양에 내용만 바뀌는 이미지에는 코드 방식이 확실히 강합니다.

코드를 직접 안 짜도 되는 이유

satori의 유일한 진입장벽이던 "코드 짜기"를 이제 AI 코딩 도구가 대신해 줍니다. 터미널 창에 자연어로 시키면 satori용 HTML을 짜주고 이미지로 뽑는 명령까지 알아서 돌려줘요. 코드를 한 줄도 몰라도 말로 시키는 것만으로 이미지를 양산할 수 있는 시대가 된 거죠.

대표적인 도구가 둘입니다.

• Codex 는 OpenAI가 만든 터미널용 코딩 도구입니다. 폴더 안의 파일을 읽고 고치고 명령까지 직접 실행해요. 손으로 그린 시안이나 화면 캡처를 같이 던지면 그걸 보고 비슷하게 만들어 주는 것도 됩니다.
• Claude Code 는 Anthropic이 만든 코딩 도구로, 터미널은 물론 데스크톱 앱과 코드 편집기 안에서도 돌아갑니다. 마찬가지로 파일을 읽고 수정하고 필요한 명령을 알아서 실행해 줘요.

쓰는 흐름은 어렵지 않습니다. 도구를 설치하고 작업할 폴더에서 실행한 다음 "이 색과 폰트로 항목 세 개짜리 비교 카드를 만들고 webp로 뽑아줘"처럼 말하면 됩니다. 결과가 마음에 안 들면 "글자를 더 크게", "간격을 넓혀"처럼 대화하듯 이어서 고치면 돼요. 앞서 말한 satori의 까다로운 제약(특정 CSS만 된다거나)을 사람이 외울 필요도 없습니다. AI가 그 제약에 맞게 코드를 써주니까요.

이렇게 AI 코딩 도구로 필요한 작은 프로그램을 직접 만들어 쓰는 흐름은 satori 말고도 넓게 쓰입니다. 예전 같으면 개발자에게 부탁했을 일을 검색 자동화 도구를 직접 만드는 식으로 혼자 해결하는 경우가 점점 늘고 있어요.

저는 실제로 이렇게 씁니다

이 블로그 본문에 들어가는 도식과 카드 이미지가 정확히 이 방식으로 만들어집니다. 디자인 툴은 거의 켜지 않아요. HTML로 모양을 잡으면 satori가 그림으로 바꾸고 webp로 저장하는 흐름을 그대로 씁니다.

핵심은 디자인 토큰을 미리 정해두는 거예요. 사이트에서 쓰는 색(포인트 블루 하나)과 글꼴(Pretendard), 여백 값 같은 걸 몇 개 정해두고 AI한테 그대로 쓰라고 시킵니다. 그러면 새로 만든 이미지가 사이트 분위기와 따로 놀지 않고 자연스럽게 어울려요. 매번 색을 새로 고를 필요도 없고요.

한 가지 습관도 생겼습니다. 이미지 안에는 제목이나 긴 문장을 넣지 않아요. 짧은 라벨과 숫자, 화살표 정도만 두고 설명은 본문 글이 맡깁니다. 그래야 이미지가 한눈에 읽히고, 나중에 내용을 고칠 때도 본문만 손보면 되거든요. 카드 형태로 정보를 쪼개는 작업은 카드뉴스를 자동화하는 방식과도 결이 비슷합니다.

어디에 어울리고 어디엔 아닐까

모든 이미지를 코드로 만들 수 있는 건 아닙니다. 글자와 도형 위주라면 강하지만 사진이나 복잡한 그림이라면 맞지 않아요. 이 경계를 알고 갈라 쓰는 게 중요합니다.

• 잘 맞는 쪽 : 비교표, 개념도, 단계별 흐름도, 카드뉴스 틀, 숫자를 강조하는 카드, 공유용 썸네일처럼 정해진 틀에 내용만 바뀌는 이미지
• 안 맞는 쪽 : 실사 사진, 자유로운 일러스트, 입체 효과가 들어간 화면. satori는 3D 변형이나 요소를 앞뒤로 겹치는 기능, 정교한 글자 간격 조정 같은 고급 기능은 지원하지 않습니다

그래서 사진이나 그림풍이 필요하면 생성형 이미지 AI에 맡기고, 글자가 정확해야 하는 정형 이미지는 satori로 뽑는 식으로 나눠 쓰면 됩니다. 둘은 경쟁 관계가 아니라 역할이 다른 도구예요.

알아두면 덜 헤매는 팁

직접 써보면서 효과를 본 요령만 추렸습니다. 거창한 게 아니라 작은 습관들이에요.

• 디자인 토큰부터 정하세요. 색과 폰트, 여백 값 몇 개를 먼저 정해 AI한테 넘기면 이미지마다 톤이 들쭉날쭉해지는 일이 줄어듭니다.
• 한 번에 완벽을 노리지 마세요. 처음 결과가 어설퍼도 "글자 키워", "여백 넓혀"처럼 이어서 다듬으면 금방 모양이 잡힙니다.
• 사진은 코드로 욕심내지 마세요. 글자와 도형이 중심인 정형 이미지에만 쓰는 게 시간을 아끼는 길이에요.

이럴 때 막혀요, 해결법

막상 만들다 보면 비슷한 자리에서 막히는데, 원인을 알면 대부분 금방 풀립니다. 자주 나오는 문제만 모았어요.

• 한글이 네모로 깨질 때 satori가 한글 폰트를 못 찾아서예요. 한글 폰트 파일을 직접 물려주면 해결됩니다. AI에 맡길 때도 "한글 폰트 넣어줘"를 빼먹지 마세요.
• 글자가 잘리거나 줄바꿈이 안 될 때 박스 너비가 정해지지 않아 생기는 경우가 많아요. 그 영역에 가로 폭을 지정하면 글자가 안에서 알맞게 줄을 넘깁니다.
• 레이아웃이 통째로 무너질 때 satori는 거의 모든 배치를 flex로 처리해서 한 요소라도 빠지면 틀어집니다. AI가 짠 코드가 깨지면 "모든 요소를 flex로 잡아줘"라고 한 번 더 일러두면 돼요.
• 이미지가 흐릿하게 나올 때 화면 해상도보다 작게 그려서 그래요. 2배 크기로 렌더하면 또렷하게 나옵니다.
• 그리드나 겹치기 효과가 안 먹을 때 satori가 지원하지 않는 기능이라 그래요. 요소를 앞뒤로 겹치는 대신 flex로 나란히 두는 식으로 우회하면 됩니다.
• AI가 안 되는 CSS를 자꾸 쓸 때 satori 제약을 몰라서 그런 거라, 나온 에러 메시지를 그대로 붙여 "이 제약에 맞게 다시 짜줘"라고 하면 알아서 고쳐줍니다.

자주 묻는 질문

코딩을 전혀 몰라도 되나요? AI 코딩 도구가 코드를 대신 짜주기 때문에 입력은 자연어로 충분합니다. 다만 나온 결과를 보고 "이 부분은 좀 다르게"라고 방향을 잡아주는 정도는 사람의 몫이에요. 완전히 맡기기보다 대화하며 다듬는다고 생각하면 편합니다.

비용이 드나요? satori 자체는 오픈소스라 무료입니다. AI 코딩 도구는 무료 한도와 유료 요금제로 나뉘지만, 생성형 이미지 서비스처럼 이미지 한 장당 돈이 빠져나가는 방식은 아니에요. 같은 틀로 많이 찍어낼수록 장당 비용은 사실상 0에 가까워집니다.

피그마 같은 디자인 툴을 대체하나요? 아닙니다. 자유로운 디자인과 감각적인 마무리는 디자인 툴이 여전히 낫습니다. satori는 같은 틀을 대량으로 정확하게 찍어내는 게 강점이라 쓰임이 달라요. 둘 중 하나를 버리는 게 아니라 상황에 맞게 갈라 쓰는 쪽이 현실적입니다.

한글도 잘 되나요? 됩니다. 다만 위에서 말했듯 한글 폰트 파일을 직접 넣어줘야 글자가 깨지지 않아요. 폰트만 제대로 물리면 영어와 똑같이 깔끔하게 나옵니다.