# 클로드 코드 디자인 스킬로 홈페이지 개선하기

기존 홈페이지에 Scroll Craft로 구성과 스크롤 연출을 더하고, Impeccable과 웹·React 점검 스킬로 다듬는 순서입니다. 영상에 나온 스킬 링크와 따라 할 때 쓸 짧은 요청문을 모았습니다.

대상: AI로 홈페이지를 만들었지만 디자인이나 스크롤이 아쉬운 분. 기존 홈페이지 프로젝트를 Claude Code에서 열고 따라 합니다.
Canonical: https://www.viberick.com/youtube-guides/claude-code-design-skills
Video: https://www.youtube.com/watch?v=ha0JNDtbWP0
Author: Jaeho Shin / 신재호 (VibeRick)
Verified: 2026-11-09

## 준비물

- Claude Code를 사용할 수 있는 계정과 실행 환경
- 기존 홈페이지의 코드가 들어 있는 작업 폴더와 제품 화면·사진 등 실제 자료
- 이미지·영상 생성 도구를 연결할 경우 본인의 BAZE 계정과 API 키

붙여넣는 곳: Claude Code에서 내 홈페이지 프로젝트를 연 뒤 대화 입력창에 붙여넣으세요. 아래 문구는 영상의 실제 요청과 설명을 따라 하기 쉽게 정리한 예시입니다. [내 홈페이지 URL]은 내 주소로 바꿔주세요.

## 영상 챕터

- 00:00 홈페이지 디자인, 무엇이 달라질까?
- 02:49 Scroll Craft 설치와 스킬의 역할
- 04:23 BAZE로 이미지·영상 도구 연결
- 07:24 클로드 코드에 홈페이지 개선 요청
- 08:58 결과 확인과 구체적인 피드백
- 10:28 Impeccable·웹·React 점검 스킬
- 12:01 스킬로 진단하고 디자인 다듬기
- 14:05 최종 전후 비교와 마무리

## 1. Scroll Craft 설치

영상 02:49 · Scroll Craft는 방문자가 무엇을 어떤 순서로 보게 할지, 스크롤할 때 화면이 어떻게 바뀔지 설계하는 스킬입니다. 영상에서는 GitHub 링크를 주고 설치를 요청합니다. 이미 설치돼 있으면 확인만 하면 됩니다.

```text
https://github.com/nateherkai/scroll-craft

이 스킬을 Claude Code에서 사용할 수 있게 설치해줘.
```

## 2. BAZE로 이미지·영상 도구 연결

영상 04:23 · BAZE 앱에서 본인 계정의 API Gateway로 들어가 키를 생성하고, 앱이 제공하는 연결 요청문을 Claude Code에 전달합니다. 영상에서는 “이거 세팅해줘. 이걸로 이미지·영상 에셋 만들 예정이야”라고 요청합니다.

- 앱: https://app.baze.co/
- 키는 본인 환경에서만 사용하고 저장소·공유 문서·촬영 화면에 노출하지 마세요.
- 영상의 가입 체험 크레딧은 촬영 당시 안내입니다. 현재 지급 조건과 모델별 사용량은 앱에서 확인하세요.

## 3. 기존 홈페이지 개선 요청

영상 07:24 · 설치된 Scroll Craft를 선택하고 기존 홈페이지 개선을 요청합니다. 영상의 대상은 VibeRick입니다. 주소만 보는 것과 실제 코드를 수정하는 것은 다르므로, 내 홈페이지 작업 폴더를 연 상태에서 진행하세요.

```text
/scroll-craft
내 홈페이지 [내 홈페이지 URL] 개선해볼 수 있을까?
```

## 4. 질문에 답하거나 방향 맡기기

영상 08:08 · 영상에서는 스킬이 분위기·스크롤 순서·강약·기억에 남길 장면 등을 질문합니다. 직접 답해도 되고, 현재 홈페이지와 실제 자료를 보고 판단하게 맡겨도 됩니다.

```text
너가 알아서 판단해주면 안 될까?
```

## 5. 결과를 직접 보고 피드백

영상 08:58 · 브라우저에서 실제로 스크롤해 봅니다. 마음에 들지 않는 부분은 화면을 캡처해서 전달하고, 작은 글자나 로고처럼 어디가 불편한지 구체적으로 말합니다. 영상에서는 이런 피드백을 여러 번 이어갑니다.

