B16 몰입형 프론트엔드은(는) 무엇을 하나요?
방어 가능한 하나의 비주얼 아이디어를 중심으로 기억에 남는 경험을 만드십시오. 이 스킬은 더 큰 프로젝트 워크플로를 보완하며, 거버넌스, 기획, 빌드, 검증 또는 검토 스킬을 대체하지 않으며 B16 Dev OS를 재현한다고 주장하지 않습니다.
브리프 수립
질문하기 전에 사용 가능한 모든 컨텍스트를 분석하십시오. 증거가 뒷받침하는 경우에만 사실을 추론하고, 출처를 인용하거나 추론임을 명시하며, 방향을 실질적으로 바꿀 수 있는 정보에 대해서만 질문하십시오. 방향이 아직 승인되지 않은 경우 briefing.md를 사용하십시오.
구현 전에 시각적 명제, 콘텐츠 계층 구조, 히어로 초점, 타이포그래피, 팔레트, 레이아웃 리듬, 모션 내러티브, 예상 스택, 성능 예산, 대체 수단, 에셋 출처 및 제외 사항을 다루는 간결한 방향을 제시하십시오. 이 방향에 대한 승인을 받으십시오. 개념에 대한 승인을 배포, 구매, 계정, 토큰 또는 관련 없는 시스템 변경에 대한 허가로 간주하지 마십시오.
의도를 가지고 설계하십시오
- 먼저 모바일 우선으로 시작하고, 더 큰 뷰포트에 맞게 구도와 안무를 확장하십시오.
- 정체성을 주제, 대상, 자료, 언어, 실제 콘텐츠에 기반을 두십시오. 일반적인 컴포넌트 키트 스타일을 피하십시오.
- 시각적 대담함은 한 가지 기억에 남는 곳에 집중하고, 나머지 지원 시스템은 규율 있게 유지하십시오.
- 능동적인 어조로 인간적이고 기술적으로 정확한 카피를 작성하십시오. 문장 케이스를 사용하고 em dash 구두점을 사용하지 마십시오. 증거, 파트너, 사용후기, 지표 또는 역량을 절대 허위로 만들지 마십시오.
- 프로젝트당 하나의 일관된 아이콘 패밀리를 사용하고, 스택 적합성, 정체성, 범위, 라이선스, 비용, 유지보수, 접근성, 무게를 고려하여 선택하십시오. 공식 또는 승인된 브랜드 마크를 사용하십시오. 스택이 지원하는 경우 실제 트리 쉐이킹을 통해 개별 아이콘을 가져오십시오.
- 모든 기본 작업을 호버 없이 작동 가능하게 만드십시오. 관련된 경우 터치, 키보드, 포커스, 활성, 로딩, 비활성화, 오류 및 빈 상태를 지정하십시오.
가장 작은 충분한 스택을 선택하십시오
모션, 2D 캔버스 또는 3D를 고려할 때 stack-selection.md를 읽으십시오. 변경이 정당화되고 승인되지 않는 한 현재 스택을 유지하십시오.
하나의 효과를 위해 WordPress에 React를 추가하지 마십시오. 어떤 라이브러리도 모든 사이트에 필수로 만들지 마십시오. 계획에 나타난다고 해서 의존성을 설치하지 마십시오. 간단한 트랜지션에는 CSS 및 플랫폼 API를, 컴포넌트 안무에는 Motion을, 의도적인 타임라인 또는 스크롤 시퀀스에는 GSAP with ScrollTrigger를, 까다로운 2D 장면에는 PixiJS를, 직접적인 WebGL에는 Three.js를, React가 이미 존재하고 선언적 장면 구성이 유용한 경우에는 React Three Fiber와 선택적인 drei 헬퍼를 선호하십시오. Lenis는 선택 사항이며 자동이 아닙니다.
ReactBits와 Codrops는 선택적 참조로만 사용하십시오. 재사용 전에 코드 및 에셋의 라이선스와 출처를 확인하십시오. 독창적인 종합을 선호하십시오. 라이선스가 있는 발췌문에 대해서는 필요한 고지를 보존하십시오.
빌드하기 전에 모션을 명세하십시오
의미 있는 모든 애니메이션에 대해 다음을 기록하십시오:
- 목적: 무엇을 설명하고, 우선순위를 정하고, 확인하거나 공간적으로 명확하게 하는지.
- 트리거: 로드, 진입, 클릭, 상태 변경, 포인터, 스크롤 또는 미디어 진행.
- 지속 시간 및 이징: 반복 및 중단 제한을 포함.
- 모바일 동작: 뷰포트, 거친 포인터, 터치, 배터리, 디바이스 성능에 따라 변경되는 사항.
- 대체: 축소 모션, JavaScript 미사용, 미디어 로드 실패, WebGL 손실, 또는 제약된 하드웨어에 대한 최종 정적 상태.
호버 전용 의미 및 장식적인 연속 모션을 피하십시오. 내비게이션, 주요 메시지 및 CTA는 애니메이션 완료 전에 작동해야 합니다. prefers-reduced-motion: reduce에서는 안정적인 최종 상태를 렌더링하고, 스크럽, 패럴랙스, 자동 재생 또는 부드러운 스크롤 동작을 줄이는 대신 제거하십시오.
성능 예산을 설정하십시오
구현 전에 프로젝트에 적합한 측정 가능한 예산을 설정하십시오. 초기 JavaScript, 미디어 무게, 글꼴 수, 애니메이션 동시 실행, 긴 작업, 레이아웃 이동, 최대 콘텐츠 타이밍, 프레임 안정성, GPU 메모리, 디바이스 픽셀 비율 및 열 비용을 고려하십시오.
캔버스 또는 WebGL의 경우 정적 포스터를 제공하고, 픽셀 비율을 제한하며, 화면 밖이나 숨겨졌을 때 일시 중지하고, 프레임별 할당을 피하며, 작거나 제약된 장치에서 작업을 줄이고, 컨텍스트 실패를 처리하며, 프레임, 옵저버, 리스너, 텍스처, 지오메트리, 재질, 렌더 타겟 및 렌더러 상태를 폐기하십시오. 의미 있는 콘텐츠와 컨트롤은 캔버스 외부 또는 독립적으로 유지되어야 합니다.
비례하여 구현하십시오
승인된 방향과 기존 프로젝트 규칙을 유지하십시오. 시맨틱 HTML과 실제 콘텐츠를 진실의 원천으로 유지하십시오. 가치를 추가하는 곳에서만 무거운 경험을 로드하십시오. 여러 시스템이 동일한 속성을 제어하지 않도록 범위를 지정하십시오. 최대 하나의 부드러운 스크롤 엔진을 사용하고, 그 가치가 복잡성을 능가할 때만 사용하십시오.
계획이 승인되기 전에 라이브러리를 설치하거나, 프로젝트를 수정하거나, 구현하지 마십시오. 구현이 승인되면 스택이나 에셋 추가 사항을 설명한 후에 추가하고, 프로젝트의 패키지 매니저와 잠금 파일을 존중하십시오.
정직하게 검증하십시오
구현 또는 검토 작업에는 verification.md를 사용하십시오. 모바일 및 데스크톱 스크린샷, 인터랙션 상태, 터치, 키보드, 포커스, 축소 모션, 정적 대체 수단, 로딩 및 실패 동작, 성능 증거, 정리 동작을 변경 규모에 비례하여 검사하십시오.
실제로 실행된 것, 통과한 것, 시각적으로 검사된 것, 검증되지 않은 것을 정확히 보고하십시오. 빌드, 브라우저 테스트, 접근성 검사, 디바이스 테스트 또는 성능 측정이 실행되지 않았는데 실행된 것으로 암시하지 마십시오.
참조 출처
이 지침은 독창적인 종합입니다. 권위 있는 문서 및 명확히 표시된 커뮤니티 영감에 대해서는 sources.md를 참조하십시오. 이 스킬을 통해 타사 스킬 코드를 설치하거나 실행하지 마십시오.