플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - Framer Motion layoutId 전환 시 목록과 상세 컴포넌트가 동시에 DOM에 존재하는 찰나가 생겨 레이아웃 이탈이 발생할 수 있으므로, AnimatePresence mode='wait'과 fixed positioning 전략으로 대응할 예정입니다. - i18next 동적 로드 시 언어 파일 캐싱이 없으면 전환마다 네트워크 요청이 발생하므로, sessionSt
프로젝트 성과
Framer Motion layoutId 공유 요소 전환 구현
목록 카드에서 상세 페이지로의 layoutId 공유 전환은 React 렌더 트리 구조에 민감하므로, AnimatePresence의 mode='wait' 설정과 컴포넌트 key 관리 전략을 사전에 설계할 예정입니다.
i18next 동적 언어 리소스 로드
초기 번들 크기를 줄이기 위해 언어별 JSON을 lazy import로 분리하고, 언어 전환 시 로딩 상태를 GSAP 로딩 인디케이터로 표시하는 UX를 설계할 계획입니다.
SVG 인터랙티브 세계지도 구현
SVG path 기반 세계지도에 팀 거점 좌표를 위경도→SVG viewBox 좌표로 변환하는 프로젝션 로직을 구현하고, 반응형 크기 변화에도 핀 위치가 정확하게 유지되도록 설계할 예정입니다.
다단계 폼 React state machine 설계
3단계 문의 폼 흐름을 React useReducer 기반 state machine으로 관리하고, 각 단계 전환에 Framer Motion의 exit/enter 애니메이션을 적용하여 사용자 경험을 부드럽게 설계할
핵심 기능
히어로 & 브랜드 인트로
에이전시의 글로벌 크리에이티브 정체성을 타이포그래피 중심 풀스크린 인트로로 표현합니다. GSAP SplitText와 CSS masking을 활용한 단계적 텍스트 reveal로 브랜드 첫인상을 설계합니다
진행 단계
인터랙티브 UX 기획 및 스토리보드
2026.04
다국어 콘텐츠 구조 설계, 케이스 스터디 데이터 모델 정의, 다단계 폼 state machine 설계
프로젝트 상세
1) 포트폴리오 소개 글로벌 크리에이티브 에이전시의 멀티브랜드 쇼케이스 웹사이트를 구현합니다. MVP 기능(스크롤텔링, 포트폴리오)에 다국어 지원, 미디어 타입 필터, 클라이언트 케이스 스터디 섹션을 확장하여 에이전시의 글로벌 역량을 효과적으로 전달할 예정입니다. 2) 작업 범위 - 히어로 & 브랜드 인트로: 에이전시의 글로벌 크리에이티브 정체성을 타이포그래피 중심 풀스크린 인트로로 표현합니다. -
