Dash란 무엇인가
Plotly를 만든 회사 이름도 Plotly Technologies입니다. 그 회사가 만든 웹 프레임워크가 Dash입니다. 이름만 들으면 Plotly와 별개인 것 같지만, 사실상 한 몸입니다.
Dash = Plotly + Flask + React
Plotly 차트를 화면에 보여주는 것은 React가 하고, HTTP 요청을 처리하는 것은 Flask가 합니다. 개발자는 파이썬만 씁니다. HTML도, 자바스크립트도 직접 쓸 필요가 없습니다.
pip install dash
pip install dashDash를 설치하면 plotly도 함께 설치됩니다. 이미 Plotly가 설치되어 있어도 버전 충돌 없이 진행됩니다.
pip show dash# Name: dash# Version: 3.x.x최소 코드로 첫 Dash 앱 실행하기
# 새 파일: chapter04_05_dash_hello.pyfrom dash import Dash, htmlapp = Dash(__name__)app.layout = html.Div([ html.H1("첫 Dash 앱"), html.P("Hello, Dash!")])if __name__ == "__main__": app.run(debug=True)파일을 저장하고 터미널에서 실행합니다.
python chapter04_05_dash_hello.py출력 결과는 이렇습니다.
Dash is running on http://127.0.0.1:8050/
* Serving Flask app 'chapter04_05_dash_hello'
* Debug mode: on
브라우저에서 http://127.0.0.1:8050으로 접속하면 "첫 Dash 앱"이라는 제목과 "Hello, Dash!" 문장이 보입니다.
debug=True를 주면 코드를 수정하고 저장할 때 브라우저가 자동으로 갱신됩니다. 개발할 때는 항상 켜두는 것이 편합니다.
코드를 하나씩 뜯어봅니다.
Dash(__name__): Dash 앱 인스턴스를 만듭니다.__name__은 파이썬 파일 이름을 자동으로 전달합니다.app.layout: 화면에 보여줄 컴포넌트를 정의합니다. HTML 구조와 같습니다.html.Div,html.H1,html.P: Dash의 HTML 컴포넌트입니다. HTML 태그와 1:1 대응됩니다.app.run(debug=True): 개발 서버를 시작합니다.
Dash vs Streamlit 비교
두 프레임워크 모두 파이썬으로 웹 앱을 만드는 도구입니다. 어떤 걸 쓸지 고민된다면 아래 표를 참고하세요.
| 항목 | Dash | Streamlit |
|---|---|---|
| 실행 방식 | 콜백 기반 (이벤트 → 함수 → UI) | 스크립트 기반 (위에서 아래로 재실행) |
| Plotly 연동 | 네이티브 (완전 지원) | 지원하지만 일부 기능 제한 |
| 제어 세밀도 | 높음 (컴포넌트 단위 제어) | 낮음 (전체 스크립트 재실행) |
| 학습 곡선 | 가파름 (콜백 개념 필요) | 완만함 (함수처럼 작성) |
| 적합한 용도 | 복잡한 대시보드, 프로덕션 | 빠른 프로토타입, 데이터 탐색 |
Streamlit은 빠릅니다. 데이터를 탐색하거나 동료에게 분석 결과를 빠르게 보여줄 때 좋습니다. Dash는 세밀합니다. 어떤 버튼을 눌렀을 때 어떤 컴포넌트만 바뀌는지 정확하게 제어할 수 있습니다.
캡스톤 발표처럼 완성도 있는 대시보드가 필요할 때는 Dash가 더 적합합니다.
차트 포함하기
Dash 앱에 Plotly 차트를 넣는 것은 한 줄이면 됩니다. dcc.Graph가 Plotly Figure를 받습니다.
# 수정: chapter04_05_dash_hello.pyfrom dash import Dash, html, dccimport plotly.express as pxapp = Dash(__name__)df = px.data.iris()fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", title="붓꽃 데이터 산점도")app.layout = html.Div([ html.H1("첫 Dash 앱"), html.P("Plotly 차트가 포함된 Dash 앱입니다."), dcc.Graph(figure=fig) # Plotly Figure를 그대로 넣는다])if __name__ == "__main__": app.run(debug=True)dcc.Graph(figure=fig)에서 fig는 px.scatter()가 반환한 Plotly Figure 객체입니다. 이전 장까지 배운 모든 차트를 그대로 넣을 수 있습니다.
브라우저를 새로 고침하면 산점도가 나타납니다. 차트 위에 마우스를 올리면 툴팁이 뜨고, 범례를 클릭하면 품종별로 숨기고 보이는 기능도 그대로 작동합니다. Plotly의 인터랙티브 기능이 Dash 안에서도 모두 살아있습니다.