2026년 6월 5일

디자인 몰라도 AI로 카드뉴스 만들기 — 감각 대신 'AI 디자인 가이드 + HTML'

디자인 몰라도 AI로 카드뉴스 만들기 — 감각 대신 AI 디자인 가이드와 HTML 감각으로 매번 새로 그리는 게 아니라, 규칙(디자인 가이드)을 한 번 만들어 AI가 그대로 찍어내게 하는 거예요. 제가 실제로 거친 길을 정리합니다.

카드뉴스는 만들어야 하는데, 디자인을 배운 적이 없어서 막막하셨다면.

남이 만든 건 깔끔한데 내가 만들면 어딘가 어설프고, 매번 색과 폰트를 고르다 시간이 다 가죠. 혼자 마케팅하면 누구나 겪는 벽이에요.

그런데 제가 카드뉴스를 매일 만들면서 깨달은 게 하나 있어요. 프로처럼 보이는 건 디자인 감각이 아니라, 규칙이라는 것. 그리고 그 규칙(디자인 가이드)을 한 번 만들어두면, 이제 그리는 일은 AI가 대신 해줍니다. 감각으로 매번 새로 그리는 게 아니라, 규칙대로 찍어내는 거예요.

이번 글에서는 제가 'AI 디자인 가이드 + HTML'로 카드뉴스를 만드는 실제 과정과, 그걸 따라 하는 방법, 그리고 코드가 부담되는 분을 위한 쉬운 길까지 정리할게요.

제가 정착한 방식 — claude.ai/design 가이드 + HTML

카드뉴스 제작 방식 — claude.ai/design으로 가이드를 만들고 HTML로 찍어내기

디자인 도구는 많아요. 저도 **피그마(Figma)**에 AI를 연결(MCP)해서 써봤고요. 그런데 카드뉴스를 만들면서 깨달은 건, 카드뉴스에는 굳이 피그마까지 갈 필요가 없다는 거였어요. 클로드와 HTML로도 충분히 퀄리티 있게 나오거든요. 도구가 무거울 필요가 없었던 거죠.

방식을 바꾼 출발점은 디자인 가이드를 한 번 제대로 만든 것이었어요. 저는 claude.ai/design에서 우리 브랜드의 색·폰트·여백·강조 규칙을 만들었어요. 어떤 색을 쓰고, 제목은 몇 px이고, 강조는 어떻게 하는지를 전부 규칙으로 정리한 거죠. 이 가이드를 조금씩 수정해가며 쓰는데, 기초이자 중심이 되어주니 정말 든든해요.

그 다음부터는 HTML로 다 만듭니다. 가이드를 AI에게 주고 "이 내용으로 카드 만들어줘" 하면, 가이드 규칙대로 카드를 그려줘요. 저는 텍스트만 주고, 레이아웃·색·폰트는 AI가 가이드대로 처리합니다. 결과물이 매번 일관되게, 프로처럼 나와요. 지금 보시는 이 카드뉴스들도 다 그렇게 만든 거예요.

핵심은 이거예요. 감각을 키운 게 아니라, 규칙(가이드)을 한 번 만들었을 뿐이에요. 규칙이 있으니 AI가 그대로 찍어낼 수 있었던 거죠.

핵심 원리 — 왜 '가이드 + AI'가 감각을 이기나

감각으로 매번 그리기 vs 가이드를 AI에게 주고 찍어내기 비교

방법에 들어가기 전에, 왜 이 방식이 강력한지 두 가지만 짚을게요.

1. 일관성이 곧 프로페셔널함이다 카드뉴스가 어설퍼 보이는 진짜 이유는 디자인이 못나서가 아니라 들쭉날쭉해서예요. 색이 다섯 가지고, 폰트가 카드마다 다르고, 글자 크기가 제각각이면 산만해 보여요. 가이드는 이 모든 걸 고정합니다. AI는 그 고정된 규칙을 한 치도 안 틀리고 적용하고요. 사람보다 AI가 더 일관돼요.

2. 한 번 만들면 영원히 재사용된다 감각은 매번 새로 짜내야 하지만, 가이드는 한 번 만들면 자산이에요. 다음 카드뉴스도, 그 다음도 같은 가이드로 찍어냅니다. 그래서 처음 한 번이 느릴 뿐, 그 뒤로는 한 세트에 10~20분이면 나와요.

정리하면 — 감각은 매번 소모되지만, 규칙은 쌓입니다. 이제 그 규칙을 만들고 AI에게 넘기는 방법을 봅니다.

방법 1 — 감각 대신 '디자인 가이드' 한 장부터

디자인 가이드에 들어가는 4가지 — 색·폰트·여백·강조 규칙

