iuriimedvedev-dev/interactive-infographic-report

대화형 인포그래픽 및 Agentic Judge 디자인 시스템

개요 및 철학

이 스킬은 고자유도 디자인 시스템, CSS/JS 컴포넌트 카탈로그, 복사 및 맞춤화 가능한 HTML 템플릿을 제공합니다. 이는 엄격한 Python 데이터-HTML 직렬화기가 아닙니다. AI 에이전트와 Agentic Judge LLM은 Nord 디자인 시스템 구성 요소를 사용하여 직접 사용자 정의 HTML을 작성합니다. SVG 토폴로지, 대화형 계산기, 맞춤형 생애주기 스텝퍼, 모달 딥다이브, 도메인 특화 평가 대시보드를 자유롭게 구축할 수 있습니다. 모든 아티팩트는 100% 자체 포함, 종속성 없음, 오프라인 사용이 가능합니다.

핵심 템플릿 및 자산

• assets/template-infographic.html: 다크/라이트 테마, 접이식 사이드바 목차, 애니메이션 SVG 데이터 흐름, 10단계 대화형 생애주기 스텝퍼, 다이어그램 패널, 색상 코드 비교 테이블, 컬러 미니 카드, 키보드 접근 가능 모달을 갖춘 완전한 대화형 인포그래픽 및 기술 내러티브 보일러플레이트.
• assets/template-judge-report.html: CSP 샌드박스 처리된 Agentic Judge 평가 보고서 보일러플레이트로, 결정 요약, 전체 점수, 3카드 KPI 그리드, 단계 진행 막대, 증거 비교 테이블, 컬러 Nord 미니 카드로 구성된 다중 포인트 결과, 진단 콜아웃을 포함합니다.
• assets/nord-design-system.css: 다크/라이트 CSS 사용자 정의 속성, 반응형 그리드, 다이어그램 컴포넌트, 테이블, 미니 카드, 상태 알약을 갖춘 완전한 독립형 Nord 디자인 시스템 스타일시트.
• references/design-system.md: 심층적인 토큰 사양, 대비 비율, 디자인 지침.
• lint.py: 4가지 하드 디자인 불변 조건과 안전 휴리스틱을 검증하는 유틸리티.

권장 내러티브 구조

대화형 보고서를 작성할 때는 콘텐츠를 설득력 있는 시각적 계층 구조로 구성하십시오:

1. 히어로 3카드 KPI 그리드: 눈썹 킥커, 눈에 띄는 제목, 소개 내러티브, 기본 작업 버튼, 3카드 메트릭 그리드(.metric-grid 또는 .card-grid)로 주제를 소개합니다.
2. 접이식 왼쪽 목차 사이드바: IntersectionObserver 스크롤 스파이와 모바일 서랍 지원을 기반으로 하는 <div class="toc-list"> 및 .toc-link 앵커가 포함된 <nav id="tocSidebar">를 통해 즉각적인 탐색을 제공합니다.
3. 애니메이션 SVG 아키텍처 흐름: 수평 또는 수직 경로를 따라 포함된 SVG(.flow-svg)와 애니메이션 펄스 표시기(.flow-pulse)가 있는 .diagram-flow로 컴포넌트 간의 움직임을 설명합니다.
4. 대화형 10단계 생애주기 스텝퍼/계산기: 키보드 화살표 탐색과 활성 .lc-detail 카드가 있는 .lifecycle, .lc-steps, .lc-step 버튼을 사용하여 다단계 프로세스나 알고리즘을 개별 단계로 나눕니다.
5. 컬러 .nord-mini-card 그리드: .nord-card-grid 또는 .card-mini-stack에 배열된 컬러 미니 카드(.nord-mini-card + 테두리 수정자)로 다중 포인트 목록, 권장 사항 또는 아키텍처 노트를 제시합니다.
6. 색상 코드 .compare-table 매트릭스: table.compare-table을 사용하여 트레이드오프, 시나리오 결과 또는 모델 벤치마크를 자세히 설명하고, .row-selected, .row-evaluated, .row-rejected를 적용하여 명확한 시각적 구분을 제공합니다.
7. 클릭 가능한 모달 딥다이브: .modal-layer 및 .modal을 통해 추가 기술 컨텍스트나 출처 세부 정보를 제공하며, 포커스 트래핑과 Escape 키로 닫기 접근성을 유지합니다.

