Scrollcraft와 Claude Code로 차별화된 스크롤 기반 웹사이트 구축

Scrollcraft란?

Scrollcraft는 일관된 디자인 완성도 기준을 적용하면서 프리미엄 스크롤 기반 웹사이트를 구축하기 위한 Claude Code 스킬입니다. 인터랙션, 시각적 방향성, 타이포그래피, 여백, 색상, 깊이감, 검증을 하나의 프로세스를 구성하는 요소로 다룹니다.

익숙한 히어로, 기능 카드, 추천사, 행동 유도 섹션의 조합을 반복해서 생성하는 대신, Scrollcraft는 먼저 페이지 문법을 선택합니다. 이 문법은 경험이 어떻게 전개되고, 어떻게 탐색되며, 어떤 익숙한 패턴을 피해야 하는지 결정합니다.

이 스킬은 독자가 스크롤할 때 비디오를 프레임 단위로 재생하고, 주장이 전개되는 동안 장면을 고정하며, 가로 레일을 이동하고, 헤드라인을 한 줄씩 조합하고, 페이지의 바탕을 전환하며, 포인터 움직임에 반응할 수 있습니다. 또한 모든 빌드에는 해당 사이트만의 맞춤형 시그니처 인터랙션이 포함되어야 합니다.

Scrollcraft가 빌드를 서로 다르게 유지하는 방식

Scrollcraft는 서로 배타적인 여덟 가지 페이지 문법을 제공합니다.

• 필믹 원샷: 끊김 없이 이어지는 영화적 프레젠테이션입니다.
• 챕터형 에디토리얼: 편집된 챕터로 구성된 구조적인 순서입니다.
• 라이브 서피스: 인터랙션으로 구동되는 반응형 화면입니다.
• 연속형 월드: 눈에 보이는 섹션 경계 없이 하나의 고정된 무대를 사용하는 방식입니다.
• 타이포그래픽 포스터: 주로 글자를 중심으로 이끌어가는 구성입니다.
• 갤러리: 시각 작품을 중심으로 구성된 경험입니다.
• 스플릿 스테이지: 콘텐츠 영역을 나누고 서로 조율하는 프레젠테이션입니다.
• 리드믹 컷리스트: 의도적인 시각적 컷을 통해 형태를 갖추는 순서입니다.

이들은 서로 바꿔 쓸 수 있는 테마가 아닙니다. 각 문법은 일부 구조적 선택을 요구하고 다른 선택은 금지하므로, 별개의 프로젝트가 조용히 같은 뼈대로 수렴할 가능성을 줄입니다.

PERKFORM은 영화적이고 제품 중심적인 방향을 보여줍니다. 원샷 프레젠테이션을 사용하며, 기존의 섹션을 쌓는 방식 대신 전체 화면을 채우는 반전된 배경으로 강하게 전환합니다.

Fallowbank는 동일한 스킬로 절제된 다큐멘터리 스타일을 구현하는 방식을 보여줍니다. 사진 위에 박물관 라벨 같은 문구를 배치하고, 일반적인 버튼 대신 흐르는 텍스트로 마무리합니다.

지문 게이트

첫 프로젝트가 끝난 뒤에는 새 빌드를 이전 작업과 비교합니다. 문법, 내비게이션, 히어로, 액트 형태, 마무리, 시그니처 동작의 여섯 가지 차원 중 최소 네 가지가 달라야 합니다. 기준을 통과하지 못하면 기록을 약화하거나 다시 쓰는 대신 계획을 변경해야 합니다.

첫 빌드는 레지스트리가 비어 있으므로 기존 지문을 통과할 필요가 없습니다. 이는 의도된 설계입니다. 이 게이트는 자신의 작업을 반복하지 않도록 만들어졌습니다.

디자인 및 인터랙션 기준

개별 액트를 정의하기 전에 Scrollcraft는 감정 곡선을 만듭니다. 각 액트에는 의도한 감정과 화면에 나타나는 원인이 부여됩니다. 인접한 두 액트가 같은 감정을 만든다면, 둘 중 하나는 불필요할 수 있습니다.

그런 다음 페이지는 하나의 설계된 절정을 중심으로 구성됩니다. 그 순간에는 가장 큰 에셋 예산과 충분한 사전 정적 구간, 충분한 스크롤 거리가 배정됩니다. 모든 섹션을 똑같이 극적으로 다루는 대신 피크 엔드 규칙을 직접 적용하는 방식입니다.

완성도 규칙

• 타이포그래피: 글꼴 패밀리는 최대 두 개로 제한하고, 자간을 제어하며, 한 줄 길이는 45~75자 사이로 유지하고, 줄 높이는 글줄 길이에 맞춰 조정합니다.
• 여백: 4px 기본 단위, 제목 아래보다 위에 더 넓은 여백, 작은 화면에 맞춰 조정되는 유동적인 섹션 패딩을 사용합니다.
• 색상: 여섯 가지 역할과 하나의 강조색, 색조를 더한 보조 텍스트, 순수한 검정색 배제, 밝은 배경과 어두운 배경 사이의 의도적인 전환을 지원합니다.
• 깊이감: 오프셋 그림자, 가장자리 빛, 크기와 블러, 겹침, 그레인을 서로 구별되는 도구로 다룹니다.
• 브랜드 준수: 제공된 브랜드 키트의 규칙이 Scrollcraft 기본값보다 우선합니다. 여기에는 스킬이 otherwise 선택할 수 있는 기법을 금지하는 제한도 포함됩니다.

또한 이 스킬은 동일한 기능 카드 그리드, 장식용 카운터, 상투적인 스크롤 안내, 그라데이션 텍스트, 지어낸 통계, 가짜 대시보드, AI풍 보라색 그라데이션, 기본 크림 및 브라스 공예 브랜드 팔레트 등 AI가 생성한 디자인에서 흔히 보이는 지름길을 거부합니다.

Claude Code 플러그인 설치

플러그인 마켓플레이스를 추가한 다음 디자인 플러그인을 설치합니다.

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

Claude Code에 Run /reload-plugins to activate.가 표시되면 계속하기 전에 해당 명령을 실행합니다.

다음 명령으로 Scrollcraft를 직접 실행할 수 있습니다.

/nateherk-design:scrollcraft

Claude Code에서 원하는 스크롤 기반 사이트를 설명하는 방식으로도 이 스킬을 사용할 수 있습니다. 직접 명령은 절차를 명시적으로 시작하고 싶을 때 유용합니다.

설치 없이 개발하기

플러그인으로 설치하지 않고 로컬에서 스킬 저장소를 확인하거나 수정하려면 플러그인 디렉터리와 함께 Claude Code를 실행합니다.

claude --plugin-dir ./plugins/nateherk-design

요구 사항 확인

Scrollcraft는 여러 로컬 도구에 의존합니다. 빌드를 시작하기 전에 다음 항목을 확인합니다.

• Node.js 18 이상: 포함된 모든 스크립트에 필요합니다.
• 전체 기능이 포함된 ffmpeg 빌드: 클립을 일반적으로 재생하지 않고 올바르게 스크럽할 수 있도록 인코딩하는 데 사용됩니다. 축소된 빌드에는 scale 같은 필수 필터가 빠져 있을 수 있습니다.
• playwright-core 및 Chrome: 브라우저 기반 검증 단계에서 사용됩니다.
• KIE_AI_API_KEY: 선택 사항이며 에셋을 생성할 때만 필요합니다. 직접 촬영한 사진이나 영상을 사용하는 프로젝트에는 이 키가 필요하지 않습니다.

모듈이 올바른 위치에서 해석되도록 빌드 폴더 안에 playwright-core를 설치하세요:

npm i playwright-core

Scrollcraft가 올바른 실행 파일을 찾지 못하는 경우 SCROLLCRAFT_FFMPEG 및 SCROLLCRAFT_CHROME으로 검색 경로를 재정의할 수 있습니다.

Scrollcraft는 지금까지 Windows에서만 완료된 빌드에 사용되었습니다. 스크립트는 Windows, macOS, Linux의 일반적인 위치를 검색하지만, README에서는 macOS에서 빌드가 완료되었다고 주장하지 않습니다.

사전 점검 실행 및 작업 공간 생성

다른 작업을 시작하기 전에 진단 스크립트를 실행하세요. 이 스크립트는 나중에 오해를 일으킬 수 있는 누락되었거나 호환되지 않는 종속성을 알려 줍니다.

node scripts/doctor.mjs

