Figma 원본 이미지

reference/ 는 Figma 「Cocode Scaffold App v1.0」 페이지 49:5 의 화면 프레임 80개를 1배율로 내보낸 원본 PNG 다 (폰 390 35장 · 태블릿 1024 11장 · 데스크톱 1440 34장). 화면마다의 노드 id · 섹션 · 역할 · 기기 · 크기 · 캡션 · 원본 링크는 화면 대장 docs/product/figma-screens.json 에 있고, 대장의 image 가 이 폴더의 파일을 가리킨다. 구현 캡처와 견줄 기준 이미지다 — 구현 캡처로 덮어쓰지 않는다.

이 폴더와 대장은 scaffold-booking(7f28d21)의 docs/design/figma/ 와 같은 모양이다(#9). 달라진 것: 대장을 손으로 짓지 않고 읽기 전용 레시피 tool/design/figma/export_ledger.figma.js 가 읽은 값을 tool/design/figma/build_ledger.py 가 digest 로 검산하며 짓는다(아래 「대장 다시 만들기」).

내보낸 방법

• 2026-11-02 에 내보냈다(대장 exportedAt = 2026-11-02T05:40:40Z — 마지막 PNG 를 받은 시각).
• Figma MCP get_screenshot 에 maxDimension = 프레임의 긴 변, contentsOnly: true 를 주면 1배율 PNG 의 짧은 수명 URL 이 온다. 받자마자 curl -f -L 로 저장했다. 파일 이름은 대장 key + .png 다(예: MK-A7+MK-A3@1024.png).
• 이미지는 크기를 바꾸거나 고치지 않는다. 모든 PNG 가 프레임 크기 그대로다 — 세로로 긴 프레임(예: 390×1410)도 그 크기가 기준이다. 80장 모두 응답의 original_width/height 와 PNG IHDR 크기가 프레임 크기와 같다. Figma 렌더 그대로라 Figma 쪽 결함도 그대로 담긴다. 고칠 곳은 Figma 다.

대장의 insets · modes

• insets.top 은 상태 바(SystemBarPhone) 띠의 아래 끝, insets.bottom 은 홈 인디케이터(HomeIndicator) 띠의 높이다(논리 px, 없으면 0). 인스턴스 안(InputBar 등)에 든 것까지 찾는다. 앱이 그리지 않는 띠라 대조에서 가린다.
  • 폰 35장: 위 44 는 모두. 아래 34 는 31장이고, 홈 인디케이터가 없는 MK-08 · MK-09 · MK-11 · MK-S1 4장은 0. MK-15@390 은 홈 인디케이터가 InputBar 안에 있다(그 밖은 프레임 맨 아래).
  • 태블릿 11장은 모두 폰용 SystemBarPhone(44)을 1024 폭으로 쓴다. 고객 태블릿 4장(MK-01 · MK-03 · MK-12 · MK-05)만 홈 인디케이터(34)가 있고 관리자 태블릿 7장은 없다(0).
  • 데스크톱 34장은 0/0.
• modes.typography 는 CoUI 「Semantic/ Typography」, modes.color 는 앱 색 확장 컬렉션 (「Semantic/ Color · CoUI → Orange (…)」 — 앱 색 컬렉션 「Semantic/ Color · Orange」를 CoUI 변수에 덮어쓴 것)의 모드 이름이다. 프레임의 explicitVariableModes 를 읽고, 프레임에 없으면 resolvedVariableModes(상속 · 컬렉션 기본값)를 적었다 — 80장 모두 색 모드 Light 가 프레임에 명시돼 있고, 1024 11장 + 1440 34장 = 45장은 글자 모드 Desktop 도 명시돼 있다. 390 35장은 글자 모드를 명시하지 않아 기본 모드 Mobile 이다.

대장 다시 만들기

Figma 가 바뀌었을 때(화면이 늘거나 캡션 · 띠가 바뀜) 다시 읽는다. 앱마다 바꾸는 값은 레시피 머리의 두 줄(페이지 id · 코드 접두사)뿐이다.

1. tool/design/figma/export_ledger.figma.js 를 Figma MCP use_figma 에 그대로 넣어 돌린다(읽기 전용). 반환 {digest, notesDigest, count, rows, notes} 를 파일(예: /tmp/ledger-export.json)로 옮겨 적는다.
2. 프레임 목록({fileKey, page, frames:[{nodeId,name,keys,device,width,height,section}]})을 준비한다 — get_metadata 의 페이지 XML 에서 Caption 프레임을 뺀 것.
3. python3 tool/design/figma/build_ledger.py --frames <프레임 목록> --export /tmp/ledger-export.json --prefix MK — 옮겨 적기를 digest 로 검산하고 프레임 목록과 이름 · 크기를 대조해 대장을 쓴다.

한 화면 다시 내보내기

1. 대장에서 그 화면의 node · width · height 를 확인한다.
2. get_screenshot(fileKey 6yq0C3oSVVR2HdaOe807eB, nodeId = node, maxDimension = 긴 변, contentsOnly: true)으로 받은 URL 을 바로 curl -f -L -o docs/design/figma/reference/<key>.png "<url>" 로 저장한다(URL 은 곧 만료된다 — 어디에도 적지 않는다).
3. 프레임 크기 · 캡션 · 상태 바 · 홈 인디케이터가 바뀌었으면 대장의 해당 필드도 고치고, exportedAt 을 내보낸 시각(UTC)으로 바꾼다.
4. 확인: dart tool/design/check_figma_screens.dart — 필드 · key · PNG IHDR 크기 · 기기 폭과, 대장이 가리키지 않는 PNG 를 본다. 계약 게이트 tool/gates/check_all.sh 도 이 검사를 부른다.

Figma 쪽에서 본 것 (Figma 는 고치지 않았다)

• 페이지 머리말의 「손님 7장 + 관리자 2장」은 지금 화면 수(손님 15 · 관리자 17 · 시작 3)와 다르다(원문 그대로 대장 notes 에 있다).
• 관리자 태블릿 7장의 resolved 모드에 다른 CoUI 컬렉션 「1-2. Semantic/ Typography」(Desktop)도 보인다 — 일부 컴포넌트가 그 컬렉션에 묶인 듯하다(추측).
• scrim 사각형 6개(MK-14@390 · MK-14@1440 · MK-A9@390 · MK-A9@1024 · MK-A9@1440 · MK-A3@1440)는 레이어 불투명도 0.32 에 채움 불투명도 0.6 이 곱해져 실효 0.192 다. CoUI 는 같은 검정에 0.6(CoreOpacity.scrim)을 쓴다 — scaffold-booking 의 오너 결정(11-02)은 「Figma scrim 레이어 불투명도를 0.6 으로」였다.
• 앱 색 확장 컬렉션은 CoUI 라이브러리 변수 149개 중 49개만 앱 색으로 덮는다(나머지 100개는 라이브러리 값). 그 100개 가운데 앱 컬렉션에도 같은 이름이 있는데 값이 다른 것이 22개다(tertiary 계열 · *-fixed · primary-text-large · accent 등) — docs/design/figma/tokens/brand-colors.json 의 couiExtension.notOverriddenDiffering.