Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
AI가 웹사이트 디자인을 무분별하게 변경하는 문제를 해결하기 위해 'Shadcn Lint' 사용법을 소개합니다. 이 린트는 빌드 전에 코드와 디자인 규칙 위반 사항을 찾아내어, 프로젝트의 일관된 디자인 시스템 유지를 돕습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 코드팩토리의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기Video: Shadcn Lint 써서 AI로 디자인 박살내지 않기
Channel: 코드팩토리
Duration: 7m 8s
Source: subtitle (auto, ko)
Transcript:
AI로 웹사이트를 만들다 보면은 디자인 부분에서 항상 열받는 상황들이 생깁니다. 처음 만든 페이지는 괜찮은데 페이지를 하나씩 추가하면 색도 달라지고 글자도 달라지고 여백도 막 마음대로 바뀔 때가 있어요. 자, 그래서 기존 디자인이랑 똑같이 맞춰 줘라고 대충 얘기를 하게 되면은 멀쩡했던 부분까지 막 바뀔 때도 있거든요. 기능 하나 그냥 추가하려고 했는데 또는 페이지 하나 추가하려고 했는데 작은 부분을 수정하려고 했는데 어느새 우리가 사이트 전체 디자인을 다시 손보고 있는 거죠. 자, 우리가 원하는 거는 세 페이지를 만들더라도 또는 수정을 하더라도 같은 사이트처럼 보이고 디자인 시스템이 유지되고 분위기를 바꾸고 싶을 때는 여러 페이지에서 우리가 동시에 함께 바뀌도록 하는 거잖아요. 그럴 때 또 실 수가 없기를 원하고요. 자, 그래서 제가 오늘 영상을 가져왔습니다. 저 여러분 이미 샤스앤을 많이 쓰고 계시죠? 제가 작년부터 계속 가르쳐 드리고 있는데 자 샤시엔이 같은 컴포넌트를 쓰도록 강지하는 부분이 있지만 AI가 여기저기 스타일을 우리가 덮어 쓰게 되면은 페이지가 분위기가 전부 다 달라질 수가 있어요.
그리고 AI도 실수하기도 하고요. 자, 오늘은 샷시앤 린트라는 걸로 이런 문제되는 코드와 디자인을 빌드 전에 찾아내고 우리 테마랑 컴포넌트에 맞춰서 우리가 고칠 수 있는 방법을 한번 알아보도록 할게요. 디자인 규칙을 어긴 코드도 빌드에처럼 그냥 잡히도록 우리가 연결할 수가 있고요. 자, 그러면 LRM이 실수를 했더라도 우리가 빌드타임 검사에 걸리기 때문에 무엇을 써야 되는지 굉장히 빠르게 진단을 받고 수정을 할 수가 있어요. 자, 그래서 기존 디자인이랑 맞춰줘라고 우리가 대강적으로 매번 부탁하던 거를 이제는 코드를 시스템적으로 검사하고 확실하게 고칠 방법을 우리가 추천을 받을 수가 있다라는 겁니다. So easy. 자, 먼저 한번 상상을 해 볼게요.이 같은 사이트를 단정한 업무용 느낌으로 우리가 만들 수도 있고 색깔이랑 글자 둥근 정도로 우리가 바꿔 가지고 부드러운 브랜드 느낌으로 줄 수도 있어요. 자, 어두운 테마로 우리가 바꿔 볼 수도 있고 라이트 모드랑 다크 모드 둘 다 제공을 할 수도 있고요.
페이지 내용이랑 구조는 똑같은데 사이트 전체의 분위기만 우리가 바꿔 주는 거죠. 자, 이때 우리가 샤스을 활용을 할 수가 있어요. 이미 많이들 사용하고 계실 건데. 샤스에는 기본 스타일이 정리된 UI 코드를 우리 프로젝트에 가져와서 사용할 수 있게 해 줘요. 자,이 코드를 우리가 직접 수정해서 우리 사이트에 맞게 바꿀 수도 있고요. 자, 그리고이 색상은 테마에서 우리가 함께 관리를 합니다. 그 배경색, 글자색, 강조색처럼 역할별로 이름을 붙여두고 여러 페이지에서 우리가 같은 값을 사용을 한다라는 거예요. 자, 그러면은 강조색을 우리가 파란색에서 초록색으로 바꿨을 때 그 색을 사용하는 모든 부분들이 모든 컴포넌트가 함께 바뀌는 형태인 거죠. 자, 모서리의 둥근 정도랑 글자 스타일도 공통 설정으로 우리가 맞춰둘 수가 있어요. 자, 그래서 이런 설정을 우리가 함께 조정해서 아까 봤던 서로 다른 분위기를 우리가 만들 수가 있다라는 거죠. 자, 그런데 여기서 문제가 있습니다. 예외적으로 우리가 테마에 정의되지 않은 색상이나 디자인을 쓰고 싶을 때 우리가 오버라이드를 하게 되는데 사람이 직접 코딩을 할 때는 굉장히 예외적인 상황에만 우리가 적절하게 사용을 했지만 요즘 LM은 무차별적으로 오버라이드를 하는 경우가 있어요.
그렇게 될 경우 테마에서 벗어나는 디자인이 될 수가 있다라는 거죠. 자, 그래서 그런 예제로 완전 우리가 새로 만드는 페이지에서 테마의 강조색을 쓰는 대신에 분홍색을 우리가 코드에다 그냥 직접 오버라이드해서 넣었다고 생각을 해 볼게요. 자, 테마를 초록색으로 바꾸더라도 여기는 계속 분홍색으로 남습니다. 하나의 테마로 통일돼야 되는 사이트인데이 하나의 영역만 다른 디자인을 쓰고 있고 테마를 따르지 않는 거죠. 이게 많아지기 시작하면은 갑자기이 디자인이 시스템적으로 이상하게 보이게 됩니다. 자, 이런 예외되는 잘못된 코드를 한 번에 찾아줄 수 있는게 이번에 나온 샤센 린트예요. 테마의 정한 색상을 우리가 쓰고 있는지 기존 컴포넌트의 외관을 우리가 그대로 사용하는 곳에서 덮어 쓰고 있지는 않은지 우리가 정해 둔 규칙에 따라 코드를 바로 검사를 해 줘요. 자, 그래서 우리가 샤시 트를 쓰게 되면은 여기 디자인 좀 맞춰 줘, 디자인 좀 통일해 줘. 이렇게 대강적으로 말한 대신에 어떤 파일에 어떤 코드를 고쳐하는지를 우리가 샤시엔 린트를 통해서 진단으로 확인을 하고 LM이 정확한 위치를 우리가 수정을 하도록 할 수가 있다라는 거죠.
자, 색상 검사 규칙을 켜고서 우리가 실행을 하면은 이렇게 잘못 색상이 선택된 분홍색 코드가 진단에 바로 나와요. 사용할 수 있는 테마 색 이름이랑 그 색을 정의한 파일도 알려 주는 거죠. 자,이 진단은 우리가 AI한테 전달하면서 요청을 해 줄 수가 있겠죠.이 부분은 사이트 강조 영역이니까 테마에 정해둔 강조색을 사용해 줘. 또는 우리가 샷시앤 린트를 실행하고 거기에서 잘못된 부분들을 전부 다 수정해 줘라고 한 번에 할 수도 있는 거고요. 자, 그래서이 예제서는 분홍색을 우리가 직접 지정을 해 놨지만 이거를 테마의 강조색인 프라이머리로 우리가 사용하도록 다시 변경을 해 주면은 우리 테마에 맞는 디자인으로 다시 돌아오겠죠. 우리가 공통으로 쓰는 컴포넌트들도 마찬가지요. 사용하는 곳에서 우리가 크기나 색을 따로 덮어 써 버렸다면은 그 컴포넌트에 정의된 크기나 스타일의 선택지를 우리가 린트 진단에서 바로 받아볼 수가 있어요. AI도 이거를 접근할 수가 있다라는 거죠. 우리 프로젝트의 컴포넌트 정의해서 가져오게 되는 거고 어떤 크기를 쓸 수 있는지 어떤 스타일이 있는지 어디에 정의돼 있는지 우리가 확인하면서 AI가 수정하도록 할 수가 있다라는 거죠.
자, 수정한 뒤에 정확하게 잘 수정이 됐는지 우리가 보려면은 사이트 테마를 우리가 한번 바꿔 볼 수가 있겠죠. 원래는 아까 분홍색으로 그대로 남아 있던 여기까지 우리 변경된 테마로 바뀌는 걸 볼 수가 있어요. 그래서 우리 테마에 맞게 이제는 설정이 됐다라는 얘기죠. 자, 신규 프로젝트는 샷시 린트를 그냥 설치하고서 처음부터 사용을 하면 되는데 진행하고 있는 프로젝트가 있다라고 하면은 우리가 어떻게 사용하면 될까요? 자, 먼저 현재 테마랑 공통 컴포넌트가 어디 있는지 에아에게 확인해 달라고 하면 됩니다. 자, 그다음에 샤시엔 링트랑 공식 설치 안내 링크를 우리가 넣어 주고서 그냥 함께 요청을 하면 돼요. 공식 안내를 읽고 현재 프로젝트에 맞게 샤센 링트를 설치하고 등록해 줘. 기존 검사 설정은 유지해 줘. 자, 설치가 끝나면은 어떤 규칙으로 우리가 검사하면 좋을지 따로 정해 줘도 좋습니다. 예를 들어서 테마의 정한색을 사용하도록 검사하고 기존 컴포넌트를 사용하는 곳에서 외관을 따로 덮어 쓰고 있는 오버라이드하고 있는 코드도 확인해 줘.
규칙을 설정하고 검사 명령도 알려줘라고 하면 우리가 리포트를 받을 수가 있고 어떤 부분은 고의적으로 우리가 오버라이드를 했을 수도 있겠죠. 자, 그런 부분 우리가 제외하고 작업하도록 요청할 수도 있다라는 거예요. 자, 그다음에 수정이 다 끝나고 반영이 된 거 같다라는 생각이 들면은 최종적으로 이런 요청을 한번 더 해 보면 좋겠죠. 기종 테마랑 공통 컴포넌트를 사용해서 테마를 일관화해 주고 작업이 끝나면 샷시앤 린트를 다시 실행하고 진단이 나오면 수정한 뒤에 다시 한번 검사를 해 줘. 자, 이렇게 몇 번을 반복하다 보면은 기존에 있었던 프로젝트도 한 번에 린트로 인해 수정이 되고 앞으로는 린트를 실행하기만 하면 우리가 한 번에 문제가 되는 부분을 찾을 수 있도록 우리가 업데이트를 시킬 수가 있다라는 거예요. 자, 많은 분들이 이미 샤시엔을 쓰고 있을 건데 샤시엔 링트를 한번 같이 붙여 보시는 걸 저는 진짜 추천을 드립니다. 세 페이지를 만들거나 작은 디자인 수정을 맡겼을 때 AI가 테마에 없는 색상을 넣거나 컴포넌트 스타일을 마음대로 벗퍼 쓰고 있다라고 하면은 이걸 전부 다 린트가 한 번에 차아 줘요.
어떤 코드를 고쳐야 하고 대신에 무엇을 써야 되는지도 진단으로 다 알려 주기 때문에 LM한테 먹이기도 너무 편하죠.이 이 검사를 우리가 빌드 전에 실행하도록 연결을 해 두면요. AI가 디자인 규칙을 어기더라도 에러로 그냥 한 번에 나오기 때문에 그 진단을 바꿔서 우리가 수정을 바로 요청을 하거나 우리 마음대로 또 다른 결정들을 해낼 수가 있습니다. 근거를 기반으로요. 그래서 그냥 기존 디자인이랑 맞게 테마를 맞춰 줘라고 문제가 될 때마다 꼭 한 번씩 다시 요청을 하던 거를 이제는 그냥 샤시앤 린트로 자동 검사하고 굉장히 빠르게 고치도록 우리가 작업 흐름에 넣을 수가 있다라는 거죠. 자, 그래서 별로 시간 안 들고 굉장히 빠르게 우리가 적용할 수 있으니까 샷 링트 꼭 한번 사용을 해 보시고요. 오늘 영상이 좋았다면 구독과 좋아해 그리고 하이보이까지 해 주시면 제가 다음에 더 좋은 영상과 함께 찾아뵙도록 하겠습니다. 쏘지. Yeah.