앱 아이콘과 브랜드
인스타그램, 앱 아이콘의 역사
인스타그램의 이 페이지에 숨겨진 비밀이 있다. 찾아내는 방법은 간단하다.
그냥 화면을 아래 방향으로 당기면 된다.
화면을 당길수록 이모지가 나타난다. 이모지는 약간의 의미를 담고 있는데, 이모지를 보면서 끝까지 계속 당기면, 뭔가를 발견할 수 있다.
바로 선물이다. 여기서 잠시 유지를 하면...
선물 이모지 위에 얼굴이 나타나면서 파티클 효과의 폭죽이 터진다! 그리고 이벤트 페이지로 이동할 수 있다.
숨겨진 페이지에 진입하게 되면, 10주년 행사 페이지가 보인다. 여기서 그동안 인스타그램에 사용된 수많은 로고를 볼 수 있고, 이 로고 중 하나를 선택하면, 앱 아이콘이 변경된다.
이 기능은 iOS의 다크 모드 설정 변화 때쯤 나온 기능으로 Alternate Icon을 설정할 수 있는 기능이다. 해당 기능의 자세한 예시는 미디엄에 올라온 Dynamically Change the App Icon에서 볼 수 있다.
앱 아이콘을 바꾸게 되면, 브랜딩과 프로모션에 도움이 될 수 있다. 인스타그램의 이벤트는 이 기능을 사용자가 선택해서 사용할 수 있는 이벤트다. 참여하는 방법은 소셜 미디어를 통해 퍼져 나갔다. 이 이벤트를 통해서 인스타그램의 로고, 앱 아이콘이 어떻게 변했는지 알 수 있고, 어떤 가능성이 있었는지 알 수 있다. 브랜드에 참여하는 작은 경험인 셈이다.
당신이 사용자가 아니라 디자이너라면, 이 아이콘 중 하나를 선택하는 것이 아니라, 인스타그램의 앱 아이콘 자체에 대한 궁금증이 생길 것이다.
인스타그램의 앱 아이콘은 Polaroid OneStep SX-70를 모티브로 하여 디자인되었으며, 인스타그램의 공동 창업자가 직접 디자인했다. 앱 아이콘으로 약 6년간 사용되었고, 2016년 이전에는 각 버전의 변화마다 크기, 가이드, 텍스쳐의 해상도가 점점 정교해졌다. 그러나 변화는 없었다.
많은 브랜드의 로고가 다양한 모양으로 변하며, 시대에 적응한다. 그래서 2016년의 인스타그램 로고가 왜 달라졌는지 알아보는 것이 중요하다.
마케터라면, 이벤트의 방식과 효과를 고민하고, 개발자는 한 번 만들어볼지를 생각하고, 인스타그램을 오래 사용한 사람이라면, 맘에 드는 아이콘을 선택할 수 있는 기회다.
그럼 디자이너는 뭘 생각해야 할까?
인스타그램의 앱 로고는
어떻게 변했을까?
시즌2는 2019년 9월 25일 공개되었습니다.넷플릭스의 디자인 관련 다큐멘터리 중에서 '앱스트릭트: 디자인의 미학(Abstract: The Art of Design)'이 있다. 시즌2에서 '이언 스폴터: 디지털 경험과 디자인(Ian Spalter: Digital Product Design)'이 있다. 번역은 UX에 대한 이야기 같지만, 프로덕트 디자인에 대한 이야기다.
앱스트릭트는 세상에 존재하는 다양한 디자인에 대해서 탐구하면서, 디자인의 분야와 변화, 특징을 알아보고 디자이너를 만나는 구성으로 되어 있다. 그중에서 디지털 디자인 분야의 UI와 UX에 대해 알아보면서, 인스타그램과 이언 스폴터의 이야기를 한다.
이언 스폴터가 인스타그램에 가서 처음 한 일은 로고를 바꾸는 일이었다. 그는 기존 로고의 형태를 분석했고 둥그런 모양의 테디 베어 같은 모습에 무지개를 발견했다. 그리고 기존 로고의 의미와 핵심을 생각했다.
그는 한 가지 테스트를 했다. 10초 동안 기존 인스타그램의 로고를 그려보는 것이었다. 다양한 스케치가 나왔는데, 몇 가지 공통점을 발견할 수 있었다.
특징적인 모양과 무지개였다. 초기 작업에서는 기존 아이콘을 다른 모양으로 풍부하게 표현했다. 그러다가 기존 아이콘의 다른 버전을 복제하고 있다는 것을 깨닫고 형태에 집중하게 된다.
모양과 색을 분리한 상태에서 모양은 기본적인 형태에서 발전시키면서 재미있는 모양을 찾고, 색은 무지개처럼 배색 조합을 만들어서 테스트를 하였다. 배색 역시 모양을 만들 때처럼 여러 가지 색 조합을 통해 실험하였고, 실제 무지개처럼 경계가 모호한 그라데이션이 결정되었다.
큰 변화를 만들려면, 측정할 수 있는 디테일한 변화와 변경을 설계해야 한다.그리고 모양과 색을 분리하여 작업하고 하나의 결과물로 합치는 과정에서 복잡한 모양과 복잡한 색을 결합시키면 괴상해 보일 수 있다는 교훈을 얻었다. 그래서 단순한 모양과 다양한 색을 사용하였다.
이 작업이 공개된 후 사상 최악의 디자인이라는 말과 조롱, 악플이 이었지만, 급진적인 변화는 어느 순간부터 익숙한 경험이 되었다. 디자인의 결과는 인그타그램의 성장으로 증명되었다.
변화가 로고에만 적용되지 않았다. 로고부터 시작된 변화는 제품의 모든 부분에 영향을 주었고, 그에 따라 앱의 UI도 변하면서 콘텐츠가 강력하게 부각되었다.
https://www.logolounge.com/articles/instagram-glyph-goes-abstract요즘 디자인은 능동적으로 변하는 규칙에 따라 단순하지만 매우 디테일한 형태로 개선되었다. 이 방식은 수평의 변화가 아니라 수직의 변화를 만들어내면서, 콘텐츠와 콘텍스트가 앱과 같은 디지털 제품에서 중요하다는 관점이 핵심적으로 자리 잡았다.
스큐어모피즘은 비트맵에 비효율적이고, 못 생기고, 똑똑하지 못한 디자인의 대명사가 되었다. 스큐어모피즘을 하려면 한 명의 매우 뛰어난 디자이너가 발상과 작업, 적용을 모두 해야 했지만, 플랫 혹은 머티리얼로 불리는 새로운 프로세스에서는 애자일 혹은 린한 속도가 우선되면서, 한 디자이너의 영역이 팀단위로 분산되었다. 그래서 협업과 커뮤니케이션의 중요성은 점점 커지고 있다.
벡터 기반의 효율적이고, 구성요소로 만들어진 디자인으로 이루어진 프로세스의 변화는 툴의 변화로 이어졌다. 스케치가 거의 모든 디자인 파트에서 사용하는 도구가 되었다. 스케치와 경쟁하는 다른 툴도 유사한 방식의 프로세스를 제공하고 있다.
그리고 UI는 그리는 디자인에서 설계하고 만들고, 조립하며, 재사용되는 디자인이 되었다.
변화는 계속 이어진다.
'브랜드와 스플래시 스크린'에서 스플래시 이미지에 표시된 브랜드를 통해서 기능에 바탕을 둔 앱의 브랜딩에 대해서 알아보았다. 페이스북은 지속적으로 기능의 통합과 브랜드의 관계를 다시 만들어가고 있다.
메신저는 각 브랜드의 커뮤니케이션 인프라 역할을 하게 될까?2020년 페이스북 메신저의 앱 아이콘이 변했다. 그리고 앱 아이콘에 사용된 그러데이션은 앱의 UI 전반에 사용되고 있다. 스플래시 이미지를 살펴보면, 기존에는 페이스북에 가깝게 디자인된 메신저의 스플래시 디자인이 이번엔 인스타그램에 가깝게 변경되었다.
브랜드 디자이너가
사용할 수 있는 UI
이 케이스로 브랜드 디자이너 혹은 프로덕트 디자이너가 사용자와 접면을 설계할 때, 앱 아이콘을 활용할 수 있다는 것을 보여주었고, 그 방식에 있어서 프로그래머의 협력이나 iOS의 특성에 대한 기술적인 접근이 필요하다는 것을 알게 되었다. 흔히, 텍스트는 읽기 어렵다고 하지만, 텍스트를 사용하지 않고 표현하거나 전달하는 방식에 대해서 고민은 적었던 듯하다.
운영 중인 디지털 제품에서 이벤트나 프로모션 없이 앱 아이콘과 스플래시 스크린 같은 UI를 통해서 지속적으로 브랜딩 요소를 노출할 수 있는 방식이 필요할 것으로 예상된다.
참고 URL
http://www.elischiff.com/blog/2016/5/24/instagrams-abomination-part-ii
https://www.logolounge.com/articles/instagram-glyph-goes-abstract
https://spyrestudios.com/the-evolution-and-history-of-instagram-logo/
