Shadcn Lint 써서 AI로 디자인 박살내지 않기

한 줄 핵심

Shadcn Lint를 빌드 전 검사에 붙여 AI가 만든 UI의 색상·스타일 오버라이드를 자동으로 찾아내고, 테마와 공통 컴포넌트 기준으로 일관된 디자인을 빠르게 복구하는 방법을 설명한다.

시간별 요약

1. 0:00
   AI 웹사이트의 디자인 불일치 페이지를 추가하거나 작은 수정을 할수록 색, 글자, 여백이 제각각으로 변해 사이트 전체 디자인이 무너지는 문제가 자주 생긴다. 특히 AI가 기존 스타일을 덮어쓰면 같은 사이트 안에서도 분위기가 달라져 디자인 시스템이 깨진다.
2. 0:56
   Shadcn Lint 소개 Shadcn Lint는 빌드 전에 디자인 규칙 위반과 문제 코드를 찾아내고, 테마와 컴포넌트 기준에 맞게 고칠 수 있도록 진단을 제공한다. 덕분에 막연히 '디자인 맞춰줘'라고 반복하지 않아도 시스템적으로 오류를 잡을 수 있다.
3. 1:27
   shadcn 테마와 공통 컴포넌트 테마와 공통 컴포넌트를 쓰면 동일한 페이지 구조라도 색상, 모서리, 글자 스타일만 바꿔 여러 분위기의 사이트를 일관되게 만들 수 있다. 역할별 색을 테마에서 관리하면 강조색 같은 기준값을 바꿀 때 관련 컴포넌트가 한꺼번에 따라 바뀐다.
4. 2:30
   스타일 덮어쓰기 문제 테마에 없는 색이나 스타일을 예외적으로 직접 오버라이드하면, 테마를 바꿔도 일부 영역만 예전 스타일을 유지해 일관성이 깨진다. 이런 오버라이드가 많아질수록 디자인 시스템 전체가 어색해지고 관리도 어려워진다.
5. 3:14
   린트 진단과 AI 수정 Shadcn Lint는 테마 색 사용 여부와 컴포넌트 스타일의 오버라이드를 규칙에 따라 검사하고, 어떤 파일의 어떤 코드를 고쳐야 하는지까지 알려준다. 이 진단을 AI에 전달하면 테마 색으로 되돌리거나 컴포넌트 규격에 맞게 수정하도록 정확하게 작업시킬 수 있다.
6. 4:41
   수정 결과 확인 테마를 바꿔 보아도 예전에 분홍색으로 고정돼 있던 부분까지 함께 바뀌면 수정이 제대로 적용된 것이다. 이렇게 테마 변경에 일관되게 반응하는지 확인하면 디자인 규칙이 정상적으로 복구됐는지 빠르게 검증할 수 있다.
7. 4:54
   기존 프로젝트에 적용하기 기존 프로젝트에서는 먼저 테마와 공통 컴포넌트 위치를 파악한 뒤, 공식 설치 안내와 함께 Shadcn Lint를 붙이고 기존 검사 설정은 유지하면 된다. 이후 테마 색 사용과 오버라이드 검사 규칙을 정해 반복 실행하면, 이미 있는 코드도 정리하고 앞으로의 수정도 자동 검증할 수 있다.
8. 6:30
   빌드 전 검사 연결 이 검사를 빌드 전에 실행하도록 연결하면 AI가 디자인 규칙을 어겼을 때 바로 에러로 드러나므로, 수정 요청이나 의사결정을 즉시 할 수 있다. 매번 수동으로 디자인 맞춤을 재요청하던 흐름을 자동 검사와 빠른 수정으로 바꿀 수 있다.

실무 인사이트

• AI가 UI를 수정하는 환경에서는 '자연어로 다시 맞춰 달라'보다 린트 규칙으로 금지 항목을 명시하는 편이 일관성과 재현성이 높다.
• 테마 색, 공통 컴포넌트, 오버라이드 규칙을 분리해 관리하면 디자인 수정이 생겨도 영향 범위를 예측하기 쉬워진다.
• 빌드 전 검사에 연결하면 디자인 회귀를 배포 전에 잡을 수 있어, AI 활용 개발에서 품질 게이트 역할을 하게 된다.