Icon Composer로 아이콘 생성하기

안녕하세요, Icon Composer로 아이콘 만들기에 잘 오셨습니다 저는 여기 Design 팀의 디자이너인 Lyam입니다 이번 세션에서는 새로운 도구를 사용하는 방법을 보여드리겠습니다 Icon Composer는 여러분의 앱 아이콘의 디자인을 iPhone, iPad, Mac 및 Watch와 잘 어우러지도록 만들어 줍니다

먼저, 만약 '앱 아이콘의 새로운 모습을 만나보세요' 세션을 아직 시청하지 않으셨다면 모든 아이콘 디자인 언어 업데이트는 물론 손가락 하나만으로 더 많은 맞춤화를 제공하는 꽤 멋진 추가 iOS와 macOS 모드에 대한 영상입니다 그러니 이 영상부터 시청한 후 이 세션을 통해 이 작업을 스스로 해내는 방법을 알아보는 것을 권장합니다 좋아요 바로 뛰어들기 전에 이제까지 아이콘이 어떻게 변했는지 나눠보려고 합니다 기억하실지도 모르겠네요 지난 몇 년간 Mac 앱 아이콘은 다양한 크기로 만들어졌습니다 어디에 나타나든 각 아트워크가 최적화될 수 있도록 말이죠 레티나 스크린이 있기 전이라 대비와 가독성을 극대화하기 위해 요소를 픽셀 그리드에 최대한 맞추는 게 중요했죠

그런 다음 iOS와 watchOS가 등장했습니다 두 배의 픽셀 밀도를 가진 2배, 3배 디스플레이가 등장해 아이콘을 많이 만들 수 있었죠 몇 년 전 모든 스크린 해상도와 오토 스케일링의 발전과 함께 플랫폼마다 이미지 하나만 제공하면 시스템이 모든 것을 알아서 해줘 작업을 간소화하는 옵션을 추가했습니다 시간이 흐른 올해 2025년에는

iOS에서 다크 모드와 색조 모드가 더 확장되었고

macOS까지도 이러한 외관을 채택하게 되었습니다

Watch 또한 새로운 외관을 선보이며 비슷한 터닝포인트를 지나고 있음을 일깨웠죠 우리 앱 아이콘 언어의 일관성을 높이고 있는 이 기회를 통해 이 과정을 간소화하려고 합니다

Icon Composer를 통해 이 모두를 한 파일에서 작업할 수 있습니다

아이콘이 매우 복잡하거나 일러스트가 많은 경우 개별 이미지를 Xcode에 업로드해야 할 수 있습니다 이제 직접 작업하지 않고도 온디바이스에서 에지가 말끔히 정리됩니다 전문 용어로는 스페큘러 하이라이트라고 하죠 하지만 더 그래픽화된 이 버전처럼 아트워크를 디자인 언어에 조금 더 맞추고 싶다면 Icon Composer로 옮겨 작업하세요 Liquid Glass가 선사하는 모든 새로운 가능성을 실현시켜줄 것입니다

Icon Composer는 기존 디자인 도구와 함께 사용하기에 작업물을 원하는 대로 제어할 수 있습니다 다양한 플랫폼에 걸쳐 앱 아이콘의 외관까지도 매끄럽게 바꿔줍니다 올해 당사 아이콘 업데이트 시 사용했던 것과 같은 도구죠 정말 많은 시간을 절약해준 기능입니다 오늘까지도 아트워크 하나만으로 iPhone, iPad, Mac, Watch 디자인을 제작할 수 있어 어떤 디바이스에서든 일관성 높은 아이덴티티를 돋보이게 합니다 다이내믹 글래스 고유 속성을 모두 활용해 실제 모습을 미리 확인하고 여섯 가지 새 외관, 즉 기본, 다크 클리어 라이트, 클리어 다크 밝은 색조, 어두운 색조 모두 테스트할 수 있습니다

제작한 아트워크가 마음에 든다면 이미지를 내보내기하여 마케팅을 비롯한 다른 용도로 사용해보세요 다양한 크기로 조정하는 작업도 더 이상 걱정하지 마세요 아이콘에 맞춰 리소스가 적응하고 크기를 조정하도록 설계했습니다

