# Ditto 버튼 — 채택 규격 1.1 / Figma 에셋

> **2026-10-04 현행 동작 · 최우선:** Ditto 실행은 로고+문구의 긴 버튼을 연속 3초 누르는 방식이다. 진행률 100%에서 한 번 요청하고 저장 성공 후 완료한다. 그 전에 떼거나 이탈하면 취소한다. 작은 24/32px 아이콘은 디토된 위젯 표시용이며 액션을 연결하지 않는다. 기존 6색과 재질은 유지한다. [현행 가이드](https://www.figma.com/design/XG8Cm5nLScPoNc9NAXX1DD?node-id=1594-7230) / [동작 컴포넌트](https://www.figma.com/design/XG8Cm5nLScPoNc9NAXX1DD?node-id=1699-8399). 아래 정사각형 버튼·즉시 실행 설명은 이전 채택 기록이며 신규 앱 액션에 적용하지 않는다.


> **2026-10-04 컬러 복원:** 사용자가 재지정한 첫 번째 이미지 기준으로 고정 6색을 복원했다. 활성 로고·문구는 흰색이며 Fluid 팔레트를 사용하지 않는다. 기본 가로형은 `1581:131370` 원본 보라색(약 #A25AD6)과 inner shadow를 유지한다. 현행 R12·60px 앱 버튼과 상태 예시는 [Splup/Action/Ditto](https://www.figma.com/design/XG8Cm5nLScPoNc9NAXX1DD?node-id=1592-7054), 로컬 정본은 `design/tokens/color-system.json → dittoButton`이다. 아래 1.1은 채택 그래픽 버튼의 원본 색·방향·재질 기준으로 계속 사용한다.

> **1.1 개정 · 앱 아이콘 / 얕은 눌림**: 최신 구현은 `design/site/splup-ds-v3/index.html#ditto-action`입니다. 제공된 appicon.svg를 흰색·폭 32%로 사용합니다. 누름은 scaleX 1.006 / scaleY 0.97 / Y +0.8px, 복원 360ms입니다. 아래 1.0의 워드마크와 강한 눌림 수치는 이전 기록이며 최신 `component.dittoButton`을 우선합니다. **2026-09-28 Figma 재사용 에셋 반영 완료. 앱 적용·팀 라이브러리 게시는 미완료입니다.**

## 현재 1.1 Figma 에셋

[최종 버튼 컴포넌트 열기](https://www.figma.com/design/XG8Cm5nLScPoNc9NAXX1DD/Ditto?node-id=995-605) · [전체 견본 보드](https://www.figma.com/design/XG8Cm5nLScPoNc9NAXX1DD/Ditto?node-id=992-187)

- 위치: `Assets_1.0_재사용` → `Ditto 버튼 · 최종 에셋 · 1.1 · 2026-09-28`.
- `Ditto/Action/GradientJelly`: 6색 × 기본/눌림 × 움직임 전체/줄이기 = 24개 변형. 프로필 출처 배지와 별개인 액션 버튼이다.
- 원본 곡선·고정 그라디언트·코팅·음영·반사·로고를 편집 가능한 레이어로 분리했다. 로고는 `appicon-source.svg`의 네이티브 벡터 인스턴스이며 기존 실험용 워드마크를 사용하지 않는다.
- 코팅 9%, 반사 38% → 24%, 중립 검정 0% → 1.2%. Figma 불투명도 변수는 0–100 단위이며 SVG/CSS 0–1로 변환한다.
- 기본 inner light: 상단 white α.42, 하단 black α.08. 누름 시 기존 빛 20%와 top black α.08/contact black α.04/bottom white α.13을 합친다. Figma blur는 원본 SVG σ의 2배로 이관한 뒤 견본을 시각 검수했다. 렌더러가 달라 픽셀 단위 동일성을 보장하지 않는다.
- 누름 110ms, 놓기 360ms, 영역 이탈·Escape 취소 160ms를 Figma Change to로 연결했다. 움직임 줄이기는 공간 변형 없이 즉시 전환한다. Figma는 수동 선택 견본으로 OS 설정을 자동 감지하지 않는다.
- 24개 변형의 실제 불투명도·표면 크기·고정 터치 영역·연결 구조를 검증했다. 프로토타입 재생을 직접 조작한 검수는 별도이며 실제 서비스 행동·키보드 전체 동작·110ms 최소 유지·pointercancel 등은 코드 구현의 계약이다.
- 버튼에는 폰트가 없다. 견본 안내 문구는 설치된 원본 Pretendard Bold의 윤곽선이며 대체 서체를 쓰지 않았다. 문구를 텍스트로 직접 수정하는 기능은 없고 원본 문자열과 재생성 스크립트를 기록에 보관했다.
- 기존 `Ditto/Lab/GradientTrigger`, 이전 실험 보드, 일반 CTA, 현행 화면 인스턴스는 보존했다. 자동 교체·팀 게시·Code Connect·네이티브 적용은 수행하지 않았다.

검증/노드 기록: `output/ditto-button-figma-2026-09-28/`.

## 이전 1.0 채택 기록 · 보존용

아래 재질·로고·모션 수치는 최초 채택 시점의 기록이다. 신규 구현에는 위 1.1과 정본 토큰을 사용한다.

2026-09-27 사용자 결정: **현재 웹 샘플의 버튼 형태를 Ditto 전용 버튼으로 채택한다.** 퍼플 두 종의 모서리 색 띠를 제거한 최종 상태가 기준이다.

| 항목 | 기준 |
| --- | --- |
| 컴포넌트 이름 | `Ditto/Action/GradientJelly` |
| 레시피 | `ditto.button.gradient-jelly` |
| 정본 | `design/tokens/tokens.json` → `component.dittoButton` |
| 채택 범위 | 1:1 형태, 고정 그라디언트 6종, 원본 흰 워드마크, 표면 재질, 젤리 눌림 |
| 적용 상태 | 최초 기록 당시 Figma·앱 미완료. 최신 Figma 상태는 위 1.1 항목 참조; 앱 적용은 여전히 미완료 |

[승인 기준 웹 샘플](../output/ditto-reference-motion-2026-09-27/index.html) · [눌림 시연](../output/ditto-reference-motion-2026-09-27/ditto-gentle-gradient-preview.mp4) · [상태 비교](../output/ditto-reference-motion-2026-09-27/gentle-gradient-comparison.png)

![채택한 Ditto 버튼 6종](../output/ditto-reference-motion-2026-09-27/gentle-gradient-overview.png)

## 적용 범위와 우선순위

- **Ditto 고유 액션을 대표하는 그래픽 버튼**에 사용한다. 로고만으로 동작이 불명확한 화면에서는 Pretendard 설명 라벨과 구체적인 접근성 이름을 함께 제공한다.
- 기존 규칙 중 “디토하기도 원본 R12 버튼”이라는 일괄 지침의 예외다. 일반 저장·수정 완료·취소·삭제 버튼은 기존 기본 CTA 규격을 유지한다.
- 정사각형 샘플을 기존 가로형 CTA 자리에 가로로 늘려 넣지 않는다. 작은 사이즈·가로형·화면별 배치는 추가 디자인/검수 대상으로 남긴다.
- 하단 내비게이션, 모든 위젯 테두리, 일반 카드까지 이 형태로 일괄 변경하지 않는다. 기존 제외 rounded/3D 버튼을 다시 허용하는 결정도 아니다.
- `gradient.brandGraphic`의 배경·스플래시용 팔레트와 **별도 컴포넌트 배합**이다. 특히 여기의 딥 퍼플·이클립스를 브랜드 그래픽의 딥 퍼플·바이올렛으로 치환하지 않는다.
- 여섯 색은 대안 팔레트이며 성공·오류·로딩을 뜻하지 않는다. 서비스 전체의 기본 팔레트 하나는 아직 지정하지 않았다.

## 형태와 레이어

- 1:1 정사각형 기반의 원본 곡선 경로. 기준 `viewBox=0 0 181 181`; 181은 도형 좌표계이지 모든 화면의 고정 버튼 크기가 아니다.
- 경로: `M49 0 C15 0 0 15 0 49 L0 132 C0 166 15 181 49 181 L132 181 C166 181 181 166 181 132 L181 49 C181 15 166 0 132 0 Z`.
- 일반 `border-radius`나 캡슐로 근사하지 않고 동일 실루엣을 사용한다. 눌리는 시각 레이어와 고정된 터치 영역을 분리한다.
- 레이어 순서: 고정 그라디언트 → 흰 표면 코팅 9% → 중립 눌림 음영 → 외곽 반사 → inner shadow. **워드마크는 모든 재질/음영 밖**에 둔다.
- 원본 로고 폭은 버튼의 35.36%, 왼쪽 32.32%, 위쪽 43.78%. 기존 벡터를 흰색으로 사용하며 텍스트로 다시 만들지 않는다.
- 편집 가능한 라벨·상태 문구·규격 텍스트는 Pretendard/Variable만 사용한다. 브랜드 워드마크는 글꼴이 아닌 원본 아트다.

## 채택 팔레트

색상값만으로 재현하지 말고 정본의 `offsets / colorIndices / from / to`도 함께 사용한다.

| 팔레트 | 구성색 | 연결 규칙 |
| --- | --- | --- |
| 퍼플 · 바이올렛 | `#AA4AF4` → `#6655D2` | 36%부터 끝까지 연결. 끝에 핑크를 다시 넣지 않음 |
| 딥 퍼플 · 이클립스 | `#6655D2` → `#2C2F3A` | 36%부터 끝까지 연결. 끝에 밝은 보라를 다시 넣지 않음 |
| 핑크 · 코랄 | `#FA97E2` · `#FF2CBF` · `#FF5488` | 현재 고정 배합 유지 |
| 피치 · 옐로 | `#FF925D` → `#F9F871` | 넓은 고정 색 연결 |
| 시안 · 블루 | `#48B5F4` → `#27E5F2` | 넓은 고정 색 연결 |
| 민트 · 라임 | `#07E7B4` → `#F9F871` | 넓은 고정 색 연결 |

금지: 색 회전, 360도 재생, 원형 블롭, 누른 지점으로 색이 모이는 반응, 특정 핑크/노랑 강조, 긴 누름에 따른 배합 변화. 누르는 위치와 무관하게 색 비중은 고정한다.

## 재질과 눌림

| 항목 | 기본 | 누름 |
| --- | --- | --- |
| 흰 표면 코팅 | 0.09 | 0.09 유지 |
| 외곽 반사 opacity | 0.72 | 0.30 |
| 중립 검정 음영 opacity | 0 | 0.025 |
| 기본 inner shadow 레이어 | 1 | 0.20 |
| 눌림 inner shadow 레이어 | 0 | 1 |
| 접촉점 흰 빛 | 0 | 0 |

Inner shadow는 기준 좌표계 단위로 기록한다. SVG `stdDeviation`은 Figma blur 값과 단순히 같은 수치로 간주하지 않는다.

- 기본 상단: dy 0.8 / σ 0.7 / white α 0.42. 기본 하단: dy −0.8 / σ 1.2 / black α 0.08.
- 눌림 상단: dy 3.2 / σ 3 / black α 0.22. 접촉 음영: dy 1 / σ 0.9 / black α 0.10. 하단 반사: dy −0.8 / σ 1 / white α 0.13.
- 눌림은 기본보다 살짝 어둡지만 과거 6% 검정 음영 버전보다 밝다. 다른 색으로 바꾸는 상태가 아니다.

| 구간 | 시간 | 변형/보간 |
| --- | --- | --- |
| 누름 | 110ms | scaleX 1.016 / scaleY 0.925 / Y +1.8px, cubic-bezier(.16,1,.3,1) |
| 워드마크 누름 | 110ms | 균일 scale 0.975 / Y +1.5px; 글자를 납작하게 변형하지 않음 |
| 복원 | 360ms | 원래 형태, cubic-bezier(.22,1,.36,1); 오버슈트·반복 바운스 없음 |
| 취소 복원 | 160ms | 액션 실행 없이 복귀 |

110ms 최소 시각 피드백을 보장하되 **실제 서비스 액션은 모션 종료를 기다리지 않는다.** 비율 변형은 크기와 무관하며 현재 웹 참고 구현의 이동량은 CSS px다. 앱의 pt 환산·작은 버튼에서의 체감은 별도 검수한다.

## 상태·접근성·미완료 구분

| 상태 | 현재 기준/완료 범위 |
| --- | --- |
| Default / Pressed / Release | 채택·웹 검증 완료 |
| 누름 취소 | 영역 밖 해제, Escape, pointercancel, 포커스/페이지 이탈에서 실행하지 않음 |
| 키보드 | Space / Enter, 반복 입력 억제, 포커스 표시 유지 |
| Reduce Motion | 형태 변형·색 모션 없음. 기본/누름 재질 피드백은 즉시 표시. OS 설정 우선 |
| Loading | 미디자인. 후속에서 중복 요청 방지·진행 상태 이름·크기 유지 필요 |
| Disabled / Restricted | 미디자인. 권한 부족·디토 불가 이유 표시 필요. 색상 변경만으로 표현하지 않음 |
| Success / Error | 미디자인. 실제 결과에 따른 완료/재시도와 원위치 복귀 필요 |
| High Contrast / Reduce Transparency | 대체 표현 및 실기기 가독성 검수 필요 |
| 작은 사이즈 / 가로형 / 화면 내 배치 | 미확정. 현재 1:1 기준을 임의로 늘리거나 잘라 사용하지 않음 |

터치 영역은 최소 44×44를 확보하고 압축하지 않는다. 웹 참고 구현은 터치 이동 12px 이상에서 누름을 취소하여 플래터 스크롤을 우선한다. 모바일 브라우저 에뮬레이션 검증은 네이티브 실기기 검증을 대신하지 않는다. 흰 로고는 브랜드 아트이며 일반 흰 본문 텍스트의 대비가 인증되었다는 뜻이 아니다.

## 제작·AI 조합 계약

- `design/widget-kit/design-policy.json`의 `dittoButton`과 정본 토큰을 참조한다. 일반 `primaryButton`을 통째로 바꾸지 않는다.
- 허용 팔레트 밖의 보조색·끝부분 stop, 랜덤 모션, 임의 폰트·곡률을 추가하지 않는다.
- 화면에 Ditto 액션이 있는 경우에만 이 레시피를 검토한다. 모듈 권한·실제 행동·로딩/오류 처리는 별도 기능 계약을 따른다.
- 기존 Figma 원본/비채택 시안은 보존한다. 이전 모션 보드와 원본 노드가 이 최종안으로 동기화되었다고 표시하지 않는다.
- 전역 브랜드 팔레트·일반 CTA·앱 버튼은 이번 기록 작업에서 변경하지 않았다.

## 다음 반영 작업

- [x] 채택 결정, 형태, 배색, 재질, 모션 정본 등록
- [x] 기존 R12 일괄 지침과 Ditto 전용 예외 구분
- [x] AI 디자인 정책과 로컬 디자인 시스템 문서에 연결
- [x] Figma 최종 컴포넌트/variant 동기화 및 재질 견본·실제 값 검수 (2026-09-28)
- [ ] Figma 프로토타입 실제 재생 검수 및 필요 시 팀 라이브러리 게시
- [ ] 필요한 화면별 크기·라벨·가로형 필요 여부 확정
- [ ] 로딩·비활성·성공·오류·고대비 대안 디자인
- [ ] 앱 구현·실제 디토 행동 연결·실기기 접근성/스크롤 검수