# 권위 데이터와 화면 표시가 어긋나지 않게 만든 방법
## 한줄 요약
저는 화면을 별도 진실 저장소로 만들지 않고 권위 데이터의 검증된 투영으로 제한하면서, 사용자가 닫고 다시 열 수 있는 UI 상태도 같은 안전 판정에 묶었습니다.
## 바쁘시면 이것만 보세요
화면의 READY 라벨이나 활성 버튼은 승인을 만들 수 없습니다. 권위 데이터에서 검증·조회·상세·행동까지 같은 경로를 재사용하고, revision이 바뀌면 오래된 사람 요약을 무효화합니다. 장식 패널을 닫을 때는 시각적으로만 가리지 말고 `inert`와 접근성 상태를 동기화하되 복구 버튼은 밖에 둡니다.
> 기존 근거 연결형 대시보드와 registry projection 설명은 반복하지 않고, 오래된 revision의 사람 요약을 무효화하는 규칙과 닫힘·오류 상태에서 `inert`를 함께 유지하는 UI 경계만 다룹니다.
## 이런 분께 추천합니다
- registry와 정적 화면의 상태가 따로 놀아 잘못된 버튼이 활성화되는 분
- 장식용 문·패널을 닫았는데 키보드로 내부가 계속 작동하는 문제를 겪는 분
- 새 상태 관리 라이브러리 없이 기존 UI의 안전성을 높이고 싶은 분
## 제작 배경
데이터를 보기 좋게 가공한 JSON이나 화면은 쉽게 두 번째 권위가 됩니다. 표시용 필드가 오래되거나 상세 응답의 ID가 목록과 다르거나, `status === READY` 하나만 보고 행동을 허용하면 원본의 승인 조건을 우회할 수 있습니다. 한편 장식용 문을 추가한 화면에서는 문이 닫혀도 내부 버튼이 포커스를 받고, 로딩 실패 뒤 다시 열기가 잠금을 풀어 버리는 문제가 생길 수 있었습니다. 저는 데이터 투영과 UI 토글을 별개 기능이 아니라 같은 상태 경계로 다뤄야 한다고 봤습니다.
## 어떤 스킬인가
첫 스킬은 권위 registry부터 화면까지 식별자·revision·승인 불변식을 지킵니다. projection은 원본보다 높은 권한을 가질 수 없습니다. 둘째는 기존 DOM·CSS·로딩 판정을 재사용해 class, 라벨, `aria-expanded`, `inert`를 한 handler에서 동기화합니다.
## 어떻게 만들었나
validator, 목록, 상세, 승인, 소비자 경로를 끝까지 추적했습니다. ID 불일치는 merge 전에 막고 revision 변경 시 사람 요약을 미검토로 돌렸습니다. projection은 임시 바이트를 검증한 뒤 교체했습니다. 토글은 닫힐 영역 밖에 두고 데이터 없음·오류·닫힘을 한 잠금 판정에 묶었습니다.
## 어떻게 사용하는가
권위 파일과 validator를 지정하고 원본 승인 계산으로 허용 필드만 투영합니다. 행동은 leaf가 아니라 검증된 부모 dataset과 ID를 다시 해석합니다. 닫기·열기 때 class, 라벨, 접근성, 잠금을 함께 갱신하고 오류면 `inert`를 유지합니다. 모바일에도 복구 버튼을 남깁니다.
## 검증과 시행착오
가짜 READY, 잘못된 관계, ID 불일치, 오래된 revision으로 fail-closed를 확인했습니다. 화면은 스크린샷 대신 실제 focus 수와 `inert`를 검사했습니다. 정상 로드 뒤 새로고침 실패, 닫기, 열기에서도 오류 잠금이 남는지 봤고 긴 장식은 DOM 위치와 hit-test를 함께 확인했습니다.
## 효과 / Before-After
**Before:** 화면에 복사된 상태가 원본 승인처럼 보였고, 장식의 시각 상태와 실제 상호작용 가능 상태가 달랐습니다.
**After:** 화면은 검증된 snapshot을 표시하고, 행동 직전에도 권위 조건을 다시 확인합니다. 닫힘·열림·오류·로딩 상태가 접근성 속성과 함께 움직입니다. 이 구조는 우회 가능성을 줄이지만 데이터의 내용이 옳거나 사람이 승인했다는 사실 자체를 만들어 주지는 않습니다.
## 한계와 중단 조건
권위 validator나 승인 규칙이 없으면 화면부터 만들지 않습니다. revision 변경 뒤 근거 없는 요약은 버립니다. 토글이 업무 상태를 바꾸면 이 스킬 범위가 아니며, 복구 control을 보장할 수 없으면 닫힘 기능을 중단합니다.
## 다른 업무에 적용하는 법
승인 대시보드, 읽기 전용 카탈로그, 감사 뷰어, 운영 상태판에 적용할 수 있습니다. 원본-투영-행동의 신뢰 방향을 한쪽으로 유지하고, UI 상태는 native 접근성 속성과 공통 잠금 판정에 연결하면 됩니다.
## 재사용 체크리스트
- [ ] 권위 원본과 projection의 역할이 분리됐는가
- [ ] 목록·상세·행동의 ID와 revision이 결합됐는가
- [ ] READY 전체 불변식을 행동 경계에서 재검증하는가
- [ ] 토글이 닫힐 영역 밖에 있는가
- [ ] class·라벨·aria-expanded·inert가 동기화되는가
- [ ] 오류·모바일·키보드·실제 hit-test를 확인했는가
