Shaders가 10월 6일 렌더링 엔진과 셰이더 컴포넌트, 프레임워크 바인딩을 MIT 라이선스로 공개했어요. 이제 에디터에서 만든 WebGPU 효과를 React·Vue·Svelte·Solid·JavaScript 코드로 내보내 프로젝트에 붙일 수 있어요. 발표 게시물은 200개가 넘는 WebGPU 컴포넌트와 프레임워크 코드 내보내기도 소개합니다.
먼저, MIT로 공개된 범위를 구분해 볼게요
MIT 라이선스가 적용되는 건 렌더링 엔진, 셰이더 컴포넌트, React·Vue·Svelte·Solid·JavaScript 바인딩 같은 소프트웨어예요. 공식 저장소는 CLI와 공개 패키지도 MIT 대상으로 안내하고 있어요. 상업 프로젝트에 코드를 쓸 수 있고, MIT 조건에 따라 저작권과 라이선스 고지는 함께 보존해야 해요.
그렇다고 Shaders의 모든 시각 자료가 MIT이거나 무료라는 뜻은 아니에요. Pro 프리셋·컬렉션·섹션은 오픈소스 코드와 별도인 콘텐츠예요. 라이선스에는 Free로 표시된 콘텐츠는 무료로 내보내 상업 프로젝트에 쓸 수 있다고 나와 있지만, 나머지 프리셋과 모든 섹션은 열기·내보내기 등에 Pro가 필요해요. 콘텐츠를 템플릿이나 프리셋 라이브러리처럼 다시 배포하는 것도 허용되지 않으니, 코드 라이선스와 콘텐츠 이용 조건을 따로 확인해 주세요.
에디터에서 효과를 쌓고 익숙한 코드로 가져와요
Shaders는 그라디언트와 노이즈, 유리·금속 질감, 왜곡, 마스크와 블렌드, 커서 반응 같은 효과를 컴포넌트처럼 조합하는 도구예요. 캔버스에서 레이어와 속성을 조정한 뒤 결과를 프레임워크 코드로 내보내면 돼요. 셰이더 언어를 처음부터 작성하지 않아도 여러 시각 방향을 빠르게 비교할 수 있고, 직접 만들고 싶은 팀은 TypeScript와 WGSL로 확장할 수 있어요.
시작은 프로젝트에서 패키지를 설치하고 필요한 바인딩을 가져오는 방식이에요.
npm install shadersCLI로는 프로젝트 연결, 컴포넌트 탐색과 설치, 미리보기, 업데이트를 할 수 있어요. 공식 저장소는 에이전트가 라이브러리를 찾고 설치하도록 CLI skill과 MCP 연결 방법도 안내합니다. 다만 Pro 라이브러리에 접근하는 권한은 기본 코드 사용 및 내보내기와 구분돼요.
출처: X @npm_i_shaders의 오픈소스 출시 게시물. 첨부된 공식 영상은 X 게시물에서 확인할 수 있어요.
붙이기 전에 브라우저와 렌더링 방식을 확인해요
Shaders 렌더러는 WebGPU를 사용하고 WebGL fallback은 제공하지 않아요. WebGPU를 지원하지 않는 브라우저나 기기에서는 캔버스가 투명하게 남을 수 있으니, 정적 배경이나 이미지 같은 fallback도 함께 준비해 두는 편이 좋아요. 특히 모바일에서는 효과 수와 GPU 사용량을 목표 기기에서 확인해 주세요.
React·Next.js 프로젝트에서는 브라우저에서만 렌더링되도록 클라이언트 컴포넌트로 분리하거나 해당 영역의 SSR을 피해야 해요. 또 공개된 소프트웨어 코드와 Pro 콘텐츠는 라이선스가 다르니, 어떤 프리셋과 섹션을 쓸지 정한 뒤 적용 범위와 재배포 조건을 살펴보세요.
