I Built The Ultimate Claude Website Design Skill (steal this)

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Scrollcraft는 Claude가 인터뷰로 브랜드의 감정·목표·사용자 여정을 파악한 뒤 자산 생성, 스크롤 연출, 시각 검증, 피드백 수정을 수행하게 해 독창적인 프리미엄 웹사이트를 만드는 디자인 스킬이다.

📌 핵심 요점

1. Scrollcraft는 스크롤을 페이지의 숫자, 이미지, 지도, 장면 전환과 연결해 방문자가 탐색을 직접 통제하는 듯한 경험을 설계한다.
2. 정해진 템플릿을 반복하는 대신 사이트의 목적, 원하는 분위기, 방문자가 믿어야 할 메시지, 보유 자산과 대표 연출을 인터뷰로 수집한다.
3. 기존 카피·브랜딩·색상은 유지하면서 필요하면 이미지와 영상을 생성하고, 인터랙션과 편집 디자인을 더해 기존 사이트를 재구성한다.
4. Claude는 구현 후 사이트의 스크린샷과 주요 프레임을 살펴보는 검증 패스를 수행하며, 사용자는 실제 결과를 보고 속도·링크·문구·섹션을 구체적으로 수정할 수 있다.
5. AI Automation Society 사례에서는 밋밋한 기존 사이트를 출처가 스크롤에 따라 해제되는 편집형 페이지로 바꾸고, 후속 피드백으로 히어로·애니메이션 속도·링크·불필요한 섹션을 개선했다.

🧩 배경과 문제 정의

기존 Claude 제작 사이트는 기본적인 브랜딩과 일부 움직임은 갖췄지만 방문자를 계속 스크롤하게 만들 만큼 독특하거나 몰입적이지 않았다. 제작자는 이를 해결하기 위해 스크롤과 페이지 변화를 결합하고, 간격·타이포그래피·분위기·취향까지 함께 다루는 Scrollcraft 스킬을 만들었다.

스킬의 목표는 하나의 화려한 템플릿을 반복하는 것이 아니다. 사이트의 사업 목적, 방문자 여정, 감정, 보유 자산과 최종 메시지를 먼저 질문하고, 그 답을 바탕으로 브랜드마다 다른 프리미엄 인터페이스를 생성하는 것이다.

영상은 AI Automation Society의 기존 사이트를 실제로 재설계하는 과정을 통해 인터뷰, 자산 생성, 구현, 스크린샷 검증, 사용자 피드백과 재수정으로 이어지는 전체 작업 흐름을 보여준다.

🕒 시간순 섹션별 상세정리

1. Scrollcraft의 목표와 차별점

• 제작자는 기존 카피·브랜딩·분위기를 유지하면서도 방문자가 다음 장면을 보고 싶게 만드는 인터랙티브 스크롤 사이트를 구현한다고 보여준다. [00:48]
• 스크롤을 화면 변화와 연결하고 간격, 타이포그래피, 감각과 취향까지 설계하되 하나의 고정 템플릿을 반복하지 않는 것이 핵심이다. [01:17]
• 사이트 인터뷰는 방문자의 첫인상과 여정을 정하며, 짧은 영상처럼 초반에 사용자를 붙잡아야 한다는 관점이 드러난다. [01:40]

2. 여러 사례와 설치 방식

• 제품, 여행사, 개인 브랜드 사례는 색상과 카피의 일관성을 유지하면서도 서로 다른 스크롤 방식과 분위기를 보여준다. [02:24]
• 스킬은 무료 커뮤니티에서 받을 수 있고, 플러그인으로 설치하거나 폴더와 파일을 Claude Code 프로젝트에 직접 넣을 수 있다고 보여준다. [03:03]
• 명령에서 Scrollcraft를 선택하면 다양한 사업을 위한 프리미엄 스크롤 기반 랜딩페이지 제작 절차가 시작된다. [03:24]

3. AI Automation Society 재설계 착수

• 기존 사이트는 지구본 애니메이션과 몇 장의 사진을 갖췄지만 특별히 몰입적이지 않아 재설계 대상으로 선택된다. [03:44]
• 제작자는 과도한 AI 생성 세계관보다 신뢰감 있고 프리미엄하며 편집 디자인에 가까운 분위기와 절제된 애니메이션을 요청한다. [04:31]
• 스킬은 기존 사이트, 브랜드 자산과 이전 제작물을 바탕으로 인터뷰를 시작하며, 사업 자산이 없어도 생성 자산으로 실험할 수 있다고 안내한다. [04:46]

4. 자산 생성과 디자인 인터뷰

• 외부 이미지·영상 모델 서비스의 API 키를 환경 변수에 넣으면 스킬이 필요한 이미지와 영상을 만들고 연결할 수 있다고 보여준다. [05:26]
• 인터뷰는 방문자가 처음 볼 증거와 이후 순서, 마지막에 믿어야 할 한 문장, 기존 자산과 새로 생성할 자산을 질문한다. [06:23]
• 제작자는 브랜드 색상에 맞는 미니멀한 저다각형 교육 장면과 모든 주장에 근거가 붙는 대표 연출을 선택한다. [07:14]

5. 스크롤 철학과 자동 검증

• 사용자가 마우스로 전진과 후진을 통제하고 이미지, 숫자와 장면 변화가 스크롤에 동기화되는 것이 중요한 설계 원칙으로 드러난다. [08:06]
• 제작자는 AI에 기능만 지시하기보다 사용자가 느낄 감정과 동기를 설명하면 여정 설계가 더 정교해진다고 드러낸다. [08:37]
• 구현 중 Claude는 사이트의 스크린샷과 주요 프레임을 조사해 이상 여부를 확인하는 검증 패스를 수행한다. [09:11]

