Splup Design System

디토 스플럽 디자인 시스템 — 유연함 속의 일관성

장난기 넘치는 다양한 위젯 형태를 포용하면서도, 고유한 아이덴티티를 유지하는 유동적 디자인 시스템. 뼈대는 orioncactus UI(@orioncactuscorp/ui)의 파운데이션 분할 구조, 값은 ditto 최종 토큰(DDS) — 코드(SwiftUI) · Figma · 이 문서가 같은 원본(tokens.json)에서 나옵니다.

이 페이지 자체가 스플럽의 토큰만으로 그려져 있습니다 — 테마를 바꾸면 Color·Theme의 다크 값이 그대로 적용됩니다.

키 컬러 #AA4AF4 Pretendard · 12 스타일 radius 16 / 8 스쿼클 iOS SwiftUI · DDS 네임스페이스 Figma 6bedL… 정합 2026-07-31

Overview시스템 구성

2026.09.27 업데이트 · 버튼·그래픽은 최신 채택 규격으로, 화면 구성요소는 용도별 미리보기로 정리했습니다. 플래터는 배치·스크롤을 시험하는 웹 시뮬레이터입니다. 새 위젯 디자인, Figma 및 실제 앱 반영은 별도 작업입니다.

Primitive(원시값) → Semantic(역할) → Component 3계층. 새 코드는 시맨틱을 먼저 찾고, 없으면 스케일에서 고르고, 스케일에 없으면 스케일 추가 여부를 먼저 판단합니다 — 임의값 금지.

계층	무엇	코드
Primitive	팔레트 램프 · x스케일 · 라운드 · 프리셋 모션	DDSPalette · DDSSpace.x* · DDSRadius
Semantic	역할 — bg/layer/fill/text/border/scrim · 시맨틱 간격 · 모션 의도	DDSColor · DDSSpace.* · Motion.*
Component	버튼·시트·배너 등 규격 (토큰만 소비)	DSComponents · Components

Skeleton뼈대 매핑 — orioncactus UI × ditto

