손으로 PWA 아이콘 크기 조정 그만: 몇 초 만에 자동화하는 CLI를 만들었습니다 🚀

Source: Dev.to

소개

프론트엔드 개발자로서 우리는 모두 프로그레시브 웹 앱(PWA)의 아이디어를 좋아합니다. 하지만 초기 설정은 번거로울 수 있습니다. 새로운 React 혹은 Vite 프로젝트를 시작할 때마다 마스터 로고를 여러 크기(192x192, 512x512, apple‑touch‑icon, favicon)로 리사이즈하기 위해 이미지 편집기를 열고, 올바른 경로를 가진 manifest.json 파일을 직접 작성하게 됩니다. 이는 개발 속도를 늦추므로 해결책을 만들었습니다.

pwa‑gen을 만나보세요

npx @muhammaddariazzidane/pwa-gen

가벼우면서도 인터랙티브한 CLI 도구로, 아이콘 생성과 매니페스트 작성 전체 과정을 자동화합니다. 마스터 이미지를 지정하고 몇 가지 질문에 답하면 바로 완료됩니다.

무엇을 해주나요?

즉시 아이콘 생성

현대 브라우저와 iOS에 필요한 모든 크기를 만들어 줍니다:

• 192x192
• 512x512
• 180x180
• 64x64

스마트 마스크 가능 아이콘

Android PWA용으로 CLI가 배경 색(hex) 을 물어보고, 로고를 약간 축소한 뒤 안전 영역 안에 로고가 들어가도록 적절한 패딩을 추가합니다.

자동 생성 manifest.json

앱 이름과 테마 색을 물어본 뒤, 절대 경로 아이콘을 포함한 올바르게 포맷된 독립형 manifest.json 파일을 작성합니다.

스마트 경로 자동 보정

공개 디렉터리를 자동으로 감지하여 파일이 올바른 위치에 생성되도록 합니다.

Vite 사용자에게 최적

생성된 매니페스트를 Vite 설정에 추가하세요:

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      manifest: false, // pwa-gen이 만든 독립형 manifest.json 사용
      injectRegister: 'auto'
    })
  ]
};

기여하기

소스 코드는 GitHub에 공개되어 있습니다. Node.js 파일 시스템 로직을 살펴보거나 기여해 주세요:

👉 https://github.com/muhammaddariazzidane/pwa-gen.git

행복한 코딩 되세요! 💻✨