앱 아이콘, 관심을 끌기 위해 어떻게 변화해왔을까?

최근에 구글이 앱의 아이콘을 다시 디자인하면서 논란이 되었는데, 이를 계기로 디지털 제품의 아이콘이 전반적으로 어느 방향으로 가고 있는지에 대한 논의가 촉발되었습니다.

앱의 아이콘들은 좀 더 밝고, 더욱 화려하고, 가능하면 활기가 넘쳐야 합니다. 이들은 사실상 우리에게 달려들어야 합니다. 기업들은 자사의 제품이 “눈에 안 띄거나” 거의 사용되지 않는 상황은 용인할 수 없습니다. 왜냐하면 치열한 경쟁 환경에서는 관심을 받기 위해서 훨씬 더 시끄럽게 외쳐야 하기 때문입니다.

미니멀리즘? 안 됩니다. 스큐어모피즘(Skeuomorphism)? 아뇨, 괜찮습니다.

초 미니멀리즘이나 텍스트 기반의 로고가 인기를 끌었던 시절도 있습니다. 검은색 배경에 흰색의 도형은 화려함과 지위를 전달하기 위해서 자주 사용되었습니다. 하지만 그런 시절은 지나갔습니다. 경쟁자들을 뛰어넘어야 하는 시대로 접어든 것입니다.

색상을 더 많이!

그라데이션을 더 많이!

뭐든 더 많이!

(구글의 아이콘 재 디자인)

​

구글은 최근에 자신들의 아이콘을 “통일된 스타일”로 바꾼다는 함정에 빠졌습니다. 물론 브랜드가 일관성을 추구한다는 것은 일반적으로 좋은 태도이지만, 모든 것들이 지나치게 비슷하게 보여서 그렇잖아도 화가 잔뜩 난 사용자들의 혼란을 더욱 부추길 뿐입니다.

(구글의 아이콘 재 디자인)
이 밈(meme)은 최근에 소셜미디어에서 널리 퍼졌습니다. 그리고 이 내용은 나름의 일리가 있습니다.

하지만 추가적인 색상을 일관된 모양들에 맞추려고 하다 보니, 이메일(eMail)은 이제 그냥 M이 되었습니다. 그 맥락에서는 편지봉투를 연상시키는 것이 더 이상 없습니다. 구글 문서(Docs)의 아이콘은 캘린더 아이콘과 너무나도 비슷하고, 캘린더 아이콘은 미트(Meet) 아이콘과 지나치게 똑같습니다.

이러한 미학에 유일하게 어울리는 아이콘으로는 드라이브(Drive)가 있기는 하지만, 그건 기존의 아이콘에서 거의 바뀌지 않았기 때문입니다.

​

(충돌하는 색상들)

하지만 관심을 끌기 위한 싸움은 또한 색상의 조합이 서로 어울리지 않는다는 대가를 치르고 있습니다. UI 디자이너라면 녹색이나 파랑을 채도가 높은 빨강과 섞어서는 안 된다는 것을 알고 있을 것입니다. 그렇게 조합한다면 경계선에서 피가 나는 것처럼 보이며, 두 분이 고통받게 될겁니다.

빨강이 파랑과 녹색과 만나는 경계를 한 번 보십시오. 가만히 멈춰서 몇 초 동안 그곳을 바라 보시기 바랍니다.

여기에서 최악이 뭔지 아시나요?

이 색상들은 현재 채도가 각각 69, 73, 79입니다. 이러한 추세가 계속된다면, 우리는 아마도 각 색상의 채도가 모두 100인 아주 멋진 광경을 볼 수 있을 것입니다. 그리고 얼마 뒤에는 그렇게 하는 것이 “가시성(visibility)을 강화”하기 위해서 쓸 수 있는 유일한 방법이 될 지도 모릅니다.

(채도가 최대치인 구글의 색상들)
이건 동일한 색상의 채도를 올린 것입니다. 눈이 아플 지경입니다.

인스타그램의 논쟁적인 재 디자인

이 모든 것은 아주 유명하면서도 논쟁이 되었던 앱 아이콘의 변화와 함께 시작되었습니다. 2016년 인스타그램은 새로운 로고를 공개했고, 거의 모든 사람들이 이걸 역사상 최악의 재 디자인 참사라고 선언했습니다.

그런데 무슨 일이 일어났을까요? 사람들은 이러한 새로운 로고에 아주 빠르게 익숙해졌습니다.

스큐모피즘(Skeuomorphism)은 2013년 iOS 7의 발표와 함께 사라졌습니다. 그렇기 때문에 인스타그램의 이런 디자인은 기대 이상이었던 것입니다.

(인스타그램 로고의 전과 후)

그런데 이 새로운 로고는 다른 측면에서 기여를 했습니다. 상당히 색다른 그라데이션을 사용한 매우 강렬하면서도 채도가 높은 색상은 다른 앱들 사이에서도 단연 튀어 보였습니다. 홈 화면에서도 즉시 눈에 띄었습니다. 엄청나게 많은 수의 앱 아이콘들이 주요 색상으로 파란색의 음영을 사용했기 때문에 훨씬 더 눈에 잘 보였습니다. 파란색은 홈 화면에 있는 앱 아이콘의 50% 이상에서 사용하는 색상입니다.

