🎨 Tailwind Advanced 2장: 스크롤 마스터 — Scroll Snap & 부드러운 UX

2026년 4월 30일 수정됨

📋 개요

CSS Scroll Snap, overscroll-behavior, scroll-smooth를 완전히 이해하고 JavaScript 없이 카드 캐러셀과 섹션 스냅 스크롤을 구현합니다.

📋 목차

📌 이 문서를 읽기 전에
🤔 왜 알아야 하는가
🏗️ 비유로 먼저 이해하기
🎯 1단계: Scroll Snap 핵심 구조 — 부모와 자식의 계약
🔒 2단계: snap-mandatory vs snap-proximity — 강제냐 자유냐
📍 3단계: snap-start, snap-center, snap-end — 어디에 걸릴까
🌊 4단계: scroll-smooth — 부드러운 앵커 이동
🛑 5단계: overscroll-behavior — 스크롤 전파 막기
📐 6단계: scroll-margin & scroll-padding — sticky 헤더 오프셋 해결
🏆 실전: 영수네 커뮤니티 스터디 카드 캐러셀 + 섹션 스냅
🏁 이번에 배운 내용 총정리
📝 마무리 퀴즈
🐣 영철이의 퇴근 일기
🔗 더 알아보기

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 22분 (전체) / 핵심 파트만: 10분

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

영숙(디자이너): "영철 님, 스터디 카드 목록을 좌우 스크롤로 넘기는 캐러셀로 만들고 싶어요. 근데 그냥 스크롤이 아니라, 카드 단위로 딱딱 멈추게 해주세요! 요즘 모바일 앱 보면 다 그렇게 되잖아요."
영철(신입): "아! 캐러셀이요? 제가 touchstart, touchend 이벤트 감지해서 스와이프 거리 계산하고, requestAnimationFrame으로 부드럽게 이동하는 코드 짜면 되겠는데요? 200줄 정도면..."
영호(리드): "영철 님, snap-x snap-mandatory랑 snap-center 두 클래스면 됩니다. JavaScript 한 줄도 필요 없어요."

🎯 이 문서를 다 읽으면 할 수 있는 것

snap-x, snap-y, snap-mandatory, snap-proximity 의 조합 원리를 이해한다.
snap-start, snap-center, snap-end 를 상황에 맞게 선택할 수 있다.
overscroll-contain 으로 모달/드로어 내부 스크롤 전파를 막을 수 있다.
scroll-mt-* 로 sticky 헤더에 가려지는 앵커 문제를 해결할 수 있다.

🗺️ 이 문서의 흐름
영숙이의 스냅 캐러셀 요청 → Scroll Snap 부모-자식 구조 → mandatory vs proximity → 방향별 정렬 → smooth scroll → overscroll 제어 → 실전 구현

🤔 왜 알아야 하는가

캐러셀 슬라이더. 웹 개발자라면 누구나 한번쯤 구현해봤거나, 구현 요청을 받아본 경험이 있을 거야.

전통적인 방식은 이랬어:

컨테이너 너비 측정
현재 스크롤 위치 추적
스와이프/클릭 이벤트 감지
가장 가까운 카드 위치 계산
requestAnimationFrame 으로 애니메이션 실행

이게 boilerplate만 100줄이 넘어. 그런데 수많은 외부 라이브러리들이 이 복잡성을 숨기는 데 성공하면서 swiper.js, embla-carousel 같은 것들이 생겨났지.

근데 잠깐. CSS 표준 위원회가 2019년에 이 모든 걸 CSS로 해결하는 명세를 정식으로 확정했어. 이름하여 CSS Scroll Snap. 그리고 현재 모든 주요 브라우저에서 완벽히 지원돼.

모르면 라이브러리를 선택하고, 번들 크기를 걱정하고, 업데이트를 관리하고, 버그를 직접 고쳐야 해. 알면 그냥 클래스 두 개면 끝이야.

🏗️ 비유로 먼저 이해하기

🚃 기차 승강장의 안전선 시스템

CSS Scroll Snap은 기차역의 승강장과 비슷해.

스크롤 컨테이너 (부모): 기차 선로. "이 위에서 기차가 다니며 스냅 규칙을 정해."

스냅 아이템 (자식들): 승강장. "기차가 여기서 정차해야 해."

snap-mandatory: 강제 정차. "기차는 반드시 승강장에서만 멈춰야 해. 중간에서 멈추는 것은 허용 안 해."

snap-proximity: 임의 정차. "승강장 가까이 왔을 때만 자동으로 끌어당겨. 멀리 있으면 그냥 두어."

