클로드 코드로 디자인 가장 잘 뽑아내는 스킬을 찾았습니다. 무료로 배포합니다. (오픈소스 제공)
📺 원본 영상: 클로드 코드로 디자인 가장 잘 뽑아내는 스킬을 찾았습니다. 무료로 배포합니다. (오픈소스 제공) 🎙️ 채널: 빌더 조쉬 Builder Josh 📅 정리 일자: 2026-03-20 ⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 자료(코드, 슬라이드, 실제 웹사이트 화면 등)는 포함되지 않을 수 있습니다.
개요
Claude Code는 강력한 코드 생성 능력을 갖추고 있지만, 오랫동안 디자인 품질만큼은 아쉬운 평가를 받아왔다. 이 영상은 그 문제를 정면으로 다루며, 해외에서 유행하기 시작한 “Taste Skill” 개념을 한국 환경에 맞게 재구성한 “수파노바 디자인 스킬”을 공개 배포하는 내용을 담고 있다. 강연자는 이 스킬 파일을 Claude Code에 연결하고, Gemini AI로 생성한 배경 영상을 히어로 섹션에 결합하여 스크롤 애니메이션이 적용된 고퀄리티 랜딩 페이지를 완성한 뒤, Netlify Drop을 통해 실제 라이브 웹사이트로 배포하는 전 과정을 시연한다.
AI 슬롭(AI Slop) 문제와 디자인 스킬의 등장
Claude Code를 포함한 AI 코딩 도구들이 웹사이트를 생성할 때 만들어내는 디자인에는 뚜렷한 패턴이 있다. 강연자는 이를 “AI 슬롭(AI Slop)“이라고 부르는데, 보라색 그라데이션에 균형 잡히지 않은 폰트, 어딘가 어색한 레이아웃처럼 “AI가 AI스럽게 만들어낸” 디자인을 일컫는 표현이다. 이 문제를 해결하기 위한 다양한 시도가 최근 커뮤니티 안팎에서 이루어지고 있으며, 그 결과물로 “Taste Skill”이나 “UIUX Pro Max Skill” 같은 Claude Code 전용 스킬 파일들이 등장하기 시작했다. 이러한 스킬 파일은 Claude Code가 코드를 생성할 때 따르는 디자인 지침을 담은 마크다운 문서로, 모델이 특정 스타일과 원칙을 유지하며 작업하도록 유도하는 역할을 한다.
강연자는 여기서 한 발 더 나아가, 해외 중심으로 제작된 Taste Skill을 한국 환경에 맞게 직접 커스터마이징했다. 가장 눈에 띄는 변경 사항은 폰트로, 한국어 웹에서 신뢰도 높은 무료 폰트인 Pretendard를 기본값으로 채택했다. 아이콘 또한 기존보다 시각적으로 더 세련된 Phosphor Icons 라이브러리를 사용하도록 지침을 수정했으며, 전체적인 작성 지침도 한국어 랜딩 페이지에 특화된 형태로 재구성했다. 이렇게 완성된 파일이 “수파노바 디자인 스킬”이며, 영상 본문에 GitHub 링크로 무료 공개되어 있다.
수파노바 디자인 스킬 사용 방법
스킬 파일의 사용 방법은 구조적으로 단순하다. 먼저 GitHub에서 스킬 파일(.md 형식)을 다운로드한 뒤, Claude Code를 실행할 프로젝트 폴더에 해당 파일을 복사해 넣는다. 이후 Claude Code에서 해당 GitHub 주소를 프롬프트에 직접 붙여넣으면, Claude Code가 스킬 파일을 불러와 이후의 모든 생성 작업에 디자인 지침으로 활용하게 된다.
03:02 - 수파노바 디자인 스킬 GitHub 페이지 - 스킬 파일 구성과 다운로드 방법 화면
강연자가 시연한 방식을 따르면, 스킬을 불러온 직후 “인테리어 업체 소개를 위한 웹사이트를 하나 만들어주세요”처럼 비교적 단순한 프롬프트만으로도 스킬이 적용된 결과물이 생성된다. 실제로 초안 단계부터 이미 Pretendard 폰트가 적용되고 레이아웃에 일정한 스타일이 잡혀 있어, 별도의 디자인 지시 없이도 “뭔가 느낌은 있는” 수준의 결과물이 만들어진다고 강연자는 설명했다.
05:01 - Taste Skill 기반으로 생성된 인테리어 업체 웹사이트 초안 - Pretendard 폰트 적용 결과
💡 [영상 참조] [00:55] 강연자는 이 시점에서 AI Slop의 대표적인 예시와 Taste Skill 기반 결과물을 화면에 보여주며 비교 설명합니다. 📺 원본 영상에서 확인하세요.
Gemini AI로 히어로 섹션 배경 영상 생성하기
스킬로 초안 웹사이트를 만든 뒤, 강연자가 집중하는 부분은 상단의 히어로 섹션(Hero Section)이다. 일반적인 AI 생성 웹사이트가 정적인 이미지나 플레이스홀더 이미지를 사용하는 것과 달리, 강연자는 이 영역에 직접 생성한 영상을 삽입함으로써 완성도를 크게 끌어올리는 방법을 제안한다.
이를 위한 도구로 Gemini AI의 영상 생성 기능을 활용한다. 프로세스는 Pinterest에서 원하는 분위기의 레퍼런스 이미지를 찾아 복사하는 것에서 시작된다. 강연자는 저작권 우려에 대해, AI 이미지 생성 서비스—특히 Google처럼 대형 플랫폼의 경우—가 원본 이미지를 그대로 재현하는 것이 아니라 스타일과 분위기를 참조해 새로운 결과물을 만들어내는 방식으로 동작한다고 설명했다.
07:12 - Gemini AI가 생성한 인테리어 배경 영상 결과물 - 카메라가 천천히 이동하는 루핑 영상
레퍼런스 이미지를 Gemini에 붙여넣은 뒤, 프롬프트는 구체적인 모션 방향을 지정하는 것이 중요하다. 강연자가 사용한 프롬프트 패턴은 다음과 같은 형식이다. “이 이미지를 바탕으로 천천히 화면이 돌아가는 동영상을 하나 16:9 비율로 생성해줘”, 혹은 “이 요소가 중심점을 기준으로 천천히 돌아가는 16:9 영상을 하나 만들어줘”처럼 영상의 움직임 방식을 명시적으로 기술하는 것이다. 또한 모델 선택 시 빠른 모델보다는 Pro 모델을 선택할 것을 권장했다.
생성된 영상은 WebP 형식으로 저장하는 것이 핵심이다. WebP는 이미지 포맷으로 알려져 있지만 애니메이션 데이터를 담을 수 있어, 영상 파일을 웹 환경에서 효율적으로 재생하는 데 적합하다. 강연자는 Claude Code에 영상을 전달하면서 “스크롤 애니메이션은 WebP 파일로 변환해서 만들어줘, 부드러운 애니메이션이 될 수 있도록 꼭 신경 써서 해줘”라는 지시를 함께 넣을 것을 강조했다.
스크롤 애니메이션과 이미지 교체
Claude Code에 영상 파일을 드래그 앤 드롭으로 전달하면, 모델은 해당 파일을 WebP로 변환하고 히어로 섹션에 삽입한 뒤 스크롤 방향에 따라 영상이 연동되는 애니메이션을 구현한다. 결과물에서는 사용자가 페이지를 아래로 스크롤할 때 영상이 부드럽게 전환되고, 히어로 섹션의 텍스트도 함께 변화하는 것을 확인할 수 있다.
08:34 - 스크롤 애니메이션이 적용된 완성 웹사이트 - 스크롤 방향에 따라 영상이 전환되는 히어로 섹션
히어로 섹션 외의 나머지 이미지들은 대부분 Unsplash에서 자동으로 가져온 무료 이미지들로 채워진다. 강연자는 이 이미지들을 인테리어 업체에 어울리는 이미지로 교체하는 지시도 함께 포함할 것을 권장했다. 원하는 이미지가 생기면 Claude Code에 추가로 지시해 교체하면 된다.
수파노바 템플릿과 Claude Code 결합
강연자는 직접 개발 중인 SaaS 제품인 수파노바(Supanova)를 추가 레퍼런스 소스로 활용하는 방법도 소개했다. 수파노바는 약 200여 개의 랜딩 페이지 섹션 템플릿을 제공하는 플랫폼으로, 유료 구독 없이도 “HTML 코드 복사” 기능을 통해 특정 섹션의 코드를 클립보드에 복사할 수 있다. 이 코드를 Claude Code에 붙여넣으면, 템플릿의 시각적 스타일과 AI가 생성한 영상 소스를 결합한 새로운 웹사이트를 만들어낼 수 있다.
강연자가 시연한 프롬프트는 단순하다. “이 영상과 코드를 결합한 다크모드 형태의 웹사이트를 하나 만들어줘”라고 입력하면, Claude Code는 붙여넣은 템플릿 코드의 구조와 스타일을 참조하면서 영상을 히어로 섹션에 자연스럽게 통합한 HTML 파일을 생성한다. 수파노바 플랫폼을 유료 구독하지 않아도 이 방식으로 Claude Code와 연계해 활용할 수 있다는 점을 강연자는 명시적으로 언급했다.
12:14 - 수파노바 템플릿 HTML 코드와 생성 영상이 결합된 다크모드 랜딩 페이지 완성본
Netlify Drop을 이용한 즉시 배포
완성된 웹사이트를 외부에서 접근 가능한 URL로 배포하는 방법으로는 Netlify Drop이 제안된다. Netlify Drop은 별도의 회원가입 없이 ZIP 파일을 드래그 앤 드롭하는 것만으로 즉시 라이브 URL을 생성해주는 정적 호스팅 서비스다.
압축 파일 생성 자체도 Claude Code에 위임할 수 있다. 강연자는 “이 HTML 파일과 연관된 파일을 함께 ZIP 파일로 압축해줘, Netlify Drop으로 올릴 거야”라는 프롬프트를 사용했는데, 이 경우 Claude Code가 HTML 파일과 함께 사용된 WebP 이미지 프레임, 기타 에셋 파일 전체를 패키징해 ZIP 파일로 만들어준다. 강연자의 시연 결과 120개의 프레임 이미지가 포함된 패키지가 자동으로 생성되었다.
이렇게 생성된 ZIP 파일을 Google에서 “Netlify Drop”을 검색해 접속한 뒤 업로드하면, 몇 초 이내로 고유한 URL이 발급되어 실제 라이브 웹사이트로 게시된다.
14:25 - Netlify Drop 업로드 완료 후 생성된 라이브 URL - 실제 배포된 웹사이트 화면
전체 워크플로우 정리
강연자가 제시한 Claude Code 고품질 디자인 워크플로우는 크게 네 단계로 요약된다. 첫 번째 단계는 디자인 스킬 준비로, GitHub에서 수파노바 디자인 스킬(또는 원본 Taste Skill)을 다운로드해 프로젝트 폴더에 넣는 것이다. 두 번째 단계는 히어로 영상 생성으로, Pinterest에서 원하는 분위기의 레퍼런스 이미지를 찾아 Gemini AI 영상 생성 기능에 전달하고, 구체적인 움직임 방향을 프롬프트로 지정해 영상을 만드는 것이다. 세 번째 단계는 Claude Code에서 조립으로, 스킬 파일 경로와 생성된 영상 파일을 함께 전달하며 “스크롤 애니메이션이 적용된 랜딩 페이지를 만들어줘”라고 지시하는 것이다. 필요하다면 수파노바 템플릿의 HTML 코드를 함께 붙여넣어 스타일 가이드로 활용할 수도 있다. 네 번째 단계는 Netlify Drop 배포로, 완성된 HTML 파일과 에셋을 ZIP으로 압축한 뒤 Netlify Drop에 업로드해 라이브 URL을 발급받는 것이다.
강연자는 이 전 과정이 Claude Code를 통해 100% 무료로 수행 가능하다는 점을 강조했다. 다만 절차가 처음에는 복잡하게 느껴질 수 있다는 점도 솔직하게 인정했으며, 빠른 결과를 원하는 사용자에게는 수파노바 플랫폼 활용도 하나의 선택지가 될 수 있다고 덧붙였다.
마무리 / 핵심 정리
이 영상이 전달하는 핵심 메시지는 “Claude Code의 디자인 품질 문제는 스킬 파일 하나로 상당 부분 해소될 수 있다”는 것이다. AI Slop이라는 표현이 생겨날 만큼 AI 생성 디자인에 대한 피로감이 누적된 상황에서, 디자인 가이드라인을 담은 스킬 파일을 모델에게 먼저 주입하는 접근법은 근본적인 해결책에 가깝다. 여기에 Gemini AI의 영상 생성 기능과 Netlify Drop의 즉시 배포 기능을 조합하면, 비개발자도 실제 서비스 가능한 수준의 랜딩 페이지를 비용 없이 제작할 수 있다.
강연자가 공개한 수파노바 디자인 스킬은 Taste Skill을 한국어 환경에 최적화한 파생 버전으로, Pretendard 폰트와 Phosphor Icons를 기본 탑재하고 있다. 영상 링크의 본문에서 GitHub 주소를 확인해 직접 다운로드할 수 있으며, 이를 기반으로 자신만의 스킬 파일로 커스터마이징하는 것도 가능하다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | 클로드 코드로 디자인 가장 잘 뽑아내는 스킬을 찾았습니다. 무료로 배포합니다. |
| 채널 | 빌더 조쉬 Builder Josh |
| 리포트 작성 | 2026-03-20 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 정확한 내용은 원본 영상을 참조해 주세요.