Icon Composer를 사용한 새 워크플로의 모습을 살펴보죠 원하는 디자인 도구에서 레이어를 내보내기해 Icon Composer로 가져옵니다 여기서 글래스와 외관 모드 및 플랫폼에 맞춰 조정 작업을 합니다 이렇게 파일을 저장하면 Xcode로 내보낼 준비를 마치게 됩니다 각 단계를 조금 더 자세히 살펴봅시다 먼저 디자인 과정을 살펴보겠습니다 플랫 그래픽 작업에는 벡터를 그리는 도구가 가장 좋습니다 SVG로 내보내기 기능이 있어 추후 가장 좋은 확장성을 제공하기 때문이죠 이 도구를 연 후에는 알맞은 캔버스 크기를 설정해야 합니다 제 생각에 가장 간단한 방법은 AppIcon 템플릿 사용입니다 Figma, Sketch, Photoshop과 Illustrator에서도 사용할 수 있고 모두 Apple 디자인 리소스 웹사이트에서 찾을 수 있습니다 iPhone, iPad 또는 Mac용 디자인은 이제 다 1024px를 사용합니다 작업이 간편해지죠 새로운 그리드와 함께 모서리가 둥근 직사각형 모양을 사용합니다 Watch는 이제 1088px이며 Apple만의 둥근 모서리 직사각형을 떠올리게 합니다 또한 같은 그리드를 사용해 플랫폼 간에 변환하기 쉬운 디자인으로 설계할 수 있죠

이제 레이어로 아이콘을 디자인할 준비가 된 것입니다 tvOS 또는 visionOS용 앱 아이콘을 만드는 데 익숙하다면 이미 레이어링이라는 개념을 잘 아실 것입니다 본질적으로, 각 레이어는 Z 깊이의 단계를 나타냅니다 가장 아래 레이어는 배경이 되고 그 위에 다른 레이어들이 쌓이죠

많은 경우, 전경과 배경의 개념만큼이나 간단합니다 예를 들면, 메시지가 있죠 아트워크가 집처럼 조금 더 계층화된 경우도 있겟죠

Z값으로 레이어 쌓기 외에도 레이어별로 여러 색상을 나누면 추후 Icon Composer에서 더 많은 기능을 제어할 수 있죠 이 번역 작업을 예로 들어보죠 말풍선에는 분리된 레이어가 두 개 있습니다 시작이 좋네요 말풍선에서 유형까지 분리하면 더 많은 것을 제어할 수 있게 되죠 Icon Composer에서 다크모드를 변수로 만들면 공백을 하나만 바꾸면 작업이 끝납니다

디자인 작업에서 고려해야 할 다른 것은 Icon Composer에서 창작과 관련해 어떤 결정을 내릴 수 있는지입니다 다시 번역 작업으로 돌아갑시다 겹치는 부분에 블러 효과를 주면 꽤 멋있어 보일 것 같아요 약간 떠올라 보이도록 가볍게 그림자를 넣어도 좋죠

하지만 Liquid Glass로 레이어를 만들 테니 이는 모두 동적 속성이게 됩니다 Icon Composer에 직접 추가하면 되죠 스페큘러, 불투명도 반투명도도 마찬가지입니다

파일에 입히지 않고 소스아트를 기본 그래픽에 고정하는 것이 가장 좋습니다 플랫하고 불투명하니 나중에 제어하기 쉽도록요

아트워크를 알맞은 곳에 두었다면 레이어를 SVG로 내보내야 합니다 사용하는 도구에 따라 방법은 다를 수 있죠 Illustrator를 사용하는 경우 SVG 스크립트에 레이어를 만들면 작업이 자동화되고 작업물을 다운로드할 수 있습니다 캔버스 크기 내보내기 기능은 Icon Composer에서도 모든 것을 제자리에 표시합니다 Z 순서로 번호를 매기면 자동으로 같은 순서를 따를 것입니다 또는 나중에 언제든지 순서를 매길 수 있습니다

또한 Icon Composer에 간단한 배경과 그라디언트가 곧바로 추가되니 따로 내보낼 필요가 없습니다

SVG 형식은 글꼴을 보존하지 않으니 텍스트도 사용할 경우 내보내기 전에 윤곽선으로 변환해야 합니다 맞춤형 그라디언트, 래스터 이미지 또는 SVG에 표현되지 않는 모든 요소 또는 소프트웨어를 사용할 때에는 이 레이어를 PNG로 내보내기 합니다 투명한 배경을 유지할 수 있어 손실이 없는 형식이기 때문입니다 기억해야 할 마지막 팁은 내보내기 할 때 모서리가 둥근 사각형 또는 원형 마스크를 포함하지 않는 것입니다 따라서 이 Siri 예제에서는 이렇게 내보내기 하지 않습니다 추후, 마스크가 자동으로 적용돼 알맞게 잘라낼 수 있기 때문입니다 이게 더 낫네요!

