플러스프로젝트 배경
1) 배경 - 패브릭과 소재의 질감을 정적인 이미지보다 입체적으로 보여주는 브랜드 사이트를 시연하기 위해 제작했습니다. - 실제 고객사 의뢰가 아닌 자체 데모 프로젝트입니다. 2) 목표 - 실시간 3D 조형물과 에디토리얼 레이아웃을 한 화면 경험으로 연결 - 데스크톱과 모바일에서 동일한 브랜드 인상 유지 - 모션과 WebGL을 사용하면서 접근성과 대체 화면 확보 3) 주안점 - 외부 이미
프로젝트 성과
모션 회귀 검사 통과
포인터 이동 34.4%, 정지 0.05%, 주름 애니메이션 29.0%로 동작과 안정 상태를 자동 검증했습니다.
핵심 기능
실시간 3D 패브릭 조형물
정점 셰이더로 주름과 변형 노멀을 계산하고 포인터·스크롤 입력에 반응하도록 구성했습니다. 모션 최소화 설정과 WebGL 대체 화면도 제공합니다.
진행 단계
기획·디자인·개발·검증
2026.08.
콘셉트 설계부터 3D 셰이더, 반응형 구현, 한국어 조판, 브라우저·모션 회귀 검증까지 전 과정을 직접 수행했습니다.
프로젝트 상세
의류·패션 브랜드가 소재의 질감과 제작 공정을 몰입감 있게 전달할 수 있도록 만든 자체 데모 랜딩페이지입니다. Next.js 16과 React Three Fiber를 사용해 실시간 WebGL 패브릭 조형물을 구현했습니다. 정점 셰이더에서 주름과 변형 노멀을 계산하고, 마우스 시차·스크롤 리빌·카드 호버·모바일 메뉴를 연결했습니다. 텍스처 라이브러리, 제작 공정, 납품 포맷, 문의 영역을 반응형 한
