Daily UI 005.앱 아이콘 _App icon

앱 아이콘의 디자인은 앱 스토어와 구글 플레이 스토어 최적화를 위해 필수적이다. 앱 설치를 유도하기 위해 텍스트와 스크린샷으로 설명할 수 있는 스크린샷과 달리, 앱 아이콘은 그 긴 텍스트와 그림들을 함축해서 나타낼 수 있어야 한다. 

 

앱 아이콘을 디자인 하기 전에, 가장 먼저 기억해야 할 한 가지가 있다. 그것은 앱 아이콘은 로고가 아니라는 사실이다. 앱 아이콘은 브랜딩의 일부이고 아이콘과 로고가 의도적으로 겹치는 경우가 많다. 하지만 둘은 절대 동일하지 않다. 로고와 앱 아이콘은 서로 다른 목표를 가지고 있으며, 이것이 로고만으로 앱 아이콘을 만들 수 없다(=로고와 앱 아이콘이 겹친다)는 의미는 아니지만 각각의 목표를 고려해야 한다.

 

 

 

 

1. 중요한 것부터 시작하자

앱 아이콘을 디자인 하는데 중요한 요소는 무엇일까? 칼라? 쉐입? 유행하는 스타일? 이런 요소들도 물론 중요하다. 하지만 앱 아이콘을 디자인하는 시작점에는 외형적인 것을 어떻게 디자인할지 보다 브랜드를 어떻게 디자인에 녹여낼지를 고민해야 한다. 아이콘을 디자인할 앱의 비즈니스 구성 요소에 대해 알아보자. 이 앱이 어떤 가치를 제안하고 있는지, 타겟층은 누구인지, 이 앱이 몸담고 있는 시장은 어디인지 높은 퀄리티의 제품을 높은 가격으로 적게 파는 시장인가? 낮은 퀄리티의 제품을 낮은 가격으로 많이 파는 시장인가? 이런 마케팅 관련 정보를 요청하자. 이런 정보 없이 앱 아이콘을 디자인하는 것은 눈을 가린 채 활을 쏘는 것과 비슷하다. 비즈니스 데이터 분석이 디자인에 정말 중요하다. 앞서 말한 분석이 없이 앱 아이콘을 디자인한다면 디자이너가 아닌 단순히 포토샵과 일러스트를 다룰 줄 아는 툴을 다룰 줄 아는 사람밖에 되지 못할 것이다.

 

오늘의 집을 예로 분석해보자. '누구나 쉽고 예쁘게 집을 꾸밀 수 있다'를 핵심 가치로 제안하고 있다. 타겟층은 집을 꾸미고자 하는 모든 사람들 일 것이다. 청소년이라도 자신의 방을 가지고 있다면 타겟층이 될 수 있다. 오늘의 집에서는 인테리어 소품들을 매우 싼 가격에서부터 어느정도 가격대가 있는 제품까지 다양하게 팔고 있다. 보면서 인테리어 버전 다이소 같다는 생각이 들었다. 물론 다이소 보다는 더 특이한 아이템이 많고 퀄리티도 좀 더 괜찮은 편이라고 한다. 그래서 오늘의 집은 인테리어를 한다. 집을 꾸민다는 핵심 가치를 포커싱해 집 모양을 모티브로 한 앱 아이콘을 만들었다.

 

오늘의 집 앱 아이콘

2. 가이드라인을 유념해 제작하자.

스크린샷과 마찬가지로 아이콘 디자인에 대한 창의성은 제한되지 않지만 앱을 올릴 플랫폼에서 설정한 가이드라인을 따라야 한다. 디자인은 사용자 화면의 다른 앱 아이콘과 조화를 이루어야 하기 때문이다. 구글 플레이 스토어에 있는 아이콘 사이즈가 모두 100 px에 100px인데 나만 500px로 하고 싶다고 해서 그렇게 할 수는 없다. Android와 IOS에는 포맷, 크기 및 스타일에 대한 자체 가이드라인이 있다. 이런 가이드라인을 지키지 않을 경우 플랫폼에서 앱을 내려버릴 수도 있으니 기술 가이드라인뿐만 아니라 스타일 가이드라인도 지켜서 디자인하자.

 

 

3. 경쟁사를 조사하자

