Impeccable: AI 코딩 도구의 디자인 편향을 교정하는 오픈소스 스킬
Impeccable: AI 코딩 도구의 디자인 편향을 교정하는 오픈소스 스킬
AI 코딩 도구로 프론트엔드를 만들면 어딘가 익숙한 결과물이 나옵니다. Inter 폰트, 보라색 그라데이션, 카드 위에 카드, 회색 텍스트. Impeccable은 이 예측 가능한 디자인 편향을 교정하는 오픈소스 디자인 스킬입니다.
AI가 만든 UI가 전부 비슷한 이유
모든 LLM은 같은 제네릭 템플릿에서 학습합니다. Tailwind UI, shadcn/ui, 각종 보일러플레이트가 학습 데이터에 포함되어 있기 때문에, AI는 매번 비슷한 패턴을 반복합니다.
구체적으로 AI가 반복하는 디자인 실수를 정리하면 이렇습니다:
- 과다사용 폰트: Inter, Roboto, Arial, Open Sans만 선택
- 색상 문제: 컬러 배경에 회색 텍스트, 순수 블랙/그레이(tint 없음)
- 레이아웃 패턴: 모든 것을 카드로 감싸거나 카드를 중첩
- 모션: bounce/elastic 이징 남용 (구식 느낌)
- 장식: 모든 헤딩 위에 큰 둥근 아이콘 배치 (템플릿 느낌)
이 패턴들은 개별적으로는 나쁘지 않을 수 있지만, 조합되면 "AI가 만들었구나"를 1초 만에 알 수 있는 결과물이 됩니다.
Impeccable이란 무엇인가
Impeccable은 AI 코딩 도구가 프론트엔드 디자인을 더 잘 하도록 만드는 디자인 언어이자 스킬입니다. Anthropic이 만든 frontend-design 스킬을 기반으로, jQuery UI의 원 제작자인 Paul Bakaus가 더 깊은 전문성과 제어력을 추가했습니다.
Impeccable은 1개 스킬, 20개 커맨드, 큐레이션된 안티패턴으로 AI의 디자인 편향을 교정하는 오픈소스 도구입니다.
핵심 구성 요소는 세 가지입니다:
- 7개 도메인별 레퍼런스 파일: AI가 디자인 원칙을 이해하도록 구조화된 지식
- 20개 슬래시 커맨드: 진단, 품질 향상, 적응, 강도 조절 등 목적별 커맨드
- 안티패턴 목록: AI가 하지 말아야 할 것을 명시적으로 정의
7개 디자인 도메인
Impeccable은 프론트엔드 디자인을 7개 도메인으로 나누어 각각에 대한 레퍼런스 파일을 제공합니다.
Typography (타이포그래피)
타입 시스템, 폰트 페어링, 모듈러 스케일, OpenType 기능을 포함합니다. AI가 Inter만 고집하는 대신, 프로젝트에 적합한 폰트 조합을 선택하도록 안내합니다.
Color and Contrast (색상과 대비)
OKLCH 색상 공간, tinted neutrals, 다크 모드 설계, 접근성 기준을 다룹니다. 순수 블랙이나 순수 그레이 대신 항상 색조가 있는 중성색을 사용하도록 지시합니다.
Spatial Design (공간 디자인)
스페이싱 시스템, 그리드 설계, 시각적 위계를 정의합니다. 모든 것을 카드로 감싸는 대신, 공간 자체로 구조를 만들도록 유도합니다.
Motion Design (모션 디자인)
이징 커브, 스태거링 애니메이션, reduced motion 설정을 포함합니다. bounce/elastic 같은 구식 이징 대신, 목적 있는 모션을 설계하도록 합니다.
Interaction Design (인터랙션 디자인)
폼 설계, 포커스 상태, 로딩 패턴을 다룹니다. 사용자 경험의 세부사항까지 AI가 신경 쓰도록 만듭니다.
Responsive Design (반응형 디자인)
모바일 퍼스트 접근법, 유동적 디자인, 컨테이너 쿼리를 포함합니다. 미디어 쿼리 몇 개로 끝내는 대신, 진정한 반응형 설계를 구현하도록 합니다.
UX Writing (UX 라이팅)
버튼 레이블, 에러 메시지, 빈 상태 텍스트를 다룹니다. "Submit" 같은 제네릭 텍스트 대신, 맥락에 맞는 마이크로카피를 작성하도록 안내합니다.
20개 슬래시 커맨드 활용법
Impeccable의 커맨드는 목적에 따라 6개 카테고리로 분류됩니다.
진단 커맨드
| 커맨드 | 기능 |
|---|---|
/audit | 기술적 품질 검사 (접근성, 성능, 반응형, 안티패턴) |
/critique | UX 디자인 리뷰 (위계, 명확성, 감정적 공명) |
v1.6부터 /audit은 5차원 점수와 P0-P3 심각도 등급을 제공하고, /critique는 Nielsen 10 휴리스틱 점수화와 인지 부하 평가를 수행합니다.
품질 커맨드
| 커맨드 | 기능 |
|---|---|
/polish | 출시 전 마지막 패스 |
/harden | 에러 핸들링, i18n, 엣지 케이스 강화 |
/optimize | 성능 개선 |
/normalize | 디자인 시스템 정렬 |
적응 커맨드
| 커맨드 | 기능 |
|---|---|
/distill | 본질만 남기기 |
/adapt | 다양한 디바이스 적응 |
/clarify | 불명확한 UX 카피 개선 |
향상 커맨드
| 커맨드 | 기능 |
|---|---|
/typeset | 타이포그래피 수정 |
/arrange | 레이아웃/스페이싱 개선 |
/onboard | 온보딩 플로우 디자인 |
/delight | 즐거운 순간 추가 |
/colorize | 전략적 색상 추가 |
/overdrive | 기술적으로 야심찬 효과 (BETA) |
강도 커맨드
| 커맨드 | 기능 |
|---|---|
/bolder | 밋밋한 디자인 강화 |
/quieter | 과한 디자인 톤다운 |
시스템 커맨드
| 커맨드 | 기능 |
|---|---|
/teach-impeccable | 원타임 설정, 프로젝트 디자인 컨텍스트 저장 |
/animate | 목적 있는 모션 추가 |
/extract | 재사용 컴포넌트 추출 |
커맨드 체이닝도 가능합니다. /audit /normalize /polish blog처럼 한 줄에 여러 커맨드를 순차 실행할 수 있습니다.
설치 방법
범용 설치 (추천)
npx skills add pbakaus/impeccable
이 명령은 사용 중인 AI 코딩 도구를 자동 감지하고, 올바른 위치에 스킬을 설치합니다.
지원 도구
Impeccable은 현재 9개 AI 코딩 도구를 지원합니다:
- Claude Code
- Cursor
- OpenCode
- Pi
- Gemini CLI
- Codex CLI
- VS Code Copilot
- Kiro
- Trae
Claude Code 전용
/plugin marketplace add pbakaus/impeccable
또는 .claude/skills/ 디렉토리에 직접 복사하는 방법도 있습니다.
실전 워크플로우 예시
블로그 페이지의 디자인을 개선하는 과정을 예로 들어보겠습니다.
/audit blog → 접근성, 안티패턴 이슈 발견
/normalize blog → 디자인 시스템에 맞게 정렬
/polish blog → 출시 전 최종 정리
이 세 단계만으로도 AI가 만든 "제네릭한" UI를 전문가 수준으로 끌어올릴 수 있습니다.
최근 업데이트 (v1.6)
v1.6에서 추가된 주요 기능입니다:
- 새 프로바이더: Trae (China + International) 지원
/critique강화: Nielsen 10 휴리스틱 점수화, 페르소나 아키타입 테스트, 인지 부하 평가/audit강화: 5차원 점수 + P0-P3 심각도 등급 + 구조화된 액션 플랜- 스킬 디스커버리 개선: 더 자연스러운 커맨드 탐색
FAQ
Impeccable은 무료인가요?
네. Apache 2.0 라이선스로 배포되는 오픈소스 프로젝트입니다. GitHub에서 소스 코드를 확인하고 기여할 수 있습니다.
어떤 AI 코딩 도구와 호환되나요?
Claude Code, Cursor, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Trae 등 9개 도구를 지원합니다. npx skills add 명령으로 자동 감지 설치가 가능합니다.
Impeccable을 설치하면 기존 프로젝트에 영향을 주나요?
기존 코드를 변경하지 않습니다. AI가 새로운 코드를 생성할 때 더 나은 디자인 결정을 하도록 가이드하는 역할입니다. /teach-impeccable 커맨드로 프로젝트별 디자인 컨텍스트를 설정할 수 있습니다.
Paul Bakaus는 누구인가요?
jQuery UI의 원 제작자로, 웹 플랫폼과 개발자 경험 분야의 전문가입니다. Google에서 DevRel을 이끌었고, 현재는 AI 트랜스포메이션 컨설팅을 하고 있습니다.
마무리
AI 코딩 도구의 디자인 품질은 도구 자체의 한계가 아니라, AI에게 전달하는 디자인 지식의 깊이에 달려 있습니다. Impeccable은 이 지식 격차를 메우는 실용적인 해결책입니다.
"AI가 만든 UI는 다 비슷하다"는 변명은 이제 통하지 않습니다. 1개 스킬, 20개 커맨드, 큐레이션된 안티패턴으로 AI의 디자인 편향을 교정해보세요.
