scroll-craft

scroll-craft은(는) 무엇을 하나요?

스크롤은 모든 방문자가 이미 사용법을 알고 있는 유일한 입력 방식입니다. 이 스킬은 스크롤을 타임라인으로 취급합니다. 휠은 스크러버(scrubber)이고, 페이지는 그 위에 실제 텍스트가 있는 영화이며, 각 섹션은 방문자가 다음 섹션이 무엇을 하는지 알아내기 위해 계속 스크롤하도록 충분히 다르게 동작합니다.

생성 결과물: 인터뷰 브리프, 페이지 문법, 고객 여정 지도, 하나의 설계된 정점을 가진 감정 곡선, 스크롤 점수, 하나의 시그니처 무브, 생성된 자산들, 토큰 중심 디자인 플로어 위의 하나의 실제 HTML 페이지, 그리고 모든 스크롤 위치에서 페이지가 제대로 작동함을 증명하는 스크린샷 스트립입니다.

이것이 아닌 것

이것은 "비행 장면을 생성하고 그 위에 텍스트를 얹는 것"이 아닙니다. 그런 접근 방식은 전체 페이지에 하나의 장치만 적용하며, 그렇게 만들어진 모든 사이트는 한눈에 알아볼 수 있습니다. 동일한 클레이메이션 디오라마, 동일한 중앙 정렬 카피, 동일한 01 / 06 카운터, 동일한 "스크롤하여 탐험" 안내 문구가 있습니다. 동일하게 동작하는 다섯 개의 섹션은 하나의 섹션을 다섯 번 보여준 것에 불과합니다.

다음 네 가지 규칙이 이어지며, 이것이 이 스킬의 핵심입니다:

1. 다양성이 곧 제품입니다. 페이지는 최소 네 가지의 서로 다른 장치군을 사용하며, 동일한 장치를 연속으로 두 번 사용하지 않습니다. references/devices.md를 읽으세요.
2. 세계는 브랜드가 진정으로 일러스트레이션 스타일이 아닌 이상 사진처럼 보여야 합니다. 소프트 매트 로우폴리 클레이 디오라마는 기본값으로 금지됩니다. references/worlds.md를 읽으세요.
3. 연속적인 체인은 없습니다. 하나의 끊어지지 않은 카메라 비행은 만들 수 있는 가장 비싸고 가장 깨지기 쉬운 것이며, 장면 간의 컷을 숨기기 위해서만 존재합니다. 대신 장치를 다양화하면 컷이 저절로 사라집니다. 방문자가 하나의 영화를 보고 있지 않기 때문입니다. 브리프가 문자 그대로 "하나의 연속적인 여정"일 때만 체인을 사용하세요.
4. 다른 세계가 다른 페이지를 의미하지는 않습니다. 장치 키트는 페이지의 모양을 다양하게 만듭니다. 구조는 별개의 축이며, 의도적으로 결정하지 않으면 모든 빌드가 동일한 뼈대를 물려받습니다. 처음 네 개의 빌드가 정확히 그렇게 했습니다. references/uniqueness.md를 읽으세요.

상시 히어로 선호 사항

입체적 레이어링은 프리미엄 마케팅 히어로의 기본 요구 사항입니다. 자산을 요청하기 전에 배경, 피사체, 전경, 대기 평면이 독립적으로 움직이는 것을 계획하세요. 텍스트 페이드가 있는 아름다운 단일 배경은 이 선호 사항을 충족하지 않습니다. 깊이는 헤드라인이 읽기 쉽고 장면이 하나의 명확한 이야기를 전달하는 동안, 시각적으로 분리되고, 가려지며, 통제된 움직임의 차이에서 비롯되어야 합니다.

