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

하이라이트

• Design OS는 GitHub에서 무료로 제공되는 오픈소스 기획 툴로, 프로젝트 아이디어를 체계적인 기술 문서로 변환해주며 Claude Code, Cursor, Copilot 등과 호환됩니다

• VSCOM은 프롬프트와 스케치로 전문적인 제품 비주얼을 생성하는 유료 툴이며, 무료 대안으로는 구글의 실험적 프로젝트인 Mixed Board가 있습니다

• GoFullPage 확장 프로그램으로 경쟁사 웹사이트를 캡처하고, 특수 프롬프트를 통해 Claude가 UI 요소와 스타일을 추출하여 웹사이트를 생성할 수 있습니다

• Magic Animator는 Figma 플러그인으로 로고부터 UI까지 애니메이션을 자동 생성하며, 무료 대안으로 Lottie files 플러그인을 사용할 수 있습니다

• HTML to Design 플러그인은 웹사이트를 Figma 디자인으로 변환하고, MCP를 통해 AI 에이전트와 직접 연동하여 디자인을 생성하고 편집할 수 있습니다

타임라인

1. 00:00 - 00:31

   소개 및 영상 개요

   AI 디자인 툴의 빠른 발전 속에서 실제로 유용한 툴과 소음에 불과한 것을 구분하는 것이 중요하다고 강조합니다. 발표자는 여러 툴을 직접 테스트한 경험을 바탕으로, 디자인 프로세스에 실질적인 영향을 준 툴들을 공유하겠다고 소개합니다. 이 툴들은 기획과 에셋 생성부터 애니메이션과 디자인 변환까지 다양한 범위를 다루며, 일부는 무료이고 일부는 유료이며 무료 대안도 함께 제시됩니다. 영상은 복잡한 아이디어를 체계적인 기술 청사진으로 변환하는 기획 툴부터 시작할 것이라고 예고합니다.

2. 00:31 - 02:10

   첫 번째 툴: Design OS - 프로젝트 기획 자동화

   빌더 메소드에서 만든 Design OS는 GitHub 오픈소스 저장소에서 무료로 접근 가능한 기획 툴로, 소프트웨어 개발 워크플로우를 모방하도록 설계되었습니다. 사용자가 이해관계자 역할을 하면 Design OS가 제품 기획, 디자인 시스템, 요구사항 명세를 처리하며, 기술적 배경 유무와 관계없이 모든 빌더가 사용할 수 있습니다. git clone 명령어로 간단히 설치하면 특수 명령어와 디자인 스킬에 접근할 수 있으며, localhost 3000에서 단계별 지침을 확인할 수 있습니다. 프로젝트 아이디어에 대한 일련의 질문을 통해 계획을 다듬고, AI 모델에 최적화된 방식으로 문서화하며, 완료 후 데이터 모델, 샘플 데이터, TypeScript 타입, CSS 토큰 등을 포함한 완전한 계획을 내보낼 수 있어 디자인 기획 과정을 크게 간소화합니다.

3. 02:10 - 03:44

   두 번째 툴: VSCOM과 Mixed Board - 고품질 비주얼 에셋 생성

   전문적인 제품 비주얼 생성을 위한 VSCOM은 프롬프트와 스케치를 사용하여 멋진 시각적 이미지를 생성하고, 렌더링과 모델링, 애니메이션까지 제공하는 유료 툴입니다. 개별 요소 편집, AI 기반 수정, 4k 품질 다운로드 등의 기능을 제공하며, 무료 티어도 관대한 기능을 제공합니다. 유료 툴을 원하지 않는 사용자를 위해 구글의 실험 단계 프로젝트인 Mixed Board를 무료 대안으로 소개합니다. Mixed Board는 무드보드를 만들고 나노 바나나의 기능을 활용하여 웹사이트용 이미지를 생성할 수 있으며, 프롬프트로 이미지를 수정하고, 샘플 이미지를 업로드하여 일치하는 비주얼을 생성하고, 주석을 달아 모델에게 방향을 제시할 수 있어 제품 컨셉 시각화를 위한 전체 프레젠테이션 구축이 가능합니다.

