HMDesign/docs/reports/disabled-input-label-2026-10-11.md

Disabled Input Label 최종 결정 및 선택 검증 — 2026-10-11

RESULT: PARTIAL — 요청한 디자인 변경과 선택 실행 검증은 PASS. Guard 원본의 NOT VERIFIED 3건과 해당 스타일 Runtime/Final 미검증은 보존한다. 이 결과는 전체 디자인 시스템 또는 WCAG 적합성 인증이 아니다.

범위 STORYBOOK_ONLY, Runtime React. 공식 프로젝트 D:\디자인시스템\HMDesign-Gitea-Transfer, main, origin https://gitea.hmac.kr/b25027/HMDesign.git. 시작 Local/Remote HEAD는 모두 4cfe224123b3a12633a90be569ae41b7c2aac5df, Working Tree clean. ui_viz는 읽기 전용 비교에만 사용했다.

최종 정책과 실제 렌더

기존 Input Story Specimen의 native Label에만 input.disabled 조건으로 opacity-60을 추가했다. native Label은 이번 사용자 요청의 기존 fixture를 보존하는 선택이며 공개 Label을 신규 화면에서 대체하도록 승인하는 것이 아니다. 라벨은 인스턴스별 useId → htmlFor → 실제 Input ID로 연결되며 브라우저의 label.control과 접근성 이름을 확인했다.