히어로나 그 자산을 계획하기 전에 references/hero-depth.md를 읽으세요. 깨끗한 플레이트, 진정한 알파 컷아웃, 공유 접점 앵커, 평면 사이의 타이포그래피, 절제된 스크롤 안무, 모바일 아트 디렉션 및 시각적 승인 기준을 다루며, 승인된 Sonder 예제를 포함합니다. 선택한 문법에 맞는 구성을 사용하고 Sonder의 장면을 반복하거나 핀(pinning)을 금지하는 문법에 핀을 부과하지 마세요. 명시적인 정적 또는 단순한 방향이 있다면 이를 존중하고, 모션이 축소될 때 정적 구성에 깊이를 유지하세요.

승인된 컬렉션 기준

프리미엄 마케팅 사이트를 계획하기 전에 references/approved-collection.md를 읽으세요. 여기에는 승인된 10개 사이트 재구축이 요약되어 있습니다: 실제 브랜드 리서치, 레이어 계약, 의미 있는 포인터/스크롤 깊이, 적절한 사진 또는 3D 렌더링, 독특한 내비게이션과 엔딩, 유용한 인터랙션, 모바일 아트 디렉션, 최종 패키지의 증거. 이는 실행 원칙과 실제 사례이며, 재사용 가능한 페이지 템플릿이 아닙니다.

0단계: 브리프 및 크리에이티브 위임

무엇이든 생성하기 전에 브리프를 수립하세요. 이미 제공된 답변과 자산을 재사용하세요. 사용자가 명시적으로 크리에이티브 디렉션을 위임하는 경우(예: "당신의 판단을 따르세요" 또는 "제가 방해하지 않을게요"), 명시적 크리에이티브 위임 하에 자체 작성됨 브리프를 작성하고 진행하세요. 아래 여덟 가지 주제를 다루고, 증거와 가정을 구분하며, 사용자 인용문을 만들어내거나 추가 인터뷰/승인 체크포인트를 강요하지 마세요.

그렇지 않으면, 누락된 결정 사항에 대해 인터뷰하세요. 실제 질문을 하고, 답변을 기록하며, 이름만으로 브랜드 전체를 추론하지 마세요.

이 스킬은 레인지 악기이지 하우스 스타일이 아닙니다. 인간은 의도와 그들이 소유한 모든 자산을 가져오고, 인터뷰는 그것을 올바른 종류의 페이지로 바꾸는 곳입니다: 하나의 끊어지지 않은 세계, 뚜렷한 장면들, 인쇄된 챕터, 살아있는 표면. 스킬은 이들 중 어떤 것이든 할 수 있습니다. 인터뷰가 무엇을 할지 결정합니다.

짧게 유지하세요. 한 번에 여덟 개의 질문:

