— ISSUE №2

CLAUDE CODE × DESIGN

AI 디자인이
죄다 비슷한 이유,
그리고 탈출법.

Anthropic 공식 frontend-design 플러그인으로
"AI 슬롭" 디자인에서 벗어나는 완벽 가이드

바이브 코딩 시리즈 · 02 · 봄내AI해적단

📌 IN THIS ARTICLE

"또 보라색 그라디언트네..."라고 느꼈던 적 있다면, 이 글이 정확히 그 문제를 풉니다. Frontend Design 플러그인 설치부터 디자인 사고 프레임워크, 11가지 미적 방향, 실전 프롬프트 템플릿까지 — 30분이면 본인 프로젝트의 결과물 퀄리티가 확 달라집니다.

안녕하세요, 봄내AI해적단 선장 이장환입니다.

지난번 Claude Code 스킬 만들기 가이드를 올렸더니 단톡방에서 "그래서 어떤 스킬부터 깔면 돼요?"라는 질문이 많았어요. 답은 명확합니다. frontend-design 플러그인부터 까세요. Anthropic 공식 플러그인 중에 설치 수가 가장 많은 녀석이고, 한 번 써보면 왜 인기인지 5분 안에 체감됩니다.

오늘 글의 목적은 단순해요. Claude Code로 바이브 코딩할 때, 결과물이 "그저 그런 AI 페이지"가 아니라 "진짜로 디자인된 것처럼" 나오게 만드는 법을 처음부터 끝까지 보여드립니다.

왜 다 똑같이 생겼을까

분포 수렴 (Distributional Convergence)

LLM에게 가이드 없이 "랜딩 페이지 만들어줘"라고 하면, 거의 매번 Inter 폰트, 흰 배경의 보라색 그라디언트, 미니멀한 카드 그리드가 나옵니다. 왜?

모델은 학습 데이터의 통계적 중심을 예측합니다. 모두에게 "안전한" 디자인이 웹 데이터에서 압도적으로 많으니, 가이드 없이 두면 그 평균치를 토해내요. 결과는 안 틀린 디자인이지만, 동시에 기억에 남지 않는 디자인이 되죠.

frontend-design 플러그인이 푸는 문제가 정확히 이거입니다. 코드 작성 전에 클로드에게 "구체적인 미적 방향에 강제로 커밋시키는" 디자인 프레임워크를 주입해서, 평균치에서 끌어올립니다.

— CONTENTS

01 Claude Design 소개↗ 02 설치 따라하기↗ 03 디자인 사고 4단계↗ 04 11가지 미적 방향↗ 05 5대 미학 가이드라인↗ 06 절대 피할 것들↗ 07 실전 프롬프트 템플릿↗ 08 프로젝트 적용 예시↗

CHAPTER ONE

Claude Design이 정확히 뭐죠?

한 줄 정의: "Claude에게 디자인 디렉터의 사고방식을 주입하는 공식 플러그인"입니다.

정식 명칭은 frontend-design이고, Anthropic이 직접 만들어 배포 중입니다. 45만 회 이상 설치된, 공식 마켓플레이스에서 가장 인기 있는 플러그인 중 하나예요.

⊙ 무엇이 들어 있나

🎨 디자인 사고 프레임워크

코드 짜기 전에 목적·톤·제약·차별화 4단계로 컨셉 잡기

🚫 안티 패턴 차단

Inter, Roboto, 보라 그라디언트 등 "AI 슬롭" 자동 차단

📐 5대 미학 가이드라인

타이포그래피·컬러·모션·공간·배경 영역별 구체적 지침

⚡ 자동 발동

설치 후엔 UI 만들어달라는 요청을 감지하면 자동으로 작동

중요한 건, 이게 "디자인 시스템"이 아니라는 점입니다. Tailwind UI나 shadcn처럼 미리 만들어둔 컴포넌트를 가져다 쓰는 게 아니에요. 이 플러그인은 클로드의 사고방식 자체를 바꿔서, 매번 다른 디자인이 나오도록 만듭니다.

CHAPTER TWO

설치 — 명령어 두 줄.

가장 빠른 방법부터 보여드릴게요. Claude Code 터미널 띄우고 명령어 두 줄이면 끝납니다.

⚡ FASTEST METHOD · 30초 설치

# 1단계 · 공식 마켓플레이스 등록
/plugin marketplace add anthropics/claude-code
# 2단계 · 플러그인 설치
/plugin install frontend-design@claude-code-plugins