snap-center: 승강장 중앙 표시. "기차 문이 이 마크에 딱 맞게 서."

부모는 "어느 방향으로, 얼마나 엄격하게" 스냅할지 정하고,
자식은 "내 어느 지점에 걸릴지" 정해. 이 계약이 Scroll Snap이야.

🎯 1단계: Scroll Snap 핵심 구조 — 부모와 자식의 계약

🎯 이 섹션을 읽고 나면:

Scroll Snap에서 부모와 자식이 각각 무슨 역할을 담당하는지 구분할 수 있다.

최소한의 클래스로 작동하는 스냅 컨테이너를 만들 수 있다.

Scroll Snap의 구조는 항상 2개의 레이어로 나뉘어.

<!-- 🐣 영철: "snap-x만 넣었는데 왜 안 걸려요?" -->
<!-- snap-x 혼자서는 아무것도 안 해. 자식에 align이 있어야 함! -->
 
<!-- ❌ 자식에 snap align이 없으면 스냅 포인트가 없어서 동작 안 함 -->
<div class="flex overflow-x-auto snap-x snap-mandatory gap-4">
  <div class="w-80 h-48 bg-gray-200 shrink-0">카드 1</div>  <!-- snap 포인트 없음! -->
  <div class="w-80 h-48 bg-gray-200 shrink-0">카드 2</div>
</div>
 
<!-- ✅ 부모: 컨테이너 설정 / 자식: 정렬 포인트 설정 -->
<div class="
  flex overflow-x-auto  /* 스크롤 활성화 */
  snap-x               /* X축 방향 스냅 */
  snap-mandatory       /* 엄격한 스냅 */
  gap-4
">
  <!-- 각 자식에 snap-center 또는 snap-start 추가 -->
  <div class="w-80 h-48 bg-gray-200 shrink-0 snap-center">카드 1</div>
  <div class="w-80 h-48 bg-gray-200 shrink-0 snap-center">카드 2</div>
  <div class="w-80 h-48 bg-gray-200 shrink-0 snap-center">카드 3</div>
</div>

부모가 담당하는 것:

<!-- 1. 스냅 방향 -->
snap-x      <!-- 가로 스크롤 스냅 -->
snap-y      <!-- 세로 스크롤 스냅 -->
snap-both   <!-- 양방향 스냅 -->
snap-none   <!-- 스냅 해제 -->
 
<!-- 2. 스냅 엄격도 -->
snap-mandatory   <!-- 항상 스냅 포인트에서 멈춤 -->
snap-proximity   <!-- 가까울 때만 스냅 포인트에 끌림 -->

자식이 담당하는 것:

<!-- 스냅 정렬 위치 -->
snap-start   <!-- 아이템의 시작점이 스냅 포인트 -->
snap-center  <!-- 아이템의 중앙이 스냅 포인트 -->
snap-end     <!-- 아이템의 끝점이 스냅 포인트 -->
snap-align-none  <!-- 이 아이템은 스냅 대상에서 제외 -->

🔒 2단계: snap-mandatory vs snap-proximity — 강제냐 자유냐

🎯 이 섹션을 읽고 나면:

snap-mandatory 와 snap-proximity 중 어떤 상황에 어느 것을 써야 하는지 판단할 수 있다.

각각의 UX 특성과 주의사항을 알 수 있다.

snap-mandatory — 절대 복종형

스크롤이 멈추면 무조건 가장 가까운 스냅 포인트로 이동해. 중간 어정쩡한 위치에 멈추는 것이 허용되지 않아.

<!-- snap-mandatory: 항상 카드 단위로 딱딱 멈춤 -->
<div class="flex overflow-x-auto snap-x snap-mandatory gap-6 px-6">
  <div class="snap-center shrink-0 w-72">스터디 카드 1</div>
  <div class="snap-center shrink-0 w-72">스터디 카드 2</div>
  <div class="snap-center shrink-0 w-72">스터디 카드 3</div>
</div>

snap-mandatory 주의사항: 아이템 크기가 컨테이너보다 크면 스크롤이 불가능해질 수 있어.

<!-- 🚨 위험한 패턴: 아이템이 컨테이너보다 크면 건너뜀 현상 발생 -->
<!-- 컨테이너: 400px, 아이템: 600px -->
<div class="w-[400px] overflow-x-auto snap-x snap-mandatory">
  <div class="w-[600px] snap-start">이 아이템을 100% 볼 수 없어!</div>
  <!-- mandatory면 항상 다음 스냅 포인트로 이동 → 긴 콘텐츠 읽기 불가 -->
</div>
 