1. 3~5 단어로 표현한 분위기, 그리고 어떤 매체에서든 최대 세 개의 참고 자료. 영화, 앨범 커버, 가게, 잡지, 게임. "좋아하는 사이트"가 아닙니다: 사이트를 언급하는 것은 페이지가 기존 사이트처럼 보이게 만드는 방법입니다.
2. 방문자의 언어로 구역별 스크롤 여정. 방문자가 가장 먼저 접해야 할 것, 그 다음, 마지막 것. 당신이 제안한 메뉴가 아니라 그들의 순서입니다.
3. 에너지 곡선. 어디서 차분해야 하고, 어디서 강렬해야 하는지. 전체가 시끄러운 페이지는 전체가 조용한 페이지만큼 평평합니다.
4. 스크롤하는 동안 단계별로 어떻게 느껴야 하며, 방문자가 기억해야 할 '유일한 순간'은 무엇인가요? 에너지는 시끄러움입니다. 이것은 감정이며, 둘은 일치하지 않습니다: 시끄러운 페이지에서 조용한 행동이 가장 강렬할 수 있습니다. 단계별 답변은 감정 곡선이 되고, 그 유일한 순간은 정점이 됩니다. 둘 다 BRIEF.md에 필수입니다. references/feel.md를 참조하세요.
5. 이 사이트가 그들이 본 어떤 사이트도 하지 않는 한 가지 일. 이것이 시그니처 무브의 씨앗입니다. 진짜 답변을 얻기 위해 노력하세요. "기억에 남는 것"은 답변이 아닙니다.
6. 프리미엄 미니멀에서 얼마나 벗어나고 싶은지. uniqueness.md §5의 범위를 제시하세요: 브루탈리스트, 맥시멀리스트, 플레이풀, 레트로, 덴스, 에디토리얼, 프리미엄 미니멀. 그들의 답변이 미학적 패밀리를 결정하며, 당신의 취향이 아닙니다.
7. 하나의 끊어지지 않은 세계, 아니면 별개의 장면들? 전체 페이지가 하나의 연속된 공간을 스크롤하며 날아가는 느낌(월드플라이트, references/worldflight.md 참조)이어야 합니까, 아니면 별개의 장면, 챕터 또는 컷처럼 느껴져야 합니까? 이것은 가장 큰 구조적 분기점이며, 사용자의 결정입니다. 나중에 선택할 장치가 아닙니다. 두 가지를 명확하게 제시하세요; 둘 중 어느 것도 기본값이 아닙니다.
8. 이미 가지고 있는 자산은 무엇인가요? 영상, 사진, 제품 샷, 브랜드 키트, 자신의 클립. 실제 자산은 세계를 고정시키고 생성 비용을 절감합니다. 답변에 따라 무엇을 그레이딩/인코딩하고 무엇을 생성할지 결정합니다. "없음"도 좋은 답변이며, 완전히 생성된 세계를 의미합니다.

행동 계획을 세우기 전에 답변을 <workspace>/builds/<name>/BRIEF.md에 사용자의 말 그대로, 마케팅 문구로 의역하지 않고 작성하세요. 이후 모든 작업은 이 파일을 읽습니다.

BRIEF.md에는 최소한 다음이 포함되어야 합니다:

• 여덟 가지 주제, 제공된 경우 사용자의 답변을 그대로, 위임된 경우 명확히 표시된 스스로 결정한 사항.
• 감정 곡선. 행동당 한 줄: 감정, 그리고 화면에서 그것을 유발하는 것. 행동이 존재하기 전에 작성되고, 점수가 채워짐에 따라 추가됩니다.
• 정점. 유일한 순간. 방문자가 친구에게 말할 문장으로 작성되고, 그것이 속한 행동이 명시됩니다.
• 완성된 '누군가에게 말하기' 문장. "~하는 사이트야"를 경험으로 채우고, 장치 이름으로 채우지 마세요.
• 어떤 자체 결정된 침묵(비활성 구간)이라도, 검증 패스가 죽은 스크롤과 구분할 수 있도록.

references/feel.md는 이 네 가지에 대한 명세서입니다.

사용자에게 진정으로 연락이 닿지 않고 실행이 완전 자동화된 경우, BRIEF.md를 직접 작성하세요: 브랜드의 목소리로 여덟 가지 질문에 모두 답하고, 파일 상단에 자체 작성, 인터뷰 없음이라고 표시한 후 최종 보고서에 그렇게 명시하세요. 위임 없이 자체 작성된 브리프는 차선책입니다. 위의 명시적 위임은 정상적인 지원 워크플로우이며 사용자에게 연락이 닿지 않을 필요가 없습니다.

부트스트랩

작업 단계가 아닌 환경 설정입니다. 인터뷰가 완료되고 1단계 전에 실행하세요.

수동 확인 대신 사전 점검을 실행하세요. 사전 점검은 나중에 오해의 소지가 있는 오류로 표면화되는 실패 모드를 알고 있습니다. 주로 제거된 ffmpeg가 누락된 필터를 명령어의 구문 오류로 보고하는 경우입니다:

node <skill>/scripts/doctor.mjs

node, 전체 ffmpeg 빌드, playwright와 Chrome, API 키, 확인된 작업 공간을 보고합니다. 필수 항목이 실패하면 0이 아닌 종료 코드를 반환합니다. 누락된 항목을 조용히 우회하지 않고 명확히 말합니다.