항목	Computed Style / 결과
Disabled Input Label	rgb(110, 103, 89) (#6E6759), opacity 0.6
Disabled Input	opacity 0.6 유지
공통 Label Component Disabled	opacity 0.5 유지, 실제 대표 Label Story에서 확인
Input 기본 / readOnly / Error Label	opacity 1 (disabled 아닌 상태)
부모 Field / 모든 조상	opacity 1, 중첩 opacity 없음
Error Message	rgb(211, 47, 47) / opacity 1, 기존 구현 유지
Helper Text	기존 #6E6759 / opacity 1 구현 유지, 관련 과거 실행 증거 REUSED PASS
Theme / Semantic / 공개 API / 전역 CSS	변경 없음

readOnly와 disabled를 동시에 준 Playground는 disabled 조건을 따라 Label 0.6이다. readOnly 단독 Label 1과 구분한다. Message와 Helper Text는 이번 변경 대상이 아니다. 기존 2026-10-02 승인, 2026-10-06 및 2026-10-07 검증은 삭제하지 않았다. 이전 “Label 100% 유지” 검토는 당시 선택이며 현재 최종 결정은 60%다. 공통 Label 계약은 50%를 유지한다.

접근성

• 실제 Label 배경 #F5F0E5, 전경 #6E6759, opacity 0.6을 sRGB 채널별 합성한 값은 (164, 157.8, 145) → 약 #A49E91이다. 대비율은 비반올림 합성 RGB 기준 2.34955:1, 8-bit 반올림 기준 2.34548:1. 원본 100% 대비율은 4.93094:1이다.
• 일반 크기 텍스트의 AA 4.5:1 기준보다 낮다. W3C WCAG 2.2 SC 1.4.3은 비활성 UI의 일부인 텍스트를 대비 요구에서 제외한다. 실제 disabled Input에 의미적으로 연결된 이번 Label은 해당 예외로 평가하며, 일반 안내 텍스트·활성 컨트롤·readOnly에 예외를 확대하지 않는다.
• 예외 가능성은 가독성 보장이 아니다. 흐린 항목명의 가독성 우려를 남기며, 사용자 확정 디자인을 임의로 100%로 되돌리지 않는다. 스크린리더 발화·다른 브라우저·실기기 터치는 NOT VERIFIED.

선택 검증

검증	결과 / 범위
Diff 및 요청 범위	Input Story 조건부 Label class와 직접 관련 설명·MD만 변경
실제 Storybook / Computed Style	PASS, Default/Disabled/Readonly/Error/Error Message/Playground
Playground 분기	PASS, disabled/readOnly/aria-invalid 및 disabled+readOnly
대표 All	PASS, 390/768/1280/1440px 각 상태 색·opacity·연결·줄바꿈·중복 ID·문서 overflow
상호작용	PASS, Default Label 클릭 focus·입력, readOnly 값 보존, Disabled Label 클릭 후 컨트롤 비포커스
Typecheck	PASS, npm run typecheck (사전 package build 포함)
UI Build	PASS, typecheck 사전 npm run build:packages의 UI build를 재사용; 반복하지 않음
Storybook Build	PASS, npm exec --no -- storybook build -o _local/disabled-input-label-20261011/storybook --disable-telemetry
변경 문서 링크	PASS, Input/Label MD·프로젝트 지침·본 보고서 4개 문서, 내부 링크 20개, 오류 0
Helper Text	REUSED PASS, 기존 _local/final-consistency-20261011/helper-runtime.json의 Input Playground Default/Disabled/Error 메시지 분기. 이번 Diff에서 메시지 class·부모 opacity·연결·Theme 모두 불변
Checkbox / Switch / Radio	공유 Label의 peer/group Disabled 0.5 구현 불변과 관련 컴포넌트·Theme 무변경을 확인. 각 조합의 새 브라우저 전수 검증은 실행하지 않음

브라우저 실행 증거는 _local/disabled-input-label-20261011/runtime.json(35개 선택 확인, 페이지 오류 0)과 상태별·폭별 PNG다. Default는 자동화 재개 시 이미 통과한 동일 산출물 증거를 재사용했다. 캡처에서 390px 대표 All과 Disabled 상태를 시각 확인했다. 패키지 build와 Storybook build의 기존 chunk 크기·plugin timing 경고는 비차단이다. 기존 storybook-static 파일 쓰기 권한 오류는 새 검증 출력 폴더로 해결했고 저장소 설정은 바꾸지 않았다. _local 자료는 Git 배포에 포함하지 않으며 위 표는 당시 관측의 보존 기록이다.

AI Guard 원본

node scripts/ai-generation-guard.mjs --target . --profile STORYBOOK --scope PARTIAL --entry src/components/input.stories.tsx --files src/components/input.stories.tsx --json

• FAIL 0, 원본 status, staticStatus, runtimeStatus 모두 NOT VERIFIED.
• REUSE-004: 기존 Input fixture native Label, 이번 작업의 보존 사유와 실제 control 연결은 위에 별도 기록.
• TOKEN-002: 기존 story-board.tsx:19의 동적 style, story-page.tsx:13의 동적 class. 기존 구조를 이번 범위에서 수정하지 않는다.
• 원본 styleEvidence: STATIC PASS, RUNTIME NOT VERIFIED, DESIGN_INTENT PASS, FINAL NOT VERIFIED. 별도 결합 styleVerification은 생성하지 않았다. 실제 변경 Label의 색·opacity와 관련 상태 Runtime 측정은 PASS지만 기존 Guard의 모든 style 위치를 검증했다는 뜻은 아니다.
• Guard JSON을 PASS로 덮어쓰지 않았으며 동일 정상 검사를 반복하지 않았다. Storybook profile에는 Production 전용 --result를 전달하지 않는다.

영향 범위와 Git

src/work-dashboard/WorkDashboard.tsx의 진행률 Input은 editor.status === "done"에 따라 disabled이며 별도 공개 Label을 조합한다. 해당 Label은 이번 Story fixture 적용 대상이 아니므로 추가 opacity를 넣지 않았다. 실제 소비 화면의 추가 적용은 별도 판단 대상이다. 공통 Label·Input 구현, Theme, 다른 Story·Component·Pattern에는 변경이 없다.

공식 Gitea main의 일반 Commit/Push 메시지는 fix: align disabled input label opacity with ui_viz를 사용한다. 관련 파일만 Stage하고 Staged Diff를 검토하며 직전 원격 SHA가 시작 기준과 같을 때만 진행한다. 실제 최종 Commit/Push 및 Local/Remote SHA 검증 결과는 작업 완료 보고에 기록한다.