<!-- ✅ 이런 경우엔 snap-proximity가 더 적합 -->
<div class="w-[400px] overflow-x-auto snap-x snap-proximity">
  <div class="w-[600px] snap-start">이 아이템은 천천히 읽을 수 있어</div>
</div>

snap-proximity — 적당히 협조형

스냅 포인트에 가까이 왔을 때만 끌어당겨. 멀리 있으면 그냥 스크롤 관성대로 멈춰.

<!-- snap-proximity: 가까울 때만 스냅, 강제 이동 없음 -->
<div class="flex overflow-x-auto snap-x snap-proximity gap-6">
  <div class="snap-center shrink-0 w-72">스터디 카드 1</div>
  <div class="snap-center shrink-0 w-72">스터디 카드 2</div>
  <div class="snap-center shrink-0 w-72">스터디 카드 3</div>
</div>

언제 무엇을 쓸까:

상황	추천
카드 캐러셀 (카드가 화면보다 작음)	`snap-mandatory`
풀페이지 섹션 스크롤 (섹션이 정확히 화면 크기)	`snap-mandatory`
긴 기사/블로그 포스트의 섹션 이동	`snap-proximity`
아이템 크기가 컨테이너보다 큰 경우	`snap-proximity`

📍 3단계: snap-start, snap-center, snap-end — 어디에 걸릴까

🎯 이 섹션을 읽고 나면:

snap-start, snap-center, snap-end 의 시각적 차이를 이해한다.

카드 캐러셀 vs 풀페이지 섹션 등 용도에 맞는 정렬을 선택할 수 있다.

snap-start — 아이템의 왼쪽(위)이 기준점

<!-- snap-start: 아이템의 시작(left)이 컨테이너의 시작(left)에 맞춰짐 -->
<!--
  [카드1][카드2][카드3]
   ^
   컨테이너 왼쪽과 카드 왼쪽이 맞춰짐
-->
<div class="flex overflow-x-auto snap-x snap-mandatory">
  <div class="snap-start shrink-0 w-72 mr-4">카드 1</div>
  <div class="snap-start shrink-0 w-72 mr-4">카드 2</div>
  <div class="snap-start shrink-0 w-72 mr-4">카드 3</div>
</div>

snap-center — 아이템의 중앙이 기준점

<!-- snap-center: 아이템의 중앙이 컨테이너의 중앙에 맞춰짐 -->
<!--
  [  카드1  ][  카드2  ][  카드3  ]
        ^
        컨테이너 중앙과 카드 중앙이 맞춰짐
-->
<div class="flex overflow-x-auto snap-x snap-mandatory">
  <!-- 📌 양 끝 여백 아이템: 중앙 정렬 시 처음/마지막 카드가 중앙에 오도록 -->
  <div class="shrink-0 w-[calc(50%-9rem)]"></div>  {/* 카드가 144px(w-72/2)일 때 여백 */}
  <div class="snap-center shrink-0 w-72 mr-4">카드 1</div>
  <div class="snap-center shrink-0 w-72 mr-4">카드 2</div>
  <div class="snap-center shrink-0 w-72 mr-4">카드 3</div>
  <div class="shrink-0 w-[calc(50%-9rem)]"></div>
</div>

snap-end — 아이템의 오른쪽(아래)이 기준점

<!-- snap-end: 아이템의 끝(right)이 컨테이너의 끝(right)에 맞춰짐 -->
<div class="flex overflow-x-auto snap-x snap-mandatory">
  <div class="snap-end shrink-0 w-72 mr-4">카드 1</div>
  <div class="snap-end shrink-0 w-72 mr-4">카드 2</div>
  <div class="snap-end shrink-0 w-72">카드 3</div>  {/* 마지막엔 mr 없음 */}
</div>

실무 팁 — 어느 align을 쓸까:

카드 캐러셀 (일반) → snap-start (자연스러운 왼쪽 정렬)
카드 캐러셀 (중앙 강조) → snap-center (양끝 여백 아이템 추가 필요)
풀페이지 섹션 스냅 → snap-start (각 섹션의 시작이 화면 상단에 맞춰짐)
세로 슬라이드쇼 → snap-center (콘텐츠가 중앙에 오게)

🌊 4단계: scroll-smooth — 부드러운 앵커 이동

🎯 이 섹션을 읽고 나면:

scroll-smooth 로 앵커 링크 클릭 시 부드러운 스크롤 이동을 구현할 수 있다.

prefers-reduced-motion 접근성 고려의 중요성을 이해한다.

scroll-behavior: smooth 는 가장 단순하지만 UX를 극적으로 개선하는 속성이야. 앵커 링크(#section)를 클릭할 때 순간 이동이 아니라 부드럽게 스크롤돼.

<!-- ❌ 영철이의 코드: JavaScript로 smooth scroll 구현 -->
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault();
    const target = document.querySelector(anchor.getAttribute('href'));
    target.scrollIntoView({ behavior: 'smooth' });
  });
});
 
<!-- ✅ 영호의 방식: html 태그에 클래스 하나 -->
<html class="scroll-smooth">
  <!-- 이제 모든 앵커 링크가 부드럽게 이동 -->
</html>

<!-- 실전: 네비게이션 메뉴에서 섹션으로 이동 -->
<html class="scroll-smooth">
  <head>...</head>
  <body>
    <!-- 네비게이션 -->
    <nav class="fixed top-0 ...">
      <a href="#studies">스터디 찾기</a>    <!-- 클릭 시 부드럽게 스크롤 -->
      <a href="#how-it-works">이용 방법</a>
      <a href="#testimonials">후기</a>
    </nav>
 
    <!-- 섹션들 -->
    <section id="studies">...</section>
    <section id="how-it-works">...</section>
    <section id="testimonials">...</section>
  </body>
</html>

접근성 주의사항:

/* 동작 감소 설정을 한 사용자에게는 즉시 이동이 나을 수 있어 */
/* Tailwind로는 아래처럼 반응형 변형 활용 */

<!-- motion-reduce: 접근성 배려 -->
<html class="scroll-smooth motion-reduce:scroll-auto">
  <!-- 애니메이션 감소 선호 사용자에겐 즉시 이동 -->
</html>

🛑 5단계: overscroll-behavior — 스크롤 전파 막기

🎯 이 섹션을 읽고 나면:

"스크롤 체인(scroll chaining)"이 무엇인지 이해하고, 이를 막을 수 있다.

모달, 드로어, 사이드패널의 스크롤 독립성을 구현할 수 있다.

스크롤 체인이란?

스크롤 가능한 요소(예: 모달)를 끝까지 스크롤하면, 그 스크롤 이벤트가 부모(body)에게도 전파되는 현상이야.

사용자가 모달 내부를 스크롤 →
모달 콘텐츠를 다 올림 →
스크롤이 남아 있으면 body가 스크롤됨 ← 이게 스크롤 체인 버그!

<!-- ❌ 영철이의 JavaScript 해결책: 이벤트 막기 -->
modal.addEventListener('wheel', (e) => {
  const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
  if (
    (e.deltaY < 0 && scrollTop === 0) ||
    (e.deltaY > 0 && scrollTop + clientHeight === scrollHeight)
  ) {
    e.preventDefault();
  }
}, { passive: false });
// 💣 passive event 문제, iOS Safari 버그, 성능 이슈... 골치 아픔
 
<!-- ✅ 영호의 CSS 한 방 해결 -->
<div class="overflow-y-auto overscroll-contain max-h-screen">
  <!-- 모달 내부 콘텐츠 -->
  <!-- overscroll-contain: 이 요소의 스크롤이 부모로 전파되지 않음 -->
</div>

overscroll 3가지 모드

<!-- overscroll-auto (기본값): 스크롤 체인 허용 -->
<div class="overflow-y-auto overscroll-auto">
  <!-- 끝에서 스크롤하면 부모 스크롤 발생 (기본 브라우저 동작) -->
</div>
 
<!-- overscroll-contain: 스크롤 체인 차단 + 바운스 허용 -->
<div class="overflow-y-auto overscroll-contain">
  <!-- 끝에서 스크롤이 부모로 전파 안 됨 -->
  <!-- iOS Safari의 고무줄 바운스 효과는 유지됨 -->
</div>
 
<!-- overscroll-none: 스크롤 체인 + 바운스 모두 차단 -->
<div class="overflow-y-auto overscroll-none">
  <!-- 끝에서 스크롤이 부모로도 전파 안 되고 바운스도 없음 -->
  <!-- 앱처럼 딱딱한 느낌 -->
</div>

언제 무엇을 쓸까:

상황	추천
모달/드로어 내부 스크롤	`overscroll-contain`
채팅창 메시지 영역	`overscroll-contain`
임베드된 스크롤 컨테이너	`overscroll-contain`
모바일 앱처럼 딱딱한 UX	`overscroll-none`
풀페이지 스크롤 섹션	`overscroll-none`

실전: 모달 스크롤 독립성

// components/StudyDetailModal.tsx
// 🦁 영호: "모달 안에서 스크롤할 때 배경이 같이 움직이는 버그 있지? overscroll-contain 하나면 끝이야"
 
