impeccable 깃허브 직접 써봤어요 | 챗GPT 랜딩 페이지 AI 티 21개→4개·npx 검사 사용법 (2026년 10월)

결론부터 말씀드릴게요

• 깃허브 스타 8.6만 개짜리 AI 디자인 지침 impeccable을 직접 돌려봤어요. 챗GPT에게 같은 랜딩 페이지를 시키면서 지침만 넣고 빼 봤더니, impeccable 검사기가 찾은 'AI 티'가 21개 → 4개로 줄었어요(브라우저 검사 기준).
• 검사기 자체도 시험했어요. 일부러 AI 티 11개를 심은 페이지에서 파일 검사 9개, 브라우저 검사 8개를 잡았고, 함정으로 넣은 정상 요소 3개는 하나도 잘못 잡지 않았어요.
• 설치 없이 npx 한 줄이면 내 페이지를 검사할 수 있어요. 무료(Apache-2.0)이고 API 키도 필요 없어요.
• 다만 지침을 지킨 버전에서도 마우스를 올리면 버튼 글씨가 안 보이는 버그가 나왔어요. 지침은 '바닥'을 올려줄 뿐, 검사는 꼭 따로 해야 해요.

테스트 환경 (2026년 10월 25일 직접 테스트)

• 저장소: github.com/pbakaus/impeccable · 최신 커밋 9368675 (Release 4.7.1) · 라이선스 Apache-2.0 · 스타 86.9k, 포크 5.2k (2026년 10월 25일 기준)
• 검사 도구: npm 패키지 impeccable 4.7.0 (npx로 실행, 설치 없음)
• 실행 환경: 클라우드 Linux, Node.js v22.23.4, 브라우저 검사용 Chromium
• 비교 대상: 챗GPT 웹(Pro 계정, 기본 'Instant' 모드), 새 채팅 2개에 각 1회씩

impeccable이 뭐길래 스타가 8만 개를 넘었을까요?

impeccable은 AI 코딩 도구가 만든 웹 화면에서 흔히 보이는 'AI 티'를 줄이도록 돕는 디자인 지침이에요. 만든 사람은 구글 엔지니어 출신 Paul Bakaus이고, 2026년 3월에 이미 스타 1만 개를 넘겼다는 소개 기사가 있었어요. 제가 2026년 10월 25일에 저장소를 열어봤을 때는 스타가 86.9k였어요.

구성은 크게 두 가지예요.

• 디자인 지침(스킬): Claude Code, Cursor, Codex 같은 도구에 넣어 쓰는 규칙 모음이에요. "제목 위 작은 영문 라벨 금지", "그라데이션 글자 금지", "카드 안에 카드 금지" 같은 내용이 들어 있어요.
• 검사기(detect): 완성된 HTML이나 웹 주소를 넣으면 AI 티를 찾아서 알려줘요. README에는 규칙이 62개라고 적혀 있는데(README 주장), 제가 저장소의 규칙 목록 파일을 세어 보니 실제로 62줄이었어요.

어떻게 테스트했나요?

소개 글만 보고는 "정말 효과가 있나?"를 알 수 없어서, 정답을 아는 상태에서 두 번 시험했어요.

1. 1라운드 — 검사기 정확도: 제가 직접 테스트 페이지를 만들고 AI 티 11개(그라데이션 글자, 보라색 그라데이션, 히어로 위 작은 배지, 카드 안의 카드, 통통 튀는 애니메이션 등)를 일부러 심었어요. 그리고 "정상인데 비슷해 보이는" 함정 3개(인용문 왼쪽 회색 선, 평범한 검은 버튼, 줄간격 1.6 문단)를 섞었어요.
2. 2라운드 — 지침 넣고 빼기: 챗GPT 새 채팅 두 개에 똑같이 "AI 회의록 서비스 '노트핏' 랜딩 페이지를 HTML 하나로 만들어줘(히어로, 기능 3개, 요금제 2개, FAQ 3개, 가입 버튼)"라고 시켰어요. B에만 impeccable의 핵심 지침 파일(craft-floor, 약 5,500자)을 그대로 붙였어요. 두 결과를 같은 검사기로 검사해 개수를 셌어요.