⚠️ 위 명령은 Claude Code 안에서 입력하는 슬래시 커맨드입니다. 일반 터미널이 아니에요. claude 로 Claude Code부터 띄우신 다음 입력하세요.

단계별 상세 가이드

Claude Code 실행

터미널을 열고 claude를 입력합니다. (VS Code 확장 안에서가 아니라 터미널에서 직접 띄우는 게 정석)

$ claude

/plugin 명령어 입력

Claude Code 안에서 /plugin을 치면 인터랙티브 메뉴가 뜹니다. 여기서 "Add MarketPlace"를 선택하고 GitHub 저장소 이름을 입력해도 됩니다:

/plugin marketplace add anthropics/claude-code

└ 마켓플레이스 카탈로그가 등록됩니다. (아직 플러그인이 설치된 건 아님)

플러그인 설치

이제 frontend-design 플러그인을 실제로 설치합니다:

/plugin install frontend-design@claude-code-plugins

└ 설치 후 위치: ~/.claude/plugins/marketplaces/claude-code/plugins/frontend-design/

동작 확인

스킬이 잘 인식됐는지 확인합니다. 클로드에게 직접 물어보세요:

"지금 사용 가능한 스킬이 뭐야?"

목록에 frontend-design이 보이면 OK. 안 보이면 Claude Code 한 번 재시작해보세요.

✓

설치 완료 — 자동 발동 모드

이제 클로드에게 UI 관련 요청을 하면 자동으로 frontend-design 스킬이 발동합니다. /frontend-design으로 직접 호출도 가능해요.

💡 다른 설치 방법 · 터미널에서 npx skills add anthropics/skills --skill frontend-design 한 줄로도 설치 가능. 다만 위 마켓플레이스 방식이 더 표준적이고 업데이트 받기 쉽습니다.

CHAPTER THREE

디자인 사고 — 코드 짜기 전 4단계.

플러그인이 클로드에게 강제하는 핵심 사고 절차입니다. 이걸 알면 플러그인이 왜 결과물을 다르게 뽑는지 이해됩니다. 그리고 이 4단계를 본인이 의식적으로 프롬프트에 넣어주면 효과가 두 배가 돼요.

01 — PURPOSE

목적

이 인터페이스가 어떤 문제를 푸나요? 누가 쓰나요? 사용 맥락은?

예: "60대 시니어가 매일 아침 건강 체크를 위해 사용 — 한 손 조작, 큰 글씨"

02 — TONE

톤

극단적인 미적 방향 하나에 커밋. "어중간하게 깔끔" 같은 건 NG.

예: "에디토리얼 매거진 스타일, 따뜻한 베이지 + 진녹색"

03 — CONSTRAINTS

제약

기술 요구사항 명시 — 프레임워크, 성능 타깃, 접근성 필요 여부.

예: "Next.js 14 + Tailwind, 모바일 우선, WCAG AA, 시니어 대상이라 본문 최소 18px"

04 — DIFFERENTIATION

차별점

"한 가지 잊히지 않을 것"은 무엇인가요? 시그니처 디테일.

예: "오늘의 컨디션을 손글씨 캘리그래피로 표현하는 헤드라인"

🎯 핵심 원칙 · 플러그인은 클로드에게 "명확한 컨셉 방향을 골라 정밀하게 실행하라"고 강제합니다. 대담한 맥시멀리즘도 OK, 정제된 미니멀리즘도 OK. 중요한 건 강도가 아니라 의도성(intentionality)입니다. "안전하게 깔끔하게"는 가장 나쁜 답이에요.

CHAPTER FOUR

11가지 미적 방향 — 골라쓰는 무기.

플러그인은 클로드에게 다음 11가지 중 하나를 골라 거기에 완전히 커밋하라고 합니다. 이걸 알아두면 본인 프롬프트에 직접 미적 방향을 지정할 수 있어요. 골라쓸 수 있는 게 많을수록 결과가 다양해집니다.

Brutally Minimal

극단적 여백, 흑백, 거대 타이포 단 한 글자. 스위스 디자인 + 일본 미니멀의 극단.

Maximalist Chaos

정신없을 정도로 가득. 겹치는 레이어, 충돌하는 색, 다양한 폰트. Y2K, 펑크진.

Retro-Futuristic

80년대 사이버펑크, 보랏빛 네온, 그리드 스캔라인. 블레이드러너 감성.

Organic / Natural

유기체 곡선, 흙·이끼·돌의 텍스처, 부드러운 모션. 스튜디오 지브리 톤.

Luxury / Refined

고급 세리프, 깊은 흑/금/감색, 절제된 모션. 샤넬·디올 룩북.

