iOS 아이콘 생성기은(는) 무엇을 하나요?
두 가지 소스로부터 Xcode 에셋 카탈로그용 PNG 아이콘 이미지셋을 생성합니다.
활성화 시기
- iOS/macOS Xcode 프로젝트의 아이콘 에셋을 생성할 때
- 오픈 소스 컬렉션에서 아이콘을 검색할 때
- 에셋 카탈로그용 PNG 이미지셋(1x, 2x, 3x)을 생성할 때
- 플레이스홀더 아이콘을 프로덕션 품질의 에셋으로 교체할 때
- 기존 Xcode 프로젝트의 아이콘 스타일을 일치시킬 때
핵심 원칙
1. 두 가지 소스, 하나의 출력 형식
두 소스 모두 동일한 Xcode 호환 이미지셋을 생성합니다. 필요에 따라 선택하세요:
| 소스 | 아이콘 수 | 필요 조건 | 최적 사용 사례 |
|---|---|---|---|
| Iconify API | 200개 이상 컬렉션에서 275,000개 이상 | 인터넷 연결 | 폭넓은 선택지, 특정 스타일, 오픈 소스 아이콘 |
| SF Symbols | 5,000개 이상의 Apple 심볼 | macOS 전용 | Apple 네이티브 스타일, 오프라인 사용 |
2. 항상 기존 스타일 일치
생성하기 전에 프로젝트의 기존 아이콘 크기, 색상, 굵기를 확인하세요.
3. 출력 구조
두 방법 모두 완전한 Xcode 이미지셋을 생성합니다:
<출력-디렉터리>/<에셋-이름>.imageset/
Contents.json
<에셋-이름>.png # 1x (기본 68px)
<에셋-이름>@2x.png # 2x (기본 136px)
<에셋-이름>@3x.png # 3x (기본 204px)
예제
1단계: 요구사항 평가
아이콘이 나타내는 것, 선호 스타일, 대상 색상, 크기를 결정합니다.
프로젝트에 이미 아이콘이 있다면 기존 스타일을 확인:
# 기존 아이콘의 크기 확인
sips -g pixelWidth -g pixelHeight path/to/[email protected]
2단계: 아이콘 검색
Iconify API (다양한 선택에 추천):
# 모든 컬렉션에서 검색
$SKILL_DIR/scripts/iconify_gen.sh search "receipt"
# 특정 컬렉션 내에서 검색
$SKILL_DIR/scripts/iconify_gen.sh search "business card" --prefix mdi
# 사용 가능한 컬렉션 목록 보기
$SKILL_DIR/scripts/iconify_gen.sh collections
SF Symbols (Apple 네이티브 스타일): SF Symbols 앱을 탐색하거나 일반적인 이름을 참고:
| 사용 사례 | 심볼 이름 |
|---|---|
| 문서 | doc.text, doc.fill |
| 영수증 | doc.text.below.ecg, receipt |
| 사람 | person.crop.rectangle, person.text.rectangle |
| 카메라 | camera, camera.fill |
| 스캔 | doc.viewfinder, qrcode.viewfinder |
| 설정 | gearshape, slider.horizontal.3 |
3단계: 미리보기 (선택 사항)
# Iconify 미리보기
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline
4단계: 생성
Iconify API:
# 기본 생성
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport
# 사용자 지정 색상 및 출력 위치
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons
옵션: --size <pt> (기본값: 68), --color <hex> (기본값: 8E8E93), --output <dir> (기본값: /tmp/icons)
SF Symbols:
# 기본 생성
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport
# 사용자 지정 색상, 굵기, 출력
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons
옵션: --size <pt> (기본값: 68), --color <hex> (기본값: 8E8E93), --weight <name> (기본값: thin), --output <dir> (기본값: /tmp/icons)
5단계: 확인 및 통합
- 생성된 @2x PNG를 시각적으로 확인
- 직접 출력하지 않은 경우 에셋 카탈로그로 복사:
cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/ - 프로젝트를 빌드하여 Xcode가 새 에셋을 인식하는지 확인
인기 있는 Iconify 컬렉션
| 접두사 | 이름 | 개수 | 스타일 |
|---|---|---|---|
mdi | Material Design Icons | 7400+ | 채움 + 외곽선 변형 |
ph | Phosphor | 9000+ | 아이콘당 6개 굵기 |
solar | Solar | 7400+ | 굵게, 선형, 외곽선 |
tabler | Tabler Icons | 6000+ | 일관된 선 너비 |
lucide | Lucide | 1700+ | 깔끔하고 미니멀 |
ri | Remix Icon | 3100+ | 채움 + 선 변형 |
carbon | Carbon | 2400+ | IBM 디자인 언어 |
heroicons | HeroIcons | 1200+ | Tailwind CSS 동반 |
모두 둘러보기: https://icon-sets.iconify.design/
스크립트 참조
| 스크립트 | 소스 | 경로 |
|---|---|---|
iconify_gen.sh | Iconify API (275,000개 이상 아이콘) | $SKILL_DIR/scripts/iconify_gen.sh |
generate_icons.swift | SF Symbols (5,000개 이상 아이콘) | $SKILL_DIR/scripts/generate_icons.swift |
모범 사례
- 생성 전에 검색 – 사용 가능한 아이콘을 둘러보며 가장 적합한 것을 찾으세요
- 기존 프로젝트 스타일 일치 – 새 아이콘을 생성하기 전에 기존 아이콘의 크기, 색상, 굵기를 확인하세요
- 다양성을 위해 Iconify 사용 – 200개 이상의 컬렉션에서 필요한 정확한 스타일을 찾을 수 있습니다
- Apple 일관성을 위해 SF Symbols 사용 – 시스템 UI와 완벽하게 일치합니다
- 에셋 카탈로그에 직접 생성 –
--output ./Assets.xcassets/icons를 사용하여 수동 복사를 생략하세요 - 시각적으로 확인 – 커밋 전에 항상 @2x PNG를 미리보기하세요
안티 패턴
- 기존 프로젝트 아이콘 스타일을 확인하지 않고 아이콘 생성
- 프로젝트에 정의된 색상 팔레트가 있음에도 기본 색상 사용
- 잘못된 크기로 생성 (기존 아이콘 먼저 확인)
- 시각적 확인 없이 생성된 아이콘 커밋