Scroll Fog

구조는 당근 SEED Scroll Fog(Apache-2.0)를 따른다 — 스크롤 상자에 거는 마스크(gradient-fade-mask 16단계, v104), 기본 깊이 20, 흐린 쪽에 그 깊이만큼 여백, 늘 켜짐. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-03 사용자 결정). groo 에 처음 두는 부품이다 — 시트 · 대화상자의 "본문이 넘칠 때만 아래 48 흐림"(2026-10-02)을 이 규칙이 대신한다.

수치 원본은 scroll-fog.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

자리(가로 줄 · 시트 본문 · 바닥 버튼 화면 · 상자) · 바탕 색을 고르고 스크롤하면 스펙대로 그린 흐림과 그 코드가 바뀐다. 처음 · 가운데 · 끝 어디서나 흐림이 그대로인 것을 볼 수 있다.

import { Chip, ChipGroup } from "@/components/ui/chip"

{/* 칩 줄은 따로 켜지 않는다 — layout="scroll" 이면 늘 좌우 흐림 */}
<ChipGroup layout="scroll" aria-label="카테고리">
  {categories.map((c) => <Chip key={c}>{c}</Chip>)}
</ChipGroup>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

마스크 — 색이 아니다제목 링크 복사

gradient-fade-mask(알파 0 → 1, 16단계)를 스크롤 상자에 mask-image 로 건다 — 흐린 쪽마다 상자 전체 크기의 층 하나에 방향을 붙이고(단계는 그 쪽 깊이에 맞춰 깊이 안에서 불투명에 닿는다) 겹친 층을 곱한다(mask-composite: intersect, SEED 와 같다). 상자가 두 깊이의 합보다 낮아도 양 끝이 함께 흐리다. 바탕색을 덧칠하지 않으므로 흰 면 · 회색 바탕 · 다크 어디서나 같은 값이다. 내용이 흐려질 뿐 그 위에 무엇을 얹지 않아, 흐린 자리의 칩 · 줄도 그대로 눌린다.

공통

Use — 자리마다 방향 · 깊이제목 링크 복사

SEED 의 권장 그대로다 — 가로 스크롤은 좌우 20(정보가 촘촘해 깊게 흐리지 않는다), 세로 스크롤은 위 20 · 아래 80(아래가 깊어야 더 있다는 것이 잘 보인다), 그 밖은 최소 20.

자리

State제목 링크 복사

Guidelines제목 링크 복사

늘 켜 둔다제목 링크 복사

스크롤을 시작하고 멈출 때마다 흐림이 나타났다 사라지면 화면이 깜빡인다(SEED). 그래서 흐림은 스크롤 위치 · 넘침을 재지 않고 늘 켜 둔다 — 처음 · 끝에 닿아도 그대로다. 넘친 쪽만 흐리는 방식은 두지 않는다(사용자 결정).

깊이만큼 여백제목 링크 복사

흐린 쪽에는 깊이 이상의 여백을 둔다 — 끝까지 스크롤했을 때 마지막 줄 · 칩이 흐림 아래 남지 않고, 흐림은 빈 여백 위에 놓인다. 깊이를 정하면 그것이 그쪽의 최소 여백이다(SEED). 키보드로 옮긴 요소도 흐림 아래 멈추지 않게 스크롤 여유를 같은 만큼 둔다.

어디에 거나제목 링크 복사

넘칠 수 있는 영역에 건다 — 가로로 넘기는 줄, 목록 · 긴 폼처럼 길이가 데이터에 따라 늘어나는 시트 · 대화상자 본문, 바닥 고정 버튼 위로 스크롤되는 긴 화면. 걸 자리인지는 내용의 종류로 미리 정한다 — 넘쳤는지 재서 켜고 끄지 않는다.

• 칸 두셋처럼 늘 들어맞는 시트 · 대화상자 본문에는 걸지 않는다 — 스크롤이 생기지 않으니 아래 80 이 빈자리만 늘린다.
• 탭 바 위의 목록 화면 · 일반 페이지 스크롤에는 걸지 않는다 — 화면 끝이 곧 영역의 끝이고, 탭 바 위 80 이 늘 흐려진다. 탭 바 위 목록은 아래 여백으로 마지막 줄을 바 위에 올린다(Bottom Navigation 의 "본문 아래 여백").
• 부품이 제 안개를 가진 자리 — Wheel Picker 의 위아래(min(40%, 3칸)) · Date Picker 이어지는 달의 아래 96 · Side Navigation 내용의 아래 24 — 는 그 스펙을 따른다. 겹쳐 걸지 않는다.
• 흐림은 힌트일 뿐이다 — 스크롤 · 키보드 스크롤 · 초점 이동은 그대로 둔다. 가로 줄만 스크롤바를 숨긴다 — 세로 스크롤바는 전역 한 벌 그대로다(Scroll Area, 2026-10-10).

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/scroll-fog.tsx 를 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

• ScrollFog — use("box" 기본 · "row" · "overlayBody" · "page")가 방향 · 깊이 · 안쪽 여백 · 스크롤 여유를 정한다. 이 상자가 곧 스크롤 상자다 — 높이 · 폭은 부르는 쪽이 정하고, 그 밖은 div 속성. 안쪽 여백은 안쪽 감싸개에 둔다(흐림 아래에 여백이 깔리게).
• 시트 · 대화상자 · 팝오버의 본문은 scrollFog 를 주어 켠다 — DialogBody · BottomSheetBody · ResponsiveDialogBody · PopoverBody, use="overlayBody" 와 같다.
• 칩 줄(ChipGroup layout="scroll")과 ChipTabsList 는 늘 row 흐림이다 — 따로 켜지 않는다.

