Shadcn Lint 써서 AI로 디자인 박살내지 않기
원본 영상: Shadcn Lint 써서 AI로 디자인 박살내지 않기
채널: 코드팩토리
페이지를 추가할수록 달라지는 디자인
AI로 웹사이트를 만들면 처음 만든 페이지는 괜찮아도, 페이지를 추가할수록 색상과 글자 스타일, 여백이 제각각 달라질 수 있다. 이를 바로잡으려고 “기존 디자인과 똑같이 맞춰줘”라고 요청했다가 멀쩡했던 부분까지 바뀌기도 한다. 작은 기능이나 페이지 하나를 추가하려던 작업이 사이트 전체의 디자인을 다시 손보는 일로 커지는 것이다.
코드팩토리가 제시하는 목표는 명확하다. 새 페이지를 만들거나 기존 페이지를 수정해도 같은 사이트처럼 보여야 하고, 분위기를 바꾸고 싶을 때는 여러 페이지가 함께 바뀌어야 한다.
영상은 이를 위한 도구로 Shadcn Lint를 이용한 디자인 규칙 검사를 소개한다. 화자는 공통 컴포넌트를 사용하더라도 AI가 곳곳에서 스타일을 덮어쓰면 페이지마다 분위기가 달라질 수 있다고 지적한다. 테마와 컴포넌트를 마련하는 데서 나아가, 실제 코드가 그 규칙을 따르는지 검사하자는 설명이다.
공통 테마로 사이트의 분위기를 함께 바꾸기
화자는 shadcn을 기본 스타일이 정리된 UI 코드를 프로젝트에 가져와 사용할 수 있게 해주는 도구로 소개한다. 같은 내용과 구조를 유지하면서도 색상, 글자 스타일, 모서리의 둥근 정도를 바꾸면 단정한 업무용 분위기나 부드러운 브랜드 분위기를 줄 수 있다고 설명한다.
색상을 공통으로 관리하는 방식도 이와 연결된다. 배경색, 글자색, 강조색처럼 역할별로 이름을 붙이고 여러 페이지에서 같은 값을 사용하는 것이다.
이 구조에서 중요한 것은 각 페이지가 지금 비슷하게 보이는 데 그치지 않고, 공통 설정을 바꿨을 때 함께 바뀌는 것이다. 화자가 강조하는 디자인의 일관성은 새 페이지를 추가할 때뿐 아니라 사이트 전체의 분위기를 변경할 때도 유지되어야 한다.
테마를 바꿔도 분홍색으로 남는 영역
공통 컴포넌트를 사용해도 개별 위치에서 스타일을 덮어쓰면 테마와 다른 모습이 남을 수 있다. 화자는 AI가 이런 식으로 스타일을 덮어쓰는 것을 디자인이 흐트러지는 원인으로 짚는다.
영상에서는 테마를 초록색으로 바꿨는데도 특정 영역은 계속 분홍색으로 남는 예시를 보여준다. 사이트의 공통 설정이 바뀌어도, 별도로 지정한 스타일은 그 변경을 따라가지 않는 것이다.
이 예시의 핵심은 특정 색상의 문제가 아니라 공통 테마의 변경이 일부 영역에 반영되지 않는 상태다. 같은 컴포넌트를 쓰는 것만으로는 이러한 문제를 막기 어렵다는 것이 화자의 설명이다.
막연한 수정 요청을 구체적인 진단으로 바꾸기
코드팩토리는 Shadcn Lint로 문제가 되는 코드와 디자인을 빌드 전에 찾아내고, 프로젝트의 테마와 컴포넌트에 맞춰 수정하는 방식을 제안한다. “기존 디자인에 맞춰줘”라는 포괄적인 요청을 반복하는 대신, 코드 검사 결과를 바탕으로 수정할 부분과 대안을 전달하는 것이다.
색상에 관한 진단에서는 사용할 수 있는 테마 색상 이름과 그 색상을 정의한 파일을 안내한다고 설명한다. AI가 수정할 때 참고할 수 있도록 프로젝트에 이미 마련된 선택지를 함께 제공하는 셈이다.
컴포넌트도 같은 맥락에서 다룬다. 화자는 해당 컴포넌트에 정의된 크기와 스타일의 선택지를 린트 진단에서 바로 확인할 수 있다고 설명한다.
화자가 강조하는 진단의 가치는 문제를 찾아내는 데서 끝나지 않는다. 어디를 고쳐야 하고, 대신 무엇을 사용할 수 있는지까지 알려주기 때문에 진단 결과를 LLM에 전달해 수정을 요청하기 편리하다는 것이다.
수정한 영역이 테마 변경을 따르는지 확인하기
영상에서는 수정 전후의 차이를 테마 변경으로 보여준다. 앞서 분홍색으로 남아 있던 영역이 수정 후에는 변경된 테마를 따라 바뀐다.
이 결과는 영상 앞부분에서 제시한 목표와 연결된다. 특정 영역의 색을 한 번 맞추는 데 그치지 않고, 공통 테마를 변경할 때 그 영역도 함께 바뀌도록 만드는 것이다.
수정과 재검사를 개발 흐름에 연결하기
화자는 작업이 끝나면 Shadcn Lint를 다시 실행하고, 진단이 나오면 수정한 뒤 다시 검사하도록 요청하는 흐름을 제안한다. 한 번의 수정으로 끝내기보다 검사 → 수정 → 재검사를 반복하는 방식이다.
마지막 제안은 이 검사를 빌드 전에 실행하도록 연결하는 것이다. 화자는 이렇게 구성하면 AI가 디자인 규칙을 어겼을 때 에러로 드러나고, 그 진단을 받아 바로 수정할 수 있다고 설명한다.
영상의 핵심은 공통 컴포넌트의 사용과 디자인 규칙의 준수를 함께 관리하는 데 있다. 테마와 컴포넌트를 기준으로 코드를 검사하고, 수정할 위치와 사용할 대안을 AI에게 전달하며, 수정 후 다시 검사하는 흐름으로 디자인의 일관성을 지키자는 제안이다.
출처
코드팩토리 — Shadcn Lint 써서 AI로 디자인 박살내지 않기