GPT-6 AstraSeoyeon Jun 📊 ↗2026년 9월 10일

시티 펄스

GPT-6 Astra로 만든 3D 예제 ‘시티 펄스’에서 Three.js, 뉴욕시 구현을 살펴보세요. 결과를 확인하고 프로젝트에 맞게 프롬프트를 수정해 보세요.

실제 모델 · 360° 비교 · 클릭해서 확대

디테일이 살아 있는 3D 에셋 만들기

다음 장면에 자세히 들여다보고 싶은 캐릭터를 더하세요. 이미지나 짧은 설명으로 정교한 텍스처가 있는 3D 에셋을 만들 수 있습니다.

# "시티 펄스" 구축: 뉴욕시 택시 운행 데이터를 보여주는 인터랙티브 3D 모빌리티 아틀라스(2025년 1월)

## 목표
한 달 동안 뉴욕이 어떻게 움직였는지 보여주는 단일 페이지 영어 웹 시각화를 구축합니다.
31일, 24시간, 263개 택시 구역을 다룹니다. 사용자는 도시의 일별 리듬을 살펴보고,
어떤 날짜든 일반적인 평일 또는 주말과 비교하며, 원하는 구역을 상세히 확인할 수 있어야 합니다.
실시간 또는 GPS 제품이 아닌, 데이터를 설명적으로 분석하는 도구입니다. 모든 시각 요소는 하나의 마크가 무엇을 나타내는지 명시해야 합니다.

## 데이터
공개 데이터 출처:
- NYC TLC 운행 기록 데이터, 옐로 택시, 2025년 1월(parquet)
- NYC TLC 택시 구역(263개 구역, 도형 및 보로 조회 정보)
- NYC 오픈 데이터 건물 외곽선(시각적 맥락을 위한 맨해튼 지역만)

전처리(Python + DuckDB 또는 pandas), 작은 정적 JSON 파일로 출력:
- 유효하지 않은 운행 기록 필터링: 2025년 1월 외 픽업, 0 이하 또는 3시간 초과 운행 시간, 알 수 없는 구역(264/265).
- 일·구역·시간대별 픽업 건수와 운행 시간 중앙값.
- 일·시간대별 상위 출발지 → 도착지 구역 쌍(집계된 흐름, 시간대별 상위 N개).
- 구역·시간대별 기준 평균: 평일 평균(23일)과 주말 평균(8일), 일별 평균. 공휴일은 평일 그룹에 포함합니다.
- 월 단위 고정 스케일: 구역·시간대별 최대 픽업 건수. 모든 날짜에 동일하게 적용해 높이를 비교할 수 있도록 합니다.
- 구역 메타데이터: ID, 이름, 보로, 중심점, 라벨 기준점. 구역 도형은 단순화합니다.
파일: month.json(일별 합계, 스케일, 상위 구역), weekday.json, weekend.json, days/2025-01-DD.json, 구역 geojson.
현재 날짜의 데이터는 지연 로딩하고, 첫 화면 렌더링을 빠르게 유지합니다.

## 기술 스택
- Three.js 0.160을 사용하는 독립 실행형 HTML 파일 하나(또는 소규모 Vite 앱), importmap을 통한 ES 모듈, OrbitControls, EffectComposer + bloom.
- D3는 스케일·포맷팅과 간단한 SVG 차트에만 사용합니다.
- 프레임워크는 필요하지 않습니다. 런타임 외부 API 호출은 금지하며, 모든 데이터는 정적 JSON에서 읽습니다.

## 레이아웃(데스크톱 1920×1080에서 스크롤 없이 한 화면에 표시)
1. 헤더: "CITY PULSE / MOBILITY ATLAS", "Recorded replay" 상태, "Data & methods" 링크.
2. 상태 행: "A city, in motion." + KPI 3개: 도시 전체 픽업 건수(선택한 시간대), 비교 평균 대비 수치, 운행 시간 중앙값.
3. 월 스트립: 31개의 날짜 버튼을 미니 막대로 표시(막대 높이 = 일별 픽업 건수, 주말 표시), 이전/다음 날짜, 날짜 선택, "Compare with" 선택 메뉴(평일 평균 · 23일 / 주말 평균 · 8일).
4. 스토리 바: "Every movement leaves a pattern."과 4개 챕터(01 Watch, 02 Unfold, 03 Compare, 04 Share), "Start the story".
5. 뷰 탭: 01 Connections, 02 Volume city, 03 Unfold 24h, 04 Ghost city, 그리고 "Share finding" 및 "Create briefing".
6. 작업 영역: 3D 지도 스테이지(왼쪽) + Location Insight 인스펙터(오른쪽, 약 330px, 내부 스크롤).
7. 타임라인: 날짜 재생, 속도(0.25×–4×), 선택한 날짜와 평균을 비교하는 24시간 막대 차트 위의 시간 슬라이더.
지도 스테이지 높이는 뷰포트에 맞춰 조정되어야 합니다(약 470px~780px 사이로 제한). 100% 확대에서도 타임라인을 포함한 전체 콘솔이 보이도록 합니다.

## 3D 장면
- 어두운 바닥, 얇은 선으로 표시한 구역 외곽선, 실제 공간의 맥락을 보여주는 희미한 맨해튼 건물 외곽선.
- 카메라: 원근 카메라, 궤도 회전 및 줌, 재중심화 버튼. 뷰를 전환할 때 사용자의 카메라 위치를 유지합니다. 단, "Unfold 24h"는 전체 매트릭스가 보이도록 항상 구도를 다시 잡습니다.
- 구역에 마우스를 올리면 이름과 픽업 건수를 툴팁으로 표시합니다. 구역을 클릭하면 선택 상태가 되고 인스펙터와 흐름이 업데이트됩니다.

뷰(전환 시 즉시 바뀌지 않고 애니메이션 적용):
- 01 Connections: 구역 간 집계 운행을 빛나는 아크와 움직이는 빛 입자로 표시합니다. 입자 밀도 ∝ 운행 건수. 주요 흐름에 라벨을 표시합니다("FROM / Midtown Center → TO / Upper East Side North, 71 trips / 18:00"). 캡션: "기록된 구역 간 운행 · 개략적 움직임. GPS 아님."
- 02 Volume city: 각 구역을 돌출 메시로 표시합니다. 높이 = 고정된 월간 스케일의 픽업 건수. 선택한 구역은 강조 표시합니다.