4. 03:44 - 04:35

   세 번째 방법: 경쟁사 분석 및 스타일 추출로 웹사이트 생성

   경쟁사 웹사이트 분석을 위해 GoFullPage 확장 프로그램을 사용하여 웹사이트의 전체 페이지 스크린샷을 캡처하는 방법을 소개합니다. 캡처한 스크린샷을 UI 요소 추출을 위해 설계된 특수 프롬프트와 함께 Claude에게 제공하면, Claude가 이미지에서 모든 제약 조건, 객체 배치, UI 테마 세부 사항을 식별합니다. 추출된 포괄적인 UI 스타일 세부 정보와 스타일 가이드라인을 다운로드한 에셋과 함께 Claude 코드에 제공합니다. 그러면 Claude가 경쟁사 분석에서 추출한 모든 스타일과 디자인 가이드라인을 적용하여 전체 웹사이트를 자동으로 생성해주므로, 체계적인 경쟁사 분석과 스타일 복제를 통한 효율적인 웹사이트 제작이 가능합니다.

5. 04:35 - 05:36

   네 번째 툴: Magic Animator와 Lottie files - UI 애니메이션 생성

   사용자 유지의 핵심인 모션을 구현하기 위해 Magic Animator라는 AI 기반 Figma 플러그인을 소개합니다. 이 툴은 로고부터 소셜 미디어 게시물, 사용자 인터페이스까지 모든 것을 애니메이션화할 수 있으며, 마이크로 인터랙션을 생성하여 사용자 관심을 유지하는 데 도움을 줍니다. 플러그인을 실행하면 UI 레이어를 자동으로 감지하고 네 가지 애니메이션을 생성하며, 선택한 애니메이션을 Lottie 파일로 내보낼 수 있습니다. Magic Animator는 유료 툴이지만 무료 대안으로 Lottie files Figma 플러그인을 제시하며, 이 역시 여러 형식으로 애니메이션을 내보낼 수 있고, 생성된 애니메이션 파일을 Claude 코드에 제공하면 UI에 애니메이션을 자동으로 적용해줍니다.

6. 05:36 - 06:23

   다섯 번째 툴: HTML to Design - Figma와 AI 에이전트 연동

   HTML to Design 플러그인을 사용하면 HTML 웹사이트를 완전히 편집 가능한 Figma 디자인으로 변환할 수 있으며, 무료 플랜에서는 30일마다 최대 10번의 가져오기가 가능합니다. 이 플러그인의 가장 멋진 기능은 MCP(Model Context Protocol)로 사용할 수 있어 Figma 디자인 내에서 직접 AI 에이전트의 디자인 기능에 접근할 수 있다는 점입니다. Claude나 Cursor와 같은 AI 툴에 연결하고 설정 가이드에 따라 MCP를 구성한 후, 디자인을 생성하고 싶을 때 AI 에이전트에 프롬프트를 입력하고 'Figma로 전송' 또는 'HTML로 전송' 키워드를 사용하면 됩니다. 그러면 디자인이 포함된 JSON이 생성되고 승인 후 Figma로 전송되며, Figma에서 디자인을 확인하고 AI 도구와 협업하여 즉석에서 편집할 수 있어 효율적인 디자인 워크플로우가 가능합니다.

7. 06:23 - 07:10

   마무리 및 Automata 서비스 소개

   발표자는 Automata라는 서비스를 소개하며, 수백만 명에게 AI로 개발하는 방법을 가르친 후 이러한 워크플로우를 직접 구현하여 더 빠르게 더 나은 제품을 만들 수 있게 되었다고 설명합니다. Automata는 앱이든 웹사이트든 아이디어를 현실로 만드는 것을 도와주며, 기술 팀 없이 좋은 아이디어를 가진 사람들을 위한 기술 동반자 역할을 합니다. 개발 팀을 고용하거나 관리하는 번거로움 없이 수백만 명에게 가르쳐온 동일한 워크플로우를 프로젝트에 직접 적용하여 콘셉트를 실제 작동하는 솔루션으로 전환해주며, hello@automata.dev로 연락할 수 있습니다. 영상을 마무리하며 채널 응원을 위한 Super Thanks 버튼 이용을 안내하고 다음 영상에서 만날 것을 약속합니다.