SEED Design

Changelog

최신 업데이트와 변경사항을 기록합니다.

2025.10.23

Tag Group 컴포넌트를 추가합니다. Tag Group은 아이콘 및 텍스트로 이루어진 태그를 구분 기호와 함께 수평 레이아웃으로 표시하는 컴포넌트입니다. 6aafce0

영향받는 패키지

AppBar의 스타일을 업데이트합니다. 1902dfa

  • Top Navigation의 title 및 description에 lineHeight 값을 정의합니다. (React AppBar 컴포넌트에 반영됩니다.)
  • <Icon /> 컴포넌트를 활용하여 <AppBarIconButton /> 내부 아이콘을 커스터마이징할 수 있도록 수정합니다.

영향받는 패키지

Article 유틸리티 컴포넌트를 추가하고 Text 컴포넌트를 업데이트합니다. f2ddf29

  • Article 컴포넌트는 일관된 selection 스타일 및 줄바꿈 정책을 사용할 수 있게 돕습니다.
  • Text 컴포넌트에서 textDecorationLine="underline" 및 whiteSpace, userSelect prop을 지원합니다.

영향받는 패키지

Switch가 checked 상태가 아닐 때 thumb 크기를 줄여 상태를 인지하기 쉽도록 합니다. enabled-disabled 상태 간 트랜지션을 추가합니다. 4c33f07

영향받는 패키지

Switch와 Switch Mark의 disabled 상태를 더 잘 구별할 수 있도록 스타일을 수정합니다. 3df657f

영향받는 패키지

2025.10.17

Text Field와 Multiline Text Field가 기본적으로 배경 색을 갖지 않도록 수정합니다. f1cf4cd

영향받는 패키지

PullToRefresh.preventPull을 활용하여 PullToRefreshContent 내부에서 당겨서 새로고침(PTR) 동작을 비활성화할 수 있습니다. 687b261

영향받는 패키지

실제 기본값을 표시하도록 JSDoc을 업데이트합니다. 687b261

영향받는 패키지

AppScreen에서 스와이프로 pop할 때 AppScreen이 한번 깜빡거리고 닫히는 버그를 수정합니다. 9b91751

영향받는 패키지

매너온도 L9 전경 및 배경 색상의 채도를 낮춥니다. 3898183

영향받는 패키지

2025.10.10

closeOnInteractOutside를 false로 설정하여 Help Bubble 외부와 상호작용 시에도 닫히지 않도록 설정할 수 있습니다. (기본값: true) b10ff0b

영향받는 패키지

2025.10.02

HelpBubble의 스타일을 업데이트하고, 신규 기능을 지원합니다. 0b8a02e

  • arrowTip이 content에서 떨어져 보이던 문제를 수정합니다.
  • title과 description에서 \n을 줄바꿈으로 렌더링하도록 수정합니다.
  • closeOnInteractOutside를 false로 설정하여 Help Bubble 외부와 상호작용 시에도 닫히지 않도록 설정할 수 있습니다. (기본값: true)

영향받는 패키지

@seed-design/docs-mcp 패키지 추가 8661d79

Tools:

  • get_react_component
  • get_breeze_component
  • get_react_changelog
  • list_react_components
  • list_breeze_components
  • get_react_changelog

영향받는 패키지

Callout에 tone=positive variant를 추가합니다. 6c6099d

영향받는 패키지

Figma Codegen이 Bottom Sheet의 hideCloseButton prop을 사용하는 코드를 반환하도록 수정합니다. ac1fd00

영향받는 패키지

Figma 아이콘 및 스타일 정보를 최신화합니다. 8b07555

영향받는 패키지

2025.09.29

6d2e13d MannerTemp 컴포넌트가 레이아웃에서 너비를 덜 차지하도록 업데이트합니다.

영향받는 패키지

2025.09.26

1420b68 MannerTemp 컴포넌트가 레이아웃에서 높이를 덜 차지하도록 업데이트합니다.

영향받는 패키지

2025.09.25

