클로드 디자인 7단계 완전정복 — 플러그앤고부터 프로덕션 앱까지

01핵심 개요

02핵심 기능/내용 구조

1. 레벨 1 — 플러그앤고(Plug and Go): claude.ai 좌측 하단의 Design 메뉴에 들어가 "티셔츠 회사를 위한 UI 목업을 만들어줘" 같은 단순한 프롬프트 한 줄만 던지는 단계다. UI 목업 유형을 고르고 모델(가장 강력한 모델은 Fable 5로 언급됨)과 추론 강도(effort)를 선택한 뒤 전송하면 기존 컬러 팔레트를 활용한 웹사이트가 생성된다. 화자는 이 레벨조차 쓰지 않는 사람이 전체의 99.9%라며, 레벨 1만 써도 Upwork에서 수백~수천 달러에 팔리는 웹사이트를 무료로 얻는 셈이라고 강조한다. 다만 레퍼런스 없이 같은 시스템·프롬프트를 쓰는 모든 사람이 똑같이 "제네릭 보라색 그라디언트 슬롭"을 받게 된다는 한계가 있다.
2. 레벨 2 — 디자인 디렉터 브리핑(레퍼런스 + 반복): 클로드를 디자인 디렉터처럼 다루며, 구체적인 브리프와 함께 Pinterest·Awwwards·Godly·Mobbin·Land-book 같은 사이트에서 찾은 디자인 레퍼런스 이미지를 첨부해 "이 이미지를 참고해서 만들어줘"라고 지시하는 단계다. 화자는 레퍼런스 없이 만든 결과물과 레퍼런스를 준 결과물을 화면에서 직접 비교하며 품질 차이를 보여준다. 레벨 2의 두 번째 핵심은 "한 번에 끝내지 않기(never one-shot it)"로, 예를 들어 버튼 선택 시 색종이(confetti) 효과 추가, 화면마다 다른 상단 색상(노랑/파랑/초록) 지정 등 구체적 피드백을 주고받으며 5~10회 이상 반복 수정하는 것이 핵심 원칙으로 제시된다.
3. 레벨 3 — 디자인 시스템 구축: 레벨 2까지의 결과물은 "매번 다른 하청업자를 쓰는 것"처럼 느리고 재사용이 불가능하다는 문제를 안고 있다. 이를 해결하기 위해 마음에 드는 결과물을 Share → Export → Project Archive로 project.html 파일로 내려받은 뒤, 홈 화면의 "Create a Design System"에 업로드하고 폰트·로고·에셋을 추가해 생성(Generate)한다. coolors.co 같은 무료 컬러 팔레트 생성기(스페이스바로 랜덤 생성, 마음에 드는 색은 잠금)를 활용하거나 기존 팔레트를 재사용하는 것이 실전 팁으로 소개된다. 완성된 디자인 시스템에는 소스, 콘텐츠 기본 원칙, 비주얼 변환 규칙, 손그림 마크, 컬러 팔레트, 모션까지 포함되며, 이는 일반 기업이 수천 달러를 들여야 얻는 수준이라고 화자는 강조한다.
4. 레벨 4 — 전사(全社) 디자인 시스템 확산: 레벨 3에서 만든 디자인 시스템 하나로 웹사이트뿐 아니라 슬라이드 덱, 이메일, SNS 등 비즈니스 전체의 산출물을 일관되게 생성하는 단계다. 화자는 "생산성에 관한 슬라이드 덱 만들어줘" 한 마디로 스폰서십 덱 전체를 원샷으로 생성하고("색상, 슬라이드마다 높이 일관성, 문장은 2줄 이내로" 같은 후속 피드백으로 다듬는 과정), "웰컴 이메일 디자인해줘"로 브랜드에 맞는 이메일을 만드는 과정을 시연한다. 화자는 과거 자신의 사업에서 이메일 시퀀스 하나에 약 4,000달러를 지출했던 경험을 언급하며, 이 단계에서 얻는 시간·비용 절감 효과를 강조한다.
5. 레벨 5 — 외부 이미지/영상 생성 결합: 클로드 디자인만으로는 "본 것을 재현"하는 데 그치지만, Higgsfield 같은 외부 이미지·영상 생성 플랫폼(추천 모델: Nana Banana 2 Pro, GPT Image 2)을 결합하면 브랜드에 완전히 맞는 독창적인 비주얼을 만들 수 있다. 화자는 Higgsfield의 MCP·CLI를 클로드 코드에 직접 연결해 디자인 시스템을 업로드하고 "5가지 다른 로고 디자인을 만들어줘"라고 지시해 후보 5개를 한 번에 받는 과정, 그중 마음에 드는 것을 저장하는 과정, 곰 캐릭터를 활용한 브랜딩 사례, Higgsfield 영상 생성으로 만든 스크롤 반응형 웹사이트 애니메이션 사례(Monolith 웹사이트 예시 포함)를 보여준다.
6. 레벨 6 — 모션 부여(3D·HTML 애니메이션): 클로드 디자인의 Create 3D Object, Animation 기능을 활용해 정적 디자인에 생동감을 부여하는 단계다. "습관이 시간이 지나며 어떻게 변하는지 설명하는 HTML 애니메이션을 만들어줘" 같은 프롬프트 한 번으로 "매일 물 마시기, 20분 걷기 같은 작은 행동이 매일 1%씩 개선되어 1년 뒤 37% 향상된다"는 내용의 그래프 애니메이션을 원샷으로 생성한 사례, 3D 목업과 하이퍼스피어(hypersphere) 인터랙티브 오브젝트 생성 사례가 소개된다. 화자는 이미지 생성만 단독으로 쓰는 것보다 클로드를 "디자인 지능 엔진"으로 삼아 프롬프트를 정교화한 뒤 Higgsfield 등으로 실제 생성물을 뽑는 조합이 더 낫다고 설명한다.
7. 레벨 7 — 프로덕션 앱(슈퍼베이스 연동): 클로드 디자인과 클로드 코드, 그리고 백엔드 서비스인 슈퍼베이스(Supabase)를 결합해 로그인, 회원가입, DB 저장, 이메일 발송까지 갖춘 실제 프로덕션 앱을 만드는 최종 단계다. 핵심은 "슈퍼베이스 에이전트 스킬(Superbase agent skills)"을 클로드에 설치하는 것으로, 이를 통해 클로드가 슈퍼베이스 인프라 구조를 정확히 이해하고 추측 없이 DB 테이블·인증 로직을 한 번의 프롬프트로 구성할 수 있게 된다. 화자는 로그인 페이지와 관리자 대시보드, 대기자 명단(waitlist) 폼을 실제로 만들고 가입·로그인을 시연하며, 기본 활성화된 "이메일 확인(confirm email)" 설정을 슈퍼베이스 콘솔(Authentication → Sign in / Providers)에서 끄는 방법, 그리고 슈퍼베이스 "데이터베이스 어드바이저(database advisors)" 스킬로 유출 비밀번호 보호 비활성화 같은 보안 경고와 성능 이슈를 자동 점검하는 기능까지 시연한다.

