셀링스파크 디자인 시스템

Figma 「셀링부스터_디자인시스템_최종」 03.Components

색 램프

1층 --sp-* — Figma Paint Style 90건 그대로

primary
secondary
gray
warning
success
destructive
blue

라이트 · 다크 나란히

토글 없이 두 테마를 함께 봅니다 — 다크 결함(가라앉은 카드가 배경에 녹는 것 등)은 이 자리에서 눈에 걸립니다

light · bg-background 위

tone=card

tone=sunken — 배경과 갈라져 보여야 합니다

뱃지

dark · bg-background 위

tone=card

tone=sunken — 배경과 갈라져 보여야 합니다

뱃지

타이포

Figma Text Style 34건 → 유틸 27개 전부 — font 변수는 PC/MO 가 뒤집혀 있어 쓰지 않았습니다 (굵기만 다른 7쌍은 font-bold 합성)

Display 1 · 60다람쥐 헌 쳇바퀴에 타고파
Display 2 · 50다람쥐 헌 쳇바퀴에 타고파
Display 3 · 45다람쥐 헌 쳇바퀴에 타고파
Display 4 · 32다람쥐 헌 쳇바퀴에 타고파
Heading 1 · 24다람쥐 헌 쳇바퀴에 타고파
Heading 2 · 20다람쥐 헌 쳇바퀴에 타고파
Heading 3 · 16다람쥐 헌 쳇바퀴에 타고파
Heading 4 · 14다람쥐 헌 쳇바퀴에 타고파
Body Xlarge · 18다람쥐 헌 쳇바퀴에 타고파
Body Large · 16다람쥐 헌 쳇바퀴에 타고파
Body Medium · 14다람쥐 헌 쳇바퀴에 타고파
Body Small · 12다람쥐 헌 쳇바퀴에 타고파
Label · 12다람쥐 헌 쳇바퀴에 타고파

MO 램프

Display MO 1 · 40다람쥐 헌 쳇바퀴에 타고파
Display MO 2 · 32다람쥐 헌 쳇바퀴에 타고파
Display MO 3 · 28다람쥐 헌 쳇바퀴에 타고파
Display MO 4 · 24다람쥐 헌 쳇바퀴에 타고파
Heading MO 1 · 20다람쥐 헌 쳇바퀴에 타고파
Heading MO 2 · 18다람쥐 헌 쳇바퀴에 타고파
Heading MO 3 · 16다람쥐 헌 쳇바퀴에 타고파
Heading MO 4 · 14다람쥐 헌 쳇바퀴에 타고파

긴 글(160%) · 버튼

Body Xlarge long · 18/160%다람쥐 헌 쳇바퀴에 타고파 두 줄이 되면 행간이 보입니다
Body Large long · 16/160%다람쥐 헌 쳇바퀴에 타고파 두 줄이 되면 행간이 보입니다
Body Medium long · 14/160%다람쥐 헌 쳇바퀴에 타고파 두 줄이 되면 행간이 보입니다
Button Large · 18다람쥐 헌 쳇바퀴에 타고파 두 줄이 되면 행간이 보입니다
Button Medium · 16다람쥐 헌 쳇바퀴에 타고파 두 줄이 되면 행간이 보입니다
Button Small · 14다람쥐 헌 쳇바퀴에 타고파 두 줄이 되면 행간이 보입니다

Button

전부 pill(r=999) · Large 56 / Medium 48 / Small 40 / Xsmall 24

default
secondary
outline
sub
gray
ghost
destructive
link

Badge

채움이 아니라 tint — 배경 색/50 + 글자 색/500 · r=6

defaultsecondarydestructiveoutlineredyellowgreenpurplebluegraywhite

Input · Textarea

입력칸은 pill · Textarea 는 r=16 고정

Select

메뉴 항목은 배경이 아니라 글자색·굵기로 표시합니다

Tabs

1-Depth 는 밑줄 · 2-Depth 는 알약

1-Depth · Medium
2-Depth · 알약

Select Control

체크 18 · 라디오 18(원 두 개라 자산 없음) · 토글 45×20

Chip · Input Chip

Chip 은 고르는 토글 · Input Chip 은 지우는 칩

