Rihpig

Posted on Mar 17 • Originally published at apidog.com

클로드 코딩 기술: 독창적인 프론트엔드 UI 완벽 구현

임페커블(Impeccable)

임페커블(Impeccable)은 Paul Bakaus가 만든 오픈 소스 Claude Code 스킬입니다. 이 도구는 AI가 자동으로 생성한 프런트엔드에서 흔히 발생하는 "AI 슬롭(AI slop)" 문제를 해결하도록 설계되었습니다. 20가지 슬래시 명령(/audit, /polish, /critique 등), 7가지 도메인별 디자인 참조 파일, 그리고 구체적인 안티패턴 규칙이 함께 제공되어, 실제로 디자인된 것처럼 보이는 고품질의 UI를 만들 수 있습니다.

오늘 Apidog를 사용해 보세요

모든 AI 생성 프런트엔드가 똑같이 보이는 이유

AI 코딩 어시스턴트에게 대시보드, 랜딩 페이지, 설정 패널 등 프런트엔드 UI를 생성해달라고 요청하면, 결과물은 대부분 비슷한 패턴을 따릅니다.

Inter 폰트 사용
보라색-파란색 그라데이션
카드 안에 중첩된 카드
색 배경 위 회색 텍스트
큰 숫자와 작은 라벨, 히어로 섹션
글래스모피즘 효과 등

이유는 간단합니다. 동일한 일반 템플릿 데이터로 훈련된 LLM이 비슷한 출력을 내기 때문입니다. 결과물은 기능적으로는 동작하지만, 시각적으로는 평범하고 차별성이 약합니다.

임페커블은 Anthropic의 공식 frontend-design 스킬을 기반으로, 더 깊은 도메인 전문성, 다양한 디자인 참조, 그리고 예측 가능한 AI 패턴을 깨는 강력한 제약 조건을 추가하여 이 문제를 해결합니다.

💡 임페커블을 Claude Code에서 /audit, /polish, /overdrive 명령과 함께 사용하기 전에 Apidog를 무료로 다운로드하세요. Apidog로 AI가 생성한 프런트엔드가 호출할 API 엔드포인트를 시각적으로 테스트하고, 페이로드, 인증, 응답 구조, 모의 데이터를 즉시 확인할 수 있습니다. 이 과정을 거치면 UI 코드와 신뢰할 수 없는 백엔드 간 반복적인 시행착오를 줄일 수 있습니다.

임페커블(Impeccable)은 정확히 무엇인가요?

임페커블은 Claude Code를 위한 설치형 지침, 참조 파일, 슬래시 명령 세트로 구성된 스킬입니다.

핵심 구성 요소는 다음과 같습니다.

임페커블의 확장된 프런트엔드 디자인 스킬

임페커블의 frontend-design 스킬은 7가지 도메인별 참조 파일로 구성된 디자인 가이드입니다.

예를 들어, 타이포그래피 가이드는 단순히 "좋은 폰트 사용"을 넘어서 수직 리듬, FOUT(Flash of Unstyled Text) 방지법, size-adjust 오버라이드, clamp()의 실제 사용 예 등 실전적인 내용을 설명합니다. 이러한 깊이가 임페커블의 차별점입니다.

임페커블의 컨텍스트 수집 프로토콜

임페커블의 /teach-impeccable 명령은 디자인 작업 전에 대상 고객, 사용 사례, 브랜드 개성 등 프로젝트 컨텍스트 정보를 수집합니다. 이 정보는 프로젝트 루트의 .impeccable.md에 저장되어 이후 세션에서 자동으로 활용됩니다.

AI의 일반적인 프런트엔드 출력은 컨텍스트 부족으로 인해 무난한 선택을 하곤 합니다. 임페커블은 컨텍스트를 강제로 명확하게 하여, 더욱 맞춤화된 결과를 얻을 수 있습니다.

AI 생성 프런트엔드를 수정하는 20가지 명령

임페커블은 AI 생성 프런트엔드의 다양한 실패 패턴을 해결하는 20가지 슬래시 명령을 제공합니다. Claude Code에서 슬래시 명령으로 바로 사용할 수 있습니다.

/audit          → 접근성, 성능, 반응형 품질 확인
/critique       → UX 검토: 계층 구조, 명확성, 감성
/polish         → 배포 전 마무리(정렬, 간격, 디테일)
/distill        → 불필요한 복잡성 제거
/normalize      → 디자인 시스템 표준화
/animate        → 의도적 모션 추가
/colorize       → 전략적 색상 적용
/bolder         → 안전한 디자인을 과감하게
/quieter        → 과한 디자인 완화
/delight        → 즐거운 경험 추가
/typeset        → 글꼴, 계층, 크기 수정
/arrange        → 레이아웃, 간격, 리듬 수정
/harden         → 오류 처리, i18n, 엣지 케이스
/optimize       → 성능 개선
/extract        → 재사용 컴포넌트/디자인 토큰 추출
/adapt          → 디바이스/컨텍스트별 조정
/onboard        → 온보딩 및 빈 상태 디자인
/clarify        → 불명확 UX 문구 개선
/overdrive      → 고급 효과(셰이더, 스프링 등)
/teach-impeccable → 디자인 컨텍스트 수집 및 저장

대부분의 명령은 인수로 특정 범위를 지정할 수 있습니다. 예: /audit header, /polish checkout-form.

명령을 연속적으로 연결하면 더욱 효과적입니다. 예를 들어:

