SHELEG Design
개요
페이지가 시네마틱하게 느껴지는 이유는 많은 애니메이션 때문이 아니라, 하나의 소스 오브 트루스(측정된 스크롤 위치)가 많고 저렴하며 계층화되고 독립적으로 저하 가능한 반응을 구동하기 때문입니다. 스크롤을 하나의 저장소로 중앙화하고; 레이어는 프레임마다 이를 읽고 자신의 언어로 반응합니다. 아무것도 크로스페이드되지 않습니다 — 것들은 재배치됩니다. 모든 레이어는 조용한 정적 상태로 저하됩니다.
필수 참조 — 시네마틱 경로의 경우: 스크롤 기반 페이지를 구현하기 전에 SHELEG_DESIGN.md를 읽으십시오 — 아키텍처, 모프 수학, DOM↔WebGL 브리지, 빌드 레시피(§11), 파일 맵. 제품-UI 작업은 이 읽기를 요구하지 않습니다; 이에 해당하는 유일한 규칙은 여기에 반복됩니다: 팩의 모션 토큰이 SHELEG 기본값과 다른 경우 팩이 우선합니다.
애니메이션 전 필수: MOTION_DOCTRINE.md를 읽으십시오. SHELEG_DESIGN.md는 모션이 어떻게 구축되는지 말합니다; 교리는 그것을 구축할지 여부를 말합니다 — 고반복 경로에서 애니메이션을 죽이는 빈도 테이블, 이징 트리와 ease-in 금지, 지속 시간 상한, 금지된 형태, 그리고 감소 모션 계약.
사용 시기
- 모션이 명시된 목표인 랜딩/마케팅/히어로 페이지; 스크롤에 연결된 파티클 또는 WebGL 배경; 스크롤 연결 차트, 단계 흐름, 레일, 패럴랙스
- 불안정하거나, 버벅이거나, 위상이 맞지 않는 기존 스크롤 사이트
- 잠긴 시각적 시스템이 필요한 제품 UI — 대시보드, 관리자, 내부/개발 도구, 토큰, 라이트/다크 — 스타일-팩 전용,
workbench를 통해 - AI 제품 표면: 채팅 및 에이전트 UI, 스트리밍 출력, 실행 로그, 모델 오류, 생성된 콘텐츠 및 확인 상태 (
AI_PRODUCT_PATTERNS.md) - Figma 경계를 통해 시각적 시스템을 양방향으로 이동 (
FIGMA_BRIDGE.md)
시네마틱 모션 레이어를 절대 적용하지 말아야 할 곳: 제품 UI, 문서 사이트, 정적 콘텐츠 사이트 — 또는 시각적 시스템이나 카피가 아직 완성되지 않은 모든 페이지. 제품 UI는 스타일-팩 절반만 가져가고 그 외에는 아무것도 가져가지 않습니다.
핵심 패턴 — 다섯 가지 원칙, 순서대로
- 하나의 클록. 모든 모션은 하나의 측정된 스크롤 상태에서 파생됩니다; 어떤 레이어도 스크롤 자체를 측정하지 않으므로 레이어가 결코 위상에서 벗어날 수 없습니다.
- 프레임당 읽기, 거의 알리지 않기. 핫 컨슈머(WebGL/캔버스/레일)는 명령형으로 저장소를 읽으며, 프레임워크 렌더링은 없습니다; 대략적인 행위/섹션 변경만이 프레임워크에 알립니다.
- 유지, 그런 다음 재배치. 섹션의 약 80% 동안 포메이션을 유지한 다음, 짧고 위상이 지연된 아크 곡선 웨이브로 형태를 변경합니다. 크로스페이드는 금지됩니다.
- 획득된 모션. 시간에 따른 상태를 서술하는 도구에 대해서만 스크러빙; 호버/진입 모션은 500ms 미만으로 유지되며 콘텐츠를 게이트하지 않습니다.
- 정적으로 저하. 감소 모션 / 거친 포인터 / WebGL 없음은 정적이고 완전히 읽기 쉬운 페이지로 축소됩니다. 효과는 보너스일 뿐, 종속성이 아닙니다.
스타일 팩
모션 방법론은 스타일에 구애받지 않습니다; 시각적 정체성은 styles/의 스타일 팩에서 제공됩니다. 각 팩 파일은 자체 전체 설명으로 시작합니다 — 이 표는 선택을 위한 것이지, 팩 대신 읽기 위한 것이 아닙니다:
| 팩 | 느낌 | 선택 기준 |
|---|---|---|
instrument-console | 거의 검은 항공우주 콘솔, 하나의 전기 파랑, 모노 텔레메트리 | 기술 / 시스템 / 인프라 · 핵심 계약 |
editorial-luxury | 크림과 에스프레소 잉크, 세이지 악센트, Fraunces/Newsreader | 에디토리얼 / 연구 / 프리미엄 B2B · 핵심 계약 |
workbench | 조용한 라이트/다크 제품 UI, 경계를 높이로 사용, 모노 데이터 | 대시보드 / 관리자 / 내부 및 개발 도구 (독립형) · 핵심 계약 |
briefing-room | 어두운 16:9 데크, OKLCH의 하나의 파랑 색조, 디더 아트 | 투자자 및 이사회 데크, 브리핑, 페이지로서의 강연 (독립형) · 핵심 계약 |
atrium | 크림 주광, 하나의 테라코타, 사진 위의 플루티드 글라스 | 컨슈머 헬스, 장수, 웰니스, 높은 신뢰도 DTC · 핵심 계약 |
orchard | 따뜻한 귀리 슬래브, 세이지 플러스 캔디 오렌지, 소프트-3D 필 | 친근한 컨슈머 바이오텍, DTC 웰니스, 키트 및 보충제 · 핵심 계약 |
field-notes | 헤어라인으로 규칙이 정해진 그린-캐스트 페이퍼, 러스트 악센트, 크롭 마크 | 감사 가능성으로 판매되는 오픈소스 및 개발자 도구 (독립형) |
showroom | 화이트 갤러리, 거의 검은 잉크, 일곱 레이어 프레이밍 섀도우 | 제품 중심 회사, 가장 좋은 주장이 화면 위의 앱인 곳 |
blueprint | 화이트 스톡, 32px 그리드, 등록 마크, 반경 없음 | 정밀함으로 판매되는 인프라 — 벡터 검색, 스토리지, 쿼리 엔진 |
prism | 하드 에지가 있는 무지개빛 워시, 모노 바디 위의 그로테스크 | OSS 인프라 프로젝트의 첫 관문, 첫 단계가 명령어인 곳 |
maquette | 거의 검은 테이블, 크림 액소노메트릭 모델, 옅은 아쿠아 | 아키텍처 구매자에게 판매되는 엔터프라이즈 데이터 인프라 |
cyclorama | 32초 루프의 파스텔 필드, 타자기 세리프, 오렌지 채우기 | 엔터프라이즈 AI 트랜스포메이션 및 응용-AI 컨설팅 업체 |
scoreboard | 따뜻한 종이, 잉크 기본, 표시만 하는 핫 오렌지, 픽셀 숫자 | 주장이 축적되는 숫자인 제품 — 성장, 광고, SEO |
구체화된 키트는 핵심 팩이 생략한 부분의 일부를 답합니다. npx sheleg-design-skill --kit <pack>은 src/styles.css를 생성하며, 그 구성 요소 절반은 핵심 팩이 지정하지 않기로 한 상태(:hover, :focus-visible, :disabled, 선택됨)에 대한 저작된 CSS입니다. 이 스킬과 함께 제공되지 않으므로, 이 번들만 읽는 에이전트는 이를 발명할 것입니다. 먼저 키트를 가져오고, 키트와 팩 간의 차이점을 선택이 아닌 둘 중 하나의 결함으로 취급하십시오.
13개 중 6개는 핵심 계약에 있으며, 그것이 당신이 얻는 것을 변경합니다. 핵심 계약으로 표시된 팩은 ## Components, ## Hero, ## Responsive 또는 ## Signature element를 지정하지 않습니다 — 따라서 구성 요소별 상태, 열리는 뷰포트와 그 줄 상한, 축소 규칙, 페이지가 기억되는 단일 요소는 당신이 결정할 사항이며, 그렇게 할 때 당신은 큰 소리로 말합니다. 다른 7개는 네 가지 모두를 답합니다. 이 비대칭성은 라이브러리에서 당신이 값을 발명하고 그것을 읽었다고 믿게 만들 가능성이 가장 큰 한 가지입니다: 핵심 팩이 명시하는 것은 소수점 둘째 자리까지 측정되며, 그 정밀도는 그것이 침묵하는 절반에 대한 증거가 아닙니다. 각 팩은 Register 위의 Contract: 줄에서 자체 수준을 선언합니다.
스타일링 전에 선택한 팩을 전체 읽으십시오 — 팔레트, 유형, 텍스처, 모션-토큰 값, 시그니처 모티프, 금지 사항을 제공합니다. 각 팩은 styles/tokens/<pack>.css에 즉시 사용 가능한 토큰 레이어를 제공합니다 — 표를 옮겨 적는 대신 해당 파일을 그대로 복사하십시오. 새로운 스타일의 경우 styles/STYLE_PACK_TEMPLATE.md를 복사하고 모든 제목을 유지하십시오 — Register / Palette / Type / Texture & surface / Components / Hero / Responsive / Motion tokens / Signature motifs / Signature element / Motion flavor (시네마틱 팩만 해당) / Micro-interactions / Bans / Gotchas — 그런 다음 동일한 변경에서 tokens/<pack>.css를 작성하십시오; 임시로 토큰 값을 절대 발명하지 마십시오.
보정 — 세 개의 다이얼
팩은 어떤 레지스터인지 답합니다. 얼마나 멀리인지는 답하지 않습니다. 동일한 팩의 두 랜딩 페이지, 하나는 규제된 보험사용이고 다른 하나는 디자인 스튜디오용인 경우 동일한 페이지가 아닙니다. 세 개의 다이얼이 그 차이를 전달하며, 레이아웃이 존재하기 전에 한 번, 큰 소리로 설정됩니다.
DESIGN_VARIANCE1–10 — 1은 완벽한 대칭, 10은 의도적인 비대칭이며 두 섹션이 같지 않음.MOTION_INTENSITY1–10 — 1은 정적, 10은 시네마틱하고 물리적임.VISUAL_DENSITY1–10 — 1은 갤러리 벽, 10은 조종석.
기준 7 / 5 / 4. 구축하기 전에 값과 한 줄의 추론을 명시하십시오; 사용자에게 파일을 편집하도록 요청하지 말고, 발표한 내용에서 조용히 벗어나지 마십시오.
브리프에서 읽기
| 브리프가 다음과 같이 읽힘 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| 미니멀리스트, 차분함, 에디토리얼, "Linear처럼 조용한" | 5–6 | 3–4 | 2–3 |
| 프리미엄 컨슈머, 브랜드 주도, "비싸게 느껴지는" | 7–8 | 5–7 | 3–4 |
| 에이전시, 포트폴리오, 실험적, 어워드 미끼 | 9–10 | 7–9 | 3–4 |
| 랜딩 / 마케팅 페이지, 추가 신호 없음 | 7 | 5 | 4 |
| 제품 UI: 대시보드, 관리자, 내부 도구 | 4–5 | 2–3 | 6–8 |
| 신뢰 우선: 규제 대상, 공공 부문, 임상 | 3–4 | 2–3 | 4–5 |
| 프레젠테이션 데크 | 5–6 | 1–2 | 3–4 |
| 리디자인, 기존 정체성 유지 | 일치 | 일치 +1 | 일치 |
| 리디자인, 명시적 개편 | +2 | +2 | 일치 |
브리프는 두 행과 일치할 수 있으며, 최대 3배 차이가 날 수 있습니다. "조용한 내부 관리자 대시보드"는 "Linear처럼 조용한"(DENSITY 2–3)과 "제품 UI"(DENSITY 6–8) 모두를 발동시킵니다. 우선 순위 규칙: 표면을 명명하는 행이 분위기를 명명하는 행보다 우선합니다. 표면은 얼마나 많은 것이 들어가야 하는지를 결정합니다; 분위기는 그것이 어떻게 처리되는지를 결정합니다 — 제품-UI 팩에서 "조용함"은 색상과 모션의 절제로 구매되며, 공백으로 구매되지 않습니다. 두 가지가 발동할 때 어떤 행을 선택했고 그 이유를 말하십시오.
어떻게 바인딩되는가
- 팩이 값에서 우선하고, 다이얼이 양에서 우선합니다. 다이얼은 색상, 서체 또는 반경을 발명하지 않습니다 — 그것들은 팩의 토큰 레이어에서 옵니다. 그것은 그리드가 얼마나 많은 비대칭성을 전달하는지, 페이지의 얼마나 많은 부분이 움직이는지, 그리고 얼마나 빽빽하게 채워지는지를 결정합니다.
MOTION_INTENSITY는 빈도 테이블에 의해 제한되며, 그 반대가 아닙니다. 설정 화면에서 9는 여전히 키보드 경로가 애니메이션되지 않음을 의미합니다. 먼저MOTION_DOCTRINE.md§1을 읽으십시오; 다이얼은 해당 테이블이 자른 후에 남은 것을 높입니다.- 주장된 모션은 보여진 모션입니다. 4 이상에서는 페이지가 실제로 움직입니다 — 히어로의 진입, 주요 섹션의 공개, 기본 작업에 대한 응답. 7을 발표하는 정적 페이지는 고장난 것입니다. 작동하는 모션이 범위에 맞지 않으면 다이얼을 3으로 낮추고 깨끗한 정적 페이지를 출시하십시오; 중단되거나, 잘리거나, 점프하는 모션을 절반만 구축하지 마십시오.
- 독립형 팩은 자체 상한을 고정합니다.
workbench와briefing-room은 시네마틱하지 않습니다; 둘 중 하나에서MOTION_INTENSITY가 3 이상인 것은 팩에 대한 오독이지 대담한 선택이 아닙니다.field-notes는 기본적으로 독립형이며 시네마틱 레이어를 선택할 수 있습니다 — 방법을 말하는## Motion flavor섹션이 있습니다 — 따라서 하드 상한이 없는 유일한 독립형 팩입니다. 다이얼을 올리기 전에 해당 섹션을 읽으십시오.
장인 정신 기준 — "완료"의 의미, 순서대로
누구나 프로토타입을 프롬프트할 수 있을 때, 장인 정신은 유일한 차별화 요소입니다. 디자이너는 그것이 의미하는 바를 순위를 매깁니다(Figma, State of the Designer 2026, n=906): 시각적 광택 58% · 사려 깊은 문제 해결 47% · 명확하고 직관적인 UX 36% · 감정과 즐거움 35% · 일관성 15%. 그것을 완료의 정의로 읽으십시오, 그 순서대로:
- 광택 — 예외 없이 팩 적용: 토큰, 리터럴이 아님; diff 어디에도 임시 hex, 반경 또는 글꼴 크기가 없음.
- 시스템 사고 — 시각적 결정은 한 곳(토큰 레이어,
SCENES레지스트리)에 있으며 다른 모든 것은 그것을 읽음. - 명확한 UX — 구조와 행동은 이 스킬의 몫이 아님; 흐름과 상태가 결정되지 않았다면, 멈추고 먼저 결정하십시오.
- 감정 — 획득된 모션만(원칙 4), 결코 1–3을 희생하지 않음.
- 일관성 — 모든 화면에서 하나의 이징, 하나의 지속 시간 세트, 하나의 악센트, 작업당 하나의 원자.
주문형 로드 — 팩 레이어가 결정하지 않는 세 가지
- 씬 깊이 — 여섯 개의 레이어 (
SURFACE_COMPOSITION.md), 시네마틱 페이지를 위한 CSS를 작성하기 전. 씬에는 평면이 있습니다; 하나의 평면에 모든 것이 있는 것은 어떤 양의 이징도 수리할 수 없는 실패입니다. - 차트 —
dataviz에 팩 전달 (동일 파일), 어떤 팩에서든 차트를 그리기 전. 토큰 이름은 13개 전체에서 균일하지 않습니다 —--bg와--ink만 모든 곳에서 해석되며, 정의되지 않은 사용자 정의 속성은 오류가 나지 않고 조용히 폴백됩니다. 하나를 추측하는 것은 잘못된 차트를 출시하는 가장 조용한 방법입니다. - 모바일 표면 (
MOBILE_SURFACES.md), 브리프가 네이티브 앱 화면 또는 모바일-웹 뷰인 경우 — 유일한 모바일 관심사가 축소인 데스크탑 페이지가 아닙니다. 각 팩이 단독으로 명시하는 다섯 가지 모바일 규칙, 어떤 팩도 답하지 않는 여섯 번째 규칙(타입 램프는 뷰포트 너비를 따르며 사용자의 텍스트 크기를 따르지 않음), 그리고 전화에서 어떤 팩도 결정하지 않는 절반: 플랫폼 규칙.
팩 선택 — 상상하지 말고 마운트하십시오
둘 이상의 팩이 제품을 전달할 수 있을 때, 그것에 대해 논쟁하지 마십시오. 렌더링하십시오.
후보 팩을 기존의, 데이터가 채워진 페이지에 마운트하십시오 — 실제 헤더, 실제 데이터, 실제 밀도 — ?variant=<pack> 검색 매개변수로 전환하고 브라우저에서 사이를 전환하십시오. 토큰 레이어만 변경됩니다; 마크업은 동일하게 유지됩니다.
플레이스홀더 콘텐츠가 있는 임시 경로는 진공 상태입니다: 모든 팩이 그 안에서 괜찮아 보이며, 이것이 바로 아무것도 해결하지 못하는 이유입니다. 진정으로 데이터가 채워진 페이지가 아직 없다면, 선택은 시기상조입니다 — 브리프의 레지스터가 가리키는 팩으로 페이지를 구축하고, 전환할 실제 무언가가 생기면 다시 방문하십시오. 브리프가 전혀 신호를 주지 않는다면, 기본값은 제품 UI의 경우 workbench, 마케팅 페이지의 경우 showroom 입니다: 둘 다 충분히 조용해서 나중에 전환해도 레이아웃이 아닌 정체성에 비용이 듭니다. (이전에는 "기본 팩"이라고 말하고 이름을 지정하지 않았는데, 이는 폴백이 아닙니다.)
비교 하네스는 스캐폴딩일 뿐, 전달물이 아닙니다: 결정을 기록하는 동일한 변경과 함께 제거됩니다.
AI 기반 제품 표면
AI 제품 디자인은 이제 동일한 설문조사(37%)에서 세 번째로 수요가 많은 스킬입니다 — 모션 및 IA보다 앞서며 — 표면은 새롭습니다: 스트리밍하는 모델, 행동하는 에이전트, 틀릴 수 있는 답변. AI 제품 표면을 디자인하기 전에 AI_PRODUCT_PATTERNS.md를 읽으십시오.