Flutter로 만든 배그 감도 계산기: 데스크톱 앱 제작기

작성일: 3/24/2025

이미지

배틀그라운드 감도 계산기

최근에 친구의 부탁으로 어플리케이션을 만들어 달라는 부탁이 있었는데, 배틀그라운드에서 사용할 감도계산기 라고한다. 우선 본인이 사용하고자하는 의도도있었지만, 해당 프로그램을 만들고자하는건 게임내에서 마우스 dpi를 변경하거나 감도를 바꿀때 내가 조정해야하는 감도를 계산하기위함이다 총기의 반동을 제어하는 수직감도는 유지한채로 좌우감도를 바꾸고자 하는목적이고, 윈도우 어플리케이션으로 만들어 달라는 요청이었다.

Framework 선정

우선 프레임워크의 선정과정에 대해서 고민이었는데, Python으로만들지 Typescript로 만들지 우선 고민이었는데, Python으로 만들게되면 PyQt, TypeScript로만들게되면 Electron 으로 만들지 않았을까?
비교적 두 언어다 거부감은 없었지만 경험또한 있었지만 오히려 해보지않았던 Flutter로 해보고자 하였다. (Flutter의 경우 Mac에서 빌드를하거나 웹, 어플리케이션은 다수 배포해본 경험이 있었고 어떤 결과물이 나올지 궁금했었기때문)

*친구한테는 Python으로 만들거라고 둘러댔는데 아직도 Python인 줄 아는듯하다.

과정

1. Spec

특별한 건없이 현재 설정된감도와 수직감도를 알려주고 감도를 변경할시 변경해야할 수직감도를 알려주거나 DPI가 변경되었을때 기존감도에서 변경해야할 감도를 계산해준다. 입력과도잇에 결과가 보여지게

2. UI

Material UI

기본적으로 다른 프레임워크를 하지않은 이유이긴하지만 별도로 CSS를 , MUI 등을 별도로 받아 일렉트론으로 빌드하거나 Pyqt 또한 qt_materail같은 UI를 그리는거 또한 고민이 있었다 사실 Flutter는 이미 세팅이 다되어있는데... 이미 Flutter에는 Materail UI가 기본적으로 내장되어있는것

3. Build

빌드는 Flutter에서 Mac빌드를 바로할순 없었다

"build windows" only supported on Windows hosts.

MSVC (Microsoft Visual C++), Windows SDK, Visual Studio 등이 윈도우 빌드를 위해 필요하나 이는 윈도우에서만 동작한다.

30초 정도 고민하면서 Electron으로하면 괜찮았을까? home brew에 wine을 이용하거나 하면 빌드가 된다는데? 윈도우에 다시 Flutter 세팅을해서 빌드를 해야하나 고민 했지만 가상머신을 쓰거나 원격으로 빌드를 하는 방법으로 방법을 전환했다. 마침, 개인적으로 사용하던 Lightsail서버를 GIt-hosted-runner로 세팅을 한게있었는데 이걸 사용해볼까 한다.

name: Build Windows Flutter App

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          flutter-version: "3.27.1"
          channel: "stable"
          cache: true

      - name: Install dependencies
        run: flutter pub get

      - name: Build Windows Executable
        run: flutter build windows --release

      - name: Upload Windows Build Artifact
        uses: actions/upload-artifact@v4
        with:
          name: Windows-App
          path: build\windows\x64\runner\Release

해당 Workflow를 gaction에서 실행해 내 소스코드를 Runner에서 Build하고 파일 다운로드할 수있는 다운로드 링크까지 만든다.

4. Deploy

해당 유트브에서 다운로드를 할 수 있으니 참고하자. https://www.youtube.com/watch?v=efmX-YkAw2E&t=1s

관련 태그