구성 요소 및 컴포넌트 레시피

1. 히어로 3카드 KPI 그리드

데스크톱에서 3개의 동일한 열로 .metric-grid, .interactive-grid 또는 .nord-card-grid를 사용합니다. 카드는 행 높이에 맞춰 늘어나며, 단독으로 남은 카드는 전체 너비를 차지합니다:

<div class="card-grid metric-grid" aria-label="핵심 지표">
  <article class="hero-card">
    <span class="card-label">지연 시간</span>
    <strong>180ms</strong>
    <p>평균 왕복 응답 시간.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">신뢰성</span>
    <strong>99.98%</strong>
    <p>10,000회 실행 중 성공률.</p>
  </article>
  <article class="hero-card">
    <span class="card-label">커버리지</span>
    <strong>24 / 24</strong>
    <p>모든 벤치마크 시나리오가 확인됨.</p>
  </article>
</div>

2. 접이식 왼쪽 목차 사이드바 (0 <ul> 목록)

탐색 사이드바에서 링크를 <ul> 또는 <li> 태그 없이 <div class="toc-list"> 내부에 렌더링합니다:

<nav class="sidebar" id="tocSidebar" aria-label="목차">
  <p class="sidebar-title">이 페이지에서</p>
  <div class="toc-list">
    <a class="toc-link" href="#overview"><span>01</span> 개요</a>
    <a class="toc-link" href="#architecture"><span>02</span> 아키텍처</a>
    <a class="toc-link" href="#evaluation"><span>03</span> 평가</a>
  </div>
</nav>

3. 애니메이션 SVG 아키텍처 흐름

SVG 경로와 애니메이션 펄스로 데이터 파이프라인을 표현합니다:

<div class="diagram">
  <div class="diagram-header">
    <strong>실행 파이프라인</strong>
    <span class="diagram-caption">신호에서 평결까지</span>
  </div>
  <div class="diagram-flow" aria-label="파이프라인 단계">
    <svg class="flow-svg flow-horizontal" viewBox="0 0 600 54" preserveAspectRatio="none" aria-hidden="true">
      <path class="flow-line" d="M 0 27 H 600"/>
      <circle class="flow-pulse" cx="0" cy="27" r="5"/>
    </svg>
    <div class="flow-node"><strong>수집</strong><small>입력 정규화</small></div>
    <div class="flow-node"><strong>분석</strong><small>어설션 확인</small></div>
    <div class="flow-node"><strong>채점</strong><small>평결 생성</small></div>
  </div>
</div>

4. 컬러 Nord 미니 카드 (글머리 기호 목록 대체)

글머리 기호 목록(<ul><li>...</li></ul>)은 카드, 섹션 및 모달에서 엄격히 금지됩니다. 다중 포인트 결과를 컬러 Nord 미니 카드로 렌더링합니다:

<div class="card-mini-stack">
  <div class="nord-mini-card border-green">
    <p><strong>정확성 확인됨:</strong> 모든 테스트 케이스에서 결정론적 검사 통과.</p>
  </div>
  <div class="nord-mini-card border-blue">
    <p><strong>컨텍스트 효율성:</strong> 토큰 사용률이 최적 범위 내에 유지됨.</p>
  </div>
  <div class="nord-mini-card border-yellow">
    <p><strong>지연 시간 변동:</strong> 장애 조치 경로에 더 높은 협상 시간이 필요함.</p>
  </div>
  <div class="nord-mini-card border-red">
    <p><strong>알려진 제한 사항:</strong> 깊은 재귀는 수동 승인 게이트가 필요함.</p>
  </div>
</div>

사용 가능한 테두리 색상 수정자:

