AI가 만드는 웹사이트는 왜 다 비슷할까 — Impeccable이 디자인 감각을 가르쳤습니다

AI에게 웹사이트를 만들어달라고 하면, 결과물이 늘 비슷해 보이지 않았나요? 같은 폰트, 같은 보라색 그라데이션, 같은 카드 레이아웃. 이건 우연이 아닙니다. 모든 AI가 똑같은 디자인 템플릿을 학습했기 때문입니다. 오픈소스 프로젝트 Impeccable이 이 문제를 정면으로 해결했고, 일주일 만에 깃허브 스타 6천 개가 늘어 총 1만 개를 넘었습니다.

왜 AI가 만든 웹사이트는 전부 비슷할까

AI 코딩 도구(Claude Code, Cursor 등)에게 "로그인 페이지 만들어줘"라고 하면, 높은 확률로 Inter 폰트, 보라색 그라데이션, 둥근 모서리 카드가 나옵니다. ChatGPT, Claude, Gemini — 어떤 모델을 써도 마찬가지입니다.

이유는 간단합니다. 모든 AI가 인터넷의 같은 디자인 템플릿을 학습했기 때문입니다. Tailwind CSS 공식 예제, SaaS 랜딩 페이지, 부트스트랩 템플릿 — 이런 "안전한" 디자인을 반복적으로 만들어냅니다. Impeccable 제작자 Paul Bakaus의 표현을 빌리면, "모든 AI가 같은 제네릭 템플릿에서 배웠다"는 것입니다.

Impeccable이 해결하는 방법

Impeccable은 AI에게 "이런 디자인은 하지 마"와 "이런 디자인을 해"를 동시에 가르칩니다. 크게 세 가지 요소로 구성됩니다.

1. 디자인 참고서 7권

타이포그래피(글꼴 선택·크기·간격), 색상 이론(대비·조화·접근성), 공간 설계(여백·정렬), 모션(애니메이션 원칙), 인터랙션 패턴, 반응형 디자인, UX 글쓰기까지 7개 분야의 디자인 원칙이 담겨 있습니다. AI가 이 참고서를 읽고 디자인 결정을 내립니다.

2. 디자인 명령어 20가지

실제로 AI에게 내리는 지시어입니다:

3. '하지 마' 목록 — 안티패턴

AI가 자주 범하는 디자인 실수를 명시적으로 금지합니다:

• Inter 폰트 남용 금지 (다양한 폰트 사용)
• 회색 텍스트 위에 컬러 배경 금지 (가독성 문제)
• 카드 안에 카드 넣기 금지 (과도한 중첩)
• 구식 이징(easing) 함수 사용 금지

설치 방법

설치는 AI 도구에 따라 다릅니다. Claude Code에서는 이렇게 합니다:

# impeccable.style에서 다운로드하거나
# GitHub에서 직접 클론
git clone https://github.com/pbakaus/impeccable.git

# Claude Code의 스킬 폴더에 설치
# 이후 대화에서 /audit, /polish 등의 명령어 사용 가능

Cursor, Gemini CLI, VS Code Copilot, Kiro, OpenCode, Antigravity(Gemini), Pi에서도 사용할 수 있습니다. 자세한 설치 방법은 공식 웹사이트에서 확인할 수 있습니다.

누가 쓰면 좋을까

바이브코딩으로 웹사이트를 만드는 비개발자에게 가장 유용합니다. AI에게 "웹사이트 만들어줘"라고 하면 기본적으로 평범한 디자인이 나오는데, Impeccable을 설치해두면 처음부터 세련된 디자인이 나옵니다.

프론트엔드 개발자라면 /audit 명령어로 기존 프로젝트의 디자인 문제점을 빠르게 파악할 수 있습니다. 디자이너라면 개발자에게 디자인 시스템을 전달할 때 AI가 이 원칙을 따르도록 설정할 수 있습니다.

제작자 Paul Bakaus는 전 구글 개발자 경험팀 출신으로, GitHub 저장소에서 Apache 2.0 라이선스로 무료 공개했습니다. 포크 387개, 기여자 10명이 활발히 개선 중입니다.

관련 콘텐츠 — Easy클코로 AI 시작하기 | 무료 학습 가이드 | AI 뉴스 더보기