UX 디자인과 개발 4. 앱 아이콘 사이즈는요?
앱 아이콘 사이즈는 어떤 사이즈로 작업해야하나요?
앱 페이지 디자인만큼 중요한 앱 아이콘 디자인.
앱 아이콘은 로고를 주로 이용합니다. 아이콘 가이드에 맞춰 제작하고 개발자에게 파일을 넘겨주면 되는데 정확한 사이즈를 알지 못하고, 파일 관리를 어떻게 해야 할지 모를 때, 유용하게 쓸 수 있는 사이트 하나를 소개합니다.
토스터기에 아이콘 이미지를 넣으면 앱 개발할 때 필요한 이미지로 리사이즈, 폴더 정리해주는 사이트입니다. 토스터에 이미지가 들어가고 구워지는 UI가 완성도 있진 않지만 꽤나 귀여운 사이트로, 개발자가 디자이너에게 아이콘 이미지를 받아 이용하기도 하거나, 디자이너가 아예 이미지 리사이즈, 폴더 정리를 해서 개발자에게 넘겨줄 때 수월하도록 도와줍니다.
이용방법은 간단합니다.
설명을 위해 간단하게 그린 이미지입니다.1. 1024 사이즈의 앱 아이콘 만들기.
1024 픽셀 크기의 앱 아이콘을 만듭니다. 기본 아이콘 그리드 안에 적당한 간격과 위치, 정렬을 맞추어주세요.
- 설명을 위해 간단히 그린 이미지로 다른 곳에 사용된 아이콘, 로고가 아닙니다.
2. 홈페이지에 아이콘 파일 첨부 - 로딩
png(뒷 배경 투명 이용), jpg 형식의 이미지를 선택하면 토스터기에서 구워집니다.
3. 이름과 분야 등 작성(작성하지 않고 건너뛰기 가능)
해당 아이콘의 이름, 분야 등을 적어줄 수 있습니다.
- 별도로 적지 않는다면 첨부 파일 이름으로 파일, 폴더 이름 생성
3. 완료된 파일 미리 보기.
ios, Android 환경에서 적용되었을 때, 어떤 식으로 나오는지 미리 확인할 수 있습니다.
- 배경을 투명으로 설정(png 파일)해 ios에서는 기본 회색 배경으로, 안드로이드에서는 투명 설정이 되었습니다.
4. 파일 다운로드하기
다시 상단으로 올라가 이메일을 작성하면 메일로 zip 파일이 도착해있습니다.
- 네이버의 경우 스팸으로 들어가는 경우도 있으니 유의
- 애플 워치, 뉴스레터를 받지 않길 원할 경우 이메일 작성 아래 두 개의 체크 박스를 해제하세요.
5. 파일 확인 및 전달
첨부 파일을 받아 압축을 해제하면 다양한 os에 맞춰 사이즈가 정리된 것을 확인할 수 있습니다. 해당 os 개발자에게 폴더를 넘기면 끝!
ps. 앱 아이콘 디자인, 그리드를 잘 맞춰 디자인해야 하는 이유
안드로이드의 경우 환경(디바이스 차이 등)과 업데이트에 따라 앱 아이콘이 원형, 사각형, 라운딩의 차이가 생길 수 있습니다. 이때 그리드를 잘 맞춰 디자인한다면 중심과 상화좌우 여백이 자동으로 조절되지만 그리드에 벗어나서 디자인한다면 상하좌우 여백이 불균형하고, 로고(아이콘)만 꽉 차게 보일 수 있습니다. 개발 단계에서 별도의 조절이 가능하지만 개발자와 한번 더 작업을 해야 하는 부분으로, 그리드에 맞춰 작업해서 한 번에 적용하는 깔끔한 작업이 될 수 있습니다.
