전문 디자이너인 저도 앱 아이콘을 매일 반복해서 만드는게 아니다 보니

어쩌다 만들일이 생기면 '음? 내가 전에 어떻게 만들었더라?' 하는 생각 가끔 합니다.

하물며 처음 만들어 보시는 분들은 인터넷상에 떠돌아 다니는

휘향 찬란한 템플릿들 보면서 얼마나 헤깔릴까 싶기도 합니다.

스케치는 벡터 기반 툴이기 때문에 다른 용도로도 종종 사용하는데

사용하던 차에 동일 컨텐츠를 한꺼번에 뽑아 내는 Export 기능이 좋고 

Preset을 만들어 두면 다음번에도 어떤 앱 아이콘이든 한 방에

뽑아낼 수 있어서 스케치를 이용해 봤습니다. 

일반 프로그래머가 스케치를 구비해 두고 쓸 일은 많이 없을거 같기도 합니다만

스케치에서 어떻게 뽑아내는지 알아 두는 것도 나쁘진 않을것 같군요.

본론으로 돌아와 아이콘 디자인이 일러스트레이터에서 마무리가 되었다고 가정하고

이후 스케치에서 뽑아내기는 과정까지 정리해 보려고 합니다.

RadiOn이라는 최근 릴리즈 한 macOS용 앱 아이콘을 예를 들어 설명하겠습니다.

iOS나 Android의 경우 Preset 부분을 맞추거나 필요에 따라 추가해 주시면 됩니다.

https://www.clien.net/service/board/cm_app/11823040?po=1&od=T31&sk=&sv=&category=&groupCd=&articlePeriod=default&pt=0CLIEN

과정은 맥에서 진행되었으며 복사(Copy)의 경우 Mac은 '커맨드+C', Windows는 '컨트롤+C' 입니다.

붙이기(Paste)는 Mac은 '커맨드+V', Windows는 '컨트롤+V' 신공을 쓰시면 됩니다.

❶ 일러스트레이터에서

먼저 아래 상황을 간략히 설명하자면 도큐멘트 사이즈는 1024 x 1024 pixel 이며

꽉찬 원형이기 때문에 풀 사이즈로 맞춰 아이콘을 제작하면 다른 아이콘들에 비해 너무 크고 무거워 보입니다.

그래서 상하좌우 흰 여백이 조금씩 남도록 느낌적인 느낌으로 도큐멘트보다 조금 작게 만들었습니다.

첫 순서로 일러스트레이터에서 디자인이 완료된 아이콘을 선택하여 복사(Copy) 합니다.

그러면 여백을 제외한 순수 아이콘만 복사가 되었겠죠?

❷ 스케치로 넘어와

새 도큐를 만든 후  Artboard를 만들면 오른쪽 영역의 World Map으로 280 x 100이 Default로 만들어 집니다.

이것을 클릭해 1024 x 1024 Size로 변경해 줍시다. Artboard 사이즈가 너무 커서 전체가 안보일 수 있는데

그럴 경우 작업의 편의를 위해 커맨드+마이너스(−) 키를 한 번 눌러 화면을 축소해 줍니다.

RadiOn 앱 아이콘의 경우 바탕에 그라데이션이 들어가 있어 이 부분을 스케치에서 못 받더군요.

그럴 경우 일러스트레이터로 제작된 해당 아이콘의 AI 파일을 스케치에서 직접 Open으로 가져와 사용하면 됩니다. 

이렇게 바로 가져올 경우 일러스트레이터에서의 pixel 사이즈와 스케치의 사이즈가 달라질 수 있는데 

별도로 Artboard 사이즈를 조정할 필요는 없습니다. 어차피 벡터 기반의 소스이고 Preset에서 픽셀을 지정해 뽑을 거니까요.

저는 원 바탕의 그라데이션이 투명하게  불러와져 파일을 통째로 Open하는 방법을 택했습니다. 

특별한 문제가 없으면 Copy&Paste로도 충분합니다.

❸ 아이콘 가져오기

이제 일러스트레이터에서 복사(Copy)되었던 아이콘을 붙이고(Paste) 센터가 맞지 않다면 정렬해 줍니다.

정리가 되었다면 좌측영역에서 앱아이콘에 해당하는 레이어를 누르고, 우측 하단의 'Make Exportable'를 클릭합니다.

❹ Preset 선택 후 

여기에서 iOS, Android로 플랫폼이 달라질 수 있는데 원하는 프리셋을 선택한 후 Export로 바로 뽑아내면 됩니다.

그림에서 보이는 macOS Preset은 원래 기본 항목에 없고 직접 추가한 것입니다.

❺ Export 결과

iOS를 선택한 후 Export 했는데 참 쉽죠? 초간단 하군요.

❻ 그런데 말입니다... 원하는 플랫폼의 Preset이 없다면?

기존 Preset에 추가하거나 직접 만들면 됩니다.

macOS 플랫폼을 예를 들어 설명할텐데요. 하나의 과정을 이해하면 다른 플랫폼 역시 충분히 이해 하리라 믿습니다.

먼저 macOS의 경우 앱스토어에서 요구하는 앱 아이콘별 사이즈는 해상도 대응 포함 총 10개로 파일명의 형태는 아래와 같습니다.

--------------------------------------------------------------

이름(RadiOnIcon) + 픽셀크기 + 해상도 유무(@2x)

--------------------------------------------------------------

요구하는 파일 갯수(10개)와 픽셀 크기, 그리고 해상도인데 이 부분만 이해하면 Preset 만드는데 지장이 없겠군요. 

우선 앱스토어에서 10개의 파일을 요구하므로 Export 탭의 +를 눌러 총 10개를 만들어 줍니다.(플랫폼별 갯수 확인 필요)

❻ Preset 준비하기

앱스토어에서 요구하는 파일 리스트 순서대로 하나씩 채워 줍니다. 

Export 탭의 첫 번째 항목 16w는 가장 작은 크기의 가로(width) 16pixel을 의미합니다. 맨아래 가장 큰 것이 1024w군요.

가운데는 해상도에 대응하는 Suffix로 만들어질 파일명 중 끝부분을 의미합니다.

맨 아래 1024w의 경우 파일 이름이 RadiOnIcon 이라면 끝 부분에 512@2x가 붙어서

RadiOnIcon512@2x 가 됩니다. 그리고 맨 뒤에 부분이 PNG 포맷의 확장자로 설정되어 있네요.

❼ Preset 등록

이렇게 만든 것을 동일 플랫폼의 다른 앱 아이콘 제작에도 바로 사용하기 위해 Preset에 등록해 둡니다.

❽ Export를 하면~

짜잔~! 순식간에 앱스토어가 요구하는 파일 10개가 만들어 집니다. 아래 그림을 클릭하세요(GIF)

❾ 끝!

이제 간단히 프리셋 선택만으로 앱스토어 아이콘을 만들 수 있겠군요.

이상 illustrator와 Sketch를 통한 앱 아이콘 제작 가이드였습니다.