공지시스템서비스2026.02.01
셀링부스터님은 1인 사업자로 2025년 2기 부가가치세 확정신고를 1월 26일까지 하셔야 해요.
셀링스파크 디자인 시스템
Figma 「셀링부스터_디자인시스템_최종」을 코드로 옮긴 컴포넌트 33종
Color
1층 토큰 --sp-* · Figma Paint Style 기준
primary
secondary
gray
warning
success
destructive
blue
Light · Dark
같은 표면 토큰을 두 테마에서 함께 확인합니다
Light
card
sunken은 카드 위에 놓입니다
중요
Dark
card
sunken은 카드 위에 놓입니다
중요
Typography
Figma Text Style 기준 유틸리티 27종 · PC / MO / 긴 글 / 버튼
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다람쥐 헌 쳇바퀴에 타고파
긴 글 · 버튼
Body Xlarge long · 18/160%긴 글 스타일은 행간이 160%입니다. 문단이 두 줄 이상 이어질 때 줄 사이가 넓어져 읽는 호흡이 편해집니다.
Body Large long · 16/160%긴 글 스타일은 행간이 160%입니다. 문단이 두 줄 이상 이어질 때 줄 사이가 넓어져 읽는 호흡이 편해집니다.
Body Medium long · 14/160%긴 글 스타일은 행간이 160%입니다. 문단이 두 줄 이상 이어질 때 줄 사이가 넓어져 읽는 호흡이 편해집니다.
Button Large · 18버튼 레이블
Button Medium · 16버튼 레이블
Button Small · 14버튼 레이블
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은 r8, 나머지 r16
Shadow
Figma Effect Style · 라이트와 다크가 따로 정의됩니다
shadow-ds-1
shadow-ds-2
shadow-ds-3
Number Badge · Level Badge
한 자리는 20 정원, 여러 자리는 알약 · 등급색 --sp-level-01~04
9999+9999+0count=0은 숨기고, showZero일 때만 그립니다
Level 1Level 2Level 3Level 4마스터
Chart Legend · Metric
꺼진 계열도 수치는 진하게 유지됩니다
- 배송문의78%
- 지역12%
- 상품정보6%
- 재고옵션4%
1.00~1.74좋음1.75~2.49보통2.50~3.24나쁨3.25 이상모름
Month Cell
오늘·공휴일·선택은 겹칠 수 있어 각각 따로 받습니다
일
월
화
수
목
금
토
28지난달 휴일
29
1
음 1.152삼일절
음 1.16발주 마감
3
4대체공휴일
6
Empty State
삽화는 인라인 SVG · 색이 표면과 테마를 따라갑니다
아직 스토어 연동이 안되셨군요.
스토어를 연동하시면 시장의 흐름에 따라
추천을 받을 수 있어요.
자주 보는 키워드는 ‘찜’ 하세요.
맞춤 트렌드를 보여 드립니다.
같은 그림, 바탕 위 톤
검색 결과가 없습니다.
채널 연동이 모두 되어있는지 확인해주세요.채널 연동하러 가기
- 네이버 로그인이 안 되어 있어 검색이 제한될 수 있습니다.
- 광고상품이 없거나 불가한 키워드일 수 있습니다.
- 광고상품 노출 옵션을 별도 설정했을 수 있습니다.
Search Bar
지움 버튼은 값이 있을 때 나타납니다
현재 값: 텀블러
Content Card
표면만 공통이고, 내부 배치는 쓰는 곳에서 조립합니다
서비스 이용
판매 데이터를 엑셀 파일로 한 번에 내려받을 수 있나요?
중요2026.01.14
셀링부스터 관계자 관련 피싱 주의 안내
정산 문의2026.01.14답변 완료
안녕하세요. 어제 판매 데이터가 정산 내역에 반영되지 않은 것 같아 문의드립니다.
마지막 상품명 점검으로부터 30일이 지났어요놓치고 있는 부분은 없는지 확인해 보세요.
상품명 점검 하기네이버스토어 유입량 20% 감소
상품명 점검을 통해 검색 노출을 올려 보세요.Search History Item
onDelete가 없으면 지움 버튼도 그리지 않습니다
GNB
높이 64 · 바탕 투명 · 원형 버튼 64 · 검색 열림은 SearchBar main 재사용 · flag 는 언어 선택 칩
잠정판입니다. 이 세트는 Figma 노드 API 가 막힌 동안 렌더 썸네일(0.4배)을 픽셀 실측해 옮겼습니다 — 치수 ±3px 오차가 있고, 로고 마크와 워드마크는 벡터가 아니라 근사·글자입니다. 노드 실측이 가능해지면 재검증하십시오.
메뉴
PC_menu · PC_menu_2depth — 1depth 220×40(라운드 16) · 2depth 30, Default / 2depth 열림 / selected 전 상태
state=Default
state=2depth (열림)
PC_menu_2depth 단독 — selected · Default
Notification Center
PC_알림센터 — 카테고리 배지(h28·r6·테두리 1) + 날짜 + 본문 16/160% · 배경 없는 항목
시스템2026.02.01
셀링부스터님은 1인 사업자로 2025년 2기 부가가치세 확정신고를 1월 26일까지 하셔야 해요.
공지시스템서비스
Page Header
제목 24 Bold + 브레드크럼, 오른쪽 말풍선(r20·16 Bold·화살표 16×12)+마스코트 FAB 48 — mode=light/dark 는 테마가 대신합니다
타이틀 영역
셀러님만의 성장 스토리를 알려주세요.
Level badge (GNB · Large)
GNB 40×40 머리글자 20 Bold · Large 240×240(로고 흰 20% · 이름 실측 36→32 · Level 줄 18 Bold 흰 80%) — 등급마다 각이 하나 늘고 4등급은 물결
GNB · level 1 - visitorV
GNB · level 2 - starterS
GNB · level 3 - boosterB
GNB · level 4 - masterM
text(PC) · 참고
Level 1Level 2Level 3Level 4
large · level 1 - visitorVISITORLevel 1
large · level 2 - starterSTARTERLevel 2
large · level 3 - boosterBOOSTERLevel 3
large · level 4 - masterMASTERLevel 4
Gauge
칸 80×8 완전 둥근 · 세트는 20칸을 간격 8로 쌓아 아래에서 채움 · 기둥 48×400
(초록)배송문의/매우좋음
(파랑)사이즈문의/보통
(노랑)상품정보/나쁨
(빨강)교환반품/매우나쁨
(보라)재고옵션/좋음
(민트)가격할인
(회색)기타
Inactive(base)
gauge_set — 파랑 9/20
Indicator_item — Base + 4색
마켓트렌드 분석레벨
마크 184×184 수면 채움 · case1 반원 게이지(호 굵기 14·눈금 31) · case2 표정 게이지(호 굵기 10) — 점수는 Figma 예시 그대로
최저
10점 / 100점
낮음
30점 / 100점
보통
50점 / 100점
좋음
50점 / 100점
최고
95점 / 100점
키워드 최저
10점
키워드 낮음
30점
판매 관리 보통
50점
판매 관리 좋음
50점
상품 등록 최고
95점
Memo Chip
Type 7 × Category 7 = 49 변형 — 카테고리 색표는 tokens 요청(--memo-*) 전까지 다크에서 라이트 값으로 나옵니다
Timeline — tint 알약 · 30 · 16
상품 소싱판매 관리정산 일정세금/회계대출/자금광고 예산 점검 광고 예산 점검 광고
Memo — 줄 · 22 · 16
상품 소싱판매 관리정산 일정세금/회계대출/자금
광고 예산 점검 광고 예산 점검 광고
광고 예산 점검 광고 예산 점검 광고
Calendar — 솔리드 · 28 · 14 Bold
상품 소싱판매 관리정산 일정세금/회계대출/자금메모
MOTimeline — tint 알약 · 28 · 14
상품 소싱판매 관리정산 일정세금/회계대출/자금광고 예산 점검 광고 예산 점검 광고
MoMemo — 줄 · 20 · 14
상품 소싱판매 관리정산 일정세금/회계대출/자금
광고 예산 점검 광고 예산 점검 광고
광고 예산 점검 광고 예산 점검 광고
MoCalendar — 점 8
상품 소싱판매 관리정산 일정세금/회계대출/자금메모
MoCalendar2 — 솔리드 · 23 · 12 Bold
상품 소싱판매 관리정산 일정세금/회계대출/자금메모
memo_btn — 24×24 · Edit / Del
memo_paper — PC 267×384 · MO 212×384 · href 를 준 것만 hover 그림자
03.05 (목)
광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고
03.05 (목)
03.05 (목)
광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고광고 예산 점검 광고 예산 점검 광고
드래그 카드
Draggable Card — 높이 66 · 라운드 16 · 18 Bold 가운데 · 닫기 20(오른쪽 위). 드래그 로직 없이 모양만 — state 로 알려 줍니다.
state=선택 상태
GNB+Util Menu
state=이동 전 위치 — 전체 30% 잔상
GNB+Util Menu
state=드래그 상태 — 테두리 2 · shadow-1
GNB+Util Menu
state=고정 상태 — 점선 · 바탕 없음
GNB+Util Menu
state=고정 메뉴 — 카드 50% 덮임(근사)
GNB+Util Menu
state=컨텐츠 추가 상태 — 닫기 없음 · ⊕ 20
Contextual tooltip
현재가(#9aa3af)·추천가(짙은 면) 가격 표식 + 눌리는 요소가 든 sub 말풍선(Popover) — Arrow position 3변형은 align 으로
type=현재가32,500원
type=추천가29,900원
Arrow position=top-left
Arrow position=top-center
Arrow position=top-right
공유 팝오버
Share Popover_set · Share_item — 판 r24 · 여백 24/16 · 칩 58/48 · 라벨 12 (thumbnail 실측 ±2px)
size=large — 칩 58 · 로고 24 · 여백 24 · 간격 8
size=small — 칩 48 · 로고 20 · 여백 16 · 간격 0(칸이 맞닿음)
Share_item 단독 — state=Large · state=small
Comment Input
375 폭 실측(썸네일 1.75배 픽셀 판독) — 전송 버튼은 변형이 아니라 값 유무로 켜집니다
type=댓글 — 판 96 · 입력칸 42 pill · 빈 값이라 전송 비활성(회색 원)
type=대댓글 — 답글 헤더 50 + @멘션 값 → 전송 활성(브랜드색 원)
셀링부스터닉네임글자열다섯글자님에게 답글 남기는 중
글을 쓰면 켜집니다 — 지우면 다시 꺼집니다(비제어)