[QA] QA-04 전 화면 공통 규칙 12개 · UI/UX 일관성 · 토스트 · 에러페이지 · 접근성

[yslee4601]

우선순위 P1 · 출시 전 전수 QA 4/13 · 상위 이슈 #252

배경

화면정의서 4장이 "모든 화면에 똑같이 적용"되는 공통 규칙 12개를 정해 뒀다.
화면을 따로따로 만들었기 때문에 이 12개가 21개 화면에서 실제로 똑같이 지켜지는지 확인된 적이 없다.

검사 대상 — 공통 규칙 12개

#	규칙	확인 방법
1	금액 표기	원 단위, 천 단위 콤마, 소수점 없음, 음수는 빨강 + 괄호 (1,517,944)
2	반올림 금지	화면에서 반올림하지 않는다. 서버가 보낸 숫자를 그대로
3	요율 표기	소수점 넷째 자리 650.0000%, 화면 반올림 금지
4	상태 배지	색만 쓰지 않고 색+글자. 정상=초록 주의=주황 위반=빨강 검토필요=회색 진행중=파랑
5	근거 표시	요율·한도·판정에 마우스 올리면 REG-08 · 제4-32조제11항 형태 근거가 뜬다. 근거 없는 숫자는 화면에 띄우지 않는다
6	계산근거 열기	금액 클릭 → 입력값 → 계산식 → 항목별 금액 → 합계 팝업
7	목록 공통	20행 페이징, 검색조건이 URL에 남는다, 정렬 화살표
8	확정 후 잠금	FINALIZED 데이터는 전 화면 읽기 전용 + 자물쇠 아이콘
9	사유 필수	예외 처리·역분개·수동 조정은 사유 없으면 저장 버튼이 안 눌린다 + 감사로그에 이전값·이후값
10	에러 문구 3요소	무엇이 · 왜 · 어떻게
11	개인정보	계약자 개인정보를 아예 저장하지 않는다(SRC-027 D-05). 이름·주민번호 저장·표시 금지
12	교육용 표시	화면에는 표기하지 않는다 (COR-009, 2026-08-12 팀 결정)

추가로 볼 것

