글자 스타일

모든 신규 UI 텍스트는 Pretendard를 사용합니다.

Pretendard · 하나의 서체

브랜드 설명과 사용자 콘텐츠 모두 Pretendard를 사용합니다. 위계는 크기·굵기·행간으로 구분하며, 로고는 원본 SVG 아트로 유지합니다.

글자 크기 14단계

글자 크기마다 행간을 함께 정합니다. 굵기는 보통(400), 중간(500), 굵게(700) 세 가지입니다. Static이 붙은 스타일은 기기의 글자 크기 설정과 관계없이 크기를 유지합니다. 국문은 Pretendard, 별도 영문 브랜드 예시는 LINE Seed Sans App을 사용합니다.

예제는 전 단계 동일 — 국문(Pretendard Bold) + 라틴(LINE Seed Sans App Regular)을 실제 크기/행간로 렌더. 각 단계 × Rg·Md·Bd = 스타일 42종 + 크기가 고정된 스타일 42종. 보드의 브랜드 스케일 48·24·18px이 t14·t9·t6에 정확히 일치하므로 브랜드 전용 커스텀 스타일이 필요 없다.

제목·본문·주석에 쓰는 글자 스타일

기존 글자 스타일을 새 기준으로 바꾸기

기존 화면의 글자를 변경할 때는 왼쪽의 스타일을 찾아 오른쪽의 새 스타일로 바꿉니다. DDSType은 기존 앱의 글자 스타일 이름이고, t1–t14는 새 기준의 크기 단계입니다. 크기나 굵기가 달라지는 항목은 화면에서 다시 확인합니다.

변경 후에는 글자 크기(19·17px), 굵기(600), 버튼 문구의 행간, 자간(−1%)을 확인합니다. 자세한 검토는 기존 구현 검토에 남겨두었습니다.

사용할 때 확인할 것

• 글꼴을 나누는 기준 — LINE Seed Sans App: 워드마크·온보딩/스플래시 타이틀·빈 상태 브랜드 카피·발표/마케팅 지면의 라틴. Pretendard: UI 전 영역·사용자 생성 콘텐츠·국문 전체. 스타일(tN)은 공유하고 폰트만 보이스로 갈린다 — 예: 브랜드 Display = t14StaticBold+LINE Seed, 화면 타이틀 = screenTitle+Pretendard.
• 한글이 있는 문장의 글꼴 — LINE Seed Sans App은 라틴 전용(한글 글리프 없음). iOS에서 자동 폴백이 시스템체로 떨어지므로, 국문 혼용 문자열은 코드에서 명시적으로 Pretendard를 지정한다. 한글 브랜드 표기가 꼭 필요한 예외 지점만 LINE Seed Sans KR(Th·Rg·Bd) 검토.
• 크기를 고정하는 경우 — 브랜드 지면(온보딩·스플래시·공유 카드·발표)은 레이아웃 고정이므로 tNStatic*을 쓴다. 스크롤되는 UI 본문은 기기의 글자 크기 설정을 따르는 스타일.
• 글꼴별 지원 굵기 — 3단(400/500/700) 중 LINE Seed Sans App은 Rg(400)·Bd(700)만 대응하고 Medium(500)이 없다(보유: Th·Rg·Bd·XBd·He). 브랜드 보이스에서 Medium 스타일 사용 금지 — 보드가 EN Display 24를 Regular로 지정한 것과 일치. 국문 Medium은 Pretendard 가변 wght 500으로 정상 지원.

간격

화면 가장자리, 버튼 사이, 글자 사이의 간격을 같은 기준으로 맞춥니다. 먼저 사용처별 간격을 고르고, 맞는 항목이 없으면 아래 19단계에서 선택합니다.

간격 크기 19단계

사용처별 간격 6가지

스케일 밖 레이아웃 클리어런스 2종 — scrollBottomClearance 110(스크롤 콘텐츠가 플로팅 탭바/CTA를 피할 여유) · scrollBottomClearanceTall 148(홈 그리드 제외 리스트 탭). 레거시 별칭 s4~s48·screenMargin은 호환용 — 신규 코드 사용 금지.

모서리와 그림자

모서리는 기본 16px, 내부 요소 8px, 완전한 원형으로 구분합니다. 그림자는 요소가 배경에서 얼마나 떠 있는지 보여줍니다. 위젯과 전용 버튼은 각자의 크기 규칙을 따릅니다.

모서리 모양

