UX/UI 개선 포인트 도출 보고서 (Sector Rotation Dashboard)

현재 구현된 Streamlit 기반 대시보드(app.py, src/ui/components.py)의 구조와 코드를 분석하여 UX/UI 관점에서의 개선 포인트를 도출했습니다.

1. 정보 구조 및 레이아웃 (Information Architecture)

사이드바(Sidebar) 과밀화 해소:
- 현황: 사이드바에 테마 설정, 기준일, 데이터 상태, 글로벌 필터, 모델 파라미터(슬라이더 및 입력창), 데이터 갱신 버튼까지 너무 많은 컨트롤이 몰려 있습니다.
- 개선: 글로벌 필터(액션 필터, 국면 필터)는 사용자가 가장 빈번하게 조작하고 메인 데이터와 직결되므로 **메인 화면의 상단(Top Bar)**으로 이동하는 것이 좋습니다. 데이터 갱신 및 상태 표시는 사이드바 하단이나 별도의 탭/모달로 분리하여 인지 부하를 줄일 필요가 있습니다.
탭(Tab) 네이밍 및 콘텐츠 재배치:
- 현황: 탭 이름이 "결정 (Decision)", "근거 (Evidence)", "신호 (Signals)"로 다소 추상적이며, 히트맵이 Decision 탭에 위치합니다.
- 개선: 직관적인 명칭인 "대시보드 요약", "모멘텀/차트 분석", "전체 종목 데이터" 등으로 변경을 권장합니다. 수익률 히트맵은 직관적인 시각 자료이므로 "근거(차트)" 탭으로 이동시키는 것이 정보 구조상 더 적합합니다.

모델 파라미터 입력 컨트롤 단순화:
- 현황: 슬라이더 세트와 '고급 직접 입력'용 숫자 입력창(Number Input) 세트가 이중으로 제공되어 UI 영역을 많이 차지합니다.
- 개선: Streamlit의 내장 st.number_input을 2단 컬럼(st.columns(2))으로 컴팩트하게 배치하거나, 기본적인 파라미터 1~2개만 노출시키고 나머지는 '고급 설정' 토글로 숨기는 형태가 깔끔합니다. Streamlit 슬라이더 자체도 숫자를 클릭하면 직접 입력이 가능하므로 부가적인 입력 필드를 제거할 수 있습니다.
상태 표시 및 알림(Feedback) 일원화:
- 현황: 여러 개의 st.warning, st.error, st.info 배너가 조건에 따라 메인 영역 상단에 중첩되어 나타날 수 있어(예: 캐시 모드, 샘플 모드, API 누락 등) 콘텐츠를 아래로 밀어냅니다.
- 개선: 중요도가 낮은 갱신 성공/실패 메시지는 **토스트 알림(st.toast)**으로 변경하여 화면 밀림을 방지하고, 시스템 연결 상태(KRX/ECOS)는 상단에 작고 통합된 **단일 상태 배너(Status Indicator)**로 묶어서 표현하는 것이 세련된 UX를 제공합니다.

컴포넌트 스타일링의 통일성 확보:
- 현황: render_macro_tile은 HTML/CSS 조작을 통해 카드로 예쁘게 구성되어 있으나, 바로 아래의 데이터 상태는 기본 st.metric을 사용하여 시각적 일관성이 부족합니다.
- 개선: 데이터 상태(Price/Macro)나 render_action_summary의 지표들도 매크로 타일과 동일한 CSS 카드 스타일(Glassmorphism 혹은 단순 Border-box)을 적용하여 전체적인 통일감을 주면 훨씬 '프리미엄'한 느낌을 줍니다.
테이블 렌더링 방식 최신화:
- 현황: Pandas Styler를 사용하여 CSS 텍스트로 테이블을 꾸미고 있습니다.
- 개선: Streamlit 최신 기능인 st.column_config 기반의 네이티브 데이터프레임을 사용하면 컬럼 정렬, 고정, 바 차트 내장, 향상된 스크롤링 등 훨씬 뛰어난 테이블 UX를 코드 복잡도 없이 제공할 수 있습니다.

레이아웃 붕괴 방지:
- 현황: 모바일 기기를 감지하여 차트 마진을 줄이는 처리는 훌륭하나, 메인 화면의 st.columns(3) (상태 지표) 등은 모바일 화면에서 폭이 좁아져 글자가 겹치거나 잘릴 수 있습니다.
- 개선: Streamlit은 컬럼을 너무 많이 나누면 모바일에서 자동으로 수직 정렬(stack)하지만 타이밍이나 폭에 따라 어색할 수 있습니다. 텍스트를 줄이거나 CSS 미디어 쿼리를 주입하여 모바일에서는 불필요한 레이블(예: '데이터 상태')을 축약하는 반응형 텍스트 처리를 권장합니다.

요약하자면: 필터의 상단 배치로 조작 직관성 향상, 이중 입력창 제거로 공간 확보, 알림의 토스트 변환 및 카드 컴포넌트 디자인 통일로 시각적 완성도를 높이는 뱡향을 추천합니다.