03기술적 맥락

이 영상의 기술 스택은 크게 세 축으로 구성된다. 첫째, claude.ai의 "Design" 모드는 UI 목업, 디자인 시스템, 슬라이드 덱, 이메일, 3D 오브젝트, HTML 애니메이션을 생성할 수 있는 통합 캔버스이며, 결과물은 project.html 형태로 export해 재사용할 수 있다. 둘째, 외부 생성 도구인 Higgsfield는 MCP(Model Context Protocol)와 CLI를 통해 클로드 코드에 직접 연결되어, 클로드가 프롬프트를 정교화한 뒤 Higgsfield가 실제 이미지·영상을 렌더링하는 역할 분담 구조를 이룬다(추천 이미지 모델: Nana Banana 2 Pro, GPT Image 2). 셋째, 슈퍼베이스는 PostgreSQL 기반 BaaS(Backend as a Service)로, "에이전트 스킬"이라는 사전 정의된 지식 패키지를 클로드에 설치하면 클로드가 슈퍼베이스의 테이블 설계, 인증(auth) 흐름, 보안 설정을 추측 없이 정확히 다룰 수 있게 된다. 특히 슈퍼베이스의 "database advisors" 기능은 보안(예: 유출 비밀번호 보호 미설정)과 성능(예: RLS 관련 항목) 경고를 자동으로 스캔해 클로드가 단계별 수정 가이드를 제공하도록 연결된다.