Playful / Toy-like

동글동글, 통통 튀는 색, 손그림 일러스트. 닌텐도, MoonPay 감성.

Editorial / Magazine

크고 굵은 세리프 헤드라인, 그리드 기반 멀티컬럼. NYT, 보그.

Brutalist / Raw

가공 안 된 HTML 느낌, 모노스페이스, 의도된 못생김. 브루탈리즘 웹.

Art Deco / Geometric

대칭 기하학, 황금/검정/터키석, 1920년대 우아함. 위대한 개츠비.

Soft / Pastel

파스텔 핑크/블루/라벤더, 부드러운 그라디언트. 왓챠피디아 감성.

Industrial / Utilitarian

공장·창고 미감, 회색·짙은 청·녹슨 오렌지, 모노스페이스 + 표 기반 레이아웃. 린나이 조작 패널, 스페이스X UI.

💎 PRO TIP · 이 11가지는 출발점일 뿐이에요. 플러그인 SKILL.md에 적힌 그대로 옮기면 — "Use these for inspiration but design one that is true to the aesthetic direction." 즉, 영감만 얻고 본인 프로젝트에 맞는 새로운 톤을 만들어내라는 뜻. "에디토리얼 + 농촌 풍경"이나 "시니어 친화 + 따뜻한 미니멀" 같은 조합도 OK.

CHAPTER FIVE

5대 미학 가이드라인 — 디테일의 영역.

방향이 정해지면, 클로드는 다음 5개 영역에서 정밀하게 실행해야 합니다. 각각 어떤 지침을 따르는지 봅시다.

TYPOGRAPHY

타이포그래피

아름답고, 독특하고, 흥미로운 폰트를 선택하세요. Inter, Arial 같은 제너릭 폰트는 금지. 디스플레이 폰트 + 본문 폰트를 짝지어 쓰는 게 정석.

좋은 페어링 예시
• Fraunces (display) + Inter Tight (body) — 모던 에디토리얼
• Playfair Display + Source Sans Pro — 클래식 매거진
• Space Mono + Manrope — 테크 스타트업 (다만 Space Grotesk는 AI들이 너무 많이 써서 피할 것)
• IBM Plex Serif + IBM Plex Sans — 인더스트리얼/유틸리테리언

COLOR

컬러 & 테마

일관된 미감에 커밋. CSS 변수로 통일성 유지. 지배적인 한두 색 + 날카로운 액센트가 골고루 분포된 팔레트보다 강합니다.

#1c1c1c

#d97706

#faf6f0

#52524a

↑ 이 글이 쓰는 팔레트. 베이지 80% + 차콜 15% + 호박색 5%. 분포가 균등하지 않은 게 포인트.

MOTION

모션

애니메이션은 효과와 마이크로 인터랙션에 사용. HTML은 CSS 전용 솔루션 우선, React는 Motion 라이브러리 사용 권장.

핵심 원칙: 흩뿌려진 마이크로 인터랙션보다, 한 번 잘 짜인 페이지 로드 시퀀스(animation-delay로 스태거된 등장)가 훨씬 강한 인상을 남깁니다.

놀라움을 주는 스크롤 트리거나 호버 상태에 집중하세요. "마우스 올리니 살짝 뜬다" 정도로는 부족.

SPATIAL

공간 구성

예측되지 않는 레이아웃. 비대칭. 겹침. 대각선 흐름. 그리드 깨기. 여백을 풍부하게 쓰거나, 아니면 의도된 밀도로 채워라 — 그 중간(어중간한 패딩)이 가장 나쁩니다.

❌ 안 좋은 예
화면에 12개 카드를 동일한 크기/간격의 4×3 그리드로

✅ 좋은 예
2개를 크게 + 4개는 작게, 한 카드는 살짝 회전, 중요한 건 그리드 밖으로 살짝 튀어나오게

DEPTH

배경 & 시각적 디테일

단색 배경에 의지하지 마세요. 분위기와 깊이를 만드는 게 핵심.

미감에 맞는 형태를 적극 활용:

• 그라디언트 메시

• 노이즈 텍스처

• 기하학 패턴

• 레이어드 투명도

• 드라마틱 그림자

• 장식적 보더

• 커스텀 커서

• 그레인 오버레이

CHAPTER SIX

절대 피해야 할 것들 — AI 슬롭 블랙리스트.

플러그인이 명시적으로 금지하는 안티패턴들입니다. 이걸 알면 본인 프롬프트에서도 피할 수 있어요.

⊗ NEVER USE

