Claude Code를 사용하여 아름다운 웹사이트를 만드는 5가지 방법

하이라이트

• ShadCN UI 라이브러리를 사용하여 아름답고 커스터마이징 가능한 React/Next.js 컴포넌트를 빠르게 구현할 수 있습니다

• Google Stitch는 AI를 활용한 디자인 도구로, Gemini 3 Pro를 지원하며 프로토타입 생성이 가능합니다

• Coolers를 통해 색상 팔레트를 체계적으로 선택하고 조정하여 웹사이트의 색감을 결정할 수 있습니다

• Claude의 새로운 백그라운드 서브 에이전트 기능으로 여러 작업을 동시에 처리하여 작업 효율을 높일 수 있습니다

• Drawbridge 도구는 Claude Code 통합으로 UI의 작은 문제를 더 정확하고 효율적으로 해결할 수 있게 합니다

• Superhero와 같은 디자인 갤러리에서 영감을 얻어 자신의 웹사이트에 맞게 디자인을 복제할 수 있습니다

타임라인

1. 00:00 - 00:20

   소개 및 AI 디자인 도구의 발전

   영상은 AI를 활용한 디자인 도구 소개 시리즈의 에피소드로, Opus 4.5와 Gemini 3 Pro 같은 최신 AI 모델들이 한 번의 프롬프트로 디자인하는 과정을 획기적으로 개선했음을 설명합니다. 스피커는 단순히 AI만으로는 부족하며, 멋진 디자인을 만드는 데 도움이 되는 다양한 도구들과 워크플로우가 필요함을 강조합니다. 이 영상에서는 그러한 도구들과 효과적인 워크플로우를 보여줄 것임을 예고하고 있습니다.

2. 00:21 - 00:54

   ShadCN UI 라이브러리 소개 및 프리셋 활용

   ShadCN은 React와 Next.js 프로젝트에 완벽하게 통합되는 아름답고 완전히 커스터마이징 가능한 접근성 있는 UI 컴포넌트 라이브러리입니다. 새로운 기능을 통해 프로젝트에 임포트할 프리셋을 미리 만들 수 있으며, 샘플 컴포넌트와 프리셋을 비교하면서 원하는 스타일을 선택할 수 있습니다. 선택 후 프로젝트 생성을 클릭하고 프레임워크를 선택한 다음 설치 명령어를 복사하면 프리셋이 적용된 새 프로젝트가 바로 설치됩니다. 이는 프로젝트 초기 구성을 빠르고 효율적으로 처리할 수 있는 방법을 제공합니다.

3. 00:54 - 01:34

   Google Stitch를 활용한 디자인 준비 및 색상 팔레트

   코딩 에이전트에 보내기 전에 미리 웹사이트 디자인을 준비하는 것이 중요하며, 이를 위해 Google Stitch가 최고의 도구입니다. 최근 Gemini 3 Pro 싱고 모드와 Nano Banana를 지원하여 생성된 이미지로 디자인을 향상시킬 수 있습니다. 디자인 시작 전 색상 테마를 정하는 것이 가장 중요한 단계이며, Coolers라는 색상 팔레트 생성 도구를 사용하여 여러 색상을 나란히 놓고 조합을 분석할 수 있습니다. 마음에 드는 색상을 찾을 때까지 계속 조정한 후 자신에게 맞는 형식으로 색상 팔레트를 내보낼 수 있습니다.

4. 01:34 - 02:00

   Google Stitch의 UI 디자인 및 프로토타입 기능

   Google Stitch로 만든 UI는 매우 미니멀하며 메인 색상과 강조 색상 사이의 균형이 명확합니다. Google Stitch의 새로운 기능 중 하나는 디자인의 모든 화면을 선택해서 테스트 목적으로 프로토타입을 생성할 수 있다는 것입니다. 프로토타입은 웹 앱이든 모바일 앱이든 프로젝트가 실제로 어떻게 작동하는지 보여주는 데모로, 네비게이션 흐름을 자동으로 조정하고 클릭 가능한 영역을 찾아내며 디자인에서 바로 완전히 작동하는 프로토타입을 만들어줍니다.