39a96f1 (BREAKING CHANGE: Snackbar Snippet을 다시 설치해야합니다) Snackbar 컴포넌트 변경

  • Snackbar의 배경색이 다크모드에서 흰색으로 변경됩니다.
  • Prefix 요소유무에 따라 여백이 변경됩니다.
  • npx @seed-design/cli@latest add ui:snackbar 명령어로 설치하세요.

2cf90ac 🌱 SEED Design 패키지의 첫 메이저 버전을 출시합니다.

e038490 (BREAKING CHANGE: Snippet을 다시 설치해야 합니다.) Manner Temp, Manner Temp Badge 컴포넌트를 업데이트합니다.

  • snippet 내 오타 수정
  • 신규 10단계 반영
  • 업데이트 가이드
    1. @seed-design/css@latest @seed-design/react@latest 설치
    2. npx @seed-design/cli@latest add ui:manner-temp ui:manner-temp-badge로 snippet 최신화
    3. 온도 범위가 변경되었으므로, <MannerTemp level="l1" /> 혹은 <MannerTempBadge level="l1" />과 같이 level을 직접 지정하여 사용하고 있는 경우가 있는지 확인

4153ca5 HelpBubble 컴포넌트의 배경색이 다크모드에서 흰색으로 변경됩니다.

a7d07f0 (BREAKING CHANGE: SwitchMark 사용을 위해서는 Snippet을 다시 설치해야 합니다.) Switch의 토글 영역만을 정의한 Switch Mark 컴포넌트를 추가합니다.

  • npx @seed-design/cli@latest add ui:switch 명령어로 설치하세요.

(BREAKING CHANGE: ListHeader 사용을 위해서는 Snippet을 다시 설치해야 합니다.) List Header 컴포넌트를 추가합니다.

  • npx @seed-design/cli@latest add ui:list 명령어로 설치하세요.

영향받는 패키지

2025.09.22

0ca19c0 Segmented Control 컴포넌트를 업데이트합니다.

  • Notification Badge를 표시하는 notification prop을 추가합니다.
  • SegmentedControlItem의 children을 string에서 ReactNode로 확대합니다.
  • 스타일을 업데이트합니다.

950c9e1 add 명령어 사용 방식을 변경합니다.

  • 항목 추가
seed-design add ui:action-button breeze:animate-number # ui 이외 레지스트리의 항목도 추가할 수 있게 되었습니다.
  • 특정 레지스트리에 있는 모든 항목 추가
seed-design add-all ui lib breeze
  • 모든 레지스트리의 모든 항목 추가
seed-design add-all --all

패키지 의존성 및 스니펫 의존성 설치 방식을 최적화합니다.

bef65a6 Figma Variable & Variable Collection 정보를 최신화합니다.

11f5e76 Snackbar 헤드리스에서 닫기 버튼에 하드코딩된 aria-label 속성을 제거합니다.

영향받는 패키지

2025.09.12

afdd1ee Figma Codegen을 위한 컴포넌트 핸들러를 업데이트합니다.

  • List, Checkmark, RadioMark, Radio, Tabs, ChipTabs 지원
  • Chip, Divider, HelpBubble, Switch, Checkbox 업데이트

8ebe8a5 Switch, Checkmark, Radio Mark의 스타일을 업데이트합니다.

  • tone=neutral variant를 추가합니다.
  • Switch의 thumb 크기를 조정합니다.

Checkbox와 Radio의 weight variant를 default, stronger에서 regular, bold로 수정합니다.

f61b80d 다크 모드에서의 색상 대비 보장을 위해 시맨틱 색상을 수정하고 컴포넌트에서의 색상을 변경합니다.

  • $color.bg.warning-solid: theme-dark에서 $color.palette.yellow-600 → $color.palette.yellow-800
  • $color.bg.warning-solid-pressed: theme-dark에서 $color.palette.yellow-700 → $color.palette.yellow-900
  • Badge, Page Banner의 tone=warning, variant=solid variant에서 전경 항목 색상 변경: $color.fg.neutral → $color.palette.static-black-alpha-900

