안녕하세요! 최근 Street Fighter 6 방송용 전적 오버레이 프로그램인 SF6 Viewer를 개발하며 겪은 과정과, AI 코딩 어시스턴트 Antigravity를 활용해 어떻게 난관들을 극복했는지 공유하려 합니다.
1. 프로젝트의 시작: "방송 화면에 내 전적을 멋지게 띄우고 싶다"
스트리트 파이터 6를 즐기면서 시청자들에게 실시간으로 연승/연패 기록과 MR 변동을 보여주고 싶었습니다. 기존 웹 기반 툴은 새로고침이 번거롭거나 디자인이 투박했죠.
그래서 "게임 화면 위에 자연스럽게 녹아드는 투명한 HUD"를 직접 만들기로 결심했습니다. 하지만 혼자서 디자인부터 DB 설계, 크롤링, 배포 파일 패키징까지 하기엔 시간이 부족했습니다.
해결책: Antigravity에게 "SF6 Viewer를 만들어줘"라고 요청했습니다.
2. 디자인의 진화: 텍스트 한 줄에서 글래스모피즘까지 🎨
초기 프로토타입은 단순히 텍스트만 나열된 형태였습니다. 하지만 Antigravity에게 "더 프리미엄하고 모던하게", "사이버펑크 느낌의 네온 컬러를 써줘"라고 요청하자, 놀라운 변화가 일어났습니다.
- Glassmorphism: 배경을 반투명하게 블러 처리하여 게임 화면을 가리지 않으면서도 가독성을 높였습니다.
- Area Chart: 단순한 꺾은선 그래프 대신 그라데이션이 들어간 영역 차트로 MR 상승/하락 추이를 직관적으로 표현했습니다.
- Micro-Animations: 수치가 변할 때 부드럽게 숫자가 올라가는 애니메이션을 적용했습니다.
저 혼자 CSS를 깎았다면 며칠이 걸렸을 작업을, AI와 티키타카하며 단 몇 시간 만에 완성했습니다.
3. 기술적 도전: Playwright와 실시간 데이터 수집 🕷️
가장 중요한 기능은 실시간 전적 수집이었습니다. 공식 API가 없기 때문에 Playwright를 사용하여 백그라운드 웹 크롤링을 구현했습니다.
Antigravity의 활약:
- 브라우저를 띄우지 않는 Headless 모드 구현
- 로그인 세션 유지 (auth.json) 로직 작성
- 30초마다 자동으로 데이터를 긁어와 DB를 갱신하는 비동기 스케줄러 개발
덕분에 게임을 하는 동안 알아서 전적이 쌓이는 시스템이 완성되었습니다.
4. 배포의 악몽: EXE 패키징과 Windows Defender 🛡️
개발의 90%가 끝났다고 생각했을 때, 진짜 보스가 등장했습니다. 바로 PyInstaller 패키징과 Windows Defender였습니다.
문제 1: "바이러스 아님?"
PyInstaller로 --onefile 빌드를 하자마자 Defender가 파일을 냅다 격리해버렸습니다.
👉 해결: --onedir (폴더 방식)로 변경하고 UPX 압축을 해제하여 오탐지를 피해갔습니다.
문제 2: "브라우저 어디 갔어?"
EXE로 만들었더니 Playwright가 내장 브라우저를 찾지 못해 "Executable doesn't exist" 에러를 뿜으며 실행되지 않았습니다. 내장 브라우저를 포함하면 용량이 수백 MB가 넘어가서 배포하기도 힘들었죠.
👉 Antigravity의 솔루션:
"굳이 무거운 브라우저를 넣지 말고, 사용자 PC에 이미 설치된 Chrome이나 Edge를 쓰도록 코드를 바꾸자!"scraper.py에 시스템 브라우저 감지 로직을 추가하여 용량은 줄이고 실행 안정성은 높였습니다.
5. 디버깅 에피소드: "들여쓰기 하나 때문에..." 🐛
마지막 배포 직전, ModuleNotFoundError가 발생하며 프로그램이 켜지지도 않는 사태가 벌어졌습니다.
알고 보니 제가 디버그 코드를 추가하다가 Python의 생명인 들여쓰기(Indentation) 를 실수했던 것이었죠.
Antigravity는 로그를 보자마자 "scraper.py의 while 루프 들여쓰기가 잘못되었습니다"라며 정확한 원인을 찾아내고, 즉시 수정 코드를 제안해주었습니다. (머쓱...)
6. 결론: 개발자와 AI의 페어 프로그래밍
혼자였다면 Windows Defender 이슈에서 포기하거나, 디자인을 대충 타협했을지도 모릅니다. 하지만 Antigravity가 옆에서 "이런 방법은 어때요?", "이 에러는 이렇게 고치면 됩니다"라고 끊임없이 가이드를 주었기에 SF6 Viewer v1.0을 무사히 배포할 수 있었습니다.
이제 제 방송 화면 한구석엔 제가(그리고 AI가) 만든 멋진 전적판이 빛나고 있습니다. ✨
GitHub 저장소 바로가기
Created with Python, FastAPI, Playwright, and Antigravity
'AI > Etc' 카테고리의 다른 글
| gpt pro 할인!! (0) | 2026.02.13 |
|---|---|
| AI모델 주저리 주저리... (Claude Opus 4.6 아주 짤막한 사용기) (0) | 2026.02.12 |
| 스트리트파이터6 랭킹 수집 및 OBS 도우미 (2) | 2026.02.10 |
| 스도쿠캣 테스트 플랜 (0) | 2026.02.08 |
| Unity 개발 생산성 300% 향상! AI 코딩 어시스턴트용 필수 스킬 모음! (0) | 2026.02.07 |