요약
Shaders는 200개 넘는 WebGPU 시각 효과를 여러 프레임워크용 컴포넌트로 묶어 MIT 라이선스로 공개했습니다.
셰이더 이펙츠라는 회사가 shaders.com에서 운영하는 웹 그래픽 도구의 엔진과 컴포넌트를 GitHub에 풀었습니다. 셰이더(GPU에서 돌아가는 그래픽 프로그램)를 직접 짜지 않고도 웹페이지에 움직이는 배경이나 커서 효과를 넣게 해 주는 도구입니다.
왜 중요한가
- WebGPU(브라우저에서 GPU를 직접 쓰는 웹 표준) 효과를 셰이더 코드 대신 컴포넌트 몇 줄로 쓸 수 있습니다.
- 엔진과 컴포넌트는 무료로 열고 프리셋과 일부 편집 기능은 유료로 남기는 방식입니다.
핵심 내용
<Shader>하나가 캔버스를 만들고, 그 안의 자식 컴포넌트가 GPU에서 위에서부터 섞이는 레이어가 됩니다.- 그라데이션, 노이즈, 유리, 금속, 빛, 왜곡, 블러, 커서 효과 등을 겹치고 섞고 가릴 수 있습니다.
- shaders.com 편집기에서 값을 조정해 커서나 타임라인에 연결한 뒤 프레임워크별 코드로 내보낼 수 있습니다.
npx shadersCLI와 코딩 에이전트용 MCP 서버, llms.txt 문서도 함께 제공합니다.- 유료 Shaders Pro는 1,000개 넘는 프리셋, 55개 넘는 웹사이트 섹션, Framer 원클릭 설치 등을 더합니다.
HN 반응
- 보기엔 멋지지만 소용돌이 무늬 화면보호기 같아 쓸모가 애매하고, 노트북 성능과 배터리만 잡아먹는다는 비판이 많았습니다.
- "1만 6천 명이 쓴다"는 문구가 일주일 된 저장소와 맞지 않는다는 지적에는, 기존 유료 제품을 최근에야 오픈소스로 풀었기 때문이라는 설명이 붙었습니다.
제품과 페이지는 전문적으로 보입니다. 하지만 셰이더 자체가 몹시 이상합니다. 그냥 빙글빙글 도는 무늬일 뿐이에요. 만든 분은 게임에서 영감을 좀 얻는 게 좋겠습니다. 게임이 셰이더를 온갖 효과에 쓰는 데는 이유가 있으니까요.
특히 텍스처를 활용한 셰이더가 있을 줄 알았습니다. 레이저로 마감한 듯한 금속 질감 버튼이 페이지의 조명에 따라 실제로 달라지는 모습이나, 사진에 마스크를 겹쳐서 제품에 아우라 같은 효과를 입히는 히어로 이미지 같은 걸 기대했거든요. 지금 있는 건 전부 화면보호기로 보입니다.
진심으로 궁금합니다. 사람들이 정말 이런 HTML 스타일 문법을 선호하나요?
React와 그 일파가 이걸 표준으로 만들어 놓았다는 건 압니다. 저는 최근에 WebVR 컴포넌트를 만들 수 있는 A-Frame을 써 봤는데, 거기서도 장면을 이렇게 선언합니다.
솔직히 좀 과하다는 생각이 듭니다. 객체와 속성을 정의하고 셰이더나 장면을 프로그래밍 방식으로 조합할 수 있는 JS API가 더 낫지 않을까요? (Shaders도 그런 API를 제공한다고 들었습니다. 원칙적인 얘기로 여쭙는 겁니다.)
저는 개인적으로 상관없습니다. 다만 이런 작업에서 JSX의 가장 큰 장점은 (React Three Fiber를 보세요) 구성하기 쉽고 규모가 큰 프로젝트를 구조화하기 쉽다는 점이라고 봅니다.
R3F 프로젝트에서는 결국 프레임마다 도는 애니메이션을 useFrame 훅 안에서 일반적인 선언형 속성 API로 처리하는 경우가 많습니다. 루프 안에서 props를 조정하는 건 성능에 좋지 않으니까요. 그래서 JSX는 객체의 계층과 중첩을 쉽게 파악하고, 새 요소를 빠르게 마운트·언마운트하는 수단이 됩니다.
(추가로) 자바스크립트 없이 HTML 안에서 같은 데이터를 json으로 불러올 수 있으면 좋겠습니다. JSON이 JavaScript Object Notation이라는 건 압니다. 그러면 직렬화된 형태가 아니라 깔끔한 데이터 구조로 볼 수 있을 테니까요. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template 같은 걸 쓰면 되지 않을까요?
저는 이쪽이 더 읽기 쉽다고 느낍니다. 반복되는 문법이나 부모에 자식을 붙이는 코드 같은 게 없어지니까요. 그래도 결국 취향 문제라고 생각합니다.
3천 달러짜리 맥북을 쓰는데, shaders.com에서 스크롤하니 몇 프레임 동안 화면이 비면서 버벅이다가 나머지가 렌더링됐습니다. 제대로 된 웹사이트라면 받아들일 수 없는 성능이에요. 그래도 웹 쓰레기(webshit)가 해마다 새로운 경지에 오르는 건 감탄스럽네요.
웹 3D API는 등장한 이래로, 어느 플랫폼이든 줄곧 이래 왔습니다.
웹사이트는 브라우저가 무엇을 하는지 통제할 수 없으니, 클라이언트에서 실제로 성능이 어떻게 나올지는 짐작하는 수밖에 없습니다. 네이티브 애플리케이션은 버그나 다양한 하드웨어를 우회할 수 있는 것과 대조적이죠.
저는 (사파리에서) 페이지 전체가 먼저 뜨고 잠깐 뒤에 셰이더가 나타납니다. 이상적이진 않지만, HTML에 정적 이미지를 넣어 두었다가 JS가 실행되면 교체하는 식으로 완화할 수 있을 것 같습니다.
몇 프레임이요?
세상에, 끔찍하네요.
그런데 저장소의 첫 커밋이 일주일 전이라고요?
랜딩 페이지를 읽어 보니 이 제품은 얼마 전에야 오픈소스로 공개됐습니다. 그래서 어긋나 보이는 거라고 생각합니다.
누가 오픈소스로 공개했다는 건가요? 독립된 회사였나요, 아니면 Figma 같은 곳에서 분사한 건가요? 그 도메인을 살 정도면 꽤 돈을 벌고 있었을 것 같은데요.
20년 전 프런트엔드 개발자들이 "프런트엔드는 진짜 프로그래밍이 아니다"라는 말을 정말 마음에 담아 뒀나 봅니다...
우리가 jQuery 스크립트를 보여 줬을 때 "잘했어" 하고 등이라도 두드려 줬다면 이 모든 일을 피할 수 있었을 텐데요!
농담은 그만하고, 인상적이네요!
시각적으로는 아주 멋진데, 이걸 눈요깃거리 이상으로 쓸 방법이 솔직히 잘 떠오르지 않습니다.
시각적으로 부하가 큰 작업을 할 때는 순수 JS로 다 처리하는 것보다 셰이더를 쓰는 편이 연산량이 훨씬 적어서, 렌더링 시간이 빨라지고 실시간 성능도 얻을 수 있습니다. 예를 들어 저는 튜링 패턴과 드로스테 이미지를 시각화하며 놀아 본 적이 있습니다.
화면보호기로는 따분한 제품을 살릴 수 없습니다. 클라이언트의 노트북을 녹이지 않으면서 눈요깃거리를 넣어야 한다면, 표준 CSS 변형이나 PixiJS만으로도 시각적 효과의 90%는 얻을 수 있습니다.
감사합니다.
WebGPU를 못 쓰는 사람은 이제 저 정도밖에 안 남은 것 같네요.
리눅스에서 크롬을 쓰는데, 아직 기본으로 켜져 있지 않아요.
데모가 작동하지 않는다면, 브라우저가 제대로 동작하고 있는 겁니다. 서드파티 쿠키를 차단하고 있는데, 이 사이트가 ev.shaders.com에 유효한 CORS 헤더를 내려주지 않기 때문입니다.
추상적인 장식용 셰이더가 넘쳐나는 건, 예전에는 틈새 분야라 접근하기 어려웠던 프로그래밍을 LLM이 구현해 주는 좋은 사례입니다. 결과가 완벽하진 않아도 충분히 쓸 만하고, 비전문가도 다이얼을 돌려 가며 쉽게 다듬을 수 있으니까요.
이제 LLM으로 만든 SaaS 제품 랜딩 페이지의 상징이 이런 겁니다. 마우스 위치에 따라 시각화가 은근히 바뀌면 가산점이죠.
GPU랑 CPU를 낭비하는 건 어떻게 생각하세요?
저도 다른 고참들만큼 AI 슬롭은 싫어하지만, 아름다움과 디자인은 중요합니다. 그리고 그 주관적인 성격을 이해하진 못하더라도 존중하는 것도 그만큼 중요하고요.
예를 들어 폭격하고 사람들을 감시하는 데 쓰는 것보다는, CPU와 GPU를 시각적인 용도에 쓰는 편이 훨씬 값지게 쓰는 겁니다.
... 제 배터리는 안중에도 없으시군요, 고맙네요.
저도 셰이더는 좋아하지만, 보통 글만 읽으려고 들어가는 웹 페이지에는 필요 없습니다.
이런 게 들어간 사이트는 최신 슈퍼컴퓨터가 아니면 어김없이 심하게 버벅이고, 슈퍼컴퓨터라 해도 모자랄 때가 있습니다.
오픈소스 저장소와 유료 제품의 경계가 어디인지 불분명합니다. 무엇이 어느 쪽인가요? 그리고 제품 없이 저장소만 쓸 수 있나요?
100% 확신하진 않지만, 툴박스 전체는 오픈소스이고 일부 프리셋과 미리 만들어진 컴포넌트만 여전히 유료로 막혀 있는 것으로 알고 있습니다.
그러니 이론상으로는 처음부터 직접 만들어 쓰는 걸 막을 방법은 없습니다.