가장 먼저 할 일은 카드를 그리는 게 아니라, 규칙을 정하는 것이에요. 디자인 가이드라고 거창할 것 없어요. 딱 네 가지만 정하면 됩니다.

색: 바탕색 1, 글자색 1, 강조색 1 (HEX 코드로 고정)
폰트: 제목용 1, 본문용 1 (그 이상 안 씀)
여백·크기: 제목 몇 px, 본문 몇 px, 바깥 여백 얼마
강조 규칙: 강조는 한 카드에 1~2번, 강조색은 어디에

이걸 머릿속이 아니라 문서 한 장에 적어두는 게 핵심이에요. 그래야 AI에게 그대로 넘길 수 있거든요. 저는 claude.ai/design에서 이 가이드를 만들었는데, 색·폰트 조합을 시각적으로 잡아주고 한 번 만들어두면 계속 다듬으며 쓰기 좋아요. 꼭 거기가 아니어도, AI와 대화하며 만들면 빠릅니다.

오늘 1단계 — AI와 디자인 가이드 만들기 (프롬프트)

나는 [업종/브랜드 분위기]의 인스타 카드뉴스를 일관되게 만들고 싶다.
디자인 가이드를 같이 만들어줘.
- 바탕색·글자색·강조색 3색 조합을 HEX로 3세트 제안 (각 인상도 한 줄)
- 제목용·본문용 한글 무료 폰트 2개 추천
- 제목/본문 글자 크기, 바깥 여백, 강조 규칙도 숫자로 제안
이걸 '카드뉴스 디자인 가이드' 한 장으로 정리해줘.

방법 2 — 가이드를 AI에게 주고 '통째로' 시키기

텍스트만 주면 AI가 디자인 가이드대로 카드를 통째로 만드는 흐름

가이드가 생겼다면, 이제 카드를 직접 그리지 않아요. 가이드와 내용을 AI에게 주고 "이대로 만들어줘" 하면 됩니다. AI가 가이드 규칙대로 색·폰트·여백을 맞춰 카드를 짜줘요.

여기서 중요한 건, AI에게 **"예쁘게 만들어줘"가 아니라 "이 가이드대로 만들어줘"**라고 하는 거예요. 막연히 시키면 매번 다르게 나오지만, 가이드를 주면 일관되게 나옵니다. 사람한테 외주 줄 때 가이드를 주는 것과 똑같아요.

오늘 1단계 — 가이드 기반으로 카드 시키기 (프롬프트)

아래 디자인 가이드를 그대로 지켜서, 다음 내용으로 카드뉴스를 만들어줘.
[디자인 가이드 붙여넣기]
[카드에 담을 내용 / 또는 어제 만든 카드 구조 붙여넣기]
- 색·폰트·여백·강조는 가이드 규칙을 한 치도 벗어나지 말 것
- 한 카드 = 한 메시지, 제목은 가이드의 제목 크기로

방법 3 — HTML로 찍어내기 : "내용만 갈아끼우면 끝"

같은 HTML 템플릿에 내용만 바꿔 카드 10장을 찍어내는 방식

제가 정착한 방식이 HTML이에요. 카드 한 장을 HTML(코드)로 만들어두면, 같은 코드에 내용(텍스트)만 바꿔서 10장을 그대로 찍어낼 수 있어요. 색·폰트·여백이 코드에 고정돼 있으니 절대 안 흐트러집니다.

그리고 이 HTML을 만드는 일도 AI(클로드코드 같은 도구)에게 시킬 수 있어요. "가이드대로 카드 HTML 만들어줘" 하면 코드를 짜주고, 저는 텍스트만 바꿉니다. 디자인 도구를 따로 열 필요도 없이, 대화만으로 카드가 나와요. 카드뉴스처럼 같은 톤을 매일 반복해서 찍어내는 작업엔 이게 가장 빠르고 일관됐어요.

물론 "코드"라는 말에 부담을 느끼실 수 있어요. 그래서 다음 방법(쉬운 길)을 준비했어요. 다만 한 번 익숙해지면, 이게 카드뉴스를 가장 빠르고 일관되게 양산하는 방법이라는 건 꼭 말씀드리고 싶어요.

오늘 1단계 — 카드 1장을 HTML로 만들어보기 (프롬프트)

아래 디자인 가이드대로, 인스타 카드뉴스 1장을 HTML/CSS로 만들어줘.
[디자인 가이드 붙여넣기]
- 1080×1350 크기, 제목 + 본문 1~2줄 구조
- 색·폰트·여백은 가이드 그대로
- 내용만 쉽게 바꿀 수 있도록 텍스트 부분을 위에 따로 빼줘

방법 4 — 코드가 부담되면 : 가이드 + 캔바 템플릿

