Impeccable 사용 가이드 — AI가 만든 뻔한 UI, 이제 끝입니다

2026-04-10

AI, AI코딩, Programming, ai개발도구, claude, claude code, impeccable, 개발, 디자인, 클로드코드

Symbols count in article: 1.6k Reading time: 10 mins.

Impeccable은 Claude Code가 만드는 UI의 품질을 프로급으로 끌어올리는 디자인 스킬입니다. 설치부터 실전 적용까지, 이 글 하나로 완벽하게 이해할 수 있습니다.

핵심 요약

Impeccable은 **AI가 만든 것 같은 뻔한 UI(AI Slop)**를 잡아주는 도구입니다
전역 설치 한 번이면 모든 프로젝트에서 바로 사용 가능합니다
/audit 한 줄이면 현재 디자인의 점수와 문제점을 바로 알 수 있습니다
웹 프로젝트에 가장 효과적이고, WPF 등 데스크탑에서는 UX 리뷰 용도로 활용합니다

AI Slop이 뭔가요?

AI로 UI를 만들어본 적 있다면, 이런 경험이 있을 겁니다:

폰트가 항상 Inter나 Roboto
보라색-파란색 그라데이션이 기본값처럼 들어감
카드 안에 카드가 들어가 있음
다크모드에 네온 글로우 효과
회색 텍스트가 컬러 배경 위에 올라감

이것이 AI Slop입니다. AI가 학습한 수많은 템플릿의 평균값이 나오는 현상입니다. “그럴듯하지만 어딘가 어색한” UI가 되는 이유입니다.

Impeccable은 이 문제를 20개 명령어 + 7개 디자인 레퍼런스 + 안티패턴 목록으로 해결합니다.

설치 방법 (1분)

전역 설치 (추천)

1 2	git clone https://github.com/pbakaus/impeccable.git /tmp/impeccable cp -r /tmp/impeccable/source/skills/* ~/.claude/skills/

이 두 줄이면 끝입니다. 이후 모든 프로젝트에서 /audit, /polish 등 20개 명령어를 바로 쓸 수 있습니다.

프로젝트별 설치

특정 프로젝트에만 적용하고 싶다면:

1 2	git clone https://github.com/pbakaus/impeccable.git /tmp/impeccable cp -r /tmp/impeccable/source/skills/* your-project/.claude/skills/

처음 시작하기 — 3단계

Step 1: 디자인 컨텍스트 설정

1	/teach-impeccable

프로젝트마다 최초 1번 실행합니다. Claude가 이런 질문을 합니다:

이 제품을 누가 사용하나요?
브랜드 성격을 3단어로 표현하면?
어떤 느낌이면 안 되나요? (안티 레퍼런스)
접근성 요구사항이 있나요?

답변하면 프로젝트 루트에 .impeccable.md 파일이 생성됩니다. 이후 모든 명령어가 이 컨텍스트를 참조합니다.

Step 2: 현재 상태 점검

/audit

20점 만점의 디자인 품질 리포트가 나옵니다:

차원	점수	체크하는 것
접근성 (A11y)	0~4	대비, ARIA, 키보드, 시맨틱 HTML
성능	0~4	레이아웃 쓰래싱, 이미지, 번들 사이즈
테마	0~4	디자인 토큰, 다크모드
반응형	0~4	터치 타겟, 브레이크포인트, 오버플로
안티패턴	0~4	AI Slop 징후 (뻔한 폰트, 그라데이션 등)

중요: /audit은 수정하지 않고 리포트만 생성합니다. 언제든 안심하고 실행하세요.

Step 3: 점수 보고 다음 행동 결정

/audit 리포트에는 총점과 함께 차원별 점수가 나옵니다. 이 점수를 보고 어떤 명령어를 실행할지 결정합니다.

총점 기준 — 어디서부터 시작할까?

