# SLUR 보고서 디자인

PDF, AUDIT, 진단서, 제안서처럼 인쇄·공유되는 정적 문서에 적용한다. 웹 UI 토큰을 그대로 옮기는 것이 아니라 SLUR의 브랜드 원칙과 정보 위계를 문서 환경에 맞게 사용한다.

## 브랜드 원칙

- 라이트 문서의 SLUR 로고는 `assets/brand/logo.svg`의 원본 블랙을 사용한다.
- PDF 생성기가 래스터 이미지를 요구하면 같은 원본의 투명 배경 파일 `assets/brand/logo-black.png`를 사용한다.
- 블루 테마를 선택해도 로고를 블루로 바꾸지 않는다. 로고와 보고서 강조색은 서로 다른 역할이다.
- 어두운 표지나 검은 면에서만 `assets/brand/logo-white.svg`를 사용한다.
- 로고 주변에는 다른 글자나 선이 닿지 않도록 로고 높이 이상의 여백을 확보한다.

## 권장 블루 팔레트

| 역할 | 값 | 사용 |
|---|---:|---|
| 강조 블루 | `#1D54E6` | 제목 앞 표식, 구분선, 순번, 핵심 수치 |
| 진한 블루 | `#163FB0` | 작은 강조 글자, 선택 상태 |
| 연한 블루 | `#EEF4FF` | 정보 카드와 안내 영역 |
| 본문 검정 | `#18181B` | 제목과 핵심 본문 |
| 본문 회색 | `#50515A` | 설명 문장 |
| 보조 회색 | `#747680` | 날짜, 버전, 각주 |
| 구분선 | `#E5E7EB` | 표와 카드 경계 |
| 중립 면 | `#F7F8F8` | 넓은 보조 배경 |
| 종이 면 | `#FBFBFC` | 페이지 배경 |
| 위험 빨강 | `#B91C1C` | 즉시 확인해야 하는 실제 위험의 작은 표식 |

넓은 면은 흰색·연회색을 기본으로 한다. 블루는 정보 구조를 보여 주는 데 사용하고, 빨강·주황·초록으로 페이지를 크게 나누지 않는다. 위험 빨강은 실제로 즉시 확인해야 하는 항목의 선, 작은 배지, 순번처럼 제한된 표시에만 쓴다.

## 요약본의 말

요약본은 비개발자가 먼저 읽는 문서다. 기술 용어가 결과 이해에 꼭 필요하지 않다면 일반어를 사용한다.

| 기술 표현 | 요약본 표현 |
|---|---|
| 모바일 이용성 | 휴대폰에서 쓰기 쉬운지 |
| 가독성 | 읽기 편의 |
| SEO 메타데이터 | 검색 결과 정보 |
| CTA | 상담 버튼·상담 연결 |
| HTTPS/TLS | 안전한 접속·안전한 주소 |
| 접근성 레이블 | 입력란 이름표 |
| LCP | 첫 화면 속도 |
| 반응형 오류 | 작은 화면 가로 넘침 |

기술명과 약어를 삭제해 정확성이 떨어지면 일반어 뒤에 괄호로 한 번만 병기한다. 정확한 측정값, 기술 설명, 확인 근거는 상세 보고서에서 제공한다.

## 정보 위계

- 요약본은 `현재 상태 → 종합 결과 → 분야별 결과 → 우선 고칠 항목 → 권장 실행 순서` 흐름을 기본으로 한다.
- 한 페이지에는 하나의 핵심 메시지만 둔다. 점수보다 방문자에게 미치는 영향과 다음 행동을 먼저 읽히게 한다.
- 상세본은 기술 코드·약어·측정 조건을 유지할 수 있지만, 제목과 범주명은 가능한 한 일반어로 쓴다.
- 표와 카드의 색만으로 상태를 전달하지 않는다. `즉시 조치`, `우선 개선`, `계획 개선`, `추후 확인` 같은 글자를 함께 표시한다.
- `P0~P3`을 사용하면 `P0 · 즉시 조치`, `P1 · 우선 개선`, `P2 · 계획 개선`, `P3 · 추후 확인`처럼 모든 항목에서 코드와 일반어를 함께 표시한다. 이렇게 병기하는 경우 별도 설명표를 반복하지 않는다. 요약본에서는 P 코드를 생략해도 된다.
- 평가하지 않은 조합이 많은 표는 빈칸이나 `-`가 반복되는 행렬로 만들지 않는다. `평가 분야 | 확인한 페이지·범위 | 결과`처럼 실제로 평가한 값만 행으로 표시하고, 0점과 미평가를 시각적으로 혼동시키지 않는다.

## 생성과 검수

보고서 원본이 데이터와 코드라면 ReportLab 같은 문서 도구로 벡터 PDF를 직접 생성한다. HTML 화면을 캡처해 PDF로 만드는 방식은 웹 레이아웃이 원본이거나 브라우저 렌더링이 필요한 경우에만 사용한다.

최종 PDF는 Poppler 같은 렌더러로 페이지 이미지를 만든 뒤 다음을 확인한다.

- 원본 로고 색과 비율이 유지되는가
- 제목, 표, 카드, 각주에 잘림이나 겹침이 없는가
- 넓은 배경이 중립색이고 경고색이 과하지 않은가
- 요약본에 불필요한 기술 용어가 남지 않았는가
- 페이지 번호, 날짜, 버전과 분석 대상이 일관되는가
- A4 규격과 본문 여백이 모든 페이지에서 같은가
