Stop Resizing PWA Icons by Hand: I Built a CLI to Automate It in Seconds 🚀

Context

PWA 초기 설정 시 마스터 로고를 여러 해상도(192x192, 512x512, apple-touch-icon, favicon 등)로 수동으로 리사이징하고, manifest.json을 직접 작성하며 파일 경로를 일일이 연결해야 하는 반복 작업이 개발 모멘텀을 저해했다.

Technical Solution

• sharp 라이브러리를 사용한 이미지 처리: 마스터 이미지를 64x64, 180x180, 192x192, 512x512의 표준 아이콘 크기로 자동 변환
• @clack/prompts를 활용한 대화형 CLI 인터페이스: 앱 이름, 테마 컬러, 배경색 등을 대화형 프롬프트로 수집
• Maskable 아이콘 자동 생성: Android PWA 안전 영역을 고려하여 로고 축소 및 패딩 자동 적용
• manifest.json 자동 생성: 수집된 정보와 생성된 아이콘 경로를 manifest.json에 자동으로 작성
• Public 디렉토리 자동 감지: 프로젝트 구조를 분석하여 파일 생성 경로 자동 설정
• Vite 호환성 지원: vite.config.js/ts에서 독립적인 manifest.json 파일 사용 가능하도록 설정

Key Takeaway

PWA 초기 설정과 같은 반복 가능한 수동 작업은 npx를 통한 독립 실행형 CLI 도구로 자동화하면, 개발자가 실제 기능 구현에 집중할 수 있으며, 오류 가능성도 동시에 제거할 수 있다.