export default function StudyDetailModal({ isOpen, onClose, study }) {
  if (!isOpen) return null;
 
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* 배경 오버레이 */}
      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
 
      {/* 모달 패널 */}
      <div className="
        relative z-10
        bg-white rounded-2xl
        w-full max-w-lg
        max-h-[85vh]         /* 최대 높이 제한 */
        overflow-y-auto      /* 내부 스크롤 활성화 */
        overscroll-contain   /* 스크롤 전파 차단 */
        shadow-2xl
      ">
        {/* 모달 헤더 (sticky) */}
        <div className="sticky top-0 bg-white border-b px-6 py-4 flex justify-between items-center">
          <h2 className="text-lg font-semibold">{study.title}</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">✕</button>
        </div>
 
        {/* 모달 콘텐츠 - 아무리 스크롤해도 배경 body는 안 움직임 */}
        <div className="px-6 py-4 space-y-4">
          <p className="text-gray-700 leading-relaxed">{study.description}</p>
          {/* ... 더 많은 콘텐츠 ... */}
        </div>
      </div>
    </div>
  );
}

📐 6단계: scroll-margin & scroll-padding — sticky 헤더 오프셋 해결

🎯 이 섹션을 읽고 나면:

sticky 헤더가 있을 때 앵커 이동 후 콘텐츠가 헤더에 가려지는 버그를 해결할 수 있다.

scroll-mt-* 와 scroll-pt-* 의 차이를 이해한다.

문제 상황: 헤더 아래로 숨는 콘텐츠

<!-- 🐣 영철: "nav에 fixed 주고 앵커 이동하면 섹션 제목이 nav 뒤에 숨어요!" -->
<!--
  화면:
  ┌─────────────────┐
  │   Sticky Nav    │ ← height: 64px (h-16)
  ├─────────────────┤
  │ (이 부분이 가려짐) ← 섹션 제목이 여기 있어서 안 보임!
  │                 │
  │  섹션 내용 ...  │
  └─────────────────┘
-->

해결책: scroll-margin-top

<!-- ❌ 영철이의 방법: 섹션에 padding-top 주기 -->
<section id="studies" class="pt-16">  <!-- 하지만 섹션 내부 레이아웃이 망가짐 -->
 
<!-- ✅ 영호의 방법: scroll-mt-16 -->
<section id="studies" class="scroll-mt-16">
  <!-- scroll-mt-16 = scroll-margin-top: 4rem -->
  <!-- 앵커로 이동 시 64px 아래에서 멈춤 → 헤더 밑에 안 가려짐 -->
  <h2>스터디 목록</h2>
</section>

scroll-padding vs scroll-margin

<!-- scroll-padding: 컨테이너(부모)에 적용 -->
<!-- 컨테이너 안의 스냅/앵커 이동 시 시작 오프셋 -->
<div class="snap-y snap-mandatory scroll-pt-16 overflow-y-auto h-screen">
  <!-- 모든 자식의 스냅 포인트에 16(4rem) 오프셋 적용 -->
  <section class="snap-start h-screen">섹션 1</section>
  <section class="snap-start h-screen">섹션 2</section>
</div>
 
<!-- scroll-margin: 아이템(자식)에 적용 -->
<!-- 이 아이템이 스냅/앵커 이동 대상이 될 때 여백 -->
<section id="studies" class="snap-start scroll-mt-16">
  <!-- 이 섹션으로 이동 시 16(4rem) 위에서 멈춤 -->
</section>

실전 전략 - sticky 헤더 오프셋:

// tailwind.config.ts - 헤더 높이를 CSS 변수로 관리
// 모든 섹션에 동일한 scroll-mt 적용을 위해
 
// JSX에서
const HEADER_HEIGHT = "h-16";  // 64px
const SCROLL_OFFSET = "scroll-mt-16";  // 동일하게 맞춤
 
// layout.tsx
<html className="scroll-smooth">
  <body>
    <nav className={`sticky top-0 z-50 ${HEADER_HEIGHT}`}>
      ...네비
    </nav>
    <main>
      <section id="hero">...</section>
      <section id="studies" className={SCROLL_OFFSET}>...</section>
      <section id="how-it-works" className={SCROLL_OFFSET}>...</section>
    </main>
  </body>
</html>

🏆 실전: 영수네 커뮤니티 스터디 카드 캐러셀 + 섹션 스냅

수평 카드 캐러셀

// components/StudyCarousel.tsx
// 🦁 영호: "JavaScript 한 줄 없이 스와이프 캐러셀 완성이에요"
 
