Jack RobertsMORNING DIGEST · 2026-08-20 · Jack Roberts🎬 영상

클로드 디자인, 드디어 '일관성 문제'를 해결하다

인포그래픽 요약

01핵심 개요

항목내용
형식Jack Roberts 채널의 실습형 튜토리얼 영상. 진행자가 화면을 공유하며 클로드(Claude)로 디자인을 만들고 이를 재사용 가능한 시스템으로 만드는 과정을 시연한다.
화자Jack(진행자, 이전 테크 스타트업을 매각한 경험이 있으며 현재 AI 스타트업 및 커뮤니티를 운영)
핵심 문제의식클로드로 만든 디자인의 99%는 일반적이거나 일관성이 없다는 '일관성 문제(consistency problem)'를 제기하고, 좋은 디자인 한 번을 여러 번 재현 가능하게 만드는 방법을 다룬다.
핵심 내용① 디자인 루프(design loop) 스킬로 좋은 디자인 만들기 ② 완성된 디자인의 'DNA'를 분해해 규칙 문서로 만들고 스킬화하기 — 이를 포스터, 웹사이트, 모션그래픽(Vox 스타일) 3단계 난이도로 실습
사용 도구클로드 디자인 루프 스킬, Higsfield(이미지·영상 생성 MCP/CLI), Fish Audio(음성 합성, 감정 태그 지원), Save(레퍼런스 이미지 사이트), Referral Design(웹사이트 디자인 시스템 레퍼런스)
결과물 예시AI 콘퍼런스 포스터(원본 레퍼런스와 흡사한 수준으로 재현), 듀오링고 스타일 AI 학습 웹사이트, 스프링어 스패니얼을 소재로 한 10초 Vox 스타일 모션그래픽

02핵심 기능/내용 구조

