[포트폴리오] 웹의 차원을 넘다, Three.js & GSAP 기반 3D 인터랙티브 사이트 (Creative Dimension)

안녕하세요, '둥둥'입니다. 🌌

웹사이트는 더 이상 평면적인 정보 전달 수단에 머무르지 않습니다. 오늘 소개해드릴 포트폴리오는 최신 웹 트렌드 기술인 **WebGL(Three.js)**과 **스크롤 인터랙션(GSAP)**을 접목하여 만든 3D 몰입형 웹사이트입니다.

프로젝트명은 'Creative Dimension'. 사용자가 스크롤을 내림에 따라 3D 오브젝트가 반응하고, 마치 우주 공간을 유영하는 듯한 경험을 제공하는 것을 목표로 제작했습니다.

※ Check: 이 사이트는 저의 **프론트엔드 개발 기술력(인터랙티브 웹)**을 보여드리기 위해 제작한 **'개인 포트폴리오용 가상 프로젝트'**입니다.

---

🔮 프로젝트 컨셉: Infinite Possibility (무한한 가능성)

"상상을 현실로 만드는 3D 웹 경험"

일반적인 웹사이트의 틀(Layout)을 깨고, 화면 전체를 캔버스로 활용했습니다. 깊이감 있는 우주 배경과 중앙에 부유하는 3D 오브젝트를 통해, 혁신적이고 미래지향적인 브랜드 이미지를 표현했습니다.

💻 핵심 구현 기술 (Technical Stack)

이 프로젝트는 단순한 코딩을 넘어 수학적 계산과 그래픽 렌더링 기술이 접목되었습니다.

1. Three.js를 활용한 3D 공간 구현 웹 브라우저상에 3D 그래픽을 구현하기 위해 Three.js 라이브러리를 사용했습니다.

• Particle System: 3,000개의 입자(Star)를 랜덤한 위치에 생성하여 깊이감 있는 우주 공간을 연출했습니다.
• Geometric Mesh: 중앙의 와이어프레임 오브젝트(Icosahedron)가 마우스의 움직임에 따라 미세하게 회전하는 패럴랙스(Parallax) 효과를 적용했습니다.

2. GSAP ScrollTrigger를 통한 스토리텔링 스크롤은 사용자와 웹사이트가 소통하는 가장 중요한 수단입니다. GSAP ScrollTrigger를 사용하여, 스크롤을 내릴 때마다 3D 오브젝트가 커지거나 회전하고, 텍스트가 부드럽게 떠오르는 애니메이션을 동기화했습니다.

3. 성능 최적화 (Optimization) 화려한 그래픽을 사용하지만 버벅거림이 없어야 합니다. BufferGeometry를 사용하여 렌더링 비용을 최소화했고, requestAnimationFrame을 통해 모니터 주사율에 맞는 부드러운 프레임을 유지하도록 최적화했습니다.

---

🖥️ 결과물 직접 확인하기

평면적인 이미지는 이 사이트의 매력을 10%도 담지 못합니다. 아래 링크를 클릭해서 마우스를 움직이고 스크롤을 내려보세요. 웹사이트가 살아 움직이는 경험을 하실 수 있습니다.

👉 [3D 인터랙티브 샘플 사이트 입장]
https://changjunyun.github.io/sample_test4/

---

📷 리소스 출처 (Resources)

본 프로젝트의 모든 3D 그래픽과 배경 효과는 외부 이미지를 사용하지 않고, **순수 JavaScript 코드(Three.js)**로 실시간 렌더링하여 제작했습니다.

---

🤝 제작 의뢰 및 문의

"남들과는 다른, 압도적인 비주얼의 웹사이트가 필요하신가요?"

• 브랜드의 혁신성을 보여줘야 하는 기업 소개 페이지
• 제품을 3D로 보여주고 싶은 프로모션 사이트
• 사용자의 시선을 3초 안에 사로잡는 인터랙티브 웹

일반적인 홈페이지 제작을 넘어, 기술과 예술이 결합된 웹사이트를 구현해 드립니다. 제작 가능 여부나 기술적인 궁금증이 있으시다면 언제든 문의주세요.

[카카오톡 1:1 제작 문의] 👇👇👇 https://open.kakao.com/o/sizsMV9h

여러분의 아이디어를 새로운 차원(Dimension)의 웹사이트로 실현해 드리겠습니다. 감사합니다!