ce047f5 Tabs.Carousel의 reInit 이벤트 시 탭 인덱스가 변경되지 않는 문제를 수정합니다.

영향받는 패키지

2025.09.08

a22b8b9 ChipTabs 컴포넌트 Variant, Size 변경 및 디자인 수정

  • variant neutralOutline 추가
  • variant brandSolid deprecated
  • size(medium(default) | large) 추가

5836976 text-field의 value slot이 input의 size attribute로 인해 기본적으로 width를 가지는 문제를 해결합니다.

12faf5a List 컴포넌트를 추가하고, Checkbox 및 Radio 컴포넌트를 개선합니다.

  • List 컴포넌트를 제공하여, 정보를 구조화된 목록 형태로 표시할 수 있도록 합니다.
  • Checkbox와 Radio의 컨트롤 영역만을 표시하는 Checkmark와 RadioMark를 제공합니다.
  • Select Box에서 컨트롤 영역을 Checkmark와 RadioMark로 교체합니다.
  • RadioGroup 컴포넌트를 제공합니다.

영향받는 패키지

2025.09.05

9d93518 Text 컴포넌트의 fontSize, lineHeight, color 속성에 string도 사용 가능하도록 변경했습니다.

91952e4 replace-semantic-stroke-color transform을 추가합니다.

  • @seed-design/css v0.2.0에 맞춰 replace-semantic-stroke-color transform을 추가합니다.
  • @seed-design/css/vars에서 사용한 stroke 토큰을 업데이트하는 마이그레이션 코드모드를 추가합니다.

영향받는 패키지

2025.09.04

35984d0 Chip 컴포넌트를 업데이트합니다.

  • 아이콘에 트랜지션 효과가 적용되지 않던 현상을 수정합니다.
  • Button, Toggle 등 사용되는 방식에 따라 적절한 data prop을 받도록 수정합니다.

c5bed96 Divider 컴포넌트가 $color.stroke.neutral-muted 색상을 기본값으로 사용하도록 수정합니다.

영향받는 패키지

2025.09.03

8448880 시맨틱 stroke 컬러 토큰을 업데이트합니다.

이름이 변경되는 stroke 토큰

  • Color Role 규칙에 맞춰 일관적인 토큰 이름을 유지할 수 있도록 업데이트합니다.
  • 이름이 변경되는 stroke 토큰을 사용하고 있는 경우, 간단한 Find & Replace 마이그레이션이 필요합니다.
기존신규비고
$color.stroke.neutral-muted$color.stroke.neutral-subtle가장 먼저 마이그레이션해야 합니다.
$color.stroke.on-image$color.stroke.neutral-subtle
$color.stroke.neutral$color.stroke.neutral-muted
$color.stroke.field-focused$color.stroke.neutral-contrast
$color.stroke.control$color.stroke.neutral-weak
$color.stroke.field$color.stroke.neutral-weak
$color.stroke.brand$color.stroke.brand-weak
$color.stroke.positive$color.stroke.positive-weak
$color.stroke.informative$color.stroke.informative-weak
$color.stroke.warning$color.stroke.warning-weak
$color.stroke.critical$color.stroke.critical-weak

색상이 변경되는 stroke 토큰 (마이그레이션 불필요)

$color.stroke.neutral-contrast (이름 변경 전 $color.stroke.field-focused)

모든 theme mode에서 $color.palette.gray-800 → $color.palette.gray-1000로 변경되었습니다.

신규 stroke 토큰 (마이그레이션 불필요)

신규
$color.stroke.neutral-solid
$color.stroke.brand-solid
$color.stroke.positive-solid
$color.stroke.informative-solid
$color.stroke.warning-solid
$color.stroke.critical-solid

영향받는 패키지

2025.08.28

c51a261 font-size, line-height 토큰에 static variant를 추가합니다.

  • --seed-font-size-t1-static ~ --seed-font-size-t10-static
  • --seed-line-height-t1-static ~ --seed-line-height-t10-static