04전략적 의미

첫째, 디자인 품질을 좌우하는 가장 큰 변수는 모델 성능이 아니라 "레퍼런스 제공 여부와 반복 횟수"라는 점이 반복적으로 강조되는데, 이는 비개발자·비디자이너도 도구 사용법보다 프롬프팅 습관(구체적 브리프 + 시각 레퍼런스 + 5~10회 피드백 루프)을 바꾸는 것만으로 결과물 품질을 크게 개선할 수 있음을 시사한다. 둘째, 레벨 3~4에서 강조되는 "1회성 결과물에서 재사용 가능한 시스템으로"의 전환은 개인·소규모 비즈니스가 수천~수만 달러 규모의 브랜딩·에이전시 비용을 대체할 잠재력을 보여주며, 특히 이메일 시퀀스 하나에 4,000달러를 썼다는 화자의 경험담은 이 대체 효과의 구체적 기준점이 된다. 셋째, 레벨 5~6에서 제시되는 "클로드=디자인 지능 엔진, Higgsfield=렌더링 엔진"의 역할 분담 모델은 향후 AI 디자인 워크플로우가 단일 모델이 아니라 여러 특화 모델을 오케스트레이션하는 방향으로 수렴하고 있음을 보여준다. 넷째, 레벨 7의 슈퍼베이스 에이전트 스킬 접근은 "AI가 인프라 문서를 사전 학습된 스킬로 내장하면 추측성 오류 없이 프로덕션 수준 백엔드를 즉시 구성할 수 있다"는 점에서, 노코드/로우코드를 넘어 "에이전트 스킬 기반 풀스택 개발"이 개인 창작자에게도 실질적으로 열렸음을 시사한다.

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

06활용 시나리오

1. 1인 창업가·소상공인: 브랜드 웹사이트, 이메일 시퀀스, 슬라이드 덱을 외주 없이 레벨 3~4 방식(디자인 시스템 구축 후 재사용)으로 직접 제작해 수백~수천 달러의 디자인 비용을 절감하는 데 활용할 수 있다.
2. 마케터·콘텐츠 제작자: Pinterest·Awwwards 등에서 찾은 레퍼런스를 클로드 디자인에 첨부하고 반복 피드백을 주는 레벨 2 워크플로우로, 캠페인별 배너·SNS 카드뉴스 등을 빠르게 온브랜드로 생성하는 데 참고할 수 있다.
3. 초기 스타트업 개발자: 레벨 7의 슈퍼베이스 에이전트 스킬 접근법을 활용해 로그인·회원가입·대시보드가 있는 MVP를 SQL 전문 지식 없이 프롬프트만으로 빠르게 구축하고, database advisors로 보안 취약점을 사전 점검하는 데 적용할 수 있다.
4. 개인 브랜딩·크리에이터: Higgsfield 같은 외부 이미지·영상 생성 도구를 클로드와 결합해(레벨 5~6) 독창적인 로고·캐릭터·모션 그래픽을 제작함으로써 획일적인 AI 생성물과 차별화된 시각 자산을 확보하는 데 활용할 수 있다.

07현황 및 전망

화자는 현재 클로드 디자인을 아는 사람조차 대부분 레벨 1(단순 프롬프트)에 머물러 있으며, 레벨 2 이상으로 넘어가는 핵심 열쇠는 "디자인 레퍼런스 제공"과 "반복(iteration)"이라는 두 가지 습관이라고 진단한다. 향후 방향성으로는 디자인 시스템을 개별 프로젝트 단위가 아니라 비즈니스 전체(이메일, 덱, SNS, 웹사이트, 앱)에 일관되게 적용하는 레벨 4 이상의 활용이 더 큰 비용 절감과 브랜드 일관성을 가져올 것으로 전망하며, 특히 슈퍼베이스 에이전트 스킬 같은 "인프라 지식의 스킬화"가 비개발자도 프로덕션급 앱을 만들 수 있게 하는 흐름을 가속화할 것으로 내다본다. 영상 말미에 화자는 이 7단계 디자인 역량이 "에이전틱 운영체제(agentic operating system)"로 비즈니스와 개인 삶을 운영하는 더 큰 시스템의 토대일 뿐이라며, 후속 영상에서 이를 다룰 것을 예고한다.

08용어 사전