딛자인 데이 :: 04 App Icon
앱 아이콘을 디자인해보자!
네 번째 딛자인은 앱 아이콘입니다.
원래라면 저번 주에 했어야 하는 랜딩페이지를 오늘 했어야 하는데...
래퍼런스들을 공부하다 보니 생각보다 고민하고 테스트할게 많아서 또 한 번 뒤로 미루게 되었다. (흑흑)
그래서! 오늘은 라프텔의 앱 아이콘 디자인을 먼저 하기로 하였다.
1.목표
Simple / Unique / Recognizable
2.리서치 내용
앱 아이콘 디자인 관련한 글에서 공통적으로 찾을 수 있는 키워드는 2가지였다.
- Simple
- Recognizable
심플하면서도 수많은 앱들 사이에서 뭔가 사람들 기억에 뙇! 남을 수 있는 상징적이고 인지적인 미랄까.
역시나 어려운 디자인 세계.
3.앱 아이콘 만들기 과정
그냥 '따란- 앱 아이콘 만들었어요!' 하기 좀 썰렁하니깐 과정을 물 흐르듯이 후리후리하게 설명해보려고 한다.
(1) 로고 재정비
라프텔에 들어오고 제일 먼저 한 일이 바로 로고 만들기였다. 정말 수많은 디자인 있지만 그중에서도 제일 어려운 것 중 하나가 로고 디자인인 것 같다. 대부분의 모바일 유저가 서비스와 처음 마주하는 부분이기도 하고 서비스의 이미지를 함축적으로 담아내야 하기 때문에 상대적으로 더욱 고뇌할 수밖에 없는 부분이다.
위에 보이는 별 모양(?) 비스무리한 것이 라프텔의 초기 로고 모습이었다. COO로 계신 팀원이 후다닥 영감을 받아 만든 로고이다.
처음에는 뭔가 다른 shape으로 가는 것도 나쁘지 않을 것 같아서 여러 가지 시도를 해봤지만, 팀원들의 다양한 의견을 수렴하여 기존의 저 별 모양을 그대로 가져가기로 하였다. 또 이미 16만 명을 거느린 자랑스러운 우리 라프텔 페이스북 페이지에서도 꾸준히 이 로고를 써왔기 때문에 사람들의 인식 측면에서도 좀 더 쉽게 브랜딩 될 수 있을 것 같았다.
(그리고 저 로고를 만화를 좋아하는 지구별 덕후들의 성지가 될 수 있는 별로써 브랜딩 할 수 있지 않을까 하는 빅픽쳐를 그리며....)
현재 로고 모습다듬고 다듬고 다듬고 다듬고 다듬고 다듬고 다듬고 다듬고 다듬고 천만번 해서 만든 현재 로고 모습이다.
(2) 컬러 선택
현재 라프텔의 Main Brand Color - #5a57bf앱 아이콘에 쓰일 메인 컬러를 정해야 했다. 기존에 쓰고 있던 어두운 남색에서 탈피하여 보라색 계통으로 가고자 하였다. 왜냐하면, 앞서 말했듯이 라프텔이라는 곳은 만화를 좋아하는 지구별 덕후들의 성지인 또 다른 별이라는 스토리텔링을 기본으로 하기 때문에 사람들에게 신비로운 느낌을 주고 싶었다.
(그리고 라프텔은 실제로 원피스라는 만화에 나오는 알 수 없는 미지의 곳이기도 하다.)
그런 신비로운 느낌을 주는 컬러에는 통상적으로 보라색 계통을 쓰기 때문이다.
그래서 푸른 남색도 아니고 영롱한 보라도 아닌 그 어딘가의... 오묘한 보라색을 선택하였다.
(뭔가 개와 늑대의 시간 같다.)
4.결과물
라프텔 앱 아이콘따란- 왼쪽의 아이콘이 현재 라프텔의 앱 아이콘 모습이고 오른쪽은 요즘 트렌드인 vivid하고 역동적인 느낌의 그라디언트를 활용해서 만들어 본 또 다른 모습이다. 지금 보다 보니깐 오른쪽도 나쁘지 않은 것 같다.
5.그러던 중 발견한 Adaptive Icon의 존재
어.. 어댑티브 아이콘? 반응형 웹을 넘어 이제는 적응형 아이콘이라니? 충격과 공포...ㅎㄷㄷ (구글 진정해...)
알아보니 안드로이드 오레오에서부터 적용 가능한 것 같다.
이런 어마 무시한 존재가 탄생한 이유는... 뭔가 앱 아이콘이 안드로이드 기기 특성마다 앱 아이콘의 모양이 다르게 보여서 이미지가 잘리거나 하는 문제 때문에 생긴 듯하다.
구글에서 일하고 계신 Nick이라는 분의 미디엄 글에서 Adaptive Icon 스케치 파일을 한번 받아 보았다.
기본적으로 Background + Foreground 형태이고, 이게 하단에 있는 각각의 모양대로 Mask 되어서 보이는 원리인 듯하다. 그래서 안드로이드 스튜디오 3.0에 인풋을 넣으면 각각의 모양대로 마스크 되어서 아웃풋이 나온다고 한다.
그래서 라프텔 아이콘도 한번 적용해봤다. 만약 실제로 Adaptive Icon이 적용된다면 안드로이드에서 저런 형태들로 보이게 되겠지? 우리 엄마 스마트폰에서는 squircle-masked 형태로 보인다.
재밌다. 하하.
더 이상은 무리야...요거는 나중에 안드로이드 개발자님 여유 있을 때 슬며시 물어보고 한번 실제로 경험해봐야겠다.
6.결론 및 느낀점
1) 사실 앱 아이콘을 디자인한다는 것은 보이는 것보다 훨씬 더 복잡한 과정인 것 같다. 왜냐하면 이는 곧 서비스의 브랜딩과도 연결되는 것이기 때문이다. 그럼 또 여기서 브랜딩을 공부해야 하는 숙제가 생긴다. 하하.
2) 랜딧의 CEO님께서 브랜딩에 대해서 말하시길, UX에서 유저를 생각하듯이 브랜딩은 우리 자신을 생각하는 것이라고 한다. 그런 의미에서 빠른 시일 내로 라프텔의 브랜딩을 위해 우리 팀원들과 우리 자신에 대해서 생각해보는 시간을 가져보는 게 좋을 듯하다.
2) 그럼 브랜딩은 또 어떻게 구축하는 게 좋을까? 특히나 디자이너가 혼자인 기술 기반의 스타트업에서 브랜딩은 어떤 식으로 채워나가야 할지 고민이다. 지금 잠깐 대충 찾아보다가 lean branding이라는 단어를 발견했다. 린 방식으로 브랜딩을 하는 것이다. 오오... 흥미롭다. 책을 한번 찾아봐야겠다.
3) 그리고 지금 또 새삼 느끼는 건데... 디자이너는 정말 할 게 많은 것 같다... 만능 디자이너... 특히나 스타트업의 디자이너는. 체력 빵빵한 몸이 한 5개는 됐으면 좋겠다.
4) 다음 주제는 'Landing Page'이다. 근데 못하고 또 다음 주제로 넘어갈 수 있다.
일이 쏟아지고 있기 때문에.(ㅠㅠ)
감사합니다.