축소된 ffmpeg 바이너리는 누락된 필터를 구문 오류로 보고할 수 있고, 누락된 WebP muxer는 파일 이름 문제처럼 보일 수 있으며, playwright-core는 잘못된 디렉터리에서 해석될 수 있으므로 이 점검은 특히 중요합니다.

사전 점검이 통과되면 작업 공간과 비어 있는 지문 레지스트리를 생성하세요:

node scripts/workspace.mjs --ensure

작업 공간 선택 방식

Scrollcraft는 다음 순서로 작업 공간을 확인하며, 처음 일치하는 항목에서 중지합니다:

1. SCROLLCRAFT_HOME에 저장된 경로
2. 현재 디렉터리에서 상위로 이동하며 찾은 가장 가까운 .scrollcraft.json이 지정한 작업 공간
3. 프로젝트 루트 아래의 scrollcraft 디렉터리

작업 공간 구성 파일의 형식은 다음과 같습니다:

{ "workspace": "path/to/builds" }

빌드는 <workspace>/builds/<name>/ 아래에 기록되고, 지문 레지스트리는 <workspace>/FINGERPRINTS.md에 저장됩니다.

첫 프로젝트 만들기

플러그인이 활성화되고 작업 공간이 존재하면 Scrollcraft를 호출하세요:

/nateherk-design:scrollcraft

사이트와 주제, 사용할 수 있는 에셋, 적용할 브랜드 규칙을 설명하세요. KIE_AI_API_KEY가 구성되어 있다면 생성 에셋 경로를 선택할 수 있고, 생성 비용 없이 직접 촬영한 사진과 영상을 사용할 수도 있습니다. 기존 에셋을 사용하는 것은 임시 대안이 아니라 정식 워크플로입니다.

이 스킬은 인터뷰, 문법 선택, 콘셉트 평가, 페이지 구축, 결과 검증을 아우르는 절차를 따릅니다. 참고 자료에서는 감정 곡선, 스크롤 장치, 연속된 세계의 구성, 아트 디렉션, 에셋 준비, 디자인 기준도 정의합니다.

선택한 문법을 준수하세요

선택한 문법을 시각적 프리셋처럼 다루지 마세요. 예를 들어 연속된 세계 프로젝트는 섹션 사이의 경계 없이 하나의 고정된 무대처럼 작동해야 합니다. 챕터형 에디토리얼 프로젝트는 다른 구조와 탐색 모델을 따릅니다. 필수 패턴을 섞으면 프로젝트를 서로 구별되게 만드는 메커니즘이 약화됩니다.

대표 동작 하나를 계획하세요

모든 사이트에는 해당 프로젝트에만 존재하는 맞춤형 인터랙션이 포함되어야 합니다. 스포트라이트의 색만 간단히 바꾸는 것은 이에 해당하지 않습니다. 이 동작은 일반적인 장식으로 추가하는 대신 주제와 경험에서 자연스럽게 도출되어야 합니다.

엔진을 올바르게 사용하기

가장 중요한 구현 규칙은 프로젝트마다 엔진을 수정하지 않는 것입니다. 엔진은 구성 가능한 페이지 생성기가 아니라 빌드 전반에서 공유되는 메커니즘을 제공합니다.

각 프로젝트에서 다음을 수행하세요:

1. 6개의 색상 토큰과 최대 2개의 글꼴로 엔진을 테마화합니다.
2. 사이트에 맞춰 시맨틱 HTML을 작성합니다.
3. 엔진이 공개하는 --sc-p 사용자 지정 속성을 사용해 맞춤 동작을 구동합니다.
4. 프로젝트별 레이아웃과 인터랙션을 공유 엔진 외부에 유지합니다.

구성 객체에서 런타임에 페이지 전체를 생성하지 마세요. Scrollcraft의 디자인 철학에 따르면, 바로 이 추상화 때문에 하나의 시스템으로 만든 사이트들이 서로 비슷해집니다.

검증 단계 이해하기

Scrollcraft는 헤드리스 브라우저를 사용해 모든 스크롤 위치에서 완성된 페이지를 검사합니다. 동영상 중심 경험에서는 프레임을 평가하기 전에 재생 위치가 안정될 때까지 기다립니다.

검증 프로세스는 다음을 보고합니다:

