카테고리 없음

UX/UI 초보 개념 / 안드로이드 아이콘 잘리는지 아닌지 확인하는 법

기디개 2020. 11. 9.
반응형

안드로이드는 단말마다 아이콘이 다릅니다. 그 말은 애플은 통일 되어있다는 것이겠죠. 디자이너 입장에서는 모든 아이콘이 애플화 되었으면 좋겠지만 현실은 그렇지 않습니다. 그래서 안드로이드는 어렵습니다. 안드로이드에서의 아이콘은 특히나 잘리는 부분이 없게끔 제작해야합니다.

내가 만든 아이콘이 잘리는지 아닌지 확인할 수 있는 방법이 있습니다. 

여기 구글이 제시한 아이콘 가이드가 있네요. 내가 만든 아이콘이 정사각형인지 원형인지 세로로 긴 사각형인지 반대인지, 알고서는 이 가이드에 대입해보면 됩니다. 그렇게 하면 하마터면 잘릴법한 내가 한땀한땀 그린 아이콘이 무사하게 될 수 있다는 것이죠. 

하지만... 세상은 나도 그렇고 여러분이 생각하는 것보다 훨씬 앞서가있음을 인정해야만 합니다.

세상편한

안드로이드 아이콘 가이드 사이트

잘리는지 아닌지는 여기서 확인 가능!

romannurik.github.io/AndroidAssetStudio/icons-launcher.html

누군가가 이런 사이트를 만들어 놨습니다. 좋은걸까요. 나쁜걸까요. 일단 이 블로그를 방문한 여러분에게는 좋은 힌트가 되었을 것입니다. 내가 생각했던것들은 모두 시중에 나와있습니다. 경쟁하기가 너무 힘드네요 ^^...

원리로만 봐서 헷갈리는 구글의 가이드가 "안드로이드 앱 아이콘 제네레이터(Android Asset Studio - Launcher icon generator)"를 검색해서 내가 만든 아이콘을 업로드 해서 확인을 하는.. "

이미지를 클릭하면 내가 만든 이미지를 업로드 할 수 있습니다. 기타 외 가이드를 내 입맛에 맞게 조절을 하고, SEE ALL을 클릭하면 해상도별 아이콘들이 어떻게 보여지는지 알수 있게끔 도출이 됩니다. 너무 작지는 않은지 너무 복잡해서 알아볼 수 없을 정도로의 엉망진창인지 아닌지 개발자에게 넘기기 전 미리 알아 볼 수 있는 아주 효자 노릇 하는 사이트 입니다. 

IOS의 경우

IOS에서 기본으로 제공하는 가이드를 이용해서 아이콘을 제작하는게 가장 좋습니다.

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

 

App Icon - Icons and Images - iOS - Human Interface Guidelines - Apple Developer

App Icon Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen. Your icon is the first opportunity to communicate, at a glance, your app’s purpose. It also appears throughout the system,

developer.apple.com

앱아이콘을 제작시 반드시 봐야합니다.

흠.. 여담입니다. 저는 갤럭시 유저입니다. 갤럭시를 아주 잘 쓰고 있고 삼성페이를 사랑합니다. 그런데 최근들어 아이폰을 사용해야하나 하는 생각이 듭니다. 공부를 위해서라도 말이지요. 맥북도 생각을 하고 있어요. XD를 사용을 하고는 있지만, SKETCH도 사용을 해보고 싶습니다.

 

PC에서 아이콘

PC에서 보이는 아이콘은 대부분 24*24 크기에 규정되어있습니다. 100% 24*24에 맞출 수는 없겠지만, 맞게 작업을 하는게 좋습니다. 꽉차지 않게 디자인 되어야 갑갑한 아이콘이 탄생하지 않을 수 있습니다.

모바일에서 아이콘

엄지손가락으로 화면을 잘 누룰 수 있는 크기가 48*48PX 이라는거 들어보셨나요? 그래서 아이콘 크기가 48*48PX 이되어야합니다. 터치했을 때 잘 눌릴 수 있는 크기. 그리고 아이콘끼리 겹치지 않게 가이드 되어야 합니다.

아이콘을 다 만들지 않아도 된다

 

위에서 언급한 것처럼 내가 생각했던 것들은 거의 시중에 나와있습니다. 아이콘 팩도 이미 시중에 나와있습니다. 내가 고생하지 않아도 누군가 나를 위해 고생을 해놓은 결과물을 손쉽게 사용만 하면 됩니다.

http://material.io/toos/icons 

구글 머터리얼디자인이 제공하는 풀세트 아이콘을 한방에 다운로드 할 수 있습니다. 웬만한 아이콘은 전부 다~ 있습니다. 나의 수고를 덜어준 구글... 나의 일거리를 빼앗아가는 인공지능 똑똑한 녀석 구글...!! 무습다~!

사용하는 아이콘의 크기가 24*24가 맞는지 확인을 해주시고

- 벡터로 이용을 하려면 svg,

- 비트맵으로 이용하려면 png 의 확장자로 다운을 받으면 됩니다

- 자주쓰는 아이콘은 검색을 통해 찾아내어 다운로드 가능

팁 / systemicons 을 구글에 검색을 하면, 자주쓰는 아이콘 결과값이 나옵니다. 


애플 아이콘은

developer.apple.com/design/resources 에서 다운로드 가능하고,

스케치 유저의 경우는 www.sketchappsources.com여기에서 애플 아이콘 다운로드 가능합니다.

반응형

댓글

💲 추천 글