플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 패럴랙스 레이어 translate3d 계산 시 모바일에서 will-change 메모리 최적화 - 라이트박스 열린 상태에서 배경 스크롤 잠금(body overflow:hidden) 처리 - 드래그 슬라이더에서 click 이벤트와 drag 이벤트 충돌 방지 로직 - 다크 배경에서 텍스트 가독성 확보를 위한 대비비 WCAG 기준 준수 2) 프로젝트 목표 - 풀스크린
프로젝트 성과
라이브러리 없는 패럴랙스 구현
mousemove + rAF 루프만으로 레이어별 깊이감을 표현하는 패럴랙스를 설계합니다.
React Portal 라이트박스 구현
z-index 충돌 없이 body에 독립 마운트하는 접근성 지원 라이트박스 컴포넌트를 구현합니다.
Pointer Events 통합 드래그/스와이프 슬라이더
마우스·터치·스타일러스를 단일 Pointer Events API로 처리하는 슬라이더를 설계합니다.
Intersection Observer 섹션 진행 인디케이터
10단계 threshold 배열로 섹션 진입률을 감지하여 실시간 스크롤 진행 바를 구현합니다.
핵심 기능
풀스크린 히어로 (패럴랙스 + 타이핑 효과)
마우스 이동에 반응하는 패럴랙스 레이어와 타이핑 애니메이션 텍스트로 첫인상을 구성합니다
진행 단계
프로젝트 구조 및 라우팅 설계
2026.04
React 컴포넌트 트리와 해시 기반 싱글페이지 라우팅 구조를 설계합니다.
프로젝트 상세
1) 포트폴리오 소개 테크 스타트업 도메인에서 고품질 인터랙티브 웹 제작 역량을 증명하는 데모입니다. 풀스크린 히어로 비디오 배경, 마우스 패럴랙스 효과, 제품 갤러리 라이트박스, 팀 소개 슬라이더를 React 컴포넌트로 구현하여 AI 기업 홈페이지에 적용 가능한 인터랙션 수준을 설계할 예정입니다. 2) 작업 범위 - 풀스크린 히어로 (패럴랙스 + 타이핑 효과): 마우스 이동에 반응하는 패럴랙스 레이