위젯의 라운드는 이 3단이 아니라 크기 비례 공식을 따른다(음악은 모든 크기 24) — 위젯 모서리 참조. 브랜드 그래픽의 블롭은 라디우스 16–24 범위(브랜드 에셋).

그림자의 깊이 3단계

상황에 맞는 그림자

글래스 재질 dsGlass() — ultraThinMaterial 블러 + 화이트 35% 스트로크 0.8 + glassDrop 그림자. UpButton·탭바 계열 유리 질감의 공용 규격.

움직임

움직임은 눌렀는지, 화면이 바뀌었는지 알려주는 데 사용합니다. 아래 동작별 설정을 함께 사용해 같은 행동이 화면마다 다르게 느껴지지 않도록 합니다.

동작별 움직임 설정

컴포넌트 내부 별칭 DSMotion: springFast(snappy 0.3) · springSoft(smooth 0.35) · easeQuick(0.2) · ease(0.22) — 새 코드는 의도가 뚜렷하면 Motion.* 우선.

피해야 할 움직임

• 하단 탭 전환은 애니메이션 없음 — 즉시 교체 (ContentView).
• 섹션 로딩의 장식적 등장·스태거 금지.
• 커스텀 스프링 파라미터(response/damping 직접 지정) 금지 — 시스템 프리셋의 duration 변형만.

움직임 줄이기 설정

모션 감소 설정(UIAccessibility.isReduceMotionEnabled)에서는 ① pressed 스케일 → 1 ② popIn(bouncy) → fade ③ 장식성 글로우 펄스 정지. 전환 자체(시트·푸시)는 시스템이 크로스페이드로 대체하므로 별도 처리 없음. 코드 연동은 추가 작업 2.

입력과 반응

누를 수 있는 요소는 반응을 보여주고, 사용할 수 없는 요소는 상태를 구분합니다. 버튼의 크기 변화, 관계를 표현하는 빛, 카드 테두리의 기준을 확인하세요.

눌림과 비활성 상태

pressed 스케일 3단은 Reduced Motion 규칙에서 전부 1로 무효화된다. pressed 색 짝은 현재 fillBrandPressed 하나뿐 — 주요 fill·layer로 확장 예정(추가 작업 1).

주파수와 관계를 표현하는 빛

주파수(퍼플)·관계 스택(오렌지) 게이트의 진행을 표현하는 디토! 고유 장치. 팡파레 없는 은은한 발광 — 주파수의 물성과 동일 원칙.

⚠ 주파수 글로우 #7C4DFF는 Splup(#AA4AF4)도 Deep(#6655D2)도 아닌 제3의 퍼플 — 검토 M에서 브랜드 축 정렬 결정 대기.

카드의 얇은 테두리

hairline(color:radius:) — 카드 공용 1px continuous 스트로크 오버레이. 기본색이 레거시 DT.lineSubtle 참조라 이관 시 borderDefault 계열로 교체 대상.

화면이 겹치는 순서

여러 화면이 함께 열릴 때 무엇을 앞에 보여줄지 정합니다. 상세 화면, 바텀시트, 카메라, 안내 메시지를 아래 5가지 순서에 맞춰 배치합니다.

화면 종류별 표시 순서

겹쳐 열린 화면의 사용 기준

• 모달(시트·다이얼로그·풀스크린 모달)이 표출되면 하단 탭바를 숨긴다. 판정은 AppState.modalUp 한 곳에서 통합 — 새 모달 상태(@Published)를 추가하면 반드시 modalUp에 등록.
• 페이지 푸시(contentArea 오버레이)는 모달이 아니다 — modalUp에 넣지 않고 page 밴드에 둔다.
• 토스트/스낵바는 모달이 아니다 — toast 밴드.
• 스크림은 시맨틱 토큰 2단만: scrim(black ≈45.5% — 시트·다이얼로그 표준 딤) · scrimMuted(≈17.3% — 맥락을 남기는 가벼운 딤).

밝은 화면과 어두운 화면

밝은 화면과 어두운 화면에서도 같은 역할을 알아볼 수 있어야 합니다. 배경, 콘텐츠, 글자의 밝기를 함께 조절해 읽기 편한 상태를 유지합니다.

배경과 콘텐츠의 밝기 구분