5. 02:00 - 02:43

   디자인 영감 출처 및 Google Stitch 내보내기 기능

   AI가 혼자서도 꽤 좋은 디자인을 만들 수 있지만, 히어로 섹션, 네비게이션 바, 푸터, 커스텀 404 페이지 등을 포함한 여러 갤러리에서 창의적인 영감의 원천을 찾을 수 있습니다. 스피커는 Superhero에서 히어로 섹션 디자인 영감을 얻고, 그 페이지의 스크린샷을 Stitch에 제공해서 자신의 웹사이트에 맞게 디자인을 복제했습니다. Google Stitch는 디자인을 내보내는 방식을 개선했으며, AI Studio, 코딩 에이전트 Jules로 직접 내보내거나 코드를 클립보드에 복사할 수 있지만, ZIP 파일로 내보내서 Claude에 임포트하는 방법도 있습니다.

6. 02:43 - 03:24

   Claude 백그라운드 서브 에이전트 및 Puppeteer MCP 활용

   Claude에서 서브 에이전트를 사용할 때 다른 작업을 처리하느라 많은 시간을 낭비하고 상당한 지연이 발생했던 문제를 해결하기 위해, Claude는 서브 에이전트가 백그라운드에서 실행될 수 있는 기능을 추가했습니다. 스피커는 브라우저 테스트를 위해 Puppeteer MCP를 설정했으며, 이를 통해 Claude가 브라우저 접근으로 UI를 테스트할 수 있습니다. 브라우저 테스트에는 시간이 오래 걸리므로, 이 작업을 백그라운드에서 실행하면서 동시에 에이전트에게 다른 작업을 할당할 수 있어 여러 에이전트가 동시에 다양한 작업을 처리할 수 있습니다. 다만 이 에이전트들은 토큰을 사용하므로 토큰 사용량과 비용을 항상 모니터링해야 합니다.

7. 03:24 - 04:11

   Drawbridge 도구와 Claude Code 통합

   Claude는 아무리 여러 번 요청해도 작은 UI 문제를 수정하기 어려운데, 이를 해결하기 위해 Drawbridge라는 멋진 도구가 나왔습니다. 예전에는 Cursor에서만 작동했지만, 이제 Claude Code 통합과 다른 훌륭한 업데이트들이 추가되었습니다. 이전 영상 이후로 섹션을 더 정확하게 선택할 수 있게 해주는 기능들이 개선되어서 비기술 사용자도 문제를 더 쉽게 설명할 수 있게 되었습니다. 또한 스크린샷 문제도 해결했으며, Claude Code용 슬래시 명령어를 자동으로 설정해서 더 이상 수동으로 할 필요가 없어졌습니다.

8. 04:11 - 05:02

   AI 워크플로우 구현과 기술 파트너 서비스

   스피커는 수백만 명에게 AI로 제품을 만드는 방법을 가르친 후, 자신들도 이러한 워크플로우를 직접 구현해보기 시작했으며 예전보다 훨씬 빠르게 더 나은 제품을 만들 수 있다는 것을 알게 되었습니다. Autometer는 앱이든 웹사이트든 사용자의 아이디어를 현실로 만드는 것을 도와드립니다. 좋은 아이디어는 있지만 개발팀이 없다고 생각하는 사람들을 위해, Autometer를 기술 파트너로 생각하고 수백만 명에게 가르친 같은 워크플로우를 프로젝트에 직접 적용해서 개념을 실제로 작동하는 솔루션으로 바꿔드립니다. 개발팀을 고용하고 관리하는 번거로움도 없으며, 아이디어를 현실로 가속화할 준비가 되었다면 hello@autometer.dev로 연락하면 됩니다.