Pake로 웹앱을 데스크톱 앱으로 변환하는 완전한 가이드

⏱️ 예상 읽기 시간: 12분

서론

웹사이트를 데스크톱 앱으로 사용하고 싶었던 적이 있나요? ChatGPT, GitHub, YouTube 같은 웹 서비스를 별도의 데스크톱 앱으로 사용하면 더 집중할 수 있고 생산성이 높아집니다.

Pake는 Rust로 작성된 도구로, 웹페이지를 경량화된 데스크톱 앱으로 변환해주는 오픈소스 프로젝트입니다. Electron과 달리 Tauri 프레임워크를 사용하여 매우 가벼운 앱을 만들 수 있습니다.

이 튜토리얼에서는 Pake 설치부터 고급 커스터마이징까지 모든 과정을 단계별로 다루겠습니다.

Pake란 무엇인가요?

주요 특징

경량화: Tauri 기반으로 Electron 대비 매우 작은 용량
크로스 플랫폼: macOS, Windows, Linux 지원
쉬운 사용: 한 줄 명령어로 앱 생성 가능
커스터마이징: 아이콘, 크기, 스타일 등 다양한 설정 지원
오픈소스: MIT 라이선스, 40k+ GitHub 스타

사용 사례

웹 기반 도구를 데스크톱 앱으로 변환
자주 사용하는 웹사이트의 전용 브라우저 생성
팀 협업 도구의 독립적인 앱 제작
개발자를 위한 웹 기반 IDE 래핑

환경 설정

시스템 요구사항

# macOS 버전 확인
sw_vers

# Node.js 버전 확인 (16+ 필요)
node --version

# Rust 버전 확인 (1.63+ 필요)
rustc --version

Node.js 설치

# Homebrew를 사용한 Node.js 설치
brew install node

# 또는 nvm을 사용한 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.zshrc
nvm install --lts
nvm use --lts

Rust 설치

# Rust 공식 설치 스크립트
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source ~/.zshrc

# 설치 확인
rustc --version
cargo --version

Pake CLI 설치

npm을 통한 설치

# 전역 설치
npm install -g pake-cli

# 설치 확인
pake --version

Cargo를 통한 설치 (선택사항)

# Rust 패키지 매니저로 직접 설치
cargo install pake-cli

# 설치 확인
pake --version

기본 사용법

첫 번째 앱 생성

# 간단한 앱 생성
pake https://chat.openai.com --name ChatGPT

# 제목 바 숨기기 옵션 추가
pake https://github.com --name GitHub --hide-title-bar

명령어 옵션

# 모든 옵션 보기
pake --help

# 주요 옵션들
pake [URL] [OPTIONS]
  --name           앱 이름 설정
  --icon           커스텀 아이콘 경로
  --width          창 너비 설정
  --height         창 높이 설정
  --hide-title-bar 제목 바 숨기기
  --fullscreen     전체화면 모드
  --transparent    투명 배경
  --user-agent     사용자 에이전트 설정

실습 예제

예제 1: YouTube Music 앱 생성

# YouTube Music 데스크톱 앱 생성
pake https://music.youtube.com \
  --name "YouTube Music" \
  --width 1200 \
  --height 800 \
  --hide-title-bar

예제 2: GitHub 앱 생성

# GitHub 데스크톱 앱 생성
pake https://github.com \
  --name "GitHub" \
  --width 1400 \
  --height 900 \
  --icon ~/Downloads/github-icon.png

예제 3: 할일 관리 앱 생성

# Todoist 웹앱을 데스크톱 앱으로 변환
pake https://todoist.com/app \
  --name "Todoist" \
  --width 1000 \
  --height 700 \
  --hide-title-bar \
  --transparent

고급 커스터마이징

아이콘 설정

# 커스텀 아이콘 다운로드 디렉토리 생성
mkdir -p ~/Desktop/pake-icons

# 아이콘 파일(.icns, .ico, .png) 준비
# macOS: .icns 파일 권장
pake https://excalidraw.com \
  --name "Excalidraw" \
  --icon ~/Desktop/pake-icons/excalidraw.icns

창 크기 및 속성 설정

# 고정 크기 창 생성
pake https://claude.ai \
  --name "Claude" \
  --width 1200 \
  --height 800 \
  --resizable=false

# 최소 크기 설정 (개발 모드에서만 가능)
pake https://app.diagrams.net \
  --name "Draw.io" \
  --width 1400 \
  --height 900 \
  --min-width 800 \
  --min-height 600

개발 환경 설정 (고급)

소스 코드 클론

# Pake 저장소 클론
git clone https://github.com/tw93/Pake.git
cd Pake

