클로드를 디자인 천재로 만드는 법, 일단 보세요

한 줄 요약

Claude가 만드는 디자인이 왜 "AI 티"가 나는지 원리를 짚어주는 영상이에요. 그리고 레퍼런스 사이트 활용, 벤치마크 비교 프롬프트, 스크린샷 한 장으로 완성본을 뽑는 "디자인 루프", 개인 디자인 운영체제까지 3단계로 디자인 퀄리티를 끌어올리는 실전 방법을 다룹니다.

전체 내용 정리

AI가 만든 디자인이 티 나는 이유는 좋은 디자인을 본 적이 없기 때문이에요

같은 프롬프트를 Claude에 던지면 모두가 비슷한 결과물을 받게 되잖아요. 이는 Claude가 훌륭한 디자인을 학습해서 본 경험이 부족하기 때문이라는 것이 이 영상의 출발점입니다.

AI 슬롭(slop)이 눈에 띄는 이유는 단순히 못생겨서가 아니에요. 특유의 패턴이 반복적으로 알아볼 수 있게 남기 때문이죠.

그 패턴은 다섯 가지로 정리됩니다. 타이포그래피, 이미지, 위계 구조, 컬러, 여백(spacing)이요.

결국 관건은 Claude에게 똑같은 프롬프트가 아니라, 실제 디자이너처럼 사고할 수 있는 재료를 주는 거예요.

2,000개 디자인 아카이브에서 원하는 스타일을 그대로 뽑아내는 방법

디자인 2,000개 이상을 모아둔 아카이브 사이트를 소개해요. 각 디자인마다 디자인 계층 구조 설명, 컬러 팔레트, 타이포그래피, Tailwind CSS 변수, 디자인 토큰까지 확장된 정보를 제공합니다.

이를 직접 시연하기 위해 애플(Apple) 디자인 시스템 페이지를 골라, "이 디자인 아키텍처를 활용해서 티타늄 프로틴 쉐이크를 파는 아름다운 웹사이트를 만들어달라"는 프롬프트만 던졌어요.

결과물은 완벽하지는 않았지만 꽤 인상적이었습니다. 이미지 한 장 제공하지 않았는데도 프로틴 병 이미지, 벤토 박스 스타일 레이아웃, chalk·sky·citrus·amber·teal·graphite 같은 색상 옵션까지 프롬프트만으로 생성해냈어요.

내 웹사이트를 벤치마크와 직접 비교시켜서 구체적 개선점을 찾는 방법

두 번째 활용법은 본인이 창업한 스타트업 Glider의 웹사이트를 다른 훌륭한 사이트와 비교하는 거예요.

디자인이 좋기로 유명한 Linear 웹사이트를 예로 들어, 아카이브 사이트의 Linear 페이지 링크를 Claude에 주고 이렇게 요청했습니다. "이 디자인 시스템을 활용해서 내 사이트와 비교해달라, 가차없이(ruthless) 평가해달라, 결과는 HTML로 간결하게 정리해달라."

결과물은 두 사이트를 나란히 보여주면서 세 가지 구체적 문제를 짚어냈어요. 레터 스페이싱이 너무 느슨하다는 점, 높이(elevation) 단계 구분이 없다는 점, 히어로 이미지가 제품과 시각적으로 경쟁한다는 점이요.

컬러 hex 코드는 클릭하면 바로 복사되고, 값 차이는 슬라이더로 직접 비교할 수 있는 인터랙티브 HTML 결과물까지 만들어졌습니다.

디자인 루프 — 스크린샷 한 장으로 검증까지 자동으로 반복하는 기법

세 번째로 소개하는 "디자인 루프(design loop)"는 원래 다른 사람이 발견해 "gauntlet loop"라고 이름 붙인 기법이에요.

George Harley라는 사람이 모아둔 대형 브랜드(애플, 피그마 등)의 HTML 이메일 캠페인 아카이브에서 마음에 드는 디자인 하나를 스크린샷으로 찍어 Claude에 붙여넣고, "이 스타일로 만들어달라"는 벤치마크를 제시하면 됩니다.

그러면 Claude가 여러 개의 검증(critic) 서브 에이전트를 자동으로 생성해요. 하나는 브리프를 충족했는지, 다른 하나는 디자인 퀄리티가 훌륭한지, 또 다른 하나는 비주얼 임팩트가 있는지를 각각 평가하면서, 기준을 통과할 때까지 루프를 반복합니다.

