TL;DR

  • 3D Data Globe는 기기·사용자 활동 데이터를 기기별 빛나는 구체와 이벤트 위성 노드로 표현하는 독립형 단일 HTML 파일 시각화 도구임.
  • 3d-force-graph와 Three.js를 기반으로 하며 빌드 과정이나 별도 의존성 설치 없이 브라우저에서 실행됨.
  • 기기 구체를 클릭하면 최근 이벤트별 노드와 해당 기기의 활동 로그 패널이 표시됨.
  • 자체 데이터를 연결하려면 예상 데이터 구조에 맞춰 DUMMY_USERS를 교체하고, 이벤트 유형별 라벨과 색상은 EVENT_META에서 설정함.
  • 데이터베이스 자격 증명을 브라우저에 노출하지 말고, 읽기 전용 키나 서버 측 백엔드를 사용해야 하며 재배포 시 라이선스를 추가해야 함.

3D Data Globe

  • 기기·사용자 활동 데이터를 위한 독립형 단일 파일 3D 시각화 도구임.
  • 각 기기는 활동량에 따라 크기가 정해지는 빛나는 구체로 3D 공간에 표시됨.
  • 구체를 클릭하면 최근 이벤트마다 작은 위성 노드가 하나씩 나타나고, 해당 기기의 활동 로그가 상세 패널에 열림.
  • 3d-force-graph와 Three.js 기반이며 빌드 단계와 설치할 의존성이 없음. HTML 파일 하나로 구성됨.

실행 방법

  • index.html을 브라우저에서 열거나 로컬 서버를 실행하면 됨.
  • python3 -m http.server 8000으로 서버를 실행한 뒤 http://localhost:8000에 접속함.
  • 스크립트의 DUMMY_USERS에 합성 데모 데이터가 포함돼 있어 별도 설정 없이 바로 실행됨.

자체 데이터 연결

  • 시각화는 기기당 객체 하나로 구성된 다음 형태의 데이터를 기대함.
  • id: 기기 식별자
  • points: 포인트 수
  • platform: ios, android, web 중 하나
  • city: 도시
  • totalDurationMs: 최초 관측부터 마지막 관측까지의 시간 범위(밀리초)
  • size: 렌더링되는 구체의 반지름
  • color: 렌더링되는 구체의 색상
  • inactive: true이면 작고 흐릿한 ‘활동 없음’ 구체로 렌더링됨
  • events: 이벤트 유형(type), 시간(time), 상세 내용(detail)을 담은 이벤트 배열
  • 실제 데이터를 연결하는 절차는 다음과 같음.
  • const DUMMY_USERS를 찾아 자체 백엔드나 데이터베이스에서 가져온 결과가 위 데이터 형태의 배열이 되도록 교체함.
  • initPresentation()이 실행되기 전에 결과를 baseUsers에 설정함.
  • 관리자 키나 서비스 키로 브라우저에서 데이터베이스에 직접 연결하지 않음.
  • Supabase 등을 사용하는 경우 행 수준 보안 정책이 적용된 anon key처럼 읽기 전용 공개 데이터에 한정된 키를 사용하거나, 실제 인증 정보를 서버에 보관하는 자체 백엔드 엔드포인트를 통해 공개할 필드만 반환함.
  • const EVENT_META를 찾아 각 event_type을 위성 구체와 상세 로그에 표시할 라벨 및 색상에 연결함. 자체 이벤트 어휘에 맞춰 항목을 추가하거나 이름을 변경함.

AI 코딩 도우미로 데이터 가져오기

  • Claude Code, Cursor 등 AI 코딩 도우미를 사용해 데이터를 연결하는 경우, 먼저 테이블명과 필드명을 채운 다음 데이터베이스 테이블·이벤트 테이블의 구조와 가져올 데이터 형태를 제시하는 프롬프트를 사용할 수 있음.
  • 프롬프트에는 다음 요구 사항을 포함함.
  • 사용자 또는 기기 테이블과 이벤트 테이블의 이름 및 열 이름을 지정함. 이벤트 테이블에는 최소한 사용자 외래 키, 이벤트 유형, 타임스탬프가 필요함.
  • 읽기 전용 키를 사용하거나, 서비스 키를 로컬에서만 실행하고 브라우저에서는 사용하지 않도록 지정함.
  • 데이터를 index.html의 DUMMY_USERS 배열이 기대하는 id, points, platform, city, totalDurationMs, size, color, inactive, { type, time, detail } 형태의 events 배열로 변환하도록 요청함.
  • 변환 결과를 정적 배열 DUMMY_USERS로 index.html에 포함하고 기존 합성 데이터를 교체하도록 요청함.
  • 브라우저에서 데이터베이스를 실시간 조회하지 않고 HTML 파일에 데이터베이스 자격 증명을 넣지 않도록 명시함.
  • 프로젝트 데모 데이터도 실시간 브라우저 연결 대신 데이터를 한 번 가져와 예상 구조로 변환한 뒤 정적 배열로 포함하는 방식으로 생성됨.

‘프로젝트 지원’ 카드 제거

  • 왼쪽 상단에는 원 개발자를 지원하는 링크가 포함된 작은 카드가 있음.
  • 제거하려면 HTML에서 id="support-card"인 <div class="card">...</div> 블록을 삭제함. 위치는 70행 부근임.
  • 52~67행 부근에서 #support-card로 시작하는 관련 CSS 규칙도 삭제함.

라이선스

  • 라이선스 파일이 포함돼 있지 않으므로 재배포할 계획이라면 라이선스를 추가해야 함.