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를 미리보기하세요.
안티 패턴
- 기존 프로젝트 아이콘 스타일을 확인하지 않고 아이콘 생성
- 프로젝트에 정의된 색상 팔레트가 있을 때 기본 색상 사용
- 잘못된 크기로 생성 (먼저 기존 아이콘 확인)
- 시각적 확인 없이 생성된 아이콘 커밋