영상은 클로드 디자인의 일관성 문제를 해결하는 2단계 시스템을 포스터·웹사이트·모션그래픽 3개 난이도로 실습하며 설명한다.

  1. 문제 제기: 클로드로 만드는 디자인 대부분이 일반적이거나 일관성이 없다는 'AI 슬롭(AI slop)' 문제를 지적하며, 아무리 아름다운 디자인이라도 반복 재현할 수 없다면 유튜브·인스타그램·클라이언트 작업에 쓸 수 없다고 강조한다. 해법은 두 가지뿐이다. ① 디자인을 훌륭하게 만들 것, ② 무엇이 그것을 훌륭하게 만드는지 코드화(codify)해 언제든 재현 가능하게 만들 것.
  2. 1단계 — 디자인 루프(Design Loop) 소개: 디자인 루프는 사용자가 원하는 결과물을 클로드에게 제시하면, 클로드가 2~3개의 하위 에이전트를 만들어 서로 결과물을 검증하는 루프를 도는 방식이다. 한 에이전트는 여백·정렬을 점검하고, 다른 에이전트는 색상 일관성을 점검하는 식으로 역할을 나눠 디자인이 완성될 때까지 반복 개선한다. 클로드에게 10번 개선을 요청하면 10개의 서로 다른 결과가 나오는 문제를, 이 루프 구조로 해결한다고 설명한다.
  3. 레벨 1 — 포스터 제작: 'Save'라는 디자인 레퍼런스 사이트에서 마음에 드는 포스터 디자인을 찾아 스크린샷하고, 디자인 루프 스킬을 클로드에 등록(/design-loop)한 뒤: "이 디자인과 똑같이 AI 콘퍼런스용으로 만들어줘"라고 요청한다. 이미지 생성은 Higsfield(이미지·영상 생성 플랫폼)를 MCP/CLI로 연결해 사용한다. 결과물은 원본과 놀랍도록 흡사했으며, 특히 줄 높이(line height)가 레이아웃 하단 요소와 정확히 대칭을 이루는 등 세부 디테일까지 정확히 재현했다고 평가한다.
  4. 일관성 확보 — 디자인 DNA 분해: 진행자가 오랫동안 준비해온 시스템으로, 좋은 디자인을 만드는 과정을 "설명하지 말고 측정하라"는 원칙 아래 분해한다. 절차는 ① 좋아하는 디자인을 찾아 분해·측정 ② 어떤 요소가 실제로 중요한지 스스로 논쟁 ③ 규칙을 파일로 기록 ④ 나쁜 카피본이 실패하도록 테스트 작성 ⑤ 규칙만으로 원본을 재구성 ⑥ 틀린 부분은 빠뜨린 규칙이므로 다시 반복하는 순서다. 황금비율(1.61), 색상 이론의 60-30-10 법칙, 그림자·아이콘·곡선·레이아웃 명명법 등 다양한 관점에서 디자인을 분해한 노션(Notion) 문서를 만들어 공유 링크로 클로드에 전달하고 "이걸 재사용 가능한 스킬로 만들어줘"라고 요청하면, 이후 같은 스타일의 포스터를 색상만 바꿔 여러 버전으로 일관되게 생성할 수 있다. 완성된 스킬은 /poster처럼 명령어로 저장할 수 있으며, 스킬이 부족한 정보(주제·전경·배경 등)를 되물어보는 방식으로 작동한다.
  5. 레벨 2 — 웹사이트 제작: 2,000개 이상의 AI 판독 가능한 디자인 시스템을 보유한 'Referral Design' 사이트에서 레퍼런스(예: 듀오링고)를 선택하고, "듀오링고 같은 AI 학습 웹사이트를 만들어줘"라고 요청한다. Higsfield CLI로 이미지·그래픽을 생성하고, 별도로 구축한 '웹사이트 디자인 시스템 스킬'을 적용해 카피(문구)까지 함께 생성한다. 결과물은 커스텀 그래픽, 인터랙션 요소, 애니메이션 섹션 등을 포함해 듀오링고의 톤을 상당히 잘 재현했다고 평가한다. 결과물에는 디자인 시스템(타이포그래피, 버튼, 학습 경로, 아이콘, 로그인 화면 등)과 그래픽 디자인 시스템(캐릭터 자산 인벤토리, 비율을 유지하는 모델 시트, 색상 팔레트, 모션 루프)이 함께 생성되어 재사용 가능한 자산으로 관리된다.
  6. 카피(문구) 반AI슬롭 시스템: 진행자가 자신의 커뮤니티에서 구축한 카피 시스템은 안티슬롭(anti-slop) 레포지토리, 위키피디아 원칙, GPT-5.6 클렌즈, 최고 카피라이터들의 원칙("생각하게 하지 마라", "고통을 짚어라" 등)을 결합해 AI 특유의 상투적 문구를 제거한다. 예시로 "Get Started"나 "The fun way to learn AI" 같은 문구를, "모두가 AI를 쓰지만 거의 아무도 잘 다루지 못한다"처럼 더 설득력 있는 카피로 바꾸는 사례가 제시된다. 진행자는 커뮤니티에서 수백 개 웹사이트를 검토한 경험상, 가장 흔한 피드백이 "텍스트가 너무 많다"보다도 "AI가 쓴 것처럼 보인다"는 지적이었다고 밝힌다.
  7. 레벨 3 — Vox 스타일 모션그래픽: 가장 난이도가 높은 도전으로, 유튜브 매체 Vox의 설명 영상 특유의 그래픽 스타일(화살표, 내레이션과 맞물린 애니메이션)을 재현한다. 참고할 Vox 클립의 URL을 복사해 클로드에 전달하고, 디자인 루프 스킬로 "이 10초 클립을 골드 스탠더드로 삼아 같은 스타일의 10초 모션그래픽을 스프링어 스패니얼(진행자가 기르는 개 품종) 소재로 만들어줘"라고 요청한다. 이미지·영상은 Higsfield, 음성은 Fish Audio를 사용하도록 지정한다.
  8. Fish Audio 음성 생성: 기존 대비 3~7배 저렴하고, 감정 태그(예: 울음, 흥분)를 문장에 삽입하면 '자동 태그' 기능이 어울리는 감정을 자동 적용해준다. 다양한 목소리 라이브러리(모건 프리먼 스타일 포함, 다만 클로드가 실제 모건 프리먼 음성 사용은 거부함)를 제공하며, API 키를 발급해 클로드와 직접 연동할 수 있다.
  9. 레벨 3 결과물: 완성된 10초 클립은 원본 Vox 영상의 스타일(애니메이션 배경, 화살표, 내레이션 타이밍)을 그대로 반영했으며, Higsfield가 스패니얼과 낙엽이 떨어지는 배경까지 별도로 생성했다. 이 과정에서 클로드는 원본 영상의 구성요소(화살표, 배경 영상, 텍스트 박스 등)를 먼저 분해해 식별한 뒤 각 요소를 재현하는 방식으로 작동한다고 설명한다.
  10. 마무리: 디자인을 이해하는 것은 중요하지만 전체 시스템의 일부일 뿐이며, 에이전틱 운영체제(agentic operating system)와 디자인 운영체제(design operating system)를 함께 활용하지 않으면 많은 가치를 놓치게 된다는 점을 강조하며 다음 영상(클로드 코드 마스터클래스)으로 이어간다.

