바이브 코딩으로 만든 복잡한 사이트: 랜딩 페이지 4개, '고급스러운' 효과를 위한 두 가지 방법, 그리고 스프라이트로 만든 3D 로고

저자 AlpinaGPT의 CPO이자 Alpina Digital의 AI 책임자인 Zhemal Khamidun은 AI 에이전트가 자신의 지시에 따라 코드를 작성하는 '바이브 코딩' 방식으로 복잡한 랜딩 페이지를 구축한 경험을 설명합니다. 그는 School of Techpred, 'Tochka Sborki' 컨퍼런스, 'AI Product Management' 과정(aimipt.ru), 그리고 개인용 페이지 등 네 개의 랜딩 페이지를 소개합니다. 이들은 두 가지 기술적 경로로 나뉩니다: 컨퍼런스 사이트는 외부 라이브러리 없이 손으로 작성한 바닐라 WebGL을 사용하고, 나머지 페이지들은 재사용 가능한 Three.js 엔진을 사용합니다. 사용된 도구 체인은 DESIGN.md 파일의 디자인 시스템, Claude Design에서 제작된 목업, 그리고 참조용으로 사용되는 핸드오프 번들(프로덕션 코드로 사용되지 않음)으로 구성됩니다. 또한 그는 최고 수준의 WebGL 사이트(dala.craftedbygc.com)를 다운로드하고, 축소된 자바스크립트를 읽기 쉽게 만든 후 27개의 셰이더를 추출하여 분석했습니다. 이를 통해 핑퐁 FBO를 이용한 GPGPU, InstancedMesh, 후처리 효과 등에 대해 배웠습니다. 그는 이러한 사이트를 직접 복제하는 것은 브랜딩과 라이선스 자산 문제로 어렵지만, 입자 변형과 같은 효과를 위한 레시피를 추출하는 것은 가치가 있다고 강조합니다. 기사는 또한 여섯 개의 사인파를 합산한 수면 셰이더가 특징인, 완전히 바닐라 WebGL과 CSS로 구축된 'Tochka Sborki' 랜딩 페이지와 파일 크기 및 코드 줄 수에 대한 세부 정보를 다룹니다.