AI가 만든 UI 문제? Shadcn UI Agent로 완벽 해결하는 법!

게시일: 2025년 07월 25일 작성자: 자청의 유튜브 추출기

AI로 멋진 웹사이트 만들기: Chassian UI MCP 서버 활용법

AI한테 웹사이트 만들어달라고 했는데 자꾸 이상하게 나오거나 깨져서 속상했지? 걱정 마! 이 영상에서 그 이유와 해결 방법을 알려줄게.

왜 AI가 UI를 잘 못 만들까?

대부분의 AI는 UI를 제대로 만들려면 필요한 맥락(Context)이 부족해서 그래. 그래서 이 영상에서는 Chassian UI MCP 서버라는 걸 이용해서 AI한테 필요한 맥락을 팍팍 주는 방법을 알려줄 거야.

Chassian UI MCP 서버, 어떻게 쓰지?

준비물: Chassian UI MCP 서버가 필요해. 설치 방법은 영상 아래 설명에 자세히 나와 있어.
- GitHub API 토큰: 이게 있으면 AI가 더 많은 요청을 할 수 있어. (없어도 되지만 있으면 좋음!)
  - github.com/settings/tokens 가서 새 토큰 만들면 돼.
  - 만든 토큰은 환경 변수로 설정해두면 편해.
- AI 코드 편집기: VS Code 같은 편집기에서 Chassian UI MCP 서버를 추가하고 GitHub API 키도 연결해주면 돼.
테스트: MCP 서버가 잘 작동하는지 테스트해볼 수 있어. AI한테 특정 컴포넌트 코드를 만들어달라고 요청하면 돼.
도구 살펴보기: MCP 서버에는 여러 가지 유용한 도구들이 있어.
- 컴포넌트 가져오기: 필요한 UI 부품들을 가져올 수 있어.
- 컴포넌트 사용 예시: 컴포넌트를 어떻게 쓰는지 예시를 볼 수 있어.
- 모든 컴포넌트 목록: 어떤 컴포넌트들이 있는지 한눈에 볼 수 있어.
- 블록 가져오기: 여러 컴포넌트가 묶여 있는 블록도 가져올 수 있어.
규칙 설정하기: AI가 UI를 만들 때 지켜야 할 규칙을 정해주는 게 중요해.
- UI 수정/생성 시: 항상 Chassian UI MCP 서버를 사용하도록 규칙을 정해.
- 계획 규칙: UI를 계획할 때는 목록 컴포넌트나 블록 컴포넌트를 먼저 확인하고, 사용자 요청을 분석해서 필요한 UI 요소를 매핑하도록 해.
- 구현 규칙: UI를 구현할 때는 먼저 데모를 보고, 필요한 컴포넌트나 블록을 찾아서 구현하도록 해.
UX 구조 계획 만들기: 만들고 싶은 웹사이트의 전체적인 흐름과 페이지 구성을 마크다운 파일로 미리 만들어두는 거야. (예: 유튜브 스폰서십 관리 보드)
구현 계획 설계: 만들어둔 UX 구조 계획을 AI한테 보여주고, 어떤 Chassian 컴포넌트를 어디에 사용할지, 이름은 어떻게 지을지 등을 포함한 구현 계획을 설계하도록 요청해.
AI가 코딩 시작! 설계된 구현 계획을 바탕으로 AI가 웹사이트를 자동으로 만들어줘.

결과는?

이렇게 하면 AI가 멋진 UI를 갖춘 완벽하게 작동하는 웹 애플리케이션을 자동으로 만들어낼 수 있어! 짧은 시간 안에 전문적인 웹 앱을 만들 수 있는 강력한 방법이지.

더 알아보기

Chassian UI MCP 서버: 영상 설명에 링크가 있어.
Chassian MCP 서버 규칙: Discord 서버의 코드 공유 채널에서 다운로드할 수 있어.

이 영상이 도움이 되었다면 '좋아요'와 '구독' 부탁해! 다음 영상에서 또 만나자!

AI 채팅