[내일배움캠프 QA/QC 6기] TIL #050 스트림릿 입문

[ 오늘 학습한 것 ]

 

좋은 대시보드의 조건 & Streamlit 입문

 

 

1. 좋은 대시보드란

1) 나쁜 대시보드의 특징 

• 지표 과잉: 불필요하거나 중복된 그래프가 많아서 뭘 봐야 할지 헷갈림
• 연관성 없는 데이터: 여러 부서 데이터를 그냥 한 화면에 쌓아만 놓아서 비교, 분석이 어려움
• 시각적 혼란: 3D 효과, 과도한 색상으로 오히려 가독성이 떨어짐
• 액션 아이디어 부족: 문제가 보여도 뭘 해야 할지 안내가 없어서 현장에서 못 씀

2) 좋은 대시보드의 조건

• 명확한 목적 정의 (누가, 무엇을 위해 보는지)
• 핵심 지표(KPI) 중심으로 배치 (너무 많은 지표는 오히려 혼란)
• 비교와 맥락 제공 (월별/전년 대비 등으로 트렌드·이상치 빠르게 파악)
• 인터랙티브 기능 (필터, 드릴다운)

3) 설계 전 던져야 할 질문

• 누가(Who), 왜(Why), 무엇을(What), 어떻게(How), 언제(When)
• 디자인 순서는 KPI 우선 배치 → 개요 → 상세 분석 → 액션 아이디어

 

2. 제조업 주요 KPI 정리

1) 핵심 공식들

• 가동률/비가동률: 실제 가동(또는 비가동) 시간 ÷ 총 운영 가능 시간 × 100
• 초기 합격률(FPY): 첫 검사 합격 품목 수 ÷ 총 생산 품목 수 × 100
• 불량률: 불량품 수 ÷ 총 생산품 수 × 100
• 스크랩률: 폐기된 원자재량 ÷ 투입된 총 원자재량 × 100
• Throughput: 총 생산량 ÷ 생산 소요 시간
• 사이클 타임: 공정 소요 총 시간 ÷ 생산된 총 제품 수

 

3. Streamlit

1) 개념 

• Python 코드만으로 데이터 시각화, 대시보드, 인터랙티브 웹앱을 빠르게 만들 수 있는 오픈소스 프레임워크
• 복잡한 웹 개발 지식 없이도 실시간 업데이트, 슬라이더/버튼 같은 위젯, Matplotlib/Plotly 연동, 무료 배포까지 가능

2) Tableau vs Streamlit

• Tableau: 드래그 앤 드롭 기반 BI 도구, 경영자·실무자용 직관적 대시보드에 최적화
• Streamlit: Python 기반, 머신러닝 모델 실행부터 결과 시각화까지 하나의 앱으로 통합 가능, 커스터마이징 자유로움 

 

4. 환경 세팅

나중에 다시 할 수도 있으니까 정리

 

1) 패키지 설치

pip install streamlit

 

2) 설치 확인

pip list

 

3) VS Code 터미널이 PS(파워셸)로 뜰 때 CMD로 바꾸는 법

• Ctrl + Shift + P → 명령 팔레트 열기
• "Select Default Profile" 또는 "Select Default Shell" 검색 → CMD 선택

4) 데모 앱 실행 (설치 확인용)

streamlit hello

 

 

5) 간단한 앱 만들어서 실행하기

파일명: 0_streamlit_demo.py

import streamlit as st

# 페이지의 타이틀을 설정합니다.
st.title('QA/QC 트랙 여러분들 정말 반갑습니다.')

실행 명령어:

streamlit run 0_streamlit_demo.py

• 실행하면 기본 웹 브라우저에서 자동으로 앱이 열림

 

6) 앱 종료 방법

• 터미널에서 Ctrl + C
• or 터미널 창 자체를 닫기
• 브라우저 창만 닫으면 백그라운드에서 계속 실행 중일 수 있어서, 완전히 끄려면 터미널에서 Ctrl+C 해줘야 함

 

7) VS Code 안에서 바로 브라우저 열기

• Ctrl + Shift + P → "Simple Browser" 검색

 

 

파이썬 실행 방식도 오늘 다시 복습했는데, .ipynb(주피터, 한 줄씩 실행하며 대화형 개발)랑 .py(한 번에 전체 실행, 재사용·버전관리 용이) 두 가지가 있다는 거 다시 짚고 넘어갔다!

 

Streamlit은 .py 파일로 작성하고 streamlit run으로 실행하는 방식이라 노트북이랑은 다른 흐름이라는 걸 느꼈다.

 

 

---

 

[ 아티클 스터디 ]

대시보드 UX 원칙 

 

1. 요약

• 대시보드는 사용자에게 중요한 정보를 한눈에 보여주는 미리보기 화면으로, 목적을 명확히 정의하고 시작해야 한다.
• 데이터 시각화 유형 선택, 레이아웃과 그리드 설계, 일관된 컴포넌트 사용, 여백 관리 등 다양한 디자인 원칙을 준수해야 한다.
• 정보를 숨기지 않고 한 화면에서 핵심을 전달하며, 개인화를 통해 사용자를 고려하여 맞춤 정보를 전달해야 한다.

 

2. 주요 포인트

1. 대시보드의 목적을 먼저 정의 (Operational vs Analytical)
2. 데이터 특성에 맞는 정확한 시각화 유형 선택 (파이/도넛 차트, 3D 차트 지양)
3. 네이밍, 날짜 포맷, 큰 값 축소화 등 일관성 유지
4. 그리드 기반 레이아웃으로 정보 배치의 흐름 설계 (좌측 상단 우선순위)
5. 카드 등 일관된 컴포넌트로 반응형 디자인 확보
6. 충분한 여백(마진) 확보로 가독성 향상
7. 스크롤/탭 등 인터랙션에 과도하게 의존하지 않고 핵심 정보 노출 (위젯 5~7개 권장)
8. Customization보다 Personalization 우선
9. 테이블/리스트 사용 시 인터랙티브하고 정확한 나열 확인
10. 대시보드는 전체 앱 디자인 마지막 단계에서 설계

 

3. 핵심 개념

• Operational Dashboard: 실시간성, 즉각적 조치가 필요한 정보 전달 목적
• Analytical Dashboard: 시간에 덜 민감하며 트렌드 분석·의사결정 지원 목적
• Personalization: 시스템이 사용자 역할에 맞게 자동으로 제공하는 것
• Customization: 사용자가 직접 레이아웃/기능을 조정하는 것
• 그리드 시스템: 정렬과 일관성을 위한 보이지 않는 구조적 기준선

 

4. 용어 정리

• 버블 차트: 분산형 차트에 크기(3차원 정보)를 추가한 형태
• 네트워크 도표: 데이터 포인트 간 연결 관계를 시각화하는 차트
• 화이트 스페이스(네거티브 공간): 디자인 요소 사이의 여백, 가독성에 영향을 주는 요소

 

---

 

과제 진행도는 이정도~ 

많이는 안 했는데...
대시보드 틀 먼저 잡아두고 하나씩 채워나가는 중