UI 총괄 사이트 관리
앞으로 UI 디자인 수정·신규 제작은 이 사이트에서 먼저 만들고, 사용자 승인 후 승인안을 기준으로 게임에 반영합니다. 기존 적용 이력과 새 시안의 승인 상태는 별도로 관리합니다.
UI 제작과 승인 순서
- 시안 제작: 디자인 수정과 신규 UI는 이 총괄 사이트에서 먼저 만듭니다. 실제 게임의 UI 자산과 상태를 사용하고 같은 UI는 하나의 정의로 관리합니다.
- 사용자 승인: 변경 화면을 확인한 사용자의 승인을 기록합니다. 자동 검사 통과나 과거 안의 승인은 새 수정안의 승인이 아닙니다.
- 게임 반영: 승인된 안을 기준으로 게임에 옮기고 실제 결과와 필요한 부분을 비교합니다. 반영 결과와 남은 차이를 기록합니다.
검토 상태는 ‘시안 검토 · 수정 필요 · 사용자 승인 · 게임 반영 완료’로 구분합니다. 새 수정안은 다시 검토 상태로 기록하세요. 사이트의 부품 위치를 편집하면 해당 UI와 연결 조합의 기록은 시안 검토로 돌아갑니다. 코드에서 시안을 바꾼 경우에도 관련 검토 기록을 갱신합니다. 승인된 시안의 PNG·검토 JSON과 게임 반영 결과를 보관합니다. HTML 편집이나 상태 선택은 게임을 자동 수정하지 않습니다. 프로젝트 정본은 개인파일/Docs/99_코덱스공통지침.md의 UI 총괄 사이트 절차입니다.
같은 UI는 한 번만 수정
각 UI는 native-registry.js의 고유 ID 하나로 등록합니다. proposal.js의 같은 정의를 개별 화면과 조합 화면이 함께 사용합니다. 창고나 인벤토리를 수정하기 위해 여러 스크린샷을 따로 고칠 필요가 없습니다.
에셋 사용 기준
버튼·프레임·슬롯·제목바에는 프로젝트의 기존 UI 에셋을 사용합니다. 원본 텍스처에 크기·색상·상태를 적용합니다. 임의 생성 이미지로 핵심 UI를 대체하지 않습니다. 작은 아이콘이나 배경 장식은 필요한 부분에 한해 생성할 수 있으나 이번 후속 작업에서는 새 이미지를 생성하지 않았습니다. 카드 앞면은 앞서 요청한 v2 파일을 유지합니다.
버튼 소재 출처 · 사용 정책 · 현재 원본 해시 확인
화면 확인 순서
- 개별 UI 또는 조합을 선택합니다. 기본 목록은 개선안이 있는 UI만 보여 줍니다.
- 상태에서 빈 목록·거래 실패·카드 뒷면 등 필요한 상태를 선택합니다.
- 보기에서 개선안, Unity 캡처, 레이어 재조립, 픽셀 차이, 독립 부품 위치 편집을 전환합니다.
- 버튼 상태에서 기본·호버·누름·포커스·비활성을 비교하거나 직접 조작합니다. 탭·수량·선택은 시안 동작이며 게임을 실행하지 않습니다.
- 현재 화면 PNG를 저장하고 검토 상태와 메모를 기록합니다. 기록은 이 브라우저에 보관되며 JSON으로 내보내고 가져올 수 있습니다.
부품과 위치 편집
‘독립 부품 · 위치 편집’에서 부품을 선택하면 원본 좌표, 색상, 글꼴, 이미지 경로를 볼 수 있습니다. 가로·세로 이동과 숨김은 HTML 시안에만 저장됩니다. ‘같은 버튼의 프레임·글자 함께 이동’으로 버튼 전체를 옮길 수 있습니다. 개별 UI의 저장값은 조합에도 적용됩니다. ‘이 UI 위치 복원’은 해당 UI의 저장된 위치 변경을 초기화합니다.
개선안에서 새로 배치한 버튼의 규격과 문구는 proposal.js의 해당 UI 정의에서 수정합니다. 원본 위치 편집은 이미 교체한 개선 버튼의 새 좌표를 바꾸는 기능이 아닙니다. 문구와 서체를 자유롭게 편집하는 전체 WYSIWYG 편집기는 아닙니다.
현재 검증 범위
| 항목 | 확인 내용 |
|---|---|
| 원본 기준 | 등록한 독립 부품은 원래 위치에서 RGB 재조립 검사를 통과한 기준입니다. 관리 표본과 실제 Play 캡처는 출처와 검증 범위를 별도로 기록합니다. 최신 등록 현황은 독립 부품 전수 대조와 UI별 실행 근거를 확인하세요. |
| 개선안 | 개별 UI와 조합이 같은 정의를 사용합니다. 상태별 등록은 native-registry.js가 관리하며 qa/proposal-structure-checks.json에 최신 검사 결과를 남깁니다. 개선안은 원본과 달라지는 의도된 변경입니다. |
| 검토 기록 | 실제 JSON 내보내기·가져오기·새로고침 유지와 원상복원 확인. |
| 실제 게임 대조 | 미완료. 추출 캡처 일치를 실제 플레이 전체 100% 일치로 해석하지 않습니다. |
| 디자인 확정 | 사용자의 검토 기록입니다. 자동 비교 PASS와 구분됩니다. |
독립 부품 전수 대조 · 초기 개별 상태 검사 · 초기 조합 검사 · 최신 구조 검사 · 가방·장비·창고 실제 기준
실행 중 변화와 출처
UI별 상태 ID와 실제 Play 확인 범위는 아래 비교 페이지에서 확인합니다. 원본 자산은 python tools/check-source-assets.py, 런타임 코드와 화면 표시는 이어서 python tools/check-runtime-sources.py로 갱신합니다. 파일 변경 표시는 재검토가 필요하다는 뜻이며 화면 변경을 단정하지 않습니다.
관리씬과 실제 게임의 차이에서 각 UI의 런타임 변경 경로를 확인합니다. 새 캡처는 당시 코드와 프리팹 해시를 기록합니다. python tools/check-runtime-sources.py를 실행하면 마지막 소스 검사 결과가 갱신됩니다. 기존 캡처의 기록 없음과 코드 변경을 구분하며 자동 감시는 아닙니다.
파일 구성
| native-registry.js / catalog.js | UI ID, 원본 경로, 상태, 조합과 요청된 변경 |
|---|---|
| parts-data.js / native-parts.js | 검증된 독립 Graphic과 원래 순서의 합성 |
| proposal.js | 기존 소재를 사용하는 공통 버튼과 UI별 개선 정의 |
| source/independent-calibrated/NN | Unity 캡처, 좌표·문구·색상 JSON과 독립 부품 원본 |
| assets/parts / assets/button-materials | 해시로 공유하는 렌더 부품과 기존 UI 소재 |
| workbench.js / workbench.css | 검토 화면, 부품 검사와 위치 편집, 기록 저장 |
| tools/ExportIndependentUi.cs / prepare_parts.py | 유휴 Editor에서 소유 복제본을 추출하고 재조립 비교 후 등록하는 도구 |
| qa/ 및 상태별 검증 페이지 | 검증 시점별 브라우저 시안과 수치. 최신 근거는 각 UI의 실행 근거 링크를 확인하고 이전 파일은 경과 기록으로 보존합니다. |
원본의 글자는 Unity에서 렌더한 Graphic을 보존합니다. 새 버튼 문구는 프로젝트 글꼴로 브라우저에서 렌더합니다. 원본 위치에서는 검증된 RGB를 재현하며 이동·크기 변경 후 Unity 렌더와의 일치는 추가 확인이 필요합니다. 과거 근사 CSS 파일이나 누적 차이 PNG를 현재 독립 부품 개선안의 기준으로 사용하지 않습니다.
실행과 보관
미리보기.ps1을 실행하면 localhost 서버와 외부 Chrome 창을 엽니다. 서버는 자동 종료 시간을 두지 않습니다. 다른 작업의 서버를 변경하지 않습니다. index.html과 JS/CSS, assets, source를 함께 보관하고 검토 JSON을 별도로 내보내세요. index.html을 더블클릭해도 개선안·부품 편집·픽셀 비교·PNG 내보내기가 동작하도록 로컬 자산을 함께 제공합니다. 폴더 전체를 보관하세요. 자산을 추가하거나 캡처를 갱신한 뒤에는 python tools/prepare-local.py를 실행해 로컬 자산 색인을 갱신합니다. HTTP와 파일 직접 열기는 검토 기록 저장소가 다를 수 있으므로 검토 JSON으로 옮기세요.
게임 적용 범위
승인된 개선안은 게임 코드와 프리팹에 반영했습니다. 창고 7탭은 기존 저장 데이터를 유지하며 확장합니다. 설정·HUD 메뉴·상인 접근 메뉴와 기존 의뢰 목록 카드는 유지했습니다. 이후 HTML 위치 편집이 게임을 자동 수정하지는 않습니다. 게임 적용 결과와 적용 파일 목록을 기준으로 다음 변경을 관리합니다. 컴파일 오류 0건, 자동 검사 20항목을 확인했으며 모든 실제 Play 화면의 픽셀 동일성 검증은 수행하지 않았습니다.