<h3>모바일 앱 아이콘, 왜 중요할까요?</h3><img class="size-full wp-image-19052 aligncenter" src="https://www.wishket.com/media/newscenter/587/01.png" alt="" width="540" height="551" /> 왼쪽은 애플 앱스토어 'Apps' 탭, 오른쪽은 구글 플레이 스토어 'Apps' 탭의 메인 화면 모습입니다. 추천 모습과 카테고리 등 구분이 조금 다를 뿐 공통적으로 포함된 요소들이 있는데요. 바로 앱 아이콘과 이름입니다. 두 화면을 우리가 자주 활용하는 '커머스'로 생각해보면 판매되는 상품들의 대표 이미지가 아이콘이 되고, 상품 타이틀이 앱 제목이 되는 것과 같은 개념이라고 할 수 있습니다. <img class="size-full wp-image-19053 aligncenter" src="https://www.wishket.com/media/newscenter/587/02.png" alt="" width="540" height="279" /> 또 하나, 앱 아이콘을 중요하게 바라봐야 하는 이유가 있습니다. 저는 윈도우 모바일을 제외, 아이폰4부터 지금까지 벌써 5개의 스마트폰을 활용하고 있는데요. 그 과정에서 꽤 많은 앱을 접하고 실제 사용하게 되었고, 그 사이에 수없이 많은 앱이 출시 되어 일반적인 앱 아이콘은 눈에 잘 띄지 않는다는 점입니다. 실제 앱 스토어 내 특정 카테고리 차트를 살펴보면 이미 비슷해 보이는 앱 아이콘이 많이 보입니다. 인기 차트에서도 이런데, 신규로 출시 되는 앱 아이콘이 특색이 없다면? 그만큼 다운로드로 이어질 가능성이 줄어들게 되겠죠? 아이콘은 일종의 서비스 short-cut으로 사용자가 서비스 진입을 위해 한번쯤은 마주하게 되는 이미지입니다. <strong>저는 개인적으로 아이콘을 보고 서비스 다운로드를 하기도 해요. 아이콘이 아주 오래된 디자인일 경우, 서비스가 노후 되었다고 느낌을 받기 때문입니다.</strong> 그래서 오늘은 앱의 첫 인상은 물론 상세 페이지로의 진입과 다운로드 전환에 영향을 주는 '앱 아이콘'에 대해 정리해보려고 합니다. <br/><br/> <h3>모바일 앱 아이콘, 어떻게 제작해야 할까요? : 기본 가이드 편</h3>아이콘 제작 시 먼저 고려해야 할 내용은 각 OS또는 앱스토어에서 제공하는 가이드를 살펴보는 일입니다. 해상도만 주요 가이드로 생각하고 넘어가는 경우가 많은데, <strong>애플과 구글이 제공하는 가이드</strong>는 생각보다 상세하고, 유용하기에 간략히 정리해봤습니다. <img class="size-full wp-image-19054 aligncenter" src="https://www.wishket.com/media/newscenter/587/03.png" alt="" width="540" height="239" /><p style="text-align: center;">구글 플레이 스토어 '아이콘' 디자인 가이드</p> 중요한 건, 정사각형으로 아이콘을 제작해 등록하게 되지만, 구글에서 마스킹과 그림자를 적용한다는 점 <p style="padding-left: 40px;">최종 크기: 512px x 512px 형식: 32비트 PNG 색상 공간: sRGB 최대 파일 크기: 1,024KB</p> 해당 내용에 따른 제작을 기본으로 하되, 아래의 내용을 반드시 참고해야 한다는 것! <p style="padding-left: 40px;">모양: 정사각형 – 동적으로 마스킹 처리, 반지름은 아이콘 크기의 20%로 설정. 그림자 : 없음 (그림자를 동적으로 처리)</p> 가이드를 반영하지 않는다면, 75% 정도 축소된 키라인으로 반영 되어 의도한 아이콘이 제대로 적용되지 않을 수 있습니다. <br/> <img class="size-full wp-image-19055 aligncenter" src="https://www.wishket.com/media/newscenter/587/04.png" alt="" width="540" height="98" /><p style="text-align: center;">애플 앱 아이콘 가이드</p> 단순하게 표현, 중요한 하나의 포인트 활용, 쉽게 인지할 수 있는 아이콘 제작, 배경을 단순하게 유지하고, 투명은 피하기, 텍스트는 필요한 순간에만 활용, 사진/스크린샷/인터페이스 요소는 포함하지 않기, 인터페이스에 앱 아이콘을 포함시키지 않기, 다양한 배경화면에 아이콘 테스트 해보기, 아이콘 모서리는 정사각형을 유지! <p style="padding-left: 40px;">앱 아이콘 속성 형식 : PNG 레이어 : 투명이 없어야 함 모양 : 정사각형 (코너에 라운드 처리가 되어 있으면 안됨)</p> 애플은 디바이스 별 해상도가 명확하게 구분 되기 때문에, 디바이스 별 아이콘 사이즈가 필요합니다. 가장 큰 해상도인 앱스토어 기준 아이콘을 먼저 제작 후 각각의 사이즈에 맞춰 정리해주면 됩니다. <br/><br/> <h3>모바일 앱 아이콘, 어떻게 제작해야 할까요? : 활용 팁 편</h3><strong>● 앱 아이콘의 다양한 사이즈 고려하기, 또는 작게 시작하기!</strong> <img class="size-full wp-image-19056 aligncenter" src="https://www.wishket.com/media/newscenter/587/05.png" alt="" width="540" height="279" /> 애플의 가이드만 봐도, 앱 아이콘을 한 가지 해상도로 준비하는 것으론 부족하다는 사실을 알 수 있습니다. 디바이스에 따라 해상도가 다르게 적용되기 때문이기도하고, 앱스토어 뿐만 아니라 다양한 공간에서 활용되기 때문이기도 합니다. 위 이미지는 아이폰7과 갤럭시S10 기준 설정과 스크린타임 화면인데요. 앱 아이콘이 앱스토어 대비 훨씬 작게 적용된 모습을 확인할 수 있습니다. 만약, 앱 아이콘을 최대 해상도 기준으로 최초 작업할 경우, 사이즈를 줄였을 때 위와 같은 화면에서 제대로 보이지 않을 가능성이 높기에 <strong>OS 별 가장 작은 아이콘을 확인 후, 명확하게 인식이 가능한 지 확인하는 과정이 반드시 필요합니다.</strong> <strong>● 명확하게 하기!</strong> <img class="size-full wp-image-19057 aligncenter" src="https://www.wishket.com/media/newscenter/587/06.png" alt="" width="540" height="370" /> 우리 앱 만을 다른 경로로, 단독으로 살펴볼 수 있는 기회가 모든 사용자에게 주어진다면 더없이 좋겠지만, 이는 선행 되어야 할 작업들이 많기에 당장 시작하긴 어렵습니다. 앱스토어 내 카테고리 - 신규 또는 검색을 통해 앱을 탐색하고 다운로드 받는 일반적인 과정이라면 여러 앱 속, 우리 앱의 아이콘이 명확해야 눈길을 머물게 할 수 있겠죠? <strong>앱 아이콘의 가장 큰 목표는 우리 앱이 무엇인지 개념을 빠르게 전달하는 것</strong>입니다. 연령대, 국가와 문화와 관련 없이 보편적이고 명확한 앱 아이콘이야 말로 우리가 가장 먼저 고려해야 할 점이 아닐까 싶네요. 위의 이미지는 앱스토어 내 소셜 네트워킹 서비스의 아이콘만 모아 놓은 모습인데요! 어떤 아이콘이 가장 먼저 눈에 들어오는지, 어떻게 해야 눈에 잘 들어오는 지 간략하게 확인하고 참고해 볼 수 있습니다. <strong>● 앱 내 주요 기능 또는 UI과 잘 연결 되게끔 하기!</strong> <img class="size-full wp-image-19058 aligncenter" src="https://www.wishket.com/media/newscenter/587/07.png" alt="" width="540" height="305" /> 아마 이 이야기를 하는데 있어 빼놓을 수 없는 사례가 '배달의 민족' 아닐까 싶은데요. 배달의 민족 앱 아이콘은 캐릭터를 라이더로 형상화 한 모습으로 디자인 되어 있습니다. 이는 메인 화면 상단 슬라이드와 데이터가 없는 경우의 화면 (장바구니가 비어 있는 등), 이벤트 이미지 등에 다양하게 활용되고 있죠. <strong>앱을 실행해서 주문까지 진행되는 과정에서 이와 같은 일관성</strong>은 사용자 경험에 긍정적인 영향을 줄 수 있습니다. 앱 아이콘은 이처럼 전반적인 '일관성'의 측면에서 주요 기능 또는 화면과 연결 될 수 있어야 합니다. <strong>앱의 목적에 맞는 프로모션과 차별점을 녹여내는 것이 좋습니다.</strong> <img class="size-full wp-image-19059 aligncenter" src="https://www.wishket.com/media/newscenter/587/08.png" alt="" width="540" height="449" /> 티몬의 경우, "타임 커머스"라는 포인트로 매달 프로모션의 주요 워딩을 아이콘에 직접 표기하는 방법을 택했는데요! 프로모션이 종료된 시점에서 제일 저렴한 쇼핑 타이밍은 티몬이라는 시각적 인상을 '시계'를 통해 보여주고 있습니다. <strong>● A/B테스트를 통해 타겟 사용자를 잘 파악하기!</strong> <img class="size-full wp-image-19060 aligncenter" src="https://www.wishket.com/media/newscenter/587/09.png" alt="" width="300" height="376" /> 그 어떤 가이드보다 가장 중요한 것은 앱 사용자의 반응입니다. 특히 글로벌 서비스의 경우, 국가별 A/B 테스트를 통해 각 국가의 사용자 반응에 맞춰 대응해야겠죠. 궁극적으로 사용자가 앱을 다운로드 하게 하는 것이 제일 중요한 목표니까요. A/B 테스트는 대대적인 변화보다 조금씩 변화하며, 좋은 결과를 만들어나가는 것이 중요해요. 그래야 결과에 대한 해석 오류의 오차 범위를 줄이며 나아가는 방법이 아닐까 싶어요. 그리고 A/B 테스트 뿐만 아니라 아이콘, 스크린샷을 기반으로 <strong>SEO를 병행한다면 더 큰 효과를 얻을 수 있겠죠?</strong> 구글은 플레이스토어 콘솔 내 아이콘, 스크린샷, 디스크립션 등을 '스토어 등록 정보 실험'이란 내용으로 쉽게 테스트 할 수 있도록 도와줍니다. <br/><br/> <h3>모바일 앱 아이콘, 어떻게 제작해야 할까요? : 트렌드 편</h3>이번에는 주요 트렌드를 기준으로 아이콘 제작에 대한 내용을 살펴보겠습니다. <img class="size-full wp-image-19061 aligncenter" src="https://www.wishket.com/media/newscenter/587/10.png" alt="" width="858" height="371" /> <strong>● 단순한 라인과 하나의 포인트 컬러를 활용해보세요.</strong> 앱의 본질을 가장 잘 표현할 수 있는 형태로 표현하고, 자칫 지루할 수 있는 라인에 색감을 더해 포인트를 줄 수 있죠. <img class="size-full wp-image-19062 aligncenter" src="https://www.wishket.com/media/newscenter/587/11.png" alt="" width="540" height="493" /> 페이코 회원을 위한 운세 앱, 운수도원입니다. 단순한 라인의 형태로 변화하며, 페이코의 메인 컬러를 포인트 컬러로 활용하여 보다 깔끔한 디자인으로 변경되었습니다. <strong>● 보편적인 아이콘과 회사 로고 활용</strong> 쉽게 인지할 수 있는 아이콘을 위해 지나친 변형은 사용자 이해에 어려움을 줍니다. <img class="size-full wp-image-19063 aligncenter" src="https://www.wishket.com/media/newscenter/587/12.png" alt="" width="540" height="289" /> Medium과 네이버스마트보드의 아이콘은 앱의 정체성과 유사 앱 사이에서 아이덴티티를 살린 좋은 사례로 살펴볼 수 있습니다.
