# 디토해 온 위젯 — 그래픽과 출처 표시 1.0

2026-09-27. [웹 디자인 시스템](../design/site/ditto-design-system.html#ditto-widget) · [Figma 기준 시안](https://www.figma.com/design/XG8Cm5nLScPoNc9NAXX1DD/?node-id=983-129072)

## 확정된 원칙과 이번 작업 범위

사용자가 지정한 노출 원칙은 **다른 유저의 프로필 이미지 + Ditto 로고 + ‘사용자가 부르는 애칭에게서 가져옴’**이다. 셋 중 하나만 보여주는 축약안은 사용하지 않는다. 본문의 따옴표는 설명을 위한 표시이며 실제 문구는 `지미니에게서 가져옴`처럼 출력한다.

- Figma 원형의 사진·프로필·로고를 그대로 재사용했다. 원본의 `@jimin에게서 가져옴`은 비교용 견본에만 보존했다.
- 웹 DS에 사진 가로/정사각/세로, 메모, 음악, 약속의 6종 변형을 제안했다. 편집 가능한 텍스트는 Pretendard만 사용한다.
- 로컬 플래터 시뮬레이터의 사진 한 개에 같은 컴포넌트를 적용했다. 계정 데이터나 실제 앱 배치는 바꾸지 않는다.
- 이번 업데이트는 로컬 웹 DS·제작 토큰·AI 조합 정책에 적용했다. **Figma 원본 수정, 네이티브 앱 반영, 서버 출처 연결, 배포는 하지 않았다.**
- 세부 규격·이름 대체·출처 연결 정책은 아래의 **제안**이다. 사용자 지정 노출 원칙과 확정 수준을 혼동하지 않는다.

## 1. Figma 원형 보존

| 요소 | 원형 값 |
| --- | --- |
| 전체 | 262 × 158, R16 |
| 사진 | 262 × 146, 아래 16은 출처 영역과 겹침 |
| 출처 배경 | y130, 높이 28, `#F8F8F8` |
| 프로필 | x17 / y135, 18 × 18, R4 |
| 문구 | x41 / y136, Pretendard Regular 10 / 15, `#6C6C6C` |
| Ditto 로고 | x225 / y10, 24 × 24 |
| 내부 반사광 | `inset 1px 2px 7px rgba(255,255,255,.25)`와 `inset 0 0 18px rgba(255,255,255,.95)` |

전체 캡처를 하나의 이미지로 붙인 것이 아니다. 사진·프로필·로고는 각각 원본 이미지 에셋이고, 출처 배경과 문구는 별도 웹 요소다. 원본 이미지 해시 검증은 `assets/ditto-attribution/manifest.json`을 따른다. 사진을 메모·음악·약속의 새로운 콘텐츠와 혼동하지 않도록 형태별 캡션을 붙였다. 음악의 작은 표지 역시 레이아웃 설명용 원본 사진이며 실제 음반 커버가 아니다.

## 2. 새 변형의 공통 규격 — 제안

기존 플래터의 390 화면 / 8열 / 좌우 16 / 간격 8 규칙을 사용한다. 가로·세로 크기는 `(45.75 × 칸 수) − 8`이다. 모든 크기에 출처 영역이 포함되므로 출처가 다음 행의 위젯을 덮지 않는다.

| 변형 | 칸 수 | 실제 크기 | 적용 |
| --- | --- | --- | --- |
| 사진 · 가로형 | 4 × 3 | 175 × 129.25 | 넓은 사진과 하단 출처 |
| 사진 · 정사각형 | 4 × 4 | 175 × 175 | 기본 사진 카드 |
| 사진 · 세로형 | 3 × 4 | 129.25 × 175 | 출처를 두 줄로 분리 |
| 메모 · 가로형 | 4 × 3 | 175 × 129.25 | 본문과 출처의 명도 구분 |
| 음악 · 가로 배너 | 6 × 2 | 266.5 × 83.5 | 작은 커버·제목·아티스트 + 출처 |
| 약속 · 정사각형 | 4 × 4 | 175 × 175 | 남은 날짜·설명 + 출처 |

공통 값:

- 출처 글자 12 / 16, 프로필 20 × 20 / R4, 간격 6, 좌우 여백 10.
- 출처 배경 `#F8F8F8`, 문구 `#585858`. 사진 위에 출처 문구를 바로 올리지 않는다.
- 출처 영역 최소 높이 44. 너비 160 이하에서는 높이 48, 좌우 8, 애칭과 접미 문구를 두 줄로 표시한다.
- 로고 24 × 24, 위/오른쪽 8. 좁은 형태에서는 6. 독립 버튼이 아니라 출처 배지다.
- 라운드는 기존 `min(20, 12 + (min(w,h) − 2) × 2)`를 따른다. 기존 위젯을 임의의 pill/강한 라운드로 통일하지 않는다.
- 가로 2칸은 미확정이다. 미리보기에서는 3칸 미만 크기를 막으며, 로고만 남기는 방식으로 해결하지 않는다.
- 본문을 모두 Ditto 액션 버튼의 그라디언트로 덮지 않는다. 액션 버튼과 가져온 콘텐츠의 출처 표시는 다른 컴포넌트다.

이 치수는 웹 제안이며 더 작은 네이티브 화면, 큰 글자, 다국어의 최종 치수는 별도 검수해야 한다.

## 3. 애칭과 출처 데이터 — 보완 제안

`sourceUserId`와 `sourceWidgetId`는 실제 디토 동작에서 전달받는 식별자다. 그래픽이나 AI 프롬프트에서 출처를 만들어내거나 현재 로그인 유저로 치환하지 않는다.

1. 현재 보는 사람이 해당 출처 유저에게 붙인 애칭을 우선한다.
2. 애칭이 없으면 공개 프로필 이름, 이것도 없으면 ‘친구’를 사용하는 보완안을 제안한다.
3. 개인 애칭은 보는 사람마다 해석한다. 한 사용자의 사적인 애칭을 공유 위젯의 공통 문구로 저장하지 않는다.
4. 재디토에서는 원본 출처 식별자를 유지하는 방향을 제안한다. ‘직전 공유자’를 별도 노출할지 여부는 추후 결정한다.
5. 삭제·차단·권한 상실 시 제한된 콘텐츠와 개인 이름을 보여주지 않는다. 디자인 예시는 ‘알 수 없는 사용자에게서 가져옴’과 중립 프로필 자리를 사용한다. 실제 권한 검사는 서버/앱 후속 작업이다.

데이터 예시의 `sample-jimin` / `sample-original-photo`는 시연용이다. 웹 애칭 입력값은 이 페이지의 미리보기만 바꾸며 저장·공유되지 않는다.

## 4. 길이·누락·인터랙션

| 상황 | 처리 |
| --- | --- |
| 긴 애칭 | 애칭만 말줄임. ‘에게서 가져옴’은 숨기지 않는다. 전체 이름은 접근성 이름과 출처 정보에서 제공 |
| 좁은 카드 | 이름/접미 문구를 두 줄로 분리. 글자 크기를 줄이지 않음 |
| 프로필 없음/로드 실패 | 같은 크기의 중립 프로필 자리 유지. 다른 사람 사진이나 Ditto 로고로 대체하지 않음 |
| 콘텐츠 사진 로드 실패 | 안내 문구 표시, 출처 영역 유지 |
| 정상 콘텐츠 누름 | 실제 제품에서는 위젯 상세로 연결하는 방향. 이번 DS는 콘텐츠 상세 구현 범위 아님 |
| 출처 누름 | 실제 제품에서는 출처 유저로 연결하는 방향. 이번 웹 갤러리에서는 전체 이름을 확인하는 대화상자만 열림 |
| 키보드 | 출처 버튼을 Tab/Enter로 조작, Escape로 닫기, 닫은 뒤 원래 버튼으로 포커스 복구 |
| 플래터 미리보기 | 기존 위젯 버튼 안에 중첩 버튼을 만들지 않음. 편집/선택 동작 유지 |

## 5. 제작 파일과 AI 조합

- 정본: `design/tokens/tokens.json → component.dittoAttribution`, recipe `ditto.widget.attributed`.
- 브라우저 스냅샷: `design/site/ditto-attribution-tokens.js`. 정본과 완전 일치하는지 자동 검증한다.
- 재사용 렌더러: `design/site/ditto-attribution.js`, 스타일: `ditto-attribution.css`.
- DS 예시와 애칭 실험: `ditto-attribution-gallery.js`.
- 정확한 에셋: `design/site/assets/ditto-attribution/`와 `manifest.json`.
- AI 제작 정책: `design/widget-kit/design-policy.json`, 조합 계획의 `dittoAttribution`.

AI는 노출 필수 요소를 제거하거나 이름/사진만으로 출처 식별자를 만들 수 없다. 조합 계획에 규칙이 포함되지만 실제 디토 기능이나 서버 권한이 생성되는 것은 아니다. 검증기는 임의의 출처 ID·애칭 필드를 사용자 프롬프트용 spec에 넣는 것을 거부한다.

## 6. 검증과 남은 작업

자동 검증 명령:

```sh
node design/site/test-ditto-attribution.cjs
node design/site/test-ds-preview.cjs
node design/site/test-platter-engine.cjs
node design/widget-kit/test.mjs
```

출처 컴포넌트 검사는 원본 에셋 해시, 원형 좌표, 토큰 일치, 6종의 출처 영역·로고·문구, 긴 이름·대체 이름·이미지 누락, 키보드/포커스, 프롬프트 문자열 안전 처리, 390/320 웹 반응형, 플래터 2칸 축소 방지를 포함한다. 시각 검수 파일은 `output/ditto-attribution-2026-09-27/`에 저장한다.

후속 항목:

- [ ] 새 변형의 치수/콘텐츠 별 승인 및 Figma 컴포넌트화
- [ ] 애칭 미설정·재디토·계정 삭제/차단의 제품 정책 확정
- [ ] 네이티브 프로필/원본 ID 연결, 권한 검사, 출처 유저 이동
- [ ] 2칸 너비용 레이아웃 설계
- [ ] 실제 기기의 접근성 큰 글자·밝기·다국어·스크린리더 검수