interface Study {
  id: string;
  title: string;
  topic: string;
  memberCount: number;
  thumbnail: string;
}
 
export default function StudyCarousel({ studies }: { studies: Study[] }) {
  return (
    <div className="relative">
      <h2 className="text-2xl font-bold mb-4 px-4">추천 스터디</h2>
 
      {/* 🔮 핵심: 스크롤 컨테이너 */}
      <div className="
        flex                    /* 가로 정렬 */
        overflow-x-auto         /* 가로 스크롤 활성화 */
        snap-x                  /* X축 스냅 */
        snap-mandatory          /* 강제 스냅 */
        gap-4                   /* 카드 간격 */
        px-4                    /* 양쪽 여백 */
        pb-4                    /* 스크롤바 공간 */
        -mx-4                   /* 부모 padding 상쇄 */
 
        /* 스크롤바 숨기기 (크로스 브라우저) */
        scrollbar-hide          /* tailwind-scrollbar-hide 플러그인 필요 */
        [&::-webkit-scrollbar]:hidden  /* 또는 이 방식 */
      ">
        {/* 첫 번째 여백 아이템 - snap-center를 위해 필요 */}
        {/* snap-center 쓰지 않는다면 이건 생략 가능 */}
 
        {studies.map((study) => (
          <div
            key={study.id}
            className="
              snap-start              /* 카드 왼쪽이 스냅 포인트 */
              shrink-0                /* flex 아이템 축소 방지 */
              w-[280px]               /* 카드 너비 고정 */
              rounded-2xl overflow-hidden
              bg-white shadow-md
              hover:shadow-xl
              transition-shadow duration-200
              cursor-pointer
            "
          >
            {/* 썸네일 */}
            <div className="h-40 overflow-hidden">
              <img
                src={study.thumbnail}
                alt={study.title}
                className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
              />
            </div>
 
            {/* 카드 내용 */}
            <div className="p-4">
              <span className="text-xs font-medium text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full">
                {study.topic}
              </span>
              <h3 className="font-semibold text-gray-900 mt-2 line-clamp-2">{study.title}</h3>
              <p className="text-sm text-gray-500 mt-1">멤버 {study.memberCount}명</p>
            </div>
          </div>
        ))}
      </div>
 
      {/* 인디케이터 (CSS only - overflow 뒤에 gradient fade) */}
      <div className="absolute top-0 right-0 bottom-4 w-16 bg-linear-to-l from-gray-50 to-transparent pointer-events-none" />
    </div>
  );
}

풀페이지 섹션 스냅

// app/landing/page.tsx
// 🦁 영호: "각 섹션이 딱딱 맞게 스냅되는 랜딩페이지야"
// 🐣 영철: "이거 구현하려고 라이브러리 찾고 있었는데..."
 
