서비스 리뷰

모바일앱 아이콘, 어떻게 디자인하면 좋을까?

  • 5788
  • 콘텐츠에 ‘좋아’해줘서 고마워요 -
    0
  • 3

앱스토어와 구글 플레이 스토어에서의 전환율 높이기, ‘스크린샷’의 역할! 을 통해 모바일 앱 스크린샷에 대한 내용을 정리했는데요! 기존에는 모바일 앱 상세 페이지로 바로 이동할 수 있는 경우가 많았지만, 최근에는 검색 또는 에디터스 초이스 등을 통해 비슷한 분야의 앱을 모아볼 수 있는 리스트를 먼저 보게 되는 경우가 많아졌습니다. 이 리스트에서 우리가 볼 수 있는 앱의 정보는 많지 않으며, 대표적인 것이 타이틀, 앱아이콘, 스크린샷이라고 할 수 있습니다. 그래서 오늘은 앱의 첫 인상을 결정하는 대표적 요소 중 하나인 ‘모바일 앱 아이콘’에 대해 간략하게 정리해보려고 합니다.


 

 

iOS 앱 아이콘을 확인해볼 수 있는 – iOS Icon Gallery

 

앱 아이콘을 디자인, 제작하는데 있어 가장 먼저 해야할 일은 준비하고 있는 서비스와 연관된 사례를 살펴보는 일입니다. 생산성이라면, 인기 있는 또는 새롭게 출시된 서비스들의 모바일 앱 아이콘을 살펴보는 일이 그리 어렵지 않기 때문이죠. 앱스토어와 플레이스토어 내 카테고리 별 앱을 확인하는 방법이 첫 번째 이며, 위의 이미지와 같이 앱 아이콘을 한 눈에 확인해볼 수 있는 웹 서비스 등을 살펴보는 것이 두 번째 방법입니다.

 

 

iOS 앱 아이콘을 확인해볼 수 있는 – iOS Icon Gallery

 

그 중 ‘iOS Icon Gallery’는 웹상에서 iOS, macOS, watchOS에 해당하는 서비스들의 아이콘 사례를 살펴보기 유용한 곳입니다.

 

 


iOS 앱 아이콘을 확인해볼 수 있는 – iOS Icon Gallery

 

하나의 앱 아이콘을 선택하면 최대 – 최소사이즈의 아이콘은 물론, 컬러와 카테고리를 바탕으로 유사한 아이콘 사례를 볼 수 있습니다. 앱스토어와 플레이스토어의 경우도 PC 버전이 준비되어 있지만, 이렇게 앱 아이콘만 한 눈에 보기는 쉽지 않기에 앱 아이콘 제작 시 초기 단계에서 많은 도움을 받을 수 있죠 .(아이콘 갤러리 확인하기)

 

 

사례를 통해 앱 아이콘 제작과 관련된 힌트를 얻었다면, 이후에 우리가 참고하고 확인해야 할 단계는 무엇일까요?

 

1.작게 시작하기

 

 

앱 아이콘은 작게 보이는 경우가 더 많으니까요!

위의 넷플릭스 앱 아이콘 사이즈별 사례를 기억하시나요? 언제나 큰 아이콘으로 사용자에게 다가갈 수 있다면 더없이 좋겠지만, 스크린 타임, 업데이트 리스트, 설정 화면 등을 보면 앱 아이콘은 우리에게 작게 노출되는 경우가 많다는 것을 알 수 있습니다. 때문에 앱 아이콘을 제작하는데 있어 작은 사이즈에서도 눈에 잘 들어오는지 고려해야 합니다. 또한 작게 시작해, 큰 사이즈로 확장 되었을 때 픽셀 등이 깨지지 않도록 사이즈 별로 최적화 작업을 해야한다는 점도 우리가 잊지 말아야 할 내용 중 하나입니다.

2.명확하게 하기

 

아이콘만 봐도 어떤 앱인지 유추할 수 있다면 베스트!