/audit로 문제 진단
/arrange로 레이아웃 수정
/typeset로 타이포그래피 정렬
/polish로 최종 마무리

각 단계가 이전 단계의 결과를 개선해 나가는 방식입니다.

안티패턴 라이브러리: AI에게 무엇을 하지 말아야 할지 가르치기

임페커블의 핵심은 명령만이 아니라, 반복적으로 나타나는 안티패턴을 명시적으로 제약 조건으로 적용하는 데 있습니다.

타이포그래피 안티패턴

Inter, Roboto, Arial, 시스템 폰트 사용 금지 (평범해짐)
모노스페이스 폰트의 남용 금지
헤딩 위 큰 아이콘 반복 금지

색상 안티패턴

색상 배경에 회색 텍스트 사용 금지(대비 약화)
"AI 팔레트" 금지(네온, 시안, 보라-파랑 그라데이션)
완전한 검정/흰색 대신 중립 색조 사용

레이아웃 안티패턴

모든 요소를 카드로 감싸지 말 것
카드 중첩 금지
동일한 카드 그리드 반복 금지
모든 것을 중앙 정렬하지 말 것(비대칭/좌정렬 활용)

모션 안티패턴

바운스/탄성 이징 금지(올드한 느낌)
width, height, padding 애니메이션 금지(transform, opacity만 허용)

이와 같은 규칙들은 AI가 자주 저지르는 반복적인 실수를 방지하여, 눈에 띄는 "AI 냄새"를 제거합니다.

내부 구조: 빌드 시스템, 단위 테스트, 다중 도구 지원

임페커블은 단순한 프롬프트 모음이 아니라, 빌드 시스템과 단위 테스트, 여러 AI 툴을 지원하는 올바른 소프트웨어 프로젝트입니다.

빌드 시스템

스킬 소스 파일은 source/skills/에 저장(YAML 프론트매터 사용)
한 번의 빌드로 Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Pi 등 8개 도구 포맷으로 컴파일

bun run build      # 8개 공급자 형식으로 빌드
bun run rebuild    # 전체 정리 후 재빌드

변환기는 scripts/lib/transformers/에 위치하며 각 도구별로 자동 변환을 제공합니다.

단위 테스트 스위트

tests/build.test.js에 Bun 기반 테스트
오케스트레이션, 통합, 변환 정확성, 엣지 케이스 등 다양한 레벨의 테스트 포함

bun test

이 테스트들은 변환기 수정 시 각 도구별 출력이 올바른지 바로 확인할 수 있게 해줍니다.

임페커블 + Apidog: 디자인 품질과 API 품질의 결합

임페커블은 UI 계층의 품질을, Apidog은 API 계층의 품질을 보장합니다.

AI로 제품을 만들 때 두 계층 모두 중요합니다. 프런트엔드가 아무리 멋져도, API가 문서화/테스트/신뢰성이 부족하면 실제 사용에 문제가 생깁니다. Apidog는 다음과 같은 기능을 제공합니다.

백엔드 코드 없이 API 시각적 디자인
API 스키마 기반 모의 서버 자동 생성 → 프런트엔드 개발에 현실적 데이터 제공
자동화된 API 테스트로 회귀 방지
대화형 API 문서로 팀 정렬

이 조합을 통해 프런트엔드와 백엔드 모두에서 신뢰할 수 있는 품질을 확보할 수 있습니다.

Apidog를 무료로 사용해 보세요. AI가 생성한 프런트엔드를 위한 모의 서버 및 API 문서를 빠르게 생성할 수 있습니다.

임페커블(Impeccable) 시작하기

가장 빠른 시작 방법:

impeccable.style에서 원하는 도구용 번들을 다운로드
도구에 맞게 압축 해제 및 복사

예시(Claude Code 기준):

# 프로젝트 단위 설치
cp -r dist/claude-code/.claude your-project/

# 전역 설치(모든 프로젝트 대상)
cp -r dist/claude-code/.claude/* ~/.claude/

설치 후 /teach-impeccable 한 번 실행 → 프로젝트 디자인 컨텍스트 저장 → 20가지 명령 모두 사용 가능

FAQ

Q. 임페커블은 Anthropic 공식 프런트엔드 디자인 스킬과 무엇이 다른가요?

A. 임페커블은 Anthropic의 스킬을 기반으로 7가지 도메인별 참조, 20가지 명령, 명시적 안티패턴 라이브러리를 추가한 포괄적 디자인 시스템입니다.

Q. Claude Code 외 다른 도구도 지원하나요?

A. 네, Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Pi 등 지원. 빌드 시스템이 각 도구에 맞는 포맷으로 자동 컴파일합니다.

Q. /overdrive 명령은 어떤 용도인가요?

A. WebGL 셰이더, 60fps 테이블, 스프링 물리, 스크롤 기반 노출 등 고난이도 시각효과를 생성할 때 사용하세요.

Q. 단위 테스트는 어떻게 하나요?

A. Bun 기반 단위 테스트 스위트 제공. bun test 실행으로 변환 정확성, 통합 테스트 등 전체 파이프라인 검증 가능.

Q. API 기반 프런트엔드에 도움이 되나요?

A. 임페커블로 UI 품질 확보, Apidog와 연계해 API 설계/테스트/모의 서버까지 완성할 수 있습니다.

Q. 임페커블은 무료인가요?

A. 네. Apache 2.0 라이선스의 오픈 소스입니다. 소스는 GitHub, 번들은 impeccable.style에서 받을 수 있습니다.

DEV Community