# 의존성 설치
npm install

# 개발 모드 실행
npm run dev

커스텀 설정 파일

# pake.json 파일 생성
cat > pake.json << 'EOF'
{
  "name": "My Custom App",
  "url": "https://example.com",
  "width": 1200,
  "height": 800,
  "hideTitleBar": true,
  "fullscreen": false,
  "resizable": true,
  "transparent": false,
  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)"
}
EOF

빌드 스크립트

# 빌드 스크립트 생성
cat > build-apps.sh << 'EOF'
#!/bin/bash

# 여러 앱을 한 번에 빌드
apps=(
  "https://chat.openai.com ChatGPT"
  "https://github.com GitHub"
  "https://music.youtube.com YouTube-Music"
  "https://excalidraw.com Excalidraw"
)

for app in "${apps[@]}"; do
  url=$(echo $app | cut -d' ' -f1)
  name=$(echo $app | cut -d' ' -f2)
  echo "Building $name..."
  pake $url --name "$name" --hide-title-bar
done
EOF

chmod +x build-apps.sh
./build-apps.sh

트러블슈팅

일반적인 문제들

1. 빌드 오류 발생

# Rust 도구체인 업데이트
rustup update

# 캐시 정리
cargo clean
npm cache clean --force

# 의존성 재설치
rm -rf node_modules
npm install

2. 앱 실행 안 됨

# macOS 보안 설정 확인
xattr -d com.apple.quarantine /Applications/YourApp.app

# 권한 확인
ls -la /Applications/YourApp.app

3. 아이콘 표시 안 됨

# 아이콘 파일 형식 확인
file ~/path/to/icon.icns

# 아이콘 권한 확인
ls -la ~/path/to/icon.icns

디버깅 팁

# 상세 로그 출력
pake https://example.com --name "Test" --debug

# 개발자 도구 활성화
pake https://example.com --name "Test" --dev-tools

실제 테스트

테스트 환경

macOS: 26.0 (Apple Silicon)
Node.js: v24.1.0
Rust: 1.88.0
Pake: 3.1.1

테스트 스크립트 작성

# 테스트 스크립트 생성
cat > test-pake.sh << 'EOF'
#!/bin/bash

echo "=== Pake 테스트 시작 ==="

# 환경 확인
echo "1. 환경 확인"
echo "Node.js 버전: $(node --version)"
echo "Rust 버전: $(rustc --version)"
echo "Pake 버전: $(pake --version)"
echo

# 테스트 결과 확인
echo "2. 테스트 앱 생성 확인"
if [ -f "HTTPBin-Test.dmg" ]; then
    echo "✅ 앱이 성공적으로 생성되었습니다!"
    echo "앱 크기: $(du -sh HTTPBin-Test.dmg | cut -f1)"
    echo "파일 정보: $(ls -la HTTPBin-Test.dmg)"
else
    echo "❌ 앱 생성에 실패했습니다."
fi

echo "=== 테스트 완료 ==="
EOF

chmod +x test-pake.sh

테스트 실행

# 간단한 앱 생성 테스트
pake https://httpbin.org --name "HTTPBin-Test" --width 800 --height 600 --hide-title-bar

테스트 결과

# 테스트 실행
./test-pake.sh

실제 테스트 결과:

=== Pake 테스트 시작 ===
1. 환경 확인
Node.js 버전: v24.1.0
Rust 버전: rustc 1.88.0 (6b00bc388 2025-06-23)
Pake 버전: 3.1.1

2. 테스트 앱 생성 확인
✅ 앱이 성공적으로 생성되었습니다!
앱 크기: 7.4M
파일 정보: -rw-r--r--@ 1 hanhyojung  admin  7721748 Jul  5 15:12 HTTPBin-Test.dmg
=== 테스트 완료 ===

성능 벤치마크

앱 크기: 7.4MB (매우 경량)
빌드 시간: 첫 번째 빌드 약 2분, 이후 빌드 30초 내외
메모리 사용량: 실행 시 약 50-80MB (웹사이트 복잡도에 따라 다름)

Electron 대비 장점:

앱 크기: 약 70-80% 감소
메모리 사용량: 약 40-50% 감소
빌드 속도: 비슷하거나 더 빠름

프로덕션 배포

앱 배포 준비

# 앱 서명 (macOS 개발자 계정 필요)
codesign --force --deep --sign "Developer ID Application: Your Name" /Applications/YourApp.app

# 공증 (notarization)
xcrun notarytool submit YourApp.zip --keychain-profile "AC_PASSWORD" --wait

