🚦아이콘, 어떻게 활용하면 좋을까?

모바일 앱 아이콘, 왜 중요할까요?

왼쪽은 애플 앱스토어 'Apps' 탭, 오른쪽은 구글 플레이 스토어 'Apps' 탭의 메인 화면 모습입니다. 추천 모습과 카테고리 등 구분이 조금 다를 뿐 공통적으로 포함된 요소들이 있는데요. 바로 앱 아이콘과 이름입니다. 두 화면을 우리가 자주 활용하는 '커머스'로 생각해보면 판매되는 상품들의 대표 이미지가 아이콘이 되고, 상품 타이틀이 앱 제목이 되는 것과 같은 개념이라고 할 수 있습니다.

또 하나, 앱 아이콘을 중요하게 바라봐야 하는 이유가 있습니다.

저는 윈도우 모바일을 제외, 아이폰4부터 지금까지 벌써 5개의 스마트폰을 활용하고 있는데요. 그 과정에서 꽤 많은 앱을 접하고 실제 사용하게 되었고, 그 사이에 수없이 많은 앱이 출시 되어 일반적인 앱 아이콘은 눈에 잘 띄지 않는다는 점입니다. 실제 앱 스토어 내 특정 카테고리 차트를 살펴보면 이미 비슷해 보이는 앱 아이콘이 많이 보입니다. 인기 차트에서도 이런데, 신규로 출시 되는 앱 아이콘이 특색이 없다면? 그만큼 다운로드로 이어질 가능성이 줄어들게 되겠죠? 아이콘은 일종의 서비스 short-cut으로 사용자가 서비스 진입을 위해 한번쯤은 마주하게 되는 이미지입니다. 저는 개인적으로 아이콘을 보고 서비스 다운로드를 하기도 해요. 아이콘이 아주 오래된 디자인일 경우, 서비스가 노후 되었다고 느낌을 받기 때문입니다.

그래서 오늘은 앱의 첫 인상은 물론 상세 페이지로의 진입과 다운로드 전환에 영향을 주는 '앱 아이콘'에 대해 정리해보려고 합니다.

모바일 앱 아이콘, 어떻게 제작해야 할까요? : 기본 가이드 편

아이콘 제작 시 먼저 고려해야 할 내용은 각 OS또는 앱스토어에서 제공하는 가이드를 살펴보는 일입니다. 해상도만 주요 가이드로 생각하고 넘어가는 경우가 많은데, 애플과 구글이 제공하는 가이드는 생각보다 상세하고, 유용하기에 간략히 정리해봤습니다.

구글 플레이 스토어 '아이콘' 디자인 가이드

한글 가이드 보러가기

중요한 건, 정사각형으로 아이콘을 제작해 등록하게 되지만, 구글에서 마스킹과 그림자를 적용한다는 점

최종 크기: 512px x 512px
형식: 32비트 PNG
색상 공간: sRGB
최대 파일 크기: 1,024KB

해당 내용에 따른 제작을 기본으로 하되, 아래의 내용을 반드시 참고해야 한다는 것!

모양: 정사각형 – 동적으로 마스킹 처리,
반지름은 아이콘 크기의 20%로 설정.
그림자 : 없음 (그림자를 동적으로 처리)

가이드를 반영하지 않는다면, 75% 정도 축소된 키라인으로 반영 되어 의도한 아이콘이 제대로 적용되지 않을 수 있습니다.

애플 앱 아이콘 가이드

Human Interface Guidelines 보러가기

단순하게 표현, 중요한 하나의 포인트 활용, 쉽게 인지할 수 있는 아이콘 제작, 배경을 단순하게 유지하고, 투명은 피하기, 텍스트는 필요한 순간에만 활용, 사진/스크린샷/인터페이스 요소는 포함하지 않기, 인터페이스에 앱 아이콘을 포함시키지 않기, 다양한 배경화면에 아이콘 테스트 해보기, 아이콘 모서리는 정사각형을 유지!

앱 아이콘 속성

형식 : PNG
레이어 : 투명이 없어야 함
모양 : 정사각형
(코너에 라운드 처리가 되어 있으면 안됨)

애플은 디바이스 별 해상도가 명확하게 구분 되기 때문에, 디바이스 별 아이콘 사이즈가 필요합니다. 가장 큰 해상도인 앱스토어 기준 아이콘을 먼저 제작 후 각각의 사이즈에 맞춰 정리해주면 됩니다.

모바일 앱 아이콘, 어떻게 제작해야 할까요? : 활용 팁 편

앱 아이콘의 다양한 사이즈 고려하기, 또는 작게 시작하기!