푸른색의 바다에서 규칙을 깨는 것은 두드러져 보이기 위한 훌륭한 아이디어일 수도 있습니다. 인스타그램? 여기 있네!

(인스타그램 vs 다른 앱들의 아이콘)

애플은 2013년부터 이미 이런 비슷한 개념을 자신들의 아이콘에서 사용해 왔습니다. 이런 개념을 따라 잡는 데는 다들 시간이 조금 걸렸지만, 일단 익숙해지고 나자 모두가 이런 분위기에 편승했습니다.

슬랙(Slack)에게도 똑같은 일이 일어났습니다. 슬랙의 아이콘은 예전에도 조금 컬러풀한 로고와 아이콘을 갖고 있었지만, 색상 자체는 조금 채도가 낮았습니다. 하지만 새로운 디자인에서는 이러한 트렌드를 반영하기라도 하듯이, 채도를 최대한 높게 끌어 올렸습니다.

관심을 받기 위한 싸움

인스타그램이 아이콘을 획기적으로 바꾸고 4년이 지난 지금, 거의 모든 이들이 이런 추세를 따르고 있습니다.

토비아스 반 슈나이더(Tobias Van Schneider)는 자신의 트위터에서 이러한 추세를 아주 잘 요약했고, 제가 이번 글을 쓸 수 있게 아이디어도 주었습니다.

그렇다면 인지 부하(cognitive load)란 무엇일까요?

인지 심리학(cognitive psychology)에서, 인지 부하란 어떤 작업에서 사용되는 인지적 요구량을 말한다.
- 위키백과

모든 것이 똑같이 보이기 시작하면, 우리는 결국 또다시 원하는 아이콘을 찾기 위해서 애를 써야만 합니다. 다시 원점으로 돌아온 것입니다. 우리가 원하는 것이 어디 있는지를 찾기 위해서 더욱 많은 정신적 노력을 쏟아야 하는 것입니다.

우리의 감각과 기억은 비슷하게 생긴 모양과 색상, 패턴 때문에 과부하가 걸리게 됩니다.

블러(blur) 테스트

모든 아이콘들을 블러 처리하면, 대부분의 아이콘과 그룹을 구분하는 것이 말 그대로 불가능하다는 것을 알 수 있습니다. 모두가 너무나도 비슷한 풍선처럼 보이는데, 대부분 4가지의 비슷한 색상으로 구성되어 있습니다.

(블러 처리된 앱 아이콘들)

메신저(Messenger) 아이콘이 가장 눈에 띄기는 하지만, 그 이유는 단지 메신저 앱이 인스타그램보다 훨씬 더 강한 그라데이션을 사용했기 때문입니다.

그래도 걱정하지 마십시오!
​
앱 아이콘의 새로운 흐름이 나타나서 이런 문제들을 해결하려고 노력할 것이기 때문입니다.

그리고 네, 저의 프로필 사진과 대부분의 공유 이미지에서도 파란색과 보라색의 그라데이션을 사용하고 있기 때문에, 저 역시도 죄책감을 느끼는 바입니다.

이러한 추세가 어디까지 갈 수 있을까?

분명한 것은 이러한 추세가 가속화되고 있다는 것입니다. 구글이 현재 서로 충돌하는 색상을 사용하고 있다면, 다음에 있을 커다란 변화는 보기 흉칙하면서도 서로 충돌하는 그라데이션이 될 것입니다.

몇 가지 예를 들어보자면 이런 식이 될 것입니다.

(보기 좋지않은 그라데이션들)

색채를 훌륭하게 조합하는 방법이 모두 바닥나고 더 이상 채도를 높일 수 없는 수준까지 올라간다면, 이제는 선을 넘을 수밖에 없을 것입니다. 아마도 ‘추한 것이란 무엇인가’에 대해서 재정의를 한 다음에, 우리의 눈을 속여서 그것을 주목하게 만들 것입니다.

그것은 우리의 관심을 끌기 위한 전쟁인데, 현재로서는 사용할 수 있는 무기가 많지 않습니다. 우리가 아무리 넷플릭스를 폭주하면서 시청한다 하더라도, 어쨌든 우리는 다음 페이지로 스크롤을 할 것이기 때문입니다.

그렇기 때문에 다음으로 가능한 논리적인 수순은 아이콘들이 거의 발작을 일으킬 정도로 번쩍이는 애니메이션 효과를 내는 것입니다. 또는 증강현실(AR)의 아이콘이 스마트폰에서 우리의 얼굴로 튀어 나오는 것입니다.

스마트폰 제조사들이 앱 제작자들에게 추가 비용을 받고 그들의 아이콘을 더욱 크고 신경이 거슬리게 만든다고 상상해 보십시오.

우리의 미래는.. 아주 화려할 것입니다.

> 이 글은 'The cognitive overload happening on your screen right now'을 각색하여 작성되었습니다.