Claude Code 'AI 티' 웹 디자인 문제를 없애는 3단계 방법

01핵심 개요

02핵심 내용 구조

1) 문제 정의 — 'AI 슬롭'은 기술이 아니라 '뻔함'이다

'AI 슬롭(AI slop)'이란 AI가 뽑아낸 티 나는 결과물을 말한다. 과거엔 인터(Inter) 폰트에 파랑·보라 그라데이션이 깔린 흔한 SaaS 템플릿이었고, 지금은 품질은 올라갔지만 여전히 정해진 색·폰트·스타일 탓에 "한두 번 프롬프트로 만들었구나"가 바로 보인다. 발표자는 이것이 기술 문제가 아니라 '평균으로 회귀한 결과(regression to the mean)'라는 점을 강조한다. 모델이 10배 좋아져도 '뻔함의 기준'만 바뀔 뿐이다.

2) 1단계 — 취향(taste)을 큐레이션한다

해결의 핵심은 내 취향을 디자인 과정에 '주입'하는 것이다. 그러려면 먼저 마음에 드는 고급 웹 디자인을 많이 보고 모아 '영감 라이브러리'를 만든다. 추천 사이트는 Dribbble(스펠링 b 3개), Pinterest, 그리고 발표자가 가장 좋아하는 Twitter(X)다. 마음에 드는 화면을 스크린샷·링크로 저장한다.

3) 1단계 심화 — Claude Code로 '영감 라이브러리 앱' 만들기

스크린샷을 폴더에 두는 대신, Claude Code로 간단한 웹앱을 만들어 디자인 유형별로 자동 분류하게 한다. 각 디자인의 용어·의미까지 설명을 붙이고, 이미지 클릭 시 '이미지 프롬프트 복사'와 '브리프(brief) 복사' 버튼으로 나중에 실제 제작에 재활용한다.

4) 2단계 — 외부 스킬: Impeccable

Impeccable은 발표자가 꼽는 최고의 프런트엔드 디자인 스킬이다. 오픈소스이며 GitHub 스타 약 5만, GitHub 공식 AI 도구에도 편입됐다. 하나의 스킬 안에 23개 명령이 있어 디자인을 '더 대담하게(bolder)', '더 차분하게(quieter)' 등으로 다듬는다(예: boulder, overdrive, clarify). 타이포·색·공간·반응형·인터랙션·모션·UX 라이팅 7개 영역에서 슬롭을 제거하며, 슬롭 패턴 46가지를 정리해 두었다. CLI로 검사하고, 'live 모드'로 개발 서버에서 컴포넌트를 클릭해 실시간 수정할 수 있다. 설치는 URL을 Claude Code에 붙여넣으면 대신 해준다.

5) 2단계 — 대안 스킬: Taste Skill

Impeccable이 맞지 않으면 Taste Skill을 추천한다. 실험 단계인 v2가 나왔고 GitHub 스타 약 6만 6천. 마찬가지로 AI 슬롭 신호를 찾아 레이아웃·타이포·모션·여백을 강화해 보일러플레이트가 아닌 개성 있는 UI를 지향한다. 발표자는 이 둘이 표준 Anthropic 프런트엔드 디자인이나 'UIUX Pro Max' 류보다 한 수 위라고 본다.

6) 2단계 — MCP: Higsfield

Higsfield MCP는 Claude Code에 기본이 없는 이미지·영상 생성 능력을 붙여준다. 거의 모든 AI 이미지·영상 생성기에 접근하며, 이미지엔 주로 'GPT images two', 영상엔 (수시로 바뀌지만 당시 기준) Seed Dance를 쓴다. higsfield.ai의 MCP·CLI 항목에서 명령을 복사해 Claude Code에 붙여넣고 인증하면 된다. 히어로 배경 이미지나 커스텀 에셋을 바로 생성해 넣는다.

7) 2단계 — 컴포넌트 소스: 21st.dev

스킬도 MCP도 아니지만, 21st.dev는 버튼·카드·가격표 등 개별 컴포넌트 단위의 영감을 제공한다. 원하는 컴포넌트의 '프롬프트 복사'를 눌러 Claude Code에 붙이면 해당 스타일을 재현한다. 1단계가 큰 그림의 미학이라면, 여기는 페이지네이션처럼 평소 신경 안 쓰던 세부 요소까지 노출시켜준다.

8) 도구의 함정 주의

"스킬 하나면 모든 디자인 문제가 해결된다"는 토끼굴에 빠지지 말라고 경고한다. 멋진 결과를 내는 스킬일수록 범위가 좁고 지나치게 규정적(prescriptive)이라 한 종류 출력만 낸다. Impeccable·Taste·Higsfield를 추천하는 이유는 유연해서 여러 방향으로 갈 수 있기 때문이며, 대신 결과 품질은 결국 내 프롬프트와 취향 주입에 달려 있다.

9) 3단계 — 빌드: 원샷을 버리고 넓게 펼쳐라

핵심 마인드셋은 '한 번에 완성' 포기다. 처음엔 그물을 넓게 던진다. 가상의 AI 기업 'Argus' 사례에서 5가지 스타일로 5개 버전을 만들되, 한쪽은 Impeccable, 다른 쪽은 Taste Skill을 적용해 나란히 비교한다. 터미널에서 하나씩 시도하기보다 여러 결과를 한 화면에서 대조하는 방식이다.