03기술적 맥락

이 영상이 제시하는 시스템은 생성형 AI 디자인의 고질적 문제인 '비결정성(non-determinism)'을 다룬다. 동일한 프롬프트라도 매번 다른 결과가 나오는 클로드의 특성 때문에, 좋은 결과물이 한 번 나와도 이를 재현할 방법이 없다는 것이 핵심 문제다. 이를 해결하는 접근은 크게 두 갈래다. 첫째, '디자인 루프'는 다중 에이전트 검증 구조로, 서로 다른 역할(여백 검증, 색상 검증 등)을 가진 하위 에이전트들이 하나의 결과물을 두고 반복적으로 합의에 도달하게 만드는 멀티에이전트 오케스트레이션 기법이다. 둘째, '스킬화'는 완성된 디자인의 암묵적 규칙(비율, 색상 배분, 타이포그래피, 레이아웃 명명법 등)을 명시적 문서(노션 등)로 추출한 뒤, 이를 클로드가 항상 참조하는 재사용형 프롬프트(스킬)로 변환하는 과정이다. 이 두 기법이 결합되면 "한 번은 우연히 좋은 디자인"이 아니라 "매번 검증 가능한 좋은 디자인"으로 전환된다. Higsfield(이미지·영상 생성)와 Fish Audio(음성 합성, 감정 태그)는 모두 MCP/CLI 방식으로 클로드에 연결되어, 디자인·이미지·영상·음성 생성을 하나의 워크플로우 안에서 처리할 수 있게 한다.

04전략적 의미

첫째, "만드는 것"과 "재현 가능하게 만드는 것"을 분리한 이 접근은, AI 생성 콘텐츠가 개인 취미를 넘어 상업적(클라이언트 납품, 브랜드 일관성 유지) 용도로 쓰이기 위한 핵심 조건을 제시한다. 재현 불가능한 디자인은 아무리 아름다워도 비즈니스 자산이 될 수 없다는 통찰은 AI 디자인 도구를 실무에 도입하려는 디자이너·마케터에게 중요한 기준이 된다. 둘째, '설명하지 말고 측정하라'는 원칙과 함께 제시된 디자인 DNA 분해 방법론(비율, 색상 배분, 레이아웃 명명법 등 정량적 요소로 디자인을 해부하는 것)은, 정성적으로만 다뤄지던 디자인 영역을 AI가 다룰 수 있는 정량적 규칙 체계로 전환하는 시도로 볼 수 있다. 셋째, AI 슬롭(전형적인 AI 생성 티가 나는 결과물) 문제는 이미지·카피 양쪽에서 동시에 다뤄지고 있으며, 진행자가 커뮤니티 피드백에서 얻은 "텍스트가 AI가 쓴 것처럼 보인다"는 지적이 가장 흔한 문제였다는 사실은, 향후 AI 생성 콘텐츠 품질 경쟁이 시각적 완성도뿐 아니라 카피 자연스러움에서도 벌어질 것임을 시사한다. 넷째, 여러 특화 도구(Higsfield, Fish Audio)를 MCP/CLI로 클로드에 연결해 하나의 워크플로우로 통합하는 방식은, AI 에이전트가 여러 전문 도구를 오케스트레이션하는 '허브' 역할로 발전하고 있음을 보여준다.

05핵심 워크플로우 또는 비교표

단계목표사용 도구
레벨 1: 포스터레퍼런스 이미지와 유사한 포스터 생성Save(레퍼런스), 디자인 루프 스킬, Higsfield
DNA 분해좋은 디자인의 규칙을 문서화해 스킬화노션 문서, 비율·색상이론·레이아웃 분석
레벨 2: 웹사이트레퍼런스 웹사이트 스타일의 신규 사이트 제작Referral Design(레퍼런스), 웹사이트 디자인 시스템 스킬, Higsfield
카피 시스템AI 특유의 상투적 문구 제거안티슬롭 원칙, 위키피디아 원칙, GPT-5.6 클렌즈
레벨 3: 모션그래픽Vox 스타일 10초 설명 영상 제작디자인 루프 스킬, Higsfield(영상), Fish Audio(음성)

