모바일 메뉴와 주요 화면 UX 개선 및 시각 검수

docs/ops/ux-audit-2026-09-12.md

@@ -0,0 +1,33 @@
+# 2026-09-12 비넷 UX·시각 감사
+
+> 판정: **DONE · 로컬 시각 검수 수용**. 업그레이드된 designpaca와 설치된 디자인 스킬을 검토하고 비넷의 기존 디자인 SSOT에 맞춰 수정했다. 로컬 web 5273 / API 8200 기준이며 운영 배포는 포함하지 않는다.
+
+## 수용한 변경
+
+| 영역 | 수정과 직접 검수 결과 |
+|---|---|
+| 공통 메뉴 | 역할별 주요 목적지 3개와 전체 메뉴, 명확한 한글 라벨, 태블릿 텍스트 레일, 모바일 역할 선택, 불투명 메뉴와 포커스 복원을 확인했다. 브라우저 예약 Ctrl 단축키를 보존하고 Alt+H를 역할 홈에 연결했다. |
+| 로그인·온보딩 | 상담 훈련 목적의 문구, 잘리지 않는 약관 제목·버전과 44px 조작면을 확인했다. 법률 본문과 동의 절차는 유지했다. |
+| 학습자 홈·연습·기록 | 통계 정의와 정보 위계를 정리했다. 선택한 P4의 초기·리사이즈 가시성, 빈 기록 안내, 2열 모바일 통계, 기록 조작면을 확인했다. 긴 내담자 목록은 내부에서 스크롤하며 요약만 3줄로 제한하고 상세 본문은 유지한다. 768/1024/1440의 카드 비중첩·선택 항목 hit-test·시작 CTA를 확인했다. |
+| 상담 시작·리뷰 | 긴 호소 본문을 읽기 좋게 배치했다. 모바일 시작 버튼을 내비게이션 위에 고정하고 중간 카드가 덮지 않도록 조상 stacking을 수정했다. 320/390의 상·중·하단 hit-test와 실제 이미지를 확인했다. 리뷰 자기평가 제출 버튼도 44px로 보정했다. |
+| 교수자·내담자 설정 | 분석 표가 페이지 전체를 넓히던 문제를 고쳐 표 내부 가로 스크롤을 유지했다. 전체 목록·정렬·상세 버튼을 보정했다. 내담자 작성 4단계를 가로 한 줄로 복원하고 모바일 탭을 확인했다. |
+| 관리자·감독 | 감독·연구와 개선안 검토 문구, 긴 ID 줄바꿈, 접근 관리 탭, 지원 요청 필터를 정리했다. 사용자 관리의 모바일 제목·탭·검색은 뷰포트 안에 두고 표만 내부 스크롤한다. AI 제공자 조회 실패는 확인 중으로 남지 않고 실패와 다시 확인을 표시한다. |
+| 설정 | 320px 최소 폭 문제, 지원 요청과 동의의 좁은 배치, sticky 메뉴의 투명 배경을 수정했다. 역할에 맞는 메뉴 줄바꿈과 버튼·토글 조작면을 확인했다. |
+
+## 검증 근거
+
+- 전체 레이아웃: `.devlogs/layout-accepted.out.log` **15 passed (2.7m)**. 마지막 사용자 관리 폭 보정 후 관리자 관련 재검사도 `.devlogs/admin-final-geometry.out.log` **2 passed (18.2s)**.
+- 회기: `.devlogs/session-final-v3.out.log` **8 passed (28.8s)**.
+- 접근성·모바일: `.devlogs/a11y-final.out.log`의 38 passed와 구 제목을 새 제목으로 맞춘 `.devlogs/a11y-home-final.out.log`의 **6 passed**로 44개 모두 통과했다. 검사 기준은 완화하지 않았다.
+- 학습자: 독립 40 passed, 마지막 긴 목록 focused 1 passed와 P4/resize/빈 기록 회귀 6 passed. `learner-long-list-final5`의 768/1440 원본을 직접 수용했다.
+- 감독·관리자: 독립 **18 passed**. AI 제공자 실패→재시도 성공은 `.devlogs/provider-retry-accepted.out.log` **2 passed**.
+- 타입 검사 포함 프로덕션 빌드와 디자인 SSOT 검사 통과: `.devlogs/ux-accepted-build.out.log`, `.devlogs/ux-accepted-design.out.log`.
+- 전체 Playwright 수집은 **1219 tests / 70 files**다. 전체 1219개를 실행했다는 의미는 아니다.
+
+## 시각 증거와 판정 경계
+
+`outputs/ux-audit-2026-09-12/`에 수정 전·실패·수정 후 증거를 보존했다. `surfaces-final`은 추가 8개 경로 × 5개 폭의 내부 스크롤 캡처 113개다. `layout-accepted`, `session-prestart-fixed-v5`, `learner-long-list-final5`, 설정·셸·교수자·관리자 focused 캡처로 최종 상태를 확인했다. 목록 수집량만으로 합격을 판정하지 않았으며, 오케스트레이터가 화면과 diff를 직접 보고 수용했다.
+
+카드가 겹친 첫 목록 수정, 반투명 메뉴, 시작 버튼 가림, 초기 로딩 화면을 완료 화면으로 찍던 캡처는 반려했다. 캡처 도구의 stale owner ID와 native 스크롤 끝점 오차도 수정했다. 빈 회기 fixture는 정확한 API 빈 상태 계약으로 보강했으며 실제 API 증거와 구분한다. `practice-real-api-final`의 후속 전체 화면 캡처는 로딩 중이어서 무효로 보존했다. 해당 배치의 수용 근거는 안정된 긴 목록 fixture 원본과 동작 검사다.
+
+로컬 AI 게이트웨이는 비가용이고 제공자 조회 API는 500을 반환한다. 이번 감사는 이 상태를 숨기지 않고 실패·재시도 화면을 검수했다. 운영 서버 정상성, 실제 모델 생성·음성 연결, 전체 기능 출시 판정과 배포는 이 디자인 감사의 완료 범위에 포함하지 않는다. 소스 변경은 커밋·push·배포하지 않았다.