• .border-green: 성공, 통과된 검사, 확인된 강점 (#a3be8c).
• .border-blue: 주요 정보 포인트, 중립적 관찰 (#88c0d0).
• .border-yellow: 경고, 부분 결과, 주의 알림 (#ebcb8b).
• .border-purple: 보조 구조적 노트, 생애주기 힌트 (#b48ead).
• .border-orange: 중간 정도 이상 징후, 성능 주의사항 (#d08770).
• .border-red: 실패, 감지된 결함, 심각한 위험 (#bf616a).

5. 색상 코드 비교 매트릭스

.compare-table로 비교 벤치마크 및 사례 결과를 구조화합니다:

<div class="table-wrap" role="region" aria-label="옵션 비교" tabindex="0">
  <table class="compare-table">
    <thead>
      <tr>
        <th scope="col">후보</th>
        <th scope="col">상태</th>
        <th scope="col">평가</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row-selected">
        <td><span class="cell-title">모델 A</span><span class="cell-sub">권장됨</span></td>
        <td><span class="status-pill pill-good">선택됨</span></td>
        <td>높은 정확도, 가장 낮은 지연 시간, 정책 위반 제로.</td>
      </tr>
      <tr class="row-evaluated">
        <td><span class="cell-title">모델 B</span><span class="cell-sub">폴백</span></td>
        <td><span class="status-pill pill-warn">평가됨</span></td>
        <td>허용 가능한 정밀도, 그러나 더 높은 추론 비용.</td>
      </tr>
      <tr class="row-rejected">
        <td><span class="cell-title">모델 C</span><span class="cell-sub">자격 상실</span></td>
        <td><span class="status-pill pill-bad">거부됨</span></td>
        <td>스트레스 테스트 중 허용된 실행 시간 초과 초과.</td>
      </tr>
    </tbody>
  </table>
</div>

Agentic Judge HTML 평결 내보내기

Agentic Judge LLM이 최종 평가 평결을 생성할 때:

1. assets/template-judge-report.html을 기반으로 평결을 작성합니다.
2. 엄격한 콘텐츠 보안 정책 메타 태그를 유지합니다: <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:">.
3. 판사 문서 내에서 스크립트를 실행하지 마십시오. 모든 점수, 진행 막대 및 매트릭스를 정적 HTML로 직접 렌더링합니다.
4. 결정 요약(.summary.panel), 핵심 지표(.kpi-grid), 커버리지 진행(.progress-panel), 증거(.compare-table), 결과(.nord-mini-card), 진단(.callout)으로 보고서를 구성합니다.
5. 4가지 디자인 불변 조건이 모두 준수되었는지 확인합니다.

4가지 하드 디자인 불변 조건

작성된 HTML 보고서를 전달하기 전에 다음 4가지 하드 불변 조건을 확인하십시오:

1. <ul> 글머리 기호 목록 제로: <ul><li>...</li></ul> 태그는 콘텐츠, 탐색 및 모달에서 모든 곳에서 금지됩니다. 컬러 .nord-mini-card 컴포넌트 또는 <div class="toc-list"> 탐색을 사용하십시오.
2. 이모지 제로: 이모지는 텍스트, 제목 및 레이블에서 금지됩니다. 깔끔한 단색 SVG 아이콘(포함된 SVG 심볼 등) 또는 간결한 텍스트 레이블을 사용하십시오.
3. .code-block에서 ASCII 상자 그리기 제로: 상자 그리기 문자(┌─┐, │, └─┘)는 코드 패널에서 금지됩니다. 그래픽 .diagram-flow, .diagram-panels 또는 포함된 SVG를 대신 사용하십시오.
4. 유효한 .compare-table 및 .nord-mini-card CSS 클래스: 문서에 비교 테이블과 미니 카드에 대한 유효한 규칙이 있는 Nord 디자인 시스템 스타일시트가 포함되거나 연결되어 있는지 확인하십시오.

lint.py로 검증

포함된 독립형 린터를 Python에서 실행합니다:

python3 lint.py <path-to-report.html>

린터는 모든 불변 조건과 안전 검사가 통과되면 코드 0으로 종료되고, 그렇지 않으면 코드 1로 종료되며 특정 라인 수준 결과를 stderr에 출력합니다. 리포지토리 전체에서 자동화된 단위 테스트를 실행할 수도 있습니다:

python3 -m unittest discover -s tests -v