5f2ee39 CSS 최적화 도구(e.g. cssnano)가 CSS variable로 정의된 longhand declaration을 병합하지 않도록 합니다. (workaround, 관련 issue)

8299ba9 Snackbar 컴포넌트를 업데이트합니다.

  • root 영역에 maxWidth 스펙을 추가합니다.
  • pauseOnInteraction의 기본값을 false에서 true로 변경합니다.

d497166 플랫폼별 조건부 폰트 스케일링 제한 (iOS: 135%, Android: 150%) 적용

  • CSS 변수 --seed-{font-size|line-height}-limit-{min|max} 도입
  • 빌드 타임 basePx 계산을 런타임 static 토큰 참조로 대체
  • global.ts에 폰트 스케일링 변수 통합

9a3c76a Divider 컴포넌트를 업데이트합니다.

  • orientation을 지정할 수 있습니다.
  • Divider를 li로 렌더링하여 ol, ul 내부에서 사용할 수 있습니다.
  • Divider를 div 또는 li로 렌더링하는 경우에도 role="separator"를 지정하여 스크린 리더가 Divider를 읽도록 할 수 있습니다.

영향받는 패키지

2025.08.22

f806356 Page Banner 컴포넌트를 추가합니다. Inline Banner 컴포넌트를 deprecate합니다.

  • Inline Banner 컴포넌트 대비 모든 tone에서 모든 variant를 지원하며, 내부 Button의 충분한 터치 영역을 보장합니다.
<PageBanner
  tone="informative"
  variant="weak"
  description="사업자 정보를 등록해주세요."
  suffix={
    <PageBannerButton asChild>
      <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
        새 탭에서 열기
      </a>
    </PageBannerButton>
  }
/>

시맨틱 색상 토큰을 추가하고 수정합니다.

  • $color.bg.positive-solid-pressed: theme-dark에서 $color.palette.green-500 → $color.palette.green-600
  • $color.bg.warning-solid-pressed 추가

1982494 Badge 컴포넌트를 업데이트합니다.

  • tone=warning variant를 추가합니다.
  • maxWidth 스펙을 추가합니다.

신규 시맨틱 색상 토큰을 추가합니다.

  • $color.fg.warning
  • $color.stroke.warning
  • $color.fg.brand-contrast
  • $color.bg.brand-weak
  • $color.bg.brand-weak-pressed

영향받는 패키지

2025.08.20

0be9b00 Avatar, Avatar Stack 컴포넌트에 size=108 variant를 추가합니다.

영향받는 패키지

2025.08.12 #2

62094b6 Help Bubble의 스타일 문제를 수정합니다.

  • placement=left-* / placement=right-*에서 arrow가 content와 떨어져 표시되는 문제를 수정합니다.

영향받는 패키지

2025.08.12

9993e0e 레이아웃 컴포넌트를 사용할 때 flexGrow, flexShrink, flexWrap에도 true를 사용할 수 있도록 수정합니다.

Figma 레이어가 이미지 Fill을 가지고 있는 경우 <img /> 요소를 prepend합니다.

영향받는 패키지

2025.08.11

ef91c21 Bottom Sheet의 스타일 문제를 수정해요.

  • Close Button에 브라우저 기본 스타일이 표시되는 문제를 수정해요.

aa40f66 Figma 컴포넌트 정보 및 핸들러를 최신화하고 codegen을 업데이트합니다.

  • Instance에 오버라이드한 내용이 있는 경우 주석으로 알립니다.

영향받는 패키지

2025.08.07

5a025b7 Switch 컴포넌트를 업데이트합니다.

  • size: medium → 32, small → 16으로 rename합니다.
    • (React) size="medium"으로 32, size="small"로 16을 사용할 수 있습니다. (deprecated)
  • size: 24를 추가합니다.
  • 모든 size에 대해 레이블 스타일을 추가합니다. (기존: small에만 존재)

f9379e0 Figma 컴포넌트 핸들러 정보를 최신화하고 정확한 prop을 생성하도록 수정합니다.

  • Chip, Progress Circle, Switch 컴포넌트 핸들러를 업데이트합니다.
  • grow 대신 flexGrow가 생성되도록, borderWidth가 string으로 생성되도록 수정합니다.

