Stacking Cards (스태킹 카드)

카드가 조금씩 어긋나게 쌓여 있고, 맨 위 카드가 비켜나며 다음 카드를 드러냅니다.

[적용할 곳]에 카드 스택(Card Stack)을 넣어 줘. 스택드 카드(stacked cards)라고도 불러.
카드를 조금씩 어긋나게 뒤로 겹쳐 두고, 누를 때마다 맨 위 카드가 옆으로 휙 빠져 맨 뒤로 들어가면서 나머지가 한 칸씩 앞으로 나오게 해 줘. 부드럽고 가볍고 빠르게.
키보드로 조작할 수 있게 하고, 스크린 리더가 모든 카드에 순서대로 닿게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 단순한 페이드로 바꿔 줘.

특정 스크롤 구간 동안 요소가 제자리에 고정되고, 그동안 다른 콘텐츠나 애니메이션이 진행됩니다.

[적용할 곳]에 피닝(Pinning) 스크롤 효과를 넣어 줘. 핀 고정 섹션(pinned section), 스티키 섹션(sticky section)이라고도 불러.
옆의 콘텐츠가 스크롤로 지나가는 동안 패널 하나는 제자리에 고정해 두고, 읽고 있는 단계에 맞춰 내용이 바뀌다가 섹션이 끝나면 고정이 풀리게 해 줘.
스크롤을 가로채기보다 네이티브 sticky 포지셔닝을 우선 쓰고, 작은 화면에서는 고정 패널 없이도 각 단계가 잘 읽히게 해 줘.

스크롤이 슬라이드나 섹션 같은 정해진 지점에 딱 맞춰 멈춥니다.

[적용할 곳]에 스크롤 스냅(Scroll Snap)을 넣어 줘. 스크롤 스내핑(scroll snapping), 스냅 스크롤링(snap scrolling)이라고도 불러.
스크롤이 멈추면 어중간한 곳에 서지 않고 가장 가까운 섹션의 가장자리에 딱 맞춰 자리 잡게 해 줘.
휠·터치·키보드 스크롤이 모두 그대로 되도록 브라우저 기본 스냅을 쓰고, 화면보다 긴 콘텐츠도 끝까지 읽을 수 있게 해 줘.

아래로 스크롤하면 고정 헤더의 높이나 크기가 줄어듭니다.

[적용할 곳]에 스티키 헤더 축소(Sticky Header Shrink)를 넣어 줘. 슈링킹 헤더(shrinking header), 슈링크 온 스크롤(shrink on scroll)이라고도 불러.
헤더는 위쪽에 붙어 있다가, 조금 내려가면 로고가 작아진 얇은 바로 부드럽게 줄어들고, 맨 위로 돌아오면 다시 커지게 해 줘.
헤더 크기가 바뀌는 동안 아래 콘텐츠가 튀지 않게 해 줘.

페이지를 세로로 스크롤하면 큰 텍스트 줄이 가로로 미끄러집니다.

[적용할 곳]에 스크롤 텍스트 마퀴(Text Marquee on Scroll)를 넣어 줘. scroll text marquee,스크롤 벨로시티 텍스트(scroll velocity text)라고도 불러.
페이지를 아래로 내리면 큰 텍스트 줄이 옆으로 미끄러지고, 줄마다 번갈아 반대 방향으로 움직이며, 위로 올리면 되돌아가게 해 줘.
움직임은 스크롤 위치에 연결하고, 긴 줄 때문에 가로 스크롤바가 생기지 않게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

스크롤에 따라 요소나 장면이 커지거나 작아집니다.

[적용할 곳]에 스크롤 줌(Zoom on Scroll) 효과를 넣어 줘. scroll zoom, 스케일 온 스크롤(scale on scroll)이라고도 불러.
섹션이 화면에 머무는 동안 요소가 작은 카드에서 스크롤에 맞춰 부드럽게 커져 화면 전체를 채우고, 위로 올리면 다시 작아지게 해 줘.
주변 레이아웃을 밀어내지 않게 크기를 바꾸고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 줌 없이 최종 크기로 보여 줘.