피드로 돌아가기
I built a visual traceroute game that transforms network routes into art [AMA]
Dev.toDev.to
Infrastructure

Traceroute 데이터를 시각화 예술로 변환하는 Full-stack 시스템 구축

I built a visual traceroute game that transforms network routes into art [AMA]

hallegbg2026년 4월 26일1beginner

Context

텍스트 기반 Traceroute 출력 방식의 낮은 가독성과 시각적 정보 부재를 해결하기 위한 시도. 네트워크 경로 데이터를 지리적 좌표와 매핑하여 직관적인 경로 분석 환경을 제공하는 것이 핵심.

Technical Solution

  • React와 TypeScript 기반의 Vite 프레임워크를 통한 고성능 Interactive World Map 인터페이스 구현
  • FastAPI와 SQLAlchemy를 활용한 경량 Backend 설계를 통한 네트워크 데이터 처리 효율성 확보
  • Neon PostgreSQL 기반의 Serverless DB 구조를 채택하여 데이터 확장성 및 관리 비용 최적화
  • Hetzner VPS와 Cloudflare Pages를 결합한 하이브리드 Deployment 전략으로 네트워크 지연 시간 최소화
  • 경로 데이터의 좌표 변환 로직을 통한 Traceroute 결과의 시각적 Art 변환 프로세스 설계

- 텍스트 기반 로그 데이터를 시각적 자산으로 변환하는 데이터 매핑 파이프라인 검토 - FastAPI와 Neon PostgreSQL 조합을 통한 빠른 프로토타이핑 및 배포 환경 구축 - Cloudflare Pages를 활용한 Frontend 정적 자산 배포 최적화 적용

원문 읽기