Appearance
React 공동 디자인 작업실 — 구현·검증 상태
기준일: 2026-09-11, 코드 기준: 7325c72. 이 문서는 구현 설명과 당시 확인된 증거를 구분한다. 테스트 수·AWS 상태·모델 실행·UI 확인은 날짜가 있는 과거 기록이며 현재 배포의 통과를 보증하지 않는다. 요구사항은 루트 SPEC.md §7-1, 과거 검증 기록은 §16을 따른다. 최종 산출물은 실제 React 프로젝트와 그 소스에서 빌드·검증한 정적 번들이다. 파일 반입과 HTML 원본 검사는 입력·참고 검증 기능으로 유지한다.
현재 상태
아래 표는 2026-09-11에 보고된 검증 상태다. 이후 코드·PR HEAD·운영 환경은 별도 검증한다.
| 항목 | 확인된 사실 | 아직 완료로 표시하지 않는 범위 |
|---|---|---|
| 자동 검증 | 최신 통합 점검에서 Python 784개·UI 41개 통과, 컨테이너의 실제 React 빌드·브라우저 경로 통과 | 새 라이브 모델과 최종 게시 UI의 전체 동작 검증을 대신하지 않음 |
| 운영 배포 | AWS UPDATE_COMPLETE, 새 프런트엔드 게시·확인 완료 | 고객 금융망 시스템 배포나 실제 금융 API 연결을 뜻하지 않음 |
| 공동 상품 지침 | 라이브 프로젝트·상품 게시 지침과 저장된 온톨로지 노드 7개·관계 8개 조회 확인 | 한 합성 자료의 결과이며 모든 상품의 고정 수치나 화면 검수 결과가 아님 |
| 파일 반입 | 라이브 HTML·CSS·SVG·PNG·JPG 5종 반입·인증 다운로드·원본 해시 일치 | FIG 해석이나 모든 형식의 업무 의미 추출을 입증하지 않음 |
| 라이브 React 모델 | Astra guided 기준안+변형 2개, Fable creative 1개가 모두 2라운드 통과. 실제 React 타입·빌드·접근성·동작 5개 규칙과 필수 온톨로지 안내 Screen 확인 | 승인한 5개 규칙의 검증이며 실제 금융 API·모든 업무 분기의 검증이 아님 |
| 같은 기준의 수정 | 첫 기준안의 정적 pageId 정책 실패 후 같은 기준으로 소스를 수정해 통과 | 실패를 통과로 바꾸거나 테스트 기준을 완화한 결과가 아님 |
| 모델 실행의 이미지 비교 | 원본 이미지 기준을 지정하지 않아 visual: not-run | Figma·원본 디자인 픽셀 일치로 표시하지 않음 |
| 실제 승인·AWS 릴리스 | 선택한 Astra 기준안·Fable 시안의 실제 트랜잭션 승인 후 AI 호출 없는 같은 소스 재빌드·실제 브라우저·승인 화면 대비 2% 비교 통과 | 승인 화면의 유지 검사이며 Figma 원본과의 픽셀 일치나 모든 상태의 시각 검증이 아님 |
| 릴리스 아카이브 | 두 릴리스의 source/dist ZIP을 비공개 S3에 저장하고 인증 다운로드 해시 일치 확인 | 고객 서비스에 공개 배포한 결과가 아님 |
| 사용자 화면 | 게시된 운영 UI에서 공동 프로젝트·상품, Astra/Fable 미리보기의 값 전달, 릴리스 근거·다운로드 상태와 FHD/QHD/WQHD 확인. 페이지 오류 없음 | 관리자 계정의 합성 자료 확인이며 고객 사용자 대상 사용성 실험은 아님 |
| 독립 검토 | 승인 경쟁 상태와 Git 커밋 기록 유실의 Major 2건 수정·독립 재현 확인으로 종료 | 최종 PR head 검토와 모든 운영 조건의 무결점을 뜻하지 않음 |
| 공개 소스 권한 | 플랫폼 소스의 공개 PR 게시 권한 승인됨 | 고객 산출물의 공개 권한과 최종 PR head 검토는 별도 |
검증한 비공개 릴리스 아카이브의 다운로드 크기:
| 릴리스 | React 소스 ZIP | dist ZIP | 다운로드 확인 |
|---|---|---|---|
| Astra guided 기준안 | 34,540 B | 53,101 B | 저장 해시 일치 |
| Fable creative | 36,664 B | 54,049 B | 저장 해시 일치 |
프런트엔드를 운영에 게시했으며, 실제 인증 API로 공동 프로젝트·Astra/Fable React 미리보기·릴리스 다운로드 상태와 FHD/QHD/WQHD 배치를 확인했다.
실제 React 구현
platform/react-kit의 @studio/approved-ui는 설명 메타데이터나 화면 모사 스텁이 아니라 실제 React 코드다. 현재 Screen, Stack, Grid, Inline, Panel, Text, Button, Input, Checkbox, Select, RadioGroup, Alert, Stepper, Summary, AssetImage 15종을 제공한다. 타입·토큰·소스 해시를 기준으로 사용을 검사한다.
고객의 사내 React 패키지는 아직 제공되지 않아 플랫폼 기본 React 컴포넌트로 표시한다. MD·CSS·이미지·반입 HTML은 설명과 참고 자료이며 컴포넌트 구현을 대신하지 않는다. 생성 모델은 허용된 화면 구성·상태 로직만 작성하고, 컴포넌트 코드·빌드 설정·의존성·테스트 기준을 바꾸지 않는다.
실행 경로는 다음과 같다.
- 개인 또는 프로젝트의 입력, 승인된 규칙, 컴포넌트 코드와 게시 지침의 버전·해시를 고정한다.
- 허용된 Bedrock 경로로 React 화면 소스를 생성한다.
- 코드 사용 규칙, 실제 React 타입, production build를 검사한다.
- 데이터 자격 증명이 없는 격리 실행기에서 그 번들을 렌더링해 실제 동작·접근성·외부 요청·오류를 검사한다.
- 실패하면 같은 기준으로 화면 소스만 수정한다. 미판정·실패는 승인이 아니다.
- 사람이 정확한 라운드의 소스·번들·규칙·보고서를 확인해 승인한다.
- 릴리스는 AI 재생성 없이 같은 승인 소스를 다시 빌드·검증하고 동일 소스·번들을 확인한다.
원본 HTML 검사 결과와 기존 정적 Studio 점수는 이 React 빌드·릴리스 검증으로 자동 승격하지 않는다.
공동 기획·디자인·개발
프로젝트의 현재 참여자와 역할을 매 요청에서 확인한다. 개인 파일은 자동 공유하지 않으며, 행동한 사용자와 프로젝트의 저장 범위를 구분해 감사 기록을 남긴다.
| 역할 | 공통 조회·업로드·의견 외의 권한 |
|---|---|
관리자(owner) | 프로젝트 참여자 관리와 모든 프로젝트 작업 |
| 기획 | 상품 초안·지침 게시, 검증 규칙 편집·승인 |
| 디자인 | 규칙 편집·승인, 시안 생성·수정·UX 승인, 릴리스 준비 |
| 개발 | 이미 승인된 소스의 릴리스 준비·Git 내보내기 |
상품 초안 저장과 지침 게시를 분리한다. 게시하면 불변 원문, 비공개 가이드 자산과 Product·Condition·PolicyRule·Procedure·ScreenMeta 노드·관계의 JSON을 저장한다. 생성은 저장된 프로젝트 온톨로지를 읽으며, 화면에만 만든 임시 그래프를 영구 저장이나 Neptune 연동으로 표시하지 않는다.
사이드바의 기획·지침 / 의견 / 개발·내보내기는 선택한 상품·페이지·라운드와 연결된다. 새 지침을 게시하면 관련 시안이 재검증 대상이 된다. 과거 승인·논의·원본은 역사적 사실로 남는다.
생성·비교·승인의 의미
| 상태 | 의미 |
|---|---|
| 새 UX | 같은 필수 지침 안에서 시안 1개 생성 |
| 가이드 준수 비교 | 기준안 1개와 변형 2~5개, 총 3~6개. 각 안의 실패·수정 이력은 독립 |
| 동작 통과 | 실제 브라우저가 승인된 필수 조작·값·상태·안내문을 확인 |
| 시작 화면 비교 | 선택한 기준 이미지와 같은 화면 크기의 시작 상태를 비교. 기준 미선택은 미수행 |
| 변형 수용 | 디자이너가 허용된 배치·강조 차이를 확인. 픽셀 일치 통과와 별개 |
| 시안 승인 | 해당 라운드의 소스·번들·기준·검수 기록에 대한 사람의 승인 |
| 릴리스 통과 | 승인 소스 재빌드와 동작 재검증, 승인한 시작 화면과 차이 2% 이내 확인 |
릴리스의 2% 비교 대상은 디자이너가 승인한 화면이다. 이를 원본 디자인 전체의 일치율이나 모든 전이 상태의 검증으로 설명하지 않는다. 실제 금융 인증·거래 API는 제공된 테스트 범위 밖이며, 합성·모의 상태의 테스트를 실거래 검증으로 표시하지 않는다.
비공개 전달과 Git
릴리스는 비공개 S3에 React 소스 ZIP, dist ZIP, 정적 site 파일, manifest와 검수 보고서를 보관한다. 배포 가능한 파일이 준비되어도 공개 웹 버킷이나 고객 서비스에 자동 게시하지 않는다.
GitHub·GitLab은 등록된 대상 설정·비밀 참조와 주입 가능한 전송기를 사용하는 어댑터로 구현했다. 당시 실제 로컬 bare 저장소 테스트로 기능 브랜치, 파일 내용, 소스 해시, 중복 요청, 충돌, 허용 경로 밖 쓰기 거부를 확인했다. 원격 공급자 경로는 주입된 전송기 테스트를 사용했으며, 당시 고객 원격 Git 저장소는 미설정·미검증이었다. 현재 설정은 별도 확인한다. 대상이 없으면 소스 다운로드만 제공하고 원격 커밋 URL이나 성공 상태를 만들지 않는다.
실제로 완료된 커밋의 SHA는 이후 최신 기준 확인에 실패해도 보존한다. 기준 변경과 일시적인 확인 불가를 구분하며, 확인 불가를 최신 기준 통과로 표시하지 않는다.
독립 검토에서 종료한 승인·기록 문제
- 개인·공동 작업 모두 시안 승인과 관련 규칙 버전 확인을 하나의 트랜잭션으로 처리한다. 규칙이 동시에 수정되는 재현은 HTTP 409로 종료하며 잘못된 승인을 남기지 않는다.
- Git 어댑터가 반환한 검증된 커밋 기록을 먼저 저장한 뒤 최신 기준을 확인한다. 이후 읽기 오류가 발생하는 재현에서도 완료 상태와 SHA를 보존하고 기준 확인 불가를 명시한다.
두 수정은 독립 검토에서 재현을 다시 실행해 종료했다. 최종 PR의 변경 집합 검토는 별도로 남는다.
제공·검증 범위 밖
- 고객이 지정한 React 패키지의 버전·코드·토큰과 연결한 검증: 패키지 미제공.
- 고객 Git 대상의 실제 권한·네트워크·기능 브랜치 쓰기: 대상 미설정.
- FIG 내부 화면 해석, 임의 ZIP 패키지의 완전한 파싱, 기존 갤러리·초안의 자동 일괄 이관: 완료 주장 없음.
- 실제 금융 API·인증·거래·고객 운영 환경의 검증: 제공된 테스트 범위 밖.
스테이징 화면 통과를 게시 완료로 기록하지 않으며, 플랫폼 소스 공개 권한을 고객 산출물 공개 권한으로 사용하지 않는다. 실행 순서는 디자이너 작업실 사용법, 입력 범위는 파일 반입, 구현 이력은 docs/superpowers/plans/2026-09-11-react-design-workspace.md에 있다. 역사적 계획을 현행 미구현 목록이나 모든 제품의 필수 요건으로 적용하지 않는다.
구현 근거는 platform/workspace/criteria.py, react_generation.py, react_quality.py, http.py, releases.py, git_service.py와 platform/react-kit/다. 원본 갤러리·정적 HTML 검수·React 릴리스의 승인 계약은 서로 다르다.