00검증 방법
| 아키타입 | v1 추정 | 전수 실측 | 오차 |
|---|---|---|---|
| A 조회 + 단일 그리드 | ~65% | 34.0% | −31.0%p 과대평가 |
| F 통계 피벗 | ~6% | 17.7% | +11.7%p 과소평가 |
| Q 시스템 상태 | ~4% | 13.8% | +9.8%p 과소평가 |
| C 탭 + 그리드 | ~5% | 11.8% | +6.8%p 과소평가 |
| B 다중 그리드 | ~7% | 5.0% | −2.0%p |
| E 편집형 그리드 | ~5% | 5.5% | 거의 일치 |
원인은 세 가지입니다. ① 샘플이 표준형에 편중됨. ② EC 통계·구축 세트의 멀티헤더 피벗이 샘플에 적게 잡힘. ③ NEW 세트 126장의 에러 페이지를 정상 화면으로 셈에 넣어 분모가 왜곡됨.
검증 절차
995개 파일을 인덱싱하고 전량 MD5 해시를 계산해 동일 이미지 그룹을 먼저 식별했습니다. 이후 995장을 모두 열어 육안 확인하고, 화면별로 아키타입 코드·상태 플래그·관측 컴포넌트·특이사항을 원장에 1행씩 기록했습니다. 픽셀 단위로 동일한 이미지는 대표 1장을 육안 확인한 뒤 나머지를 해시 동일성으로 처리했고, 해당 케이스는 원장 비고에 명시했습니다.
근거 자료를 같은 폴더에 함께 제공합니다 — census_ledger.tsv(995행 원장) · census_md5.tsv(해시) · census_codebook.txt(코드 정의).
화면 상태 실측
| 상태 | 화면수 | 비중 | 해석 |
|---|---|---|---|
| empty 빈 그리드 | 522 | 52.5% | 절반 이상이 데이터 0건 — 권한·필수조건 미충족 또는 STG 데이터 부재 |
| data 데이터 있음 | 291 | 29.2% | |
| load 로딩 노출 | 142 | 14.3% | 캡처 시점에 조회가 끝나지 않음 |
| err 에러/캡처불가 | 136 | 13.7% | |
| modal 알림 떠 있음 | 90 | 9.0% | |
| nogrid 그리드 영역 없음 | 49 | 4.9% | |
| noauth 권한없음/필수 미충족 | 44 | 4.4% | |
| noshell 셸 없는 임베디드 | 20 | 2.0% | 상위 시스템 iframe 삽입 |
플래그는 중복 부여되므로 합이 995를 넘습니다.
01아키타입 실측
995화면은 32개 아키타입으로 분류됩니다. 상위 4개가 전체의 77.3%입니다.
아키타입별 화면 비중
995장 전수 실측 · 원장 집계막대는 A(338화면)를 기준 100%로 정규화한 상대 길이입니다. 적색은 시스템 상태 화면, 주황은 개별 구현이 필요한 아키타입입니다.
아키타입별 대표 화면 — 32종 전체
각 아키타입이 실제로 어떤 형태인지 원본 캡처로 확인할 수 있게 대표 화면을 붙였습니다. 화면수는 995장 전수 집계값입니다.
Q(137화면) 내부 구성 — 에러 화면이 5종
| 유형 | 화면수 | 내용 |
|---|---|---|
| TANGO 브랜디드 플랫폼 에러 | 126 | 전량 NEW 세트. MD5 6f1d4ab4…로 픽셀 단위 동일 |
| 캡처불가 안내 문서 | 4 | 외부시스템 SSO 필요 — 가상화장비Topology · 재난관리 · T-BICS · 중계기종합감시 |
| 완전 백지 화면신규 | 3 | FIMS Innovation(STG·PRD 동일) · 구축백서 — 렌더링 실패, 셸조차 없음 |
| 세션 무효 에러신규 | 1 | RNMS 종합감시 — [오류] 세션이 유효하지 않거나 잘못된 접근경로입니다 |
| 원시 서버 에러신규 | 1 | 유선엔지니어링맵테스트 — 브랜딩 없는 Service Unavailable |
| 로딩 스플래시 | 1 | Playground Dashboard |
| 개발 플레이스홀더 유출신규 | 1 | 형상정보 관리(PRD) — #grid1 : 랙 / #grid2 : 쉘프 / #grid3 : 카드 화면 노출 |
02컴포넌트 빈도
v1의 S/A/B/C 등급은 주관적 추정이었으므로, 원장에서 집계한 실제 출현 화면 수로 대체했습니다.
| # | 컴포넌트 | 출현 | 비중 |
|---|---|---|---|
| 1 | NestedHeaderGroup — 멀티레벨 컬럼 헤더 (최대 4단) | 122 | 12.3% |
| 2 | MultiActionToolbar — 다중 액션 버튼 그룹 (최대 9개) | 98 | 9.8% |
| 3 | WrappingTabBar — 줄바꿈되는 대량 탭 (최대 23개 4행)v1 누락 | 43 | 4.3% |
| 4 | NestedTabs — 중첩 탭 2단 | 36 | 3.6% |
| 5 | GridFooterTotalRow — 하단 합계 고정행 | 28 | 2.8% |
| 6 | EmptyStateOrange — 주황 빈상태 아이콘 (회색과 2종 혼재) | 20 | 2.0% |
| 7 | FormulaColumnLabel — 컬럼 라벨에 수식 표기v1 누락 | 17 | 1.7% |
| 8 | InlineGuidanceText — 그리드 툴바 인라인 안내문 | 16 | 1.6% |
| 9 | SlaApprovalToolbar — 승인/반려/EXCEL/처리이력v1 누락 | 15 | 1.5% |
| 10 | SubtotalRow — 소계 행 (배경 강조 변형 존재) | 14 | 1.4% |
| 11 | ColumnGroupToggle — 컬럼 그룹 표시 토글 | 13 | 1.3% |
| 12 | SearchFormGen3 — VoC 계열 3세대 조회폼 | 12 | 1.2% |
| 12 | GnbVisible — PRD에서만 GNB 노출 | 12 | 1.2% |
| 14 | TabWithCountBadge — 탭 라벨에 건수 배지 | 11 | 1.1% |
| 14 | ButtonDisabled | 11 | 1.1% |
| 16 | NestedRowGroup — 좌측 다단 rowspan (최대 4단) | 10 | 1.0% |
| 17 | StackedGridSections · RequiredColumnMark · NoShellEmbedded · FrozenColumns · DynamicOrgColumnHeader | 각 9 | 각 0.9% |
| 22 | SectionHintInline · ExcelTemplateBtn · CellLinkOnValue | 각 8 | 각 0.8% |
| 25 | MultiSelectCountLabel · HelpTooltipHighlighted · HelpTooltipBtn · FooterNoticeInline · AttachmentSection · AccordionStepForm | 각 7 | 각 0.7% |
| 31 | RowCountInput · ResetButton · MonthColumns · DualPanelSelectToTarget · ColorCodedHeaderGroups · CellIconButton | 각 6 | 각 0.6% |
컴포넌트 실물 — 실제 화면에서 잘라낸 30종
표의 이름만으로는 어떤 형태인지 알기 어려우므로, 각 컴포넌트가 실제로 쓰인 화면에서 해당 부분만 잘라냈습니다.
검증센터총괄표(장비) — 대상 / 검증완료 / 총괄 / 현장사진을 3단으로 묶은 헤더. 최대 4단까지 관측됩니다.
한전가공 임차관리(NEW) — 한 툴바에 액션이 최대 9개. 사전검증·한전상태저장·임차구간등록·임차신청·착공신청·준공신청·신청결과등록·EXCEL출력.
로밍DB 대사(GSM/WCDMA) — 탭이 21개라 3행으로 줄바꿈됩니다. 국데이터 계열에서 최대 23개 4행까지 확인.
시설계획 승인관리 — 1단(투자설계/승인관리/집행위탁내역) 아래 2단(본부별 투자/사업별 투자)이 다시 붙습니다.
검증센터총괄표(장비) — 스크롤과 무관하게 그리드 하단에 고정되는 합계 행.
교환기회선현황 — 전송실 단위 소계. 청록 배경으로 강조되며 베이지 변형도 존재합니다.
선로자재 집계 — 입고(a)/폐기(b)/불량(c)/출고(d)/사용가능잔량(=a-b-c-d). 대괄호·원문자 계열도 있습니다.
KPI현황(SKT) — IP Infra본부 > 전송운용1팀 > 국사 > 지표의 4단. 라디오(본부/팀/전송실)로 헤더 깊이가 런타임에 바뀝니다.
교환기회선현황 — 본부 > 팀 > 전송실 > 대항국사 4단 병합. 마지막에 소계 행이 붙습니다.
MW 투자관리 — 설계투자비·실제투자비·트래픽·잔여채널현황·설계안을 파스텔 배경으로 구분.
eNodeB 현황비교 — 좌측 최대 4열 고정. ERP·TANGO 대조 멀티헤더와 함께 쓰입니다.
eNodeB 장비조회 — DU정보/속성정보/IP현황정보/PCI정보 체크박스로 컬럼 묶음을 켜고 끕니다.
Access망 수요 — 헤더 아래 깔때기 아이콘 행에서 컬럼마다 필터를 겁니다.
IP할당관리 — 잠금 아이콘 컬럼 + 계층 확장(▶) + 할당율 셀 배경 채움.
IP백홀 Traffic 시뮬레이션 — 시작값·끝값이 그리드 셀 안에서 바로 편집되는 입력 필드.
표준신호점 부가데이터등록 — 정렬 핸들 컬럼으로 행을 끌어 옮기고 순서저장 버튼으로 확정.
기지국사별 이원화총괄 — 양호는 청색, 미흡은 적색 링크. 집계 행이 그리드 최상단에 옵니다.
자동수정대상관리 — 링(141) / 트렁크(118) / 서비스(396)처럼 탭에 건수가 붙습니다.
리포트분석(통화품질) — VoC 계열 전용. 네이티브 select 위주 + 파란 채움 ‘검색’ + OR/AND 라디오 + 결과내재검색.
장비KPI 이력조회 — 00~23을 칸으로 고르고 전체선택/최번시선택으로 일괄 지정. 5분 12칸 드래그 선택 변형도 있습니다.
FTTH 장애관리 — 승인 / 반려 / EXCEL / 처리이력. SLA 계열 15화면이 이 툴바를 공유합니다.
선로·관로공사 정산내역(SKT) — 좌측에서 공사를 고르면 우측 ‘검색 대상 공사 리스트’에 담깁니다.
전송자재SET 관리 — 중앙 화살표로 좌우 그리드 간에 항목을 옮깁니다. 각 패널이 자체 미니 조회폼을 가집니다.
알람이력(VoC) — 같은 시스템 안에서 회색 삼각형과 주황 삼각형이 함께 쓰입니다.
5G Cell 조회 — 그리드 바로 위에 ▶로 시작하는 적색 운영 안내가 붙습니다.
재고 활용율 집계 — 일반 ?는 회색인데 여기서는 노란 배경으로 강조됩니다.
N ICT장비현황 — 활성(대표장비 조회)과 비활성(장비정보 확인)이 한 툴바에 섞입니다.
작업검토 단계 확인 — PRD에서만 Planning·청약·설계·작업·구축·임차·GIS·구성·통계·공통·To-Do가 노출되고, STG는 ‘업무구분’만 표시됩니다.
전송망 종합감시(이력) — 배속(1X)·재생·정지·경과시간. 과거 시점의 감시 상태를 되감아 봅니다.
I-MAP 감시 — 전국 지도에서 시도를 고르면 우측이 해당 시도로 드릴다운됩니다.
v1에서 “국소적일 가능성”으로 유보했으나 실재가 확인된 컴포넌트
| 컴포넌트 | 실측 | 확인된 화면 |
|---|---|---|
| 컬럼별 필터행 (깔때기 아이콘) | 5 | Eng Sheet 가이드 · Access망 수요(STG·PRD) · 국사투자관리 · 부대설비투자관리 |
| 트리 그리드 (계층 확장) | 4 | IP배분관리 · IP할당관리 · 국사별 시스템현황 · 장비현황 |
| 셀 내 인라인 편집 필드 | 3 | IP백홀 / L2SW / PTS Traffic 시뮬레이션 |
| 시간대 24칸 선택기 | 3 | 장비KPI이력조회 · 장비PI통계조회(+5분 12칸 드래그 선택) |
| 코로플레스 지도 대시보드 | 3 | I-MAP감시 · GIS-MAP감시 · 투자성과대시보드 |
| 양방향 그리드 이동 (중앙 화살표) | 2 | 전송자재SET 관리 (STG·PRD) |
| Drag&Drop 순서변경 그리드 | 1 | 표준신호점 부가데이터등록 — 정렬 핸들 + 순서저장 |
| 이력 재생 컨트롤 1X / ▶ / ■ | 1 | 전송망 종합감시(이력) |
03모듈화 범위
“어디까지 가능한가”에 대한 답. Level 3까지 전면 가능하며, Level 4는 A·B·C·E·F·V 6개 아키타입 753화면에 한해 가능합니다.
전면 모듈화 가능
995화면 전체에서 시각 스펙이 동일. Light 셸과 Dark 모니터링 셸은 동일 토큰 세트의 두 테마로 처리해야 하며, 두 셸이 공유하는 것은 severity 색상과 타이포이고 surface·보더만 테마 스위치 대상입니다.
전면 모듈화 가능
우선순위는 실측 빈도가 결정합니다 — MultiActionToolbar 98 · EmptyState 522(빈 그리드) · AlertModal 90 · GridFooterTotalRow 28. 이 4개만 통일해도 화면 대부분의 상하단이 정규화됩니다.
전면 가능 — 4개 컴포넌트가 공수의 80%
DataGrid(헤더를 선언형 트리로 1급 설계) · WrappingTabBar / NestedTabs(43+36화면, v1 누락) · SearchFormPanel(3세대 공존, 필드타입 9종) · EntityPicker(23+5화면 통합). 아래 3.1 참조.
페이지 생성
A · B · C · E · F · V 한정으로 가능
이 6개 아키타입은 조회조건·컬럼정의·액션집합만 다르고 골격·상호작용이 동일합니다. 995장 기준 75.7%, 시스템 상태화면 137장을 제외한 실제 UI 화면 858장 기준 87.8%입니다. v1이 제시한 “88%”는 후자에 해당하므로, 두 숫자를 구분해 써야 합니다.
75.7% / 87.8%
모듈화 대상 아님
정산 계산식, 요금대사 규칙, 검증센터 판정 로직, 알람 임계치 판정. UI 컴포넌트 경계 밖입니다.
3.1 DataGrid — 필수 기능과 실측 규모
| 기능 | 실측 | 비고 |
|---|---|---|
| 멀티레벨 컬럼 헤더 | 122 | 최대 4단 — 재고 활용 집계(장비), KPI현황(SKT) |
| 하단 합계 고정행 | 28 | |
| 컬럼 라벨에 수식 표기 | 17 | (=a+b-c-d) · [I/(H-M+K)] · ⓑ/ⓐ — 3계열 |
| 소계 행 | 14 | 배경 강조(청록/베이지) 변형 존재 |
| 컬럼 그룹 표시 토글 | 13 | |
| 좌측 다단 rowspan 병합 | 10 | 최대 4단 — 교환기회선현황(본부>팀>전송실>대항국사) |
| 조직 계층 동적 컬럼 헤더 | 9 | 라디오(본부/팀/전송실)로 헤더 깊이가 런타임 변경 |
| 컬럼 고정(frozen) | 9 | 최대 좌 4열 |
| 컬럼별 필터행 | 5 | |
| 트리 그리드(계층 확장) | 4 | + 잠금 아이콘 컬럼, 사용률 셀 배경 채움 |
| 셀 내 인라인 편집 | 3 | |
| Drag&Drop 순서 변경 | 1 | |
| 셀 렌더러 | — | 링크 · 아이콘버튼 · severity 바 · severity 배지 · 복합값(0 / 0) · 마스킹 · 파일명+버튼 · 배경 채움 · 컬럼 전체 배경 강조 |
3.2 SearchFormPanel — 3세대 공존이 확정됨
| 세대 | 실측 | 특징 | 사용 영역 |
|---|---|---|---|
| 1세대 | 대다수 | 3열 그리드 + 남색 밑줄 “조회” | 인벤토리 · 전송망 EC |
| 2세대 | 5 | 날짜+시+분 + 프리셋 버튼 + 분/시 단위 토글 + severity 색상 체크박스 | 운용 고장·성능 |
| 3세대 | 12 | 네이티브 <select> 위주 + 파란 채움 “검색” + 총 조회 건수 + OR/AND 라디오 + 결과내재검색 | 운용 VoC |
필드 타입은 v1이 말한 6종이 아니라 9종입니다 — text · codeSearch · select · cascadingSelect · dateRange · dateTimeHourRange · checkboxGroup · radioGroup · hourSlotSelector.
3.3 Level 4 적용 불가 영역 — 실측 규모
H·I·K·K2·NG — 27화면
V2 등 — 20화면
J·J2·U — 10화면
D·X·Y·W·U2·U3·T·G·Z·L·P·O·S·M·N — 61화면
R — 1화면
Q — 137화면
3.4 스키마 구동 화면 정의 예시 — 멀티헤더 반영
// 교환기회선현황 (ST26) — rowspan 4단 + 조직 동적 헤더 { "template": "PivotStatPage", "breadcrumb": ["전송망 Eng.-구축", "통계", "회선통계", "교환기회선현황"], "searchForm": { "fields": [ { "name": "hqCd", "label": "본부", "type": "cascadingSelect", "required": true }, { "name": "teamCd", "label": "팀", "type": "cascadingSelect", "required": true }, { "name": "tmofCd", "label": "전송실", "type": "select" }, { "name": "inclSw", "label": "교환기 포함", "type": "checkbox" } ] }, "grid": { "rowGroup": ["본부", "팀", "전송실", "대항국사"], // 좌측 rowspan 4단 "subtotal": { "level": "전송실", "label": "소계", "highlight": "teal" }, "columns": [ // 헤더를 트리로 선언 { "header": "합", "field": "total" }, { "header": "장비종류", "children": [ { "header": "ST", "field": "st" }, { "header": "MCINU", "field": "mcinu" }, { "header": "WCDMA", "field": "wcdma" }, { "header": "CDMA", "field": "cdma" } ]} ], "toolbar": ["excelDownload"] } }
04설계 부채 20건
v1의 11건에서 20건으로 늘었습니다. 16~20번은 v1에 없던 항목이며, 사용자에게 노출되는 실제 결함입니다.
| # | 항목 | 관측된 변형 | 실측 |
|---|---|---|---|
| 1 | 알림 모달 | (I) 알림 / (W) 경고 / 확인+Close(검정) / 알림+Close(검정) / ERROR+Close — 5종 | 90 |
| 2 | 필수 표시 | 라벨 앞 * / 그리드 헤더 * / ** 이중별표 / 무표시(검증만) — 4종 | 전 화면 |
| 3 | 빈 상태 아이콘 | 회색 삼각 / 주황 삼각 — 2색 혼재 | 20 |
| 4 | 빈 상태 메시지 | 조회된 데이터가 없습니다. / 데이터가 없습니다. / 검색 결과가 존재 하지 않습니다. / 조회된 결과가 없습니다. / Tree를 선택해주세요 — 5종 | 522 |
| 5 | 엑셀 버튼 라벨 | EXCEL / EXCEL 출력 / EXCEL(업로드) / EXCEL 등록 / 엑셀 업로드 / 엑셀 다운로드 / 실사업로드 — 7종 | 전 화면 |
| 6 | 총건수 표기 | 총 건수 : 43,548 / 총 0건 / (1 / 436) / Page(0/0) / 총 조회 건수 0 / (식 수: …, 대 수: …) / 총결과:8,720 — 7종 | 전 화면 |
| 7 | 페이지당건수 | 10 / 15 / 100 / 1000 / 10000 — 5종 | 그리드 전역 |
| 8 | 셀렉트 구현 | 커스텀 드롭다운 / 네이티브 <select> — 동일 폼 내 혼용 | 다수 |
| 9 | 조회 버튼 | 남색 밑줄 조회 / 파란 채움 검색 / 아이콘형 🔍 조회 | 전 화면 |
| 10 | 조회폼 세대 | 1세대 / 2세대(프리셋·분시토글) / 3세대(네이티브select·검색) — 3세대 공존 | 17 |
| 11 | 버튼 스타일 세대 | 레거시(각진 남색 밑줄) / 신규(라운드+아이콘, 파란 채움) | 5 |
| 12 | 로딩 표현 | 회색 pill 로딩중... / 3-dot 스피너 / 풀스크린 스플래시 / 버튼 위 스피너 — 4종 | 142 |
| 13 | 실시간 갱신 컨트롤 | 화면갱신시간:60+감시정지 / 갱신 카운트다운 / 시작·갱신 버튼 — 3종 | 다수 |
| 14 | AppShell 상태 | GNB 노출(PRD) / “업무구분”만(STG) / 사용자명·세션타이머 누락 / 셸 전무 | 32 |
| 15 | 에러 화면 | 브랜디드 플랫폼 에러 / 원시 Service Unavailable / 세션 무효 / 캡처불가 안내 / 완전 백지 — 5종 | 137 |
| 16 | 개발 산출물 유출신규 | #grid1 : 랙 / #grid2 : 쉘프 / #grid3 : 카드 플레이스홀더가 화면에 노출 — 형상정보 관리(PRD) | 1 |
| 17 | 원시 API 에러 노출신규 | tango.api.Unauthorized(050) : /tango-transmission-biz/…가 사용자 모달에 그대로 표시 — 사업명 신규 등록 | 1 |
| 18 | HTML 엔티티 미이스케이프신규 | H'8384가 그대로 렌더 — 전일비교_신호점 | 1 |
| 19 | 엑셀 에러값 노출신규 | #VALUE!가 그리드에 표시 — 법정동별서비스기지국추출 | 1 |
| 20 | 그리드 행 미렌더신규 | 총 87건인데 행이 렌더되지 않음 — 신규자재 입고관리(PRD). 동일 87건인 입고자재설치현황은 정상 → 렌더링 버그 | 1 |
05실행 순서
실측 빈도로 우선순위를 재정렬했습니다. 통계 피벗(F) 렌더러가 v1의 6순위에서 2순위로 상향됩니다.
결함 5건 수정 (#16~20)플레이스홀더 · API에러 · 엔티티 · #VALUE! · 행 미렌더 — 사용자 노출 결함
선행 필수설계 부채 #1~15 정규화 결정알림모달 5종 · 필수표시 4종 · 엑셀라벨 7종 · 총건수 7종
선행 필수DataGrid — 헤더를 선언형 트리로 1급 설계멀티헤더 122 · rowspan 10 · 합계 28 · 소계 14 · 동적조직헤더 9
~900화면디자인 토큰 + Atom 라이브러리Level 1
995화면SearchFormPanel + 필드타입 9종 + 3세대 통합Level 3
~850화면WrappingTabBar / NestedTabsv1 누락 항목 — 최대 23개 4행 줄바꿈, 중첩 2단
79화면MultiActionToolbar / SlaApprovalToolbar최대 9버튼 / 승인·반려·처리이력
113화면EmptyState · AlertModal · Pagination · CountLabel 통일Level 2 핵심
522 · 90화면EntityPicker 통합 (3종 Picker + 설정 패널 흡수)도메인별 중복 구현 제거
28화면T1(A) 스키마 구동 렌더러Level 4
338화면T6(F) 피벗 렌더러 — v1 6순위에서 2순위로 상향Level 4 · 실측 2위 아키타입
176화면T2(C) · T5(E) · T3(B) · V 렌더러Level 4 · 누적 753화면(75.7% / 실제화면 87.8%)
239화면Dark 테마 + MonitoringCardBoard · Matrix · ChartPanelGrid · NetworkTopologyGraphLevel 3 (모니터링)
27화면셸 없는 임베디드 대응 (AppShell 유무 분기)v1 누락 항목
20화면GisWorkbench 셸 분리Level 3 (제한)
10화면