검사는 두 방식으로 했어요. 파일 검사는 HTML 파일을 그대로 읽고, 브라우저 검사는 실제 브라우저로 페이지를 띄워서 화면에 그려진 결과를 봐요.

검사기는 일부러 심은 AI 티를 몇 개나 잡았나요?

11개 중 파일 검사가 9개, 브라우저 검사가 8개를 잡았어요. 둘을 합치면 10개예요. 함정 3개는 두 방식 모두 오탐 0개였어요.

재미있는 건 두 방식이 놓치는 게 달랐다는 점이에요.

• 파일 검사는 통통 튀는 애니메이션을 놓쳤지만, 브라우저 검사는 잡았어요.
• 반대로 브라우저 검사는 깨진 이미지와 영어 마케팅 유행어를 놓쳤고, 파일 검사는 잡았어요.
• 카드 안의 카드는 제 테스트 페이지에서는 둘 다 놓쳤어요.
• 덤으로, 제가 심지 않은 문제도 하나 찾았어요. 보라색 배경 위 연보라 글자의 대비가 3.6:1이라 기준(4.5:1)에 못 미친다는 지적인데, 제가 파이썬으로 다시 계산해도 맞았어요.

지침을 넣으면 챗GPT 결과가 정말 달라지나요?

네, 눈에 띄게 달라졌어요. 지침 없이 만든 A는 보라색 강조, 히어로 위 작은 배지, 섹션마다 'WHY NOTEFIT', 'PRICING' 같은 영문 라벨이 붙은, 흔히 보던 AI 랜딩 페이지였어요. 지침을 붙인 B는 초록 계열 색에 라벨 없이 제목으로 바로 시작했고, 기능 아이콘을 글자 기호 대신 SVG로 직접 그렸어요.

검사 결과 숫자는 이렇게 나왔어요.

항목	A 지침 없이	B 지침 넣고
브라우저 검사 검출 수	21개	4개
파일 검사 검출 수	21개	8개
글자 대비 부족(브라우저)	14개	0개
제목 위 영문 라벨·히어로 배지(브라우저)	4개	0개
제목 위 아이콘 타일(브라우저)	2개	3개
코드 길이 / 나눠 받은 횟수	약 2.4만 자 / 2번	약 3.1만 자 / 3번

가장 크게 줄어든 건 회색 글자 대비 부족이었어요. A는 연회색 보조 문구를 여기저기 써서 대비가 2.6:1까지 떨어졌는데(제 계산으로도 2.62:1), B는 브라우저 검사에서 대비 지적이 하나도 없었어요.

예상 밖이었던 점은 무엇인가요?

