삼각형 하나 그리는데 천 줄 쓰던 GPU 코딩, p5.js가 쉽게 푼다

요약 컴퓨터 그래픽스 프로그래밍은 최근 몇 년간 컴퓨터의 그래픽 처리 능력이 폭발적으로 증가하면서 입문 장벽이 극도로 높아졌습니다. 이제 GPU는 단순히 화면에 삼각형을 그리는 수준을 넘어 범용 병렬 컴퓨팅 플랫폼으로 진화했기 때문입니다. 예를 들어 불칸(Vulkan) 같은 최신 그래픽 API로 삼각형 하나를 맨땅에서 렌더링하려면 수천 줄의 코드가 필요할 정도여서, 대학 교수들과 교육자들 사이에서도 이를 어떻게 가르쳐야 할지 큰 고민거리였습니다. 이에 대한 해법으로 초기 학습에 당장 필요 없는 복잡한 부분을 감추고 점진적으로 걷어내는 '비계 학습(Scaffolded Learning)' 방식이 주목받고 있습니다. 하지만 기존 툴들은 저수준 API를 일부 감추더라도 여전히 정점(vertex)·프래그먼트(fragment) 셰이더 간의 데이터 흐름이나 CPU-GPU 간 데이터 전달, 새로운 셰이더 언어 습득 등 '고전적인 셰이더 파이프라인'을 학습자에게 요구해 시작부터 부담이 컸습니다. 예술가와 교육용으로 널리 쓰여온 p5.js 개발진은 이 격차를 메우기 위해 나섰습니다. 올해 초 WebGPU 실험 버전을 공개하고 버그 수정과 성능 개선을 거친 데 이어, 마침내 컴퓨트 셰이더(Compute Shaders)를 도입하기 시작했습니다. 이를 바탕으로 구축 중인 셰이더 시스템 'p5.strands'는 자바스크립트의 기본 루프, 조건문, 변수, 함수 호출 및 기초 수학 정도만 알면 곧바로 GPU 프로그래밍에 입문할 수 있도록 설계되었습니다. 학습자는 유니폼(Uniforms)이나 베어링(Varying) 같은 복잡한 파이프라인 개념을 당장 외우지 않고도 filterColor 객체 등을 조작해 직접 커스텀 필터를 만들고, 노이즈나 시간 함수를 적용해 반응형 제너레이티브 그래픽을 손쉽게 구현할 수 있습니다. 단순한 장난감에 그치지 않고 나중에 본격적인 엔지니어링 단계로 넘어갈 때 나쁜 습관을 다시 고칠 필요가 없도록 정교하게 추상화된 것이 특징입니다.