Streamlit과 Plotly로 구현한 스쿨존 과태료 시뮬레이터 및 실시간 히트맵

약 1개월·

188

공공 데이터를 활용해 실무적인 도구를 만드는 과정에서 직면했던 시각화 이슈와 데이터 트래킹 로직을 공유합니다.

이번 프로젝트의 핵심은 Plotly Express와 Graph Objects를 활용한 레이어 중첩 처리였습니다. 특히 히트맵 위에 동적 마커를 안정적으로 렌더링하기 위한 데이터 형변환 과정이 핵심입니다.

# 🎯 레이어 중첩 및 히트맵 렌더링 핵심 로직
fig = px.density_mapbox(
    city_counts, 
    lat='lat', lon='lon', z='조회건수', 
    radius=35,
    center=dict(lat=36.5, lon=127.5), 
    zoom=6.5,
    mapbox_style="carto-positron",
    hover_name='city'
)

전체적인 시스템 아키텍처와 Supabase를 활용한 익명 데이터 로깅 방식, 그리고 개발 과정에서 발견한 Plotly의 치명적인 렌더링 버그와 해결 방법은 아래 영상에서 자세히 확인하실 수 있습니다.