• 무의미한 스크롤: 화면에 보이는 어떤 것도 바꾸지 않는 스크롤 거리
• 불완전한 큐: 텍스트나 기타 큐가 완전한 불투명도에 도달하지 못하는 경우
• 합성된 대비 실패: 밝은 프레임이 그 아래를 통과하는 동안 각 줄을 기준으로 대비를 검사하며, 밝은 배경 위 어두운 텍스트인지 어두운 배경 위 밝은 텍스트인지에 따라 방향을 선택합니다.
• 디코딩되지 않은 클립: 포스터 프레임에서 멈춘 상태로 남아 의도적으로 일시 정지된 영상처럼 보일 수 있는 동영상

이 프로세스는 사람이 검토할 수 있도록 콘택트 시트도 생성합니다. 자동 검사는 페이지가 작동하는지 확인할 수 있지만, 경험이 의미 있거나 감정적으로 효과적인지는 판단할 수 없습니다.

고급 워크플로 팁

지문 레지스트리를 정확하게 유지하세요

포함된 예시를 바탕으로 레지스트리를 미리 채우지 마세요. 저장소의 EXAMPLES.md는 레지스트리가 채워진 모습과 어떤 형태가 충돌하기 쉬운지를 보여 주지만, 제약 조건 모음은 아닙니다. 직접 프로젝트를 기록하고, 6가지 기준 중 4가지를 충족하는 고유성 요건을 만족하지 못하는 새로운 콘셉트는 다시 설계하세요.

하나의 절정에 리소스 할당

모든 장면을 똑같이 강렬하게 만들고 싶은 유혹을 이겨 내세요. 가장 강력한 에셋, 가장 긴 스크롤 구간, 가장 명확한 도입부를 하나의 절정에 할당하세요. 서로 경쟁하는 여러 절정은 전체 곡선의 힘을 약화합니다.

반응형 리듬을 의도적으로 설계

4px 간격 기반을 사용하되 데스크톱용 간격을 그대로 휴대폰에 옮기지는 마세요. 제목 간 관계를 명확하게 유지하고, 읽기 쉬운 줄 길이를 확보하며, 어두운 배경의 밝은 텍스트는 단일 색상 조정만으로 해결하지 말고 여러 방식으로 보완하세요.

추측보다 진단용 오버라이드 우선

잘못된 ffmpeg 또는 Chrome 설치가 감지되면 SCROLLCRAFT_FFMPEG 또는 SCROLLCRAFT_CHROME을 명시적으로 설정하세요. 그런 다음 doctor.mjs를 다시 실행하여 이후 인코딩이나 브라우저 오류를 각각 따로 디버깅하지 않도록 하세요.

프로젝트 이력 읽기

저장소의 CHANGELOG.md에는 빌드 중 무엇이 실패했는지와 그에 따라 만들어진 디자인 또는 엔지니어링 규칙이 기록되어 있습니다. 단순한 기능 이력이 아니라 운영상의 교훈을 얻는 자료로 활용할 수 있습니다.

고려할 제한 사항

• 다른 플랫폼의 일반적인 위치를 검색하는 스크립트가 있음에도, 완료된 빌드는 Windows에서만 실행되었습니다.
• 생성된 동영상에는 상당한 비용이 발생할 수 있으며, 특히 여러 구간으로 이루어진 연속적인 세계의 비행에서는 비용이 커질 수 있습니다.
• 이 스킬은 의도적으로 특정 관점을 따르므로 익숙한 레이아웃이나 팔레트, 또는 정의가 약한 절정을 거부할 수 있습니다.
• 자동 검증으로는 완성된 페이지에 의미가 담겼는지 판단할 수 없으므로, 콘택트 시트는 여전히 사람이 검토해야 합니다.

결론

Scrollcraft는 스크롤 인터랙션 엔진과 체계적인 디자인 절차를 결합합니다. 먼저 Claude Code 플러그인을 설치하고 프리플라이트를 실행한 다음 워크스페이스를 만드세요. 그 후 문법을 선택하고, 감정 곡선과 하나의 절정을 정의하며, 고유한 시그니처 동작을 만들고, 검증 과정에서 기계적인 문제를 드러내도록 하세요. 공유 엔진은 변경하지 않아야 각 프로젝트의 의미 구조와 아트 디렉션이 진정으로 구별된 상태로 유지됩니다.