FONT

Inter
Roboto
Arial
System fonts
Space Grotesk (AI 들이 너무 씀)

COLOR

흰 배경의 보라 그라디언트
"안전한" 파랑 (#3B82F6)
고르게 분포된 무지개 팔레트
흰색 일색 + 회색 텍스트

LAYOUT

3-up 또는 4-up 카드 그리드
가운데 정렬 히어로
섹션마다 패딩 80px
"feature 3개 가로로 늘어놓기"

COMPONENT

둥근 모서리 +
옅은 그림자 카드
"shadcn 카피"
맥락 없는 일반 컴포넌트

↑ 이 중 3개 이상이 본인 페이지에 있다면, 그게 바로 "AI 슬롭"입니다.

CHAPTER SEVEN

실전 프롬프트 템플릿 — 그대로 복붙용.

플러그인을 깔았어도 "랜딩 페이지 만들어줘" 같은 빈약한 프롬프트로는 효과가 반쪽입니다. 4단계 디자인 사고를 직접 프롬프트에 녹여 넣으면 결과가 차원이 달라져요. 바로 쓸 수 있는 템플릿 3종입니다.

TEMPLATE 01 · 랜딩 페이지

[프로젝트] 토닥 - 시니어 건강관리 앱

[디자인 사고]
- 목적: 60-70대가 매일 아침 5분간 건강 체크하고 가족에게 공유
- 톤: 따뜻한 에디토리얼 매거진 + 손글씨 헤드라인.
  파스텔이나 평범한 의료 앱 느낌은 절대 NO.
- 제약: Next.js 14 + Tailwind, 모바일 우선,
  본문 최소 18px, 콘트라스트 WCAG AA 이상
- 차별점: 오늘의 컨디션을 손글씨 캘리그래피로 표현하는
  헤드라인 — 사용자마다 시간대별로 다르게 보이는 카피

[페이지]
랜딩 페이지를 만들어주세요. 다음 섹션 포함:
- 히어로 (가치제안 + 캘리그래피 + CTA)
- "오늘의 손녀에게" 시그니처 기능 데모
- 사용자 후기 3개 (실제 시니어 톤으로)
- 가족 연결 가입 CTA

[금지]
- Inter, Roboto 폰트 절대 금지
- 보라/파란 그라디언트 금지
- 의료 앱처럼 차갑게 보이지 말 것

TEMPLATE 02 · 게임 UI 화면

[프로젝트] POP CHAIN - Godot 모바일 퍼즐 게임

[디자인 사고]
- 목적: 캐주얼 퍼즐 게이머가 한 손으로 3분 즐기는 매치 게임
- 톤: 레트로 퓨처리스틱 + 캔디 컬러.
  Candy Crush 같은 평범한 매치-3 룩은 절대 피하기.
  네온 80년대 + 일본 아케이드 감성
- 제약: HTML/CSS/JS 모킹 (Godot에 옮길 시각 레퍼런스용),
  세로 모드 9:16, 60fps 부드러운 애니메이션
- 차별점: 콤보 시 스크린 전체에 CRT 스캔라인 + 글리치 효과

[화면]
타이틀 화면을 만들어주세요:
- 거대한 게임 로고 (네온 글로우)
- "PLAY" 큰 버튼 (펄스 애니메이션)
- 작은 아이콘들: 설정 / 도전과제 / 상점
- 배경에 떠다니는 퍼즐 조각들 (느린 패럴랙스)
- 좌상단에 점수와 코인 (LCD 모노스페이스 폰트)

색상 가이드: 네이비 베이스 (#0a0e27), 핫핑크/시안 액센트.
스캔라인 오버레이로 CRT 분위기 더하기.

TEMPLATE 03 · 대시보드 / 관리 도구

[프로젝트] n8n 워크플로우 모니터링 대시보드

[디자인 사고]
- 목적: 자동화 운영자가 30개 워크플로우의 상태를
  한눈에 보고 실패한 것만 골라 디버그
- 톤: 인더스트리얼/유틸리테리언.
  공장 제어판 + 모노스페이스 + 표 기반 레이아웃.
  shadcn 풍 카드 그리드는 절대 NO.
- 제약: React, 데스크톱 우선 (1440px+),
  데이터 밀도 높게, 다크모드 우선
- 차별점: 각 워크플로우의 24시간 실행 히스토리를
  ASCII-스타일 스파크라인으로 인라인 표시

[화면]
- 좌측: 워크플로우 리스트 (모노스페이스 표, 상태 코드 표시)
- 중앙: 선택된 워크플로우 상세 (로그, 메트릭)
- 우측: 빠른 액션 (재실행, 비활성화, 알림 설정)
- 상단: 시스템 상태 ASCII 바 (CPU/메모리/큐)

폰트: JetBrains Mono (코드/데이터), Inter Tight 금지 →
대신 Geist Sans 또는 IBM Plex Sans로
색상: #0a0a0a 베이스, 호박색(#fbbf24) 액센트, 빨강은 에러에만

🎯 템플릿 사용 팁 · 위 4개 항목 — [프로젝트] / [디자인 사고] / [페이지나 화면] / [금지] — 만 채우면 본인 프로젝트에 맞게 변형 가능. 특히 [금지] 섹션이 핵심입니다. 클로드는 명시적으로 금지된 패턴을 정말 잘 피해갑니다.

CHAPTER EIGHT

바이브 코딩 워크플로우 — 끝까지 보기.

마지막으로, 실제로 어떻게 굴리는지 한 사이클을 처음부터 끝까지 보여드립니다.

설치 확인 + 컨텍스트 세팅

Claude Code 띄우고 /plugin으로 frontend-design 활성 상태 확인. 프로젝트 루트에 CLAUDE.md가 있다면 거기에 디자인 톤(예: "이 프로젝트는 시니어 친화적 따뜻한 미감")을 못 박아두면, 매번 프롬프트에 안 써도 됨.

위 템플릿으로 첫 생성 요청

[프로젝트]/[디자인 사고]/[페이지]/[금지] 4섹션을 채워 입력. 클로드가 자동으로 frontend-design 스킬을 발동해 컨셉 방향을 1-2개 제안할 수 있어요. 너무 평범한 방향이면 거기서 다시 잡으세요.

결과 보기 + 한 걸음 밀어붙이기

처음 결과는 보통 70-80% 정도 만족스러워요. 남은 20%는 "더 대담하게" 한 마디로 끌어올립니다. 자주 쓰는 후속 프롬프트:

"너무 안전해 보여. 헤드라인 폰트를 더 캐릭터 있는 걸로,
배경에 그라디언트 메시 추가하고, 히어로 섹션을 의도적으로 비대칭으로 만들어줘.
한 요소는 그리드 밖으로 살짝 튀어나오게."

디테일 스윕

전체 컨셉이 잡히면 디테일을 한 번 더 훑습니다: "폰트 페어링 다시 점검", "마이크로 인터랙션 한 곳에만 강하게 추가", "다크모드 버전도 만들어줘". 한 번에 한 가지씩 — 동시에 여러 개 바꾸면 클로드가 헷갈려요.

✓

결과물을 스킬로 박제

맘에 드는 디자인 시스템이 나왔다면, 그걸 본인 프로젝트의 .claude/skills/에 박제하세요. (지난 회차 가이드 참고). 다음에 같은 톤의 새 페이지 만들 때 /[프로젝트명]-design 한 줄로 일관성을 유지할 수 있습니다.

Claude는 비범한 창의 작업이 가능합니다.
주저하지 마세요. 박스 밖에서 사고하고
독창적인 비전에 완전히 커밋했을 때
무엇이 만들어질 수 있는지 보여주세요.

— ANTHROPIC FRONTEND-DESIGN SKILL.MD에서

🏴‍☠️ 봄내AI해적단 멘티들에게

오늘 저녁에 설치만 해보세요. 명령어 두 줄, 30초입니다.

그리고 본인 프로젝트(누구는 토닥 같은 서비스, 누구는 캠페인 페이지, 누구는 사이드 프로젝트) 중 가장 못생긴 화면 하나를 골라서, 위 템플릿으로 다시 만들어보세요. 결과물 비교해서 단톡방 공유 부탁드려요. 같은 템플릿 써도 각자의 미감과 프로젝트 맥락 따라 결과가 다 달라지는 게 이 플러그인의 진짜 매력입니다. 다음 모임 때 자랑 타임 가질게요.

→ 다음 회차 예고

frontend-design + 본인 디자인 시스템 결합하기 · 플러그인의 강력한 디폴트 위에 토닥 브랜드 컬러나 POP CHAIN 게임 UI 컨벤션을 얹는 방법. .claude/skills/에 본인 디자인 토큰을 박제하는 워크플로우.

Issue №2 · Claude Code × Design

이장환 · 봄내AI해적단 선장 · 춘천 · 2026

참고: claude.com/plugins/frontend-design · GitHub 소스 · Anthropic 블로그

저작자표시 비영리 변경금지 (새창열림)