🏆45분
Challenge: 제조 AI 어시스턴트 전체 UI 완성
프론트엔드 UI 개발 (Streamlit)
Challenge: 제조 AI 어시스턴트 전체 UI 완성
통합 프로젝트 > 프론트엔드 UI 개발 (Streamlit)
Challenge: 전체 UI 완성
목표
streamlit run app/main.py 한 줄로 제조 AI 어시스턴트가 동작하는 상태까지 완성하세요.
체크리스트
[ ] app/main.py 실행 시 에러 없이 로딩
[ ] 사이드바에 시스템 상태 표시
[ ] Chat 페이지: 질문 -> 응답 -> 이력 유지
[ ] Chat 페이지: 도구 사용 로그 표시
[ ] Documents 페이지: 파일 업로드 동작
[ ] KG 페이지: 그래프 시각화 동작
[ ] Dashboard 페이지: 통계 차트 표시
[ ] 대화 초기화 버튼 동작보너스
- Chat에 스트리밍 응답 (실시간 타이핑 효과)
- KG 페이지에서 노드 클릭 시 상세 정보 패널
- 다크 모드 / 라이트 모드 지원
- 반응형 레이아웃 (모바일 대응)
요구사항
Chat 페이지: Agent 연동 채팅 + 도구 로그 표시
Documents 페이지: PDF/TXT 업로드 + 문서 목록
KG 페이지: pyvis 인터랙티브 그래프 + 검색
Dashboard 페이지: 도구 사용 통계 차트
사이드바: 시스템 상태 + 대화 초기화 + 통계
streamlit run app/main.py로 정상 실행
평가 기준
- • 4개 페이지가 모두 정상 렌더링되는가
- • Chat 페이지에서 대화 이력이 유지되는가
- • 문서 업로드가 정상 동작하는가
- • KG 그래프가 인터랙티브하게 동작하는가
- • UI가 직관적이고 사용하기 편리한가
보너스
- • 스트리밍 응답으로 실시간 타이핑 효과
- • KG 노드 클릭 시 상세 정보 표시
- • CSS 커스터마이징으로 브랜딩 적용
AI로 학습하기 — 꿀팁
제조 AI UI 완성도·UX 리뷰AI 학습 팁
AI에게 제조 현장 사용자 관점의 UI 완성도, 오류 메시지 품질, 설비 데이터 시각화 적절성을 검토받으세요.
제조 AI 어시스턴트 Streamlit UI를 완성했다. 제조 현장 운영자 관점에서 다음을 검토하고 개선안을 제시해줘: (1) 설비 상태와 이상 알림이 한눈에 파악되는가, (2) Agent 응답 중 오류 발생 시 사용자가 이해할 수 있는 메시지를 보여주는가, (3) 모바일/태블릿 현장 환경에서 사용 가능한 레이아웃인가, (4) 비전문가 제조 운영자가 AI 답변의 신뢰도를 판단할 수 있는 출처 표시가 있는가.
이 팁이 도움이 됐나요?