앱 스크린샷 쇼케이스
실제 스크린샷이 진실의 원천입니다. 앱 UI를 절대 조작, 재그리기, 리터치, 또는 "개선"하지 마세요. 스크린샷 내부의 텍스트를 절대 변경하지 마세요.
두 가지 기기 유형. Report, Review, Resolve는 시민 모바일 앱 화면입니다
(device: "mobile", PhoneFrame에 렌더링, 세로). Assign과 Respond는 운영센터의 웹 뷰에서 발생합니다(모바일 앱 아님, device: "web", BrowserFrame에 렌더링, 가로) — sos-content-accuracy "Verified product facts"를 참조하세요. 입력 시점에 이를 정확히 파악하세요: 웹 대시보드 스크린샷을 폰 프레임에 강제로 넣으면 제품을 잘못 표현하게 됩니다.
파일 위치
| 무엇 | 드롭 위치 (사용자) | 출력 (생성) |
|---|---|---|
| 앱 스크린샷 (PNG/JPG, 풀 해상도) | assets/screenshots-raw/ | public/screenshots/<id>.webp (+ .avif) |
| 로고, 앱 아이콘, 브랜드 마크 | assets/brand-raw/ | public/brand/ |
| Open Graph 이미지 (1200×630) | assets/brand-raw/og-image.png | public/brand/og-image.jpg |
assets/는 배포되지 않습니다. public/에 있는 최적화된 파일만 전송됩니다.
명명 규칙
<순서>-<화면-용도>.png, 소문자 케밥 케이스, 예:
01-home.png, 02-category-select.png, 03-report-form.png, 04-report-submitted.png, 06-welcome.png, 07-register.png, 08-verify.png, 09-login.png.
사용자의 파일 이름이 임의로 지정된 경우, 각 파일을 검사하고 용도에 따라 이름을 변경하세요.
현재 매니페스트 ID와 각 ID가 포함해야 할 내용:
| id (파일명 베이스) | 기기 | 화면 |
|---|---|---|
hero-primary | mobile | 홈 화면 |
hero-secondary | mobile | 카테고리 선택 화면 |
how-report | mobile | 신고 양식 (사건 접수/제출) |
how-review | mobile | 제출 후 확인 화면 |
how-assign | web | 운영센터 웹 뷰 — 신고 할당 중 |
how-respond | web | 운영센터 웹 뷰 — 대응자 경로 안내/위치 |
how-resolve | mobile | 해결된 신고 상태 화면 |
register-welcome | mobile | 환영 / 최초 실행 화면 |
register-form | mobile | 등록 세부 정보 화면 |
register-verify | mobile | 인증 화면 (앱에 없는 경우 생략) |
register-home | mobile | 로그인 화면 |
모바일 스크린샷: 세로, 폰에서 직접 가져온 것, 자르지 않음. 웹 스크린샷
(how-assign, how-respond): 운영센터 뷰의 가로 브라우저 캡처, 자르지 않음.
입력 워크플로 (새 배치마다)
- 각 이미지 검사 (열어보기). 용도 식별: 환영, 등록, 인증, 로그인, 홈, 카테고리 선택기, 신고 양식, 카메라/캡처, 확인, 상태/추적, 알림, 대응자 보기, 지도/경로, 기타.
- 개인정보 검토 — 실제 이름, 전화번호, 이메일, 주소, 얼굴, 번호판, 정확한 집 위치, ID, 토큰을 찾습니다. 발견 시: 중단하고 사용자에게 정리된 버전을 요청하세요. 사용자가 명시적으로 요청하지 않는 한 직접 블러 처리/편집하지 마세요. 요청 시 블러만 적용하고 UI는 절대 변경하지 마세요.
- 치수 기록 및 종횡비. UI를 자르거나 늘리지 마세요. 상태 표시줄은 그대로 둘 수 있습니다.
- 최적화:
npm run optimize:screenshots(sharp): WebP q≈82 및 AVIF q≈60으로 최대 너비 1080px 출력, 원본 종횡비 유지, 메타데이터(EXIF/GPS) 제거. 텍스트 가독성 유지 — 압축 후 작은 UI 텍스트를 확대하여 확인하세요. - 등록
src/config/screenshots.ts에 (아래 스키마 참조). - 배치 매핑 테이블 사용; 모호한 경우 한 짧은 목록으로 사용자에게 배치 제안.
- 레이아웃 검증 320/768/1440에서, CLS 없음, alt 텍스트 존재, hero만
priority사용. docs/assets-guide.md입력 로그 업데이트.
매니페스트 스키마
// src/config/screenshots.ts
export type ScreenPurpose =
| "welcome" | "register" | "verify" | "login" | "home"
| "category" | "report-form" | "capture" | "submitted"
| "status" | "notifications" | "responder" | "map" | "other";
export type Slot =
| "hero-primary" | "hero-secondary"
| "how-report" | "how-review" | "how-assign" | "how-respond" | "how-resolve"
| "showcase" | "register-welcome" | "register-form" | "register-verify" | "register-home"
| "tracking";
export type Device = "mobile" | "web"; // mobile → PhoneFrame, web → BrowserFrame
export interface Screenshot {
id: string; // "03-report-form"
src: string | null; // "/screenshots/03-report-form.webp"; null = 플레이스홀더
width: number; height: number; // 최적화 파일의 고유 픽셀
alt: string; // 화면에 보이는 내용을 사실적으로 설명
purpose: ScreenPurpose;
slots: Slot[];
device: Device;
caption?: string;
privacyChecked: boolean; // 프로덕션에서 src가 null이 아니려면 true여야 함
}
export const screenshots: Screenshot[] = [ /* ... */ ];
export const bySlot = (slot: Slot) => screenshots.filter(s => s.slots.includes(slot));
- 기본 플레이스홀더 비율:
device: "mobile"의 경우 1179×2556 (≈ 9:19.5);device: "web"의 경우 1600×1000 (≈ 16:10) — 실제 크기가 알려질 때까지. - 빌드 시 스크린샷에
src가 있지만privacyChecked: false인 경우 경고 (dev에서 console)를 표시해야 합니다.
배치 매핑
| 화면 용도 | 슬롯 | 기기 |
|---|---|---|
| home | hero-primary, register-home, showcase | mobile |
| category | hero-secondary, how-report, showcase | mobile |
| report-form / capture | how-report, showcase | mobile |
| submitted | how-review, showcase | mobile |
| status | tracking, how-resolve, showcase | mobile |
| notifications (assign) | how-assign | web |
| map/route (respond) | how-respond | web |
| welcome | register-welcome | mobile |
| register | register-form | mobile |
| verify | register-verify (해당 화면이 없으면 단계 자체 생략) | mobile |
| login | register-home | mobile |
showcase는 모바일 앱 화면(Report, Review, Resolve)만 보유합니다 — 시민 앱 쇼케이스이며, 운영센터 웹 뷰를 위한 자리가 아닙니다.
Alt 텍스트 규칙
보이는 내용을 설명하고, 마케팅 주장은 하지 마세요. 좋은 예: "카테고리 선택 화면. 구조, 경찰, 소방 및 기타 신고 유형을 나열합니다." 나쁜 예: "빠르고 쉬운 신고!" 장식용 중복(예: 반사)은 alt=""를 사용하세요.
PhoneFrame / BrowserFrame / DeviceFrame 컴포넌트
PhoneFrame: 순수 CSS 프레임, 둥근 사각형(ink-raised), 1px 내부 하이라이트, 얇은 화면 인세트, 선택적 다이내믹 아일랜드 필. PNG 기기 목업 없음.BrowserFrame: 순수 CSS 브라우저 창 프레임 (동일한 표면 언어), 세 개의 일반 크롬 점, 가짜 URL 표시줄이나 조작된 브라우저 UI 없음.device: "web"화면(Assign, Respond)에 사용됩니다.DeviceFrame:screenshot.device에서PhoneFrame또는BrowserFrame을 선택합니다 — 단계/슬롯을 일반적으로 렌더링하는 호출 지점(How It Works)에서 프레임 유형을 하드코딩하는 대신 사용하세요.- 자식:
next/image, 매니페스트의 명시적width/height,sizes설정(예:(min-width:1024px) 320px, 70vw),loading="lazy"(hero-primary 제외:priority,fetchPriority="high"). - 플레이스홀더 모드 (
src === null): 중립 그라데이션 화면, 작은 라벨 "Screenshot slot: — awaiting real app screen", 올바른 종횡비. 가짜 UI 요소, 가짜 버튼 또는 텍스트 없음. - 화면 콘텐츠는 똑바로 세워져 있고 읽을 수 있어야 함: 최대 rotateY 18°, 미러링 금지.
- 모바일 (< 1024px): 3D 회전 없음; 평면 폰, 네이티브 가로 스크롤 스냅 갤러리 (
snap-x snap-mandatory,scroll-padding), 보이는 스크롤 어포던스,aria-label이 있는 키보드 포커스 가능 영역.
배치별 체크리스트
- 모든 이미지 검사 및 용도 식별됨
- 개인 데이터 없음 (또는 사용자가 더미 데이터임을 확인)
- 최적화된 파일 각각 ~180KB 미만, 텍스트 여전히 읽기 가능
- 매니페스트 항목 완료: 치수, alt, 용도, 슬롯, 기기, privacyChecked
- 페이지에
priority이미지 하나만 있음 - 레이아웃 시프트 없음; 종횡비 유지
- 사용되지 않는 플레이스홀더 슬롯도 정직하게 라벨이 표시된 상태로 렌더링
- 통합 후 Lighthouse 모바일 재실행