6. 약 30분 뒤 나온 첫 결과

• 첫 결과는 보고서 같은 전문적 편집 분위기와 최신 수치를 보여주며, 스크롤할수록 아홉 개의 출처가 차례로 해제되는 장치를 포함한다. [10:06]
• 지도와 회원 수가 변하는 애니메이션, 실제 구성원의 후기, 외부에서 찾은 것으로 보이는 리더보드 이미지와 가로 스크롤이 구현된다. [11:04]
• 행사 사진의 캡션이 잘못됐고 일부 문구와 링크도 손봐야 했지만, 기존 브랜드 감각을 유지하면서 이전과 매우 다른 사이트가 완성된다. [12:15]

7. 구체적 피드백과 두 번째 버전

• 제작자는 히어로를 더 프리미엄하게 만들고 지도 애니메이션을 늦추며, 밋밋한 섹션에 깊이와 스크롤 연출을 더하라고 요청한다. [13:33]
• 인증 링크를 실제 대기 명단으로 교체하고 마음에 들지 않는 출처 등록 섹션은 제거하도록 지시한다. [14:10]
• 두 번째 버전은 잡지 표지형 히어로, 느려진 지도, 동적인 카드, 수정된 인증 문구·링크와 제거된 등록 섹션을 반영한다. [15:40]

8. 독창성 평가와 최종 안내

• 제작자는 디자인 원칙은 공유하지만 감정, 여정과 사업 목표에 따라 전에 없던 결과를 내는 점을 스킬의 핵심 장점으로 평가한다. [16:00]
• 추가 수정에서는 타자기처럼 등장하는 텍스트와 화면별 얼굴 애니메이션이 적용됐지만, 새로고침 때 작은 버그도 확인된다. [16:20]
• 영상은 무료 커뮤니티와 강의실 자료에서 스킬을 받을 수 있다고 다시 안내하며 마무리된다. [16:42]

🧾 결론

• 이 스킬의 핵심 가치는 화려한 애니메이션 자체가 아니라 스크롤을 브랜드의 이야기와 방문자의 판단 순서에 연결하는 데 있다.
• 디자인 품질은 최초 프롬프트 한 줄보다 인터뷰에서 감정, 여정, 최종 신념, 자산 범위와 대표 연출을 얼마나 명확히 정의하는지에 크게 좌우된다.
• 첫 결과도 캡션 오류, 빠른 애니메이션, 밋밋한 구간과 잘못된 링크를 포함할 수 있으므로 실제 브라우저 검토와 반복 수정이 필수다.
• 템플릿을 복제하지 않고 디자인 원칙을 적용하기 때문에 같은 스킬로도 제품, 여행사, 개인 브랜드, 커뮤니티처럼 서로 다른 사이트를 만들 수 있다.

📈 투자·시사 포인트

• 생성형 AI 웹 제작의 차별화 지점이 단순 코드 생성에서 요구사항 인터뷰, 자산 조달, 인터랙션 설계, 시각 검증을 묶은 작업 체계로 이동하고 있다.
• 브랜드 자산과 실시간 수치, 출처, 사용자 여정을 함께 다루는 에이전트형 도구는 소규모 팀의 고급 랜딩페이지 제작 비용과 반복 시간을 줄일 가능성이 있다.
• 이미지·영상 모델을 통합 호출하는 서비스와 Claude Code 같은 실행형 개발 환경의 결합은 웹 제작 생태계에서 모델 자체보다 워크플로와 검증 하네스의 중요성을 키운다.
• 반대로 출처가 불분명한 이미지, 잘못된 캡션, 과도한 애니메이션과 링크 오류는 자동 제작물의 신뢰를 떨어뜨리므로 인간 검수와 provenance 관리가 경쟁력이 될 수 있다.

⚠️ 불확실하거나 확인이 필요한 부분

• 영상은 스킬을 무료로 제공한다고 설명하지만, 배포 파일의 라이선스, 상업적 사용 조건, 유지보수 범위는 제시하지 않는다.
• 외부에서 찾아온 리더보드 이미지와 실시간 수치의 정확한 출처·수집 방식·사용 권한은 영상만으로 확인할 수 없다.
• 첫 결과에서 행사 사진의 캡션이 잘못 붙었고 일부 문구와 링크도 수정이 필요했으므로, 자동 검증이 의미·사실·권리 문제까지 완전히 잡는다고 볼 수 없다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 제작 전에 방문자가 처음 볼 증거, 이어지는 이야기 순서, 마지막에 믿어야 할 한 문장을 문서화한다.
• 기존 카피·브랜드 자산·사진·링크를 목록화하고, 생성할 자산과 그대로 사용할 자산을 구분한다.
• 원하는 감정의 강약, 편집형 또는 역동적 분위기, 대표 스크롤 연출을 인터뷰 답변에 구체적으로 적는다.
• 구현 후 히어로의 첫인상, 스크롤 속도, 링크 목적지, 캡션, 수치와 출처를 실제 브라우저에서 하나씩 확인한다.

❓ 열린 질문

• Scrollcraft의 스크린샷 검증은 레이아웃 결함 외에 잘못된 캡션, 출처 불일치와 접근성 문제를 어느 범위까지 판별할 수 있는가?
• 이미지·영상 생성과 약 30분의 구현 과정에 실제로 필요한 모델 호출 비용과 토큰 사용량은 어느 정도인가?
• 실시간 수치와 외부 이미지를 가져오는 기능은 어떤 검색 경로와 출처 검증 규칙을 사용하며, 사용자가 허용 범위를 제한할 수 있는가?