레이어를 내보내면 Icon Composer를 열 준비가 된 것입니다 기존 프로젝트를 살펴보겠습니다

왼쪽에는 캔버스, 그룹 및 레이어가 있는 사이드바가 있네요 모든 다른 아트워크와 미리보기 컨트롤이 있는 미리보기 패널이 중앙에 있죠 좋습니다 그리고 오른쪽에는 모양 속성과 문서 옵션을 찾을 수 있는 인스펙터가 있습니다

Icon Composer를 처음 열면 이러한 환경을 볼 수 있습니다 캔버스만 보이죠

이 파란 음영을 그대로 쓰시진 않을 테니 배경색을 설정하려면 사이드바로 이동해 캔버스를 선택하고 인스펙터로 이동해 색상 또는 그라디언트를 선택합니다 이 시스템 프리셋 중 하나를 사용할 것입니다 미리 설정된 밝은 배경과 어두운 배경이 있습니다 새 작업물을 위해 최적화를 거쳤죠

미리보기 패널에서 이렇게 업데이트되는 것을 보세요

이러한 각 섹션이 어떻게 합쳐지는지 볼 수 있습니다 사이드바부터 시작하여 각 영역을 자세히 살펴보겠습니다 원하는 레이어를 드래그 앤 드롭합니다 이렇게 하면 알파벳 순서로 정리되어 그룹화됩니다

Icon Composer에서 그룹은 요소를 쌓고 글래스 속성을 받는 방식을 제어합니다 기본값은 항상 1로 설정되어 있지만 4까지 가능합니다 이 숫자가 아이콘의 시각적 복잡성의 범위를 결정합니다 홈에서는 4를 모두 사용해 각 층을 각각의 고유한 글래스로 만들어보겠습니다

하단에는 플랫폼과 외관 모드가 있습니다 디자인 작업을 한다면 이미 익숙할 세 가지 외관, 즉 라이트, 다크 및 색조 모드가 동일히 나타납니다

올해 이 이름은 기본, 다크, 모노로 바뀌었습니다 아트워크가 투명은 물론 색조 외관으로도 나타납니다

이 모든 것은 섬네일 클릭으로 미리 볼 수 있습니다

인스펙터에서는 외관 속성과 문서 설정 제어 기능을 모두 볼 수 있습니다 어떤 플랫폼을 디자인할지 선택하는 데 도움이 되죠

외관 제어 기능을 다시 살펴보겠습니다

Icon Composer로 레이어를 드래그하면

이제 자동으로 Liquid Glass를 생성합니다

레이어 수준에서 이 기능의 사용 여부를 선택할 수 있습니다 이에 더해, 디자인 도구에서 사용하는 다른 유용한 제어 기능도 여러 가지 있습니다

색상 제어는 다크 및 모노 모드로 버전을 만들 때 유용하죠 구성 제어 기능은 다양한 플랫폼용 아트워크 재작업에 적합합니다

이제 그룹 수준으로 이동하겠습니다 제어 기능이 조금 달라 보이네요 여기서 모든 Liquid Glass 옵션을 볼 수 있습니다 일부는 자동으로 설정되지만 여러 기능을 활용해보고 원하는 디자인을 얻으실 수 있길 바랍니다

이러한 속성을 맞춤화하며 활용할 수 있게 되면 일부 기능은 외관별로 적용하도록 미리 구성되어 있으니 유의하세요 불투명도, 혼합 모드 및 채우기와 같은 기능입니다 각기 다른 모드라도 특성은 일관적인 경우가 많으니까요 제어 기능이 더 많이 필요하다면 마우스 위로 더하기 아이콘을 클릭합니다 여기서 속성을 개별로 변형할 수 있습니다

다음은 이러한 속성을 사용할 때 유용한 몇 가지 팁입니다 제가 보통 눈 여겨 보는 것들이죠

캘린더 아이콘에 있는 날짜를 살펴볼까요 제가 원하는 것보다는 좁은 부분이 좀 복잡하고 폭신해 보입니다 그룹에서 스페큘러를 바꾸거나 레이어에서 Liquid Glass를 완전히 끄는 방식으로 해결할 수 있습니다

그림자 중립 그림자는 미리 설정된 그림자입니다 비교적 은근히 표현되고, 다양하며 어떤 배경에서든 멋져 보이죠 하지만 흰색에 색을 사용할 때 색채 그림자를 테스트할 수 있는 좋은 기회죠 아트워크의 색이 배경에 배어나와 조명과 재료의 물리적 특성을 강조해 멋져 보입니다 다크 모드와 모노 모드에서도

