Claude Code에서 Impeccable 적용하기: AI가 만드는 UI 품질을 한 단계 올리는 방법

AI 코딩 도구를 사용해 프론트엔드를 만들다 보면 이런 경험을 자주 하게 됩니다.

• UI는 동작하지만 어딘가 평범하고 AI 티가 난다
• 디자인 일관성이 없다
• 반복적인 수정 요청을 해야 한다

이 문제를 해결하기 위해 등장한 프로젝트가 **Impeccable**입니다.

Impeccable은 AI에게 더 나은 디자인 판단 기준과 명령어 체계를 제공해서, LLM이 만드는 UI의 품질을 높여주는 프론트엔드 디자인 스킬셋입니다.

이번 글에서는 **Claude Code**에서 Impeccable을 실제로 적용하고 사용하는 방법을 단계별로 정리해보겠습니다.

---

1. Impeccable이 Claude Code에서 하는 역할

Claude Code에서 Impeccable은 단순한 프롬프트 모음이 아닙니다.

AI가 UI를 생성하고 개선할 때 사용할 수 있는 전용 명령 시스템을 제공합니다.

예를 들어 이런 명령이 가능합니다.

/audit
/polish
/normalize
/distill
/quieter
/bolder

각 명령은 특정 목적을 갖고 있습니다.

명령역할

/audit	UI 문제 진단
/normalize	디자인 일관성 정리
/polish	디테일 개선
/distill	UI 단순화
/quieter	시각적 노이즈 감소
/bolder	디자인 강조

즉 Claude에게 이렇게 말할 수 있습니다.

"이 UI 좀 더 예쁘게 만들어줘"

대신

/audit dashboard
/polish dashboard
/quieter dashboard

처럼 명확한 디자인 작업 명령을 전달할 수 있습니다.

---

2. Claude Code에 Impeccable 설치

먼저 저장소를 다운로드합니다.

git clone https://github.com/pbakaus/impeccable
cd impeccable

Impeccable은 여러 AI 도구용으로 빌드된 결과물을 제공합니다.

Claude Code는 다음 디렉토리를 사용합니다.

dist/claude-code

이 디렉토리를 프로젝트에 복사합니다.

프로젝트 단위 설치

cp -r dist/claude-code/.claude your-project/

프로젝트 구조는 이렇게 됩니다.

my-project
 ├ src
 ├ components
 ├ package.json
 └ .claude
     └ skills
         ├ audit
         ├ polish
         ├ normalize
         ├ teach-impeccable
         └ ...

Claude Code는 .claude/skills 폴더를 자동으로 읽어서 사용 가능한 명령으로 등록합니다.

---

전역 설치 (모든 프로젝트)

