# Web Inspector — 화면설계서 > 자동 생성: `pptx_to_md.py` | 원본: `SCREEN_DESIGN.pptx` > 생성 시각: 2026-02-12 16:21 > **이 파일을 직접 수정하지 마세요. PPTX를 수정 후 스크립트를 재실행하세요.** ## 페이지 목록 | ID | 페이지명 | 경로 | 설명 | |-----|---------|------|------| | P-001 | 메인 페이지 (URL 입력) | `/` | URL 입력 폼 + 최근 검사 이력 요약 | | P-002 | 검사 진행 페이지 | `/inspections/{id}/progress` | 실시간 SSE 기반 4개 카테고리 프로그레스 표시 | | P-003 | 검사 결과 대시보드 | `/inspections/{id}` | 종합 점수 게이지 + 카테고리별 점수 카드 + 이슈 요약 | | P-004 | 상세 이슈 페이지 | `/inspections/{id}/issues` | 카테고리/심각도 필터 + 이슈 카드 목록 | | P-005 | 검사 이력 페이지 | `/history` | 검사 이력 테이블 + URL 검색 + 페이지네이션 | | P-006 | 트렌드 비교 페이지 | `/history/trend?url=...` | 동일 URL 시계열 라인 차트 + 점수 비교 | --- ## P-001: 메인 페이지 (`/`) ### 레이아웃 Web Inspector [검사 이력] [트렌드] 웹사이트 표준 검사 URL을 입력하면 HTML/CSS, 접근성, SEO, 성능/보안을 한 번에 검사합니다 https://example.com 검사 시작 최근 검사 이력 example1.com 점수: 85점 (A) 2026-02-12 example2.com 점수: 75점 (B) 2026-02-11 example3.com 점수: 65점 (B) 2026-02-10 ### 컴포넌트 | 컴포넌트 | Props | 상태 | |---------|-------|------| | `Header` | logo, navItems | default | | `HeroSection` | title, subtitle | default | | `UrlInputForm` | onSubmit, placeholder | default, loading, error | | `RecentInspections` | inspections, onItemClick | loading, empty, data | ### 인터랙션 | 트리거 | 동작 | 결과 | |--------|------|------| | URL 입력 후 검사 시작 버튼 클릭 | `POST /api/inspections {url}` | 검사 시작, /inspections/{id}/progress 페이지로 이동 | | URL 입력 필드에서 Enter 키 | `POST /api/inspections {url}` | 검사 시작, /inspections/{id}/progress 페이지로 이동 | | 유효하지 않은 URL 입력 | `클라이언트 검증` | 입력 필드 아래 에러 메시지 표시 | | 최근 검사 카드 클릭 | `navigate` | /inspections/{id} 결과 페이지로 이동 | | 검사 이력 네비 클릭 | `navigate` | /history 페이지로 이동 | ### 반응형: sm, md, lg --- ## P-002: 검사 진행 페이지 (`/inspections/{id}/progress`) ### 레이아웃 Web Inspector 검사 중: https://example.com 전체 진행률: 45% HTML/CSS 표준 완료 100% 접근성 (WCAG) 색상 대비 검사 중... 60% SEO 최적화 robots.txt 확인 중... 30% 성능/보안 대기 중 0% ### 컴포넌트 | 컴포넌트 | Props | 상태 | |---------|-------|------| | `Header` | logo, navItems | default | | `InspectionProgress` | inspectionId, url | connecting, running, completed, error | | `OverallProgressBar` | progress | running, completed | | `CategoryProgressCard` | categoryName, status, progress, currentStep | pending, running, completed, error | ### 인터랙션 | 트리거 | 동작 | 결과 | |--------|------|------| | 페이지 로드 | `SSE 연결 GET /api/inspections/{id}/stream` | 실시간 진행 상태 수신 시작 | | SSE progress 이벤트 수신 | `상태 업데이트` | 해당 카테고리 프로그레스 바 + 단계 텍스트 업데이트 | | SSE category_complete 이벤트 수신 | `카테고리 완료 표시` | 해당 카테고리 초록색 완료 + 점수 표시 | | SSE complete 이벤트 수신 | `navigate` | /inspections/{id} 결과 페이지로 자동 이동 | | SSE error 이벤트 수신 | `에러 표시` | 에러 메시지 표시 + 재검사 버튼 표시 | ### 반응형: sm, md, lg --- ## P-003: 검사 결과 대시보드 (`/inspections/{id}`) ### 레이아웃 Web Inspector 종합 점수 76 등급: B HTML/CSS 표준 85 A 이슈 5건 접근성 72 B 이슈 8건 SEO 68 C 이슈 6건 성능/보안 78 B 이슈 4건 검사 일시: 2026-02-12 10:00 | 소요 시간: 35초 이슈 상세 PDF 리포트 JSON 내보내기 Critical: 2 Major: 9 Minor: 8 Info: 4 | 총 23건 ### 컴포넌트 | 컴포넌트 | Props | 상태 | |---------|-------|------| | `Header` | logo, navItems | default | | `OverallScoreGauge` | score, grade | default | | `CategoryScoreCard` | categoryName, score, grade, issueCount | default | | `IssueSummaryBar` | critical, major, minor, info, total | default | | `InspectionMeta` | url, createdAt, duration | default | | `ActionButtons` | onViewIssues, onExportPdf, onExportJson | default, exporting | ### 인터랙션 | 트리거 | 동작 | 결과 | |--------|------|------| | 카테고리 점수 카드 클릭 | `navigate` | /inspections/{id}/issues?category={category} 이슈 페이지로 이동 | | 이슈 상세 버튼 클릭 | `navigate` | /inspections/{id}/issues 이슈 페이지로 이동 | | PDF 리포트 버튼 클릭 | `GET /api/inspections/{id}/report/pdf` | PDF 파일 다운로드 시작 | | JSON 내보내기 버튼 클릭 | `GET /api/inspections/{id}/report/json` | JSON 파일 다운로드 시작 | | 재검사 버튼 클릭 | `POST /api/inspections {url}` | 새 검사 시작, 진행 페이지로 이동 | ### 반응형: sm, md, lg --- ## P-004: 상세 이슈 페이지 (`/inspections/{id}/issues`) ### 레이아웃 Web Inspector 필터: 전체 HTML/CSS 접근성 SEO 성능/보안 전체 Cri Maj Min Inf Critical H-07 중복 ID 발견: 'main-content' 요소:
개선: 각 요소에 고유한 ID를 부여하세요 Major A-02 텍스트-배경 색상 대비 부족 (2.3:1) 요소:

