React 및 Next.js 데이터 시각화은(는) 무엇을 하나요?
개요
이 스킬은 시각화가 React 또는 Next.js 제품 표면 내에 있을 때 사용합니다. 차트 렌더링 자체보다는, 컴포넌트 소유권, 하이드레이션 안전성, 클라이언트와 서버 간의 경계, 번들 전략, 그리고 React와 실제 그래픽 요소를 그리는 시각화 레이어 간의 깔끔한 통합에 초점을 맞춥니다.
기본 가정: React는 구조, 레이아웃, 애플리케이션 상태를 담당하고, 시각화 레이어는 스케일, 지오메트리 및 좁은 범위의 명령형 렌더링을 담당합니다.
주요 요청이 스크린샷 테스트, 시각적 회귀, 모의 차트 데이터 또는 E2E 커버리지 전략에 관한 것이라면, 먼저 ../testing-data-visualizations/SKILL.md로 경로를 안내하고, React 또는 Next.js 관련 구현 세부 사항에 대해서만 이 스킬로 다시 연결합니다.
이 스킬을 선택해야 하는 경우
- 사용자가 React 컴포넌트 내에서 차트를 만들고 있을 때
- 앱이 Next.js, App Router, 또는 서버/클라이언트 컴포넌트 경계를 사용할 때
- 차트가 React 표면 내에서 D3, Canvas, SVG, Vega-Lite, Plot, WebGL, deck.gl, PixiJS, Sigma.js, 또는 Three.js를 사용할 때
- 표면이 Mermaid, React Flow, Cytoscape.js, Sprotty, JointJS, GoJS, ELK, Dagre, Graphviz/WASM, D2 또는 기타 UML 유사 다이어그램 렌더러를 사용할 때
- 하이드레이션, SSR, 동적 로딩 또는 브라우저 전용 API가 구현에 영향을 미칠 때
- 번들 크기, 경로 수준 로딩 및 제품 통합이 중요할 때
- 페이지가 React 레이아웃, 스크롤 상태, 시차(parallax), 고정 그래픽, 생성된 자산, SVG/Canvas/D3/WebGL/Three.js 레이어, 파티클, 흐름 애니메이션 및 접근성 대체 수단을 결합한 편집형 시각적 스토리일 때
작업 패턴
- 서버에서 안전한 부분과 브라우저에서 실행되어야 하는 부분을 결정합니다.
- 데이터 로딩, 변환, 차트 설정 및 렌더링 레이어 관련 사항을 분리하여 유지합니다.
- 한 페이지에 동시에 표시될 수 있는 차트 인스턴스의 수와, 비용이 많이 드는 작업을 여러 인스턴스에서 공유할 수 있는지 추정합니다.
- React가 레이아웃, 컨트롤, 라우팅 상태, 지속성(persistence) 기능 및 활성 상태 요약을 소유하도록 합니다.
- D3, Canvas, Vega-Lite 임베드, Plot, WebGL 라이브러리 또는 Three.js가 마크 수준의 렌더링을 소유하도록 합니다.
- 컨트롤을 연결하기 전에 URL 기반의 보기 상태를 명시적으로 모델링합니다: 필터, 범위, 메트릭, 비교, 선택된 엔티티, 활성 탭, 맵 경계, 줌, 카메라 대상 및 드릴다운 경로.
- localStorage는 아주 작은 개인 설정에만 사용하고, 더 큰 저장된 보기, 초안, 캐시된 조각, 사용자 정의 주석 또는 공유/크로스 디바이스 워크스페이스에는 IndexedDB 또는 원격 저장소를 사용합니다. 들어오는 URL 상태는 유지된 기본값을 재정의해야 합니다.
- 브라우저 전용 시각화 코드에 대해 의도적으로 동적 로딩 또는 클라이언트 전용 경계를 사용합니다.
- 차트가 휠(wheel), 핀치(pinch) 또는 드래그 상호작용을 소유하는 경우, 브라우저 계약을 명시적으로 만듭니다. 기본 스크롤을 취소해야 하는 경우 non-passive 네이티브 리스너 또는 라이브러리 훅을 사용하고, 프레임워크 수준의
onWheel만으로 충분하다고 가정하지 마십시오. - 편집형 또는 인포그래픽 표면의 경우, 인사이트 제목, 아티팩트 모드, 부제목, 주석 계획, 출처 표기, 대형 화면 레이아웃, 모바일 세로 레이아웃, 선택적 모바일 가로 레이아웃 및 차트 렌더링 레이어를 명시적인 컴포넌트 책임으로 유지합니다. 터치, 키보드, 시각적 뷰포트, 불안정한 연결 및 디바이스 성능 결정에 대해서는
../../references/foundations/mobile-first-responsive-visualization.md를 사용합니다. - 스크롤 기반 스토리텔링 또는 시차(parallax)의 경우, 스토리 계약에 대해
../scrollytelling-and-parallax-data-visualization/SKILL.md를 사용합니다. 장면을 임시 스크롤 수학이 아닌 타입이 지정된 상태로 모델링합니다. 각 장면은 표시되는 레이어, 주석 텍스트, 미디어 자산, 카메라 또는 변환 상태, 트리거/진행 범위, 정적 키 프레임 및 축소 동작 대체 수단을 정의해야 합니다. - 고급 편집형, 보고서, 데크, 생성 이미지, 애니메이션 또는 기존 페이지 통합 작업의 경우, 구현 전에
../../references/foundations/meaning-preserving-visual-design-workflow.md및../../references/foundations/mobile-first-responsive-visualization.md를 사용합니다. 컨셉 이미지, 대형 화면/모바일 변형, 승인 또는 반복, 그리고 React가 구현해야 하는 바인딩 의미 설계 계약에 대한 공유 워크플로우를 적용합니다. - 생성된 이미지 또는 일러스트레이션의 경우, 자산을 결정론적 공개 경로 또는 가져오기 가능한 모듈에 유지하고, 레이블/데이터 오버레이는 React가 소유하는 편집 가능한 레이어에 유지합니다.
- WebGL의 경우, 렌더러 수명 주기, 크기 조정, 컨텍스트 손실, 폐기 및 애니메이션 루프를 좁은 클라이언트 전용 컴포넌트 경계 내에 유지합니다. React는 데이터 버전과 props를 전달해야 하며, 트리 전체에서 GPU 객체를 변경해서는 안 됩니다.
- 인터랙티브 UML, ERD, 의존성, 상태 머신, 흐름 또는 아키텍처 다이어그램의 경우, 먼저
../uml-and-software-architecture-visualization/SKILL.md를 사용합니다. React는 앱 상태, 패널, 컨트롤, 라우팅 및 지속성을 소유하고, 다이어그램 레이어는 레이아웃/렌더링 세부 사항을 소유합니다. - 운영용 워크스페이스의 경우, 컴포넌트 분해 전에
../../references/foundations/operational-visualization-workspaces.md를 사용합니다. React는 셸 상태, 명령 모음, 서랍, 레일, 활성 요약, URL 상태 및 검사기 동기화를 소유하고, 시각화 레이어는 지오메트리, 레이아웃 및 피킹(picking)을 소유합니다.
Next.js 가이드
- 데이터 로딩, 프레이밍 콘텐츠 및 레이아웃에는 서버 컴포넌트를 선호합니다(차트에 브라우저 API가 필요하지 않은 경우).
- 인터랙티브 차트, 컨테이너 측정, 포인터 이벤트 또는 브라우저 전용 라이브러리에는 클라이언트 컴포넌트를 사용합니다.
- 차트 런타임이 초기 경로에 필요하지 않거나 SSR을 피해야 하는 경우 동적 임포트를 사용합니다.
- 동일한 시각화가 보고서 또는 문서에 표시되어야 하는 경우 차트 자산 및 내보내기 경로를 결정론적으로 유지합니다.
- 가능하면 공유 가능한 보기 상태의 표준 입력(source of truth)으로 경로 매개변수 또는 검색 매개변수를 사용합니다. 클라이언트 전용 차트 상태를 초기화하기 전에 이를 구문 분석하고 정규화하여 연결된 보기가 관련 없는 기본값으로 깜빡이지 않도록 합니다.
- 고주파수 일시적 변경에는 replace 스타일 탐색을 사용하고, 커밋된 선택, 적용된 필터, 드릴다운 단계 및 저장된 보기 전환에는 push 스타일 탐색을 사용합니다.
- 발행 스타일 페이지의 경우, 데스크톱 및 모바일 구성을 하나의 squeezed SVG가 아닌 형제 상태로 설계합니다.
- 모바일에서는 기본 시각화를 먼저 또는 즉시 사용할 수 있도록 유지합니다. 보조 필터, 검사자 및 설정은 접을 수 있는 패널, 서랍, 바닥 시트 또는 인라인 컨트롤에 배치하고, 활성 상태 요약을 유지하며, 적용, 취소, 재설정 또는 닫기 후 차트로 포커스/스크롤을 되돌립니다.
- 밀집된 워크스페이스의 경우, 데스크톱에서는 개요/컨트롤 레일, 중앙 뷰포트 및 검사자 레일을 선호합니다. 모바일에서는 데스크톱 레일을 시각화 위에 쌓는 대신 개요, 필터 및 세부 정보 패널이 있는 명령 모음을 사용합니다.
- 키보드 중심 컨트롤의 경우
window.visualViewport또는 이와 동등한 크기 조정 처리를 사용하여 검색, 필터 및 주석 흐름이 유일한 중요한 작업을 숨기거나 시각화를 영구적으로 가리지 않도록 합니다. - 커스텀 터치/펜/마우스 상호작용에는 가능하면 포인터 이벤트를 사용하고, 명시적인
touch-action, 확대된 히트 영역, 드래그 대안, 재설정 컨트롤 및 호버 전용 증거 없음을 포함합니다. - IntersectionObserver, Scrollama, Motion
useScroll, GSAP ScrollTrigger, CSS 스크롤 타임라인 또는 명시적인 단계 컨트롤은 드물게 그리고 접근 가능하게 사용합니다. 기본 보기는 여전히 주장(claim)을 전달해야 합니다. - 고정된 스토리 섹션에는 기본 스크롤 및
position: sticky를 선호합니다. 스크롤재킹(scrolljacking)을 피하고 휠, 터치, 스크롤바 및 키보드 동작을 예측 가능하게 유지합니다. prefers-reduced-motion을 사용하여 애니메이션 스토리를 최종 상태, 키 프레임 또는 단계별 레이아웃으로 전환합니다.- 레이아웃 이동을 유발하지 않고 무거운 WebGL, 3D, 비디오 또는 이미지 생성 자산을 지연 로딩합니다. 종횡비와 레이블 영역을 예약합니다.
- WebGL 애니메이션 루프를 화면 밖, 경로 숨김, 탭 전환 또는 축소 동작이 활성화된 경우 일시 중지합니다.
출력 기대 사항
- React와 시각화 레이어 간의 소유권 경계를 명명합니다.
- 설명 작업의 경우, 인사이트 제목, 아티팩트 모드, 주석 레이어, 직접 레이블 전략 및 모바일 읽기 경로를 명명합니다.
- 모바일 작업의 경우, 모바일 세로 레이아웃, 가로 모드 지원 여부, 컨트롤이 차트를 가리지 않는 방법, 온스크린 키보드 동작 방식 및 터치/핀치 상호작용이 선택, 줌, 팬 및 재설정에 매핑되는 방식을 명명합니다.
- 운영용 워크스페이스의 경우, 셸 컴포넌트, 기본 선택 상태, 동기화된 개요/검색/필터/검사자 동작, 빈 표면 선택 해제 규칙, 모바일 명령 패널 및 URL 기반 워크스페이스 상태를 명명합니다.
- 아트 디렉션 작업의 경우, 생성되거나 일러스트레이션된 자산, 스크롤/애니메이션 상태, 축소 동작 및 정지 프레임 대체 수단을 명명합니다.
- 컨셉 표면의 경우, 컨셉 이미지, 승인 상태, 승인된 참조, 바인딩 의미 설계 계약, 잠긴 요소와 유연한 요소, React 소유 데이터 레이어, 렌더러 소유 레이어, 모바일/가로 지속 및 승인된 편차에 대한 공유 설계 워크플로우를 사용합니다.
- 스크롤 기반 스토리텔링 또는 시차(parallax)의 경우, 스크롤 컨트롤러, 장면 계약, 트리거/진행 범위, 고정(sticky) 레이아웃, 모바일 대체 수단 및 정적 키 프레임을 명명합니다.
- WebGL 또는 파티클의 경우, 렌더러, 데이터-버퍼 경계, 애니메이션 클록, 정리/폐기 경로, 축소 동작 및 정적 대체 수단을 명명합니다.
- 클라이언트 전용 또는 하이드레이션에 민감한 코드를 명시적으로 언급합니다.
- 기본 브라우저 스크롤 또는 스크롤 체이닝을 억제해야 하는 상호작용을 명시적으로 언급합니다.
- URL 기반, 로컬 유지, IndexedDB 기반, 원격 저장 또는 의도적으로 일시적인 상태를 명시적으로 언급합니다.
- 링크 복사, 저장된 보기, 재설정, 새로고침, 뒤로/앞으로 및 잘못된 URL 상태 동작을 명시적으로 언급합니다.
- 기본적으로 접혀 있거나 닫을 수 있는 컨트롤 또는 세부 정보 영역과 활성 상태가 계속 표시되는 방식을 명시적으로 언급합니다.
- 모바일에서의 실시간 데이터 연결 동작(오래된 상태, 재연결, 오프라인/부분 데이터, 저대역폭 모드 및 관련된 경우 알림/통지 전략)을 명시적으로 언급합니다.
- 차트가 SSR, 클라이언트 전용 렌더링 또는 동적 로딩에 적합한지 명시합니다.
- 새로운 작업의 경우, 동시 인스턴스 수, 인스턴스별 대 페이지 수준 성능 및 선택한 통합 패턴의 유지 관리 영향에 대한 기술 설계 섹션을 포함합니다.
- 번들 크기, 내보내기 요구 사항 및 접근성을 설계에서 볼 수 있도록 유지합니다.
참조
- 공유 이론:
../../references/foundations/editorial-infographic-system.md../../references/foundations/art-directed-interactive-visual-stories.md../../references/foundations/meaning-preserving-visual-design-workflow.md../../references/foundations/task-abstraction-and-chart-selection.md../../references/foundations/perception-color-and-encoding.md../../references/foundations/shareable-state-and-persistence.md../../references/foundations/mobile-first-responsive-visualization.md../../references/foundations/operational-visualization-workspaces.md../../references/foundations/implementation-design-and-tradeoffs.md
- 스킬 참조:
./references/react-component-patterns.md./references/d3-canvas-and-grammar-in-react.md./references/nextjs-client-server-boundaries.md./references/lazy-loading-ssr-and-bundle-strategy.md../uml-and-software-architecture-visualization/SKILL.md../scrollytelling-and-parallax-data-visualization/SKILL.md../testing-data-visualizations/SKILL.md
대표적인 프롬프트
- "이 차트를 React 앱에 어떻게 통합해야 하나요?"
- "D3, Canvas 또는 Vega-Lite에 적합한 React 패턴은 무엇인가요?"
- "이 시각화를 Next.js App Router에서 깔끔하게 작동하게 해주세요."
- "고정 그래픽과 축소 동작 대체 수단이 있는 React 스크롤 스토리텔링을 구축해주세요."
- "이 차트는 클라이언트 컴포넌트여야 하나요, 아니면 동적 임포트를 사용해야 하나요?"
- "이 시각화에서 하이드레이션 및 SSR 문제를 방지하도록 도와주세요."
- "인터랙티브 React UML, ERD, 흐름, 상태 머신, 의존성 또는 아키텍처 다이어그램을 구축해주세요."