검색어기본보라파랑노랑빨강

Table

머리행 42 · 본문행 60 (좁은 화면은 32 · 46) · 전부 왼쪽 정렬

주문번호상품상태금액
20260901-0001텀블러 500ml결제완료24,000원
20260901-0002보온병취소31,000원

Pagination

칸 32×32 알약 · 간격 16 · 지금 쪽은 배경으로 표시

Feedback

툴팁·토스트는 다크에서 색이 뒤집힙니다 — 안 그러면 배경과 같은 색입니다

Calendar

Figma popup_calendar_PC — 라운드 32 · 여백 24 · 날짜 원 22 · 14 Bold · 기본 로케일 한국어

하루 고르기 · 휴일 이름 · 바닥 버튼

2026년 9월

기간 고르기 — 예전 판에서는 아무 표시도 안 났습니다

2026년 9월

Thumbnail · Skeleton

라운드가 크기에 딸려 갑니다 — 40 만 8, 나머지 16

그림자

Figma Effect Style 6건 — 라이트·다크가 따로입니다

shadow-ds-1
shadow-ds-2
shadow-ds-3

Breadcrumb

Figma breadcrumb_item · set — 14 Regular #6a7381 · 간격 4 · 셰브런 16

Number Badge · Level Badge

한 자리는 20 정원, 여러 자리는 알약 39×20 — 등급은 --sp-level-01~04

9999+9999+0 은 숨김 →0
Level 1Level 2Level 3Level 4마스터

Chart Legend · Metric

꺼진 계열도 수치는 진하게 남습니다 (Figma 실측)

1.00~1.74좋음1.75~2.49보통2.50~3.24나쁨3.25 이상모름

Month Cell

겹치는 사실을 따로 받습니다 — 3일 칸은 오늘·공휴일·선택이 동시에 참입니다

일
월
화
수
목
금
토
28지난달 휴일
29
1
음 1.15
2삼일절
음 1.16
발주 마감
3
4대체공휴일
6

Empty State

삽화는 파일이 아니라 컴포넌트 — 색 두 개가 CSS 변수라 표면·테마를 따라갑니다

아직 스토어 연동이 안되셨군요.

스토어를 연동하시면 시장의 흐름에
따라 추천을 받을 수 있어요.

자주 보는 키워드는 ‘찜’ 하세요.
맞춤 트렌드를 보여 드립니다.

같은 그림, 바탕 위 톤

검색 결과가 없습니다.

채널 연동이 모두 되어있는지 확인해주세요.채널 연동하러 가기

  • 네이버 로그인이 안 되어 있어 검색이 제한될 수 있습니다.
  • 광고상품이 없거나 불가한 키워드일 수 있습니다.
  • 광고상품 노출 옵션을 별도 설정했을 수 있습니다.

Search bar

지움 버튼은 포커스가 아니라 값이 있을 때 나옵니다 — 포커스 조건이면 눌리지 않습니다

부모가 든 값: 「텀블러」

Content Card

네 세트가 나눠 갖는 것은 표면뿐 — 배치는 부르는 쪽이 씁니다

서비스 이용

판매 데이터를 엑셀 파일로 한 번에 내려받을 수 있나요?

중요2026.01.14

셀링부스터 관계자 관련 피싱 주의 안내

정산 문의2026.01.14답변 완료

안녕하세요. 어제 판매 데이터가 정산 내역에 반영되지 않은 것 같아 문의드립니다.

마지막 상품명 점검으로부터 30일이 지났어요놓치고 있는 부분은 없는지 확인해 보세요.
상품명 점검 하기
6시간 전

네이버스토어 유입량 20% 감소

상품명 점검을 통해 검색 노출을 올려 보세요.
6시간 전

Search History Item

지움 버튼은 덮는 링크 위에 있어야 눌립니다 — onDelete 를 안 주면 버튼이 없습니다

두바이쫀득쿠키
URLhttps://smartstore.naver.com/gaon
2026.02.27 13:20상품수 1
두바이쫀득쿠키
네이버쇼핑
가온베이커리 일산버터스콘
2026.02.27 13:20상품수 3
지움 없음
눌러도 아무 일 없는 버튼을 두지 않습니다
2026.02.270