WebGL이 열어준 웹 기술의 가능성.

최근에 영상편집 소프트웨어를 만들면서 크로마키 기능을 추가했습니다. WebGL로 구현해 두었는데요. 생각보다 완성도가 높아서 놀랐습니다. 60fps로 2~3개의 효과를 적용했음에도 부드러운 랜더링 성능을 보여주었습니다. 사실상 16ms 마다 리랜더링 되는 구조인데 끊김이 없다는 건 얼마나 빠른지 체감할 수 있습니다.

WebGL은 다루기 까다로운 기술이고 쉐이더라는 별도의 그래픽 언어를 공부해야 해서 진입장벽이 높습니다. 그렇기 때문에 전문분야에 맞는 라이브러리를 사용하곤 하는데요. 3D 분야에서는 three.js 그래픽 분야에서는 pixi.js가 대표적입니다. 따라서 사실상 웬만한 분야에서는 WebGL 자체를 다룰 일은 잘 없긴 합니다.

그럼에도 이번에 제가 개발한 크로마키 효과와 같은 특수한 목적으로 적용해야 하는 분야에서는 WebGL 그 자체를 다루어야 합니다. 기존 라이브러리에는 없는 기능도 구현해야할 필요가 있기 때문에 웬만하면 근본 기술을 사용하는 게 좋습니다. 그 이유로는,

미디어를 다루기에 용이합니다.

이미지&영상에 효과나 마스킹 이펙트, 컬러 그레이딩과 같이 복잡한 연산이 들어간다면 기존 JS로는 처리가 불가능합니다. (사실 가능하긴 하지만 엄청 느릴겁니다.) 따라서 미디어 연산을 하고자 할 때는 반드시 WebGL을 사용하셔야 합니다. 특히 최근에는 웹에 여러 눈부신 효과가 많이 적용되었기 때문에 눈이 높아진 소비자를 만족시키기 위해서는 미디어의 중요성은 나날이 증가할 걸로 예상됩니다.

단적으로 토스의 소개 사이트만 보셔도 몇 년 전에는 좋은 인터렉션 예시로 언급되었지만 lusion.co와 같은 페이지를 보면 역체감이 날 정도입니다. 해외에서는 이미 이러한 랜딩페이지를 구축해주는 여러 서비스들이 등장하고 있고 Spline과 같은 3D 디자인 툴의 사용처가 점점 늘어가는 추세입니다.

이러한 모든 효과는 사실상 WebGL이 기반 기술입니다. 쉐이더만 잘 공부해두어도 눈부신 효과는 쉽게 구현 가능합니다.

프론트엔드 웹 기술의 정점

저는 개인적으로 WebGL과 같은 그래픽 API가 프론트엔드 기술의 정점에 서있다고 봅니다. 잘 응용하면 딥러닝 프레임워크까지 개발할 수도 있거든요. Tensorflow.js가 대표적입니다. 특히 몇 년 전에는 WebGPU까지 도입되면서 작은 사이즈의 LLM도 웹으로 구동이 가능해졌습니다. WebGPU도 WebGL과 거의 비슷한 패러다임을 적용한 만큼 배워두면 인공지능까지 프론트엔드의 범위를 확장시킬 수 있습니다.

사실 웬만한 프론트엔드 로직은 AI로 쉽게 구현이 가능한 시대가 되었습니다. 최근에 o3-mini-high를 사용해 봤는데 의도대로 정확히 구현해 내는 걸 보고 이 정도면 디자이너가 프론트엔드를 해도 되는 시대가 왔다고 생각합니다. 단순하게 디자인 대로 개발하는 과정은 귀찮을 뿐이지 크게 어려운 과정은 아니니까요. 물론 컴포넌트 분리, 설계, 최적화등 실제 업으로 가져가려면 여전히 신경 써야 하는 부분들도 많지만 1차적으로 코드를 작성하는 일은 이제 AI가 대부분의 주니어 보다 훨씬 잘합니다.

그렇기에 시장 경쟁력을 가지기 위해서는 조금 더 복잡한 수준의 프론트엔드 기술을 공부해 보시는 걸 추천드립니다. 웹, 그중에서도 그래픽 기술은 여전히 발전하고 있는 중이고 해외에서는 네이티브 성능의 웹 도구들이 계속 출시되고 또 권장되는 수준입니다. 당장 제가 일렉트론으로 개발하고 있는 영상편집기조차도 왜 웹으로 개발하지 않았냐는 질문을 받을 정도였습니다.

WebGL은 상상 이상으로 흥미로운 기술입니다. 한 번 꼭 배워보시기를 추천드립니다.