이 분리가 확정되면 검토 A의 잉크 5종(#171719·#111111·#141317·#181818·#2D313D)이 지면별 토큰으로 수렴된다.

규칙

• 위젯 내부는 WInk 고정 잉크 — 위젯은 콘텐츠 표면이므로 다크에서도 라이트로 렌더한다.
• 브랜드 컬러의 다크 대응 — Splup 계열은 500→400 밝힘(#AA4AF4 → #C588FF)이 기존 규칙. Deep Purple·Platter Pink는 다크에서도 원색 유지(지면이 Eclipse라 대비 충분).
• 액센트 8종의 다크 짝 — 채도 −8~12%로 tokens.json에 함께 정의한다 (검토 K).
• 화면별 하드코딩 hex는 발견 시 토큰으로 수렴 (검토 E 체크리스트).

플래터 배치

플래터는 위젯을 놓는 공간입니다. 위젯의 크기와 간격을 격자에 맞추고, 위치가 겹치거나 바깥으로 나갔을 때의 처리 방법을 함께 정합니다.

규격

위젯 비율 5종

타입×비율 매트릭스는 WidgetFrame.swift(WidgetFrameSpec)이 공통 원본.

위젯을 놓고 옮기는 순서

직접 배치해 보기

GridEngine과 동일한 공식·규칙을 브라우저에서 재현한 데모입니다. 위젯을 추가하고 드래그해서 옮기고, 우하단 핸들로 크기를 늘려보세요 — 행 우선 착지, 동일 크기 자리 교환, 방향 푸시(연쇄 ≤3), 원래 위치로 복귀, 크기 조절 범위 제한(2×2~6×8 러버밴드), 10개 제한, 크기 비례 라운드가 실제 공식대로 동작합니다. 화면 폭 슬라이더로 셀의 반응형 계산(W 320–620 클램프)도 확인할 수 있어요.

데모 범위: findFree·resolve(드래그 방향 우선 푸시)·trySwap·리사이즈 러버밴드(2×2~6×8)·10개 캡·라운드/셀 공식. 앱 전용 동작(디토 슬롯·디토 잠금·promote 글로우)은 생략.

플래터별 규칙

• 내 플래터 — 위 규격 전부.
• 그룹 플래터 — 자유 배치(first-fit 실패 시 아래로 성장) + 24시간 소멸.
• 아카이브 — 코르크보드 렌더.
• 디토 슬롯(핑크 ＋, Platter Pink) — Ditto! 위젯 전용, 10개 카운트 제외.
• 디토 잠금 — 디토된(allow+count>0) 위젯은 수정 영구 잠금.

버튼과 선택 요소

버튼은 행동을 실행하고, 칩과 선택 탭은 값을 고릅니다. 사용 목적에 맞는 형태를 선택하고 기본·눌림·비활성 상태를 함께 확인합니다.

일반 버튼

칩과 선택 탭

인터랙션 공통 규칙

컴포넌트 목록

코드에 존재하는 전체 세트. 본 페이지는 버튼·칩·세그먼트를 선행 문서화한 것 — 나머지의 슬롯·변형·상태 스키마 문서화는 추가 작업 6.

디토의 말과 용어

친구의 일상을 내 공간에 담는 행동은 ‘디토’, 관계가 이어지는 리듬은 ‘주파수’라고 부릅니다. 같은 뜻은 같은 말로 표현하고, 사용자가 행동을 이해할 수 있도록 설명합니다.

디토에서 쓰는 말의 뜻

라이팅 원칙

• 숫자를 세지 않는다 — 주고받은 것들은 수치가 아니라 파형으로 쌓인다. 주파수 진행률·카운트를 사용자에게 노출하지 않는 톤을 카피에서도 지킨다.
• 버벌 시그니처 — 국문 "통하면 디토해!" · 글로벌 "Everything about you!" / "Say it Ditto!". 브랜드 보이스(LINE Seed) 지면에서 사용.
• 제품 수치는 근거와 함께 — 친구 15명(던바 15) · 디토 슬롯 3개 · 주파수 21일 게이트(Hall 200시간). 발표·문서에서 수치를 쓸 때는 근거를 각주로.
• 보이스 연결 — 서비스가 말하는 문장(브랜드 카피)은 LINE Seed 지면, 사용자가 말하는 자리는 Pretendard — Typography 글꼴을 나누는 기준와 동일 규칙.

상황별 문구

사용자에게 필요한 정보만 짧게 전달합니다. 친근한 해요체를 사용하되, 공유나 반응을 재촉하지 않습니다. 무엇이 바뀌었고 다음에 무엇을 할 수 있는지 알려줍니다.

문구를 읽는 네 사람

위젯 기획서 15종이 공유하는 고정 페르소나(00_공통규격_템플릿.md). 같은 화면도 관계 거리에 따라 다른 사람에게 말하고 있음을 항상 의식한다.

말투의 기준 5가지

• ① 해요체, 청유형. 명령하지 않는다 — "작성하세요" 대신 "남겨보세요", 확인 질문은 "~할까요?". 브랜드 버벌("통하면 디토해!")을 제외하면 시스템 카피에 느낌표를 아낀다.
• ② 재촉하지 않는다. 주파수는 조용히 익는 것 — 스트릭·D-Day 카운트다운·"놓친 소식 N건!" 류의 FOMO 어투 금지. 알림 기본값도 조용한 쪽(D-Day 알림 기본 없음).
• ③ 숫자로 압박하지 않는다. 주파수 진행률·게이트 수치(21일)를 사용자에게 노출하지 않는다. 잠금 카피는 "곧 열려요"가 공통 원본. 상한(친구 15·디토 슬롯 3·위젯 10)은 도달했을 때만 알려준다.
• ④ 행동을 수단화하지 않는다. 디토는 목적이지 수단이 아니다 — "친구가 되려면 더 디토하세요"처럼 행동을 보상의 조건으로 쓰는 문장 금지.
• ⑤ 장난기는 브랜드 자리에서만. 위트는 브랜드 보이스(LINE Seed 지면·온보딩·빈 상태 첫 줄)까지. 확인·삭제·오류 등 사용자가 결정하는 순간의 카피는 서체처럼 뒤로 물러난다(글꼴을 나누는 기준와 동일 구조).

문장과 표기 규칙

상황별 권장 문구와 피할 문구

Don't 열의 문장은 일반 SNS의 관성 어투다 — Ditto!의 타겟이 떠나온 바로 그 말투이므로, 리뷰에서 이 패턴이 보이면 즉시 교체한다. 개념어 사용 범위는 용어 · 라이팅, 서체 층위는 Typography를 따른다.

브랜드 원본 파일

로고, 아이콘, 배경 그래픽의 원본과 사용 기준입니다. 원본의 비율을 유지하고, 사용할 화면에 맞는 색과 크기를 선택합니다.

디토 로고

앱 에셋 카탈로그의 SVG 벡터 원본(Assets.xcassets/wordmark-*.imageset, 370×134)이 공통 원본. 단색 8패스라 지면에 따라 재채색해 쓴다 — 이 문서의 헤더·사이드바 로고도 이 원본을 currentColor로 임베드해 라이트/다크에 자동 적응한다. 심볼(스플럽 블롭)·앱 아이콘은 이번 업데이트에서 제외 — 다음 차수.

워드마크는 블랙/화이트 2종만 운용한다 — 퍼플 변형(wordmark-purple)은 사용 지면이 없어 v3에서 제외(에셋은 카탈로그에 잔존, 신규 사용 금지). 색은 지면이 말하고, 워드마크는 잉크로만 얹는다.

원본 파일 목록

사용 규정

• 크롭 에셋은 실체를 확인한다 — 過去 사례: kv-logo-master가 옛 덱 슬라이드 크롭이어서 wordmark-black으로 교체(08-20). 출처 불명 크롭 재사용 금지.
• 블롭 형태 규칙 — 장식 블롭·잔존 박스는 라디우스 16–24로 블롭화. 여백 밴드 마커는 ♥ 모티프.
• 텍스처 vs 토큰 — Splup Gradient·brand-bar는 토큰(코드로 그림), 오브제 7색은 이미지 텍스처(fill 전용). 혼용하지 않는다.
• 아이코노그래피 카탈로그(Ditto_Iconography_Catalog.svg)는 에셋 소재로만 참조 — 별도 문서화는 하지 않는다.

프로필 기본 아바타 10종 다운로드 ↗핸들과 연결한 SVG·PNG·팔레트

기본 아바타와 대표·라이프 적용 비교 →

기존 화면 변경하기

기존 화면을 새 기준에 맞추는 순서입니다. 색과 글꼴을 먼저 확인하고, 버튼은 실행할 행동에 맞게 선택합니다.

컬러는 용도에 맞게 골라요

대표 보라색은 그대로예요. 브랜드 배경과 버튼은 각각 정해진 배색을 사용해요.

기존 화면의 모든 보라·핑크를 한꺼번에 바꾸지는 마세요. 글자·배경·상태색은 각 역할의 기준을 유지해요.

글꼴은 Pretendard로 통일해요

화면 제목, 본문, 버튼 문구 모두 Pretendard를 사용해요. 로고와 앱 아이콘은 제공된 SVG 원본을 사용하세요.

버튼은 두 가지로 나눠요

위 이미지는 용도를 설명하는 예시예요. 실제 모양과 눌림은 ‘직접 눌러보기’에서 확인할 수 있어요.

이 순서로 적용하면 돼요

1. 화면에서 쓰는 색과 글꼴을 확인해요.대표색과 Pretendard부터 현재 기준과 비교하세요.
2. 배경 그래픽과 버튼을 구분해요.꾸미는 요소인지, 사용자가 누르는 요소인지 먼저 정하세요.
3. 한 화면씩 바꾸고 확인해요.글자가 잘 읽히는지, 버튼이 잘 눌리는지, 작은 화면에서도 맞는지 확인하세요.

어디까지 반영됐나요?

추가 작업 목록

아래는 이전 설계와 검토 기록입니다. 현재 제작은 Pretendard 단일 서체, 기본 CTA R12·60pt, 최신 Colorgraphy와 Ditto Action 규격을 우선합니다.

공통 설정값

색, 글자, 간격처럼 여러 화면에서 반복하는 값을 이름으로 저장합니다. 같은 이름을 사용하면 공통 원본을 수정했을 때 연결된 화면을 함께 바꿀 수 있습니다. 아래 표에서 이름, 값, 적용 위치를 확인하세요.

프로필 기본 아바타

프로필과 같은 색을 사용하는 기본 아바타 10가지입니다. 사진을 등록하지 않았을 때 표시하며, 아래 예시에서 실제 크기로 비교할 수 있습니다.

핸들에 넣어서 비교하기

컬러를 고르면 같은 배색의 대표·라이프 핸들에 함께 적용돼요. 실제 48px 크기로 확인하세요.

01퍼플 · 핑크02딥 퍼플 · 바이올렛03핑크 · 코랄04피치 · 옐로05시안 · 블루06민트 · 라임07코랄 · 레드08골드 · 옐로09라임 · 그린10뉴트럴 · 그레이

대표

지우 ⭐나의 애칭목록

라이프

지우 ⭐나의 애칭목록

01 · 퍼플 · 핑크

크기를 바꿔서 확인하기

사각 프로필에 맞춰 만든 컬러 표면입니다. 크기와 비율을 바꿔도 색이 전체 영역을 채워요.

크기

96px

비율 정사각형세로형 4:5가로형 16:9

96 × 96 · 모서리 24

아바타 에셋 10종

동일한 광택·번짐으로 통일했어요. 48×48 · 모서리 12의 라운드 사각형에 테두리 없이 적용합니다.

Figma에서 10종과 프로필 핸들 적용 보기 ↗

10종 모두 다운로드 ↗SVG · 1024px PNG · 512px 라운드 사각 PNG · 팔레트 JSON

브랜드 그래픽과 어떻게 이어지나요?

라이프와 대표를 전환할 때 아바타는 유지합니다. 팔레트를 바꿀 때 같은 계열을 추천하되, 사용자가 고른 아바타를 임의로 바꾸지 않습니다.

프로필 핸들과 우측 버튼 가이드 →

프로필 구성

같은 프로필을 대표와 라이프에서 어떻게 보여줄지 정합니다. 색을 선택해 두 모습을 비교하고, 오른쪽 버튼의 배치와 동작을 확인하세요.

대표와 라이프 비교

대표

주색의 깊이와 얕은 광택으로 강조해요.

지우 ⭐나의 애칭목록

라이프

같은 계열의 선명한 단색으로 구분해요.

지우 ⭐나의 애칭목록

프로필 컬러 변경

Figma · 통합 Profile System 보기 →

컬러칩은 핸들과 같은 원본 색으로 표시해요. 좁은 화면에서는 옆으로 스와이프해 다른 색을 볼 수 있어요. 사진과 아바타는 그대로 유지돼요.

핸들 컬러 선택 · 가로로 넘겨 10색 보기

취소적용하기

디자인 시스템 미리보기예요. 실제 프로필은 저장되지 않아요.

대표

지우나의 애칭목록

라이프

지우나의 애칭목록

좁은 화면 · 스와이프 적용 예시

Figma · 통합 Profile System 보기 →

색을 줄이지 않고 가로로 넘겨요. 스와이프는 목록만 이동하고, 컬러칩을 눌러야 선택이 바뀌어요.

핸들 컬러 선택 · 가로로 넘겨 10색 보기

취소적용하기

디자인 시스템 미리보기예요. 실제 프로필은 저장되지 않아요.

대표

지우나의 애칭목록

라이프

지우나의 애칭목록

프로필 오른쪽 버튼 배치

아래는 상태 전환을 확인하는 데모예요. 실제 프로필 저장이나 친구 요청은 전송되지 않아요.

내 프로필 · 기본

연지나의 애칭목록

수정은 프로필 편집을 열고, 설정은 계정 설정으로 이동해요.

내 프로필 · 수정 중

연지나의 애칭목록

수정완료

수정완료 후 기본 상태로 돌아가요. 저장 중에는 중복 입력을 막아요.

친구 프로필 · 친구인 상태

연지나의 애칭목록

사람과 체크를 함께 사용해 친구 관계를 표시해요. 친구 삭제를 즉시 실행하지 않아요.

친구 프로필 · 추가 가능

연지나의 애칭목록

요청을 보낸 뒤 요청됨으로 바꿔요. 수락 전에는 친구로 표시하지 않아요.

친구 프로필 · 추가 불가

연지나의 애칭목록

버튼은 비활성화하고 추가할 수 없는 사유를 아래에 안내해요.

수정 버튼을 눌러 상태 변화를 확인해보세요.

공통 배치 규칙

• 핸들 높이 64 · 모서리 16 · 사진 48 · 우측 여백 8.
• 터치 영역은 최소 44 × 44, 아이콘은 20. 두 액션 사이는 4.
• 이름 영역만 줄어들고 버튼은 고정돼요. 긴 이름은 한 줄 말줄임으로 처리해요.
• 친구 상태는 사람+체크·사람 추가·추가 불가 아이콘으로 구분해요. 각 아이콘에는 스크린 리더용 상태 이름을 제공해요.
• 큰 글자 설정에서는 높이를 늘리고 액션을 다음 줄로 배치해요.

어떻게 달라지나요?

• 대표: 그래픽 팔레트의 주색을 중심으로 위에서 아래로 색이 깊어져요.
• 라이프: 같은 컬러군의 단색을 사용해요.
• 두 핸들의 크기와 아이콘은 같고, 라이프는 음영 없이 단색으로 표현해요.
• 여러 색을 모두 넣기보다, 이름과 편집 기능이 잘 보이도록 색을 단순화했어요.

적용 기준

높이 64 · 모서리 16 · 프로필 이미지 48. 어두운 글자로 읽기 쉽게 맞췄어요. 위 핸들은 색과 형태를 비교하는 예시이며 편집·설정 기능은 연결되지 않았어요.

앱 소스의 프로필 선택도 10종으로 연결했어요. 기존 선택은 유지하고 이전 컬러 ID는 가까운 팔레트로 연결되며 직접 지정한 커스텀 색은 유지해요. 실제 기기 화면 검증은 별도입니다.

원본 그래픽 팔레트 보기 →

위젯 추가와 편집

위젯 추가 시트에서 고를 수 있는 위젯, 카드 규격, 모든 위젯이 함께 쓰는 작성 화면과 플래터 편집 도구를 정리했어요. 이미지는 모두 실제 앱 화면이에요.

기준: 앱 소스 AddWidgetSheet.swift · PlatterAddSheet.swift · WidgetFrame.swift · GridEngine.swift. 1.0 출시 위젯은 15종이에요(WType.launchSet). 그 밖의 위젯은 ‘곧 열려요’로 잠겨 있어요. 추가 시트 규격 JSON

위젯 목록 · 네 묶음

네 묶음은 1.0 출시 위젯(WType.launchSet)을 그대로 반영해요. 이름과 설명은 앱 카드 문구 그대로이고, ditto.place의 ‘붙일 수 있는 것들’과 같은 목록이에요. 기분은 상태에 합쳤고, 블록 자리는 포스트가 이어받았어요.

기본 나를 보여주는 기본 위젯

기록 매일이 쌓이는 작은 기록

함께 친구와 주고받으며 채워지는 위젯

미디어 좋아하는 것을 모아 보여줘요

추가 시트 맨 끝에는 준비 중인 위젯을 모은 ‘곧 열려요’ 묶음이 있어요(Ask · 한줄일기 · 문답 · 버킷리스트 · 취향 콜렉션 · Ghost · 비밀게시글 · 폴라로이드 · 파파라치 · 빈티지 카메라 · 알림 전송). 흑백 잠금 카드로만 보이고, 누르면 ‘{이름}은(는) 곧 열려요’를 알려요. 이미 플래터에 있는 위젯은 그대로 보이고 동작해요. 출시 목록이 아니므로 위 네 묶음과 소개 페이지에는 넣지 않아요.

추가 시트 구성

1. 시트 머리제목 ‘위젯 추가’ + 오른쪽 닫기. 시트는 시스템 딤과 그래버를 써요.
2. 바로가기 칩기본 · 기록 · 함께 · 미디어 (+ 곧 열려요). 캡슐 높이 34, 터치 영역 44, 좌우 여백 16, 칩 간격 8, 글자 14/600. 선택 칩은 선택 배경·글자색, 나머지는 바닥 면 색. 누르면 그 묶음 맨 위로 스크롤하고 가벼운 진동을 줘요. 스크롤로 한 묶음이 35% 이상 보이면 칩이 따라 바뀌어요.
3. 묶음 머리제목 17/600 + 설명 14/400(보조 글자색). 둘을 하나의 머리글로 읽어요. 묶음 사이 간격 32.
4. 카드 격자2열 · 열 간격 12 · 행 간격 20 · 화면 좌우 여백 16.

작성 화면 · 모든 위젯이 같은 순서

위젯을 고르면 전체 화면 작성 화면이 열려요. 위젯마다 입력 칸은 다르지만 순서는 같아요.

1. 상단 바 · ‘{종류} 위젯 추가’뒤로 가면 위젯 추가 시트로 돌아가요.
2. 미리보기 (고정)높이 176 안에서 실제 위젯을 그대로 줄여 보여줘요. 스크롤해도 위에 남아 있어 크기·내용을 바꾸는 즉시 결과가 보여요. 모서리는 위젯과 같은 반경.
3. 내용위젯별 입력 칸. 묶음 제목 14/600.
4. 크기고를 수 있는 크기만 보여줘요. 다섯 개를 넘으면 가로로 넘겨요. 크기가 정해진 위젯은 ‘이 위젯은 W×H 고정 크기예요’라고 안내해요.
5. 옵션이미지·GIF = 디토 가능하도록 허용(기본 꺼짐, 허용은 3개까지). 옵션이 없는 위젯은 이 묶음을 그리지 않아요.
6. 하단 고정 버튼 · ‘위젯 추가’높이 60, 좌우 16. 위쪽에 0.5pt 구분선(60%). 필수 내용이 없으면 회색 비활성, 채우면 보라로 바뀌어요.

수정할 때

플래터에서 ‘수정’을 누르면 같은 입력 칸을 시트로 열어요. 제목은 ‘{종류} 위젯 수정’, 닫기는 오른쪽, 하단 버튼은 ‘수정 완료’예요. 크기는 플래터에서 바꾸므로 시트에는 미리보기와 크기를 두지 않아요. 바꾼 내용이 있으면 끌어내려도 닫히지 않고 ‘변경사항을 저장하지 않고 닫을까요?’를 물어요(변경사항 버리기 · 계속 수정하기).

플래터 편집 도구

편집 중인 위젯에는 세 가지 도구만 붙어요. 편집 중 ‘대표로 ↑’ 라벨은 없앴어요(2026-10-11). 대표·라이프 이동은 위젯 수정·관리에서 해요.

위젯 모서리

위젯 본체, 미리보기, 디토 후광, 선택 테두리가 모두 같은 반경 Grid.radius(w)를 써요. 반경이 서로 다르면 후광과 테두리가 어긋나 보여요.

방명록

방명록은 서버에 저장돼요. 친구 누구나 안부를 남길 수 있고, 답글은 주인만 달 수 있어요.

타일 글자 수는 크기에 따라 달라요. 높이 150 미만은 2줄, 좁은 세로형은 6줄, 그 밖에는 3줄까지 보여요. 크기는 공통 12종을 모두 쓸 수 있어요. 친구 위젯 시트에도 최근 안부 4개를 미리 보여줘요.

To-do 위젯

카테고리별 할 일과 이번 주 기록을 보여줘요. 완료한 날은 숫자 대신 카테고리 색 배지로 쌓여요.

기준: TodoModel.swift · TodoWidget.swift. 완료율이나 ‘3/5’ 같은 숫자, 진행 막대는 쓰지 않아요(기획서 §2.6). 투두 완료는 피드에 올리지 않고, 디토할 수 없어요. To-do 토큰 JSON

구성

1. 머리큰 원형 썸네일 · 제목 · 부제(일정, 24자까지).
2. 주차 머리카테고리 색 점 2×2 · ‘2026년 10월 2주차’ · 주/월 전환 · 이전·다음 주.
3. 주간 스트립일–토 일곱 칸. 요일 글자 · 완료 배지 묶음 34 · 날짜.
4. 카테고리 섹션색 칩 + 체크리스트. 내 위젯은 칩 옆 ＋로 바로 추가해요.

카테고리 색 5가지

체크 칸, 완료 배지, 칩에 같은 색을 써요. 위젯 표면은 항상 흰색이라 칩 바탕·글자는 고정값을, 시트는 어두운 화면용 값을 함께 써요. 새 카테고리에는 아직 쓰지 않은 색부터 주고, 기본 섹션 색은 현재 앱 아이콘 색 계열을 따라요.

어두운 화면의 칩 바탕은 채움색 24%예요. 빈 체크 칸·빈 배지는 #EEEDF2, 일요일은 #E5484D, 토요일은 #3D7BEA.

체크 칸

주간 스트립 상태

스크린 리더는 ‘10월 12일 월요일, 오늘’과 ‘완료 기록 있음/없음’을 읽어요.

플래터 타일 · 크기별 모습

크기는 3×4 · 4×4 · 4×3 · 6×2 네 가지예요. 타일 높이 150을 기준으로 두 가지 구성으로 나뉘어요.

다음 빌드에서 바뀌는 점 (개발 중) 큰 타일에 다 들어가지 않는 항목은 ‘+N개 더’로, 모두 끝낸 날은 ‘모두 완료 · N개’로 알려줘요. 완료율이 아니라 남은 줄 수만 알려주는 표시예요.

Do · Don’t

디토 허용 규칙

어떤 위젯을 디토할 수 있는지, 몇 개까지 허용하는지, 디토할 수 있는 위젯을 어떻게 보여주는지 정리했어요.

기준: DittoAvailabilityBadge.swift · DittoBeam.swift · Overlays.swift(친구 위젯 시트) · WidgetDetailParts.swift. 글로우, 배지, 길게 누르기, 허용 토글은 모두 같은 판단(dittoable + allow)을 따라요. 디토 허용 토큰 JSON · 디토하기 버튼 →

디토할 수 있는 위젯

허용은 3개까지

내 위젯 중 디토를 허용할 수 있는 위젯은 대표와 라이프를 합쳐 3개예요. 네 번째를 켜면 토글이 다시 꺼지고 ‘디토 허용은 3개까지예요. 다른 위젯의 허용을 먼저 꺼 주세요.’를 보여줘요. 수정 중인 위젯 자신은 세지 않아요.

헷갈리기 쉬운 두 한도: 주인이 허용할 수 있는 위젯 3개와, 내가 라이프 플래터에 가져올 수 있는 디토 3칸은 서로 달라요. 라이프 3칸이 가득 차면 거절하지 않고 바꿀 디토를 고르게 해요(‘이 슬롯은 디토가 가득 찼어요!’). 이미 디토된 위젯(허용 + 1회 이상)은 내용을 수정할 수 없어요.

디토 가능 표시 · 후광과 배지

친구 위젯 시트 · 상태별 모습

친구 위젯을 누르면 내용 높이의 시트 하나에서 바로 디토해요. 머리(왼쪽 닫기 · 가운데 제목) → 미리보기 140 → 제목 → 출처 → 상태별 영역 순서예요.

다음 빌드에서 바뀌는 점 (개발 중) 시트의 주제가 디토에서 위젯으로 바뀌어요. 제목은 위젯 종류(예: ‘사진 위젯’), 출처는 ‘○○님의 위젯’(디토로 가져온 위젯만 ‘…에게서 가져옴’)이고, 종류별 행동(원본 크게 보기 · 영상 재생 · 링크 · 전문)과 댓글 아래에 디토 카드가 붙어요. 디토 카드는 ‘담을 수 있어요 · 담았어요 · 담을 수 없어요 + 이유’ 세 상태이고, 디토할 수 없는 종류(스티커 보드 · To-do)도 이유와 함께 보여줘요.

• 라이프가 3칸 가득이면 안내가 ‘라이프 디토 3칸이 가득 찼어요. 3초간 꾸욱 누르면 바꿀 디토를 골라요.’로 바뀌어요.
• 요청 중에는 대표/라이프 선택을 막고, 실패하거나 교체를 취소하면 버튼을 처음 상태로 돌려요.
• 친구의 To-do는 이 시트 대신 제목 ‘To-do’의 읽기 전용 화면으로 열어요.
• 방명록이면 출처 아래에 최근 안부 4개를 보여줘요.