디자인 루프 실전 사례와 결과물을 실제로 발송까지 연결하기

애플 제품 런칭 이메일 스크린샷을 참고 자료로 주고 "이 톤과 에너지를 살려서 Glider Windows 버전 런칭 이메일을 HTML로 만들어달라"고 하자, 한 번의 시도로 완성된 이메일이 나왔어요.

같은 방식으로 Anthropic 웰컴 이메일 스타일을 참고해 비슷한 톤의 결과물도 만들어냈습니다.

완성된 HTML은 Zapier 연동을 통해 바로 초안 이메일로 만들거나 본인에게 발송할 수 있었어요.

Zapier를 쓰는 이유는 일종의 "인증 레이어" 역할을 하기 때문입니다. 여러 AI 도구마다 매번 개별적으로 연결할 필요 없이, 한 번 연동해두면 이메일뿐 아니라 커뮤니티 플랫폼(Skool) 등 다양한 서비스에 그대로 접근할 수 있거든요.

개인 디자인 운영체제 — 이미지 생성부터 로컬 라이브러리 검색까지

가장 강조한 마지막 단계는 본인이 직접 구축한 Claude Code 기반 "디자인 운영체제(design OS)"예요.

Higgsfield, Kling AI, Open Router, OpenAI 등 여러 이미지·영상 생성 플랫폼을 선택할 수 있고, 비율·해상도·생성 개수를 정하면 장당 비용을 표시하면서 이미지를 생성해줍니다.

또한 "스타일 레시피" 기능으로 본인 유튜브 썸네일 스타일 같은 것을 예시 이미지와 함께 이름을 붙여 등록해두면, 이후 그 이름만 불러 같은 스타일의 이미지를 계속 생성할 수 있어요.

가장 인상적으로 소개한 기능은 로컬 이미지 라이브러리 검색입니다. 컴퓨터에 저장된 모든 이미지·영상을 저비용 모델로 인덱싱해두어, "버거"처럼 키워드를 검색하면 파일명이 아니라 실제 이미지 내용을 기준으로 관련 파일을 모두 찾아줘요.

핵심 인사이트

• 좋은 디자인은 "본 적 있어야" 나와요: Claude가 슬롭을 만드는 이유는 좋은 디자인 레퍼런스를 접해본 적이 없어서입니다. 그래서 프롬프트에 구체적인 레퍼런스 이미지나 사이트를 함께 제공하는 것 자체가, 결과물 품질을 가르는 가장 큰 변수예요.
• 막연한 요청보다 비교 프롬프트가 훨씬 구체적인 개선점을 뽑아내요: "예쁘게 만들어줘" 대신 "이 벤치마크와 가차없이 비교해서 어디가 부족한지 짚어달라"고 요청하면, 레터 스페이싱·여백·위계 같은 눈에 안 보이던 문제를 구체적으로 언어화할 수 있습니다.
• 여러 개의 자체 검증 단계를 거치는 구조가, 사람이 여러 번 수정 요청하는 것보다 빠르게 기준을 통과한 결과물을 만들어요: 디자인 루프처럼 브리프 충족·퀄리티·비주얼 임팩트를 각각 평가하는 서브 에이전트를 두면, 한 번의 요청으로도 반복 검증을 거친 완성도 높은 결과물이 나옵니다.

오늘 당장 해볼 것

1. 마음에 드는 웹사이트나 브랜드 이미지를 캡처해 폴더 하나에 모아두세요. 그리고 디자인 업체나 AI 툴에 작업을 맡길 때 이 레퍼런스를 함께 제시해 원하는 톤을 명확히 전달하시면 됩니다.
2. 우리 웹사이트나 홍보 자료를 마음에 드는 브랜드 사이트와 나란히 놓고 "가차없이 비교해서 부족한 점을 구체적으로 짚어달라"고 요청해 개선 우선순위를 뽑아보세요.
3. 반복적으로 만드는 이미지(썸네일, 배너, 카드뉴스 등)가 있다면 잘 나온 예시 몇 장을 별도로 모아두고, 매번 그 예시를 참고자료로 함께 제공해 톤을 일관되게 유지해보세요.