디자인 DNA 분해 절차(요약):

  1. 좋아하는 디자인을 찾아 분해·측정한다(설명 대신 측정)
  2. 어떤 요소가 실제로 중요한지 스스로 논쟁한다
  3. 규칙을 파일로 기록한다
  4. 나쁜 카피본이 실패하도록 테스트를 작성한다
  5. 규칙만으로 원본을 재구성해본다
  6. 틀린 부분은 빠뜨린 규칙이므로 다시 반복한다

06활용 시나리오

  1. 브랜드 콘텐츠 제작 자동화: 마케팅 대행사나 1인 크리에이터가 매번 같은 톤앤매너의 포스터·소셜 이미지를 만들어야 할 때, 디자인 DNA를 한 번 문서화해 스킬로 저장하면 이후 색상·소재만 바꿔 일관된 결과물을 반복 생성할 수 있다.
  2. 웹사이트 랜딩페이지 제작: 스타트업이 레퍼런스 사이트(예: 듀오링고)의 톤을 참고해 자사 랜딩페이지를 빠르게 프로토타이핑할 때, 웹사이트 디자인 시스템 스킬과 카피 시스템을 결합해 시각 요소와 문구를 동시에 생성하는 데 활용할 수 있다.
  3. 설명 영상 제작: 유튜브 채널이나 사내 교육 콘텐츠 제작팀이 Vox 스타일 같은 특정 모션그래픽 포맷을 반복 제작해야 할 때, 골드 스탠더드 클립을 지정하고 소재만 바꿔가며 짧은 설명 영상을 대량 생산하는 워크플로우로 응용할 수 있다.
  4. AI 슬롭 감지·정제: 이미 AI로 제작된 웹사이트나 카피가 "AI가 쓴 것처럼 보인다"는 피드백을 받을 때, 이 영상에서 소개한 안티슬롭 원칙(생각하게 하지 마라, 고통을 짚어라 등)을 체크리스트로 활용해 문구를 재점검할 수 있다.

07현황 및 전망

이 영상은 클로드 디자인이 '아름다운 결과물 한 번 생성하기'에서 '일관된 브랜드 자산을 반복 생성하는 시스템'으로 진화하고 있음을 보여준다. 진행자는 이 디자인 DNA 분해·스킬화 방법론을 자신이 운영하는 커뮤니티에서 계속 발전시켜 왔으며, 별도의 '클로드 디자인 시스템 코스'(디자인 시스템, 컴플라이언스, 유지보수 포함)를 준비 중이라고 밝혀, 향후 이 분야의 체계적 교육 콘텐츠가 더 확산될 것으로 예상된다. Higsfield·Fish Audio 같은 특화 생성 도구들이 MCP/CLI로 클로드와 손쉽게 연동되는 흐름은 계속 확대될 전망이며, 이는 개별 크리에이터나 소규모 팀도 이미지·영상·음성을 아우르는 통합 콘텐츠 제작 파이프라인을 별도 개발 없이 구축할 수 있게 해준다. 또한 카피(텍스트) 영역에서의 안티슬롭 노력이 시각 디자인과 동일한 비중으로 다뤄지고 있다는 점에서, 향후 AI 생성 콘텐츠의 품질 기준이 시각적 완성도와 문구의 자연스러움을 함께 요구하는 방향으로 굳어질 가능성이 크다.

08용어 사전

용어한줄설명비유/예시
AI 슬롭AI가 생성한 티가 나는 전형적이고 일관성 없는 결과물진부한 문구나 뻔한 레이아웃의 웹사이트
디자인 루프(Design Loop)여러 하위 에이전트가 서로 검증하며 디자인을 반복 개선하는 스킬한 에이전트는 여백을, 다른 에이전트는 색상을 점검
디자인 DNA디자인을 이루는 비율·색상·레이아웃 등 정량화된 규칙 체계황금비율 1.61, 색상 60-30-10 법칙 등
Higsfield이미지·영상 생성 모델을 MCP/CLI로 연결해주는 플랫폼포스터·웹사이트 그래픽, 영상 배경 생성에 사용
Fish Audio감정 태그를 지원하는 음성 합성 플랫폼문장에 '울음' 태그를 넣으면 우는 톤으로 자동 생성
Vox 스타일화살표·내레이션이 맞물린 유튜브 매체 Vox 특유의 설명 그래픽 기법도표에 화살표가 나타나며 내레이션과 함께 움직이는 연출
안티슬롭(anti-slop)AI 특유의 상투적 문구·표현을 제거하는 카피라이팅 원칙"Get Started"를 더 구체적이고 설득력 있는 문구로 교체
Jack Roberts · 2026-08-20
← 목록으로