스트리트파이터6 랭크매치 뷰어(AI로 글 작성)

[개발일지] SF6 뷰어: UI 리디자인부터 방송 자동화까지

이번 프로젝트에서는 스트리트 파이터 6(SF6) 뷰어의 UI를 대대적으로 개편했습니다. 특히 OBS 방송용 오버레이로서의 편의성을 높이기 위해 '가독성'과 '자동화'에 초점을 맞추어 진행한 작업들을 정리합니다.

OBS 방송세팅 화면

랭크점수 크롤링을 위한 대시보드

---

🎨 챕터 1: UI 리디자인 (OBS 오버레이 최적화)

기존의 투박했던 디자인을 버리고, 방송 송출 시 게임 화면을 가리지 않으면서도 정보가 한눈에 들어오도록 '클린 & 미니멀' 컨셉을 적용했습니다.

1. 사이즈 및 레이아웃 최적화

• 목표: 하단바 영역에 최적화된 컴팩트 사이즈 구현
• 결과: 전체 크기를 1400px x 180px로 조정하여 불필요한 여백을 줄이고 정보 밀도를 극대화했습니다.

2. 가독성 중심의 디자인 개선

• 완전 투명 배경(Transparent): 기존의 박스 형태 배경을 제거하여 게임 화면 위에 자연스럽게 오버레이되도록 처리했습니다.
• 폰트 가시성 강화: * 텍스트 크기 확대 및 순백색(#FFFFFF) 통일
  • **진한 검은색 그림자(Text Shadow)**를 적용하여 어떠한 게임 배경에서도 텍스트가 명확히 구분되도록 개선했습니다.

---

📊 챕터 2: 데이터 시각화 강화 (차트 & 게이지)

단순한 숫자 나열을 넘어, 시청자가 경기 흐름을 직관적으로 파악할 수 있도록 그래프와 게이지바를 개선했습니다.

1. 승률 게이지 바 (Progress Bar)

• 변경점: 두께를 기존 대비 2배인 8px로 확장.
• 특징: 캐릭터별 고유 색상(Neon Color)을 입혀 시각적 재미와 시인성을 동시에 잡았습니다.

2. MR 변동 그래프 (우측 차트)

• 네온 스타일: 형광 시안(Neon Cyan) 색상을 사용하여 미래지향적인 느낌을 강조했습니다.
• 가독성 확보: 축(Axis) 텍스트를 굵게 처리하고 진한 외곽선을 추가하여, 투명 배경에서도 점수 변화가 명확히 보이도록 설계했습니다.

---

⚙️ 챕터 3: 서버 관리 및 사용 편의성 증대

복잡한 명령어 입력 없이 버튼 클릭 한 번으로 실행할 수 있는 환경을 구축했습니다.

1. 배치 파일(Batch File) 시스템 구축

백신 오진 방지 및 실행 간소화를 위해 전용 스크립트를 제작했습니다.

• run_server.bat: 서버 실행 후 브라우저 자동 팝업
• stop_server.bat: 백그라운드에서 실행 중인 모든 서버 프로세스 완전 종료

2. 스트림덱(Stream Deck) 연동

• 배치 파일에 절대 경로를 적용하고 start cmd 명령어를 활용했습니다.
• 이제 스트림덱 버튼 하나로 방송 준비 중 간편하게 오버레이를 켜고 끌 수 있습니다.

3. 대시보드 성능 최적화

• '최근 매치(Recent Matches)' 목록을 최상위 10개로 제한했습니다.
• 이를 통해 데이터 로딩 속도를 높이고, 대시보드 화면의 가독성을 대폭 개선했습니다.