코드 없이 가이드와 캔바 템플릿 복제로 일관성을 만드는 쉬운 길

"HTML은 아직…" 싶으셔도 괜찮아요. 원리는 똑같이 쓸 수 있어요. 핵심은 도구가 아니라 **"가이드를 정하고, 그걸 반복하는 것"**이니까요.

**캔바(Canva)**에서 방법 1의 가이드대로 기준 카드 1장을 만든다
그 카드를 복제해서 텍스트만 바꾼다 (색·폰트·여백은 그대로니까 일관됨)
카드 텍스트는 AI에게 뽑게 한다 (어제 글의 후킹 6공식 활용)

이렇게만 해도 "매번 새로 디자인"에서 벗어나요. 그리고 익숙해지면 방법 3(HTML)으로 한 단계 올라가면 됩니다. 중요한 건 순서예요 — 가이드 먼저, 도구는 나중.

오늘 1단계 — 기준 카드 1장 복제해보기

캔바에서 가이드대로 카드 1장만 제대로 만들고, 복제해서 내용만 바꿔 한 세트(10장)를 끝까지 만들어보세요. 그 한 장이 앞으로 모든 카드뉴스의 템플릿이 됩니다.

카드뉴스 만드는 순서 — 이대로만

AI 카드뉴스 제작 순서 — 가이드부터 찍어내기까지 4단계

매번 막막할 때, 이 순서로 가면 됩니다.

순서	할 일	도구
1	디자인 가이드 한 장 만들기 (색·폰트·여백·강조)	AI
2	가이드 + 내용을 AI에 주고 카드 시키기	AI
3	HTML 또는 캔바로 기준 카드 1장 확정	HTML / 캔바
4	내용만 바꿔 10장 찍어내기	HTML / 캔바

보시면 어디에도 "디자인 감각"이 없어요. 가이드를 만들고, AI에게 넘기고, 찍어내는 절차일 뿐이에요. 감각이 아니라 시스템입니다.

자주 묻는 질문 (FAQ)

Q1. 디자인 가이드를 만들 줄도 모르는데요? 그래서 방법 1을 AI와 함께 만드는 거예요. "내 업종은 이렇고 이런 분위기를 원해"라고만 하면 AI가 색·폰트·크기를 제안해줍니다. 거기서 마음에 드는 걸 고르고 숫자만 확정하면 가이드 한 장이 완성돼요. 처음 한 번만 만들면 계속 재사용합니다.

Q2. 꼭 HTML(코드)을 써야 하나요? 아니에요. 원리는 "가이드를 정하고 반복하는 것"이라, 캔바로도 똑같이 됩니다(방법 4). HTML은 가장 빠르고 일관된 방법일 뿐이에요. 코드가 부담되면 캔바로 시작하고, 익숙해지면 HTML로 올라가면 됩니다. 순서는 늘 가이드 먼저, 도구는 나중이에요.

Q3. AI가 만든 카드가 가이드를 자꾸 벗어나는데요? 프롬프트에 가이드를 그대로 붙여넣고 "이 규칙을 벗어나지 말 것"이라고 명시하세요. "예쁘게"가 아니라 "이 가이드대로"라고 시키는 게 핵심이에요. 그래도 어긋나면, 어긋난 부분(예: "강조색이 두 번 넘게 쓰였어")을 짚어서 다시 시키면 됩니다.

Q4. 피그마 같은 디자인 툴은 안 써도 되나요? 정교한 단발 디자인엔 피그마가 좋아요. 저도 피그마에 AI를 연결(MCP)해 써봤고요. 다만 같은 톤을 매일 반복해서 찍어내는 카드뉴스에는 거기까지 갈 필요가 없더라고요 — 클로드와 HTML로도 충분히 퀄리티 있게 나오니까요. 도구는 목적에 따라 고르는 거예요. "반복 양산"이 목적이면 가이드 + HTML이 가볍고 빠릅니다.

마무리 — 감각을 키우지 말고, 규칙을 만드세요

카드뉴스가 어설퍼 보이는 건 디자인 감각이 없어서가 아니라, 규칙이 없어서예요. 저는 claude.ai/design으로 디자인 가이드를 한 번 만든 뒤로 카드뉴스를 HTML로 찍어내고 있어요. 무거운 디자인 툴 없이도 결과물은 오히려 더 일관되고 프로처럼 나옵니다.

순서는 늘 같아요 — 가이드를 만들고(방법 1), AI에게 넘기고(방법 2), HTML이나 캔바로 찍어내는 것(방법 3·4). 감각은 매번 소모되지만, 규칙은 쌓입니다. 오늘 딱 한 가지, 내 카드뉴스 디자인 가이드 한 장부터 만들어보세요. 그게 모든 것의 시작이에요.