ac35731 Chip.Root position: relative 속성 추가

  • 이제 Chip.Toggle을 사용해도 예상치 못한 스크롤이 발생하지 않습니다.

f9041e9 CheckSelectBox, RadioSelectBox의 label, description 영역을 수정합니다.

  • span 대신 div를 렌더링합니다.
  • 기본적으로 grow하도록 만들어 Badge 등 추가 요소를 넣기 쉽게 만듭니다.

영향받는 패키지

2025.08.04

2e2cc53 - Figma 컴포넌트 핸들러 및 스타일 정보를 최신화합니다.

  • normalize 과정에서 그라디언트 정보를 포함하도록 수정합니다.

609b8f3 iOS의 더 큰 텍스트 기능에 제한을 둡니다.

  • iOS는 7단계(XS ~ XXXL)의 텍스트 크기 조절 이외에도, 보다 더 큰 텍스트를 위한 더 큰 텍스트 기능을 제공합니다.
  • iOS 네이티브에서는 더 큰 텍스트의 UI 레이아웃 대응이 어렵다고 결정하여, XXXL(135%) 이상의 텍스트 크기 조절을 지원하지 않습니다.
  • 웹뷰도 iOS와 동일한 제한을 위한 기능이 추가되었습니다.

99e7f2c figma-extractor (Figma REST API 호출 결과를 파일로 저장하는 CLI 툴) 설정 파일 작성 방법을 개선합니다.

  • 사용자가 직접 API 호출부터 파일 저장까지의 파이프라인을 작성할 수 있습니다.

영향받는 패키지

2025.08.01

4afe80b MultilineTextField의 스타일 문제를 수정합니다.

  • 스크롤바가 요소 끝에 표시되도록 수정합니다.

영향받는 패키지

2025.07.31

235147d action-button: size=medium, layout=withText variant에서 gap을 1 → 1.5로 수정합니다.

3c13ad7 highlight-magic-pressed 그라디언트 토큰을 추가합니다.

영향받는 패키지

2025.07.29

a059fb0 Menu Sheet 컴포넌트를 추가하는 동시에 Action Sheet과 Extended Action Sheet 컴포넌트를 deprecate합니다.

  • Menu Sheet React 문서
  • Menu Sheet는 기존 Extended Action Sheet의 모든 기능을 포함하는 동시에, labelAlign prop으로 MenuSheetItem를 left 또는 center로 정렬할 수 있습니다.

3889eb6 Inline Banner의 스타일 문제를 수정합니다.

  • title과 description이 inline-flex로 레이아웃되던 문제를 해결합니다.
  • title과 description 간의 간격을 조정합니다.
  • 닫기 버튼(Dismissible)과 suffix icon, link label이 상단으로 레이아웃되던 문제를 해결합니다.

Callout의 스타일 문제를 수정합니다.

  • title과 description 간의 간격을 조정합니다.

Chip의 스타일 문제를 수정합니다.

  • Chip.Button의 label이 의도한 글꼴로 표시되도록 수정합니다.

영향받는 패키지

2025.07.28

9b271d6 snippet의 deprecated 여부를 기록합니다. cli add 명령 실행 시 snippet 목록에서 deprecate 여부를 표시하고, --all로 모든 스니펫 추가 시 기본적으로 deprecated snippet을 제외합니다.

seed-design add --all # deprecated snippet 제외
seed-design add --all --include-deprecated # deprecated snippet 포함

영향받는 패키지

2025.07.23

0ffcd48 Chip 컴포넌트가 추가되고, ActionChip, ControlChip 컴포넌트가 Deprecated 되었습니다.

  • Chip 컴포넌트
  • Chip 컴포넌트는 버튼과 토글 컴포넌트를 모두 포함하고 있습니다.

56e03ca Layout 컴포넌트 pb, pt, paddingBottom, paddingTop 속성에 safeArea 값을 지정할 수 있도록 지원