총점	등급	상태	다음 행동
18~20	Excellent	거의 완벽	`/polish` 한 번이면 끝입니다
14~17	Good	양호하지만 약한 차원 있음	낮은 점수 차원의 명령어 실행 → `/polish`
10~13	Acceptable	상당한 작업 필요	`/normalize` → 차원별 수정 → `/polish`
6~9	Poor	전면 개선 필요	`/normalize` → `/typeset` → `/arrange` → 차원별 수정 → `/polish`
0~5	Critical	근본적 문제	`/teach-impeccable` 다시 → `/normalize` → 전면 재작업

차원별 점수 — 낮은 점수에 맞는 명령어

이것이 핵심입니다. 점수가 낮은 차원부터 해당 명령어를 실행합니다:

차원	점수 낮을 때 실행할 명령어	하는 일
접근성 0~2	`/harden`	에러 처리, 키보드 네비게이션, ARIA 보강
성능 0~2	`/optimize`	이미지, 번들, 렌더링 최적화
테마 0~2	`/normalize` → `/colorize`	디자인 토큰 통일 → 색상 체계 개선
반응형 0~2	`/adapt`	브레이크포인트, 터치 타겟, 모바일 대응
안티패턴 0~2	`/distill` → `/typeset` → `/normalize`	AI Slop 제거 → 폰트 교체 → 시스템 정렬

실전 예시: 기존 프로젝트에서 `/audit` 후

/audit을 돌렸더니 이런 결과가 나왔다고 가정합니다:

| # | 차원       | 점수 | 핵심 문제                    |
|---|-----------|------|----------------------------|
| 1 | 접근성     | 3    | 일부 이미지 alt 누락          |
| 2 | 성능       | 2    | 이미지 lazy loading 없음      |
| 3 | 테마       | 1    | 하드코딩된 색상, 다크모드 깨짐  |
| 4 | 반응형     | 3    | 모바일 터치 타겟 작음          |
| 5 | 안티패턴   | 1    | Inter 폰트, 카드 중첩, 그라데이션 |
| 총점: 10/20 (Acceptable)                            |

이 경우 실행 순서:

# 1. 가장 낮은 점수부터 (안티패턴 1점, 테마 1점)
/distill                    # AI Slop 장식 제거
/typeset                    # Inter → 개성 있는 폰트로 교체
/normalize                  # 하드코딩 색상 → 디자인 토큰 통일

# 2. 그 다음 낮은 점수 (성능 2점)
/optimize                   # 이미지 최적화, lazy loading

# 3. 마지막 다듬기
/polish                     # 최종 정리

# 4. 다시 점검
/audit                      # 점수가 올랐는지 확인

팁: /audit 리포트 하단에 Recommended Actions 섹션이 있습니다. 여기에 우선순위(P0→P1→P2)와 함께 어떤 명령어를 실행하면 좋을지 자동으로 추천해줍니다. 잘 모르겠으면 그 추천을 그대로 따라가면 됩니다.

가장 많이 쓰게 될 명령어 TOP 5

1위: `/audit` — 현재 상태를 숫자로 파악

1
2
3

/audit                    # 전체 앱
/audit dashboard          # 특정 페이지만
/audit checkout flow      # 특정 플로우만

언제 쓰나요? 작업 전에 현재 상태를 파악할 때. "지금 어디가 문제인지"를 객관적으로 알 수 있습니다.

2위: `/polish` — 출시 전 마지막 손질

1 2	/polish # 전체 /polish settings page # 특정 페이지

언제 쓰나요? 배포 직전. 정렬, 간격, 마이크로 디테일을 잡아줍니다. “좋은” 것을 “훌륭한” 것으로 만드는 단계입니다.

3위: `/normalize` — 디자인 일관성 확보

1 2	/normalize blog # 블로그 페이지 정규화 /normalize buttons # 버튼 스타일 통일

언제 쓰나요? 여러 페이지/컴포넌트의 스타일이 제각각일 때. 디자인 토큰과 스페이싱을 시스템에 맞게 정렬합니다.

4위: `/critique` — UX 전문가 리뷰

1 2	/critique landing page # 랜딩 페이지 UX 리뷰 /critique onboarding # 온보딩 플로우 리뷰

