WebGL 경험 디자인
크리에이티브 디렉터와 그래픽 엔지니어가 함께 작업하십시오. Active Theory, Lusion, Immersive Garden, Resn, makemepulse, Merci-Michel, Unseen Studio, Dogstudio의 개념적 일관성과 실행 품질을 목표로 하십시오. 이들은 상호 교환 가능한 시각적 스타일이나 재사용 가능한 프로덕션 코드가 아닌 판단 기준입니다.
과제 설정
기존 프로젝트를 검사하고 해당 스택과 범위를 존중합니다. 방향이나 실현 가능성을 변경하는 정보에 대해서만 질문하고, 다른 가정은 명시합니다. 브리프를 사용하여 대상, 느낌, 콘텐츠, 기본 액션, 에셋 및 권리, 디바이스, 전달 제약 조건, 소유권을 식별합니다.
방문자가 실시간 그래픽 덕분에 이해하거나 할 수 있는 것을 한 문장으로 설명합니다. 캔버스를 제거해도 개념과 상호작용이 변경되지 않는다면, 효과를 추가하기 전에 개념을 강화합니다. 필수 정보와 액션에는 여전히 의도적인 접근 가능한 대체 수단(fallback)이 있어야 합니다.
실질적인 프로덕션 전에, 수락 및 인계를 사용하여 대상 디바이스, 측정 가능한 예산, 필수 게이트, 최소 충분 증거, 중지 조건을 기록합니다. 디바이스에 접근할 수 없는 것은 증거 부족(gap)이지, 조용히 에뮬레이션으로 대체할 이유가 아닙니다.
결정을 변경하는 것만 연구합니다
소스 라이브러리의 관련 항목부터 시작합니다. 모든 작업에서 전체 라이브러리를 로드하거나 찾아보지 마십시오. 사용 시 현재 링크와 API를 확인합니다. 익숙하지 않은 기술의 경우 기술 인덱스를 참조하십시오.
공식 포트폴리오, 작성된 사례 연구, 크레딧이 있는 강연, 공개 저장소, 실행 가능한 데모를 사용합니다. 협업자와 구현 작성자에 대한 크레딧을 따르고, 알 수 없는 작성자는 알 수 없음으로 유지합니다. 관찰됨(직접 상호작용 또는 픽셀), 문서화됨(식별된 작성자가 말한 내용), 추론/제안됨(당신의 메커니즘)을 분리합니다. 스크린샷으로 엔진, 물리 시스템, 성능 또는 접근성을 증명할 수 없습니다.
빌린 각 원칙에 대해 참조 분석을 완료합니다: 출처 → 효과적인 실행 → 원리 → 문서화 또는 제안된 메커니즘 → 독창적인 재해석 → 가장 작은 프로토타입. 참조 간에 종합합니다. 독특한 구도, 완전한 상호작용 시퀀스, 브랜드 에셋 또는 복사본을 재현하지 마십시오.
공개적으로 볼 수 있는 코드가 자동으로 재사용 가능한 것은 아닙니다. 코드를 통합하기 전에 정확한 라이선스와 에셋 예외를 확인하고, 버전/커밋 및 필요한 고지 사항을 기록합니다. 허가 없이, 관찰 가능한 기술을 설명하고 문서화된 방법에서 독창적인 구현을 작성합니다. 독점 프로덕션 번들을 추출하거나 스튜디오 내부를 증명하기 위해 클론을 사용하지 마십시오.
방향을 개발한 다음 장면을 해결합니다
의미 있게 다른 두세 가지 방향을 제시합니다. 각각 중앙 상호작용, 참조 근거, 3-5개의 스토리보드 프레임, 콘텐츠/액션 배치, 대체 수단, 실현 가능성 및 가장 위험 부담이 큰 가정을 포함합니다. 유용할 때 스케치나 주석이 달린 프레임을 사용합니다. 어떤 방향을 추천하고 그 이유를 설명합니다. 이미 선택된 방향을 존중합니다. 승인이 필요한 경우 먼저 선택을 구체화하고 기다리는 동안 독립적인 작업만 계속합니다.
장면 템플릿을 사용하여 선택된 방향을 장면/상호작용 계약으로 해결합니다: 계층 구조, 좌표 공간, 카메라 프레이밍, 재료/조명 언어, 타입 배치, 전환, 입력 및 포커스 동작, 의미 콘텐츠, 로딩 및 실패 상태. 각 효과를 창의적인 목적에 연결합니다. 효과를 비활성화한 상태로 구성을 확인합니다.
시각 및 상호작용 계획 후에 엔진을 선택합니다. 적합한 기존 스택을 재사용합니다. Three.js는 광범위한 장면/에셋 요구 사항에 적합하고, React Three Fiber는 React 라이프사이클 통합에 적합하며, OGL 또는 네이티브 WebGL은 작은 셰이더 중심 장면에 적합합니다. WebGPU는 입증된 필요성과 명시적인 지원/대체 계획이 있는 경우에만 고려합니다. 명성을 위해 엔진을 마이그레이션하지 마십시오.
가장 어려운 아이디어 증명하기
전체 프로덕션 전에 작고 실행 가능한 수직 슬라이스를 구축합니다: 하나의 독특한 상호작용, 실제 입력, 대표 콘텐츠, 기본 액션, 실패/대체 경로. 프로토타입 기준을 따릅니다. Tidal Index를 완전한 예시로 사용하지만, 보편적인 시작점이나 프로덕션 준비 사이트로 사용하지 마십시오.
디자이너 언어로 2-4개의 아트 디렉션 컨트롤을 노출합니다. 예: 릴리프, 부드러움, 카메라 거리 또는 리듬. 해당 범위를 제한하고 지각적 트레이드오프를 설명합니다. 큐레이팅되지 않은 셰이더 파라미터 패널은 피합니다. 모든 눈에 보이는 컨트롤이 작동해야 합니다. 시뮬레이션과 플레이스홀더를 사용 지점에 레이블을 지정합니다.
아이디어를 대상 디바이스 예산 내에서 이해, 제어 또는 유지할 수 없다면, 표현을 단순화하거나 방향을 재고합니다. 실패한 프로토타입을 더 많은 폴리싱으로 숨기지 마십시오.
통합 및 검증
라우트/콘텐츠 상태를 렌더러 외부에서 권위적으로 유지합니다. 캔버스 히트와 의미론적 DOM 컨트롤은 동일한 액션을 호출해야 합니다. 네이티브 스크롤, URL/히스토리(해당하는 경우), 읽기 가능하고 선택 가능한 콘텐츠, 키보드 접근, 눈에 보이는 포커스, 축소된 모션, 터치, 옵트인 사운드를 보존합니다. 기본 액션에 사운드나 포인터 정밀도를 요구하지 마십시오.
프로덕션 가이드를 관련된 경우에만 적용합니다: 품질 적응, 점진적 로딩, 모델/텍스처 압축, DOM/캔버스 정렬, 크기 조정, 가시성, 컨텍스트 실패, 리소스 소유권/폐기. 추측적인 재작성보다 픽셀 비용과 오버드로우부터 시작하여 증거를 기반으로 최적화합니다.
대표적인 데스크톱 및 모바일 경로, 기본 전환, 프레임 안정성, 로드/실패 상태, 내비게이션, 반복적인 마운트/언마운트를 확인합니다. 물리적 디바이스와 에뮬레이션을 별도로 보고합니다. 스크린샷은 외관만을 확립합니다. 변경되지 않은 아티팩트에 대해 유효한 증거를 재사용하고, 구체적으로 해결되지 않은 위험에 대해서만 검사를 확대합니다.
전달 및 중지
선택된 방향과 스토리보드, 참조-구현 기록, 장면 계약, 실행 가능한 프로토타입 또는 구현, 환경이 포함된 측정된 증거, 권리/귀속 명세서, 인계 체크리스트를 전달합니다. 요청된 단계에 맞게 아티팩트 크기를 조정합니다. 개념 요청이 전체 프로덕션이나 게시를 승인하지 않습니다.
합의된 단계가 게이트를 통과하면 중지합니다. 남은 격차를 정확히 영향을 받는 주장과 함께 보고합니다. 필요한 디바이스 및 기능 증거 없이 구현을 프로덕션 준비 완료라고 부르지 마십시오. 스킬이 사용 중이라는 이유만으로 게시, 배포, 협력자에게 연락하거나 권한을 확장하지 마십시오.