[문제점]
- 일반적인 그리드 형태의 포트폴리오 사이트는 사용자의 체류 시간이 짧고, '기술적 구현 능력'을 직관적으로 증명하기 어려움.
- 다양한 디바이스 환경에서 고사양 그래픽 인터랙션을 구현할 때 발생하는 성능 이슈 해결 필요.

[프로젝트 목표]
- "보는 웹사이트"를 넘어 "만지는 웹사이트"로의 전환을 통해 사용자 참여 유도.
- 크리에이티브 그룹의 정체성을 대변하는 고난이도 WebGL 기술의 안정적 상용화.

[주안점]
- 심미적 아름다움과 기술적 성능(Performance) 간의 완벽한 균형점 확보.
- 프레임워크에 의존하지 않는 순수 TypeScript 기반의 모듈 설계를 통한 코드 경량화 및 유지보수성 증대.

1. 프로젝트 배경 및 문제점
- 기존의 정적인 텍스트 및 이미지 위주의 포트폴리오는 크리에이티브 그룹으로서의 기술적 역량과 디자인 감각을 보여주기에 한계가 있었습니다.
- 단순한 정보 전달을 넘어, 웹사이트 방문 자체가 하나의 브랜드 경험이 될 수 있는 차별화된 아이덴티티 구축이 필요했습니다.

2. 프로젝트 목표 및 과정
- Three.js와 WebGL 기술을 도입하여 사용자 인터랙션에 실시간으로 반응하는 몰입형 웹사이트 구축을 목표로 했습니다.
- 모바일과 데스크톱 환경 모두에서 끊김 없는 경험을 제공하기 위해 반응형 디자인과 성능 최적화를 최우선 과제로 삼았습니다.

3. 기술적 이슈 및 해결 방안
- 고해상도 유체 시뮬레이션(Fluid Simulation) 구현 시 발생할 수 있는 브라우저 성능 저하 및 모바일 발열 이슈가 있었습니다.
- IntersectionObserver API를 활용하여 화면 밖의 캔버스 렌더링을 일시 중지(Pause) 시키는 로직을 적용, 불필요한 리소스 낭비를 막았습니다.
- 모바일 환경에서는 호버 이펙트를 자동 제어하고 연산량을 조절하여 배터리 소모와 발열을 최소화하는 최적화 작업을 수행했습니다.
- 바닐라 TypeScript 환경에서도 유지보수가 용이하도록 클래스 단위로 UI를 모듈화하여 확장성을 확보했습니다.

4. 핵심 성과 및 결과
- 마우스 움직임과 자이로스코프(기울기)에 반응하는 독창적인 비주얼을 통해 당사만의 강렬한 브랜드 이미지를 각인시켰습니다.
- GLSL 쉐이더를 활용한 화려한 그래픽을 구현하면서도, 철저한 최적화를 통해 빠르고 부드러운 페이지 로딩 속도를 달성했습니다.
- 다중 필터링 시스템을 도입하여 사용자가 방대한 포트폴리오 자료를 직관적이고 빠르게 탐색할 수 있는 UX를 완성했습니다.

<위시켓 이용 약관에 의해 수정된 내용입니다.>