manual-authoringlisted

# 사용자 매뉴얼 작성 (manual-authoring) 첨부된 UI 스크린샷과 사용자가 설명하는 화면 동작을, 인쇄 가능한 A4 사용자 매뉴얼 (HTML → PDF)로 만든다. 매뉴얼은 일관된 시스템을 가진 디자인 문서다 — 러닝 헤더/푸터, 번호 알약, 절차는 번호 배지·정보는 점 불릿, UI 명칭은 키캡, 주의는 콜아웃 박스. 전체가 하나의 자체 완결형 HTML이고, Chrome으로 렌더한 뒤 **바뀐 페이지를 반드시 눈으로 확인**한다. 작업 초반에 `references/layout-notes.md`를 읽어라 — 템플릿이 이미 고쳐 둔 레이아웃 함정(고정 높이 flex 잘림, 폰 목업 크기, 병합하지 말고 합치기)을 왜 그렇게 했는지 설명한다. 페이지가 잘리거나 넘칠 때마다 다시 읽어라. ## 0단계 — 먼저 프로덕트 컨텍스트를 로드한다 (건너뛰지 말 것) 매뉴얼은 그 제품의 실제 용어를 쓰고 정책을 지켜야 한다. 어떤 문구든 쓰기 전에: 1. 어떤 제품의 매뉴얼인지 확인한다(불확실하면 물어본다). 2. `references/products.md`에서 해당 제품을 찾아 **컨텍스트 폴더(정책 git 문서 폴더)를 읽는다.** 최신 상태로 먼저 pull한다. pull이 실패하면(인증·네트워크· 충돌) 추정하지 말고 멈추고 보고한다. 3. 그 제품의 용어·객체 모델·톤 규칙을 흡수해 전체에 적용한다(예: 앱은 "탭합니다", 웹 콘솔은 "클릭합니다"; 서로 구분되는 객체를 뭉뚱그리지 않기). 4. 레지스트리에 없는 **새 제품이면 먼저 사용자에게 확인한다** — 제품/폴더 이름과 컨텍스트 폴더(정책 문서 위치/리포)를 물어본다. 확인받은 뒤에 (a) 산출물 폴더 `~/manuals/<제품>/`를 만들고, (b) `references/products.md`에 새 행을 추가해 다음 작업부터 이 스킬이 자동으로 그 제품을 인식하게 한다(폴더·행을 임의로 먼저 만들지 말고 반드시 확인부터). ## 1단계 — 화면 입력을 모은다 내용은 사용자가 스크린샷을 첨부하고 각 화면을 설명하며 이끈다. 페이지마다: - **넣기 전에 첨부된 스크린샷을 전부 열어 확인한다** — 다시 내보낸 파일은 이름(`Group 1.png`, `IMG_...2.png`)이 같아도 내용이 바뀌는 경우가 많으니 절대 파일명을 믿지 말고 실제로 무엇인지 본다. - (설명에서 추론하거나 물어서) 흐름 순서, UI 요소 이름, 각 화면이 무엇을 보여주는지 파악한다. 여러 장은 페이지 소제목 순서에 맞게 배열한다(진입 → 상세 → 다이얼로그). - 설명된 동작이 제품 정책(흐름·제한·EMR/EHR 규칙)에 닿으면 0단계 문서와 대조해 제품이 실제로 하는 대로 쓴다. ## 2단계 — 템플릿으로 페이지를 작성/수정한다 새 매뉴얼은 `assets/template.html`을 복사하고, 기존 매뉴얼은 프로젝트의 소스 파일을 수정한다. 템플릿에 디자인 시스템과 모든 레이아웃 수정이 들어 있다. 아래 작성 규칙을 따르면 페