01핵심 개요
| 항목 | 내용 |
|---|---|
| 화자·형식 | 유튜버 Jack Roberts가 진행하는 실전 튜토리얼 영상. Claude(코드 생성)와 Higsfield(이미지·영상 생성)를 연결해 웹사이트를 처음부터 만드는 과정을 화면 녹화로 보여준다. |
| 문제의식 | 요즘 AI로 만든 웹사이트가 다들 똑같아 보인다는 것. 인디고-보라 그라데이션, 3개짜리 기능 카드, 같은 서체, 같은 문구 등 화자는 이를 "AI 슬롭(AI slop) 괴물"이라 부른다. |
| 핵심 주장 | Claude에게 그냥 "웹사이트 만들어줘"라고 프롬프트만 던지면 슬롭이 나온다. 대신 참조할 디자인 시스템, 이미지·영상 생성 파이프라인, 폰트 선택, 카피라이팅 검수까지 갖춘 "시스템"을 줘야 한다. |
| 실습 대상 | 화자는 "AI 교육 앱계의 듀오링고"라는 가상 프로젝트(가칭 Neuro)를 예시로, 듀오링고 디자인을 참조 삼아 웹사이트를 처음부터 끝까지 만들어 보인다. |
| 사용 도구 | Claude(Fable 5 모델, 코드 생성), 프론트엔드 레퍼런스 갤러리 사이트(디자인 영감), Higsfield(이미지·영상 생성, Seed to Dance 2.5 모델), "디자인 루프(gauntlet loop)" 커스텀 스킬, GPT-5.6 기반 카피 교정 시스템. |
| 결론 | 디자인 참조 → 이미지/영상 생성 → 타이포그래피 → 카피라이팅, 이 네 층위를 모두 갖춰야 AI 티가 안 나는 완성도 높은 웹사이트가 나온다는 것이 화자의 결론이다. |
02핵심 기능/내용 구조
영상은 크게 네 개의 "레벨"로 구성된다. 첫째, 화자는 요즘 AI가 만드는 웹사이트들이 왜 다 비슷해 보이는지 진단한다. 같은 프롬프트를 주니 같은 결과(같은 그라데이션, 같은 카드 개수, 같은 서체, 같은 문구)가 나온다는 것이다. 둘째 레벨은 "시스템을 줘라"는 해법이다. Claude 자체는 무엇이 좋은 디자인인지 모르므로, 수백 개의 잘 만들어진 실제 프론트엔드 사이트를 모아놓은 레퍼런스 갤러리 사이트를 보여주고, 그중 만들고자 하는 사업과 가장 가까운 예시 3개를 Claude가 직접 고르게 한 뒤, 하나를 골라 그 디자인 시스템을 그대로 학습시켜 새 웹사이트 초안을 만든다. 셋째 레벨은 이미지·영상 생성이다. Higsfield라는 생성 도구를 Claude Code CLI에 연결해, 레퍼런스 사이트를 "골드 스탠다드"로 놓고 고유한 캐릭터·그래픽·애니메이션을 반복 생성·심사하는 "디자인 루프" 스킬을 사용한다. 넷째 레벨은 타이포그래피와 카피라이팅이다. 폰트가 디자인 완성도에 미치는 영향을 강조하고, 무료 폰트 사이트와 폰트 추천 시스템을 소개한 뒤, 마지막으로 AI 특유의 문체("AI 슬롭 카피")를 GPT-5.6 기반 시스템으로 걸러내고 사람처럼 자연스럽고 설득력 있는 카피로 다듬는 과정을 보여준다.
03기술적 맥락
화자가 사용하는 파이프라인은 두 개의 서로 다른 AI 도구를 CLI 레벨에서 연결하는 구조다. 코드와 레이아웃 생성은 Claude(Fable 5 모델, 사고 강도는 "extra" 또는 "high")가 담당하고, 이미지·영상 에셋 생성은 Higsfield라는 별도 생성형 AI 플랫폼이 담당한다. 화자는 Higsfield의 CLI 연동 페이지를 스크린샷째로 Claude에 붙여넣어 "이 CLI에 연결해줘"라고 지시하면 브라우저 인증 창이 뜨고, 이후 Claude Code 안에서 바로 Higsfield의 여러 생성 모델(영상은 "Seed to Dance 2.5")을 호출할 수 있게 된다고 설명한다. 핵심 장치는 "디자인 루프(gauntlet loop)"라는 커스텀 스킬로, 이는 별도 영상에서 만든 스킬을 그대로 재사용한 것이다. 이 스킬은 목표 레퍼런스(예: 듀오링고)를 "골드 스탠다드"로 지정하면, Claude가 생성한 결과물을 판정하는 "심사(judge)" 로직을 반복 적용해 기준에 못 미치면 다시 생성하는 방식으로 동작한다. 화자는 이를 통해 "디자인을 개선해줘"라고 다섯 번 요청하면 다섯 번 다른 대답이 나오는 비일관성 문제를 줄일 수 있다고 설명한다. 카피라이팅 단계에서는 GitHub에 공개된 "AI 문체 탐지" 로직을 가져와 초안의 AI 티 나는 표현을 걸러내고, 이를 GPT-5.6에 다시 통과시켜 사람이 쓴 것처럼 자연스럽게 바꾼다. Claude로 생성한 카피가 오히려 "클로드스럽다"고 티가 나는 역설을 GPT 계열 모델로 상쇄하는 방식이다.
04전략적 의미
화자의 핵심 통찰은 "AI가 잘 만드는 것"과 "AI가 좋은 디자인을 아는 것"은 다르다는 점이다. Claude는 코드를 잘 짜지만 심미안이 내장되어 있지 않으므로, 잘 만들어진 실제 사이트들을 참조 자료로 명시적으로 주입해야 한다는 것이 첫 번째 전략이다. 두 번째는 "복제가 아니라 참조"라는 원칙이다. 화자는 영상 후반부에서 실제로는 듀오링고 하나만 베끼는 게 아니라 여러 디자인 시스템을 조합해 자기만의 스타일을 만들어야 한다고 강조하며, 캐릭터 디자인("로보 상어" 등 구체적 브랜드 요소)은 AI에게 맡기지 않고 사람이 직접 결정한다. 이는 "AI는 창의성을 대체하는 게 아니라 창작 과정의 반복 작업을 대체하는 도구"라는 화자의 명시적 입장과 연결된다. 세 번째는 카피라이팅을 디자인과 동급으로 취급하는 관점이다. 아무리 그래픽이 아름다워도 문구가 AI 티 나면 신뢰를 잃는다는 것이며, 이 때문에 별도의 카피 검수 시스템(경쟁사 벤치마킹 + AI 문체 제거 + 인간화)을 구축했다고 설명한다. 전체적으로 이 영상은 "AI 슬롭"이라는 업계 공통의 문제를 프롬프트 엔지니어링이 아니라 워크플로우·도구체인 설계로 해결하려는 접근을 보여준다.
05핵심 워크플로우·방법론
- 레퍼런스 수집: 잘 만들어진 프론트엔드 사이트 모음(레퍼런스 갤러리)에서 만들려는 사업과 가장 유사한 예시 3개를 Claude에게 고르게 한다.
- 디자인 시스템 이식: 선택한 레퍼런스(예: 듀오링고)의 링크를 Claude에 주고 "이 디자인 시스템에서 영감을 받되 우리 브랜드로 만들어달라"고 요청, 앱 이름·색상 등 후속 질문에 답하며 1차 초안(코드화된 디자인 시스템 포함)을 받는다.
- 이미지·영상 생성 연동: Higsfield를 Claude Code CLI에 연결하고, "디자인 루프" 스킬을 설치한다(
/loop명령으로 호출). - 골드 스탠다드 비교 생성: 레퍼런스 사이트를 기준점으로 지정하고, 고유 캐릭터·그래픽·모션 스타일을 정의한 뒤 Higsfield로 이미지·영상(Seed to Dance 2.5)을 생성·심사·재생성하는 루프를 돌린다(먼저 소규모 파일럿으로 확인 후 전체 적용).
- 타이포그래피 선정: 무료 폰트 사이트(fonts.com 등)와 브랜드 톤에 맞는 폰트 추천 시스템을 활용해 서체를 정한다(라이선스 확인 필수).
- 카피라이팅 검수: 초안 카피를 AI 문체 탐지 → GPT-5.6 인간화 → 경쟁사 벤치마킹 → "Don't Make Me Think"류 원칙(첫 화면당 메시지 하나, 고통 포인트 먼저 언급 등) 적용의 순서로 재작성한다.
06활용 시나리오
- 1인 창업자·프리랜서의 랜딩페이지 제작: 별도 디자이너 없이도 레퍼런스 갤러리 + Claude + 이미지 생성 도구 조합으로 차별화된 브랜드 웹사이트 초안을 빠르게 만드는 데 이 워크플로우를 그대로 적용할 수 있다.
- 에이전시의 클라이언트 제안용 목업 제작: 클라이언트 업종과 유사한 레퍼런스 3개를 뽑아 여러 디자인 방향성 시안을 짧은 시간에 병렬로 제시하는 데 활용할 수 있다.
- 제품 마케팅팀의 카피 품질 관리: 이미 완성된 사이트라도 AI로 작성된 카피가 있다면, 영상에서 소개한 AI 문체 탐지·인간화·벤치마킹 3단계 검수 프로세스를 별도로 적용해 카피만 개선할 수 있다.
- 디자인 시스템 문서화가 필요한 팀: Claude가 생성한 "디자인 시스템 페이지"(색상 팔레트, 버튼, 폼 요소 등 코드화된 규칙 모음)를 자체 프로젝트의 스타일 가이드 초안으로 활용할 수 있다.
07현황 및 전망
화자는 이 워크플로우가 개인 커뮤니티 안에서 이미 여러 무료 리소스(디자인 시스템 가이드, 카피 검수 시스템, 폰트 추천 섹션)로 공유되고 있다고 밝힌다. Higsfield 연동과 "디자인 루프" 스킬은 화자의 이전 영상에서 이미 소개된 것을 재사용한 것으로, 하나의 완결된 개인 "에이전틱 운영체제"의 일부로 계속 확장 중이라고 설명한다. 화자는 폰트·카피 시스템에 "더 많은 로직을 추가해 업그레이드할 것"이라 언급하며, 향후에는 디자인 시스템 하나만이 아니라 생산성·자동화·AI를 결합한 통합 운영체제로 나아가야 한다고 예고한다(다음 영상에서 다룰 주제로 제시). 전체적으로 이 영상은 특정 제품 출시 뉴스라기보다는, 여러 기존 도구(Claude, Higsfield, 무료 폰트 사이트, GPT-5.6)를 조합한 개인 워크플로우 노하우 공유에 가깝다.
08용어 사전
| 용어 | 한줄설명 | 비유/예시 |
|---|---|---|
| AI 슬롭(AI slop) | AI가 생성한 티가 나는 획일적이고 진부한 결과물 | 인디고-보라 그라데이션, 3개짜리 카드, 뻔한 헤드라인 문구 |
| 디자인 루프(gauntlet loop) | 골드 스탠다드 레퍼런스와 비교해 생성물을 반복 심사·재생성하는 커스텀 스킬 | "이 디자인이 기준을 통과했는가"를 자동 판정하는 게이트 |
| 골드 스탠다드 | 목표 품질 기준으로 지정한 레퍼런스 사이트 | 이 영상에서는 듀오링고 |
| Higsfield | 이미지·영상 생성 전용 AI 플랫폼, CLI로 Claude와 연동 가능 | Seed to Dance 2.5 모델로 영상 생성 |
| Don't Make Me Think | 사용자가 생각하지 않아도 직관적으로 이해되게 설계하라는 UX 원칙 | 스티브 크룩의 동명 저서에서 인용 |