13 KiB
HMDesign AI 화면 생성 지침 개선 및 재검증 — 2026-10-10
RESULT: PARTIAL. 기준 HEAD는 48ca1d22de0a4eca5af2084676fd6739e7223912, 시작 Working Tree는 clean, 범위는 지침·사용 설명·Guard다. Component/API/Theme/Token/운영 화면은 보존했다. GitHub main 일반 push 결과 SHA와 상세 증거는 독립 실험의 REPORT.txt에 기록한다. 공식 Gitea는 접근·수정하지 않았다.
자료 확인 및 비교 가능성
사용자가 확인한 원본은 <USER_HOME>\.codex\visualizations\2026\10\10\01a12479-1eac-7691-8044-de2330b7bfef\HMDesign-AI-Generation-Test다. REPORT, experiment/rubric/results/findings, 10개 requirements·React 소스·initial·generation log·Guard·스크린샷을 확인했다. 원본 증거·소스 570개 SHA256 변화는 0개다(node_modules와 baseline 저장소 스냅샷은 인벤토리에서 제외).
새 자료는 D:\디자인시스템\HMDesign-AI-Generation-Test\retest-20261010에 보존한다. requirements 10개와 rubric은 원본과 byte 일치, Seed는 실제 기록 20261010, 선택 알고리즘은 LCG(1664525,1013904223)+Fisher-Yates다. Viewport는 390/768/1280/1440 × 900이다. 동일 로컬 Windows/Node 20.20.1, React 19.3.0/Vite 8.3.0, 기존 의존성 복사와 같은 Chrome 실행 경로/Playwright 측정 함수를 사용했다. 원본의 정확한 브라우저 build ID는 NOT VERIFIED이며 서버 포트·새 파일 위치는 다르다.
NON-COMPARABLE: 원본의 정확한 serving model ID와 reasoning 설정이 노출되지 않았다. 주 실험은 상속한 Codex 모델로 실행했으나 동일 모델·추론 수준을 입증할 수 없다. Seed는 화면 선택 Seed이며 모델 생성의 난수 Seed가 아니다. 점수 차이는 관측값이며 지침만의 인과적 효과가 아니다. 원본 코드·점수는 새 생성 에이전트에 전달하지 않았고 각 작업은 fork_turns=none으로 독립 요구사항과 고정 reference만 받았다. 공유 파일시스템에서 접근 지시와 로그로 분리했으며 OS 수준 격리는 아니다. 평가자는 생성 소스를 수정하지 않았다.
원인 및 최소 변경
| 문제 | 실제 확인과 한계 | 반영 |
|---|---|---|
| 검색 Pattern | 원본 02는 인덱스를 읽었지만 FilterBar 대신 자체 search-layout/field/actions를 선택. HM Input/Label/Button은 실제 사용. Pattern을 못 찾았다는 근거는 없고 구체적인 미사용 제약 기록이 부족했다. | AGENTS, 인덱스, FilterBar에 Table 유무와 무관한 우선 검토·부분 조합·구체적 미사용 이유를 명시. 부적합한 Pattern 강제 없음. |
| native Label | 원본 07 main.tsx:132의 기간 Field는 공개 Label로 표현 가능했으나 native label을 콘텐츠로 분류. 접근성 연결 자체는 유효. Dialog:162/Sheet:69/Drawer:71 Story의 유사 fixture는 있으나 복사 인과관계는 미입증. | Label에 실제 Input/Textarea id·SelectTrigger id·Combobox trigger id/aria-labelledby 예제. 반복 useId·비지원 예외 설명. 3개 Story는 설명 주석만 추가. |
| CSV 범위 확장 | 원본 07 main.tsx:77,123,179의 목록/행 CSV는 요구사항에 없고 생성 로그가 보고서 유틸리티로 선택했다고 기록. Story를 필수로 오해했다는 인과관계는 미입증. | AGENTS와 상세 지침에 미요청 CSV/다운로드/API/메뉴/Navigation은 제안만 허용. |
| Guard | 원본 10개 모두 graph에 실제 main/CSS가 포함되고 4개 정적 그룹 PASS. RENDER-002는 전부 1개, 승인 소비 CSS REUSE-003은 01:3/03:6/04:2/07:6. 대상 누락이 원인이 아니다. | Guard에 기존 외부 target/entry/result CLI를 설명. native label을 기존 REUSE-004 검토 대상에 추가하는 한 줄 변경. 범용 예외/JSON 덮어쓰기/Production graph 확대 없음. |
Label 예제는 기존 공개 타입으로 별도 TypeScript 검사 PASS다. Combobox의 실제 Label 클릭/스크린리더 발화는 이번 신규 예제 자체로 실행하지 않았으므로 NOT VERIFIED다. 주 실험의 Input/Select/Checkbox Label 연결과 overlay 이름/focus는 실제 브라우저에서 확인했다.
문서 충돌 3건
| 원래 위치·충돌 문장 | 현재 구현·대표 Story·API | 최신 확정 기준·최종 기준 | 수정 문서 |
|---|---|---|---|
| 프로젝트-지침.md:272, “GNB ONLY 내부 Sidebar에서 기존 LNB 메뉴 부품을 재사용…허용” | GNB/LNB/DashboardSidebar API와 Reference 조합은 호환성을 위해 존재. GNB All/Bar, LNB All, Dashboard Compact Header를 구분. API 존재가 신규 운영 허용을 뜻하지 않는다. | 추가 수정 요청의 신규 GNB_ONLY+GNBMobileMenu, Sidebar 없음. Dashboard도 Sidebar 없음, 공식 LNB_ONLY 허용. | 프로젝트 지침: 이전 Sidebar 배경/조합 설명은 호환성 전용. |
| page-header.md:90,92, “Dashboard 내부 Header/Menu/Sidebar와 합성”, “Sidebar 포함 1232px” | PageHeader는 콘텐츠 제목이며 자체 Navigation/min-width 없음. DashboardLayout/Content/Scroll 공개 API와 dashboard-layout All CompactHeader는 48px Header·960px 내부 스크롤. 기존 sidebar prop은 보존. | 추가 수정 기준과 현재 Dashboard 운영 계약: 48px Header+상태 필터+Content, Sidebar 없음, 최소 960px 내부 스크롤. 1232px은 legacy verification만. | PageHeader 활성 운영 설명 두 문장. |
| filter-bar.md:24–33,90–101,124, 검색→조건/초기화, 조회 Outline, “둘 다 outline…같은 appearance” | FilterBar/FilterBarSearch/FilterBarActions는 상태 없는 공개 조합. All/Full Story는 현재 조건→검색→조회 Solid→초기화 Outline. 공통 Pattern 기본 배치는 유지; src/list-screen.css는 승인된 소비 opt-in. | 추가 수정의 PageHeader 밖 흰 Card 하나, 8px, 조건→검색→조회→초기화, 조회 Solid Green·초기화 Outline Gray. 초안/적용값은 소비자가 소유. | FilterBar: 목록 계약·두 사용 예제·버튼 설명 정렬, 공통 구조/API 변경 없음. |
당시 검증 보고서와 D-01/D-02·퍼블리셔 기록은 수정하지 않았다. 3건의 활성 문서 충돌은 해결했으며 모든 문서 전체에서 충돌이 없다는 주장은 하지 않는다.
통합 검증
| 항목 | 실제 결과 |
|---|---|
| TYPECHECK / UI_BUILD | root/UI/CENTER typecheck PASS; pretypecheck의 기존 package build PASS, 중복 빌드 없음. |
| PRODUCTION_BUILD | 업무 앱·Dashboard export+finalizer·Recruit export Vite build PASS. 운영 화면 자체의 새 브라우저 회귀 전수검사는 수행하지 않음. |
| STORYBOOK_BUILD | 공식 npm build-storybook PASS. 최초 잘못 지정한 CLI 경로의 MODULE_NOT_FOUND 로그는 보존하고 올바른 명령으로 수정. |
| COMPONENT_TEST | 기존 8개 본문 보존, 8/8 PASS. |
| GUARD_TEST | 기존 46개 본문 보존+5개 추가, 51/51 PASS. 실제 Sidebar/Theme 누락 FAIL과 graph 밖 SCOPE-001을 계속 탐지. |
| GUARD_FULL_SCREEN | 업무/GNB, Dashboard, Recruit: FAIL 0, NOT VERIFIED. result React mount/CSS 공개 연결 검사와 브라우저 품질을 구분. |
| GUARD_PARTIAL | root CSS PARTIAL: FAIL 0, NOT VERIFIED. 외부 FULL/PARTIAL은 신규 49번 회귀에서 정적 그룹 PASS+RENDER-002 확인. |
| GUARD_STORYBOOK | FULL/PARTIAL: FAIL 0, NOT VERIFIED. 보존된 native Label fixture/Reference/CSS intent를 허용 PASS로 바꾸지 않음. |
| DOC_LINKS | 92개 Markdown/418개 내부 링크 검사 PASS, 누락 경로·heading 0. |
| CSS_IMPORTS | tracked CSS 81개/69개 import 경로 확인, 누락 0. tw-animate-css는 Node 기본 조건 대신 실제 CSS style export 조건으로 확인. |
| EXPORTS | 공개 artifact 존재 확인, UI 255/Theme 8/CENTER 25/Reference 10. CENTER는 CSS를 직접 읽지 못하는 Node 대신 compiled export AST+성공한 bundler build로 확인. |
주 실험 결과
| 화면 | 모드 | 점수 | 실제 대표 tuple 일치 | 상호작용 PASS |
|---|---|---|---|---|
| 01 검색·필터·Data Table | GNB_ONLY | 100.00 | 15/15 | 7 |
| 02 모바일 현장 업무 | GNB_ONLY | 100.00 | 14/14 | 5 |
| 03 업무 Dashboard | DASHBOARD_ONLY | 99.38 | 7/8 | 4 |
| 04 채용 공고 | GNB_ONLY | 100.00 | 15/15 | 5 |
| 05 승인·결재 | LNB_ONLY | 99.17 | 5/6 | 5 |
| 06 Form | GNB_ONLY | 100.00 | 12/12 | 5 |
| 07 통계·보고서 | DASHBOARD_ONLY | 95.50 | 1/10 | 4 |
| 08 설정·권한 | LNB_ONLY | 96.00 | 2/10 | 4 |
| 09 중첩 LNB | LNB_ONLY | 100.00 | 8/8 | 5 |
| 10 Sheet/Drawer/AlertDialog | GNB_ONLY | 100.00 | 7/7 | 6 |
기존 100점 rubric/세부 배점과 tuple/property 비교를 유지했다. 모르는 동일 tuple은 0점이고 동일 원인은 owning category 한 번만 감점했다. 03의 상태 ghost 버튼 배경 차이, 05의 outline small 동일 specimen 부재, 07/08의 font-family fallback stack 차이는 그대로 감점했다. Noto Sans KR 로딩은 성공했으나 07/08의 "Noto Sans KR", sans-serif가 기준 "Noto Sans KR", "Malgun Gothic", sans-serif와 다르다. 03은 99.44→99.38, 08은 100→96점으로 낮아졌으며 이 차이를 숨기지 않았다.
| 항목 | 원본 Baseline | 새 관측값(NON-COMPARABLE) |
|---|---|---|
| 생성 / Typecheck / Build / Runtime | 각각 10/10 | 각각 10/10 |
| 평균 | 97.79 | 99.00 |
| 공개 Component 재사용 | 99.81% | 100%, 실제 JSX 505/505 |
| Guard PASS / FAIL / NOT VERIFIED | 0 / 0 / 10 | 0 / 0 / 10 |
| 검색 Pattern 미활용 / 지원 native Label / CSV 범위 확장 | 각각 1건 | 각각 0건 |
| 확인된 활성 문서 충돌 | 3건 | 해당 3건 해결 |
| 페이지 가로 overflow / 핵심 접근성 문제 | 관측 0건 | 관측 0건 |
| 상호작용 | 53 PASS | 50 PASS, 3 N/A |
표의 표시값 기준 차이는 +1.21점(정밀값 기준 +1.21723점), 재사용 +0.19%p다. 3 N/A는 원본 요구사항에 없는 열 표시·채용 정렬/페이지·설정 취소 복원이며, 요청되지 않은 기능을 점수에 맞추려고 추가하지 않았다. CSV 검사도 기존 다운로드 실행에서 새 미요청 액션 부재 확인으로 바뀌었다. 따라서 53개 시나리오가 전부 동일하다는 주장도 하지 않는다. 40 viewport 실제 dist 캡처와 50개 동작을 확인했으며 스크린리더 발화·실기기 터치·실제 backend·모든 상태 조합은 NOT VERIFIED다.
교차 모델과 남은 문제
추가 모델 gpt-5.6-sol, reasoning low를 명시해 독립 02/06/07을 생성했다(별도 3개, 주 실험에 합산하지 않음). Typecheck/Build/실제 Runtime 3/3, 12개 viewport 페이지 overflow 0, Guard 0 PASS/0 FAIL/3 NOT VERIFIED. 실제 동작 11개 중 9 PASS/2 FAIL이다.
| 화면 | 확인된 지침 준수와 남은 실패 |
|---|---|
| cross 02 | FilterBar 실제 재사용. HM CSS 연결/6개 업무/Sheet 완료 동작 성공. 미요청 오늘 일정·안전 공지 2개 메뉴 추가, 미정의 stroke-divider 토큰 2곳, Tabs aria-controls가 존재하지 않는 panel을 참조. |
| cross 06 | HM Label/Input/Select/Checkbox 사용과 동의·오류 메시지·정상 제출 성공. 미요청 홈·처리 현황 2개 메뉴 추가, 미정의 bg/text/border 토큰 9곳. 오류 후 첫 필드 focus 이동 실패(오류 표시 자체는 성공). |
| cross 07 | 48px/960px·기간 변경·CSV 부재 성공. HM Label 지원 기간명을 span으로 표현, 미정의 text 토큰 6곳, font stack 추가 차이. 공개 컴포넌트 없이 Chart를 임의 생성하지 않음. |
미정의 참조는 17곳/8개 고유 이름이며 해당 실제 computed variable은 빈 값이다. Guard CSS 그룹은 entry 연결을 검사하므로 이를 Token 유효성 승인으로 해석할 수 없다. 태그 span으로 Field Label을 대체하는 선택도 이번 native label 정적 탐지 밖이다. 모델 1종의 3개 사례는 일관된 재현성을 입증하지 못한다. 추가 토큰 존재 검사·범위/Label 검토 자동화·focus와 panel 계약은 후속 과제로 보고하며 Component·Token을 이번 범위에서 고치지 않는다.
보존과 이전 판단
시작 tracked source SHA256 비교에서 공개 구현·Theme/Token·D-01/D-02·운영 Dashboard/Recruit·퍼블리셔 확정 결과와 과거 보고서는 변경 없음. 3개 Story AST는 주석을 제외하고 동일, Story ID 292→292 동일. 생성 소스 initial/final TSX·CSS·HTML 변화 0이다. 평가기/브라우저 selector·CLI 경로·바이너리 폰트 읽기 오류의 최초 로그와 필요한 실패 항목 재확인 증거는 삭제하지 않았다.
필수 project 회귀는 통과했고 지침/Guard의 최소 변경은 GitHub 검토 대상으로 준비됐다. 주 실험에서 3개 기존 위반은 관측되지 않았으나 교차 모델 범위/Token/접근성 실패와 비교 불가능 조건이 남는다. 공식 Gitea 이전의 읽기·쓰기 작업은 수행하지 않았으며, 현재 결과를 전체 모델/접근성 인증으로 간주하지 않는다.