1. 무한한 확대 - 기획 및 기술 스택 선정
2025년 8월 2일
To Infinity
To Infinity - 무한한 확대
부산대학교 디자인앤테크놀로지전공 졸업전시를 위한 개인 작품 입니다.
프로젝트 기획
핵심 컨셉
"클로즈업을 한다는 행위는, 사실상 그 본질을 명확히 파악하려는 시도가 아닌, 해석이 불가능한 것에 대한 무한한 탐구이다."
이 컨셉을 바탕으로, 사용자가 웹캠 앞에 서면 실루엣이 파티클로 변환되고, 카메라가 확대되며, 그 끝에서 폭발 후 다시 무한한 우주만 남는 경험을 구현합니다.
작동 시나리오
- 초기 상태: 배경에 무한한 파티클 우주가 흐름
- 사람 감지: 웹캠 앞에 서면 실루엣이 파티클로 변환
- 카메라 확대: 천천히 앞으로 이동하며 실루엣을 관찰
- 폭발: 특정 지점에서 폭발 효과
- 전환: 검은 화면으로 전환 후 초기 상태로 복귀
기획 의도
- 인터랙티브성: 사용자 참여로 작품이 완성
- 시각적 몰입: 3D 파티클과 실시간 반응
- 철학적 메시지: 목적과 무한 탐구의 관계
기술스택 선정 이유
1. Three.js
선정 이유:
- WebGL을 추상화해 3D 구현이 빠름
- 파티클 시스템 지원
대안 고려:
- WebGL 직접 사용: 복잡도가 높아 개발 시간 증가
- Babylon.js: 기능이 많지만 프로젝트 규모에 비해 과함
- p5.js: 2D 중심, 3D 성능 한계
결론: Three.js가 프로젝트 요구에 가장 적합
2. MediaPipe Selfie Segmentation
선정 이유:
- 실시간 사람 분할 정확도가 높음
- 웹에서 바로 사용 가능
- Google 지원으로 안정성 확보
- 별도 서버 없이 클라이언트에서 처리
대안 고려:
- TensorFlow.js: 모델 구축/최적화 부담
- OpenCV.js: 무거움, 웹 최적화 부족
- PoseNet: 포즈 추정 중심, 실루엣 분할 부적합
결론: MediaPipe가 실루엣 기반 파티클 생성에 적합
4. 순수 JavaScript (ES6+)
선정 이유:
- 빌드 도구 없이 빠른 프로토타이핑
- 모듈화로 구조화 가능
- 브라우저 호환성 우수
- 디버깅 용이
대안 고려:
- TypeScript: 타입 안정성은 좋지만 초기 설정 부담 및 개인 프로젝트라 굳이 쓰지 않아도 된다고 판단. 처음 쓰는 Three.js에 타입까지 혼자 설정하며 하나하나 완벽하게 만들기에는 시간이..
- React/Vue: 이 프로젝트에는 과함
결론: 순수 JavaScript로 충분하며 개발 속도에 유리
5. HTML5 Canvas & WebGL
선정 이유:
- GPU 가속으로 고성능 렌더링
- 실시간 대량 파티클 처리 가능
- 브라우저 네이티브 지원
대안 고려:
- SVG: 3D/파티클 처리에 부적합
- CSS 3D: 성능과 제어력 한계
결론: WebGL이 3D 파티클 렌더링에 필수
기술스택 전체
- 클라이언트 사이드 처리: 서버 없이 동작
- 실시간 성능: WebGL 가속으로 부드러운 애니메이션
- 접근성: 브라우저만으로 접근 가능
- 배포 용이: 정적 파일 배포로 간단
예상 문제 및 도전
- 성능 최적화: 대량 파티클 처리
- 좌표 변환: 2D 웹캠 → 3D 공간 매핑
- 타이밍 제어: 시퀀스 동기화
- 브라우저 호환성: 다양한 환경 테스트