뉴트럴한 그림자 효과를 유지해 여러 버전을 만들 수도 있습니다

다크 모드 외관의 경우 몇 가지 일반적인 고려 사항도 있습니다

예를 들어, 채우기가 있죠 저는 아트워크 최적화를 위해 항상 이 기능을 사용합니다 사전의 경우 다크 모드에서 아무것도 만지지 않으면 이런 모습일 것입니다 두 가지를 강조하기 때문에 좋은 예가 되죠 먼저, 적갈색 북마크가 검은색과 겹쳐 뭉개져 보이죠 또한 튀어보이던 코랄 레드 색상이 색을 잃었습니다

그래서 채우기 설정을 바꿔야 하죠 이 논리는 다른 색상 관련 속성에도 적용할 수 있습니다 불투명도와 블렌드 모드처럼요

PNG를 가져왔지만 채우기 기능을 사용할 수 없다고 가정해 봅시다 같은 논리를 적용합니다 디자인 소프트웨어에서 다른 이미지를 생성하고 변형 버전으로 가져오는 것이죠

또한 모노 모드에서 가독성은 매우 중요합니다 아이콘에서 하나 이상의 요소를 흰색으로 설정하고 일반적으로 가장 눈에 띄거나 알아볼 수 있는 부분이 강하게 나타나도록 해야 합니다 다른 색상은 회색 톤으로 매핑할 수 있습니다 Icon Composer는 이를 자동 변환할 것입니다 하지만 좋은 대비 효과를 주려면 추가 조정 작업이 필요합니다 그리고 둥근 직사각형과 둥근 플랫폼을 디자인 할 때에는 많은 경우 아무 작업도 필요하지 않습니다 새 Watch 캔버스가 광학적으로 더 크고 같은 그리드를 사용하니까요 하지만 한 가지 조심해야 할 것은 바로 구성입니다 원 모양에는 광학 조정 작업을 고려하세요 그리고 Watch의 경우 캔버스의 가장자리에 닿는 요소가 있다면 가장자리에 다시 닿도록 크기를 조정합니다 또는 해당 개념에 익숙하다면 블리드 형태로 디자인하면 이것을 소스 아트에 통합할 수 있습니다 이 모든 것을 기반으로 마지막으로 미리보기 패널을 살펴보겠습니다

오른쪽 상단의 제어 기능은 아이콘을 제공하는 동안 배경을 변경하는 기능입니다 다른 맥락에서 확인하기에 좋습니다 새로운 모드 뒤에 있는 배경화면이나 이미지를 사용해 가독성을 테스트해보세요

아이콘 그리드에 오버레이하여 조명의 움직임을 확인하거나

더 확대해 작은 디테일을 확인할 수도 있습니다

Icon Composer 작업이 마무리되어 다음 단계로 넘어가려면 .Icon 파일만 저장해 내보내기하면 됩니다 Xcode로 드래그하고 프로젝트 편집기에서 아이콘을 선택합니다 앱을 빌드하고 실행할 때 어떻게 플랫폼과 외관에 맞게 조정되는지 확인할 수 있습니다

마무리 하자면, 기존 작업 방식은 현존하는 디자인 도구에서 디자인 과정을 시작하고 마무리하는 방식이었습니다 Icon Composer는 다양한 제품 작업 시 새롭고 동적인 방식으로 디자인을 실현하는 또 다른 방식을 제공합니다 애셋 생성에 드는 시간을 줄이고 Photoshop에서 더 짧은 시간 안에 많은 글래스 효과를 재현하세요 모두가 경험해 알고 있잖아요 아이콘 디자인 작업은 단순한 정적 이미지 작업에서 벗어나 표현적이고 다층적인 아트워크의 미래로 나아가고 있으며 이제 사용자 입력에 응답하고 다양한 외관 스타일에 적응합니다 더 복잡해진 이 작업은 더 통합된 온디바이스 경험을 선사합니다

이 모든 이점을 누리고 싶다면 Icon Composer 베타를 사용하세요 계속해서 새로운 기능이 도입되고 당신의 피드백을 바탕으로 개선을 거칩니다 다운로드하고 피드백 어시스턴트를 통해 개선점을 요청하세요 이 새로운 도구를 통한 리소스를 모두 경험해보세요 시청해 주셔서 감사합니다