작은 사이즈의 아이콘이 중요하다는 내용과 함께 우리가 반드시 생각해봐야 할 것은 바로 ‘명확성‘입니다. 앱 아이콘만 봐도 어떤 앱인지 사용자가 쉽게 유추할 수 있어야 한다는 것이죠. 위의 이미지를 보면 총 12개의 모바일 앱 아이콘을 확인할 수 있는데요! 첫 번째 아이콘은 영어와 한자가 함께 있는 것을 보니 번역 또는 사전 앱일 가능성이 높아보이고, 두 번째 아이콘은 피아노 건반이 포함되어 있으니 악기를 연주하거나 녹음하는 서비스일 것 같다는 생각이 듭니다. 이처럼 앱 아이콘만 보더라도 어떤 앱인지 명확하게 알 수 있도록 하는 중요한 정보가 될 수 있어야 합니다.

 

3.남들과는 다르게

 

 

같은 카테고리의 앱 아이콘 모습

 

작은 사이즈에서도 명확하게! 이 조건을 넘어섰다 하더라도 우리에게 남은 과제는 아직 존재합니다. 대표적인 것이 동일 카테고리의 앱들인데요. 위의 이미지를 보면 ‘Music’ 카테고리 내 다양한 모바일 앱 아이콘을 볼 수 있습니다. 이는 앱스토어나 플레이스토어에서도 카테고리별 앱 리스트를 확인했을 때 마주할 수 있는 모습이기도 하죠.

 

피아노 건반을 우리만 생각하고 있을까? 기타는? 마이크는? 북은? 애플 앱스토어에만 수백만개의 앱이 등록된 상황에서 카테고리는 정해져있는데.. 우리 서비스가 잘 알려진 서비스라면, 앱스토어가 초기 단계라면 단순 로고를 사용해도 되겠지만 카테고리 별 경쟁이 치열한 요즘에는 눈에 띄는 방법을 늘 고민해야만 합니다. 같은 피아노 건반이라 하더라도 배경 컬러를 달리하거나, 조금은 유니크한 악기를 전면에 활용하는 등의 방법을 말이죠.

 

4.가이드라인 잊지 않기

 

 

(왼쪽) 구글 플레이 스토어 (오른쪽) 애플 앱스토어

 

슈퍼셀의 또 다른 메가 히트작이 될 가능성이 보이는 브롤스타즈! 위의 이미지 중 왼쪽은 앱스토어에서의 앱 상세 페이지이며, 오른쪽은 플레이 스토어에서의 앱 상세 페이지입니다. 모바일 앱 아이콘을 보면 모양이 조금씩 다르다는 사실을 알 수 있죠. 이는 앱 등록 시 애플과 구글이 정해놓은 가이드가 서로 다르기 때문입니다. 기본 사이즈는 물론 비율도 조금씩 다르기에 각 플랫폼이 정해놓은 가이드라인을 미리 확인하는 것은 필수라고 할 수 있습니다. (애플 디자인 가이드)(구글 디자인 가이드)

 

마치며,

 

게임은 조금 다르게 적용될 수 있지만, 그 외 카테고리 내 모바일 앱 아이콘을 제작하는 작업은 그리 쉬운일이 아닙니다. 위에서 언급되지 않았지만 컬러는 물론, 앱을 표현할 수 있는 텍스트 등이 포함되는지 여부 등을 함께 고려해볼 수도 있죠. 분명한 사실은 우리가 앱스토어에서 검색을 하는 등 앱 리스트를 확인할 때 가장 먼저 시선이 쏠리는 곳이 앱 아이콘 영역이라는 점입니다. 스크린샷의 사이즈가 더 크지만 임팩트를 줄 수 있는 방법은 강렬하 앱 아이콘이 될 수 있다는 것!

 

이미 아는 분들이 더 많으시겠지만, 구글의 경우 콘솔 내 스토어 등록 정보 실험 대상에 ‘아이콘’이 포함되어 있습니다. 완성된 모바일 앱 아이콘을 바로 적용하기 보다 A/B테스트 등을 통해 아이콘이 어떤 영향을 끼치는지 살펴보는 것도 좋은 방법이 되지 않을까 싶습니다 

 

  • #지금써보러갑니다
  • # 아이콘
  • #모바일앱
  • # 서비스디자인