제로 인터랙션 지향, 브로드캐스트 대시보드의 고밀도 UX 최적화 전략

Context

탭 기반의 Idle View 구조로 인해 중계진이 RECAP과 PREVIEW 정보를 선택적으로 확인해야 하는 불편함 존재. AI 기반 투수 내러티브 생성 로직의 중복과 비정형 출력으로 인한 데이터 신뢰성 결여. 낮은 폰트 크기와 불필요한 시각적 요소로 인한 가독성 저하.

Technical Solution

• 탭 전환 방식을 제거하고 RECAP과 PREVIEW를 단일 화면에 배치하는 통합 레이아웃 설계
• MLB Schedule API 기반의 전용 Pregame Route 구축 및 TTL 300초의 캐싱 전략 적용
• 중복된 Pregame 객체 생성 로직을 단일 헬퍼 함수 fromGameState()로 추상화하여 코드 중복 제거
• LLM 기반의 비정형 텍스트 생성 방식을 buildPitcherFacts() 함수를 통한 결정론적 데이터 바인딩 구조로 변경
• 반응형 레일(280px, 320px, 360px) 도입 및 10px 미만 폰트 제거를 통한 뷰포트 데이터 밀도 최적화
• React 상태 관리 기반의 호버 이벤트를 CSS :hover 선택자로 대체하여 불필요한 리렌더링 방지

Impact

• 29개 파일 수정 및 605행 추가, 335행 삭제를 통한 코드 베이스 정제
• 텍스트 최소 크기를 10px로 상향 조정하여 가독성 확보
• Ticker 스크롤 주기를 75초로 조정하여 시각적 방해 요소 감소

Key Takeaway

실시간 방송 도구와 같이 찰나의 판단이 중요한 시스템은 사용자 인터랙션을 최소화하고 데이터의 결정론적 신뢰성을 확보하는 것이 최우선 설계 원칙임.