애플의 가이드만 봐도, 앱 아이콘을 한 가지 해상도로 준비하는 것으론 부족하다는 사실을 알 수 있습니다. 디바이스에 따라 해상도가 다르게 적용되기 때문이기도하고, 앱스토어 뿐만 아니라 다양한 공간에서 활용되기 때문이기도 합니다. 위 이미지는 아이폰7과 갤럭시S10 기준 설정과 스크린타임 화면인데요. 앱 아이콘이 앱스토어 대비 훨씬 작게 적용된 모습을 확인할 수 있습니다. 만약, 앱 아이콘을 최대 해상도 기준으로 최초 작업할 경우, 사이즈를 줄였을 때 위와 같은 화면에서 제대로 보이지 않을 가능성이 높기에 OS 별 가장 작은 아이콘을 확인 후, 명확하게 인식이 가능한 지 확인하는 과정이 반드시 필요합니다.

명확하게 하기!

우리 앱 만을 다른 경로로, 단독으로 살펴볼 수 있는 기회가 모든 사용자에게 주어진다면 더없이 좋겠지만, 이는 선행 되어야 할 작업들이 많기에 당장 시작하긴 어렵습니다. 앱스토어 내 카테고리 - 신규 또는 검색을 통해 앱을 탐색하고 다운로드 받는 일반적인 과정이라면 여러 앱 속, 우리 앱의 아이콘이 명확해야 눈길을 머물게 할 수 있겠죠? 앱 아이콘의 가장 큰 목표는 우리 앱이 무엇인지 개념을 빠르게 전달하는 것입니다. 연령대, 국가와 문화와 관련 없이 보편적이고 명확한 앱 아이콘이야 말로 우리가 가장 먼저 고려해야 할 점이 아닐까 싶네요. 위의 이미지는 앱스토어 내 소셜 네트워킹 서비스의 아이콘만 모아 놓은 모습인데요! 어떤 아이콘이 가장 먼저 눈에 들어오는지, 어떻게 해야 눈에 잘 들어오는 지 간략하게 확인하고 참고해 볼 수 있습니다.

앱 내 주요 기능 또는 UI과 잘 연결 되게끔 하기!

아마 이 이야기를 하는데 있어 빼놓을 수 없는 사례가 '배달의 민족' 아닐까 싶은데요. 배달의 민족 앱 아이콘은 캐릭터를 라이더로 형상화 한 모습으로 디자인 되어 있습니다. 이는 메인 화면 상단 슬라이드와 데이터가 없는 경우의 화면 (장바구니가 비어 있는 등), 이벤트 이미지 등에 다양하게 활용되고 있죠. 앱을 실행해서 주문까지 진행되는 과정에서 이와 같은 일관성은 사용자 경험에 긍정적인 영향을 줄 수 있습니다. 앱 아이콘은 이처럼 전반적인 '일관성'의 측면에서 주요 기능 또는 화면과 연결 될 수 있어야 합니다.

앱의 목적에 맞는 프로모션과 차별점을 녹여내는 것이 좋습니다.

티몬의 경우, "타임 커머스"라는 포인트로 매달 프로모션의 주요 워딩을 아이콘에 직접 표기하는 방법을 택했는데요! 프로모션이 종료된 시점에서 제일 저렴한 쇼핑 타이밍은 티몬이라는 시각적 인상을 '시계'를 통해 보여주고 있습니다.

A/B테스트를 통해 타겟 사용자를 잘 파악하기!

그 어떤 가이드보다 가장 중요한 것은 앱 사용자의 반응입니다. 특히 글로벌 서비스의 경우, 국가별 A/B 테스트를 통해 각 국가의 사용자 반응에 맞춰 대응해야겠죠. 궁극적으로 사용자가 앱을 다운로드 하게 하는 것이 제일 중요한 목표니까요.

A/B 테스트는 대대적인 변화보다 조금씩 변화하며, 좋은 결과를 만들어나가는 것이 중요해요. 그래야 결과에 대한 해석 오류의 오차 범위를 줄이며 나아가는 방법이 아닐까 싶어요. 그리고 A/B 테스트 뿐만 아니라 아이콘, 스크린샷을 기반으로 SEO를 병행한다면 더 큰 효과를 얻을 수 있겠죠? 구글은 플레이스토어 콘솔 내 아이콘, 스크린샷, 디스크립션 등을 '스토어 등록 정보 실험'이란 내용으로 쉽게 테스트 할 수 있도록 도와줍니다.

모바일 앱 아이콘, 어떻게 제작해야 할까요? : 트렌드 편

이번에는 주요 트렌드를 기준으로 아이콘 제작에 대한 내용을 살펴보겠습니다.

2020 아이콘 디자인 트렌드 영문 보러가기