자청의 유튜브 추출기

유튜브 영상의 자막과 AI요약을 추출해보세요

AI 채팅

BETA

Shadcn으로 UI 10배 향상하는 비밀 전략 공개!

게시일: 작성자: 자청의 유튜브 추출기

Shad CN UI 제대로 쓰는 법 & 나만의 디자인 만들기!

웹사이트 만들 때 UI(사용자 인터페이스)가 진짜 중요해. 사람들이 네 웹사이트를 보고 '와, 잘 만들었다!' 할지, 아니면 '음...' 할지를 결정하는 게 바로 UI거든. AI 도구인 Cursor를 써도 멋진 UI를 만들려면 제대로 알아야 해.

Shad CN UI, 혹시 잘못 쓰고 있니?

Shad CN 컴포넌트는 엄청 인기 많잖아? 근데 많은 사람들이 이걸 제대로 못 쓰고 있대. 그냥 Cursor한테 "Shad CN으로 만들어줘!" 하고 맡기면, 컴포넌트가 망가지거나 스타일이 이상하게 나올 때가 많다고 해.

그래서 오늘은 Shad CN 컴포넌트를 제대로 사용하고, 다른 사이트랑 똑같이 보이지 않게 나만의 스타일을 입히는 방법을 알려줄게.

MCP 서버: Shad CN UI 개발의 신세계!

이 모든 걸 제대로 하려면 올바른 작업 방식이 필요해. 내가 찾은 MCP 서버라는 게 있는데, 이게 내 개발 방식을 완전히 바꿔놨어. 이 MCP 서버는 Shad CN UI를 위해 특별히 만들어졌거든.

MCP 서버를 쓰면 컴포넌트가 어떻게 작동하는지 제대로 이해하고, 올바른 방식으로 구현할 수 있게 도와줘. 처음부터 모든 게 제대로 돌아가게 해주는 거지.

특히 이 MCP 서버 안에 있는 get component demo 도구가 진짜 대박이야. 이걸 쓰면 컴포넌트가 어떻게 사용되는지 예시 코드를 바로 볼 수 있어서, 실수할 확률이 거의 없어져. 버튼처럼 간단한 건 괜찮지만, 'dialog' 같은 복잡한 컴포넌트는 이 도구가 없으면 구현하기 정말 어려울 거야.

MCP 서버 사용법 (간단 정리)

  1. GitHub Personal Access Token: 이걸 사용하면 시간당 5,000개의 요청을 할 수 있어. 꼭 발급받아서 사용하는 걸 추천해! (발급 방법도 알려줄 거야.)
  2. MCP 서버 설정: Cursor에 MCP 서버를 추가하고 설정하면 돼.
  3. 규칙 파일 (Rule Files): AI한테 어떻게 일해야 할지 규칙을 정해주는 거야.
    • Shad CN UI 작업할 땐 무조건 MCP 서버 사용!
    • 계획 단계에서는 기존 컴포넌트나 '블록(Blocks)'을 우선 사용! (블록은 여러 컴포넌트가 합쳐진 거야. 예를 들어 로그인 화면 같은 거!)
    • 구현할 때는 무조건 demo 도구를 먼저 사용해서 올바른 사용법을 확인!

MCP 서버로 UI 만들기 (실제 워크플로우)

  1. 아이디어 구체화: 먼저 Claude 같은 AI한테 웹사이트 아이디어를 주고, 전체적인 구현 계획을 짜달라고 해. 이때는 코드 없이 UI/UX만 생각하는 거야.
  2. 컴포넌트 및 블록 확인: MCP 서버의 list components, get component, get component demo 도구를 써서 필요한 컴포넌트와 블록을 찾고, 어떻게 사용하는지 확인해.
  3. 구현 계획 세우기: AI한테 MCP 서버와 규칙 파일을 이용해서, 어떤 컴포넌트가 어디에 들어갈지 구체적인 UI 구현 계획을 짜달라고 해. 이때도 코드는 빼고 컴포넌트 이름만 명확하게!
  4. 실제 구현: 계획이 다 짜졌으면, Cursor한테 이 계획대로 Shad CN 앱을 만들어달라고 하면 돼. MCP 서버가 알아서 컴포넌트를 하나씩 추가하고, 규칙대로 작동하면서 오류 없이 멋진 UI를 완성해 줄 거야.

이런 식으로 MCP 서버를 사용하면, 처음부터 완벽하게 UI를 만들 수 있어서 나중에 수정할 일이 거의 없어.

나만의 디자인 만들기: Tweak CN 활용!

Shad CN UI는 기본적으로 비슷하게 생겼다는 단점이 있잖아? 이걸 해결해 줄 사이트가 바로 Tweak CN이야!

  1. Tweak CN 접속: 이 사이트에 들어가면 Shad CN 컴포넌트의 디자인을 마음대로 바꿀 수 있어.
  2. 디자인 커스터마이징: 색깔, 크기 등등 원하는 대로 디자인을 바꿔봐.
  3. 코드 복사 및 적용: 마음에 드는 디자인을 찾으면 코드를 복사해서 Cursor에 적용하면 돼. Cursor가 자동으로 적용 못 할 수도 있으니, 그럴 땐 복사한 코드를 직접 수정해서 적용하면 나만의 독특한 디자인을 완성할 수 있어!

요약하자면

  • MCP 서버: Shad CN UI를 제대로 사용하고 오류 없이 개발하게 도와주는 필수 도구!
  • Tweak CN: 나만의 개성 있는 디자인을 만들 수 있게 도와주는 사이트!

이 두 가지를 잘 활용하면, 다른 사이트와는 차별화된 멋진 웹사이트를 만들 수 있을 거야!

최근 검색 기록