• 지침을 지킨 B에서 새 버그가 나왔어요. 상단 '무료로 시작하기' 버튼에 마우스를 올리면 글자가 초록(#176B4B), 배경이 진초록(#105239)이 돼서 대비가 1.42:1밖에 안 돼요. 메뉴 링크용 hover 색이 버튼의 흰 글자를 덮어쓴 거예요. 이건 파일 검사만 잡았고, 저는 실제 브라우저에서 마우스를 올려 다시 확인했어요.
• 지침에 있는 규칙도 다 지키진 않았어요. craft-floor에는 "아이콘+제목+설명 카드를 똑같이 반복하지 말라"는 내용이 있는데, B도 제목 위 아이콘 타일 3개를 그대로 만들었어요.
• 챗GPT 답이 중간에 끊겼어요. A는 한 번, B는 두 번 끊겨서 "끊긴 부분부터 이어서"라고 다시 요청해야 했어요. 지침을 넣으면 코드가 길어지는 만큼 이어 붙이는 수고도 늘어나요.

쓰기 전에 알아둘 아쉬운 점·주의점은?

• 검사 결과는 '디자인 취향 규칙'에 맞는지를 보는 거예요. 숫자가 줄었다고 전환율이 오른다는 뜻은 아니에요.
• 파일 검사와 브라우저 검사가 서로 다른 걸 놓쳐요. 제 테스트에서는 둘 다 돌려야 가장 많이 잡았어요.
• 제 클라우드 리눅스(root 계정)에서는 브라우저 검사가 크롬 보안 설정 때문에 바로 안 켜졌고, 환경 변수 CI=1을 붙여서 돌렸어요. 일반 PC 사용자 계정에서는 보통 해당하지 않아요.
• 한국어 문구는 덜 잡아요. 영어 유행어(Supercharge, world-class 등)는 잡았지만, 같은 문단의 한국어 제목 '혁신하는 차세대 AI 플랫폼'은 유행어로 따로 표시되지 않았어요.
• 이번 비교는 챗GPT 1회씩이라 결과가 매번 같다고 할 수는 없어요.

어떻게 따라 하면 되나요?

1단계. 내 페이지 검사하기 — Node.js가 깔려 있으면 설치 없이 바로 돼요.

npx impeccable detect index.html
npx impeccable detect https://내사이트주소
npx impeccable detect --json index.html

2단계. 챗GPT·제미나이 같은 웹 채팅에서 쓰기 — 저장소의 skill/reference/craft-floor.md 파일을 열어 내용을 복사한 뒤, 만들고 싶은 페이지 요청 아래에 "아래 디자인 지침을 반드시 지켜서 만들어줘"와 함께 붙여 넣어요. 저는 영어 원문 그대로 붙였고 HTML 주석만 지웠어요.

3단계. 결과를 다시 검사하기 — 받은 HTML을 파일로 저장하고 1단계 명령으로 다시 검사해요. hover 같은 상태는 실제로 마우스를 올려서 한 번 더 봐요.

4단계(선택). 코딩 도구에 설치하기 — README에는 프로젝트 폴더에서 npx impeccable install을 실행하면 Claude Code, Cursor 등에 스킬이 설치된다고 안내돼 있어요. 이 부분은 이번에 직접 테스트하지 않았어요.

누구에게 추천하고, 누구에게는 비추천할까요?

이런 분께 추천	이런 분께는 비추천
AI로 랜딩 페이지·블로그 스킨을 자주 만드는 분	이미 디자인 시스템이 확실히 정해진 팀
"AI가 만든 티"를 빨리 줄이고 싶은 1인 사업자	검사 결과를 그대로 정답으로 믿고 끝내려는 분
글자 대비·줄간격 같은 기본 실수를 자동으로 찾고 싶은 분	한국어 문구 품질까지 점검받고 싶은 분
개발자가 아니어도 쓸 수 있나? 2단계(지침 붙여넣기)는 누구나 가능	명령어 창(터미널)을 전혀 쓰고 싶지 않은 분은 1·3단계가 어려울 수 있어요

자주 묻는 질문

Q. 돈이 드나요?
A. 라이선스는 Apache-2.0이고, README에 따르면 검사기는 AI 모델이나 API 키 없이 돌아가요. 제가 돌릴 때도 키를 넣지 않았어요.

Q. 티스토리 글 화면도 검사할 수 있나요?
A. 명령어 도움말상 파일뿐 아니라 웹 주소도 넣을 수 있어요. 다만 블로그 스킨 전체가 함께 검사되니, 내가 쓴 본문만의 결과는 아니라는 점을 감안해야 해요.

Q. 결과에 나온 규칙을 꺼둘 수 있나요?
A. 도움말에 impeccable ignores 명령과 파일 안에 넣는 무시 주석 옵션이 있어요. 일부러 쓴 디자인이라면 그 규칙만 빼고 검사하면 돼요.

Q. 지침이 영어인데 한국어 페이지에도 효과가 있나요?
A. 제 테스트에서는 한국어 페이지 요청에 영어 지침을 붙였는데도 색·라벨·대비 쪽 지적이 크게 줄었어요. 한국어 문장 표현은 따로 다듬어야 했어요.

여러분은 AI로 만든 페이지에서 어떤 'AI 티'가 가장 거슬리셨나요? 보라색 그라데이션인가요, 섹션마다 붙는 영문 라벨인가요? 댓글로 알려주시면 다음 테스트 주제로 삼아볼게요.

참고 자료

• GitHub — pbakaus/impeccable 저장소 (2026년 10월 25일 기준, 커밋 9368675)
• impeccable.style — 공식 사이트
• Abduzeedo — "Impeccable: The Open-Source AI Design Skill for Better UI" (2026년 3월 18일)
• 직접 설치·테스트 (2026년 10월 25일, 클라우드 Linux · 챗GPT 웹 Instant)