web-designer 작업 규칙 (rules)

이 파일 = 에이전트 운영 규칙. 디자인 지식 본문은 kb/, 진행·이력은 handoff.md. 새 규칙은 🆕 신규에 1줄 append.

📑 구성

• 🆕 신규 (최근 확립)
• §1 에이전트 정체·권한
• §2 호출 규약 (언제 부르나)
• §3 확정 규칙 (협상 대상 아님)
• §4 KB 관리

🆕 신규

• 🔑2026-09-18 화면 톤·색·사조 레퍼런스가 필요하면 devplan /design-refs.html 을 먼저 연다(34개 사이트 · 7축 분류 · 카드가 곧 그 사이트 컨셉). 규칙 본문 = projects/design-refs/rules.md 🆕 절.
• 🔴2026-09-09 사진 대지(전·후 대조)는 «사진 방향»으로 조판을 갈라야 한다 — 반폭 2단 고정이면 가로사진 쌍이 A4 의 45%만 채운다. 위험성평가 증빙사진 대지 실측 = 세로쌍은 269mm(꽉 참)인데 가로쌍 6항목은 125~136mm 로 절반이 백지였다(반폭 88mm 에 비율 2.13 이면 사진 높이가 41mm 뿐). ⛒처방 = 개선전·후가 둘 다 가로일 때만 위·아래 쌓기(flex-direction:column, 전폭 190mm) → 265mm(96%). ⚠전폭으로 쌓으면 두 장 합이 290mm 로 1쪽을 넘긴다 → img{max-height:80mm} 로 「둘이 나눠 쓸 예산」 상한을 건다(한쪽이 「해당 없음」인 낱장은 상한 없이 키운다). ⚠방향이 섞인 항목(가로+세로)은 반폭 2단 그대로 둔다 — 세로를 전폭으로 늘리면 400mm 대로 튄다. 🔑좌우 캡션 줄 수가 다르면 margin-top:auto 가 짧은 쪽만 밀어 사진 밑 구분선이 어긋난다 → 캡션 칸에 min-height(2줄분) 를 줘 자연높이를 맞춘다. 실물 = C:\dev\safety-riskassessment\게시물\build_photo_sheets.py.
• 🔴2026-09-04 Git Bash 에서 _design_audit.py 에 경로 인자를 줄 땐 MSYS_NO_PATHCONV=1 필수. 안 붙이면 /field/list 가 C:/Program Files/Git/field/list 로 바뀌어 Cannot navigate to invalid URL 로 죽는다. PowerShell 에선 불필요.
• 🔴2026-09-04 버튼 줄 수를 Range rect 의 top 개수로 세면 오탐이다. 아이콘·배지가 세로로 어긋난 버튼이 「검색=2줄, 생산현황=3줄」로 잡혔다. 정답 = (clientHeight − 패딩) ÷ lineHeight, white-space:nowrap 은 제외.
• 🔴2026-09-04 가로 넘침 검사는 scrollWidth > clientWidth 로 먼저 게이트한다. 안 하면 화면 밖에 숨겨 둔 오프캔버스 패널이 전부 넘침으로 잡힌다. QA 헬퍼(.qa-h-*) 같은 개발용 오버레이도 제외 대상.
• 🔑2026-09-04 PFS pfs.css 는 컴파일 산출물이다 — 원본 = web/static/scss/(빌드 = sass --watch scss/pfs.scss css/pfs.css). .css 를 직접 고치면 다음 빌드에 날아간다. 폰트·전역 스타일 처방은 .scss 경로로 낸다.

§1 에이전트 정체·권한

• 이름 = web-designer. 정의 = C:\Users\delix\.claude\agents\web-designer.md. 모델 = Sonnet 5(최소 티어 규정 준수).
• 권한 = 상담 + 실사 진단(페페 결정 26.9.4).
• 한다: 지식 제공 · 화면 열어 실측(Playwright) · 스크린샷 · cody-vision 판독 · 처방 작성 · 선제 제안.
• 안 한다: 코드 수정 · git · 배포. 처방은 「파일:줄 — 어떻게」까지 적어 코디에게 넘긴다.
• 운영 서버에서 검사할 땐 조회만. 저장·삭제 버튼을 누르지 않는다.

§2 호출 규약

• pfs UI 작업 = 착수 전 상담 필수(페페 상시 지시). 등록처 3곳 = C:\dev\CLAUDE.md §3 · C:\dev\pfs\CLAUDE.md 🎨절 · projects\pfs\rules.md 🆕.
• 대상 = 템플릿(web/templates/**) · CSS(web/static/css/**, scss/**) · 화면 JS · 레이아웃 · 버튼 · 폰트 · 표 · 색 · UI 문구 · 인쇄물.
• 면제 = 화면에 안 보이는 백엔드/DAO/쿼리/배포, 오탈자 1글자.
• 넘길 것 = 무엇을 왜 바꾸는지 + 대상 파일 + 재현 URL·뷰포트. 이게 없으면 에이전트가 헛짚는다.
• 받을 것 = 판정 · 실측 · 처방(파일:줄) · 회귀위험 · 사람눈필요 · 선제 제안(최소 2개).

§3 확정 규칙 (협상 대상 아님)

1. 폰트 크기 하한 13px. 그 이하 신규 금지. 예외는 「어디에 왜」 명시 + 페페 승인.
2. PFS = Bootstrap 4.2.1. BS5 문법(data-bs-*·ms-*/me-*·.form-select·.btn-close) 금지.
3. 테마 파일(style.css·custom.js) 직접 수정 금지. 자체 CSS 에서 덮는다.
4. 모바일 전용 별도 HTML 금지. 한 페이지 + @media.
5. 전역 CSS 에 흔한 클래스명 규칙 추가 금지. 페이지 스코프 아래에만.
6. 실기 검증은 웹 모바일뷰로 대체 안 된다. 안 봤으면 「미검증」이라고 적는다.
7. 고객·직원이 보는 문구의 페페 호칭 = 신동승 차장. 날짜 26.7.27(화) · 시각 KST.

§4 KB 관리

• 원문 = C:\dev\seedchain\projects\web-designer\kb\. 파일 번호 = 에이전트 정의의 라우팅 표와 1:1.
• 새 사실은 해당 주제 파일에 append. 여러 곳에 복붙하지 않는다(중복되면 한쪽만 고쳐져 어긋난다).
• 수치는 출처를 같이 적는다. 출처 없으면 「추정」이라고 쓴다.
• PFS 에서 새 UI 사고가 나면 kb/00-pfs-lens.md 3절 표에 1행 추가 → 재발 방지 목록이 곧 자산이다.