"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", img: "img", p: "p", pre: "pre", strong: "strong", ..._provideComponents(), ...props.components }, {StickyScrollAnimationDemoV2} = _components; if (!StickyScrollAnimationDemoV2) _missingMdxReference("StickyScrollAnimationDemoV2", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "랜딩페이지를 만들다 보면 한 번쯤 마주치는 패턴이 있다. 왼쪽에 이미지가 고정되고, 오른쪽에 텍스트가 있는데, 스크롤하면 콘텐츠가 전환되는 구조다." }), "\n", _jsx(_components.p, { children: "Google의 프로덕트 페이지나 Apple의 제품 소개 페이지에서 자주 볼 수 있다." }), "\n", _jsx(StickyScrollAnimationDemoV2, {}), "\n", _jsxs(_components.p, { children: ["언뜻 보면 간단해 보인다.\n한쪽을 ", _jsx(_components.code, { children: "position: sticky" }), "로 고정하고 다른 쪽을 스크롤하면 되지 않을까하고 접근할 수 있다."] }), "\n", _jsxs(_components.p, { children: ["하지만 직접 구현해보면 보이는 UX 저하 포인트가 있는데, 이미지와 텍스트가 ", _jsx(_components.strong, { children: "수평을 유지하는 시간이 너무 짧다" }), "는 것이다."] }), "\n", _jsx(_components.p, { children: "다음 콘텐츠가 바로 올라오면서 \"고정된 느낌\"이 사라진다. 왜 이런 현상이 발생하는지, 그리고 어떻게 해결하는지 깊이 들어가보자" }), "\n", _jsx(_components.h2, { id: "일반적인-접근-한쪽만-sticky", children: "일반적인 접근: 한쪽만 Sticky" }), "\n", _jsx(_components.p, { children: "가장 직관적인 방법이다. 이미지를 sticky로 고정하고 텍스트는 자연스럽게 스크롤되게 한다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n {FEATURES.map((feature) => (\n {/* 각 아이템 min-h-screen */}\n ))}\n

\n" }) }), "\n", _jsx(_components.p, { children: "겉보기엔 동작한다. 하지만 실제로 스크롤해보면 뭔가 어색하다." }), "\n", _jsx(_components.h2, { id: "왜-수평-유지가-안-되는-걸까", children: "왜 수평 유지가 안 되는 걸까?" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2026/02/01/5f5c2c36-2f54-4cb2-a683-4d790d50302e.png", alt: "" }), "\n문제의 핵심은 ", _jsx(_components.strong, { children: "콘텐츠가 스크롤되는 동안 \"머무는 구간\"이 없다" }), "는 것이다."] }), "\n", _jsx(_components.p, { children: "sticky인 이미지는 화면에 고정되어 있지만, 텍스트는 계속 흘러간다. 텍스트가 이미지와 수평이 맞는 순간은 스크롤 중 아주 짧은 찰나뿐이다." }), "\n", _jsx(_components.p, { children: "사용자 입장에서 보면, 텍스트 A가 올라오고 잠깐 수평이 맞다가(0.3초 정도?) 바로 텍스트 B가 올라온다." }), "\n", _jsx(_components.p, { children: "다시 수평이 맞고, 또 바로 다음 텍스트가 올라온다. 이런 식으로 계속 반복된다. 그렇다면 수평 유지 시간을 확보하려면 어떻게 해야 할까?" }), "\n", _jsx(_components.h2, { id: "시도-1-섹션-높이-늘리기", children: "시도 1: 섹션 높이 늘리기" }), "\n", _jsx(_components.p, { children: "각 텍스트 섹션의 높이를 늘리면 머무는 구간이 생기지 않을까" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n \n

\n" }) }), "\n", _jsxs(_components.p, { children: ["100vh에서 150vh로 늘렸다. 이론상 50vh만큼 여유가 생긴다. ", _jsx(_components.strong, { children: "결과는 실패다." }), " 높이를 아무리 늘려도 텍스트는 계속 움직인다. 사용자가 스크롤을 멈추지 않는 한, 텍스트는 계속 흘러간다."] }), "\n", _jsx(_components.p, { children: "근본적으로 \"텍스트가 고정되는 구간\"이 없다." }), "\n", _jsx(_components.h2, { id: "시도-2-usescroll--usetransform", children: "시도 2: useScroll + useTransform" }), "\n", _jsx(_components.p, { children: "Framer Motion의 스크롤 기반 애니메이션을 써봤다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const { scrollYProgress } = useScroll({ target: ref });\nconst y = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [100, 0, 0, -100]);\nconst opacity = useTransform(scrollYProgress, [0, 0.25, 0.75, 1], [0, 1, 1, 0]);\n" }) }), "\n", _jsx(_components.p, { children: "의도는 \"scrollYProgress가 0.2~0.8인 구간에서 y=0, opacity=1을 유지하면 \"머무는 느낌\"이 나지 않을까?\"였다." }), "\n", _jsxs(_components.p, { children: ["하지만, ", _jsx(_components.strong, { children: "이것도 실패다." }), " scrollYProgress는 스크롤 위치에 비례하는 값이다. 0.2와 0.8 사이에서 y=0이더라도, 스크롤하면 progress 값 자체가 계속 변한다."] }), "\n", _jsx(_components.p, { children: "즉, 콘텐츠가 고정되는 게 아니라 애니메이션 중간값이 유지되는 것뿐이다." }), "\n", _jsx(_components.h2, { id: "근본-원인-스크롤--고정", children: "근본 원인: 스크롤 ≠ 고정" }), "\n", _jsxs(_components.p, { children: ["여기서 깨달은 게 있다. ", _jsx(_components.strong, { children: "스크롤 기반 애니메이션으로는 \"진짜 고정\"을 만들 수 없다." })] }), "\n", _jsx(_components.p, { children: "스크롤은 연속적인 값이다. 0에서 1까지 부드럽게 변한다." }), "\n", _jsx(_components.p, { children: "이 연속성 안에서 \"여기서 멈춰\"라고 하는 건 불가능하다. 진짜 고정을 원한다면, 보이는 콘텐츠 자체가 sticky여야 한다. 그리고 전환 트리거는 보이지 않는 별개의 요소가 담당해야 한다." }), "\n", _jsx(_components.h2, { id: "해결-양쪽-모두-sticky--보이지-않는-마커", children: "해결: 양쪽 모두 Sticky + 보이지 않는 마커" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2026/02/01/3abaa270-2a66-4892-81c0-232a6becac24.png", alt: "" }) }), "\n", _jsx(_components.p, { children: "핵심 아이디어는 이렇다." }), "\n", _jsx(_components.p, { children: "보이는 것(이미지와 텍스트)은 모두 sticky로 고정하고, 보이지 않는 마커가 스크롤되면서 전환을 트리거한다." }), "\n", _jsx(_components.p, { children: "마커는 화면에 보이지 않는다. 클릭도 안 된다. 순수하게 \"스크롤 위치 감지\" 역할만 한다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "export default function StickyFeatures() {\n const [activeIndex, setActiveIndex] = useState(0);\n const sectionRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n useEffect(() => {\n const observers: IntersectionObserver[] = [];\n\n sectionRefs.current.forEach((ref, index) => {\n if (!ref) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setActiveIndex(index);\n }\n });\n },\n { rootMargin: \"-50% 0px -50% 0px\" },\n );\n\n observer.observe(ref);\n observers.push(observer);\n });\n\n return () => observers.forEach((o) => o.disconnect());\n }, []);\n\n return (\n

\n {/* Sticky Container - 이미지와 텍스트 모두 고정 */}\n

\n \n \n

\n \n \n\n \n \n

{FEATURES[activeIndex].title}

{FEATURES[activeIndex].description}

\n \n \n

\n\n {/* 보이지 않는 Scroll Trigger 마커 */}\n

\n {FEATURES.map((_, index) => (\n {\n sectionRefs.current[index] = el;\n }}\n className=\"h-screen\"\n />\n ))}\n

\n );\n}\n" }) }), "\n", _jsx(_components.h2, { id: "rootmargin은-왜--50인가", children: "rootMargin은 왜 -50%인가?" }), "\n", _jsxs(_components.p, { children: ["IntersectionObserver의 ", _jsx(_components.code, { children: "rootMargin: \"-50% 0px -50% 0px\"" }), "가 핵심이다."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2026/02/01/5a17e18b-fadb-4e94-ae87-fd9798df346f.png", alt: "" }) }), "\n", _jsx(_components.p, { children: "기본적으로 IntersectionObserver는 요소가 뷰포트에 들어오면 트리거된다." }), "\n", _jsxs(_components.p, { children: ["하지만 ", _jsx(_components.code, { children: "-50%" }), "를 주면 뷰포트의 상하 50%씩을 \"없는 것\"으로 취급한다. 결과적으로 ", _jsx(_components.strong, { children: "화면 정중앙에 마커가 위치할 때만 트리거" }), "된다."] }), "\n", _jsx(_components.p, { children: "왜 중앙인가?라고 생각한다면, 간단한 답으로 사용자의 시선이 머무는 곳이 화면 중앙이기 때문이다. 콘텐츠 전환이 시선 위치와 일치하면 자연스럽게 느껴진다." }), "\n", _jsx(_components.h2, { id: "animatepresence-modewait의-역할", children: "AnimatePresence mode=\"wait\"의 역할" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "\n ...\n\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "mode=\"wait\"" }), "은 exit 애니메이션이 완료된 후에 enter 애니메이션을 시작한다."] }), "\n", _jsx(_components.p, { children: "이게 없으면 이전 콘텐츠가 사라지는 동안 새 콘텐츠가 동시에 나타난다. 두 콘텐츠가 겹치면서 어지러운 느낌이 든다." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "mode=\"wait\"" }), "을 쓰면 이전 콘텐츠가 fade-out 되고, 완료된 후에 새 콘텐츠가 fade-in 된다. 깔끔하게 순차 전환된다."] }), "\n", _jsx(_components.h2, { id: "두-패턴의-차이", children: "두 패턴의 차이" }), "\n", _jsx(_components.p, { children: "한쪽 Sticky 패턴은 이미지만 sticky로 고정하고 텍스트가 스크롤되는 구조다." }), "\n", _jsx(_components.p, { children: "텍스트가 흐르면서 읽히는 느낌을 주기 때문에 블로그 포스트처럼 \"읽어 내려가는\" 콘텐츠에 적합하다." }), "\n", _jsx(_components.p, { children: "마커 패턴은 양쪽 모두 sticky로 고정하고 보이지 않는 마커가 전환을 트리거한다. 콘텐츠가 고정된 상태에서 전환 애니메이션이 발생하기 때문에 제품 소개처럼 \"각 피처를 또렷하게 보여주는\" 상황에 맞다." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "수평 유지가 중요하면 마커 패턴을 써야 한다." }) }), "\n", _jsx(_components.h2, { id: "마커-패턴의-트레이드오프", children: "마커 패턴의 트레이드오프" }), "\n", _jsx(_components.p, { children: "마커 패턴이 만능은 아니다." }), "\n", _jsx(_components.p, { children: "장점으로는 수평 유지 시간을 완벽히 제어할 수 있고, 전환 타이밍이 예측 가능하며, 스크롤 방향과 무관하게 동작한다." }), "\n", _jsxs(_components.p, { children: ["단점으로는 구조가 복잡하고(보이는 콘텐츠 + 보이지 않는 마커), 높이 계산이 필요하며(", _jsx(_components.code, { children: "FEATURES.length * 100 + 50}vh" }), "), IntersectionObserver 정리를 잊으면 메모리 누수가 발생한다."] }), "\n", _jsx(_components.p, { children: "단순한 케이스라면 한쪽 sticky 패턴으로 충분하다. 마커 패턴은 수평 유지가 정말 중요할 때 쓴다." }), "\n", _jsx(_components.h2, { id: "정리", children: "정리" }), "\n", _jsx(_components.p, { children: "한쪽만 sticky면 수평 유지 시간이 짧다. 텍스트가 계속 스크롤되기 때문이다. 섹션 높이를 늘려도 해결되지 않는다. 스크롤은 연속적인 값이고, 연속성 안에서 고정은 불가능하다." }), "\n", _jsx(_components.p, { children: "해결책은 양쪽 모두 sticky로 고정하고 보이지 않는 마커로 전환을 트리거하는 것이다. IntersectionObserver의 rootMargin으로 화면 중앙을 감지하고, AnimatePresence의 mode=\"wait\"으로 순차 전환한다." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }