Figma 작업규칙 SoT — 제품 화면 저작

cc-blueprint 의 모든 Figma 저작(/cc-blueprint:design)과 검증(design-self-check, /cc-blueprint:sync)이 따르는 구조·네이밍·등급의 정본이다(소비·브랜드·조립·품질·슬롭 지문 규칙은 같은 rules/ 의 별도 문서 — design.md 「Rules SoT」). 여기 없는 판단은 cc-designer:design-decision 프로토콜로 확정하고 DDR 로 남긴다 — 사람에게 되묻지 않는다.

• 제품 화면은 매핑 표(화면 레지스트리)에 등재된 섹션만이 정본이다. 레지스트리는 리포가 원본, Figma 는 미러다 — 대응 계약의 SoT 는 cc-flutter:figma-widgetbook-alignment 이며 여기서 재정의하지 않는다.
• 3단 대응(인용): Figma Project / Page / Section ↔ 코드 [Surface] / Feature / UseCase. 섹션 이름 == @UseCase(name:), 섹션 node URL 은 매핑 표 figma_node(§5 R3).
• 상태와 플랫폼은 계층이 아니라 축이다 — 섹션 안의 프레임으로 두고, 계층 이름에 섞지 않는다.
• _flow · _explore · _archive 페이지는 대조 대상 밖이다(§5 R4) — 어떤 규칙도 적용하지 않고, 어떤 검사도 하지 않는다. 핵심 화면의 변주안은 _explore 에 둔다(figma-direction.md §D3) — 검사는 받지 않지만, 고른 안이 본 화면의 출발점이 되므로 본 저작과 같은 규칙으로 그린다. 표준 표지 Cover 페이지(design.md Step 1.5 — 레시피 상수 그대로의 고정 hex·폰트)도 같다.

• 플랫폼·상태 어휘와 섹션 이름 금지 4종은 §5 R1·R2 를 따른다.
• 코드 쪽 짝 — 상태 이름은 Widgetbook 상태 Knob 의 시나리오 enum 값이 그대로 들고, Figma 대조 캡처의 이름은 그 소문자다. Knob 에 보이는 한국어 라벨(데이터 · 로딩 · 빈 · 에러)은 대조의 키가 아니다. 대응표는 cc-flutter:figma-widgetbook-alignment §2-1 이 정한다(여기서 재정의하지 않는다) — 이 어휘에 상태가 늘면 그 표에도 한 줄이 는다.

• CoUI 라이브러리 컴포넌트 우선 — 소비 규약·금지 3종·부재 시 판정 절차는 coui-library-consumption.md 가 SoT (§5 R5 를 결선).
• 색·간격은 CoUI 변수 바인딩, 글자는 텍스트 스타일로만 지정한다. 브랜드·제품 로컬 토큰과 스타일도 사용한다 (§5 R5).
• CoUI 에 없는 부품은 판정 질문(§5 R5 — 「이 제품이 아닌 다른 제품에서도 이게 필요한가?」)으로 도메인 컴포넌트/CoUI 승격 백로그로 가른다 — 그 자리에서 detach·재제작하지 않는다.

L0 — 재작업 필수 (PR/저작 차단)

• CoUI 재사용 계약 위반(불필요한 detach · 기존 부품의 무근거 재제작)
• Default 프레임 부재(§5 R2 「예외 없이 필수」)
• 섹션 이름 ↔ @UseCase(name:) 불일치(§5 R1 유일한 계약 — alignment SoT 도 L0) · 레지스트리 미등재 섹션을 정본으로 인용 · 섹션 이름 단독 리네임(코드 미동기)
• 리터럴 색·간격(저작자가 준 hex·px — variable 바인딩 없음, 라이브러리 인스턴스의 기본값은 제외)
• 눈에 보이는 틀린 값(표시값 ≠ 스펙값이고 known-gap 표시도 없음 — consumption §8. 값의 형태가 다른 것도 틀린 값이다: 스펙이 날짜를 말하는데 기간만 그림)
• 커버리지 누락(스펙 화면·요소가 추적표에도 사유 있는 제외에도 없음)
• 결정 정보 누락(결정 화면에 결정 정보의 값이 그 형태로 없고 known-gap 도 없음 — figma-direction.md §D1 ④)
• 화면 간 불일치(같은 역할의 요소가 화면마다 다르게 조립됨 — 재작업은 consumption §4)
• 브랜드 컬렉션 혼입(고른 컬렉션 밖의 색 바인딩 · 색 컬렉션 모드 미고정 — 간격 Primitives 는 제외)
• 프로토타입 링크 누락(이동 목록의 행에 reaction 도 미연결 사유도 없음)

L1 — 경고 (사유 기록 시 통과)

• Loading/Empty/Error 프레임 부재 · 프레임 어휘 이탈(플랫폼이 Mobile · Web 이 아닌 프레임 — 옛 Tablet 프레임 포함 — 이나, §5 R2 의 공통 어휘에도 그 제품이 DDR 에 남긴 제품 전용 어휘에도 없는 상태) · 섹션 이름 금지 4종
• known-gap(스펙↔라이브러리 충돌을 consumption §8 로 처리) · 라이브러리 결함(정의: consumption §6) — 사유 = 이슈 URL 또는 초안 대기(consumption §6 의 한 줄)
• 사유 있는 미저작·미연결(제외 목록에 사유가 있는 스펙 화면·요소 · 미연결 목록에 사유가 있는 이동)
• 오토레이아웃 무결성(라이브러리 인스턴스 밖 컨테이너 안 absolute 자식·고정폭 텍스트·자기 노드 overflow — 의도된 가로 스크롤 행(figma-composition-patterns.md §C6)은 제외)
• 타이포 리터럴(글자 크기·글꼴이 텍스트 스타일 밖 — 판단 표지)
• AI 슬롭 지문(카드 안 카드 · 같은 크기 설명 타일 · 한쪽 굵은 색 띠 · 강조색 과다 · 그림 문자 · 흔한 가명·더미·부품 기본 문구·스펙 문구에 남은 저작 메모 · 지어낸 지표 수치 · 조사 병기 · 대시·가운뎃점 구분 · 어절 중간 줄바꿈 — 정의·측정은 figma-slop-tells.md §S1–§S8 · §S10 · §S11). 사유는 "이 서비스에서는 왜 이게 맞는가" 한 줄

L2 — 위생 (배치로 일괄 정리)

• Mobile/Web 좌우 배치 어긋남 · 설명(description) 미기입(컴포넌트·세트만 해당 — 프레임은 Figma 가 description 을 지원하지 않는다, 프레임 메모는 레지스트리 note·DDR) · flow 이름이 기본값 Flow 1 로 남음
• 한 화면 안 높임 수준 혼용(슬롭 지문 figma-slop-tells.md §S9 — 어미로만 가르므로 판단 표지)

Default 부재만은 사유로 못 넘긴다 — 정본이 「예외 없이 필수」로 못박았다. Loading·Empty· Error 부재는 "개발이 알아서 만들고 그게 디자인 부채가 된다"(§5 R2) — L1 사유 기록은 곧 부채 등록이며, /cc-blueprint:sync 가 이 부채를 3분류 목록에서 추적한다. 스펙이 그 상태를 제품에 없다고 한 경우만 스펙 문장을 적고 부채 목록에서 뺀다. 스펙이 「이번 범위 밖」이라고만 했으면 있는 상태이므로 L1 이고, 사유는 그 스펙 문장이며 부채 목록에 남는다.

재작업 순서(L0 · 부품이 못 그리는 경우)는 consumption §4·§5 를 따른다.

출처: 한 제품 파일의 디자이너 「작업 규칙」 프레임(2026-08-19 개정)에서 출발했다. 한 제품에만 맞는 예시와 값은 어느 제품에나 맞게 고쳐 적었다. 요지: "지켜야 할 것은 사실상 섹션 이름 하나뿐이고, 나머지는 CoUI 소비 규율입니다."

• 섹션 = 화면 하나. 이름은 순수 한글이고, 개발이 이 문자열을 @UseCase(name:) 에 그대로 복사한다. 공백까지 같아야 한다.
• 예: 페이지 020 store-스토어(번호 + 한글 라벨, 번호는 페이지에만) · 섹션 상품 상세(번호 없음 · 순수 한글 = UseCase name) · 프레임 Web-Empty(플랫폼-상태).
• 섹션 이름을 바꾸면 코드도 바꿔야 한다. 리네임은 개발에 알리고 한 번에 — 혼자 바꾸면 CI 가 실패한다.
• 금지 4종:
  • 버전 접미사 — 스토어 홈_v2 · 스토어 홈 최종. 버전은 Figma 버전 히스토리가 담당한다.
  • 상태 주석 — 상품 상세 (수정중). 매핑 표의 status 컬럼에 적는다.
  • 담당자·날짜 — 상품 상세_minji_0810. 매핑 표 컬럼에 적는다.
  • 이름 중복 — 서로 다른 두 화면이 같은 이름을 쓰지 않는다. 겹치면 한쪽에 구분어를 붙인다(예: 채팅과 계정에 「프로필 수정」이 둘이면 채팅 쪽을 「채팅 프로필 수정」으로).

• 섹션 안 프레임은 「플랫폼-상태」 형식. 어휘는 아래 표로 정해져 있고, 검사 스크립트는 첫 하이픈에서만 자른다 — 상태 이름에 하이픈이 들어가도 안전하다.