시트 · 대화상자 본문 — 긴 목록제목 링크 복사

import { ResponsiveDialogBody } from "@/components/ui/dialog"
import { ListRadioGroup, ListRadioItem } from "@/components/ui/list"

{/* 길이가 데이터에 따라 늘어나는 목록 — 위 20 · 아래 80 흐림과 같은 여백 */}
<ResponsiveDialogBody scrollFog className="px-0">
  <ListRadioGroup value={categoryId} onValueChange={setCategoryId} aria-label="카테고리">
    {categories.map((c) => <ListRadioItem key={c.id} value={c.id} title={c.name} />)}
  </ListRadioGroup>
</ResponsiveDialogBody>

칩 줄 · 상자제목 링크 복사

import { ScrollFog } from "@/components/ui/scroll-fog"

{/* 칩 줄은 따로 켜지 않는다 — layout="scroll" 이면 늘 좌우 20 */}
<ChipGroup layout="scroll" aria-label="필터">…</ChipGroup>

{/* 카드 안 높이를 정한 스크롤 — 넘치는 방향 양 끝 20 */}
<ScrollFog className="max-h-60" tabIndex={0} role="region" aria-label="이용 약관">
  <p>{terms}</p>
</ScrollFog>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 가로 칩 줄 · 넘칠 수 있는 시트 본문 · 바닥 버튼 위 긴 화면에.
• 늘 켜 두고, 흐린 쪽에 깊이만큼 여백.
• 마스크로 — 바탕색이 바뀌어도 그대로.

❌ Don't제목 링크 복사

• 스크롤 위치에 따라 흐림을 켜고 끄기 · 넘친 쪽만 흐리기.
• 바탕색 그라디언트를 덮어 흐리기(색 막) — 바탕이 바뀌면 띠가 보인다.
• 여백 없이 흐려 마지막 줄을 흐림 아래 남기기.
• 칸 두셋뿐인 본문 · 탭 바 위 목록 화면에.
• 부품이 제 안개를 가진 자리(Wheel Picker · Date Picker 이어지는 달)에 겹쳐 걸기.

Specification제목 링크 복사

scroll-fog.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 Scroll Fog 를 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다.

SEED 와 다른 점제목 링크 복사

• 자리마다 방향 · 깊이를 정해 둔다(use) — SEED 는 숫자 권장(기본 20 · 세로 위 20 · 아래 80 · 가로 20 · 또는 영역의 15 ~ 20%)만 두고 쓰는 쪽이 고른다. groo 는 비율로 정하는 안을 두지 않는다 — 자리마다 정한 깊이가 웹 · 앱을 같은 값으로 묶고, 비율로 정하면 같은 자리도 상자 높이에 따라 깊이가 달라진다(남은 규칙 R5 — 그대로, 2026-10-22 https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L).
• 가로 줄의 여백은 화면 여백 24 — 흐림 20 보다 넓어 처음 · 끝 칩은 흐리지 않는다(SEED Chip Tabs 예제는 20).
• 키보드 초점이 흐림 아래 가려지지 않게 스크롤 여유를 깊이만큼 둔다 — SEED 는 정하지 않았다.
• 시트 · 대화상자 본문의 흐림도 이 규칙이다 — SEED Dialog 의 안의 흐림(넘칠 때만 아래 48)은 따르지 않는다.

Migration notes제목 링크 복사

2026-10-08 — 마스크를 쪽마다 한 층 + intersect 로(레시피)제목 링크 복사

YAML 은 "흐린 쪽마다 하나씩 겹친다(mask-composite: intersect)" 인데 레시피는 처음 흐림 · 가운데 불투명 · 끝 흐림 세 층을 겹치지 않게 이어 붙였다(mask-composite 기본 add). 상자가 두 깊이의 합(overlayBody 는 100)보다 낮으면 가운데 층이 0 이 되고 두 흐림이 겹친 자리에서 더해져 덜 흐렸다. 레시피 · 예제 · 미리보기를 YAML · SEED 대로 바꿨다 — 흐린 쪽마다 상자 전체 크기의 층 하나(단계는 그 쪽 깊이의 몫), 두 층을 곱한다(-webkit-mask-composite 는 옛 이름 source-in). 그보다 큰 상자의 모습은 그대로다. 사용자 결정 — 비교 페이지 6.

2026-10-03 — 새로 둔다(SEED Scroll Fog)제목 링크 복사

사용자가 비교 페이지에서 정했다 — SEED 의 늘 켜진 마스크(gradient-fade-mask, v104), 가로 좌우 20 · 세로 위 20 · 아래 80(기본 20), 그 깊이만큼 여백. 넘친 쪽만 흐리는 안(가로 20 · 세로 48)은 고르지 않았다. 그래서 2026-10-02 의 대화상자 · 팝오버 규칙 "본문이 넘칠 때만 아래 48 흐림"(Dialog · Popover)을 이 규칙으로 바꿨고, Chip · Chip Tabs 의 "끝 흐림은 Scroll Fog 차례에" 는 row 흐림이 됐다.

제품은 앱 적용 단계에서 옮긴다(2026-10-03 조사). 세 제품 모두 끝 흐림이 없다 — 칩 필터 줄 · 2차 탭은 잘린 채 끝나고, 시트 · 대화상자의 긴 본문은 넘쳐도 알리지 않는다.

• 앱 적용 때 화면마다 정할 자리 — 넘칠 수 있는 시트 · 대화상자 본문(거래 상세 · 카테고리 고르기 · 반복 거래 목록), 바닥 고정 버튼이 있는 긴 화면(가져오기 · 약관).