[개발일지] SF6 뷰어 V1.1 업데이트: 커스텀 배경 스킨 및 데이터 정합성 개선

이전글 : https://blacknabis.tistory.com/38

[개발일지] SF6 뷰어 V1.1 업데이트: 커스텀 배경 스킨 및 데이터 정합성 개선

지난번 UI 리디자인 업데이트 이후, 많은 분들이 각자의 방송 환경에 맞게 뷰어를 활용할 수 있도록 개인화(Customization) 옵션에 대한 필요성을 느꼈습니다. 이번 V1.1 업데이트에서는 방송 화면을 더욱 개성 있게 꾸밀 수 있는 '커스텀 배경 스킨' 기능과, 데이터 정합성을 높이기 위한 내부 로직 개선을 진행했습니다.

---

🎨 챕터 1: 방송 화면 커스터마이징 (커스텀 배경 스킨 지원)

기존에는 게임 화면 위에 자연스럽게 녹아들도록 완전 투명(Transparent) 배경만을 고정으로 사용했습니다. 하지만 스트리머마다 다른 컨셉의 방송 화면을 꾸밀 수 있도록, 자유로운 배경 스킨 적용 기능을 새롭게 추가했습니다.

1. 로컬 경로 및 URL을 통한 배경 이미지 삽입

• 업로드 및 URL 지원: 대시보드의 'Stats Background' 메뉴에서 웹 이미지 URL을 직접 입력하거나, [Browse...] 버튼을 통해 PC에 저장된 로컬 이미지 파일을 바로 업로드할 수 있습니다.
• 업로드된 이미지는 서버에 안전하게 저장(custom_bg.img)되며 새로고침해도 설정이 유지됩니다.

2. 가독성을 고려한 독립적인 0~100% 투명도(Opacity) 조절

• 단순히 전체 창에 투명도를 줄 경우, 텍스트와 그래프까지 흐려져버려 가장 중요한 '가독성'을 해치는 문제가 발생합니다.
• 이를 해결하기 위해 가장 하단에 전용 배경 레이어(bg-layer)를 깔아 이미지에만 단독으로 투명도를 먹이는 방식으로 구현했습니다.
• 결과: 배경은 0~100%로 세밀하게 반투명 효과(Glassmorphism)를 주면서도, 맨 앞의 정보(캐릭터, 승률, MR 그래프 등)는 100% 선명하게 돋보이도록 처리했습니다.

3. 컴팩트 사이즈(1400x180) 자동 최적화

• OBS 브라우저 소스 표준 규격으로 맞춘 1400px x 180px 하단바 사이즈에 맞추어, 어떤 크기의 이미지를 업로드하더라도 여백 없이 예쁘게 가득 차도록 background-size: cover 설정을 적용했습니다.

---

ㅁ

📊 챕터 2: 데이터 정합성 개선 (MR 변동 그래프 버그 수정)

디자인을 넘어 데이터의 정확도 또한 놓칠 수 없습니다. 우측 MR 히스토리 차트가 종종 시간의 역순(최신 기록 -> 과거 기록)으로 그려지는 현상이 발견되어 쿼리 구조를 개편했습니다.

1. 매치(Match) 로딩 순서 교정

• 기존에는 데이터베이스에서 가장 최근 N개의 매치를 불러온 그대로 그래프에 출력하여, 차트의 가장 마지막 지점과 현재 실제 MR이 불일치하는 오류가 있었습니다.
• 백엔드(/api/mr_history) 조회 로직을 수정하여, 최근 매치 데이터들을 가져온 뒤 완벽한 시간 순서(오래된 순 -> 최신 순)로 재정렬한 후 프론트에 전달하도록 개선했습니다.
• 이제 차트는 항상 최신 흐름을 향해 우상향(혹은 우하향)하는 정확한 추이를 시각적으로 보여줍니다.

---

⚙️ 챕터 3: 배포 및 실행 편의성 강화

1. V1.1 릴리즈 빌드 (SF6ViewerV1_1.zip)

• 파이썬(Python) 환경에 익숙하지 않은 윈도우 유저분들도 단 1번의 클릭만으로 손쉽게 프로그램을 실행할 수 있도록, 새로운 기능을 병합하여 독립형 실행 파일(EXE) 버전을 V1.1로 패키징해 배포했습니다.
• GitHub Releases 탭에서 SF6ViewerV1_1.zip을 다운받으실 수 있습니다.

2. Mac 유저를 위한 문서 최신화

• 윈도우 환경 이외에 Playwright와 소스코드를 직접 받아야 하는 macOS 유저들을 위해, 프로젝트 README_MAC.md와 메인 README.md 문서를 이번 신기능 설명과 함께 일괄 최신화했습니다.

---

OBS에서 적용 화면