<Box pt="safeArea" paddingTop="safeArea" />
<Box pb="safeArea" paddingBottom="safeArea" />

영향받는 패키지

2025.07.11

cdc0930 @seed-design/stackflow 백스와이프 애니메이션 개선

  • iOS 스타일 화면 전환 애니메이션의 지속 시간과 타이밍 함수가 300ms에서 350ms로 조정되어 더 부드러운 전환 효과를 제공합니다.
  • 스와이프 백 제스처 시 애니메이션이 보다 자연스럽고 일관되게 표현됩니다.
  • 스와이프 백 종료 시 CSS 변수를 활용해 전환 상태를 명확히 하여 사용자 경험이 개선되었습니다.

946faf7 그라디언트 토큰 추가 및 변경

  • fade-layer-floating, fade-layer-default 토큰이 추가되었습니다.
  • $gradient.shimmer-magic 토큰 stop color가 변경되었습니다.

71c58fd iOS Font Scaling

  • iOS 기기에서 시스템 폰트 크기 설정에 따라 동적으로 폰트 크기와 줄 높이를 조정하는 폰트 스케일링 옵션이 추가되었습니다.
  • 플러그인(webpack, vite, rsbuild)에서 fontScaling 옵션을 통해 폰트 스케일링 기능을 활성화할 수 있습니다.
  • data-seed-font-scaling='enabled' 일 때, 폰트 크기를 조정합니다.

영향받는 패키지

2025.07.01

그라디언트 토큰 및 AI 관련 컴포넌트 업데이트

  • AI용 magic 테마와 중립적인 테마의 다양한 그라디언트(Shimmer, Fade, Glow, Highlight) 컬러 토큰이 추가되었습니다.
  • <Callout /> 컴포넌트의 tone="magic" 스타일이 변경되었습니다.
  • <Skeleton /> 컴포넌트에 tone prop이 추가되어 neutral과 magic 옵션을 제공합니다.
  • 모든 Layout 컴포넌트(Box, VStack, HStack 등)에서 bg/bgGradient 속성을 통해 그라디언트를 지정할 수 있습니다.
  • <Text /> 컴포넌트에 textDecorationLine 옵션이 추가되었습니다.
  • <HelpBubble /> 컴포넌트의 arrow가 상위 요소의 font-size에 영향받지 않도록 수정되었습니다.
  • <BottomSheet /> 컴포넌트의 description font-size가 t6에서 t5로 변경되었습니다.
  • 기존 보라색 계열 magic 관련 시맨틱 색상들(fg/magic, fg/magic-contrast, bg/magic-solid)이 삭제되었습니다.

영향받는 패키지

2025.06.24

Alpha 컬러 업데이트

  • White와 black의 alpha 색상이 새롭게 추가되었습니다. (staticWhiteAlpha50 ~ staticWhiteAlpha1000, staticBlackAlpha100 ~ staticBlackAlpha1000)
  • stroke 색상에도 alpha 색상이 추가되었습니다.
  • 기존 alpha 색상 값들의 매핑이 변경되었습니다:
    • staticBlackAlpha500 → staticBlackAlpha700
    • staticBlackAlpha200 → staticBlackAlpha500
    • staticBlackAlpha50 → staticBlackAlpha200
    • staticWhiteAlpha200 → staticWhiteAlpha300
  • npx @seed-design/codemod@latest replace-alpha-color 코드모드를 제공합니다.

영향받는 패키지

Last updated on

On this page

2025.10.23
2025.10.17
2025.10.10
2025.10.02
2025.09.29
2025.09.26
2025.09.25
2025.09.22
2025.09.12
2025.09.08
2025.09.05
2025.09.04
2025.09.03
2025.08.28
2025.08.22
2025.08.20
2025.08.12 #2
2025.08.12
2025.08.11
2025.08.07
2025.08.04
2025.08.01
2025.07.31
2025.07.29
2025.07.28
2025.07.23
2025.07.11
2025.07.01
2025.06.24