- 스크롤하면서 화면이 의도한 순서로 바뀌는지 확인
- 글자·버튼·로고가 읽히는지 확인
- 모바일 화면에서도 내용과 조작이 유지되는지 확인

## 6. 디자인·웹 사용성 점검 스킬 설치

영상 10:28 · Impeccable은 구성·가독성·간격 같은 디자인을 살피고, Web Design Guidelines는 웹에서 쓰기 편한지 점검합니다. React Best Practices는 React·Next.js로 만든 사이트의 코드와 성능을 점검할 때 씁니다. 뒤의 두 스킬은 Next.js를 만드는 회사 Vercel이 공개한 저장소에 있습니다.

```text
https://github.com/pbakaus/impeccable
https://github.com/vercel-labs/agent-skills

Impeccable, web-design-guidelines, vercel-react-best-practices를 Claude Code에서 사용할 수 있게 설치해줘.
```

## 7. 세 스킬로 진단하고 디자인 개선

영상 12:01 · 영상에서는 세 스킬을 함께 지정하고 홈페이지 진단과 개선을 요청합니다. 결과를 받은 뒤에도 스크롤·글자·로고를 직접 보고 피드백을 이어갑니다. React 점검은 React·Next.js 프로젝트일 때 적용합니다.

```text
/web-design-guidelines /impeccable /vercel-react-best-practices
이 세 개 스킬을 이용해서 내 홈페이지 진단하고 디자인 개선해줘.
```

## 8. 전후 비교로 마무리

영상 14:05 · 기존 화면과 개선한 화면을 나란히 놓고 스크롤 흐름과 가독성을 비교합니다. 디자인이 마음에 들면 실제 홈페이지에 적용할 변경을 확인하세요. 생성된 로컬 시안이 곧 운영 사이트의 배포 완료를 뜻하지는 않습니다.

## 자주 막히는 곳

**스킬을 모두 처음부터 설치해야 하나요?**
영상 순서대로 Scroll Craft를 먼저 쓰고, 큰 구성과 스크롤 결과를 본 뒤 Impeccable과 웹·React 점검 스킬을 추가하면 됩니다.

**질문에 일일이 답하기 어려우면 어떻게 하나요?**
현재 홈페이지와 실제 자료를 보고 판단해 달라고 맡길 수 있습니다. 영상에서도 그렇게 진행한 뒤 결과를 보면서 구체적인 피드백을 줬습니다.

**React가 아닌 홈페이지에도 세 스킬을 모두 쓰나요?**
React Best Practices는 React·Next.js 프로젝트에 해당합니다. 다른 방식으로 만든 사이트에서는 해당하지 않는 코드 권고를 그대로 적용하지 않고 디자인과 웹 사용성을 점검하세요.

**BAZE는 항상 무료인가요?**
영상은 가입 체험 크레딧으로 시작하는 방법도 소개합니다. 상시 무료 요금제나 무제한 생성을 뜻하지 않으며, 현재 혜택·요금·모델별 소모량은 앱에서 확인해야 합니다.

## 자료

- [VibeRick 현재 홈페이지](https://www.viberick.com/) · 영상 촬영 이후에도 수정되는 실제 운영 사이트입니다.
- [Scroll Craft](https://github.com/nateherkai/scroll-craft) · 홈페이지 구성·스크롤 연출
- [Impeccable](https://github.com/pbakaus/impeccable) · 디자인 검토·디테일 개선
- [Vercel Agent Skills](https://github.com/vercel-labs/agent-skills) · web-design-guidelines · vercel-react-best-practices
- [BAZE](https://app.baze.co/) · 이미지·영상 도구 연결
- [홈페이지 만들기 첫 영상](https://youtu.be/ObxjRToDAa0)
- [첫 영상의 복사 요청문](https://www.viberick.com/youtube-guides/claude-code-homepage)

14분55초 편집본 기준. “10배”는 디자인 변화에 대한 영상의 강조 표현이며 측정한 성능·전환율 수치가 아닙니다. 현재 공개 사이트와 도구 화면·요금은 촬영 당시와 다를 수 있습니다.