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

cc-blueprint 의 모든 Figma 저작(/cc-blueprint:design)과 검증(design-self-check, /cc-blueprint:sync)이 따르는 단일 규칙 문서다. 여기 없는 판단은 cc-designer:design-decision 프로토콜로 확정하고 DDR 로 남긴다 — 사람에게 되묻지 않는다.

추출원 (provenance)#

§1. 파일·페이지 구조#

• 제품 화면은 매핑 표(화면 레지스트리)에 등재된 섹션만이 정본이다. 레지스트리는 리포가 원본, Figma 는 미러다 — 대응 계약의 SoT 는 cc-flutter:figma-widgetbook-alignment 이며 여기서 재정의하지 않는다.
• 3단 대응(인용): Figma Project / Page / Section ↔ 코드 [Surface] / Feature / UseCase. 섹션 이름 == @UseCase(name:), designLink == 섹션 node URL(§5 R3 의 매핑 표 figma_node).
• 상태와 플랫폼은 계층이 아니라 축이다 — 섹션 안의 프레임으로 두고, 계층 이름에 섞지 않는다.
• _flow · _explore · _archive 페이지는 대조 대상 밖이다(§5 R4) — 어떤 규칙도 적용하지 않고, 어떤 검사도 하지 않는다.

§2. 네이밍 (§5 R1·R2 의 요약 — 정본은 §5)#

• 플랫폼은 Mobile(390×844) · Web(1440×1024) 2종. Tablet 프레임은 그리지 않는다 — Widgetbook 뷰포트로 확인한다(§5 R2). 같은 섹션 안 배치는 왼쪽 Mobile · 오른쪽 Web.
• 상태 어휘: Default(예외 없이 필수) · Loading · Empty · Error(코드가 이 4개를 강제) + 추가 어휘 Long · NoCover · NoBalance · Typing · Collapsed · Instructor · NoPermission. 목록에 없는 상태는 이 문서(§5 R2)에 추가한 뒤 쓴다. 다크모드·언어는 상태가 아니다 — Figma 모드가 처리한다.
• 섹션 이름 금지 4종(§5 R1): 버전 접미사 · 상태 주석 · 담당자/날짜 · 파일 내 이름 중복.

§3. 컴포넌트 사용 원칙#

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

§4. 검증 등급 (self-check 판정)#

Default 부재만은 사유로 못 넘긴다 — 정본이 「예외 없이 필수」로 못박았다. Loading·Empty· Error 부재는 "개발이 알아서 만들고 그게 디자인 부채가 된다"(§5 R2) — L1 사유 기록은 곧 부채 등록이며, /cc-blueprint:sync 가 이 부채를 3분류 목록에서 추적한다.

§5. 디자이너 원본 규칙 (전사 — 정본)#

출처: Unibook App v2.0 46-11 「작업 규칙」 프레임, 2026-08-19 개정(플랫폼 어휘). 원문 요지: "지켜야 할 것은 사실상 섹션 이름 하나뿐이고, 나머지는 CoUI 소비 규율입니다. 구조·사이트맵은 Overview 페이지의 「서비스 구조 개요」 보드를 보세요."

R1. 섹션 이름 — 유일한 계약#

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

R2. 프레임 이름 어휘#

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

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

  플랫폼	기준 크기
  Mobile	390 × 844 — 앱 기본
  Tablet	그리지 않는다 — Widgetbook 뷰포트로 확인
  Web	1440 × 1024 — 「결제(데스크톱)」·「데스크톱 앱 안내」는 Web 전용

• 상태:

  상태	용도
  Default	데이터 있는 기본 상태. 예외 없이 필수
  Loading · Empty · Error	코드가 이 4개를 강제한다
  추가 어휘	Long · NoCover · NoBalance · Typing · Collapsed · Instructor · NoPermission

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

• Web 프레임은 넓어질 때 레이아웃이 실제로 교체되는 화면(로그인, 탭 셸 안의 스토어·내 서재·MY)에만 필수이고, 폭만 제한되는 화면(가입 5단계 등)은 Mobile 프레임으로 충분하다.

• 코드는 이미 모든 화면에 4상태를 강제한다. 디자인에 Empty·Error 가 없으면 개발이 알아서 만들고 그게 디자인 부채가 된다. 목록에 없는 상태가 필요하면 문서에 추가한 뒤 쓴다. 다크모드와 언어는 상태로 만들지 않는다 — Figma 모드가 처리한다.

R3. 화면당 한 번 — node ID 등록#

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

R4. 자유롭게 해도 되는 것#

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

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

R5. CoUI 규율 — 세 가지 금지#

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

1. 로컬 변수(토큰)를 만들지 않는다 — 색·간격·타이포는 전부 CoUI 변수를 바인딩한다.
2. CoUI 컴포넌트를 detach 하지 않는다 — detach 하는 순간 CoUI 업데이트가 안 따라온다. 변형이 필요하면 CoUI 에 variant 를 요청한다.
3. CoUI 에 있는 걸 다시 만들지 않는다 — 그리기 전에 CoUI 에서 먼저 찾아본다.

판정 질문 하나 — 「교재 전자책이 아닌 제품에서도 이게 필요한가?」 그렇다면 CoUI, 아니면 Unibook 도메인 컴포넌트다. 앱은 스토어 홈(배너·캐러셀·카드·칩)과 뷰어 셸에서 컴포넌트 수요가 가장 많이 나온다.

• unibook/ViewerToolbar — Unibook 전용이지만 여러 화면에서 재사용되는 컴포넌트. 900 components 페이지에 둔다.
• promote/BookCard — CoUI 에 없는 범용 컴포넌트. 부채 표시이고 CoUI 승격 백로그로 간다.
• 컴포넌트로 만들지 않음 — 한 화면에서만 쓰이는 요소는 해당 프레임 안에 둔다.

개정 이력 — 폴백 초안과의 충돌 해소 (DDR)#

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