웹 그래픽 효과 200여 개 Shaders 무료 오픈소스 공개
웹에서 화려한 그래픽 효과를 만드는 Shaders가 오픈소스로 공개됐습니다. 200여 개의 WebGPU 컴포넌트를 웹사이트, 제품, 템플릿 등에 무료로 쓸 수 있고, 원하는 프레임워크용 코드로 내보낼 수도 있습니다.
Shaders는 WebGPU 셰이더 효과를 컴포넌트로 조합하는 라이브러리와 디자인 에디터입니다. 이번에 렌더링 엔진과 셰이더 컴포넌트 전체, 프레임워크 연동 코드가 MIT 라이선스로 풀렸습니다.
에디터는 왼쪽에 레이어, 오른쪽에 속성, 가운데에 무한 캔버스가 있는 익숙한 구조입니다. 시안을 복제해 나란히 비교하고, 캔버스를 아이폰 크기로 바꿔 모바일 화면도 바로 확인합니다.
효과는 질감, 재질, 스타일, 왜곡 등 9개 분류 198개 컴포넌트를 레이어처럼 겹쳐 만듭니다. 유리, 크롬, 홀로그램 같은 재질은 로고나 도형에 그대로 입힙니다. 완성하면 Vue, React, Svelte, Solid, JS, Framer로 내보내거나, Shaders MCP로 AI 에이전트에게 설치를 맡길 수 있습니다.
에디터와 코드 내보내기는 무료이고 개인·상업 프로젝트 모두 라이선스 없이 씁니다. 1,000개 넘는 프리셋과 55개 넘는 웹사이트 섹션은 유료 Pro로 남았습니다.
출처 Shaders 공식 발표·유튜브 투어 영상, GitHub shader-effects-inc/shaders
카드 내용
- 편집기코딩 없이 편집기에서 웹 효과를 만듭니다
효과를 레이어로 쌓고 색과 움직임은 옆 패널에서 바꿉니다. 화면을 키우고 줄이며 원하는 자리에 배치합니다.
출처: Shaders 공식 유튜브 「Quick Tour of the Shaders Design Editor」 - 컴포넌트 198개효과 198개가 9개 분류로 나뉩니다
질감 54, 스타일 31, 재질 효과 23, 왜곡 22개 등입니다. 화면은 배경을 칠하는 질감(Textures) 분류입니다.
출처: shaders.com 컴포넌트 문서 화면 - 재질 효과유리, 크롬, 홀로그램을 원하는 도형에 입힙니다
재질 효과 23개는 도형이나 로고 위에 질감을 씌웁니다. 내 SVG 로고를 넣으면 그 모양대로 재질이 입혀집니다.
출처: shaders.com 컴포넌트 문서 화면 - 효과 쌓기고른 효과를 레이어처럼 겹쳐 쌓습니다
글자, 재질 효과, 스타일 필터를 골라 위에 얹습니다. 영상에선 마우스를 따라 물결이 이는 효과를 더했습니다.
출처: Shaders 공식 유튜브 「Quick Tour of the Shaders Design Editor」 - 시안 비교셰이더를 복제해 시안을 나란히 놓고 고릅니다
색을 직접 바꾸거나 무작위 색 버튼으로 새 조합을 찾습니다. 한 캔버스에 시안 여러 개를 두고 비교합니다.
출처: Shaders 공식 유튜브 「Quick Tour of the Shaders Design Editor」 - 모바일 확인캔버스를 아이폰 크기로 바꿔 모바일 화면을 바로 봅니다
기기 크기를 고르면 캔버스가 그 비율로 바뀝니다. 끌어다 놓는 대로 배포용 코드가 만들어집니다.
출처: Shaders 공식 유튜브 「Quick Tour of the Shaders Design Editor」 - 내보내기React·Vue 코드로 내보내거나 AI 에이전트에게 설치를 맡깁니다
Svelte, Solid, JS, Framer로도 내보낼 수 있습니다. Shaders MCP에 프롬프트를 붙이면 에이전트가 설치합니다.
출처: Shaders 공식 유튜브 「Quick Tour of the Shaders Design Editor」 - 프리셋 (Pro)완성된 셰이더 1,000개 넘게 골라 쓸 수도 있습니다
배경, 로고 효과, 이미지 효과로 나뉜 프리셋 모음입니다. 이 라이브러리는 유료 Pro 요금제에 들어 있습니다.
출처: shaders.com 프리셋·섹션 화면(Pro)