언제 쓰나요? “이게 사용자 입장에서 괜찮은가?” 확인할 때. 시각적 위계, 인지 부하, 감성적 공감까지 평가합니다. 코드를 수정하지 않고 피드백만 제공합니다.

5위: `/bolder` — 밋밋한 디자인 살리기

1 2	/bolder hero section # 히어로 섹션 임팩트 강화 /bolder landing page # 전체 페이지 강화

언제 쓰나요? “너무 평범하다”, "개성이 없다"고 느껴질 때. 시각적 임팩트를 높여줍니다.

명령어 전체 분류

검사/리뷰 (수정 안 함, 리포트만)

명령어	하는 일
`/teach-impeccable`	디자인 컨텍스트 수집 → `.impeccable.md` 생성 (최초 1회)
`/audit [area]`	기술적 품질 점검 (20점 만점 리포트)
`/critique [area]`	UX 디자인 리뷰 (위계, 인지 부하, 감성)

수정/정리 (코드를 직접 고침)

명령어	하는 일
`/normalize [feature]`	디자인 시스템에 맞게 토큰, 스페이싱 통일
`/polish [target]`	출시 전 최종 패스 (정렬, 간격, 디테일)
`/distill [target]`	불필요한 복잡성 제거, 본질만 남기기
`/clarify [target]`	UX 카피 개선 (에러 메시지, 라벨, 안내문)
`/optimize [target]`	성능 개선 (로딩, 렌더링, 번들)
`/harden [target]`	에러 처리, i18n, 엣지 케이스 강화

디자인 조정 (시각적 느낌을 바꿈)

명령어	하는 일
`/bolder [target]`	밋밋한 디자인 → 임팩트 있게
`/quieter [target]`	과한 디자인 → 차분하고 세련되게
`/colorize [target]`	단조로운 색상 → 전략적 컬러 추가
`/animate [target]`	정적인 UI → 의미 있는 모션 추가
`/delight [target]`	기능적 UI → 즐거움과 개성 추가
`/overdrive [target]`	일반 UI → 기술적 극한까지 (셰이더, 물리 애니메이션)

구조 (레이아웃과 시스템)

명령어	하는 일
`/extract [target]`	재사용 가능한 컴포넌트/토큰 추출
`/adapt [target]`	다양한 디바이스에 반응형 적용
`/onboard [target]`	온보딩 플로우, 빈 상태 설계
`/typeset [target]`	폰트 선택, 위계, 사이즈, 가독성 개선
`/arrange [target]`	레이아웃, 스페이싱, 시각적 리듬 개선

명령어 조합 — 이것이 진짜 힘입니다

Impeccable의 진짜 강점은 명령어를 체이닝할 수 있다는 것입니다.

기본 워크플로우

1	/audit /normalize /polish blog

이 한 줄이면: 블로그 페이지를 점검 → 정규화 → 최종 다듬기까지 한 번에 실행합니다.

상황별 조합

상황	조합
새 기능 배포 전	`/audit /normalize /polish`
디자인이 밋밋할 때	`/critique /bolder /colorize /animate /polish`
디자인이 과할 때	`/audit /distill /quieter /normalize /polish`
UX가 혼란스러울 때	`/critique /clarify /arrange /polish`
출시 전 최종 점검	`/audit /harden /adapt /optimize /polish`
처음 시작할 때	`/teach-impeccable` → `/audit` → 추천 명령어 실행

실전 시나리오

시나리오 1: “방금 만든 랜딩 페이지가 뻔해 보여요”

/audit landing page              # 먼저 점수 확인
/bolder hero section             # 히어로 섹션 임팩트 강화
/colorize features section       # 기능 섹션에 컬러 추가
/animate                         # 스크롤 애니메이션 추가
/polish landing page             # 최종 다듬기

시나리오 2: “기존 대시보드의 디자인이 일관성이 없어요”