작업 공간

빌드와 지문 레지스트리는 하나의 디렉토리에 있으며, 추정되지 않고 확인(resolved)됩니다:

node <skill>/scripts/workspace.mjs --ensure     # 경로 출력, 생성, 레지스트리 시드

확인 순서, 첫 번째로 일치하는 것이 사용됩니다:

1. SCROLLCRAFT_HOME
2. cwd에서 위로 올라가며 가장 가까운 .scrollcraft.json, { "workspace": "..." }
3. <프로젝트 루트>/scrollcraft, 여기서 프로젝트 루트는 .git을 가진 가장 가까운 상위 디렉토리

따라서 빌드 폴더는 <workspace>/builds/<name>/이고 레지스트리는 <workspace>/FINGERPRINTS.md입니다. 레지스트리는 비어 있는 상태로 시작합니다: 게이트는 반복을 막기 위해 존재하므로, 첫 번째 빌드에서는 지울 것이 없습니다.

이미 다른 곳에 빌드를 보관하고 있다면, 프로젝트 루트에 .scrollcraft.json을 해당 위치를 가리키도록 넣으면 아무것도 이동할 필요가 없습니다.

나머지

1. KIE_AI_API_KEY, 자산을 생성하는 경우에만 필요합니다. 사용자 자신의 사진과 영상으로 빌드하는 경우 키도 비용도 필요 없으며, 이는 차선책이 아닌 최우선 경로입니다. node <skill>/scripts/kie.mjs probe로 잔액을 확인하세요. 스틸 이미지는 몇 센트, 5초 클립은 더 비쌉니다. 6액트 페이지에 두 개의 클립이 있는 경우 비용이 많이 들지 않고 적게 듭니다.
2. 브랜드 키트가 있다면 (색상, 로고, 서체, 기존 제품 사진). 브랜드가 이 저장소에 폴더를 가지고 있다면, 무엇이든 생성하기 전에 읽고 그 하드 룰을 따르세요. 발명된 숫자를 금지하는 브랜드는 아무리 좋아 보여도 통계 카운터를 사용할 수 없습니다.

engine/scrollcraft.js와 engine/scrollcraft.css를 빌드 폴더로 복사하세요. 엔진은 프로젝트별로 절대 편집하지 마세요. 그것은 메커니즘입니다. 토큰으로 테마를 지정하고 자신의 마크업을 작성하세요.

1단계: 브리프, 여정 우선

주제는 사용자가 말하도록 하세요. 평범한 문장으로 열린 질문을 하고, 절대 산업군의 가상 객관식 목록으로 제시하지 마세요: 만들어진 메뉴는 편향을 주며 사용자를 위해 비즈니스를 결정하는 것으로 읽힙니다.

0단계에서 이미 분위기, 순서, 에너지 및 범위를 다루었습니다. 그것들을 다시 묻지 마세요. 합리적으로 기본값을 정할 수 없는 것만 물어보세요:

1. 이것은 무엇이며, 누구를 위한 것인가요? 사용자의 말로 한두 문장.
2. 방문자가 마지막에 무엇을 믿어야 하나요? 페이지가 존재하는 이유인 단 한 문장. 기능 목록이 아닙니다. 세 가지를 말한다면, 하나를 고르게 하세요.
3. 방문자는 다음에 무엇을 해야 하나요? 하나의 행동. 페이지 전체에서 일관되게 사용될 하나의 레이블.
4. 이미 가지고 있는 것은 무엇인가요? 로고, 팔레트, 사진, 제품 샷, 영상, 브랜드 문서. 실제 자산이 생성된 자산보다 항상 낫습니다.
5. 아트 디렉션: references/worlds.md의 세계를 실제 선택지로 제시하고, 그들만의 방식을 선택할 수 있다고 말하세요.

그런 다음 다른 모든 것보다 먼저 여정을 작성하세요: 방문자가 알거나 느끼는 바에 전환점을 제공하는 4~7개의 비트.

