Interactive kit · grounded in code

토스트 — 리디자인 제안

🛠️

확정 2026-08-15 — 구현 반영toast-host.tsx는 이제 §2의 인버스 서피스로 렌더링된다 — 배경은 신설 시맨틱 토큰 $inverseSurface(+text/action/border, 변형별 아이콘 토큰) 하나로 테마 전 구간(라이트/다크 × 4개 팔레트) 반응형이며, 배지 틴트는 완전히 제거됐다.

현행 — 배지 틴트 + 아웃라인 액션방금 빌드되었고, 오너가 반려한 룩

정기 일정이 생성되었습니다보기

문제 · 배경이 카드 배지·상단 배너와 동일한 success 팔레트($badgeSuccessBg #EBF8F1 / $badgeSuccessText #14804A)를 재사용 — 화면 속 다른 배지와 시각적으로 구분되지 않아, 토스트가 "그 위에 뜬 시스템 레이어"로 읽히지 않는다.문제 · 액션이 outline Button(투명 배경 + 텍스트와 같은 색 1px 보더) — 틴트 배경 위에 같은 색상군 테두리만 있어 탭 가능한 컨트롤로 거의 인지되지 않는다.문제 · radius $4(16px)는 Card의 정적 콘텐츠 컨테이너 값을 그대로 가져온 것 — 뜨고 사라지는 일시적 토스트와 화면에 계속 남는 카드가 같은 반경을 쓸 근거가 없다.

★추천 — 인버스 서피스 (inverse-surface)M3 snackbar의 inverseSurface + Toss 다크 캡슐 방향 — 배경 하나, 아이콘이 변형을 전달

라이트 테마 화면

정기 일정이 생성되었습니다보기

① 20pt② cardBody 14/22 · flex:1 · 최대 2줄③ 13/800

컨테이너 #1A2119는 화면의 다른 어떤 표면에도 없는 색 — 그림자 하나만으로 충분히 뜬다.

다크 테마 화면

정기 일정이 생성되었습니다보기

① 20pt② cardBody 14/22 · flex:1 · 최대 2줄③ 13/800

컨테이너는 라이트와 같은 #1A2119 — 화면 자체가 이미 어두워 그림자 대신 1px 헤어라인 보더로 분리한다.

아이콘이 변형을 전달 — 배경은 하나 (#1A2119 고정)

성공

오류

경고

안내

컨테이너

배경#1A2119 — classic-grass 다크 테마 surface.primary. 앱 라이트/다크 모드 모두 동일(테마 불변)

radius$6 · 24px — 1줄일 때 사실상 캡슐, 2줄로 늘어도 비율 유지 ($7=9999는 2줄에서 양 끝이 찌그러짐)

라이트 앱 그림자shadowColor $overlay · opacity .16 · radius 10 · offset (0,4) — 기존 값 유지

다크 앱 보더1px 헤어라인 rgba(255,255,255,.08) — 근흑색 화면 위에서 그림자가 보이지 않아 보더로 분리

레이아웃

paddingH$4 · 16px

paddingV$3 · 12px

gap$3 · 12px (아이콘–본문–액션)

maxWidth560px

하단 오프셋insets.bottom + 72px — 탭바 자체 높이 64px 위 8px 여백, 변경 없음

타이포·색상 (대비 계산)

아이콘 20ptsuccess #68BF8E · error #D4736E · warning #D4A849 · info #C7B5F2 — 다크 테마 상태색

본문cardBody 14/22 · #F0F4F1 — 배경 대비 14.8:1

액션13px/800 · #4DB380 — 배경 대비 6.3:1 (WCAG AA 4.5:1 상회)

대안 — 변형 틴트 개선판색으로 변형을 구분하고 싶다면

정기 일정이 생성되었습니다보기

개선 · radius $6 · paddingH 16 · paddingV 12 · gap 12 · maxWidth 560 — §2와 동일한 치수 규율을 적용, "임의 값" 문제만은 고친다.개선 · 액션을 outline(보더)에서 ghost(보더 없는 굵은 텍스트)로 바꿔 문제 #2를 완화 — 여전히 배경과 같은 색이지만 최소한 테두리 대비 실패는 없앤다.문제 · 여전히 STATUS_BADGE_LIGHT/DARK를 배경으로 재사용 — 화면의 배지·배너와 같은 톤이라 문제 #1(콘텐츠와의 융합)은 그대로 남는다. 다크 테마에서는 배지 배경 자체가 이미 어두워(#0A3D1F 등) 화면과의 명도차가 더 줄어든다.

비교추천(인버스) vs 대안(틴트)

비교

추천 (인버스)

대안 (틴트)

콘텐츠와의 대비

높음 — 화면 어디에도 없는 유일한 어두운 표면, 배지·배너와 혼동되지 않음

낮음 — 배지·배너와 동일한 팔레트, 시각적으로 융합됨

다크모드

불변 — 표면색 하나로 라이트/다크 앱 모두 동일한 인버스 대비 확보

약함 — 다크 배지 배경 자체가 이미 어두워 화면과의 명도차가 줄어듦

변형 식별성

아이콘 형태 + 색의 이중 신호

배경색 단일 신호 — 색약 사용자에게 배지·배너와 이중으로 혼동 가능

Toss·M3 정합

직접 정합 — M3 snackbar inverseSurface, Toss 다크 캡슐 방향과 동일

참고 사례 없음 — 배지 팔레트를 토스트에 재사용하는 건 이 앱만의 관행

결론

확정인버스 서피스 + 아이콘 시맨틱스 — 구현 완료

컨테이너를 다크 테마의 surface.primary(#1A2119) 하나로 고정하고, 변형은 20pt 리딩 아이콘의 형태+색으로만 전달한다 — Material 3의 inverseSurface 규칙, Toss TDS의 다크 캡슐 방향과 직접 정합하며, 이 앱의 배지·배너와도 절대 혼동되지 않는 유일한 표면이 된다.모션은 현행 유지 — fade + 12px slide, 200ms (기존 `reveal` 애니메이션, AnimatePresence enter/exit). 스태킹은 이미 강제되어 있다: toast.store.ts의 상태가 `toast: ToastItem | null` 단일 슬롯이라 새 showToast 호출은 항상 이전 토스트를 교체한다 — 동시에 두 개가 뜨는 경로 자체가 없다.

Spec (grounding, anatomy)

설계 제안 — 아직 구현되지 않음. 현재 배지-틴트 토스트(오너 반려)를 대체할 인버스 서피스 안 — 컨테이너는 다크 테마 표면색 하나로 고정, 변형은 아이콘으로 전달. M3 snackbar inverseSurface + Toss TDS 방향에 정합.

grounded in 7 source file(s)

packages/app/src/presentation/components/toast-host.tsxpackages/app/src/presentation/stores/toast.store.tspackages/app/src/config/themes/classic-grass.theme.tspackages/app/src/config/themes/status-badge-palette.tspackages/ui/src/text.tsxpackages/ui/src/button.tsxpackages/ui/src/card.tsx