이건 너무 기본적인 것이라 UX 팁이라고 말하기도 민망하긴 하다. 앱 UI에 들어가는 아이콘을 만들 때에도 다른 앱에서는 같은 기능의 아이콘을 어떤식으로 만들었나를 조사하고 디자인을 한다. 카카오톡과 라인을 보면 굉장히 유사한 앱 아이콘으로 디자인되어있음을 알 수 있다. 메신저 앱이라는 특성을 말풍선 아이콘으로 제작해 앱의 아이덴티티를 잘 나타내었다. 하지만 이러한 유사함과 본인의 앱의 특별한 아이덴티티를 나타내는 것의 줄다리기를 잘 해내야 한다. 너무 유사하게 간다면 기능 면에서 별다를 것이 없는 제2의 아무개 앱으로 판단할 것이고 너무 특이하게 간다면 이 앱이 어떤 기능을 가지고 있는지 판단하는 것에 어려움을 많이 느낄 수도 있다.

 

 

4. 올바른 색상과 형태를 선택하자

이것은 나도 항상 유념하는 것이다. 이중에서도 색상보다는 형태에 대해서 많이 실수를 한다. 모바일 디자인을 하는 디자이너라면 아이콘을 만들 때 최대한 단순하고 명료한 형태로 만들어야만 한다. 하지만 디자이너들은 좀더 설명할수록, 좀 더 더할수록 더 나은 디자인이 된다는 착각에 빠져 너무나도 복잡한 아이콘을 만들어버리기도 한다. 아무리 요즘에 Z플립 같이 큰 핸드폰이 나온다 해도 모바일 디자인은 사용자의 한 손으로 들 수 있는 매우 작은 화면에서 디자인해야 한다는 것을 잊으면 안 된다. 색상에 관해서도 웬만하면 브랜드 컬러만 사용하는 것이 좋다. 지금 당장 내 핸드폰에 설치되어있는 앱 아이콘들을 살펴봐라. 대부분 한눈에 들어오는 형태를 가지고 있을 것이고 색상도 대부분 4가지를 넘지 않게 사용하고 있을 것이다. 

 

 

 

5. 인식 가능성이 높게 디자인하자.

4번과 조금 겹치는 감이 있지만, 형태에 대해 더욱 디테일한 설명을 추가하였다. 인식 가능성이 높게 디자인 하기 위해서는 제일 먼저 단순하게 디자인해야 한다. 단순하게 디자인해야 한다는 것에서 단순함이란 아이디어에 집중하고 불필요하거나 반복적인 요소를 제거하는 것을 의미한다. 앱 아이콘의 모든 디자인 요소는 사용자가 큰 아이디어를 이해하고 관심을 갖도록 도와야 한다. 예를 들면 1번에서 설명한 것처럼 오늘의 집 아이콘을 보고 사용자가 '인테리어 관련 앱이구나!' , '집에 관련된 앱이구나'라고 생각할 수 있도록 디자인을 해야 한다는 말이다.

 

두 번째는 차별화이다. 앱스토어에는 약 200만 개, 구글 플레이 스토에는 210만 개에 가까운 애플리케이션들이 있다. 유명한 브랜드는 관심을 끌기 위해 로고를 사용하면 된다. 하지만 지금 막 진입한 앱들은 어떻게 해야 할까? 차별화를 해야 한다. 만약 내가 후발주자 앱이라면 내가 있는 시장에 있는 앱 아이콘들을 한 번 체크해 보는 것이 좋다. 내가 있는 시장에 있는 앱들이 대부분 단색 스타일의 앱 아이콘을 쓰고 있다면 나는 그라데이션을 쓰거나, 대부분 레드 컬러를 쓰고 있다면 나는 블루 컬러를 쓰는 등 다른 앱과 차별화할 수 있는 디자인 요소들을 추가하는 것이 좋다. 

 

 

 

 

 

 

앱 아이콘에 관한 UX아티클들을 읽으면서 우리 앱에 적용할 부분들도 많이 찾아냈다. 가장 크게 유념해야겠다고 생각했던 것은 1번이다. 1번은 앱 아이콘 뿐만 아니라 모든 디자인을 할 때 유념해야 할 부분인 것 같다. 2~5번이 전부 잘 되어도 1번에서 무너지면 그건 잘 디자인된 앱 아이콘이라 볼 수 없다. 

 

 

출처

https://uxplanet.org/design-tips-how-to-make-your-app-icon-stand-out-e6dcc42ad1ca

Design Tips: How to Make Your App Icon Stand Out

https://www.invisionapp.com/inside-design/3-rules-icon-design/

The 3 rules of mobile app icon design | Inside Design Blog