앱 아이콘 디자인 스킬
트리거
새로운 앱 아이콘, 아이콘 리디자인, 아이콘 비평, 또는 Apple 앱 아이콘 내보내기 요청 시 사용합니다. 프로덕션 사양이 중요한 경우 Apple의 최신 디자인 및 기술 문서를 함께 확인하세요.
프로세스
- 앱의 핵심 목적과 브랜드 언어를 파악합니다. 관련성이 있다면 기존에 확립된 브랜딩을 사용하고, 그렇지 않다면 독창적인 시각적 은유를 선택합니다.
- 은유를 하나의 인식 가능한 핵심 심볼로 축소하고, 굵고 채워진 단순한 형태와 명확한 실루엣을 사용합니다. 아주 작은 디테일, 복잡한 텍스처, 가느다란 선, 스크린샷, 불필요한 텍스트, 과도한 광택 효과는 피합니다.
- 의도적이고 절제된 색상 팔레트와 선명한 전경/배경 대비를 선택합니다. 기본 아이콘을 광학적으로 중앙에 배치하고 시스템 마스크를 위한 충분한 안전 영역을 확보합니다.
- 작은 크기에서도 식별 가능하도록 디자인합니다. 전체 크기, 180px, 60px, 30px에서 미리보기합니다(디자인 테스트용이며 Apple이 규정한 픽셀 요구사항은 아닙니다).
- 기본, 다크, 클리어, 틴트 모드를 고려합니다. 다양한 외형에서도 개념과 인지도를 유지합니다.
- QA 체크리스트를 검토하고, 작은 규모에서 노이즈가 될 수 있는 요소는 단순화합니다.
- 사용 가능한 도구에서 실제로 지원하는 형식으로 최고 품질의 에셋을 생성합니다. 실제로 제작되지 않은 벡터/편집 가능 소스 또는 변형을 있다고 주장하지 마십시오.
Apple 휴먼 인터페이스 가이드라인
- 단순함과 즉각적인 인식을 선호합니다. 시스템이 하이라이트와 그림자를 추가하면 미세한 특징이 노이즈가 될 수 있습니다.
- 사진보다는 일러스트레이션을 선호하고, 앱 UI를 단순히 재현하지 마십시오.
- 매우 가느다란 선이나 날카로운 각도는 작은 크기에서 디테일이 손실되므로 피합니다.
- 불필요한 단어, 슬로건 또는 플랫폼별 문구를 피합니다.
- Apple 하드웨어를 복제하지 마십시오.
- 마스킹되지 않은 정사각형 레이어를 사용합니다. 시스템이 자체적으로 모서리/원형 마스크를 적용합니다. 기본 아트워크에 둥근 모서리를 굽지 마십시오.
- 중요한 콘텐츠는 중앙에 배치하여 시스템 마스킹이 잘리지 않도록 합니다.
- 아이콘은 기기와 외형 전반에서 시각적 일관성을 유지해야 합니다.
Apple 크기 및 시스템 형태 (2026-10-24 확인)
| 대상 | 캔버스 | 시스템 마스크 |
|---|---|---|
| iOS, iPadOS, macOS | 1024 × 1024 px | 둥근 사각형 |
| watchOS | 1088 × 1088 px | 원 |
| visionOS | 1024 × 1024 px | 원 |
| tvOS | 800 × 480 px | 둥근 사각형 |
- 휴대용 내보내기에는 sRGB를 사용합니다. Display P3도 문서화된 대로 Apple 플랫폼에서 지원됩니다.
- 최신 Apple 워크플로우의 경우 레이어드 아트워크와 Icon Composer를 사용하여 플랫폼 및 외형 변형(기본, 다크, 클리어 라이트/다크, 틴트 라이트/다크)을 미리보는 것을 선호합니다.
- 아트워크를 벡터로 그리고 가능한 경우 각각 독립적으로 조정 가능한 레이어를 SVG로 내보내되, 텍스트는 윤곽선으로 변환합니다. SVG 기능이 지원되지 않는 경우 PNG 레이어도 적합합니다.
- Liquid Glass 레이어드 아이콘을 준비할 때 블러, 그림자, 스페큘러 효과, 반투명, 불투명도, 그라데이션 및 배경 효과는 Icon Composer로 연기하십시오.
- 배경은 전체 캔버스를 덮어야 합니다. 정적 iOS 아이콘의 경우 기본적으로 완전 불투명한 전체 채움 배경을 사용합니다. 투명한 분리된 글리프는 완전한 아이콘이 아닌 다른 에셋 유형입니다.
- 시스템이 마스크를 적용합니다. 아트워크 레이어에 마스크 형상을 내보내지 마십시오.
- 정적 아이콘 워크플로우의 경우 평면 1024px PNG를 제공할 수 있지만, 이는 레이어드된 Icon Composer
.icon에셋과 동등하지 않습니다.
QA 체크리스트
- 하나의 기억에 남는 컨셉, 인식 가능한 실루엣
- 작은 크기와 그레이스케일에서도 읽기 쉬움
- 제한된 색상과 강한 대비
- 불필요한 단어, 텍스처, 미세한 디테일, 스크린샷 없음
- 광학적 중앙 정렬 및 안전 가장자리 간격
- 소스 아트워크 정사각형 및 마스킹되지 않음, 배경 전체 채움
- 다크, 틴트, 클리어 외형에서 검토
- 올바른 대상 플랫폼 크기, 색 공간 및 내보내기 형식
- 편집 가능성, 레이어 및 형식에 대한 주장이 실제 파일과 일치
사용자의 현재 브레인/수학 앱: 선택적 브랜드별 오버레이
모든 앱이 아닌 이 특정 프로젝트에만 사용:
- 최대 단색 3가지 색상; 팔레트는 코발트/일렉트릭 블루, 바이올렛, 마젠타 핑크(또는 적절한 경우 딥 네이비)에서 선택.
- 사용자가 재정의하지 않는 한 그라데이션 없음.
- 추상적이고 단순화된 브레인 실루엣과 소수의 굵은 로브; 과도하게 디테일한 해부학적 일러스트레이션은 사용하지 않음.
- 작은 아이콘 크기에서도 최소화되고 인식 가능하며 매력적이어야 함. 깊이는 절제되고 더 많은 색상을 추가하지 않아야 함.
- 앱 아이콘 배경은 투명하지 않고 구성의 일부여야 함(별도 심볼 레이어가 요청되지 않은 경우).
이미지 생성 브리프 템플릿
'[APP]용 정사각형 앱 아이콘을 만들어 주세요. 하나의 기억에 남는 중앙 심볼 [SYMBOL]을 사용하고, [PALETTE]의 소수의 단색 고대비 형태로 구성하며, 전체 채움 불투명 [BACKGROUND] 배경 위에 배치합니다. 시각적 무게로 중앙 정렬하고 바깥쪽 가장자리 주변에 충분한 여백을 두며, [요청된 경우] 그라데이션, 글자, 인터페이스 요소, 미세한 디테일을 피하고, 작은 크기에서도 강한 인식도를 유지하며, 내장된 둥근 모서리 마스크를 사용하지 않습니다.'
정보 출처
- Apple HIG 앱 아이콘: https://developer.apple.com/design/human-interface-guidelines/app-icons
- Apple의 Icon Composer 워크플로우: https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
- Apple 디자인 리소스: https://developer.apple.com/design/resources/
- Apple Icon Composer: https://developer.apple.com/icon-composer/
디자인 조언은 종합된 내용입니다. 출시 전에 최신 Apple 사양을 확인하세요. 이는 실행 가능한 시스템/플러그인 스킬로 등록되었음을 증명하는 것이 아니라, 이식 가능한 스킬 문서입니다.