브랜드 스튜디오 반응형 홈페이지
기업 홈페이지 신규 구축 요구사항(7페이지 반응형, 스크롤 인터랙션·모션 그래픽, Work 포트폴리오 쇼케이스, 인사이트 콘텐츠, 다국어 전환)을 기반으로 직접 구현한 프로젝트입니다.
프로젝트 개요
기업 홈페이지 신규 구축 요구사항(7페이지 반응형, 스크롤 인터랙션·모션 그래픽, Work 포트폴리오 쇼케이스, 인사이트 콘텐츠, 다국어 전환)을 기반으로 직접 구현한 프로젝트입니다.
작업 범위
- 메인 히어로 스크롤 인터랙션: 방문자가 스크롤할 때 헤드라인과 비주얼이 순차적으로 나타나는 브랜드 홈 화면입니다
- Work 포트폴리오 쇼케이스: 회사의 작업물을 카드 그리드로 소개하고, 카드 클릭 시 상세 정보를 오버레이로 보여주는 화면입니다
- 인사이트 블로그 프리뷰: 회사 인사이트(블로그) 글 목록을 카테고리별로 탐색할 수 있는 화면입니다
- 다국어 전환 & Contact 섹션: 언어 스위처로 한국어/영문 콘텐츠를 전환하고, 하단 문의 폼을 통해 연락을 남길 수 있는 화면입니다
주요 업무
- 메인 히어로 스크롤 인터랙션 화면: GSAP ScrollTrigger로 히어로 섹션 pin 및 패럴랙스 전환을 구현하고, Intersection Observer로 이후 섹션의 진입 애니메이션을 트리거합니다
- Work 포트폴리오 쇼케이스 화면: CSS Grid 기반 masonry 레이아웃과 hover 확대 인터랙션, 클릭 시 모달 오버레이로 상세 이미지·설명을 표시합니다
- 인사이트 블로그 프리뷰 화면: 카테고리 필터 chip과 카드 리스트를 구현하고, 스크롤 리빌 애니메이션으로 콘텐츠를 순차 노출합니다
- 다국어 전환 & Contact 섹션 화면: 언어 상태를 전역 컨텍스트로 관리해 페이지 전환 없이 문구를 교체하고, 문의 폼은 실시간 유효성 검증을 적용합니다
프로젝트 핵심 과제
스크롤 인터랙션이 많은 페이지에서 애니메이션 프레임 드랍 없이 부드럽게 동작하
GSAP 타임라인 최적화가 필요합니다
Work 포트폴리오 카드 수가 늘어날수록 masonry 레이아웃의 이미지 로딩 우선순위를 관리하는 전략이 필요합니다
언어별 콘텐츠 분량 차이(한국어↔영문 텍스트 길이)로 인한 레이아웃 깨짐을 방지하는 유연한 타이포그래피 설계가 필요합니다
다양한 디바이스에서 스크롤 인터랙션과 반응형 레이아웃이 동시에 자연스럽게 동작하
브레이크포인트별 애니메이션 분기 처리가 필요합니다
핵심 기능 상세
메인 히어로 스크롤 인터랙션
방문자가 스크롤할 때 헤드라인과 비주얼이 순차적으로 나타나는 브랜드 홈 화면입니다.
- GSAP ScrollTrigger로 히어로 섹션 pin + 패럴랙스 레이어 전환 구현
- Intersection Observer 기반 섹션별 진입 애니메이션(fade/slide) 트리거
- 스크롤 진행률에 비례한 텍스트 리빌을 커스텀 이징 함수로 처리
스크롤 위치에 따라 히어로 카피와 배경 레이어가 서로 다른 속도로 움직이는 패럴랙스 구조를 GSAP 타임라인으로 설계합니다.
Work 포트폴리오 쇼케이스
회사의 작업물을 카드 그리드로 소개하고, 카드 클릭 시 상세 정보를 오버레이로 보여주는 화면입니다.
- CSS Grid + aspect-ratio 기반 masonry 카드 레이아웃 구현
- hover 시 카드 확대와 그레이스케일→컬러 전환 인터랙션 적용
- 카드 클릭 시 포커스 트랩이 적용된 모달 오버레이로 상세 뷰 구현
카드 그리드에서 상세 오버레이로 전환되는 과정을 부드러운 확대 애니메이션으로 설계합니다.
인사이트 블로그 프리뷰
회사 인사이트(블로그) 글 목록을 카테고리별로 탐색할 수 있는 화면입니다. 카테고리 필터 chip과 카드 리스트를 구현하고, 스크롤 리빌 애니메이션으로 콘텐츠를 순차 노출합니다.
- 카테고리 필터 chip 클릭 시 카드 리스트를 애니메이션과 함께 필터링
- 스크롤 리빌(staggered fade-up) 애니메이션으로 카드 순차 노출
- 페이지네이션 + prefetch로 다음 페이지 콘텐츠를 미리 준비
필터 전환 시 카드가 사라지고 나타나는 과정을 FLIP 애니메이션 기법으로 자연스럽게 연결합니다.
다국어 전환 & Contact 섹션
언어 스위처로 한국어/영문 콘텐츠를 전환하고, 하단 문의 폼을 통해 연락을 남길 수 있는 화면입니다.
- React Context 기반 언어 상태 관리로 페이지 새로고침 없이 KR/EN 문구 전환
- 문의 폼에 실시간 유효성 검증(이메일 형식, 필수 항목) 적용
- 언어별 콘텐츠 JSON 분리로 신규 언어 추가 시 번역 파일만 교체 가능한 구조 설계
언어 전환 시 레이아웃 리플로우 없이 텍스트만 교체되도록 언어별 콘텐츠를 데이터 레벨에서 분리 설계합니다.
프로젝트 진행 단계
정보구조 설계 및 스크롤 모션 프로토타이핑 · 2026.09
7페이지 정보구조를 설계하고 GSAP 기반 히어로 스크롤 인터랙션 프로토타입과 애니메이션 타임라인을 정의합니다.
반응형 컴포넌트 및 Work·Insights 연동 · 2026.09
React 반응형 컴포넌트를 구현하고 Express API·Prisma 스키마로 Work·인사이트 데이터를 연동합니다.
다국어 처리 및 SEO 세팅 · 2026.09
언어별 콘텐츠 분리 구조를 적용하고 메타태그·사이트맵·OG 태그를 세팅합니다.
크로스 브라우저 QA 및 성능 점검 · 2026.09
주요 브라우저·디바이스에서 반응형과 스크롤 인터랙션을 검증하고 이미지 로딩을 최적화합니다.
개발 결과
기술적 주안점
- 스크롤 위치에 따라 히어로 카피와 배경 레이어가 서로 다른 속도로 움직이는 패럴랙스 구조를 GSAP 타임라인으로 설계합니다
- 카드 그리드에서 상세 오버레이로 전환되는 과정을 부드러운 확대 애니메이션으로 설계합니다
- 필터 전환 시 카드가 사라지고 나타나는 과정을 FLIP 애니메이션 기법으로 자연스럽게 연결합니다
