안녕하세요. 파이썬과 Streamlit을 활용하여 차량 주행 기록과 유지비를 시각화하는 '드라이빙 대시보드' 토이 프로젝트를 진행했습니다.

이번 프로젝트를 구현하면서 가장 까다로웠던 부분 중 하나는, Plotly 라이브러리의 기본 인터랙티브 기능(드래그, 줌)이 모바일이나 웹 대시보드 환경에서 오히려 사용성을 크게 해친다는 점이었습니다. 마우스 휠이나 스크롤 시 그래프가 의도치 않게 날아가 버리는 현상을 제어하기 위해, 아래와 같이 Plotly의 레이아웃 속성을 고정하는 방식을 적용했습니다.

Python

# Plotly 그래프 줌/드래그 원천 차단 및 레이아웃 고정 핵심 코드

fig_eff.update_layout(

title="연비 트렌드 및 차량 이슈 (화면 고정)",

hovermode='closest',

dragmode=False, # 드래그 차단

xaxis=dict(tickformat="%Y년 %m월 %d일", fixedrange=True), # X축 줌 차단

yaxis=dict(fixedrange=True) # Y축 줌 차단

)

# config 설정을 통해 상단 메뉴바 숨김 처리

st.plotly_chart(fig_eff, use_container_width=True, config={'displayModeBar': False})

단순한 데이터 입출력뿐만 아니라, Streamlit의 session_state를 활용한 상태 관리와 Supabase 연동 로직도 함께 포함되어 있습니다. 구체적인 컴포넌트 간의 작동 원리나 전체 아키텍처, 그리고 상세한 소스 코드는 아래 영상과 깃허브에 정리해 두었습니다.

데이터 시각화 대시보드 구축에 관심 있으신 분들께 도움이 되기를 바랍니다.

🔗 GitHub 소스 코드: https://github.com/gohard-lab/driving_dashboard

▶ 구체적인 작동 원리 및 개발 과정 : https://youtu.be/uVhkTbIp7rg