Kim JeongHyeonFrontend Focused Fullstack Developer
Works 페이지의 가로 스크롤 갤러리를 구현한 과정을 공유합니다.
작품 포트폴리오는 시간 순서가 아니라 시각적 임팩트 순서로 배치하고 싶었습니다. 가로 스크롤은 갤러리 관람처럼 자연스러운 탐색 경험을 줍니다.
<div className="gallery" ref={containerRef}>
<div className="slider" ref={sliderRef}>
{projects.map(project => (
<ProjectCard key={project.id} {...project} />
))}
</div>
</div>gsap.to(slider, {
x: () => -(slider.scrollWidth - window.innerWidth),
ease: "none",
scrollTrigger: {
trigger: container,
pin: true,
scrub: 1,
end: () => "+=" + slider.scrollWidth,
},
});핵심은 pin: true로 컨테이너를 고정하고, 세로 스크롤 양을 가로 이동으로 매핑하는 것입니다.
양방향 무한 스크롤을 위해 GSAP의 modifiers 플러그인을 활용합니다:
gsap.utils.toArray(".project").forEach((el, i) => {
gsap.to(el, {
x: () => -totalWidth,
modifiers: {
x: gsap.utils.unitize(gsap.utils.wrap(-cardWidth, totalWidth - cardWidth)),
},
});
});모바일(≤1024px)에서는 가로 스크롤을 비활성화하고 세로 스택으로 전환합니다:
@media (max-width: 1024px) {
.slider {
flex-direction: column;
transform: none !important;
}
}will-change: transform 남용 주의 — 모바일에서 메모리 이슈 가능ScrollTrigger.refresh()를 리사이즈 시 호출