Figma 원본 이미지

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

이 폴더와 대장은 scaffold-booking(7f28d21)의 docs/design/figma/ 와 같은 모양이고, 도구는 scaffold-shop 이 일반화한 판을 쓴다. 달라진 것: 대장을 손으로 짓지 않고 읽기 전용 레시피 tool/design/figma/export_ledger.figma.js 가 읽은 값을 tool/design/figma/build_ledger.py 가 digest 로 검산하며 짓는다(아래 「대장 다시 만들기」). 이 앱만의 것: 화면 코드가 숫자뿐이라(HP-01…HP-24) 역할을 roles.json 이 정한다(아래 「역할」).

내보낸 방법

2026-11-02 에 내보냈다(대장 exportedAt = 2026-11-02T07:24:14Z — 마지막 PNG 를 받은 시각).
Figma MCP get_screenshot 에 maxDimension = 프레임의 긴 변, contentsOnly: true 를 주면 1배율 PNG 의 짧은 수명 URL 이 온다. 받자마자 curl -f -L 로 저장했다. 파일 이름은 대장 key + .png 다(예: HP-01@1440.png). 이 앱은 프레임 하나에 코드가 하나라 + 로 이은 합본 이름은 없다.
이미지는 크기를 바꾸거나 고치지 않는다. 모든 PNG 가 프레임 크기 그대로다 — 세로로 긴 프레임도 그 크기가 기준이다. 폰 24장 가운데 9장이 844 가 아니다(HP-13@390 839 · HP-14@390 1409 · HP-15@390 935 · HP-17@390 1023 · HP-18@390 853 · HP-19@390 1034 · HP-20@390 967 · HP-21@390 1271 · HP-22@390 966). 56장 모두 응답의 original_width/height 와 PNG IHDR 크기가 프레임 크기와 같다. Figma 렌더 그대로라 Figma 쪽 결함도 그대로 담긴다. 고칠 곳은 Figma 다.

대장의 `insets` · `modes`

insets.top 은 상태 바(SystemBarPhone) 띠의 아래 끝, insets.bottom 은 홈 인디케이터(HomeIndicator) 띠의 높이다(논리 px, 없으면 0). 인스턴스 안에 든 것까지 찾는다. 앱이 그리지 않는 띠라 대조에서 가린다.
- 폰 24장: 위 44 · 아래 34 — 24장 모두 홈 인디케이터가 있다.
- 태블릿 8장은 모두 폰용 SystemBarPhone(44)을 1024 폭으로 쓰고 홈 인디케이터는 없다(아래 0).
- 데스크톱 24장은 0/0.
modes.typography 는 CoUI 「Semantic/ Typography」, modes.color 는 앱 색 확장 컬렉션 (「Semantic/ Color · CoUI → Green (…)」 — 앱 색 컬렉션 「Semantic/ Color · Green」을 CoUI 변수에 덮어쓴 것)의 모드 이름이다. 프레임의 explicitVariableModes 를 읽고, 프레임에 없으면 resolvedVariableModes(상속 · 컬렉션 기본값)를 적었다 — 56장 모두 색 모드 Light 가 프레임에 명시돼 있고, 1024 8장 + 1440 24장 = 32장은 글자 모드 Desktop 도 명시돼 있다. 390 24장은 글자 모드를 명시하지 않아 기본 모드 Mobile 이다.

역할 (`role`)

대장의 role 은 「누가 쓰는 화면인가」다. 다른 앱은 화면 코드의 접두 글자(-A 관리자 · -S 시작 · 그 밖 손님)가 정하지만, 이 앱의 코드는 모두 숫자뿐이라 roles.json 이 정한다 — 이 파일이 있으면 build_ledger.py(--roles)와 tool/design/check_figma_screens.dart 가 같이 읽는다(없으면 옛 규칙 그대로). -A/-S 글자가 붙은 코드는 파일이 있어도 글자가 이긴다.

role	코드	프레임	뜻
`start`	HP-01	2	로그인
`staff`	HP-02–12 · 16–18 · 24	35	직원이 업무에 쓰는 화면(접수 · 예약 · 환자 · 차트 · 수납 · 통계 · 알림 · 설정 · 버그 · 개선 게시판)
`admin`	HP-13–15 · 19–23	19	원장 · 관리자 권한(약관 · 정책 편집, 버그 · 개선 관리 → AI 작업 → 병합)

근거와 앱/콘솔 소속은 docs/product/surface-split.md 에 있다.

대장 다시 만들기

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

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

이 대장의 값: rows digest 260669d4 · notes digest 26f6b8ab · 56개.

한 화면 다시 내보내기

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

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

환자 정보가 나오는 화면이다 — 대장 · 노트 · 데모 데이터의 인물 이름 · 차트 번호 · 연락처는 모두 Figma 샘플의 가상 값이고, 목데이터는 co_faker 가상 인물만 쓴다(실제 개인정보 · 진료 기록 금지).
스플래시(S1) 프레임이 없다. 로그인(HP-01)이 첫 화면이다. 대조 도구의 파일럿도 HP-01@390 으로 했다.
scrim 사각형 5개(HP-09@390 · HP-09@1024 · HP-09@1440 · HP-17@390 · HP-17@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개 가운데 앱 컬렉션에도 같은 이름이 있는데 값이 다른 것이 20개다(tertiary 계열 · *-fixed · primary-text-large · accent · success/opacity/10 등) — docs/design/figma/tokens/brand-colors.json 의 couiExtension.notOverriddenDiffering.
태블릿 8장이 폰용 상태 바(44)를 쓴다.
설정 메뉴가 프레임마다 다르다(HP-24 와 HP-13) · 폰에 설정으로 가는 입구가 없다 등 이 앱만의 확인 거리는 surface-split.md 「디자이너 확인」에 모았다.