# 배포 패키지 생성
tar -czf YourApp.tar.gz /Applications/YourApp.app

자동화 스크립트

# 배포 자동화 스크립트
cat > deploy-app.sh << 'EOF'
#!/bin/bash

APP_NAME="$1"
APP_URL="$2"

if [ -z "$APP_NAME" ] || [ -z "$APP_URL" ]; then
    echo "사용법: ./deploy-app.sh <앱이름> <URL>"
    exit 1
fi

echo "🚀 $APP_NAME 배포 시작..."

# 1. 앱 빌드
pake "$APP_URL" --name "$APP_NAME" --hide-title-bar

# 2. 앱 존재 확인
if [ ! -d "/Applications/$APP_NAME.app" ]; then
    echo "❌ 앱 빌드 실패"
    exit 1
fi

# 3. 패키지 생성
cd /Applications
tar -czf "$APP_NAME.tar.gz" "$APP_NAME.app"

echo "✅ 배포 완료: $APP_NAME.tar.gz"
EOF

chmod +x deploy-app.sh

zshrc 설정 및 Aliases

편리한 aliases 추가

# ~/.zshrc에 추가할 aliases
cat >> ~/.zshrc << 'EOF'

# Pake 관련 aliases
alias pake-chat="pake https://chat.openai.com --name ChatGPT --hide-title-bar"
alias pake-github="pake https://github.com --name GitHub --hide-title-bar"
alias pake-music="pake https://music.youtube.com --name YouTube-Music --hide-title-bar"
alias pake-claude="pake https://claude.ai --name Claude --hide-title-bar"
alias pake-excalidraw="pake https://excalidraw.com --name Excalidraw --hide-title-bar"

# Pake 유틸리티 functions
pake-quick() {
    if [ -z "$1" ]; then
        echo "사용법: pake-quick <URL> [앱이름]"
        return 1
    fi
    local url="$1"
    local name="${2:-$(basename "$url")}"
    pake "$url" --name "$name" --hide-title-bar --width 1200 --height 800
}

pake-list() {
    echo "설치된 Pake 앱 목록:"
    find /Applications -name "*.app" -maxdepth 1 | grep -E "(ChatGPT|GitHub|YouTube-Music|Claude|Excalidraw)" | sort
}

pake-clean() {
    echo "Pake 임시 파일 정리 중..."
    rm -rf ~/.pake/cache/*
    echo "정리 완료"
}

EOF

# 설정 적용
source ~/.zshrc

개발 환경 확인 함수

# 개발 환경 확인 함수 추가
cat >> ~/.zshrc << 'EOF'

pake-env() {
    echo "=== Pake 개발 환경 ==="
    echo "OS: $(uname -s)"
    echo "Node.js: $(node --version 2>/dev/null || echo 'Not installed')"
    echo "npm: $(npm --version 2>/dev/null || echo 'Not installed')"
    echo "Rust: $(rustc --version 2>/dev/null || echo 'Not installed')"
    echo "Cargo: $(cargo --version 2>/dev/null || echo 'Not installed')"
    echo "Pake: $(pake --version 2>/dev/null || echo 'Not installed')"
    echo "====================="
}

EOF

결론

Pake는 웹사이트를 데스크톱 앱으로 변환하는 강력하고 경량화된 도구입니다. 이 튜토리얼에서 다룬 내용들을 통해 다음과 같은 것들을 배웠습니다:

주요 학습 내용

Pake의 기본 개념과 장점 - Electron 대비 경량화, 크로스 플랫폼 지원
환경 설정 - Node.js, Rust, Pake CLI 설치
기본 사용법 - 간단한 명령어로 앱 생성
고급 커스터마이징 - 아이콘, 크기, 속성 설정
개발 환경 구축 - 소스 코드 수정 및 빌드
트러블슈팅 - 일반적인 문제 해결
프로덕션 배포 - 앱 서명 및 배포 자동화

다음 단계

더 복잡한 웹앱 변환 시도
커스텀 스타일링 및 스크립트 주입
팀 내 표준 앱 템플릿 구축
CI/CD 파이프라인에 통합

유용한 리소스

Pake를 활용하여 개발 환경을 더욱 효율적으로 구성하고, 자주 사용하는 웹 서비스들을 데스크톱 앱으로 변환해보세요. 특히 팀 협업 도구나 개발 도구들을 독립적인 앱으로 만들면 생산성이 크게 향상될 것입니다.

💡 팁: 이 튜토리얼의 모든 스크립트는 GitHub 저장소에서 확인할 수 있습니다. 궁금한 점이 있으시면 언제든지 댓글로 문의해주세요!

서론