export default function LandingPage() {
  return (
    // 풀페이지 스냅 컨테이너
    <div className="
      h-screen                /* 뷰포트 높이로 제한 */
      overflow-y-auto         /* 세로 스크롤 */
      snap-y                  /* Y축 스냅 */
      snap-mandatory          /* 강제 스냅 */
      overscroll-none         /* 풀페이지 특성상 바운스 제거 */
      scroll-smooth           /* 부드러운 스냅 이동 */
    ">
      {/* 섹션 1: 히어로 */}
      <section className="
        snap-start             /* 섹션 상단이 뷰포트 상단에 맞춰짐 */
        h-screen               /* 정확히 1 화면 높이 */
        flex items-center justify-center
        bg-linear-to-br from-violet-900 to-indigo-900
      ">
        <div className="text-center text-white">
          <h1 className="text-6xl font-black mb-6
            bg-linear-to-r from-violet-300 to-indigo-300
            bg-clip-text text-transparent">
            영수네 커뮤니티
          </h1>
          <p className="text-xl text-white/70">
            개발자 스터디 매칭 플랫폼
          </p>
        </div>
      </section>
 
      {/* 섹션 2: 기능 소개 */}
      <section className="
        snap-start
        h-screen
        flex items-center justify-center
        bg-white
      ">
        <div className="max-w-4xl mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold text-gray-900 mb-12">어떻게 사용하나요?</h2>
          <div className="grid grid-cols-3 gap-8">
            {/* 3단계 소개 카드 */}
            <div className="p-6 rounded-2xl bg-indigo-50">
              <div className="text-3xl mb-3">🔍</div>
              <h3 className="font-bold mb-2">스터디 탐색</h3>
              <p className="text-gray-600 text-sm">관심 기술 스택으로 필터링</p>
            </div>
            <div className="p-6 rounded-2xl bg-purple-50">
              <div className="text-3xl mb-3">🤝</div>
              <h3 className="font-bold mb-2">매칭 신청</h3>
              <p className="text-gray-600 text-sm">원클릭으로 참여 신청</p>
            </div>
            <div className="p-6 rounded-2xl bg-pink-50">
              <div className="text-3xl mb-3">🚀</div>
              <h3 className="font-bold mb-2">함께 성장</h3>
              <p className="text-gray-600 text-sm">실시간 채팅으로 소통</p>
            </div>
          </div>
        </div>
      </section>
 
      {/* 섹션 3: 스터디 목록 미리보기 */}
      <section className="
        snap-start
        h-screen
        flex flex-col items-center justify-center
        bg-gray-50
        px-4
      ">
        <h2 className="text-4xl font-bold text-gray-900 mb-8">인기 스터디</h2>
        {/* 섹션 내부에 가로 캐러셀 삽입 */}
        {/* overscroll-contain으로 가로 스크롤이 세로 풀페이지에 간섭 안 함 */}
        <div className="
          w-full max-w-4xl
          flex overflow-x-auto
          snap-x snap-mandatory
          overscroll-x-contain    /* 가로 스크롤이 세로 스냅에 전파 안 됨 */
          gap-4 pb-4
        ">
          {[1, 2, 3, 4, 5].map((i) => (
            <div key={i} className="snap-center shrink-0 w-64 bg-white rounded-xl shadow p-4">
              <div className="h-32 bg-indigo-100 rounded-lg mb-3" />
              <h3 className="font-semibold">React 심화 스터디 {i}</h3>
              <p className="text-sm text-gray-500">4명 참여 중</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

🏁 이번에 배운 내용 총정리

유틸리티	역할	적용 대상
`snap-x`	가로 스냅 활성화	부모 컨테이너
`snap-y`	세로 스냅 활성화	부모 컨테이너
`snap-mandatory`	항상 스냅 포인트에서 멈춤	부모 컨테이너
`snap-proximity`	가까울 때만 스냅	부모 컨테이너
`snap-start`	아이템 시작점이 스냅 포인트	자식 아이템
`snap-center`	아이템 중앙이 스냅 포인트	자식 아이템
`snap-end`	아이템 끝점이 스냅 포인트	자식 아이템
`scroll-smooth`	앵커 이동 시 부드러운 스크롤	`<html>` 또는 컨테이너
`overscroll-contain`	스크롤 전파(체인) 차단	스크롤 가능한 요소
`overscroll-none`	스크롤 전파 + 바운스 모두 차단	풀페이지 스크롤
`scroll-mt-*`	앵커 이동 시 위쪽 여백	앵커 대상 요소
`scroll-pt-*`	스냅/앵커 이동 시 컨테이너 시작 오프셋	스냅 컨테이너

📝 마무리 퀴즈

Q1. 영숙이가 요청한 "카드 단위로 딱딱 멈추는 가로 캐러셀"을 구현하기 위해 컨테이너(부모)에 필요한 최소 클래스 조합은?

✅ 정답: overflow-x-auto snap-x snap-mandatory

💡 상세 해설:

원리 설명: Scroll Snap은 항상 부모 + 자식 두 레이어가 필요해. 부모에는 ① overflow-x-auto (스크롤 활성화), ② snap-x (가로 방향 스냅 활성화), ③ snap-mandatory (엄격한 스냅) 세 가지가 필요하고, 각 자식 카드에는 snap-start 또는 snap-center가 있어야 실제로 동작해.
오답 피드백: snap-x만 줘도 안 돼. 자식에 snap-center 없으면 스냅 포인트가 없어서 효과 없어. 반드시 부모 + 자식의 두 레이어 조합이야.
📌 핵심 기억법: 부모는 "방향 + 엄격도", 자식은 "정렬 위치". 부모가 "어디서 스냅할지", 자식이 "내 어디에 걸릴지"를 각각 담당해.

Q2. 영수네 커뮤니티 앱에서 채팅창 내부를 스크롤하다 끝에 도달하면 배경 페이지도 함께 스크롤되는 버그가 발생했다. 어떤 Tailwind 클래스로 해결할 수 있는가?

✅ 정답: 채팅 컨테이너에 overscroll-contain 추가

💡 상세 해설:

원리 설명: 이 현상을 "스크롤 체인(scroll chaining)" 이라 해. 내부 스크롤이 끝나면 이벤트가 부모로 전파되는 브라우저 기본 동작이야. overscroll-contain 은 CSS의 overscroll-behavior: contain 을 적용해 스크롤 이벤트가 이 요소를 벗어나지 못하게 차단해. iOS Safari의 바운스 효과는 유지돼서 자연스러운 느낌도 살아있어.
오답 피드백: JavaScript preventDefault()로 막으면 passive event listener 경고와 성능 이슈가 발생할 수 있어. CSS 한 줄이 훨씬 안전하고 효율적이야.
📌 핵심 기억법: 모달/채팅창/드로어처럼 "스크롤 독립 공간"이 필요한 곳엔 항상 overscroll-contain 세트.

Q3. 영수네 커뮤니티에 sticky 네비게이션(높이 64px)이 있다. 앵커 링크로 #studies 섹션으로 이동 시 섹션 제목이 네비 아래에 숨는 버그를 CSS만으로 해결하려면?

✅ 정답: #studies 섹션에 scroll-mt-16 추가 (16 = 64px)

💡 상세 해설:

원리 설명: scroll-margin-top 속성은 앵커 이동 시 해당 요소가 뷰포트 상단으로부터 얼마나 떨어진 곳에 위치할지를 설정해. scroll-mt-16 = 64px이므로, 64px 높이의 sticky 헤더 아래에서 딱 시작돼. padding-top과 달리 레이아웃에 영향을 주지 않는다는 것이 핵심 장점이야.
오답 피드백: pt-16으로 해결하면 섹션 내부 간격이 틀어져서 레이아웃이 망가져. scroll-mt-* 는 스크롤 위치만 조정하고 실제 레이아웃은 건드리지 않아.
📌 핵심 기억법: sticky 헤더 높이 = scroll-mt 값. h-16 nav → scroll-mt-16 sections. 항상 짝을 맞춰.

🐣 영철이의 퇴근 일기

오늘 영숙 누나가 "카드를 딱딱 멈추는 스와이프 캐러셀"을 요청했을 때, 나는 습관처럼 캐러셀 라이브러리부터 찾았다. 그런데 영호 형이 overflow-x-auto snap-x snap-mandatory와 자식의 snap-center만으로 먼저 구현해보자고 했다.

실제로 만들어 보니 더 중요한 문제는 캐러셀 자체보다 스크롤 경계였다. 채팅창 끝에서 배경 페이지까지 같이 밀리는 문제는 overscroll-contain으로 막을 수 있었고, sticky 헤더에 가려지는 앵커 제목은 scroll-mt-16으로 레이아웃을 건드리지 않고 해결됐다.

💡 "스크롤 UX는 라이브러리 선택 문제가 아니라 스냅 지점, 스크롤 전파, 고정 헤더 오프셋을 분리해서 설계하는 문제다."

이제 스크롤 요구사항을 받으면 "패키지 뭐 쓰지?"보다 먼저 부모/자식 스냅 역할, 내부 스크롤 독립성, 앵커 이동 위치를 표로 적어볼 생각이다. 사용자가 손가락으로 느끼는 UX도 결국 CSS의 작은 계약들이 모여 만들어진다는 걸 알게 됐다.

🎨 Tailwind Advanced 2장: 스크롤 마스터 — Scroll Snap & 부드러운 UX

📋 목차

📌 이 문서를 읽기 전에

🤔 왜 알아야 하는가

🏗️ 비유로 먼저 이해하기

🎯 1단계: Scroll Snap 핵심 구조 — 부모와 자식의 계약

🔒 2단계: snap-mandatory vs snap-proximity — 강제냐 자유냐

snap-mandatory — 절대 복종형

snap-proximity — 적당히 협조형

📍 3단계: snap-start, snap-center, snap-end — 어디에 걸릴까

snap-start — 아이템의 왼쪽(위)이 기준점

snap-center — 아이템의 중앙이 기준점

snap-end — 아이템의 오른쪽(아래)이 기준점

🌊 4단계: scroll-smooth — 부드러운 앵커 이동

🛑 5단계: overscroll-behavior — 스크롤 전파 막기

스크롤 체인이란?

overscroll 3가지 모드

실전: 모달 스크롤 독립성

📐 6단계: scroll-margin & scroll-padding — sticky 헤더 오프셋 해결

문제 상황: 헤더 아래로 숨는 콘텐츠

해결책: scroll-margin-top

scroll-padding vs scroll-margin

🏆 실전: 영수네 커뮤니티 스터디 카드 캐러셀 + 섹션 스냅

수평 카드 캐러셀

풀페이지 섹션 스냅

🏁 이번에 배운 내용 총정리

📝 마무리 퀴즈

🐣 영철이의 퇴근 일기

🔗 더 알아보기