@orioncactuscorp/ui의 dist/foundations/* 분할을 그대로 Swift 파일 구조로 옮겼습니다. 관심사 하나 = 파일 하나.

orioncactus	ditto (DesignSystem/Foundations/)	내용
color.global.css	ColorGlobal.swift	DDSPalette — purple·gray 50~950, status, accent, profile
color.theme.light/dark.css	ColorTheme.swift	DDSColor 시맨틱 + DDSCallout, 라이트/다크 adaptive
typo.css	Typography.swift	DDSFont(가변 wght) + DDSType 12스타일
space.css	Space.swift	x스케일 19단 + 시맨틱 6종
atomic.css	Atomic.swift	radius · elevation · 글래스 재질
motion.css	Motion.swift	의도별 모션 토큰 (HIG 프리셋)
zindex.css	ZIndex.swift	오버레이 5밴드
focus.css · Interaction	Interaction.swift	pressed/disabled · 시그널 글로우
components/*	Components/ · Elements/	컴포넌트 + 중간 레이어(그라디언트·아이콘·위젯 프레임)

레거시 DT·DS 네임스페이스는 Legacy/로 격리 — 정의가 전부 DDS 별칭이라 값은 동일하며, 파일을 열 때마다 점진 이관합니다.

Foundations · ColorColor — Global

테마와 무관한 원시 팔레트. 여기서 직접 색을 집어 쓰지 않고, 역할이 정해지면 Theme의 시맨틱으로 소비합니다.

purple — 브랜드 · 500 = 키 #AA4AF4

100

200

300

400

500

600

700

800

900

950

gray — 뉴트럴

100

200

300

400

500

600

700

800

900

950

status — success · warning · danger · info (50 / 400 / 500 / 700)

success

warning

danger

info

accent — 일러스트·그래픽 장식 전용 6

profile — 핸들 컬러 10 · 라이프 기준색

Foundations · ColorColor — Theme

역할 기반 시맨틱. 라이트/다크 값을 쌍으로 정의(Color.adaptive)해 모드 전환 시 자동 적응합니다. 이 표의 값이 지금 이 페이지를 그리고 있는 값입니다.

토큰	역할	Light	Dark
bgDefault / layerBasement	화면 바탕	#FFF · #F3F3F3	#181818
layerDefault	카드·표면	#FFFFFF	#292929
layerFloating / Modal	부상 표면·시트	#FFFFFF	#424242
fillBrand	브랜드 CTA 채움	#AA4AF4	#C588FF
fillBrandPressed	눌림	#9D3EE4	#D6AEFF
fillBrandTonal	브랜드 연한 채움	#F2E8FF	#582082
textStrong	제목·강조 잉크	#181818	#FAFAFA
textDefault	본문	#424242	#E6E6E6
textSubtle	보조 설명	#6C6C6C	#AEAEAE
textDisabled	비활성	#AEAEAE	#6C6C6C
textBrand	브랜드 텍스트 (4.5:1)	#9D3EE4	#D6AEFF
borderDefault / Strong	헤어라인 / 강한 보더	#E6E6E6 · #D4D4D4	#424242 · #585858
scrim / scrimMuted	모달 딤 (모드 무관 static)	#000 45.5% · 17.3%
success · warning · danger · info	상태 의미색	500 계열	400 계열(밝음)

Callout — 에디터 10색 (bg/fg 짝으로만 사용)

blue yellow pink neutral peach lime green mint sky lavender

전 쌍 대비 6.1:1 이상(라이트) · 8.8:1 이상(다크) 검증값이 tokens.json에 함께 기록돼 있습니다. blue·yellow·pink 칩은 테마를 따라 다크 쌍으로 전환됩니다.

FoundationsTypography

Pretendard(가변, wght 축 주입) · 자간 −1% · 12 스타일. 스케일 밖 크기 금지 — 가장 가까운 토큰으로 스냅합니다. 사용: .dtype(DDSType.bodyMd)

displayMd · 28 / 700 / 1.3통하면, 디토해!

titleLg · 22 / 700 / 1.35위젯으로 말하는 나의 플래터

titleMd · 19 / 700 / 1.4친구 플래터 구경하기

titleSm · 17 / 600 / 1.4전체 댓글 (8)

bodyLg · 17 / 400 / 1.6디토한 위젯은 내 보관함에 쌓여요.

bodyMd · 16 / 400 / 1.55오늘의 질문에 답하고 플래터에 붙여보세요.

bodySm · 14 / 400 / 1.5지난 24시간 동안 3명이 다녀갔어요.

labelLg · 16 / 600 / 1.0위젯 추가

labelMd · 14 / 600 / 1.0Ditto 하기

labelSm · 13 / 600 / 1.0친구 신청

captionMd · 12 / 400 / 1.4방금 전 · 서울

captionSm · 11 / 500 / 1.31:6 · 6×2

에디터 한정 서체 8종(DFont.editorFonts — 나눔명조·마루 부리·IBM Plex·Garamond·Sniglet·Young Serif 등, 전부 OFL)은 포스트 에디터 기능 구성값으로 별도 관리.

FoundationsSpace

Seed dimension 1:1 — 글로벌 스케일 19단(x0_5=2 ~ x16=64) + 시맨틱 6종. 임의 숫자 여백 금지. 뷰 레이어 raw 패딩 98% 토큰화 완료.

x0_5
2

x1
4

x1_5
6

x2
8

x2_5
10

x3
12

x3_5
14

x4
16

x4_5
18

x5
20

x6
24

x7
28

x8
32

x9
36

x10
40

x12
48

x13
52

x14
56

x16
64

Semantic

globalGutter	x4 · 16	화면 좌우 기본 여백 (iOS·웹 공통)
betweenChips	x2 · 8	칩 사이 수평 간격
componentDefault	x3 · 12	컴포넌트 간 기본 수직 간격
navToTitle	x5 · 20	내비 바 ↔ 페이지 타이틀
screenBottom	x14 · 56	화면 하단 여백
betweenText	x1_5 · 6	텍스트 요소 간 수직 간격
scrollBottomClearance	110 / 148	플로팅 탭바 클리어런스 — 스케일 예외(목적별 오프셋)

FoundationsAtomic — Radius · Elevation

면 요소는 base 16 · 중첩 8 · full — 전부 continuous(스쿼클, cornerSmoothing 0.6). 그림자는 3단.

base · 16

nested · 8

full · 999

e1 · 위젯·카드

e2 · 네비·FAB

e3 · 시트·다이얼로그

CSS 등가: e1 0 1 3 / 6% · e2 0 4 12 / 9% · e3 0 12 32 / 14%. 세분 규격(DSElevation raised·floating·card·glassDrop)은 세그먼트·글래스 재질 전용 — 글래스는 블러 재질 + 화이트 하이라이트 스트로크 + 확산 그림자.

FoundationsMotion

커스텀 스프링 값 금지 — 애플 시스템 프리셋만. 항상 Motion.* 토큰 경유, 인라인 duration 금지. 하단 탭 전환은 애니메이션 없음(즉시 교체).

토큰	프리셋	시간	의도
Motion.lift	snappy	0.30	드래그 리프트 등 소형 요소
Motion.push	smooth	0.35	페이지 푸시 — 시스템 내비게이션 타이밍
Motion.settle	smooth	0.35	탭바·플로팅 요소 출입
Motion.appear	smooth	0.40	배너·토스트 등장
Motion.sheet	smooth	0.50	시트 — 바운스 없음
Motion.popIn	bouncy	0.30	리액션 팝 — 유일하게 허용된 탄성
Motion.fade	easeInOut	0.22	짧은 크로스페이드 표준

FoundationsZIndex

오버레이 스택 5밴드. 새 오버레이는 임의 숫자 대신 밴드 + offset — 모달 밴드(sheet 이상)는 반드시 AppState.modalUp에 등록해 탭바를 숨깁니다.

밴드	범위	표면
page	5	콘텐츠 영역 페이지 푸시 (친구 플래터·그룹 상세) — 모달 아님
sheet	20–28	추가·컴포저 20–21 · 디토 22–23 · 상세/댓글 24 · 신청 25 · 초대/편집 26 · 신고/그룹 27 · 풀시트 28
fullscreen	29–33	프로필 공유 29 · 포스트 30–32 · 유저 프로필/궤도 33
capture	34–35	폴라로이드 카메라 · 아카이브
toast	36–40	배너 36 · 토스트 40 — 항상 최상위

FoundationsInteraction

눌림은 스케일로, 비활성은 투명도로, 디토 신호는 글로우로 — 상태 표현의 세 가지 관례.

Pressed · Disabled

pressedScaleButton	0.97	일반 버튼
pressedScaleTile	0.98	큰 타일·세그먼트
pressedScaleFloating	0.95	플로팅·캡슐 CTA
disabledOpacity	0.4	비활성 딤

Signal Glow — 디토 확산 신호

halo(#7C4DFF) 1~3단 = 디토 허용·확산 · stack(#FB7153) 1~3단 = 번짐 누적. 게이트 임계 3회와 정합.

색을 쓰는 방법같은 그라디언트라도, 쓰임은 다르게

누르는 버튼, 브랜드 배경, 프로필의 이름표는 서로 다른 재질입니다. 용도에 맞는 예시를 선택하세요.

Ditto 버튼

색은 고정하고, 누를 때 모양과 안쪽 그림자만 반응합니다.

버튼 눌러보기

그래픽과 배경

버튼에 쓰는 표면과 배경 장식을 나누어 확인합니다.

그래픽 보기

프로필 이름표

대표는 주색 그라디언트, 라이프는 더 선명한 같은 계열 단색으로 구분합니다.

10색과 상태 보기

이전 색 견본과 개발용 이름 보기

Handle — 10톤 (red만 고유 스톱 @12.4%)

red

orange

yellow

lime

teal

blue

indigo

gray

charcoal

gold

Object — 위젯 오브제 · 플래터 카드

objPurple

objOrange

objGold

objTeal

objBlue

ambientSky

primaryButton

instagram

Object Blob — 디토 마스코트 텍스처 7색 (실비트맵 에셋 grad-obj-*)

핸들 위 화이트 인너 하이라이트는 handleShine()(inset 화이트 25% → 0 @22%). 디토 블롭 텍스처 7색은 비트맵 에셋 grad-obj-* — 배경·이미지 카드 fill 전용.

PROFILE · COLOR & ACTIONS

프로필 핸들

대표는 깊이 있는 그라디언트, 라이프는 같은 색 계열의 또렷한 단색으로 보여줘요. 컬러를 골라 두 화면과 우측 액션 상태를 함께 확인하세요.

10 PALETTES

01 · REPRESENTATIVE

대표

주색 그라디언트 + 은은한 광택

지우 ⭐나의 애칭목록

02 · LIFE

라이프

선명한 같은 계열 단색

지우 ⭐나의 애칭목록

03 · RIGHT ACTIONS

상태별 우측 버튼

44 × 44 터치 영역 · 관계 버튼은 원형 아이콘

내 프로필 · 기본

지우나의 애칭목록

내 프로필 · 수정 중

지우나의 애칭목록

친구 · 친구인 상태

지민@jimin

친구 · 추가 가능

지민@jimin

친구 · 추가 불가

지민@jimin

수정완료와 친구 추가 버튼은 상태 예시예요. 실제 프로필 저장이나 친구 요청은 전송되지 않습니다.

기본 프로필과 컬러 기준

기본 아바타배경 #F1F2F4 · 사람 아이콘 #8B9099

수정완료배경 #F7F7FA · 글자 #454650

친구 / 추가라벤더 #F0EDFF · 퍼플 #6655D2

추가 불가그레이 #ECECF1 · 아이콘 #9A9CA5

프로필 이미지를 올리면 기본 아바타를 대신 표시합니다. 긴 이름은 먼저 말줄임 처리하고 우측 버튼 크기는 유지합니다.

ElementsIconography

DS 번들 원본 아이콘 39종을 DSIcon(ic-*, @3x 템플릿)으로 사용. SF Symbols는 대응 글리프가 없는 곳에만.

add-widget

add

align-center

align-left

align-right

back

bell

bin

bold

bullet

callout

camera

caps

caret-down

chevron

comment

delete

dots

download

draft

error

image

italic

lightning

link

open

option

palette

pencil

plus-circle

report

strike

sync

time

trash

underline

user

위 39종은 Assets.xcassets의 실제 번들 PNG(@3x 템플릿) — 다크 모드에선 잉크 반전으로 표시. 백로그: PNG → SVG/심볼 원본 파이프라인 전환, 사이즈 스케일 정의 (로드맵 P2).

추가 필요 아이콘 백로그 — 2026-08-01 전수 스캔

앱 전체에서 SF Symbols·이모지·코드 벡터로 임시 처리 중인 자리. P0 = 다빈도·상시 노출, P1 = 단일 화면, P2 = 브랜드 글리프.

제안 이름	현재 임시 글리프	사용처
ic-send	paperplane.fill ×3	댓글 전송 · 그룹채팅 전송 · 방명록 전송	P0
ic-arrow-up	arrow.up(.circle.fill) ×2	UpButton(글래스) · 댓글 리플라이 전송	P0
ic-check · ic-check-circle	checkmark(.circle.fill) ×3	컴포저 유튜브 선택 · 기간 필터 체크	P0
ic-reply	arrowshape.turn.up.left.fill ×2	댓글 답글 버튼·표시	P0
ic-expand	arrow.up.left.and.arrow.down.right ×2	위젯 시트·상세 확대	P0
ic-settings	gearshape.fill	홈 헤더(상시 노출)	P0
ic-heart-fill	heart.fill	피드 위젯 하트(상시) · 온보딩 장식	P0
ic-crown	crown.fill	디토 보관함 카운트 배지	P1
ic-move	arrow.up.and.down.and.arrow.left.and.right	홈 편집 이동 힌트	P1
ic-qr-scan	qrcode.viewfinder	프로필 공유 QR 스캔	P1
ic-share-up · ic-save	square.and.arrow.up/down	외부 공유 · QR 카드 저장	P1
ic-grid	square.grid.2x2(.fill) ×2	플래터 보러가기 메뉴 · 위젯 추가 픽커	P1
ic-tune	코드 벡터 TuneIcon	보관함 필터 — 에셋으로 승격	P1
ic-comment-fill	bubble.left.fill(CommentGlyph)	피드 리액션 행 — ic-comment의 filled 짝	P1
ic-frequency	dot.radiowaves.left.and.right	주파수(디토 탭) 세그 아이콘	P1
ic-blocks	square.grid.3x1.below.line.grid.1x2	포스트 에디터 블록 도구	P1
splup-mark	sparkles(DittoMark) ×3	디토 모달 브랜드 마크 — 스플럽 블롭 미니 마크로 정식화	P2 브랜드
ic-friend-add	person.badge.plus	친구 초대 진입(온보딩·친구탭)	P1

에셋 추가 없이 치환만 하면 되는 자리(기존 39종 재사용): 온보딩 chevron.left→ic-back · xmark.circle.fill→ic-x, 컨텍스트 메뉴 pencil→ic-pencil · trash→ic-trash · person.crop.circle→ic-user · exclamationmark.bubble→ic-report, 그룹채팅 plus→ic-add, DSListRow 디스클로저 chevron.right→ic-chevron(방향 회전), poke 위젯 🔔 이모지 →ic-bell. 제외: 프리뷰 상태바 wifi(시스템 표현 유지).

플래터앱처럼 보고, 직접 배치해 보세요

대표와 라이프를 오가고, 밀어서 스크롤하거나 위젯을 꾹 눌러 옮겨보세요. 현재 앱의 화면 구조와 8열 × 16행 배치 규칙을 반영했습니다.

위젯 안의 사진과 문구는 기존 에셋을 사용한 임시 콘텐츠입니다. 새 위젯을 전달해 주시면 내부 그래픽만 교체할 수 있도록 분리해 두었습니다. 실제 계정에는 저장되지 않습니다.

위젯 Floating · 공용 높이와 집기

기본은 얕은 2중 그림자. 길게 누르면 선택한 위젯만 2.5% 커지고 6px 올라옵니다. 손을 놓으면 220ms 동안 내려오며, 실패·취소 시 180ms에 원위치로 돌아옵니다.

일반 500ms / 편집 180ms 길게 누르기 · 그전에 10px 움직이면 스크롤 우선 · 움직임 줄이기는 즉시 상태 전환. 내부 유리 재질·그라디언트·콘텐츠 비율은 유지합니다.

Figma 공용 Effects와 상태 예시 · 제작용 규격

웹 미리보기와 Figma에 반영한 제안입니다. 네이티브 앱·다른 사람의 플래터·어두운 배경은 자동 변경하지 않습니다.

배치 규격과 이전 설명 그림 보기

① 좌표계

마진 16거터 8셀 (폭−32−56) ÷ 8

4×4

4×3

6×2

2×6

3×4

＋

최대 폭 6

회색 바탕 = 마진 16pt 영역. 칸 사이 틈 = 거터 8pt. 위젯 표기는 가로칸 × 세로칸 — 컴포저 비율 5종(3:3 · 1:6 · 3:4 · 4:3 · 6:1)이 각각 4×4 · 6×2 · 3×4 · 4×3 · 2×6으로 놓입니다. 핑크 점선 ＋ = 디토 전용 슬롯.

② 위젯 규격

크기는 최소 2×2, 최대 6×8(가로 6칸 · 세로 8칸). 모서리 라운드는 위젯의 짧은 변을 따라 커집니다 — 작은 위젯일수록 덜 둥글게.

2단 · r12

3단 · r14

4단 · r16

6단+ · r20

공식 r = 12 + (짧은 변 − 2) × 2, 상한 20. 미리보기는 ½ 축소 — 라벨이 실제 pt 값.

플래터당 10개디토 위젯 카운트 제외초과 시 안내 시트

③ 배치 규칙 — 위젯이 자리를 찾는 순서

추가 · 승격 firstFit
시작 행부터 아래로 빈 자리를 찾고, 끝까지 없으면 맨 위로 되돌아가 탐색합니다. 대표 승격도 같은 규칙으로 착지합니다.
드래그 충돌 → 밀기 resolve
겹친 위젯을 드래그 방향 우선으로 밀어냅니다. 밀린 위젯이 또 겹치면 연쇄해서 밀되, 최대 3연쇄까지만.
같은 크기끼리는 맞교환 trySwap
충돌 상대가 하나뿐이고 크기가 같으면 밀지 않고 서로 자리를 바꿉니다.
둘 다 실패하면 스냅백
어디에도 놓을 수 없으면 원래 자리로 돌아갑니다(스프링 복귀 — Motion.settle).

내 플래터

위 규격 전부 적용. 대표/라이프 두 판을 가지며, 편집 모드에서 드래그 · 리사이즈 · 승격.

그룹 플래터

자유 배치 — first-fit이 실패하면 아래로 늘어나고, 위젯은 24시간 뒤 소멸. 아카이브는 코르크보드로 렌더.

디토 슬롯 · 잠금

핑크 ＋ 슬롯은 Ditto! 위젯 전용(10개 카운트 제외). 디토된 위젯(allow + count>0)은 수정이 영구 잠깁니다.

반응형 규격 · 1.0 제안크기는 유연하게, 읽는 순서는 일관되게

원본 위젯의 그래픽은 유지하고, 8열 그리드 안에서 내용이 다시 배치되도록 정리했습니다. 크기를 키운다고 글자·아이콘까지 함께 확대하지 않습니다.

로컬 규격과 음악 배치 예시입니다. Figma 원본과 Swift 앱은 변경하지 않았습니다. Figma의 편집 가능한 텍스트 제작은 Pretendard 로딩 문제로 보류 중입니다. 아래 위젯별 확장 크기는 출시 승인 전 제안입니다.

대조한 Figma 원본 크기·배치 규격 파일 Swift 적용 기준과 남은 작업

01. 칸 수를 저장하고, 실제 크기는 화면에서 계산

8열 · 16행 · 좌우 여백 16pt · 간격 8pt. 아래 숫자는 화면 배율과 무관한 논리 크기입니다. 8칸은 플래터 전체 폭이며, 일반 위젯의 최대 가로 크기는 기존대로 6칸입니다.

화면 너비별 한 변의 크기
칸 수	320pt	375pt	390pt	402pt	430pt

한 변 = 칸 수 × ((화면 너비 − 24) ÷ 8) − 8. 반올림은 그리지 직전에만 합니다. 기존 140·214·354pt 시안은 원형 참고이며 이 수치에 일괄 배율을 곱하지 않습니다.

02. 음악 위젯 · 크기별로 직접 비교

원본의 정사각·가로·세로 표현을 4개 배치 규칙으로 정리했습니다. 곡명 공간을 먼저 확보하고 커버 크기를 제한합니다. 이 예시는 커버 표현만 보여주며, LP 모드·재생·편집 동작은 구현하지 않습니다.

화면 너비 본문 글자 크기 긴 곡명도 확인 디토해 온 위젯 · 출처 영역을 포함한 크기만 보기

03. 공통 규칙

추가할 때와 배치 후 크기 변경에 같은 허용 크기 목록을 사용합니다. 최소·최대 사이의 모든 조합을 허용한다는 뜻은 아닙니다.
드래그 중인 실제 너비·높이로 내부 배치를 갱신합니다. 저장된 칸 수로만 분기하면 손을 놓을 때 내용이 갑자기 바뀝니다.
음악은 가로형에서 곡명 폭 72pt 이상을 우선 확보합니다. 세로형은 곡명·아티스트의 높이를 빼고 남은 영역에 커버를 넣습니다.
디토 출처는 프로필·로고·애칭을 모두 유지합니다. 출처 높이를 먼저 빼고 내용 영역을 계산합니다. 출처까지 들어가지 않으면 해당 크기를 선택할 수 없습니다.
로딩·실패·비공개로 바뀌어도 위젯 외곽 크기는 유지합니다. 목록의 내부 스크롤은 사용하지 않고 상세 화면에서 이어 봅니다.
기존 사용자의 크기는 자동으로 바꾸지 않습니다. 미지원 크기는 편집 시 안내하고, 직접 선택·확정한 경우에만 변환합니다.

04. 위젯별 최소·기본·최대 크기

30개 기존 타입 + 빈티지 카메라·같이 있었어 2개 신규 기획. 크기 목록은 제안이며, 각 위젯의 렌더러 구현 완료를 뜻하지 않습니다. 대부분 2~3개 배치 규칙, 사진·음악은 4~5개가 필요합니다.

위젯 / 현황	크기 기준	허용 크기 제안 · 가로×세로	콘텐츠 우선순위

ElementsWidgetFrame — 타입 × 비율 매트릭스

기존 코드의 비율 선택 목록입니다. 표기와 실제 칸 수가 다르고, 추가 화면과 배치 후 리사이즈의 허용 범위도 일치하지 않아 통합이 필요합니다. 위의 새 반응형 규격과 구분해 참고용으로 보존합니다.

지원	수	타입
고정 사이즈	13	status · gif · dday · place · weather · steps · mood · diary · ask · ghost · voice · poke · secret
전 비율 (5종)	11	image · music · video · social · polaroid · block · ditto · paparazzi · sticker · collection · text
가로 배너형 3:3·1:6·4:3	1	nowplaying
세로 리스트형 3:3·3:4	5	guestbook · qna · playlist · bucket · todo

제한 6종은 고정 레이아웃 한 벌뿐(가이드 빈 조합) — 컴포저 RatioBar·홈 SizeBar가 매트릭스만 노출해 봉인. 사이즈별 레이아웃 추가 시 해제. 단일 소스: WidgetFrame.swift(WidgetFrameSpec).

그래픽 · 색과 재질Ditto다운 색, 부드럽게 이어지는 표면

아래 여섯 그래픽은 채택한 Ditto 버튼과 같은 색·곡선·테두리입니다. 색이 움직이거나 모서리에서 다른 색이 튀지 않습니다.

색은 그대로

누르거나 오래 잡고 있어도 색의 위치와 비중은 바뀌지 않습니다.

빛은 가장자리에

옅은 테두리 빛과 안쪽 그림자로 말랑한 두께를 표현합니다.

글자는 또렷하게

흰 Ditto 로고는 그림자에 묻히거나 납작하게 찌그러지지 않습니다.

버튼의 눌림 확인하기

배경·스플래시용 그래픽 보기 · 버튼과는 다른 배합

Splup · 브랜드 그래픽

Splup의 브랜드 배경·장식·스플래시에 사용하는 독립 그래픽 시스템입니다. Ditto 액션 버튼의 형태, 상태, 동작, Gradient Jelly 배합과 별도로 관리합니다.

01–06 · 브랜드 그래픽 팔레트

공통 표면 위에 세 가지 색을 넓게 겹칩니다. 아래 형태는 그래픽 샘플이며 클릭 가능한 버튼이 아닙니다.

01 · 퍼플 · 핑크

#AA4AF4 #6655D2 #FA97E2

02 · 딥 퍼플 · 바이올렛

#6655D2 #7841C4 #AA4AF4

03 · 핑크 · 코랄

#FA97E2 #FF2CBF #FF5488

04 · 피치 · 옐로

#FF925D #F9F871 #FA97E2

05 · 시안 · 블루

#48B5F4 #27E5F2 #398FE8

06 · 민트 · 라임

#07E7B4 #F9F871 #39B9CC

스플래시 · 새틴 테두리

Lavender #CBB2F5
Pink #F09BED
Apricot #F3AE78
Cream #F2D58F

연결 바탕 #F4BDD0.
하트 음영 없이 외곽에만 부드러운 새틴 반사광을 적용합니다. 제공된 앱 아이콘 SVG를 흰색으로 표시합니다.

등록 그래픽 원본

배경·장식·스플래시에 쓰는 등록 원본입니다. 한 줄이 한 배색이고, Soft · Satin · Grain 순서입니다. 버튼 상태나 본문 색으로 바꾸지 않습니다.

퍼플 · 핑크 · Soft
PNG

퍼플 · 핑크 · Satin
PNG

퍼플 · 핑크 · Grain
PNG

딥 퍼플 · 바이올렛 · Soft
PNG

딥 퍼플 · 바이올렛 · Satin
PNG

딥 퍼플 · 바이올렛 · Grain
PNG

핑크 · 코랄 · Soft
PNG

핑크 · 코랄 · Satin
PNG

핑크 · 코랄 · Grain
PNG

피치 · 옐로 · Soft
PNG

피치 · 옐로 · Satin
PNG

피치 · 옐로 · Grain
PNG

시안 · 블루 · Soft
PNG

시안 · 블루 · Satin
PNG

시안 · 블루 · Grain
PNG

민트 · 라임 · Soft
PNG

민트 · 라임 · Satin
PNG

민트 · 라임 · Grain
PNG

플래터 핑크 · Soft
PNG

플래터 핑크 · Satin
PNG

플래터 핑크 · Grain
PNG

스플럽 퍼플 · Soft
PNG

스플럽 퍼플 · Satin
PNG

스플럽 퍼플 · Grain
PNG

재질과 사용 기준

부드러운 색 혼합 / 은은한 테두리 빛 / 미세한 입자, 세 가지 재질을 배경 용도에 맞춰 선택합니다.

기준 토큰: color.primitive.brandGraphic / gradient.brandGraphic
Ditto 버튼 전용: component.dittoButton

팔레트 배열은 메시 레이어의 색입니다. 동일한 결과가 필요하면 등록된 SVG를 사용합니다. 본문·상태·CTA 컬러에 일괄 적용하지 않습니다.

제작에 필요한 색상값과 파일 위치

버튼 그래픽: tokens.json의 component.dittoButton. 배경·스플래시: gradient.brandGraphic. 원본 SVG와 기존 그래픽은 유지했습니다.

전체 디자인 값 열기

디토해 온 위젯 · 그래픽과 출처콘텐츠가 달라도, 누구에게서 왔는지는 그대로

다른 사람의 위젯을 가져왔다면 프로필 이미지·Ditto 로고·애칭 문구를 함께 보여줍니다. 버튼의 눌림 효과와 구분되는, 위젯의 출처를 알리는 그래픽입니다.

출처 유저의 프로필＋Ditto 로고＋지미니에게서 가져옴

보내주신 원형

262 × 158 · R16 · 원본의 @jimin 표기는 비교용으로 보존했습니다.

변형에서도 바꾸지 않는 것

프로필은 현재 사용자나 최근 공유자가 아닌, 위젯 출처 유저의 이미지입니다.
로고는 오른쪽 위, 출처 문구는 아래의 밝은 영역에 남깁니다.
문구는 계정 ID 대신 내가 부르는 애칭을 우선합니다.
글자가 길어도 ‘에게서 가져옴’과 프로필은 없애지 않습니다.

Figma 원본 확인 · 원본 에셋을 재사용한 웹 변형안입니다.

내가 부르는 이름으로 확인하기

이 친구에게 붙인 애칭

비우면 공개 프로필 이름 ‘지민’을 사용하는 보완안을 볼 수 있어요. 이름과 콘텐츠는 설명용 샘플입니다.

콘텐츠와 형태프로필 이미지가 없는 경우

같은 원칙, 여섯 가지 변형

390 화면의 실제 플래터 칸 크기입니다. 하단 출처도 위젯 크기 안에 포함합니다. 가독성을 위해 새 변형은 본문 12px·출처 터치 영역 44px 이상으로 제안합니다.

정보가 길거나 비어 있어도

노출 정책 · 보완안과 제작 규칙

확정 원칙: 출처 프로필 + Ditto 로고 + ‘애칭에게서 가져옴’을 항상 표시합니다.
보완 제안: 애칭은 현재 보는 사람 기준입니다. 내가 붙인 사적인 애칭을 다른 유저에게 그대로 전달하지 않습니다. 미설정 시 공개 프로필 이름 → ‘친구’ 순서로 표시합니다.
다시 디토할 때: 출처 유저와 원본 위젯 식별자는 유지하는 방향을 제안합니다. 최근에 공유한 사람의 프로필로 조용히 바꾸지 않습니다.
사진 누락: 중립 프로필 자리만 사용합니다. 다른 인물의 사진이나 Ditto 로고로 프로필을 대신하지 않습니다.
공간 부족: 세로형은 애칭과 ‘에게서 가져옴’을 두 줄로 나눕니다. 2칸 너비 이하는 현재 미확정이며, 정보를 숨기는 축소안은 만들지 않습니다.
상호작용: 콘텐츠는 위젯 상세, 출처 영역은 출처 유저로 연결하는 방향입니다. 이 페이지에서는 출처 정보 확인만 동작하고, 실제 프로필로 이동하거나 데이터를 저장하지 않습니다.
권한: 삭제·차단·공개 범위 변경 시 실제 조회 권한을 다시 확인해야 합니다. 그래픽 규칙만으로 열람 권한이 생기지 않습니다.

전체 규격과 적용 상태 · 제작용 규격 파일

채택한 버튼 · 2026.09.27누르면 말랑하게, 놓으면 제자리로

Ditto 전용 버튼입니다. 마음에 드는 색을 눌러보세요. 색은 그대로 두고, 모양과 안쪽 그림자만 살짝 달라집니다.

각 버튼을 꾹 눌렀다가 놓아보세요. 실제 디토 기능을 실행하지 않는 미리보기입니다.

부드러운 누름

110ms 동안 살짝 납작해지고, 360ms에 걸쳐 원래 모습으로 돌아옵니다.

색은 그대로

배색을 바꾸지 않고 안쪽 음영만 조금 더해 눌림을 표현합니다.

일반 버튼과 구분

저장·취소·수정 완료에는 아래 기본 버튼을 사용합니다.

상태별 수치와 적용 범위 보기

Ditto 전용 버튼 · 최신 규격 1.1

1:1 원본 곡선, 선명한 고정 그라디언트, 흰 앱 아이콘, 얕은 안쪽 그림자와 눌림을 사용합니다. 일반 저장·완료 버튼은 기존 R12를 유지합니다.

채택 기록과 개정 내용 · 1.1 기준 페이지 · 제작용 규격 파일

항목	채택 기준
형태	원본 곡선 실루엣, 1:1. 181×181은 기준 좌표계이며 실제 화면 크기는 별도 검수.
색	퍼플·바이올렛 / 딥 퍼플·이클립스 / 핑크·코랄 / 피치·옐로 / 시안·블루 / 민트·라임. 퍼플 끝부분의 밝은 색 띠 없음.
로고	원본 앱 아이콘을 흰색으로, 버튼 폭의 32%로 표시. 표면 그림자 바깥에 배치합니다.
재질	흰 코팅 9% 유지. 반사 0.38 → 0.24, 중립 음영 0 → 1.2%, 얕은 안쪽 그림자로 깊이 표현.
모션	110ms 누름, scaleX 1.006 / scaleY 0.97 / Y +0.8px, 360ms 복원. 터치 영역은 고정. 아이콘은 균일 축소.
금지	색 회전·원형 블롭·접촉점 색 수렴·특정 보조색 강조·가로로 늘리기·일반 CTA 일괄 대체.
접근성	Pretendard, 구체적인 액션 이름, 키보드/취소 동작. 동작 줄이기에서는 형태 변형 없이 재질만 즉시 반응.
디자인 필요	로딩·비활성·권한 제한·성공/오류·고대비·작은 크기·가로형. 기본 팔레트 하나는 미지정.
적용 상태	2026.09.28 Figma 최종 에셋 반영: 6색 × 기본/눌림 × 움직임 전체/줄이기, 24개 변형. 앱 적용과 팀 라이브러리 게시는 별도입니다.

이 항목은 아래 과거 인벤토리/일반 버튼 지침의 Ditto 전용 예외입니다. 브랜드 배경용 gradient.brandGraphic은 변경하지 않았습니다. 원본과 이전 실험안은 보존합니다.

이전 1.0 견본 · 워드마크와 더 깊은 눌림

아래 이미지는 이전 기록입니다. 현재 로고·눌림은 위의 1.1 미리보기를 기준으로 합니다.

이전 실험 페이지 열기

화면 구성요소무엇에 쓰는지 보고, 직접 확인하기

버튼은 실제로 눌러보고, 다른 구성요소는 용도와 적용 상태를 확인하세요. 아래 최신 미리보기와 이전 앱 캡처는 분리했습니다.

저장·수정 완료 버튼

일반 액션에 사용하는 기본 버튼입니다. 높이 60, 모서리 12, Pretendard 굵게 17을 유지합니다.

눌러서 저장 중 → 완료 피드백을 확인해 보세요. 실제 데이터는 저장하지 않습니다.

Ditto 전용 버튼

브랜드를 대표하는 그래픽 액션입니다. 일반 완료 버튼과 서로 바꿔 쓰지 않습니다.

꾹 눌렀다 놓아보세요. 로딩·비활성 디자인은 별도 작업이 필요합니다.

이전 컴포넌트 캡처와 개발용 목록 보기 · 최신안과 다를 수 있어요

3 플래터에 추가했어요

DButton은 enabled / pressed(0.97) / disabled(회색 채움+assistive) / loading(DSSpinner) / destructive 상태 매트릭스, 프라이머리는 DGrad.primaryButton+글로스.

실렌더 갤러리 — SwiftUI 원본 (ImageRenderer @2x)

Avatar

시뮬레이터에서 SIMCTL_CHILD_DS_SNAP=1로 추출한 실제 iOS 렌더 — 라이트 규격이 베이크된 이미지라 테마와 무관하게 화이트 카드로 표시. UIKit 브리지 뷰(TextField 등)는 ImageRenderer가 못 잡아 아래 화면 캡처(컴포저)로 확인.

기본

Segment · DButton · DChip · AvatarStack · DSNavBar · DSEmptyState · StatusBar · Wordmark · UpButton(글래스) · BottomSheet(DSSheetSpec·그래버·톱 라운드 24)

피드백 · 상태

DSSkeleton(shimmer·Reduce Motion 대응) · DSSnackbar · DSCallout · DSBadge(.new/.count/.dot) · DSBanner(4상태) · DSAlertDialog · DSSpinner · DSProgressCircle

입력 · 컴포저

DSInputField · DSLinkField · DSTextCard · DSTextArea · DSAttachButton · DSAddImageTile · RatioBar · DSColorRow · DSFormatRows · DSPositionGrid · DSColorSheet(휴·채도 패드)

목록 · 특수

DSListRow · DSSwitch(51×31) · DSDivider · SwipeTabs(텍스트 탭+페이징) · WidgetMiniTile · DSIcon(39종) · EmojiBurst · Glow

Screens실기 화면 — 시스템의 조립 결과

iPhone 17 Pro 시뮬레이터 실행 캡처. 토큰·컴포넌트가 실제 화면에서 어떻게 조립되는지의 기준 — 디버그 딥링크(START_TAB · OPEN_*)로 결정적으로 재현됩니다.

GovernanceLegacy · 이관

구 네임스페이스는 Legacy/로 격리된 별칭 — 값의 원본이 아닙니다. 새 코드는 DDS만 사용하고, 기존 뷰는 파일을 열 때 함께 이관합니다(빅뱅 금지).

레거시	정본	비고
DT.primary / labelStrong / backgroundNormal …	DDSColor.fillBrand / textStrong / layerBasement	시맨틱 별칭 — 값 동일
DT.purple* · cn* 램프	DDSPalette	다크 adaptive 재정의 완료
DS.label.* / bg / fill / line	DDSColor.text* / layer* / border*	Seed식 v1 심
DSTypo 17종 · DFont.pretendard	DDSType 12 · .dtype()	전면 스냅 완료 (raw 사용 ≈0)
DSSpace/DSRadius	DDSSpace/DDSRadius	gutter=16 단일 소스

GovernanceSSOT · Figma 정합

원본은 dittodsdev/tokens.json 한 곳 — 코드(SwiftUI)·Figma 라이브러리·이 문서가 여기서 파생됩니다. 값 수정은 tokens.json → 코드 → Figma 순으로 전파.

항목	상태 (2026-07-31 대조)
팔레트 purple/gray 50~950 + scrim — Figma 변수	일치 · 코드와 1:1
시맨틱 27종 라이트/다크	일치 · 2026-07-29 DDS 1:1 마이그레이션
스페이싱 19단 + 시맨틱 · Element 페이지	일치 · gutter 16
Figma 텍스트 스타일 서체	대기 · Gothic A1 → Pretendard 수동 교체 필요
다크 모드 전면 오픈	부분 · 토큰 준비 완료, 위젯 내부는 WInk 고정 잉크