개선: 대비율 4.5:1 이상으로 조정하세요 Major S-04 Open Graph 태그 누락: og:image 개선: 추가 ### 컴포넌트 | 컴포넌트 | Props | 상태 | |---------|-------|------| | `Header` | logo, navItems | default | | `FilterBar` | categories, severities, selectedCategory, selectedSeverity, onChange | default | | `IssueCard` | code, severity, message, element, line, suggestion | default, expanded | | `IssueList` | issues, filters | loading, empty, data | ### 인터랙션 | 트리거 | 동작 | 결과 | |--------|------|------| | 카테고리 필터 클릭 | `필터 적용` | 선택 카테고리의 이슈만 표시 | | 심각도 필터 클릭 | `필터 적용` | 선택 심각도의 이슈만 표시 | | 이슈 카드 클릭 | `토글 확장` | 이슈 상세 정보 확장/축소 | | 뒤로가기/대시보드 링크 클릭 | `navigate` | /inspections/{id} 결과 대시보드로 이동 | ### 반응형: sm, md, lg --- ## P-005: 검사 이력 페이지 (`/history`) ### 레이아웃 Web Inspector URL 검색... 검색 < 1 2 3 ... 10 > | URL | 검사 일시 | 종합 점수 | 등급 | 이슈 수 | 액션 | | --- | --- | --- | --- | --- | --- | | https://example1.com | 2026-02-12 10:00 | 85 | A | 12 | [보기] [트렌드] | | https://example2.com | 2026-02-11 14:30 | 72 | B | 18 | [보기] [트렌드] | | https://example1.com | 2026-02-10 09:15 | 78 | B | 15 | [보기] [트렌드] | | https://example3.com | 2026-02-09 16:45 | 65 | C | 22 | [보기] [트렌드] | | https://example2.com | 2026-02-08 11:20 | 68 | C | 20 | [보기] [트렌드] | ### 컴포넌트 | 컴포넌트 | Props | 상태 | |---------|-------|------| | `Header` | logo, navItems | default | | `SearchBar` | query, onSearch, placeholder | default, searching | | `InspectionHistoryTable` | inspections, page, totalPages, onPageChange, onRowClick | loading, empty, data | | `Pagination` | currentPage, totalPages, onPageChange | default | ### 인터랙션 | 트리거 | 동작 | 결과 | |--------|------|------| | URL 검색 입력 후 검색 버튼 클릭 | `GET /api/inspections?url={query}` | 필터링된 이력 목록 표시 | | 테이블 행 클릭 | `navigate` | /inspections/{id} 결과 페이지로 이동 | | 트렌드 버튼 클릭 | `navigate` | /history/trend?url={url} 트렌드 페이지로 이동 | | 페이지네이션 번호 클릭 | `GET /api/inspections?page={n}` | 해당 페이지의 이력 표시 | ### 반응형: sm, md, lg --- ## P-006: 트렌드 비교 페이지 (`/history/trend?url=...`) ### 레이아웃 Web Inspector 트렌드: https://example.com 점수 추이 차트 100 80 60 40 20 0 종합 HTML/CSS 접근성 SEO 성능/보안 02-01 02-03 02-05 02-07 02-09 02-11 최근 vs 이전 검사 비교 종합: 78 -> 82 (+4) | HTML/CSS: 80 -> 85 (+5) | 접근성: 65 -> 72 (+7) ### 컴포넌트 | 컴포넌트 | Props | 상태 | |---------|-------|------| | `Header` | logo, navItems | default | | `TrendChart` | dataPoints, categories | loading, empty, data, error | | `ChartLegend` | categories, colors, onToggle | default | | `ComparisonSummary` | latestResult, previousResult | default, noComparison | ### 인터랙션 | 트리거 | 동작 | 결과 | |--------|------|------| | 페이지 로드 | `GET /api/inspections/trend?url={url}` | 트렌드 데이터 로드 및 차트 렌더링 | | 범례 항목 클릭 | `차트 라인 토글` | 해당 카테고리 라인 표시/숨김 | | 차트 데이터 포인트 호버 | `툴팁 표시` | 해당 시점의 상세 점수 표시 | | 차트 데이터 포인트 클릭 | `navigate` | /inspections/{id} 해당 검사 결과 페이지로 이동 | | 검사 결과 1건만 있을 때 | `빈 상태 표시` | "비교할 이력이 없습니다" 메시지 + 재검사 버튼 | ### 반응형: sm, md, lg