Hello, Interactive Developer: WebGL로 아트코딩 하기 | 인프콘2023

인프런 inflearn·인프콘 2023 2023·2023년·

#webgl#threejs#frontend#computer-graphics#shaders#creative-coding#interactive-web

AI 요약

연극·미디어아트에서 개발자로 전환한 발표자가 WebGL 기반 아트 코딩의 원리를 프론트엔드 개발자의 눈높이로 풀어낸다. GPU에서 도는 셰이더가 좌표와 픽셀 색을 계산하는 렌더링 흐름을 직접 짚고, Three.js로 복잡성을 낮춰 실제 작품에 이르는 경로를 보여준다.

핵심 포인트

프론트엔드가 서비스 UI를 넘어 그래픽 에디터·데이터 시각화 등으로 확장되는 흐름에서, 화려한 웹 경험을 만드는 크리에이티브 디벨로퍼·테크니컬 아티스트의 작업을 인터랙티브 개발로 정의
WebGL은 OpenGL ES 계열 표준을 Canvas로 브라우저에 연결하며, 자바스크립트의 CPU 연산 대신 GPU 병렬 처리로 매 프레임을 빠르게 그려 상호작용 많은 사이트에 적합
GLSL 버텍스 셰이더가 정점 좌표를, 프래그먼트 셰이더가 래스터화된 픽셀 색(0~1 RGBA)을 계산하고, 지구 텍스처의 육지 값을 반전해 초록·투명도를 조합하는 예제로 작은 셰이더 연산이 아트워크로 바뀌는 과정 시연
Three.js가 카메라·씬·지오메트리·머티리얼을 JS API로 감싸 복잡성을 낮추고, 기본 재질에 직접 셰이더를 결합해 3D 나무와 음악에 맞춘 파티클 작품 완성

왜 읽나CSS·Canvas의 표현 한계를 느낀 프론트엔드 개발자가 WebGL·셰이더·Three.js로 창작을 시작하려 할 때, 렌더링 원리부터 작품 완성까지 이어주는 입문 안내.

챕터별 상세

010:06 – 2:42

프론트엔드와 예술을 잇는 인터랙티브 개발

연극·미디어아트를 공부하다 코딩으로 작품을 만들며 개발자가 된 배경과 네이버웹툰에서 인터랙티브 기술을 연구하는 현재 역할을 소개한다. 프론트엔드는 서비스 UI뿐 아니라 그래픽 에디터, 데이터 시각화와 블록체인 등 다양한 영역으로 확장될 수 있다. 그중 화려하고 창의적인 웹 경험을 만드는 크리에이티브 디벨로퍼·테크니컬 아티스트의 작업을 인터랙티브 개발이라는 관점에서 살펴본다.

수상작과 포트폴리오의 화려한 웹사이트를 보며 CSS나 기본 Canvas 도형만으로는 원하는 표현을 만들기 어렵다는 한계를 겪는다. Unity와 컴퓨터 그래픽스를 공부하면서 목적에 맞는 도구가 따로 있고, 웹의 2D·3D 그래픽에는 WebGL과 이를 감싼 Three.js가 쓰인다는 사실을 알게 된다. 실제 인터랙티브 작품을 통해 Three.js를 배우면 복잡한 시각 경험도 브라우저에서 구현할 수 있음을 보여 준다.

WebGL은 OpenGL ES 계열의 표준 그래픽 API를 웹에서 사용할 수 있게 하며 Canvas를 통해 브라우저와 연결된다. DirectX·Metal·Vulkan 등 다른 그래픽 API와의 관계를 짚되, 프론트엔드 개발자는 WebGL의 역할과 흐름을 이해하는 데 집중하면 된다. 자바스크립트의 CPU 연산보다 GPU 병렬 처리로 매 프레임을 빠르게 그릴 수 있어 화려하고 상호작용이 많은 사이트에 적합하다.

Canvas에서 WebGL 컨텍스트를 얻은 뒤 GLSL로 작성한 버텍스 셰이더가 정점 좌표를 만들고, 래스터화된 영역의 각 픽셀 색은 프래그먼트 셰이더가 계산한다. 색상은 0에서 1 사이의 RGBA 값으로 표현되고 블렌딩과 프레임 버퍼를 거쳐 화면에 표시된다. 지구 텍스처의 육지 값을 반전하고 초록색과 투명도를 조합하는 예제로, 간단한 셰이더 연산이 독특한 아트워크로 바뀌는 과정을 설명한다.

Three.js는 WebGL의 복잡한 절차를 감싸 카메라·씬·물체·렌더러와 다양한 지오메트리·머티리얼을 자바스크립트 API로 제공한다. 기본 재질에 직접 셰이더를 결합하고 카메라·마우스·파티클을 조작하면 템플릿을 넘어 자신만의 표현을 만들 수 있다. 애니메이션에서 영감을 받아 3D 나무와 움직이는 파티클을 음악에 맞춘 작품으로 완성하며, 기초 강의와 레퍼런스를 따라 시작하되 가장 중요한 것은 아이디어와 창작하려는 마음이라고 말한다.