• 플랫폼(2종, 같은 섹션 안에 왼쪽 Mobile · 오른쪽 Web):

  플랫폼	기준 크기
  Mobile	390 × 844 — 앱 기본
  Tablet	그리지 않는다 — Widgetbook 뷰포트로 확인
  Web	1440 × 1024 — Web 에만 있는 화면(예: 데스크톱 전용 결제)은 Web 프레임만 둔다

• 상태:

  상태	용도
  Default	데이터 있는 기본 상태. 예외 없이 필수
  Loading · Empty · Error	코드가 이 4개를 강제한다
  추가 어휘 (공통)	Long(내용이 길 때) · Typing(입력 중) · Collapsed(접힌 상태) · NoPermission(권한 없음)
  추가 어휘 (제품 전용)	제품마다 정한다 — 정한 이름은 DDR 에 남긴다

• 태블릿은 Figma 프레임을 늘려서 확인하지 않는다 — 프레임은 그냥 늘어날 뿐, 실제 코드의 폭 클램프나 브레이크포인트 전환이 일어나지 않는다. 제품의 Widgetbook 웹판에서 우측 Addons 탭의 Viewport 를 바꾸면 진짜 코드가 렌더링된다.

• Web 프레임은 넓어질 때 레이아웃이 실제로 교체되는 화면(예: 로그인, 탭 셸 안의 주요 탭 화면)에만 필수이고, 폭만 제한되는 화면(예: 단계형 가입 폼)은 Mobile 프레임으로 충분하다.

• 코드는 이미 모든 화면에 4상태를 강제한다. 디자인에 Empty·Error 가 없으면 개발이 알아서 만들고 그게 디자인 부채가 된다. 목록에 없는 상태가 필요하면 제품 전용 어휘로 정해 DDR 에 남긴 뒤 쓴다. 여러 제품에서 되풀이되는 상태는 이 플러그인 저장소에 제안해 공통 어휘로 올린다. 다크모드와 언어는 상태로 만들지 않는다 — Figma 모드가 처리한다.

• 섹션 우클릭 → Copy/Paste as → Copy link to selection → 매핑 표의 figma_node 칸에 붙여넣기. 화면당 한 번이고, 이걸 해두면 이후 이름을 바꾸거나 섹션을 옮겨도 연결이 안 깨진다.

결합을 이름이 아니라 node ID 로 하기 때문에 다음이 전부 안전하다:

• 페이지 이름의 한글 라벨 변경 (020 store-스토어 의 하이픈 뒤 「스토어」는 자유)
• 섹션을 다른 페이지로 옮기기 (도메인 소속 변경에도 링크 유지)
• 파일 쪼개기 (도메인 몇 개를 별도 파일로 빼도 매핑 표의 키는 안 바뀐다)
• 캔버스 안에서 정리하기 (위치·정렬·간격 전부 자유)
• _flow · _explore · _archive 페이지는 대조 대상 밖 — 플로우 다이어그램·탐색안·비교안· 폐기한 시도는 전부 여기 두면 되고 아무 규칙도 적용되지 않는다. 등록하지 않은 것은 검사하지 않는다.

제품 파일은 CoUI 의 소비자다. 이게 안 지켜지면 CoUI 를 쓰는 의미가 사라진다:

1. 브랜드 테마와 컴포넌트 스타일을 정의한다 — 로컬 변수·컬렉션·텍스트/효과 스타일 생성과 세부 속성 override를 허용한다. 기본값은 상한이 아니다. 출처·revision·바인딩·코드 대응을 기록한다. 절차는 cc-designer:coui-product-style의 references/brand-theme-workflow.md다.
2. CoUI 컴포넌트를 detach 하지 않는다 — detach 하는 순간 CoUI 업데이트가 안 따라온다. 변형이 필요하면 CoUI 에 variant 를 요청한다.
3. CoUI 에 있는 걸 다시 만들지 않는다 — 그리기 전에 CoUI 에서 먼저 찾아본다.

판정 질문 하나 — 「이 제품이 아닌 다른 제품에서도 이게 필요한가?」 그렇다면 CoUI, 아니면 이 제품의 도메인 컴포넌트다.

• {domain}/{Component}(예: 제품 슬러그가 petcare 이면 petcare/VaccinationCard) — 이 제품 전용이지만 여러 화면에서 재사용되는 컴포넌트. 900 components 페이지에 둔다. 여기서 {domain} 은 제품 슬러그다 — 페이지 이름의 기능 도메인(store 등)이 아니다(consumption §4).
• promote/{Component}(예: promote/ImagePlaceholder) — CoUI 에 없는 범용 컴포넌트. 부채 표시이고 CoUI 승격 백로그로 간다.
• 컴포넌트로 만들지 않음 — 한 화면에서만 쓰이는 요소는 해당 프레임 안에 둔다.

2026-08-28 §5 추출 전의 폴백 초안은 아래 4곳에서 원본과 달랐고, 계약(원본 우선)대로 개정했다: