서울시 3D 날씨 시각화

🎬데모사이트 링크

서울시 425개 행정동의 날씨를 3D로 시각화하는 웹 애플리케이션

기능

줌 레벨별 시각화

전체 공통

• 3D 지도 표시, 행정 구역 구분선

줌 ≤11

• 서울시 각 구별 3D 막대 그래프

줌 11-16

• 강수량에 따른 구름/비 파티클 애니메이션

줌 ≥13

• 건물 3D 렌더링 및 인터랙션

날씨 시스템

• 5단계 날씨: 맑음 → 구름조금 → 흐림 → 비 → 폭우
• WebGL 소프트 블렌딩으로 자연스러운 구름 표현
• 30fps 타겟 최적화

상호작용

• 구/동 단위 검색 및 이동
• 마우스/터치 제스처 지원
• 반응형 디자인

기술 스택

핵심 기술

• Next.js 15.3.3 + React 19 + TypeScript
• deck.gl 9.0: WebGL 기반 3D 렌더링
• Mapbox GL JS: 베이스맵 렌더링
• Turf.js: 지리공간 계산

최적화

• LOD (Level of Detail) 시스템
• GPU 가속 파티클 렌더링
• requestAnimationFrame 기반 애니메이션
• 뷰포트 기반 컬링

개발 과정

핵심 고민과 해결책

1. 무엇이 의미 있는 시각화가 될 수 있을까

고민: 단순 시각화 vs 실제 유용한 정보

해결:

• 단순히 시각화가 아니라, 유저가 필요한 정보를 주도록 설계하고자 함.
• 인터랙션 등을 단순히 화려하게 만드는 것이 아니라, 필요한 인터랙션을 만들고자 함.

2. 구름을 구름답게 만들기

고민: 동그란 점들이 어떻게 자연스러운 구름이 될까?

해결 과정:

1. 단순 점 찍기 -> 전혀 구름 같지 않음.
2. 원으로 작업 -> 단순히 원만 있으면 어색한 느낌이 있었음.
3. Additive blending 적용 → 겹치는 부분이 밝아져 구름 덩어리 형성
4. 최종: 일관된 회색 구름 + 날씨별 밀도 / 색상 차이

3. 성능 최적화

고민: 10,000개 파티클을 어떻게 부드럽게 처리할까?

해결:

• LOD 시스템: 멀면 간단히, 가까우면 자세히
• 60fps → 30fps 목표로 배터리 수명 고려
• requestAnimationFrame + 뷰포트 컬링
• 안 보이는 건 그리지 않도록하여 최적화함.

4. 사용자 친화적 인터페이스

고민: 복잡한 3D 조작을 어떻게 직관적으로 만들까?

해결:

• 거리별 스마트 이동: 가까운 곳은 직접, 먼 곳은 전체 뷰 경유
• "파티클" → "날씨 효과" 등 일반인이 이해할 수 있는 용어 사용
• 줌 레벨별 정보를 나눠서 노출하여 인지 부하를 낮추었음.

주요 기술적 도전

• 구름 렌더링: WebGL Additive blending으로 자연스러운 융합 효과
• 성능 최적화: 10,000개 파티클을 30fps로 처리
• 정확한 지리 데이터: Turf.js 활용한 행정구역 경계 계산

코드 아키텍처

src/
├── components/          # React 컴포넌트
├── utils/              # 레이어/파티클 생성 로직
├── types/              # TypeScript 타입 정의
└── constants/          # 날씨 상수 및 색상 팔레트

메인 컴포넌트: 869줄 → 322줄 (63% 축소)

설치 및 실행

# 의존성 설치
npm install

# 환경 변수 설정
echo "NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_token" > .env.local

# 개발 서버 실행
npm run dev

성능 지표

• 타겟 FPS: 30fps
• 최대 파티클: 10,000개
• 지원 플랫폼: 데스크톱/모바일
• WebGL 요구사항: WebGL2 지원 브라우저