코딩 못하는 20년 차 디자이너가 AI로 2개월 만에 95개의 WebGL 실험작을 만든 방법

커뮤니티 반응

작성자의 결과물 퀄리티에 놀라워하며, 디자이너들에게 큰 영감을 주는 사례라는 반응이 지배적이다.

주요 논점

01찬성다수

AI가 디자이너의 창의적 한계를 없애고 직접 구현을 가능하게 한다는 점에 동의함.

합의점 vs 논쟁점

합의점

AI는 도구일 뿐, 최종 퀄리티를 결정하는 것은 사용자의 안목이다
반복적인 피드백 과정이 필수적이다

논쟁점

코드 이해 없이 AI에만 의존할 때 발생할 수 있는 유지보수 문제

실용적 조언

AI와의 대화 기록을 저장하여 프롬프트 인사이트를 보존하라
복잡한 시각 효과 구현 시 물리 엔진과 쉐이더를 적극 활용하라

섹션별 상세

작성자는 코딩 경험이 전혀 없는 상태에서 AI 도구를 통해 WebGL 실험을 시작했다. 초기에는 Git이나 커밋의 개념조차 몰랐으나, AI가 생성한 코드가 브라우저에서 의도대로 작동하는 것을 확인하며 복잡한 물리 기반 애니메이션과 파티클 엔진 구현으로 확장했다. 1월 한 달 동안에만 100회 이상의 커밋을 기록하며 단순한 동작 구현을 넘어 성능 개선과 시각적 완성도를 높이는 단계로 진화했다.

AI로 제작된 물리 기반 시계 실험작이 실행 중인 모니터 화면. — Screenshot본문에서 언급된 95개의 실험작 중 하나인 물리 기반 시계(Clocks driven by physics)의 실제 구동 모습을 보여준다. 디자이너가 코딩 없이 AI와의 협업만으로 도달한 시각적 완성도와 인터랙션 수준을 증명하는 근거로 활용된다.

결과물은 단일 프롬프트가 아닌 수십 번의 반복적인 대화와 피드백을 통해 완성됐다. "스케일을 키우지 마라", "시작점이 틀렸다", "기계적인 느낌이 난다"와 같은 구체적인 디자이너의 피드백이 AI의 코드와 충돌하고 협상하며 최종 결과물을 도출했다. 이 과정에서 프롬프트 자체가 가장 가치 있는 자산임을 깨닫고 대화 기록을 보존하기 시작했다.

기술적 구현 능력보다 '디자이너의 안목(Eye)'이 코딩 능력을 대체하는 핵심 역량으로 부상했다. 20년의 디자인 경험이 AI를 지시하는 방향타 역할을 하며, 무엇이 좋은 디자인인지 판단하는 능력이 실제 코드를 작성하는 행위보다 중요해졌다. 과거 After Effects로 애니메이션을 만들어 개발자에게 전달하던 방식에서 벗어나 직접 최종 결과물을 빌드하는 시대로의 전환을 시사했다.

용어 해설

웹 그래픽 라이브러리(WebGL): — 웹 브라우저에서 별도의 플러그인 없이 고성능 2D 및 3D 그래픽을 렌더링하기 위한 JavaScript API이다. GPU 가속을 활용하여 복잡한 시각 효과를 실시간으로 구현할 수 있게 해주며, 인터랙티브 아트와 게임 개발의 핵심 기술이다.
OpenGL 쉐이딩 언어(GLSL): — 그래픽 카드의 쉐이더를 제어하기 위한 C언어 기반의 고수준 언어이다. 픽셀 단위의 정교한 시각 효과나 물리 연산을 처리하는 데 사용되며, WebGL의 시각적 완성도를 결정하는 핵심 요소이다.
깃(Git): — 소프트웨어 개발에서 소스 코드의 변경 사항을 추적하고 관리하는 분산 버전 관리 시스템이다. 여러 버전의 코드를 안전하게 보관하고 협업할 수 있게 하며, '커밋(Commit)'을 통해 작업의 단위를 기록한다.
쉐이더(Shader): — 3D 그래픽에서 물체의 표면 처리, 조명, 그림자 등 시각적 효과를 계산하는 프로그램이다. GPU에서 직접 실행되어 매우 빠른 연산이 가능하며, 추상적인 예술적 효과나 사실적인 질감을 표현하는 데 필수적이다.
제너레이티브 아트(Generative Art): — 알고리즘, 수학적 규칙, 또는 AI 시스템을 사용하여 자율적으로 생성되는 예술 형태이다. 작가가 모든 요소를 직접 그리는 대신 시스템의 규칙을 설계하여 예측 불가능하면서도 정교한 결과물을 만들어낸다.

언급된 도구

WebGL추천

브라우저 기반 고성능 2D/3D 그래픽 렌더링

GLSL추천

쉐이더 작성을 위한 프로그래밍 언어

언급된 리소스

Demosabum.kr/lab