15

경영진은 터미널을 보지 않는다. 화면을 만들 차례.

프론트엔드 UI 개발 (Streamlit)

학습 목표

MVP UI의 핵심 요구사항을 이해한다 Streamlit이 MVP에 최적인 이유를 안다

경영진은 터미널을 보지 않는다

어제까지의 성과:

AI 모델 서빙

$ python test_agent_cli.py

질문> CNC-001 알람 E-042 대응법?
[도구 호출 1] search_documents("CNC E-042 알람 대응")
[도구 호출 2] query_knowledge_graph("CNC-001")

답변: E-042는 스핀들 과열 알람입니다.
      CNC-001의 냉각시스템 CL-003을 확인하세요.
      냉각수펌프 CP-007 점검이 필요합니다.

완벽하게 동작한다. 터미널에서.

하지만 모레 데모 자리에서 이걸 보여줄 수 있을까?

[상상 속의 데모]

경영진: "... 이 검은 화면이 뭐죠?"
나: "이, 이건 터미널이라고..."
경영진: "제가 여기에 뭘 입력하면 되는 거예요?"
나: (마우스도 없는 검은 화면을 가리키며) "..."

---

[실제로 보여줘야 하는 데모]

경영진: "오, 채팅하듯 질문하면 되는 거군요."
경영진: (마우스로 클릭) "이 그래프가 설비 관계인가요? 직관적이네요."
경영진: "문서 업로드는 여기서 하면 되고... 괜찮네요."

어제 만든 두뇌에 오늘 얼굴을 붙인다.


왜 Streamlit인가?

비교StreamlitReact/Next.jsGradio
학습 곡선1시간1주일+2시간
Python OnlyYesNo (JS 필요)Yes
채팅 UI내장직접 구현내장
파일 업로드내장직접 구현내장
그래프 시각화Plotly 통합직접 구현제한적
멀티페이지내장라우터 필요탭만
배포DockerDocker + NodeDocker
MVP 적합성최적오버킬적합

Streamlit = Python 개발자가 가장 빠르게 웹 앱을 만드는 방법


오늘 만들 4개 페이지

┌─────────────────────────────────────────┐
│  제조 AI 어시스턴트                       │
│  ┌──────┬──────┬──────┬──────┐          │
│  │ Chat │ Docs │  KG  │ Dash │          │
│  └──────┴──────┴──────┴──────┘          │
│                                         │
│  Page 1: Chat (채팅)                    │
│    - 자연어 질문 -> Agent 응답           │
│    - 대화 이력 유지                      │
│    - 도구 사용 로그 표시                  │
│                                         │
│  Page 2: Documents (문서 관리)           │
│    - PDF/TXT 업로드                      │
│    - 업로드된 문서 목록                   │
│    - 문서 삭제                           │
│                                         │
│  Page 3: KG (Knowledge Graph)           │
│    - 설비 관계 시각화 (pyvis)             │
│    - 노드 클릭 시 상세 정보              │
│    - 설비 ID로 검색                      │
│                                         │
│  Page 4: Dashboard                      │
│    - 질문/응답 통계                      │
│    - 도구 사용 빈도                      │
│    - 시스템 상태 모니터링                 │
│                                         │
└─────────────────────────────────────────┘

우선순위: Page 1 (Chat) > Page 3 (KG) > Page 2 (Docs) > Page 4 (Dash)

Chat 페이지가 핵심이다. 여기에 집중하자.

AI로 학습하기 — 꿀팁
🧪MVP UI 요구사항 제조 맥락화AI 학습 팁

경영진에게 보여줄 제조 AI MVP UI의 필수 요소를 Streamlit 관점에서 AI에게 기획해 달라고 요청하세요.

제조 공장 생산팀장이 매일 오전 확인하는 AI 어시스턴트 MVP Streamlit 화면을 기획해줘. 설비 이상 알림, 오늘의 생산 지표, 고장 예측 Q&A 입력창이 포함되어야 하며, 각 UI 요소를 Streamlit 위젯과 1:1 대응시켜 설명해줘.
이 팁이 도움이 됐나요?