확정된 A안을 실전 에셋으로 확장했습니다. 로고 스냅 인트로와 로더 모션, 탱글이 표정 6종,
커스텀 아이콘 17종, 그리고 스토어 제출용 앱 아이콘·스플래시·OG까지 — 모두 같은 토큰과
같은 형태 언어(둥근 블록 + 삼각 홈)에서 나왔습니다. 토큰은 이미 feat/bi-tangerine
브랜치에 정본으로 커밋되어 있습니다.
Tangerine Signal의 모션 언어는 통통 튀고 장난감 같은 물성입니다. 페이드 대신 스쿼시 & 스트레치, 흐림 없는 납작한 색면, 그리고 마지막 조각이 제자리에 박히는 "딸깍" 한 번 — 모든 검증 조회수는 퍼즐 한 조각이 맞물리는 소리입니다.
The missing piece. X는 오버슈트 → 임팩트 스쿼시 → 리바운드 3단으로 물리적으로 안착합니다. 스파크는 로고 카운터의 삼각 노치 모티프.
신호등 리듬으로 켜지는 시그널 핍 — 삼각 노치가 시그니처.
숨쉬듯 스쿼시 & 스트레치. 눈·입 구멍으로 뒤 버터 패널이 비칩니다.
납작한 계단식 명도 펄스 — 그라데이션 시머 없음.
눌리면 납작하게 스쿼시 + 스티커 그림자 붕괴. 릴리즈에 삼각 노치 "딸깍".
₩ 숫자가 이징으로 오르고, 마지막에 핍이 딸깍 튕깁니다.
삼각 노치 컨페티 버스트 — 납작한 색면만, 흐림 없음.
| Token | Value | Where it fires |
|---|---|---|
--km-dur-settle / --km-ease-settle | 460ms · cubic-bezier(.20,.90,.25,1.20) | TRAFI 글자 정착 (가벼운 바운스) |
--km-dur-snap / --km-ease-snap | 560ms · cubic-bezier(.34,1.56,.64,1) | X 진입 + 딸깍 스냅 (오버슈트) |
--km-dur-squash / --km-ease-squash | 160ms · cubic-bezier(.50,0,.50,1) | 임팩트 순간 스쿼시 & 스트레치 |
--km-dur-press / --km-ease-press | 120ms · cubic-bezier(.30,.70,.20,1) | 버튼·탭 프레스 스쿼시 |
--km-dur-pop / --km-ease-pop | 260ms · cubic-bezier(.34,1.70,.50,1) | 핍 클릭 / 배지 팝 / 노치 팝 |
--km-dur-pip | 1200ms · steps(1) | 시그널 핍 신호등 블링크 주기 |
--km-dur-breathe / --km-ease-breathe | 1400ms · cubic-bezier(.45,0,.55,1) | 탱글이 스쿼시 로딩 루프 |
--km-dur-skeleton | 1100ms · steps(1) | 스켈레톤 계단식 명도 펄스 |
--km-dur-tick | 1100ms · ease-out cubic | 적립 카운트업 (JS RAF) |
--km-dur-confetti / --km-ease-out-back | 900ms · cubic-bezier(.34,1.56,.64,1) | 검증 축하 컨페티 버스트 |
TRAFIX · Direction A "Tangerine Signal" · Mascot Kit
몸통 실루엣은 로고 X 조각 그대로 불변입니다. 표정은 원본 얼굴 구멍을 몸통색 패치로 덮고 그 위에 이목구비·소품만 바꿔 만듭니다. 소품은 브랜드의 삼각 노치·라운드 블록 언어를 재사용합니다.
기본 default
빈 상태언제: 앱 홈 기본 브랜딩, "아직 참여한 캠페인이 없어요" 빈 상태 카드.
대기 waiting
검수 중언제: "제출물을 검수하고 있어요", 검증 조회수 추적 중 로딩 상태.
집중 focus
제출 확인언제: 브랜드 검수 상세 화면, "제출 내용을 확인하고 있어요".
눈웃음 happy
적립 · 출금 완료언제: "이번 주 적립 ₩48,000 완료", "출금 신청이 접수됐어요".
미안 sorry
에러 · 반려언제: "제출물이 반려됐어요", "일시적인 오류가 발생했어요".
축하 party
등급 상승언제: "레벨이 올랐어요!" 등급 상승 축하 모달, 첫 정산 달성.
몸통 왜곡·비율 변경 (늘이거나 찌그러뜨리기)
아웃라인화 (얇은 선 스타일 — 정본은 채운 덩어리)
그라디언트·광택 (색은 무조건 플랫 단색)
회전 남용 (기울여 세우기 — 마스코트는 정위치)
| Expression | 120px | 48px | 24px (정밀) |
24px 단순화 변형 |
|---|---|---|---|---|
| 기본default | 크림 구멍 → 잉크 눈·굵은 미소 |
|||
| 대기waiting | 점 3개 뭉개짐 → 로딩바 입 |
|||
| 집중focus | 테 라인 사라짐 → 채운 안경 실루엣 |
|||
| 눈웃음happy | 블러시 제거 · ^^·미소 굵게 |
|||
| 미안sorry | 눈썹·땀방울 크게 · 대비 강화 |
|||
| 축하party | 색종이 다수 → 큰 조각 2개 · 잉크 별눈 |
currentColor(=--tf-primary) 상속, 이목구비는 고정 잉크로 재색상에도 가독 유지.
라운드 블록 렌즈 + 브릿지에 삼각 노치 시그널 핍. 새 형태 발명 금지.
삼각 꼭짓점 + 라운드 바닥의 물방울. 색은 secondary #178FE0 단색.
삼각 조각 + 라운드 블록만. secondary·support·success 플랫 단색 3색.
그림자 1개(스티커)만, 그라디언트·글로우·아웃라인 금지. 얼굴만 바뀐다.
17개 커스텀 글리프. 로고의 청키 라운드 블록을 채운 형태가 기본, 삼각 노치는 의미가 있는 곳(검증·신호·맞물림)에만 등장합니다. 전부 24px 그리드, 2px 옵티컬 여백, 단색 currentColor라 토큰으로 리컬러됩니다.
활성 탭 = fill 채움. 비활성 탭 = 같은 형태를 2.5px 라운드
스트로크로 비운 hollow 처리. 시스템은 하나, 17개 전체에 동일하게 적용됩니다.
크리에이터 앱 하단 5탭. 홈 = 탱글이(퍼즐 X) 실루엣.
활성 = 탱저린 채움 · 비활성 = ink-2 hollow. 라벨도 함께 승격됩니다.
노치 규율. 삼각 노치/탭은 eye(검증된 조회수 = 신호 핍), check-verified(퍼즐 탭), warning(스케일업된 삼각형)에만 씁니다. 장식으로 남발하지 않습니다.
Trafix BI · Tangerine Signal
탱글이(puzzle-X 마스코트)를 중심에 둔 스토어·런치 에셋 세트입니다. 아이콘은 direction-A 보드의 승인 트리트먼트(rounded square r22 · 두 슬롯)를 그대로 따릅니다. 아래는 렌더 마스터를 그대로 인라인한 미리보기입니다.
App icon · Expo · rounded square r22 · 두 승인 배경
icon.svg → icon-1024.png · icon-alt.svg → icon-alt-1024.png
탱글이 54/88 센터 · 눈·입 구멍으로 배경색이 그대로 비침(패널 없음) · 코너 r22/88 베이크 · 보더 없음.
adaptive-foreground.png (1024, 투명)
66% 세이프존 안. 배경색 #F76122 단색 레이어 — 얼굴 구멍으로 탄제린이 비칩니다.
Home screen
60px 타일 · 라벨 "Trafix". 코너는 마스터에 베이크된 r22 비율.
Favicon · simplified 탱글이
16px 단순화: 퍼즐 탭을 버리고 정면 얼굴(흰 눈·미소)만 남겨 대비를 최대화했습니다. 얼굴이 곧 탱글이라 16px에서도 브랜드가 읽힙니다.
Splash · calm
splash.svg → splash-2048.png (2048×2048)
배경 #FFF6EE · 탱글이+워드마크 락업을 중앙 50% 안에 작게. 스냅 모션은 모션팀이 이후 애니메이션.
OG image · landing
og.svg → og-1200x630.png · 시그널 핍(삼각 노치가 찍힌 점 = 검증 조회수가 딸깍 들어오는 순간) 디테일 포함.
이 킷의 토큰은 이미 코드 정본으로 굳혔고, 나머지 에셋은 검토 승인 후 같은 브랜치에 커밋합니다.
feat/bi-tangerine (develop 기준, 커밋 629d72a, 미push)design-ssot/tokens.json + @trafix/tokens 재베이스라인 — pnpm tokens:check 82개 동기화 통과design-ssot/assets/trafix-logo.svg · trafix-x.svg 정본 커밋kit-motion 데모 + Reanimated/Lottie 이식 노트(motion-rn-notes.md)design-ssot/README.md·CLAUDE.md의 Volt 서술 갱신 + 디자이너 Tokens Studio 싱크 전 재베이스라인 공지design-ssot/{creator,brand,landing}) 순차 리스킨 → 앱/웹 코드 반영