/teach-impeccable                # 디자인 컨텍스트 먼저 설정
/audit dashboard                 # 현재 상태 점검
/normalize dashboard             # 토큰, 스페이싱 통일
/typeset dashboard               # 폰트 위계 정리
/polish dashboard                # 최종 다듬기

시나리오 3: “AI가 만든 티가 너무 나요”

/audit                           # 안티패턴 점수 확인 (0~4점)
/distill                         # 불필요한 장식 제거
/quieter                         # 과한 효과 줄이기
/normalize                       # 디자인 시스템 정렬
/typeset                         # 폰트를 Inter에서 다른 것으로
/polish                          # 최종 다듬기

시나리오 4: “WPF 프로그램의 UX를 개선하고 싶어요”

/teach-impeccable                # 디자인 컨텍스트 설정
/critique                        # UX 리뷰 (위계, 인지 부하)
/clarify                         # 에러 메시지, 라벨 개선
/onboard                         # 첫 실행 경험 개선

WPF에서는 코드 수정 명령어(/normalize, /colorize 등)는 CSS 기반이라 사용할 수 없습니다. UX 리뷰 명령어만 활용합니다.

gstack과 함께 쓰기

gstack과 Impeccable은 역할이 다릅니다. 충돌하지 않고 보완됩니다.

	gstack	Impeccable
역할	개발 워크플로우 전체	프론트엔드 디자인 품질
디자인 방식	스크린샷 기반 시각적 감사	코드 기반 원칙 적용
강점	기획→코드리뷰→QA→배포 파이프라인	타이포, 컬러, 레이아웃, 접근성

꿀팁 모음

1. `/audit`은 부담 없이 자주 실행하세요

수정하지 않고 리포트만 나옵니다. 커밋 전, 작업 시작 전, 궁금할 때 언제든 실행하세요. 점수 변화를 추적하면 개선 과정이 눈에 보입니다.

2. `/polish`는 항상 마지막에

어떤 워크플로우를 하든 **마지막은 /polish**입니다. 다른 명령어들의 수정 결과를 최종적으로 다듬어줍니다.

3. `/teach-impeccable`을 건너뛰지 마세요

이것 없이 명령어를 실행하면 Claude가 강제로 먼저 실행시킵니다. 어차피 해야 하니 프로젝트 시작할 때 바로 해두세요. 5분이면 끝납니다.

4. 안티패턴 점수가 가장 중요합니다

/audit의 5개 차원 중 Anti-Patterns 점수를 가장 먼저 확인하세요. 이 점수가 낮으면 "AI가 만든 것 같은 느낌"이 강하다는 뜻입니다.

5. 명령어 조합으로 워크플로우를 만드세요

1	/audit /normalize /polish

이런 체이닝을 자주 쓰는 패턴으로 저장해두면 매번 고민할 필요가 없습니다.

6. 반대 명령어를 기억하세요

너무…	이 명령어를	너무…	이 명령어를
밋밋하면	`/bolder`	과하면	`/quieter`
단조로우면	`/colorize`	복잡하면	`/distill`
정적이면	`/animate`	느리면	`/optimize`

마무리 — 이런 분에게 추천합니다

상황	추천도
웹 프로젝트에서 AI로 UI를 만들고 있다	★★★★★
기존 웹 프로젝트의 디자인 품질을 올리고 싶다	★★★★★
React/Next.js/Vue로 바이브 코딩 중이다	★★★★★
디자인 감각이 부족한데 AI에게 맡기고 있다	★★★★☆
WPF/데스크탑 프로젝트의 UX를 개선하고 싶다	★★★☆☆
백엔드만 개발하고 프론트엔드는 안 한다	★☆☆☆☆

Impeccable의 본질은 **“AI에게 디자인 어휘를 가르치는 것”**입니다. 프롬프트 하나하나에 “Inter 쓰지 마”, "카드 중첩하지 마"라고 할 필요 없이, 설치만 해두면 자동으로 더 나은 디자인이 나옵니다.

출처: Impeccable GitHub — Paul Bakaus
웹사이트: impeccable.style

ProgrammingAICLAUDE