대상 구현물: screen_03_diagnosis_v1.html — 인버터 I-V 데이터를 디지털 트윈과 대조해 스트링별 손실 원인을 특정하는 진단 화면(퍼널 3단계). 4 인버터 × 8 스트링 = 32 스트링 건강도 히트맵, 선택 스트링 상세 패널(I-V 곡선·원인 판정), 감지된 이상 목록을 제공한다. 본 문서는 실제 구현 동작을 기준으로 한 요구사항과 검증용 테스트케이스를 정의한다.
무엇을, 어디까지 검증하는가
| 항목 | 내용 |
|---|---|
| 목적 | 인버터(Huawei SUN2000 ×4) 실측 I-V 데이터를 디지털 트윈과 대조해 32개 스트링의 건강도를 시각화하고, 음영·역전류·단선·미스매치·clipping 등 손실 원인을 스트링 단위로 특정한다. 손실액을 정량화해 솔루션 제안(4단계) 전환을 유도. |
| 범위(In) | 요약 지표 4종 표시 · 4×8 건강도 히트맵 · 이상 플래그 표기 · 선택 스트링 상세 패널(I-V 곡선·원인 판정·연 손실) · 감지된 이상 목록(우선순위·손실액) · 솔루션 화면(screen_04) 전환 CTA · 사이드바 내비. |
| 범위 외(Out) | 실시간 인버터 폴링/백엔드, 측정 모드(발전량/온도) 실데이터 연동, 재동기화·PDF 리포트 생성 백엔드, 솔루션 시뮬 산출(4단계). (히트맵 셀 클릭→상세 갱신은 본 버전에서 구현됨 — FR-15 참조) |
| 가정 | 인버터 연동이 완료된 상태(연동 배지 LIVE). 히트맵 셀 값·플래그·손실액은 데모 고정 데이터이며 실측 스냅샷을 대표한다. 상세 패널은 기본으로 대표 이상 스트링 B-07(고정 음영)을 표시하며, 셀 클릭 시 해당 스트링 데이터로 갱신된다. |
테스트의 기대값 근거 (DOM 고정 데이터와 일치)
히트맵 셀 수 = 인버터(행) 4 × 스트링(열) 8 = 32
이상 플래그 합계 = 고정 음영 3 + (역전류·단선) 2 + (미스매치·clipping) 1 = 6
건강도 색상 구간 = h0 / h20 / h40 / h60 / h80 / h100 (PR 0→1, 낮을수록 적색)
연 손실 합계(¥) = 212,000 + 158,000 + 312,000 + 84,000 = 766,000
선택 스트링 B-07 = 건강도 58 · 출력 3.2/5.5kW(−42%) · 연 손실 ¥184,000
요약 스트립 — 전체 건강도 80, 고정 음영 3(B-07·C-02·C-03), 역전류/단선 2(A-05·D-08), 미스매치/clipping 1(D-05). 카테고리 합 3+2+1=6이 히트맵 플래그 수 및 감지 목록 헤더 "6건"과 일치한다.
우선순위: MUST SHOULD COULD
| ID | 요구사항 | 우선순위 |
|---|---|---|
| FR-01 | 건강도 히트맵 격자 — 4개 인버터 행(.hm-row) × 8개 스트링 열로 총 32개 셀(.cell)을 렌더. 열 헤더(.hm-colhead span) S1–S8 8개 표시. | MUST |
| FR-02 | 셀 건강도 색상 — 각 셀은 PR 기반 건강도(0–100)에 따라 h0~h100 색 구간으로 음영 처리(녹색=정상, 적색=이상). 셀에 건강도 수치 표기. | MUST |
| FR-03 | 이상 플래그 — 이상 스트링 셀에 .flag(!) 배지를 표기한다. 총 6개(A-05·B-07·C-02·C-03·D-05·D-08). | MUST |
| FR-04 | 요약 스트립 — 4장 카드(.ss): 전체 건강도(80), 고정 음영(3), 역전류/단선(2), 미스매치/clipping(1). 합 3+2+1=6. | MUST |
| FR-05 | 이상 카운트 일관성 — 페이지 상단 배지("32개 중 6개"), 요약 카테고리 합(6), 히트맵 플래그 수(6), 감지 목록 헤더("6건")가 모두 일치한다. | MUST |
| FR-06 | 상세 패널 — 선택 스트링 B-07의 건강도(58), 원인 판정(고정 음영), 위치, 현재/기대 출력(3.2/5.5kW · −42%), 손실 시간대, 연 손실(¥184,000)을 표시. | MUST |
| FR-07 | I-V 곡선 — 상세 패널에 정상 기대(점선)와 측정(계단형) 곡선을 .iv-chart svg로 시각화한다. | SHOULD |
| FR-08 | 감지된 이상 목록 — .finding 4행(D-08 단선, A-05 역전류, B/C 음영 3스트링, D-05 clipping)을 우선순위순으로 표시. 각 행 손실액 표기. | MUST |
| FR-09 | 손실액 합계 — 감지 목록 손실액(212,000 / 158,000 / 312,000 / 84,000)의 합 ¥766,000을 헤더에 표시한다. | MUST |
| FR-10 | 측정 모드 토글 — 히트맵 툴바에 건강도(PR)/발전량/온도 토글(.chip-toggle)을 제공(기본 건강도 활성). 프로토타입은 시각 표시 위주. | COULD |
| FR-11 | 사이드바 내비 — 대시보드→screen_02_dashboard_v1.html, 정밀 진단(active)→screen_03_diagnosis_v1.html, 솔루션 제안→screen_04_solution_v1.html, 로고→index.html. 내 발전소/실측 입력/리포트/설정은 링크 미연결. | MUST |
| FR-12 | 전환 CTA — 상단 "솔루션 보기 →"와 상세 패널 "이 스트링 솔루션 시뮬 →" 클릭 시 screen_04_solution_v1.html로 이동. | MUST |
| FR-13 | 건강도 범례 — 히트맵 하단에 0→100 색상 스케일 바와 플래그 키(단선/역전류·고정 음영·미스매치/오염·정상)를 제공한다. | SHOULD |
| FR-14 | 연동 상태 — 상단바에 인버터 연동 배지(Huawei 연동됨 · SUN2000 ×4 · 스트링 32 · 최근 동기화)를 표시한다. | COULD |
| FR-15 | 셀 클릭 → 상세 패널 갱신 — 히트맵 셀(.cell) 클릭 시 기존 .sel 제거 후 클릭 셀에 부여. 이상 셀(data-sid 보유)은 STRINGS[sid] 데이터로 #detailTitle·cause·위치·출력·손실시간대·연손실·권장솔루션을 갱신하고 #detailPanel을 표시. 정상 셀은 "정상 — 건강도 N · 특이사항 없음"으로 렌더하며 연손실 없음. | MUST |
| FR-16 | ✕ 버튼 닫기 — #detailClose 클릭 시 #detailPanel을 숨기고(display:none) 모든 .sel을 해제한다. | MUST |
| FR-17 | 칩 토글 모드 전환 — 칩 클릭 시 .on 이동. 발전량·온도 선택 시 #hmNotice("인버터 원시데이터 연동 시 제공") 표시; 건강도(PR) 복귀 시 숨김. | MUST |
품질 속성
| ID | 요구사항 | 분류 |
|---|---|---|
| NFR-01 | 데이터 정합성 — 히트맵 셀 값·플래그·요약 카드·감지 목록·손실 합계 간 수치가 서로 모순되지 않는다(이상 6건, 손실 ¥766,000). | Integrity |
| NFR-02 | 디자인 일관성 — Byteworx DS v1.0.4 시맨틱 토큰·Pretendard·컴포넌트 규약 준수(하드코딩 색 최소화). 히트맵 색은 --hm-* 스케일 토큰 사용. | Design |
| NFR-03 | 가독성 — 적색 셀의 수치는 명도 대비를 확보(밝은 셀은 어두운 글자). 손실액·이상은 위험 색(red-500)으로 강조. | A11y |
| NFR-04 | 반응형 — 히트맵은 가로 스크롤(.hm-wrap, min-width 760px) 보장. 1240px 이하에서 상세 패널이 아래로 단일 컬럼 전환. | Responsive |
| NFR-05 | 성능 — 정적 마크업·인라인 SVG로 외부 차트 라이브러리 없이 즉시 렌더. 폰트 CDN 실패에도 레이아웃 유지. | Perf |
| NFR-06 | 호환성 — 최신 Chrome/Edge/Safari/Firefox 데스크탑에서 동작. (모바일 레이아웃은 향후 과제) | Compat |
전제조건 · 절차 · 기대결과 · 연결 요구사항
| TC | 절차 | 기대결과 | FR |
|---|---|---|---|
| TC-A1 | 히트맵 셀(.cell) 개수 확인 | 32개. (행 .hm-row 4 × 셀/행 8 = 32 코드 검증) | FR-01 |
| TC-A2 | 인버터 행(.hm-row)·열 헤더(.hm-colhead span) 확인 | 행 4개, 열 헤더 8개(S1–S8). | FR-01 |
| TC-A3 | 이상 플래그(.cell .flag) 개수 확인 | 6개(A-05·B-07·C-02·C-03·D-05·D-08). | FR-03·FR-05 |
| TC | 절차 | 기대결과 | FR |
|---|---|---|---|
| TC-B1 | 요약 카드(.ss) 개수와 건강도 값 확인 | 카드 4장, 전체 건강도 80 표시. | FR-04 |
| TC-B2 | 카테고리 카운트 합산 | 음영 3 / 역전류·단선 2 / 미스매치·clipping 1 → 3+2+1=6 코드 검증. | FR-04·FR-05 |
| TC | 절차 | 기대결과 | FR |
|---|---|---|---|
| TC-C1 | 이상 행(.finding) 개수 확인 | 4행(D-08·A-05·B/C 음영·D-05). | FR-08 |
| TC-C2 | 각 행 손실액 표시 및 합계 검증 | 212,000 / 158,000 / 312,000 / 84,000 표시 → DOM 파싱 합 766,000 코드 검증. | FR-08·FR-09 |
| TC | 절차 | 기대결과 | FR |
|---|---|---|---|
| TC-D1 | 상세 패널 식별·건강도 확인 | B-07, 건강도 58 표시. | FR-06 |
| TC-D2 | 출력 손실률·연 손실 확인 | −42%, 연 손실 ¥184,000 표시. | FR-06 |
| TC-D3 | I-V 곡선 존재 확인 | .iv-chart svg가 렌더된다. | FR-07 |
| TC | 절차 | 기대결과 | FR |
|---|---|---|---|
| TC-E1 | 사이드바 내비 href 점검 | 대시보드→screen_02, 솔루션→screen_04, 정밀 진단 .active. | FR-11 |
| TC-E2 | "솔루션 보기 →" 클릭 | URL이 screen_04_solution_v1.html로 이동. | FR-12 |
| TC | 절차 | 기대결과 | FR/NFR |
|---|---|---|---|
| TC-F1 | DS 토큰·Pretendard 점검(개발자도구) | 색·타이포가 --bw-* 토큰 기반, Pretendard 폰트 적용. | NFR-02 |
| TC-F2 | 1240px 이하 반응형 확인 | 상세 패널이 히트맵 아래 단일 컬럼으로 전환, 히트맵 가로 스크롤 유지. | NFR-04 |
| TC | 절차 | 기대결과 | FR |
|---|---|---|---|
| TC-G1 | data-sid="D-08" 셀 클릭 | #detailTitle에 "D-08"·건강도 8, cause에 "단선", 연 손실 ¥212,000. 클릭 셀에 .sel. | FR-15 |
| TC-G2 | data-sid="A-05" 셀 클릭 | #detailTitle에 "A-05", cause에 "역전류", 연 손실 ¥158,000. | FR-15 |
| TC-G3 | D-08 클릭 후 #detailClose(✕) 클릭 | #detailPanel 숨김, .cell.sel 0개. | FR-16 |
| TC-G4 | 칩 "발전량" 클릭 | "발전량" 버튼에 .on, #hmNotice 표시. | FR-17 |
| TC-G5 | 발전량 선택 후 "건강도(PR)" 클릭 | "건강도(PR)"에 .on 복귀, #hmNotice 숨김. | FR-17 |
| TC-G6 | 인터랙션 후 회귀 검증 | 셀 32 · 플래그 6 · findings 손실 합 ¥766,000 불변. | FR-01·FR-03·FR-09 |
현재 구현의 한계와 후속 과제
| ID | 내용 |
|---|---|
| LIM-1 | 히트맵 셀·플래그·손실액은 데모 고정 데이터다. 실시간 인버터 폴링/백엔드 연동은 미구현. |
| LIM-2 | 칩 토글 발전량·온도 선택 시 히트맵 데이터 재렌더는 미연동 — 안내 오버레이(#hmNotice)만 표시. 실데이터 연동은 인버터 백엔드 구현 후 과제. |
| LIM-3 | 재동기화·PDF 리포트 버튼은 UI만 제공. 생성/다운로드 백엔드 미연동. |
| LIM-4 | 감지 목록은 4행(음영 3스트링을 1행으로 묶음)이고 이상 카운트는 6건이다 — 행 수(4)와 스트링 수(6)의 구분에 유의(설계상 의도). |
| LIM-5 | I-V 곡선은 정성적 mock SVG(실측 샘플 좌표 아님). 모바일(<640px) 레이아웃 미최적화. |
본 명세는 v1 구현 시점 기준이다. 구현 변경 시 본 문서와 테스트 기대값을 함께 갱신할 것. 이 HTML이 리뷰용 source이며, 필요 시 여기서 MD/YAML 테스트 스펙을 추출한다.