안녕하세요! 오늘은 애플 개발자라면 반드시 익혀두어야 할 새로운 아이콘 제작 도구인 Icon Composer 에 대해 깊이 있게 알아보겠습니다.
과거에는 각 디바이스 크기별로 수십 개의 이미지 파일을 직접 생성해야 했지만, 이제는 Icon Composer 하나로 모든 플랫폼에 대응하는 'Liquid Glass' 스타일의 동적 아이콘을 만들 수 있게 되었습니다.
1. Icon Composer란 무엇인가요?
Icon Composer 는 하나의 다층(multilayer) 파일을 사용하여 iOS, iPadOS, macOS, watchOS 및 App Store에 표시될 앱 아이콘을 통합 관리할 수 있게 해주는 도구입니다. 이 도구의 핵심은 개발자가 디자인한 레이어를 시스템이 지능적으로 렌더링하여, 플랫폼마다 최적화된 깊이감과 효과를 자동으로 부여한다는 점입니다.
2. 작업 시작 전: 아트워크 준비하기
아이콘을 Composer로 가져오기 전에, 여러분이 선호하는 디자인 툴(Figma, Adobe Illustrator 등)에서 레이어를 정리해야 합니다.
준비 가이드
- 포맷: 가급적 SVG 형식을 권장합니다. (벡터의 확장성 때문) SVG가 지원하지 않는 복잡한 효과가 있다면 PNG를 사용하세요.
- 캔버스 크기: iPhone/Mac용은 1024x1024 px , Apple Watch용은 1088x1088 px 을 기준으로 작업하세요.
- 레이어 분리: 배경, 주요 그래픽, 텍스트 등을 별도의 레이어로 나누어야 합니다. (시스템이 z-축 방향으로 겹쳐서 렌더링합니다.)
- 효과 제거: 그림자(Shadow), 블러(Blur), 광택(Specular) 효과는 디자인 툴에서 직접 넣지 마세요. Icon Composer 내에서 'Liquid Glass' 속성으로 조절하는 것이 훨씬 깔끔합니다.
3. Icon Composer 사용법
도구 실행하기
Xcode가 설치되어 있다면 다음 경로를 통해 실행할 수 있습니다.
Xcode>Open Developer Tool>Icon Composer
레이어 구성 및 그룹화
- 가져오기: 준비한 SVG/PNG 파일을 사이드바로 드래그 앤 드롭합니다.
- 그룹화: 레이어는 최대 4개의 그룹 으로 묶는 것이 좋습니다. 이 그룹들이 아이콘의 시각적 깊이를 결정하는 레이어 층이 됩니다.
- 이름 지정: 레이어와 그룹에 직관적인 이름을 붙여 관리하세요. 뒤쪽에서 앞쪽으로 번호를 매기는 방식(
01_bg,02_logo등)을 추천합니다.
4. Xcode 프로젝트에 적용하기
작업을 마친 .iconcomposer 파일을 Xcode 프로젝트에 통합하는 방법은 매우 간단합니다.
/* Xcode 설정 확인 사항:
1. .iconcomposer 파일을 프로젝트 내비게이터로 드래그합니다.
2. Target > General 탭으로 이동합니다.
3. 'App Icons and Launch Screen' 섹션에서 App Icon 이름이
파일 이름과 일치하는지 확인합니다.
*/주의사항: Icon Composer 파일을 추가하면 기존의 AppIcon 에셋 카탈로그를 대체하게 됩니다. 만약 이전 버전의 OS를 지원해야 한다면, Xcode가 빌드 타임에 이전 방식의 이미지를 자동으로 생성해주니 안심하셔도 됩니다.
5. 마무리 및 테스트
이제 시뮬레이터나 실제 기기에서 아이콘이 어떻게 보이는지 확인할 차례입니다. 특히 다크 모드 와 라이트 모드 환경에서 아이콘의 대비와 색감이 의도한 대로 표현되는지 꼭 체크해보세요.