Flutter 튜토리얼 64편: 데스크톱과 웹 배포

학습 목표#

macOS 앱을 App Store에 배포하기
Linux 앱을 Snap Store에 배포하기
Windows 앱을 Microsoft Store에 배포하기
Flutter 웹 앱을 Firebase Hosting에 배포하기

1. 데스크톱/웹 배포 개요#

1.1 왜 데스크톱/웹 배포가 필요한가?#

이유: 모바일만으로는 모든 사용자를 커버할 수 없습니다. 데스크톱 앱은 생산성 도구나 전문 소프트웨어에 적합하고, 웹 앱은 설치 없이 접근 가능한 진입점을 제공합니다.

1.2 플랫폼별 배포 흐름#

flowchart TD A[Flutter 앱] --> B{타겟 플랫폼} B -->|macOS| C[App Store Connect] B -->|Linux| D[Snap Store] B -->|Windows| E[Microsoft Store] B -->|Web| F[웹 호스팅] C --> G[TestFlight → 출시] D --> H[snapcraft 빌드 → 업로드] E --> I[MSIX 패키징 → 제출] F --> J[Firebase/GitHub Pages]

1.3 플랫폼별 요구사항 비교#

항목	macOS	Linux	Windows	Web
스토어	App Store	Snap Store	Microsoft Store	자체 호스팅
개발자 계정	Apple Developer ($99/년)	Snap 계정 (무료)	Partner Center (무료~$19)	불필요
패키징 도구	Xcode	snapcraft¹	MSIX²	flutter build web
서명 필요	필수	선택	선택	불필요

2. macOS - App Store 배포#

2.1 왜 App Store 배포를 선택하는가?#

이유: Mac App Store는 macOS 사용자에게 신뢰할 수 있는 공식 배포 채널입니다. Apple의 검증을 거쳐 보안성이 보장되고, 자동 업데이트와 결제 시스템을 활용할 수 있습니다.

2.2 사전 준비#

무엇을: App Store 배포를 위해 필요한 계정과 설정을 준비합니다.

준비 항목	설명
Apple Developer Program	연 $99 등록, 배포 인증서 발급 필요
App Store Connect	앱 등록, 심사 관리, 판매 설정
Bundle ID³	앱 고유 식별자 (예: com.example.myapp)
Xcode	macOS 빌드 및 아카이브 생성

2.3 Xcode 프로젝트 설정#

어떻게: Xcode에서 macOS 프로젝트를 열고 필수 설정을 구성합니다.

1
# Flutter macOS 프로젝트 열기
2
open macos/Runner.xcworkspace

Xcode에서 설정할 항목:

설정	위치	값
App Category	General → Identity	앱 카테고리 선택
Bundle Identifier	General → Identity	Bundle ID 입력
Deployment Target	General → Deployment Info	macOS 10.14 이상 권장
Signing	Signing & Capabilities	Team 및 인증서 선택

2.4 앱 버전 설정#

무엇을: pubspec.yaml에서 버전 번호를 설정합니다.

1
version: 1.0.0+1
2
# 형식: <version>+<build>
3
# version: App Store에 표시되는 버전 (1.0.0)
4
# build: 내부 빌드 번호 (1)

주의사항:

매 제출마다 빌드 번호를 증가시켜야 합니다
동일 버전에서 빌드 번호만 올려 재제출 가능합니다

2.5 릴리스 빌드 생성#

어떻게: 릴리스 모드로 macOS 앱을 빌드합니다.

1
# 릴리스 빌드
2
flutter build macos --release

2.6 Archive 생성 및 업로드#

어떻게: Xcode에서 Archive를 생성하고 App Store Connect에 업로드합니다.

sequenceDiagram participant D as Developer participant X as Xcode participant A as App Store Connect D->>X: Product → Archive X->>X: 빌드 및 서명 X->>D: Archive 완료 D->>X: Distribute App X->>A: 앱 업로드 A->>A: 자동 검증 A->>D: TestFlight 준비 완료

Xcode 메뉴 경로:

Product → Archive
Archive 완료 후 Distribute App 클릭
App Store Connect 선택
Upload 선택 후 진행

2.7 TestFlight와 출시#

어떻게: App Store Connect에서 TestFlight 테스트 후 정식 출시합니다.

단계	설명
TestFlight 내부 테스트	팀원 최대 100명, 심사 불필요
TestFlight 외부 테스트	최대 10,000명, 베타 심사 필요
정식 출시	App Store 심사 (1~3일) 후 출시

3. Linux - Snap Store 배포#

3.1 왜 Snap Store를 사용하는가?#

이유: Snap은 Ubuntu를 포함한 다양한 Linux 배포판에서 동작하는 범용 패키지 형식입니다. 의존성을 자체 포함하여 “한 번 빌드, 어디서든 실행”이 가능합니다.

3.2 빌드 환경 설정#

무엇을: snapcraft와 LXD⁴를 설치하여 빌드 환경을 구성합니다.

1
# snapcraft 설치
2
sudo snap install snapcraft --classic
3

4
# LXD 설치 및 초기화
5
sudo snap install lxd
6
sudo lxd init

LXD 초기화 시 대부분 기본값을 사용합니다. 처음 실행 시 소켓 연결 오류가 발생하면 현재 사용자를 lxd 그룹에 추가합니다:

1
sudo usermod -a -G lxd $USER
2
# 로그아웃 후 다시 로그인

3.3 snapcraft.yaml 작성#

어떻게: 프로젝트 루트에 snap/snapcraft.yaml 파일을 생성합니다.

1
name: my-flutter-app
2
version: 1.0.0
3
summary: My Flutter Desktop App
4
description: A cross-platform Flutter application.
5

6
confinement: strict
7
base: core22
8
grade: stable
9

10
slots:
11
  dbus-my-flutter-app:
12
    interface: dbus
13
    bus: session
14
    name: com.example.my_flutter_app
15

16
apps:
17
  my-flutter-app:
18
    command: my_flutter_app
19
    extensions: [gnome]
20
    plugs:
21
      - network
22
    slots:
23
      - dbus-my-flutter-app
24

25
parts:
26
  my-flutter-app:
27
    source: .
28
    plugin: flutter
29
    flutter-target: lib/main.dart

3.4 snapcraft.yaml 구성 요소#

무엇을: 각 섹션의 역할을 이해합니다.

섹션	역할	주요 옵션
confinement	보안 격리 수준	strict(권장), classic, devmode
base	런타임 기반 이미지	core22 (Ubuntu 22.04 기반)
grade	배포 채널 결정	stable, devel
extensions	라이브러리 자동 포함	gnome (GTK 라이브러리 포함)
plugs	시스템 리소스 접근	network, home, audio 등

3.5 데스크톱 파일 설정#

어떻게: snap/gui/ 폴더에 .desktop 파일과 아이콘을 배치합니다.

1
[Desktop Entry]
2
Name=My Flutter App
3
Comment=A cross-platform Flutter application
4
Exec=my-flutter-app
5
Icon=${SNAP}/meta/gui/my-flutter-app.png
6
Terminal=false
7
Type=Application
8
Categories=Utility;

주의사항:

.desktop 파일명과 아이콘 파일명이 snapcraft.yaml의 앱 이름과 일치해야 합니다
아이콘은 snap/gui/ 폴더에 PNG 형식으로 배치합니다

3.6 Snap 빌드 및 테스트#

어떻게: snapcraft 명령으로 빌드하고 로컬에서 테스트합니다.

1
# LXD 백엔드로 빌드
2
snapcraft --use-lxd
3

4
# 로컬 설치 테스트
5
sudo snap install ./my-flutter-app_1.0.0_amd64.snap --dangerous

3.7 Snap Store 배포#

어떻게: Snap Store에 계정을 만들고 앱을 업로드합니다.

1
# Snap Store 로그인
2
snapcraft login
3

4
# 앱 이름 등록
5
snapcraft register my-flutter-app
6

7
# 업로드 및 릴리스
8
snapcraft upload --release=stable my-flutter-app_1.0.0_amd64.snap

3.8 Snap Store 채널#

무엇을: 배포 채널별 용도를 이해합니다.

채널	용도	사용자
edge	최신 개발 빌드	개발자/테스터
beta	베타 테스트	얼리어답터
candidate	출시 후보	QA 팀
stable	정식 버전	일반 사용자

4. Windows - Microsoft Store 배포#

4.1 왜 Microsoft Store를 사용하는가?#

이유: Microsoft Store는 Windows 사용자에게 신뢰할 수 있는 앱 설치 경험을 제공합니다. 앱 인증 과정을 거쳐 보안이 검증되고, 자동 업데이트가 지원됩니다.

4.2 사전 준비#

무엇을: Microsoft Store 배포를 위한 계정과 도구를 준비합니다.

준비 항목	설명
Microsoft Partner Network	개발자 계정 등록
Partner Center	앱 등록 및 관리
Visual Studio	Windows 빌드 환경
msix 패키지	MSIX 패키징 도구

4.3 Partner Center 설정#

어떻게: Partner Center에서 앱을 등록하고 필수 정보를 설정합니다.

flowchart LR A[Partner Center 접속] --> B[앱 이름 예약] B --> C[Product Identity 확인] C --> D[가격/가용성 설정] D --> E[연령 등급 설정] E --> F[패키지 업로드 준비]

Product Identity에서 확인할 정보:

Package identity name: 패키지 식별자
Publisher: 게시자 ID
Publisher display name: 표시 이름

4.4 MSIX 패키징 설정#

어떻게: pubspec.yaml에 msix 설정을 추가합니다.

1
msix_config:
2
  display_name: My Flutter App
3
  publisher_display_name: My Company
4
  identity_name: MyCompany.MyFlutterApp
5
  publisher: CN=YOUR-PUBLISHER-ID
6
  msix_version: 1.0.0.0
7
  logo_path: assets/app_icon.png

주의사항:

Microsoft Store 앱은 버전의 마지막 숫자(revision)가 반드시 0이어야 합니다
예: 1.0.0.0 (O), 1.0.0.1 (X)

4.5 msix 패키지 설치#

어떻게: msix 패키지를 프로젝트에 추가합니다.

1
flutter pub add msix --dev

4.6 MSIX 빌드#

어떻게: msix 도구로 Windows 패키지를 생성합니다.

1
# 릴리스 빌드 생성
2
flutter build windows --release
3

4
# MSIX 패키지 생성
5
dart run msix:create

4.7 앱 아이콘 설정#

무엇을: Windows 앱 아이콘을 설정합니다.

파일	위치	형식
앱 아이콘	windows/runner/resources/app_icon.ico	ICO
스토어 로고	Partner Center 업로드	300x300 PNG

아이콘 이름 변경 시 windows/runner/Runner.rc 파일의 IDI_APP_ICON 값을 수정합니다.

4.8 앱 검증#

어떻게: Windows App Certification Kit⁵으로 패키지를 검증합니다.

Windows SDK에 포함된 Windows App Cert Kit 실행
Flutter Windows 패키지(.msix) 선택
테스트 보고서 확인

4.9 Partner Center 제출#

어떻게: Partner Center에서 패키지를 업로드하고 제출합니다.

단계	설명
패키지 업로드	MSIX 파일 업로드
스토어 목록 작성	설명, 스크린샷, 카테고리
가격 설정	무료/유료, 지역별 가격
제출	자동 검증 후 수동 심사

5. GitHub Actions CI/CD (Windows)#

5.1 왜 CI/CD를 사용하는가?#

이유: 수동 빌드와 업로드는 시간이 많이 들고 오류 가능성이 있습니다. GitHub Actions를 통해 빌드, 패키징, 배포를 자동화할 수 있습니다.

5.2 GitHub Actions 워크플로우#

어떻게: Microsoft Store CLI를 사용하여 자동 배포합니다.

1
name: Windows Store Deploy
2

3
on:
4
  push:
5
    tags:
6
      - "v*"
7

8
jobs:
9
  deploy:
10
    runs-on: windows-latest
11
    steps:
12
      - uses: actions/checkout@v4
13

14
      - uses: subosito/flutter-action@v2
15
        with:
16
          flutter-version: "3.24.0"
17
          channel: "stable"
18

19
      - uses: microsoft/setup-msstore-cli@v1
20

21
      - name: Configure Microsoft Store CLI
22
        run: |
23
          msstore reconfigure --tenantId ${{ secrets.AZURE_AD_TENANT_ID }} \
24
            --clientId ${{ secrets.AZURE_AD_CLIENT_ID }} \
25
            --clientSecret ${{ secrets.AZURE_AD_CLIENT_SECRET }} \
26
            --sellerId ${{ secrets.SELLER_ID }}
27

28
      - name: Install dependencies
29
        run: flutter pub get
30

31
      - name: Create MSIX package
32
        run: msstore package .
33

34
      - name: Publish to Microsoft Store
35
        run: msstore publish -v

5.3 필요한 시크릿#

무엇을: GitHub Repository Secrets에 등록할 값들입니다.

시크릿	설명	확인 위치
AZURE_AD_TENANT_ID	Azure AD 테넌트 ID	Azure Portal
AZURE_AD_CLIENT_ID	앱 클라이언트 ID	Azure Portal
AZURE_AD_CLIENT_SECRET	클라이언트 비밀	Azure Portal
SELLER_ID	판매자 ID	Partner Center → Account Settings

6. Web - Flutter 웹 배포#

6.1 왜 웹 배포가 중요한가?#

이유: 웹은 설치 없이 URL만으로 접근 가능한 유일한 플랫폼입니다. 사용자 획득 비용이 낮고, 검색 엔진을 통한 유입이 가능합니다.

6.2 웹 빌드 생성#

어떻게: flutter build web 명령으로 릴리스 빌드를 생성합니다.

1
# 릴리스 빌드
2
flutter build web --release
3

4
# 빌드 결과물 위치
5
ls build/web/

6.3 빌드 모드와 렌더러#

무엇을: Flutter 웹의 빌드 모드와 렌더러⁶ 옵션을 이해합니다.

빌드 모드	코드 최소화	Tree Shaking⁷
debug	X	X
profile	X	O
release	O	O

렌더러	특징	적합한 경우
canvaskit	고품질 렌더링, 큰 용량	그래픽 집약적 앱
skwasm	WebAssembly 기반, 빠른 성능	성능 중시 앱

1
# 렌더러 지정 빌드
2
flutter build web --release --web-renderer canvaskit
3
flutter build web --release --web-renderer skwasm

6.4 로컬 테스트#

어떻게: 빌드 결과물을 로컬 서버에서 테스트합니다.

1
# Python 간이 서버로 테스트
2
cd build/web
3
python -m http.server 8000
4

5
# 브라우저에서 http://localhost:8000 접속

6.5 Firebase Hosting 배포#

어떻게: Firebase CLI로 Flutter 웹 앱을 배포합니다.

1
# Firebase CLI 설치
2
npm install -g firebase-tools
3

4
# Firebase 로그인
5
firebase login
6

7
# 웹 프레임워크 기능 활성화
8
firebase experiments:enable webframeworks
9

10
# Firebase 프로젝트 초기화
11
firebase init hosting
12
# 질문에 "yes" 선택, Flutter Web 선택
13

14
# 배포
15
firebase deploy

6.6 Firebase Hosting 설정 흐름#

sequenceDiagram participant D as Developer participant F as Firebase CLI participant H as Firebase Hosting D->>F: firebase init hosting F->>D: 웹 프레임워크 사용? (yes) D->>F: Flutter Web 선택 F->>D: 호스팅 디렉토리 선택 D->>F: firebase deploy F->>F: flutter build web --release F->>H: 빌드 결과물 업로드 H->>D: 배포 URL 제공

장점: firebase deploy 명령이 자동으로 flutter build web --release를 실행합니다.

6.7 기타 호스팅 옵션#

무엇을: Firebase 외의 배포 옵션을 알아봅니다.

서비스	특징	비용
Firebase Hosting	Google 인프라, 빠른 CDN	무료~유료
GitHub Pages	GitHub 연동, 정적 호스팅	무료
Google Cloud	확장성, 커스텀 도메인	종량제
Vercel	자동 배포, 프리뷰 URL	무료~유료
Netlify	Git 연동, 폼 처리	무료~유료

7. 웹 이미지 처리#

7.1 왜 웹에서 이미지 처리가 다른가?#

이유: 웹 브라우저는 보안상 이유로 임의 코드 실행을 제한합니다. 이로 인해 이미지 처리 방식이 모바일/데스크톱과 다릅니다.

7.2 CORS 이슈#

무엇을: 외부 이미지 로드 시 CORS⁸ 문제가 발생할 수 있습니다.

1
// 웹에서 외부 이미지 사용 시
2
Image.network(
3
  'https://example.com/image.png',
4
  // CORS 설정이 안 된 서버의 이미지는 로드 실패
5
)

해결책:

이미지 서버에서 CORS 헤더 설정
프록시 서버 사용
앱 내 assets로 포함

8. 배포 자동화 도구#

8.1 Codemagic CI/CD#

무엇을: Codemagic은 Flutter 전용 CI/CD 서비스로, 모든 플랫폼 빌드를 지원합니다.

1
workflows:
2
  desktop-workflow:
3
    name: Desktop Build
4
    max_build_duration: 60
5
    environment:
6
      flutter: stable
7
    scripts:
8
      - name: Build macOS
9
        script: flutter build macos --release
10
      - name: Build Windows
11
        script: flutter build windows --release
12
      - name: Build Linux
13
        script: flutter build linux --release
14
    artifacts:
15
      - build/macos/Build/Products/Release/*.app
16
      - build/windows/runner/Release/*.exe
17
      - build/linux/x64/release/bundle/*

8.2 fastforge (Linux)#

무엇을: Linux용 다양한 패키지 형식을 지원하는 배포 도구입니다.

지원 형식:

AppImage
deb (Debian/Ubuntu)
rpm (Fedora/RHEL)
pacman (Arch)

9. 플랫폼별 배포 체크리스트#

9.1 macOS 체크리스트#

9.2 Linux 체크리스트#

9.3 Windows 체크리스트#

9.4 Web 체크리스트#

릴리스 빌드 테스트
렌더러 선택 (canvaskit/skwasm)
Firebase 프로젝트 생성
커스텀 도메인 설정 (선택)
HTTPS 인증서 확인

참고 자료#

Build and release a macOS app - macOS App Store 배포 가이드
Build and release a Linux app to the Snap Store - Linux Snap Store 배포 가이드
Build and release a Windows desktop app - Windows Microsoft Store 배포 가이드
Build and release a web app - Flutter 웹 앱 배포 가이드

snapcraft(스냅크래프트): Linux용 애플리케이션 패키징 도구로, snap 형식의 자체 포함 패키지를 생성한다. ↩
MSIX: Microsoft의 Windows 앱 패키징 형식으로, 앱 설치/제거/업데이트를 깔끔하게 관리한다. ↩
Bundle ID(번들 ID): 앱을 고유하게 식별하는 문자열로, 역도메인 형식(com.company.app)을 사용한다. ↩
LXD(Linux 컨테이너 데몬): Linux 컨테이너를 관리하는 도구로, snapcraft 빌드 시 격리된 환경을 제공한다. ↩
Windows App Certification Kit(Windows 앱 인증 키트): Microsoft에서 제공하는 앱 검증 도구로, Store 제출 전 앱의 호환성과 보안을 테스트한다. ↩
renderer(렌더러): 웹에서 Flutter UI를 화면에 그리는 엔진으로, CanvasKit과 Skwasm 두 가지 옵션이 있다. ↩
Tree Shaking(트리 쉐이킹): 사용하지 않는 코드를 빌드에서 제거하여 앱 크기를 줄이는 최적화 기법이다. ↩
CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유): 웹 브라우저의 보안 정책으로, 다른 도메인의 리소스 요청을 제한한다. ↩

Flutter 튜토리얼 64편: 데스크톱과 웹 배포

학습 목표#

1. 데스크톱/웹 배포 개요#

1.1 왜 데스크톱/웹 배포가 필요한가?#

1.2 플랫폼별 배포 흐름#

1.3 플랫폼별 요구사항 비교#

2. macOS - App Store 배포#

2.1 왜 App Store 배포를 선택하는가?#

2.2 사전 준비#

2.3 Xcode 프로젝트 설정#

2.4 앱 버전 설정#

2.5 릴리스 빌드 생성#

2.6 Archive 생성 및 업로드#

2.7 TestFlight와 출시#

3. Linux - Snap Store 배포#

3.1 왜 Snap Store를 사용하는가?#

3.2 빌드 환경 설정#

3.3 snapcraft.yaml 작성#

3.4 snapcraft.yaml 구성 요소#

3.5 데스크톱 파일 설정#

3.6 Snap 빌드 및 테스트#

3.7 Snap Store 배포#

3.8 Snap Store 채널#

4. Windows - Microsoft Store 배포#

4.1 왜 Microsoft Store를 사용하는가?#

4.2 사전 준비#

4.3 Partner Center 설정#

4.4 MSIX 패키징 설정#

4.5 msix 패키지 설치#

4.6 MSIX 빌드#

4.7 앱 아이콘 설정#

4.8 앱 검증#

4.9 Partner Center 제출#

5. GitHub Actions CI/CD (Windows)#

5.1 왜 CI/CD를 사용하는가?#

5.2 GitHub Actions 워크플로우#

5.3 필요한 시크릿#

6. Web - Flutter 웹 배포#

6.1 왜 웹 배포가 중요한가?#

6.2 웹 빌드 생성#

6.3 빌드 모드와 렌더러#

6.4 로컬 테스트#

6.5 Firebase Hosting 배포#

6.6 Firebase Hosting 설정 흐름#

6.7 기타 호스팅 옵션#

7. 웹 이미지 처리#

7.1 왜 웹에서 이미지 처리가 다른가?#

7.2 CORS 이슈#

8. 배포 자동화 도구#

8.1 Codemagic CI/CD#

8.2 fastforge (Linux)#

9. 플랫폼별 배포 체크리스트#

9.1 macOS 체크리스트#

9.2 Linux 체크리스트#

9.3 Windows 체크리스트#

9.4 Web 체크리스트#

참고 자료#

Footnotes#

공유

목차