10) 3단계 — 4요소 프롬프트

규정적인 1만 페이지짜리 design.md가 아니라, 네 가지만 전달한다. ① 미학(aesthetic, 어떤 디자인 계열인가) ② 레퍼런스 이미지(내 취향 라이브러리에서 — 복사가 아니라 '느낌'을 맞춤) ③ 의도(무엇을·왜 — SaaS인가 이벤트인가, 타깃, 원하는 행동) ④ 가드레일(항상 할 것/절대 안 할 것 — 예: 보라 그라데이션·Inter 폰트 금지). 레퍼런스는 스크린샷뿐 아니라 실제 웹사이트 URL을 넣어도 되며, Claude Code가 그 페이지를 볼 수 있다.

11) 3단계 — 실전 반복 시퀀스

'Kestrel'(스타트업용 AI 분석 플랫폼) 예시로, 5개 스타일(print tech paper, vast quiet, dither mono, classical remix 등)을 생성 → 'vast quiet' 선택 → 본문 포맷을 바꾼 3개 변형 생성 → 'quiet ledger(3B, 스크롤 시 좌측 인덱스가 따라오는 형태)' 확정 → Higsfield MCP로 2K 히어로 이미지 4장 생성 → option 4 선택 후 색감 변형(→ Alpenglow 채택) → 히어로/본문 전환과 로딩 무게감까지 다듬는다.

12) 3단계 — Tweaks 바로 시각적 튜닝

마지막엔 'make it more premium' 같은 막연한 프롬프트 대신, Claw Design처럼 개발 서버에 뜨는 '조정 바(tweaks bar)'를 만들어 폰트·크기·강조색·모션·리빌 거리 등을 실시간으로 바꿔 본다. 요지는 "여러 폰트로 10개 페이지를 다시 만들지 말고, 눈으로 빠르게 비교하며 반복하라"는 것. 본문 레이아웃도 히어로처럼 URL·스크린샷 레퍼런스를 별도 라이브러리로 축적할 수 있다.

03기술적 맥락

Claude Code는 스킬(skill), MCP(Model Context Protocol, 외부 능력을 붙이는 연결 규격), 컴포넌트 카탈로그를 조합해 확장한다. Impeccable과 Taste Skill은 '슬롭 탐지·제거' 규칙 묶음이고, Higsfield MCP는 텍스트-투-이미지/비디오 생성기를 통합 창구로 연결한다. 21st.dev는 복붙 가능한 컴포넌트 프롬프트를 제공한다. 이들은 모두 '규정적이지 않고 유연하다'는 공통점을 지녀, 최종 품질은 사용자의 프롬프트 설계에 크게 좌우된다.

04전략적 의미

경쟁 우위는 더 강한 모델이 아니라 '차별화된 취향'에서 나온다. 모델이 상향 평준화될수록 '뻔하지 않음'이 희소 자원이 되기 때문이다. 따라서 워크플로우의 무게중심이 '완벽한 한 방 프롬프트'에서 '넓게 펼쳐 비교하고 반복하는 큐레이션'으로 이동한다. 이는 디자인 비전공자도 감식안을 축적하면 개성 있는 결과를 낼 수 있다는 실용적 함의를 준다.

05활용 시나리오

• 시나리오1(1인 창업 랜딩페이지): 스타트업 소개 페이지를 만들 때, 5스타일 5버전을 먼저 뽑아 비교한 뒤 방향을 정하고 반복 튜닝해 '남과 다른' 히어로를 완성한다.
• 시나리오2(취향 라이브러리 구축): Dribbble·Pinterest·X에서 모은 스크린샷을 Claude Code 앱으로 유형별 분류·용어 설명·브리프 복사까지 자동화해 팀 공용 자산으로 쓴다.
• 시나리오3(슬롭 자동 점검): 기존 웹사이트에 Impeccable CLI를 돌려 46가지 슬롭 패턴을 진단하고 live 모드로 컴포넌트별 실시간 수정한다.
• 시나리오4(히어로 에셋 생성): Higsfield MCP로 2K 히어로 이미지를 4장 생성·비교하고 색감 변형까지 반복해 배경을 확정한다.
• 시나리오5(디자인 온보딩 교육): 감식안이 부족한 초심자에게 '레퍼런스 수집 → 4요소 프롬프트 → tweaks 반복'을 표준 절차로 가르친다.

06현황 및 전망

Impeccable(스타 약 5만, GitHub 공식 AI 도구 편입)과 Taste Skill(스타 약 6만 6천, v2 실험 단계)은 활발히 발전 중이며, Higsfield의 영상 모델 추천은 몇 주 단위로 바뀔 만큼 생태계 변화가 빠르다. 발표자는 특정 도구에 종속되기보다 '유연한 도구 + 반복 워크플로우 + 취향'의 조합을 지속 가능한 로드맵으로 제시한다. 도구는 계속 바뀌어도 '넓게 펼쳐 비교·반복'이라는 원칙은 유효할 전망이다.

07용어 사전