Impeccable 4.0으로 AI가 뱉는 획일적인 UI 코드 바꾸기
TuBrief 편집팀
2026년 8월 7일
0
컴퓨터/소프트웨어원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
AI로 코드를 짜본 프론트엔드 개발자라면 다 압니다. 에이전트가 만들어낸 화면은 어딘가 다 똑같습니다. Inter 폰트, 보라색과 파란색이 섞인 그라데이션, 어디서 본 듯한 카드 레이아웃. 에이전시나 클라이언트 프로젝트에 이걸 그대로 쓸 수는 없습니다. 결국 코드를 싹 엎어치고 처음부터 다시 만듭니다. 생산성을 높이려다 오히려 일을 더 만드는 셈입니다.
AI가 이런 코드를 뱉는 이유는 단순합니다. 인터넷에 굴러다니는 Tailwind 템플릿이나 SaaS 랜딩 페이지 데이터를 그대로 학습했기 때문입니다. 기본 제약을 걸어두지 않으면 에이전트는 가장 흔한 스타일을 정답으로 추론합니다. Impeccable 4.0은 개발자와 AI 사이에 고유한 디자인 규칙을 집어넣어 이 문제를 해결합니다. AI 모델을 바꾸지 않고 디자인 어휘 레이어만 주입해도 UI 품질 점수가 기존 대비 1.59배 올라갑니다.
AI가 멋대로 임의의 스타일을 가져오지 못하게 막으려면 프로젝트 환경부터 통제해야 합니다.
PRODUCT.md와 DESIGN.md 파일을 만듭니다.PRODUCT.md에 ## Anti-references 섹션을 추가합니다. 여기에 Inter 폰트 사용 금지, 순수 검정(#000000) 및 틴팅 없는 회색 사용 금지, 텍스트 그라데이션 금지 규칙을 넣습니다.DESIGN.md에 프로젝트에서 실제 사용하는 OKLCH 색상 체계, 플루이드 타이포그래피 스케일, 8px 베이스라인 간격 토큰을 지정합니다.node skill/scripts/context.mjs --target <target_path> 스크립트를 실행해 토큰 스펙을 AI 에이전트 메모리에 바인딩합니다.이 설정을 마치면 AI가 이상한 폰트나 여백을 멋대로 만들어내는 일이 꺼집니다. 엉뚱한 스타일 때문에 컴포넌트를 처음부터 다시 짜는 시간을 줄이면 주당 5시간 이상은 거뜬히 벌 수 있습니다.
기존 프로젝트에 도구를 무턱대고 붙이면 기존 Tailwind CSS나 Styled-Components 규칙과 엉켜서 터집니다. Git 저장소도 임시 파일로 더러워집니다. 레거시 자산을 안전하게 추출하고 격리하는 순서는 다음과 같습니다.
npx impeccable install을 실행해 프로젝트 내 하네스와 스킬 바이너리를 설치합니다./impeccable document 명령을 구동해 기존 tailwind.config.js와 CSS 변수를 스캔하고, 프로젝트 고유의 DESIGN.md 문서를 자동 생성합니다./impeccable extract 명령을 실행해 프로젝트 안에서 3회 이상 중복 쓰인 하드코딩 값과 스타일 패턴을 공통 디자인 토큰으로 뽑아냅니다./impeccable init을 구동해 타깃을 고정한 뒤 .gitignore 파일에 .impeccable/live/*, .impeccable/hook.cache.json, .impeccable/config.local.json을 추가합니다./impeccable doctor 명령으로 스크립트와 훅 연동 상태를 점검합니다.이 과정을 거치면 기존 UI 라이브러리와 Impeccable 엔진이 서로 싸우지 않고 작동합니다.
클라이언트 미팅 자리에서 화면을 바로 바꿔야 할 때가 있습니다. /impeccable live 명령으로 라이브 모드를 켜면 브라우저 화면에서 요소 선택기를 통해 디자인 변형을 바로 만들어볼 수 있습니다.
/impeccable live를 구동하고 브라우저 선택기에서 수정할 UI 요소를 지정해 변형을 적용합니다./impeccable normalize를 실행합니다. 브라우저 작업 중 들어간 인라인 스타일이 DESIGN.md 규칙에 맞는 토큰으로 바뀝니다./impeccable polish 명령으로 여백, 포커스 상태, 테두리를 다듬고 /impeccable distill을 실행해 불필요한 래퍼 div와 중복 마크업을 치웁니다./impeccable audit 명령으로 코드 품질 점수를 확인한 뒤 작업 브랜치에 커밋합니다.브라우저에서 뚝딱 고친 코드가 누더기 상태로 메인 브랜치에 들어가는 상황을 막을 수 있습니다.
Impeccable 4.0은 AI가 만들어내는 시각적 결함을 잡기 위해 59개의 디텍터 규칙을 품고 있습니다. 파일 편집 직후 구동되는 훅(Per-edit Hook)은 대비율 미달이나 요소 오버플로우를 잡고, 세션 종료 시 구동되는 멈춤 훅(Stop Hook)은 레이아웃 리듬과 컬러 조화를 진단합니다.
사내 디자인 스타일에 맞춰 이 검수 체계를 확장하는 방법입니다.
node skill/scripts/hook-admin.mjs ignore-value "Inter" --rule overused-font 명령을 실행합니다.node skill/scripts/hook-admin.mjs ignore-file "src/legacy/Card.tsx" 명령을 구동합니다.// impeccable-disable-next-line: intentional-brand-exception 주석을 붙입니다./impeccable audit 명령을 실행해 접근성, 성능, 테마, 반응형, 안티패턴 5개 항목의 정량 리포트를 확인하고 결함을 수정합니다.이 검수 프로세스를 세팅해두면 코드 리뷰 때 레이아웃 파손이나 디자인 불일치를 눈으로 일일이 찾아내던 시간을 절반으로 줄일 수 있습니다.