• 디자인 토큰 일관성 — static/css/common/variables.css 의 토큰을 쓰지 않고 값을 직접 박은 곳
• 컴포넌트 재사용 — 같은 역할의 UI(버튼·배지·표·페이지네이션·탭)가 화면마다 다른 마크업을 쓰는 곳 ([Refactor] 업무 화면 공통 UI 컴포넌트 점진 통합 #138 관련)
• 토스트/알림 — js/common/toast.js 를 쓰는가, 문구가 규칙 10을 지키는가
• 에러 페이지 3종 — error/403.html · error/404.html · error/500.html 이 셸을 정상 렌더링하는가 (미인증 상태 포함)
• 접근성 — skip-link, 포커스 링, aria-*, 키보드만으로 전 화면 조작, 색 대비, prefers-reduced-motion

통과 기준

• 12개 규칙 × 21개 화면 매트릭스가 채워져 있다
• 규칙 11(개인정보)은 DB 스키마·API 응답·화면 3층 모두에서 위반이 없음을 확인했다
• 하드코딩된 색상·간격 값 목록이 있다
• 키보드만으로 시연 경로 10컷을 끝까지 갈 수 있다
• 에러 페이지 3종이 미인증 상태에서도 깨지지 않는다

---

공통 규칙 (모든 QA 이슈에 적용)

• 근거 없는 수정 금지 — 00_인덱스/근거대장.md를 먼저 읽고, 모든 수정 제안에 근거 ID(REG-xx / SRC-xx)를 붙인다. 못 붙이면 "근거 없음 — 확인 필요"로 남긴다.
• 발견을 3분류한다 — ① 문서가 틀림 ② 구현이 틀림 ③ 아직 구현 안 됨(문서 유효). ③을 ①로 오인해 지우면 설계 의도가 사라진다.
• 이 이슈에서 직접 고치는 것은 "명백한 오기·1줄짜리"까지. 판단이 필요한 것은 후속 이슈로 분리하고 여기에 링크한다.
• PR 하나가 커지지 않게 — 검사 결과를 먼저 이 이슈에 표로 남기고, 수정은 그다음에 올린다.

[yslee4601]

QA-04 검사 결과 — 전 화면 공통 규칙 12개 정적 점검 (1차 보고)

기준: develop 2e60a87f · 정적 분석(템플릿 29 + JS 32 + CSS 전수) · 2026-08-21 · 대표 발견 코드 재검증 완료
(참고: PR #328(#292 화면 설명문 결정)이 문서를 수정 중 — 본 검사는 머지 전 기준이며 배너 2종·LEDG 문구 항목은 대조에서 제외)

규칙별 판정

#	규칙	판정
1	금액 표기(콤마·소수점없음·음수 빨강+괄호)	△ — 공통 포맷터는 정상, 음수 빨강 미적용 4파일 (F-A)
2	반올림 금지	△ — 금액은 준수. reco 일치율만 화면 계산+toFixed (F-B, 경미)
3	요율 4자리	✅
4	배지 색+글자	✅ (전 지점 라벨 동반. 단 구조 테스트는 색 토큰만 커버)
5	근거 hover	❌ — 공통 인프라(evidence.js popover)는 있으나 사용처 4곳뿐 (F-C)
6	계산근거 팝업	△ — CAP-W02·CONT 1200% 탭·RECO 비교만. 원장·스케줄·지급목록 금액 클릭 없음 (F-D)
7	20행·URL 검색조건·정렬 화살표	△ — 20행·URL ✅. 정렬 화살표 전 화면 0건(F-F) + policy 페이지네이션 없음(F-E)
8	FINALIZED 잠금+자물쇠	△ — vrun·schedule·transaction 폼만. cap·ledger·exception·reco·arbitrage·contract탭 없음 (F-G)
9	사유 필수(클라+서버)	✅ (예외 처리·역분개·정정·재생성·수동검증 전부 이중 검증)
11	개인정보 흔적	✅ 0건 (SRC-027 D-05 주석까지 확인)
12	교육용 표기	✅ 0건 (COR-009 결정 주석 확인)
—	접근성 기본(lang·skip-link·aria·label·색 토큰)	✅ (대비 실측은 런타임)

발견 (3분류)

② 구현이 틀림

• [F-A] 음수 금액 빨강 미적용 4파일 — transaction-list.js:178,188(지급액·합계 — 환수 건이면 음수 실재), contract-detail.js:135, contract-tabs.js:548, exception-list.js:61. 코드 재검증: transaction-list.js에 is-negative-amount/isNegative 참조 0건, 대비군 ledger/list.html:183·187은 정상 적용. 규칙 1(:207)
• [F-B] reco.js:239 일치율을 클라에서 계산+toFixed(1) — 규칙 2 "서버 숫자 그대로" 위반 형태(금액 아님, 경미)

③ 미구현 — 문서 유효 (규칙이 "전 화면"을 요구하나 부분 적용)

• [F-C] 근거 hover — 사용처가 contract 폼/목록·schedule 상세/목록 4곳뿐. policy 요율·vrun 판정·transaction 게이지·exception·reco·arbitrage·ledger·base 부재 (CAP 전무는 [QA] QA-03 1차 화면 21종 + 팝업 2종 전수 QA — 동작·상태·빈값·권한 #255 F-10 기보고)
• [F-D] 계산근거 팝업 — ledger·schedule·transaction 목록·vrun의 금액 클릭 동선 없음 (규칙 6)
• [F-E] policy 목록 페이지네이션 자체가 없음 (PolicyViewController에 page 파라미터 없음)
• [F-F] 정렬 화살표 전 화면 부재 — aria-sort·화살표 마크업 0건 (규칙 7의 "정렬 화살표 표시")
• [F-G] FINALIZED 잠금 표식 부재 — cap·contract 1200% 탭·ledger·exception·reco·arbitrage (서버측 불변 가드는 존재 확인 — 화면 표식만 없음)

① 문서가 틀림 — 해당 없음

화면별 모범/공백

모범: schedule(근거·잠금·음수 전부 ✅)·vrun·ledger. 공백 집중: transaction 목록·cap·exception·reco·arbitrage.

권고 (1차/2차 범위 결정 필요)

• 1차(시연 전) 권장: F-A(음수 빨강 — 클래스 추가 수준, 정산 화면 신뢰성 직결)
• 2차 이연 권장: F-C·F-D·F-F·F-G (전 화면 확산 작업 — 규칙 자체는 유효하므로 문서 유지, 이연 기록)
• 미검(런타임): popover 실동작, FINALIZED 안내창, URL 왕복 복원, 색 대비 실측 — [QA] QA-03 1차 화면 21종 + 팝업 2종 전수 QA — 동작·상태·빈값·권한 #255 실측 QA와 병합 예정

[yslee4601]

종결 제안 — 1차 범위 완료, 잔여 4건은 2차 분리 (2026-08-23)

1차 처리 완료분

• F-A 음수 금액 빨강 4파일 + 규칙 9 확인 → [Fix] COMPLIANCE 수정 버튼 가드 · 음수 금액 빨강 표기 #337 머지 완료
• 규칙 1 관련 추가 발견(8/23 심층 QA): 서버 렌더 시각 UTC 표시 3계열 — RECO 이력([Fix] 발표 전일 리허설 실측 발견 2건 — 컷⑥ 딥링크 무동작·대사 이력 UTC 표시 #346) · 대시보드 최근 목록·감사로그([Fix] 대시보드 최근 목록·감사로그 시각 UTC 표시 — Asia/Seoul 변환 누락 3개 DTO (SIR-008) #348) 수정 머지. 시간(HH:mm) 서버 렌더 템플릿 6곳 전수 대조로 잔여 누락 0건 확인(SIR-008).
• 접근성 기본·사유 필수 이중검증·개인정보/교육용 표기 0건은 1차 보고대로 ✅ 유지.

2차 분리 대상 (전 화면 확산 작업 — 규칙 자체는 유효하므로 문서 유지)

• F-C 근거 hover 확산(현 4곳) · F-D 계산근거 팝업 동선 확산 · F-F 정렬 화살표 · F-G FINALIZED 잠금 표식
• 이슈 문안: 로컬 qa-findings/followup-issues.md — 등록은 발표 후 권장

잔여가 전부 2차 확산 작업으로 분리 가능하므로 이 이슈는 닫기를 제안합니다.