브라우저에서 바로 GLSL을 가지고 노는 새 놀이터, ShaderPad

셰이더라는 세계, 한 번쯤은 들어가보고 싶지만

개발자라면 '셰이더(shader)'라는 말을 어디선가 들어봤을 거예요. 게임이나 3D 그래픽에서 픽셀 하나하나의 색을 계산해내는 아주 작은 프로그램인데, GPU에서 병렬로 엄청나게 빠르게 돌아가요. Shadertoy라는 사이트 덕분에 '브라우저에서 셰이더 코드를 쓰면 바로 아름다운 그림이 나온다'는 경험을 해본 분도 꽤 있을 거고요. 근데 솔직히 진입 장벽이 꽤 있죠. GLSL(OpenGL Shading Language)이라는 생소한 언어, uv 좌표니 스텝 함수니 하는 수학스러운 개념들, 그리고 '내가 이걸 어디에 써먹지?' 하는 막연함 때문에 많이들 중간에 포기해요.

그런 분들에게 반가운 소식이 있어요. ShaderPad라는 새 웹 기반 셰이더 도구가 공개됐어요. 이름 그대로 '셰이더를 가지고 노는 메모장'이라는 느낌인데, 만든 사람은 아티스트이자 개발자인 Riley J. Shaw이고, 본인이 오랫동안 셰이더를 가르치면서 '이런 도구가 있었으면 좋겠다'고 쌓아온 고민을 녹여냈다고 해요.

기존 도구와 뭐가 다른가요

셰이더 놀이터 하면 대부분 Shadertoy를 떠올려요. 이건 훌륭한 사이트지만, 사실 많은 초보자들에게 좀 압도적이에요. 기본 템플릿부터 mainImage 함수에 iTime, iResolution 같은 uniform이 잔뜩 깔려 있고, 갤러리에 올라오는 작품들은 난이도가 박사급이라 처음엔 '나는 절대 못 하겠다' 싶은 기분이 들거든요.

ShaderPad는 이 부분을 의식적으로 덜어냈어요. 첫 화면에 미니멀한 에디터가 뜨고, 코드를 조금만 고쳐도 결과가 바로 옆에서 실시간으로 바뀌어요. 게다가 실시간 에러 메시지가 친절하게 나와서, GLSL 컴파일러가 토해내는 암호 같은 로그 대신 '이 줄에 세미콜론이 빠졌어요' 수준으로 읽기 쉽게 보여줘요. 초보자가 'GLSL은 그냥 C랑 비슷한 언어구나' 하고 느끼게 만드는 데 집중한 설계예요.

또 하나 특징은 이미지 입출력이에요. 로컬 이미지를 드래그해서 넣으면 바로 uniform 텍스처로 연결되고, 결과를 PNG나 WebM으로 내보낼 수도 있어요. 그러니까 '우와 예쁘다'에서 끝나지 않고, 실제로 SNS 프로필 배경이나 블로그 히어로 이미지로 써먹을 수 있다는 거죠. 이 '만들고 → 바로 쓴다'의 연결이 학습 동기를 크게 끌어올려요.

내부적으로는 어떻게 돌아갈까

기술 스택을 들여다보면 WebGL2(최근에는 WebGPU로 점점 넘어가는 추세지만 호환성 때문에 WebGL2가 여전히 현실적이에요) 위에서 fragment shader를 돌리는 구조예요. 사용자가 에디터에 GLSL 코드를 입력하면, 브라우저 안에서 그걸 컴파일해서 전체 화면을 덮는 사각형(fullscreen quad)에 입혀서 렌더링하는 거죠. 이때 에러가 나면 WebGL의 getShaderInfoLog로 받아온 메시지를 파싱해서 에디터 위에 오버레이로 표시해주는 식이에요. 코드 에디터는 Monaco나 CodeMirror 계열을 쓰고 있을 가능성이 높고요.

비슷한 도구로는 Shadertoy 외에도 GLSL Sandbox, The Book of Shaders Editor, 그리고 최근 WebGPU 기반의 Compute.toys 같은 것들이 있어요. ShaderPad의 위치는 이 중에서 '가장 부드러운 온보딩'을 지향하는 쪽이에요. The Book of Shaders가 교과서라면, ShaderPad는 그 교과서를 다 읽지 않은 사람도 일단 손부터 움직여볼 수 있는 노트 같은 느낌이에요.

한국 개발자에게는 어떤 의미일까

프론트엔드 개발자에게 셰이더는 '언젠가 배워두면 좋은데 급하진 않은' 주제로 분류되기 쉬워요. 그런데 요즘 웹 트렌드를 보면 상황이 좀 바뀌고 있어요. Three.js, React Three Fiber 기반 포트폴리오가 점점 흔해지고, 랜딩페이지에 들어가는 인터랙티브 배경도 대부분 셰이더 기반이거든요. 디자인 시스템 레벨에서 움직이는 그라디언트, 노이즈 텍스처, 파티클 이펙트 같은 것들이 CSS로는 한계가 있어서 결국 GLSL로 내려가게 돼요.

ShaderPad 같은 도구로 일단 GLSL 감각을 익혀두면, 나중에 Three.js에서 ShaderMaterial을 쓸 때도 훨씬 편해져요. 또 generative art나 라이브 코딩에 관심이 있는 분들에게는 좋은 연습장이 될 거고요. 교육 관점에서도 부트캠프 커리큘럼 보조 도구로 쓰기 좋아 보여요.

한 가지 덧붙이면, 셰이더 학습의 고전인 The Book of Shaders를 옆에 두고 ShaderPad에서 코드를 직접 타이핑해보는 조합을 추천해요. 책에 나온 예제를 복붙하는 것보다, 한 줄씩 직접 쳐보면서 숫자를 조금씩 바꿔볼 때 뇌에 훨씬 강하게 새겨지거든요.

마무리

셰이더는 아직도 많은 웹 개발자에게 '멀리 있는 별 같은 영역'이지만, ShaderPad처럼 부담을 덜어주는 도구들이 하나둘 나오면서 벽이 꾸준히 낮아지고 있어요. 여러분은 프론트엔드에서 셰이더를 직접 써볼 생각이 있으신가요, 아니면 여전히 라이브러리가 알아서 해주는 영역이라고 보시나요?