cp -r dist/claude-code/.claude/* ~/.claude/

그러면 어떤 프로젝트에서도 Impeccable 명령을 사용할 수 있습니다.

---

3. 가장 먼저 해야 할 것: /teach-impeccable

설치 후 가장 먼저 실행해야 하는 명령이 있습니다.

/teach-impeccable

이 명령은 다음 작업을 수행합니다.

1. 프로젝트 코드베이스 분석
2. 디자인 시스템 탐색
3. UI 스타일 확인
4. 부족한 정보 질문

그리고 결과를 CLAUDE.md에 저장합니다.

예를 들어 Claude는 이런 질문을 할 수 있습니다.

- 브랜드 색상은 무엇인가요?
- 주요 사용자층은 누구인가요?
- 제품의 톤은 playful인가요 enterprise인가요?
- light/dark mode 모두 지원하나요?

답변을 기반으로 Design Context가 생성됩니다.

CLAUDE.md

예시

## Design Context

Product tone: modern productivity
Primary color: indigo
Target: SaaS dashboard
UI style: minimal + strong typography
Spacing scale: 4px grid

이 문서는 이후 모든 UI 생성에서 기준점으로 사용됩니다.

---

4. 실제 UI 생성 워크플로우

이제 Claude Code에서 UI를 만들고 개선하는 실제 흐름을 보겠습니다.

---

Step 1 — 기본 UI 생성

예를 들어 SaaS 대시보드를 만든다고 가정합니다.

Create a dashboard page with

- KPI cards
- activity feed
- quick actions
- notifications

Claude는 React UI를 생성합니다.

예시

export default function Dashboard() {
  return (
    <div className="grid gap-6">
      <KpiCards />
      <ActivityFeed />
      <QuickActions />
      <Notifications />
    </div>
  )
}

하지만 여기까지는 평범한 AI UI일 가능성이 큽니다.

---

Step 2 — UI 진단

이제 Impeccable을 사용합니다.

/audit dashboard

Claude는 다음을 분석합니다.

• typography
• contrast
• spacing
• accessibility
• responsive design
• AI anti-pattern

예시 결과

Issues found:

HIGH
- insufficient color contrast in activity feed

MEDIUM
- inconsistent spacing scale

LOW
- excessive card nesting

중요한 점:

/audit은 코드를 수정하지 않습니다.

오직 문제 리포트만 생성합니다.

---

Step 3 — 디자인 정리

이제 /normalize를 실행합니다.

/normalize dashboard

이 명령은 다음을 정리합니다.

• spacing scale
• typography hierarchy
• color tokens
• layout rhythm

예시 변화

Before

padding: 12px
padding: 18px
padding: 22px

After

padding: 16px
padding: 24px
padding: 32px

디자인 시스템이 정리됩니다.

---

Step 4 — UI 디테일 개선

다음은 polish 단계입니다.

/polish dashboard

Claude는 다음을 개선합니다.

• hover states
• micro interactions
• spacing adjustments
• visual hierarchy

예시

.card {
  transition: transform 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
}

---

Step 5 — 시각적 노이즈 제거

AI UI는 종종 과한 스타일을 만듭니다.

예

• gradient 남용
• card inside card
• unnecessary shadows

이를 줄이는 명령이 있습니다.

/quieter dashboard

결과

Before

card
 card
  card

After

section
 card

UI가 훨씬 깔끔해집니다.

---

Step 6 — 디자인 강조

반대로 디자인을 더 강하게 만들 수도 있습니다.

/bolder dashboard

예

Before

font-size: 18px

After

font-size: 28px
font-weight: 700

히어로 요소가 강조됩니다.

 

---

5. 실제로 유용한 명령 조합

실무에서 자주 쓰는 조합입니다.

UI 리뷰

/audit

---

디자인 정리

/normalize
/polish

---

UI 단순화

/distill
/quieter

---

인터랙션 추가

/animate
/delight

---

6. 실전 팁

Claude Code에서 Impeccable을 잘 쓰는 방법 몇 가지를 정리하면 다음과 같습니다.

1️⃣ /audit을 먼저 사용

바로 수정 명령을 쓰기보다

/audit

으로 문제를 파악하는 것이 좋습니다.

---

2️⃣ 한 번에 하나씩 수정

좋은 흐름

/normalize
/polish
/quieter

나쁜 흐름

/polish everything immediately

---

3️⃣ Design Context를 잘 설정

/teach-impeccable

이 단계가 중요합니다.

이걸 안 하면 Claude가 generic UI를 만들 확률이 높습니다.

---

결론

Claude Code + Impeccable 조합은 단순히 UI를 생성하는 수준을 넘어서 AI 기반 디자인 워크플로우를 제공합니다.

핵심 특징은 다음과 같습니다.

• 디자인 원칙을 AI에게 주입
• UI 문제를 자동으로 진단
• 명령 기반으로 디자인 개선
• 프로젝트별 디자인 컨텍스트 유지

즉,

"AI가 UI를 만든다"

에서

"AI가 디자인 리뷰와 개선까지 수행한다"

로 발전하는 구조입니다.