Cursor·Lovable·Bolt·v0 개발자를 위한 AI PWA 아이콘 생성기
AI 코딩 도구는 코드는 빠르게 짜 주지만 실제 PNG와 Xcode 세트는 만들어 주지 않습니다. Imagcon은 프롬프트 한 번으로 PWA 19종, AppIcon.appiconset(Contents.json), Android mipmap, iOS 스플래시 16종, manifest.json까지 묶어 드립니다.
Cursor, Lovable, Bolt, v0만으로는 아이콘 파일이 부족한 이유
이 도구들은 코드와 스캐폴딩에는 강하지만 실제 이미지 파일은 생성하지 않습니다. manifest에는 예시 경로만 있고 /icons/는 비어 있는 경우가 많습니다.
워크플로는 간단합니다. Imagcon에서 이미지 패키지 생성 그다음 AI에게 HTML·설정에 링크를 넣도록 요청.
ZIP 전에: 워크스페이스에서 스타일과 AI 편집
생성 전 7가지 스타일
워크스페이스에서 생성 버튼 전에 Flat, Metallic, 2D Game, Clay, 3D, Gradient, Glassmorphism 중 하나를 고릅니다(썸네일 참고). Imagen 4.0이 원하는 톤에 맞추고, 아이콘 주제는 자연어로 설명하면 됩니다.
AI 편집으로 다듬기
생성 후 이미지 편집기에서 바꿀 내용을 문장으로 입력하세요(예: «안경 제거», «얇은 금 테두리»). Vertex AI의 Google Gemini가 반영합니다. 큰 수정은 1~2분 걸릴 수 있습니다. 그리기·텍스트·자르기나 새 프롬프트로 재생성도 함께 쓸 수 있습니다.
Imagcon에서 프롬프트로 아이콘 생성
imagcon.app에 접속해 무료로 로그인하고, 아이콘을 자연어로 설명하세요.
프롬프트 예시
- "짙은 파랑 그라데이션에 흰 번개"
- "흰 배경에 미니멀한 초록 잎, 플랫 스타일"
- "보라색 추상 파도, 모던 SaaS 느낌"
ZIP에 포함되는 항목: PWA 19종, 마스커블 변형, iOS 스플래시 16종, Android mipmap, Xcode용 AppIcon.appiconset(Contents.json), manifest.json.
프로젝트의 public 폴더에 배치
대부분의 스택은 /public을 사이트 루트로 제공합니다. /public/icons/의 파일은 브라우저에서 /icons/로 제공됩니다.
| 스택 / 도구 | 아이콘 경로 | manifest.json |
|---|---|---|
| Vite (React/Vue/Svelte) | /public/icons/ | /public/manifest.json |
| Create React App | /public/icons/ | /public/manifest.json |
| Next.js (App Router) | /public/icons/ | /public/manifest.json |
| Lovable (내부 Vite) | /public/icons/ | /public/manifest.json |
| Cursor 프로젝트(프레임워크 무관) | 위와 동일 — package.json 확인 | 위와 동일 |
| Bolt / v0 (Vite/React보내기) | /public/icons/ | /public/manifest.json |
manifest.json 확인
다운로드에 manifest.json이 포함됩니다. 직접 작성할 때는 이 템플릿을 참고하세요(이름·색상 조정):
{
"name": "Your App Name",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{ "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icons/icon-192x192-maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
}
]
}Cursor, Lovable, Bolt 또는 v0 채팅에 프롬프트 붙여넣기
CCursor
AI 채팅(Cmd+L / Ctrl+L)에 붙여넣기:
Imagcon에서 PWA 아이콘 ZIP을 받았습니다. 포함 내용:
- /icons/ 폴더 (icon-72x72.png ~ icon-512x512.png)
- icon-512x512-maskable.png (Android)
- 바로 쓸 수 있는 manifest.json
- iOS 런치 이미지 splash/ 폴더
- Xcode용 AppIcon.appiconset (Contents.json 포함)
- Android mipmap 폴더
부탁합니다:
1. /icons/를 /public/icons/로 복사
2. manifest.json을 /public/manifest.json으로 복사
3. index.html에 <link rel="manifest" href="/manifest.json"> 추가
4. index.html에 <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> 추가
5. AppIcon.appiconset과 mipmap을 iOS/Android 프로젝트에 맞게 통합LLovable
public/icons/에 파일을 올린 뒤 채팅에서:
- 1. 왼쪽 사이드바 파일 아이콘 → 파일 업로드
- 2. public/icons/ 생성 또는 열기
- 3. Imagcon ZIP의 PNG 전부 업로드
- 4. Lovable 채팅에 아래 프롬프트 붙여넣기
Imagcon으로 PWA 아이콘을 준비했습니다. 다음을 해 주세요:
1. 모든 PNG를 /public/icons/에 배치
2. PWA 설치용 manifest.json 설정
3. index.html에서 manifest 링크
manifest는 /icons/icon-{size}x{size}.png를 참조하고, 192x192·512x512와 Android용 마스커블 192x192를 포함하세요.B/vBolt와 v0
보낸 프로젝트(대개 Vite/React)에 Cursor와 같이 public/icons/, public/manifest.json을 맞춘 뒤 다음을 붙여넣으세요:
Bolt/v0에서 보낸 프로젝트에 Imagcon 아이콘을 넣어 주세요:
- public/icons/에 모든 PWA 크기
- public/manifest.json
- index.html에 manifest와 apple-touch-icon 링크
생성된 Vite/React 경로와 일치시키세요.Bolt와 v0는 UI 제작을 가속하고, Imagcon은 코드가 참조할 아이콘 패키지를 제공합니다.
PWA와 아이콘 검증
Chrome DevTools
- 1.Chrome에서 앱 열기
- 2.DevTools → Application
- 3.왼쪽 Manifest
- 4.아이콘 404 없는지 확인
- 5.“홈 화면에 추가” 표시 확인
Lighthouse (PWA)
- 1.DevTools → Lighthouse
- 2.Progressive Web App 선택
- 3.페이지 분석 실행
- 4.아이콘 관련 빨간 항목 수정
자주 겪는 문제
문제: Application → Manifest에 아이콘이 안 보임
해결: index.html <head>에 <link rel="manifest" href="/manifest.json">가 있는지 확인.
문제: manifest는 되는데 아이콘이 404
해결: 경로가 공개 URL과 일치해야 함. /public/icons/는 /icons/로 제공.
문제: Lighthouse에서 설치 불가
해결: 192×192와 512×512 필요. display는 standalone 또는 fullscreen.
문제: iOS에서 Apple 터치 아이콘 미동작
해결: <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> 추가.