1  인식      그들은 자신의 아침을 본다
2  긴장      그 비용, 명확히 이름 붙여짐
3  전환      상황을 바꾸는 것
4  본질      왜 그것이 유효한가
5  범위      그들이 선택할 수 있는 것
6  약속      그 하나의 행동

비트는 척추입니다. 섹션은 비트를 제공합니다; 어떤 비트도 제공하지 않는 섹션은 아무리 좋은 장면이라도 삭제됩니다. 자산을 생성하기 전에 여정을 확정하세요. 사용자의 결정이 필요할 때 보여주고, 명시적 크리에이티브 위임 하에서는 선택된 여정을 기록하고 승인된 범위 내에서 진행하세요.

2단계: 문법, 게이트, 그 다음 점수

순서대로 세 가지이며, 처음 두 가지는 행동 계획보다 먼저 옵니다. 전체 내용은 references/uniqueness.md에 있습니다.

문법을 선택하세요. 정의된 여덟 가지 문법과 그 제약 조건으로 시작하세요. 새로운 문법은 내비게이션, 시퀀스, 엔딩 및 명시적 금지 사항이 다른 구조를 설명할 때만 허용됩니다. 단순히 새로운 레이블만으로는 인정되지 않습니다. 필름 원샷(one-shot)은 처음 네 개의 빌드가 모두 사용한 것이므로, 다시 선택한다면 보고서에 왜 다른 일곱 가지가 인터뷰에 맞지 않았는지 설명해야 합니다. 내비게이션, 히어로 및 클로즈는 모두 문법에서 비롯됩니다. 별도로 결정되지 않습니다.

시그니처 무브를 발명하세요. 이 사이트에만 존재하는 하나의 맞춤형 인터랙션으로, 페이지에 코딩되며 키트 장치의 매개변수 변경이 아닙니다. 인터뷰의 질문 5가 그 씨앗입니다. 엔진은 그대로 둡니다.

지문 게이트를 실행하세요. <workspace>/FINGERPRINTS.md(부트스트랩의 작업 공간 참조; node <skill>/scripts/workspace.mjs를 실행하여 경로 출력)에서 레지스트리를 읽으세요. 계획된 빌드는 모든 기존 행과 6개 차원 중 최소 4개에서 달라야 합니다: 문법, 내비게이션 처리, 히어로 장치, 액트-시퀀스 형태, 종료 패턴, 시그니처 무브. 각 행에 대해 개별적으로 4개 이상 차이가 나야 합니다. 실패하면 계획을 변경하고, 로그를 변경하지 마세요.

점수 테이블보다 먼저 감정 곡선을 작성하세요. 행동당 한 줄: 감정, 그리고 그것을 유발하는 것. 곡선이 먼저, 행동은 두 번째입니다. 감정보다 먼저 선택된 장치는 이유를 찾는 장치이기 때문입니다. 같은 감정의 두 인접한 행동은 하나가 채우기용임을 의미하며, 자산이 존재한 후보다 여기서 자르는 것이 더 저렴합니다. 같은 패스에서 정점의 이름을 지정하고 페이지에서 가장 큰 범위를 제공하세요. 전체 방법은 references/feel.md에 있습니다.

그런 다음 각 비트에 장치를 할당하세요. 의도적으로 수행하고 표로 기록하세요:

비트	장치	이 장치를 선택한 이유
인식	scrub	독자의 손 아래에서 카메라가 움직이는 것은 가능한 가장 강력한 오프닝입니다
긴장	pin + kinetic	프레임이 멈춰 있는 동안 카피가 한 줄씩 조립됩니다
전환	reveal	시선을 다른 곳으로 이끄는 은밀한 전환

(이하 생략)

---

[참고: 전체 SKILL.md는 내용이 깁니다. 위 내용은 번역된 일부이며, 원본의 구조와 규칙을 따라 전체 문서를 번역해야 합니다.] }