Shaders

예시 체험

고1 정보 — 오로라가 흐르는 수업 도입 화면 만들기

꾸민 수업 예시 직접 생성 — 에이전트 제작 새 창에서 크게 보기

선생님이 입력한 내용

고등학교 1학년 정보 '웹 콘텐츠 제작' 단원 도입. 교사가 개인 노트북에서, 수업 첫 화면에 띄울 웹페이지를 준비한다. 화면 전체에 보랏빛 하늘과 초록 오로라가 천천히 흐르는 배경을 넣고 그 위에 수업 제목 글자를 올리려는 상황이다.

고등학교 1학년 정보 '웹 콘텐츠 제작' 단원 도입 화면을 만들고 싶어요. 화면 전체에 보랏빛 하늘과 초록 오로라가 천천히 흐르는 배경을 WebGPU 컴포넌트로 깔고, 그 위에 '빛으로 그리는 웹 화면'이라는 제목과 한 줄 안내를 넣어 주세요. 학생들이 페이지를 열었을 때 배경이 천천히 움직이는 게 보이게 해 주세요.

나온 결과

레이어 순서(아래 → 위): MeshGradient(하늘) → Aurora(오로라) → SimplexNoise(옅은 입자) MeshGradient — colorA #0b0524 · colorB #2a1a55 · colorSpace oklch · count 4 · speed 0.35 Aurora — colorA #a533f8 · colorB #22ee88 · colorC #1694e8 · curtainCount 4 · intensity 85 SimplexNoise — scale 3 · opacity 0.12 · blendMode softLight 글자는 컴포넌트가 아니라 캔버스 위에 HTML로 얹는다(SKILL.md 안내).

직접 해 보기 — 3단계

1. opencode 같은 AI 에이전트에 저장소 안내대로 이 스킬(shaders)을 설치한다. 설치 없이 저장소의 문서(skills/shaders/SKILL.md)만 봐도 된다.
2. 학년·과목·단원과 화면에 넣을 배경 효과(보랏빛 하늘·초록 오로라)를 적은 문장을 붙여 넣는다. 위 문장을 바꿔 써도 된다.
3. 나온 컴포넌트 코드를 프로젝트에 넣고, WebGPU를 켠 최신 크롬·엣지에서 열어 배경 움직임과 글자 위치·크기를 확인한 뒤 색과 값을 고친다.

수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (shaders) · 확인일 2026-10-16. 이 스킬의 결과물은 완성된 그림이 아니라, 한 페이지의 배경을 이루는 WebGPU 컴포넌트 코드(위 AuroraHero.tsx)다. 그림은 그 코드를 실행해야 나온다. 이 스킬의 설치 절차(npx shaders connect·install)는 브라우저 로그인이 필요해 이 환경에서 그대로 돌리지 못했으므로, 스킬 안내(SKILL.md) 1번의 '컴포넌트 몇 개로 손수 조합하기' 방식대로 컴포넌트 트리를 직접 작성했다. 또 이 라이브러리는 WebGPU가 있어야 그리는데, 이 캡처 환경에서는 라이브러리 캔버스의 그림을 그대로 담지 못해, 같은 레이어 순서와 같은 색·값으로 원시 WebGPU 셰이더(aurora-hero.wgsl)를 직접 짜서 그린 화면을 캡처했다. 즉 화면은 라이브러리가 낸 결과가 아니라 스킬이 안내한 효과를 충실히 재현한 미리보기이고, 컴포넌트 코드가 스킬의 실제 산출물이다. 화면을 멈춘 시각(6.0초)과 색·값은 모두 수업용 예시 값이며 실제로 측정한 사실이 아니다. 오로라·노이즈의 움직임 자체는 이 캡처에 담기지 않았다. 이 코드는 WebGPU를 지원하는 최신 브라우저(크롬·엣지)에서만 배경이 나오며, 지원하지 않는 기기에서는 배경 없이 글자만 보이므로 수업 전에 학교 기기에서 미리 열어 확인해야 한다. 성취기준과 수업 흐름에 맞는지는 교사가 직접 확인한다.

써 보려면

1. 저장소 shader-effects-inc/shaders를 엽니다.
2. 이 기록에는 별도 설치가 필요하지 않다고 되어 있습니다.
3. 이 기록에는 API 키가 필요하지 않다고 되어 있습니다.

출처

스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 정보 정정 요청

라이선스