UI & UX, UX & Design

앱 아이콘 사이즈는요? _ UX 디자인과 개발

앱 페이지 디자인만큼 중요한 비중을 차지하는 부분이 앱 아이콘 디자인이죠. 앱 아이콘은 로고를 주로 이용합니다. 아이콘 가이드에 맞춰 제작하고 개발자에게 파일을 넘겨주면 되는데 정확한 사이즈를 알지 못하고, 파일 관리를 어떻게 해야 할지 모를 때, 유용하게 쓸 수 있는 사이트 하나를 소개합니다.

토스터기에 아이콘 이미지를 넣으면 앱을 개발할 때 필요한 이미지로 리사이징해주는 사이트(클릭)입니다. 토스터에 이미지가 들어가고 구워지는 UI가 완성도 있진 않지만 꽤나 귀여운 UI로, 개발자가 디자이너에게 아이콘 이미지를 받아 이용하기도 하거나 디자이너가 아예 이미지 리사이징, 폴더 정리를 해서 개발자에게 넘겨줄 때 수월하도록 도와줍니다.

이용방법은 간단합니다.

설명을 위해 간단하게 그린 이미지입니다  

1. 1024 사이즈의 앱 아이콘 만들기

1024 픽셀 크기의 앱 아이콘을 만듭니다. 기본 아이콘 그리드 안에 적당한 간격과 위치, 정렬을 맞춰주세요. 

2. 웹사이트에 아이콘 파일 첨부 – 로딩 

png(뒷 배경 투명 이용), jpg 형식의 이미지를 선택하면 토스터기에서 구워집니다.

3. 이름과 분야 등 작성(작성하지 않고 건너뛰기 가능)

해당 아이콘의 이름, 분야 등을 작성할 수 있습니다.
– 별도로 적지 않는다면 첨부 파일 이름으로 파일, 폴더 이름 생성

3. 완료된 파일 미리보기

ios, Android 환경에서 적용됐을 때, 어떤 식으로 나오는지 미리 확인할 수 있습니다. 
– 배경을 투명으로 설정(png 파일)해 ios에서는 기본 회색 배경으로, 안드로이드에서는 투명 설정이 적용됐습니다.

4. 파일 다운로드하기

다시 상단으로 올라가 이메일을 작성하면 메일로 zip 파일이 도착한 것을 볼 수 있습니다.
– 네이버의 경우 스팸으로 들어가는 경우도 있으니 유의
– 애플 워치, 뉴스레터를 받지 않길 원할 경우 이메일 작성 아래 두 개의 체크 박스를 해제하세요.

5. 파일 확인 및 전달

첨부 파일을 받아 압축을 해제하면 다양한 OS에 맞춰 사이즈가 정리된 것을 확인할 수 있습니다. 해당 OS 개발자에게 폴더를 넘기면 끝! 

ps. 앱 아이콘 디자인, 그리드를 잘 맞춰 디자인해야 하는 이유

안드로이드의 경우 환경(디바이스 차이 등)과 업데이트에 따라 앱 아이콘이 원형, 사각형, 라운딩의 차이가 생길 수 있습니다. 이때 그리드를 잘 맞춰 디자인한다면 중심과 상화좌우 여백이 자동으로 조절되지만 그리드에 벗어나서 디자인한다면 상하좌우 여백이 불균형하고, 로고(아이콘)만 꽉 차게 보일 수 있습니다. 개발 단계에서 별도의 조절이 가능하지만 개발자와 한번 더 작업을 해야 하는 부분으로, 그리드에 맞춰 작업해서 한 번에 적용하는 깔끔한 작업이 될 수 있습니다.

Comments
  • digitla-insight-202102-offline-ads-M4A-media4thaligence
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts