다시 돌아온 스큐어모피즘
스큐어모피즘 2.0, 어떻게 활용되고 있을까
플랫 디자인이 유행하기 전을 기억해보자. 그리 먼 과거는 아닌데 떠올리기 어려운 건 왜일까. 인스타그램 로고만 봐도 우리가 얼마나 플랫 디자인에 적응해버렸는지 실감하게 된다. 빛이 반사되는 렌즈, 가죽 질감의 폴라로이드 카메라를 그대로 묘사한 스큐어모픽 아이콘이 조금 낯설다.
인스타그램 아이콘 리디자인 (2016) 이게 벌써 3년 전이라니요.그리스어로 Skeuos는 Tool(도구)를, Morphe는 Shape(형태)를 의미한다. 원래 도구의 형태를 그대로 따라가는 양식 정도로 의역할 수 있겠다. 실제 모습과 현상을 재현하는 방식으로, 현실 세계에 대한 직접적인 은유다. 굉장히 직관적인 디자인 방법임에도 지금은 트렌드와 멀어지게 되었는데, 아무래도 iOS 6에서 7으로 넘어가는 2013년, 애플이 플랫 디자인을 대세로 만들어버렸다는 게 가장 큰 이유겠다. 이를 뒷받침하는 기술적, 문화적 요인이 많지만 새로운 고찰이 없는 표현 방식이고 창의적이라 보기 힘들다는 시각이 지배적이다. 포토샵 레이어를 몇 백 개 쌓아 현실을 모사하는 건 거의 기술 가깝기 때문이다.
iOS 6과 7의 뉴스스탠드 (2013) 예전엔 책장을 그냥 박아놓은 듯한 비주얼이다.뿐만 아니라 만드는 시간도 꽤나 소요되고, 과도한 묘사로 인해 사용자의 주의를 분산시키기도 하고, 현실 세계의 메타포가 디지털 세계에 딱 맞게 적용되기 힘들다는 단점도 있다. 혹시 iOS 6와 7의 인터페이스가 궁금하신 분들은 여기서 확인할 수 있다. (불과 6년 전인데 이렇게 달라지다니 충격)
플랫하게 담는 게 힘들어질 정도로 정보의 양이 늘어난 상황을 해결하기 위해 UI에서는 공간감을 활용하게 됐다. 정보의 위계를 Depth로 보여주게 된 것. 머테리얼은 그림자로 더 중요한 정보 혹은 집중해야될 요소를 강조하고 있고, iOS는 Blur를 활용해 중요하지 않은 정보를 가려버리는 방법을 선택했다.
그리고 이제는 새로운 스큐어모피즘이 등장했다. 이를 스큐어모피즘 2.0이라 불러보려 한다. 갑자기 생겨난 유행은 아니다. 원래부터 있었지만 플랫 UI와 함께 적절히 변주된 스큐어모피즘. 어디에 사용되고 있고, 어떻게 사용해야 좋을지 짚어보자.
1. 어포던스를 높여주는 도구
스큐어모피즘의 가장 큰 장점은 이미 익숙한 형태이기 때문에 사용자에게 빠르게 인지시킬 수 있다는 점이다. 피아노를 칠 줄 아는 사람이라면 아마 가라지 밴드의 피아노도 쉽게 칠 수 있을 것.
이것은 피아노가 아니라 인터페이스입니다.스큐어모피즘이 각광 받을 당시 컴퓨터나 스마트폰은 대중에게 낯선 도구였다. 지금이야 없으면 못 살 정도로 생필품이 됐지만 처음 등장했을 땐 이 새로운 도구를 어떻게 사용해야하는지, 그 안에 들어있는 소프트웨어들은 어떤 기능이 담겨있는지 직관적으로 이해시켰어야 했다.
스큐어모피즘은 1970년대 심리학자인 James J. Gibson의 행동유도성 이론(Theory of Affordance)로부터 시작되었다. 탁월한 어포던스 덕분에 현재는 지구촌 전세대가 디지털 인터페이스에 익숙해질 수 있었던 것. 그래서 복잡한 프로그램들에는 스큐어모피즘이 남아 어포던스를 높인다는 본래 목적을 다 하고 있다.
실제 앰프를 그대로 갖다 박은 듯한 Logic Pro의 필터현재는 AR, VR 등의 신기술이 등장했을 때 스큐어모픽한 UI가 활용되기도 하고, 애플 워치처럼 새로운 기기가 등장할 때도 종종 활용된다. 애플워치 1세대의 첫 그래픽 또한 일반 시계와 크게 다르지 않은 걸 알 수 있다.
이것은 시계가 아니다.2. 작지만 강하게 어필하는 시각요소
지난 글 그라데이션 2.0(지난 글)과 더불어, 3D는 더 풍성한 그래픽을 표현하기 위해 사용된다. 플랫 디자인에 익숙해진 사용자들에게 간결한 비주얼로 어필하기 힘들어진 것이다. 평면적인 일러스트, 아이콘, 사진보다 더 강력하고, 감각적인 경험을 주는 요소로 3D가 등장했다. 최근 3년 간의 디자인 트렌드 기사들을 보면 3D가 빠진 적이 없을 정도로 각광 받는다. 타이포그래피, 스팟 그래픽, 히어로 이미지 등 거의 모든 곳에서 3D 아크워크가 트렌드로 자리 잡는 중이다.
어도비 블로그의 2019 그래픽 트렌드. 첫번째가 3D다.위치 공유 SNS인 젠리(Zenly)는 일반적인 서비스라면 과하다고 적용 못했을 과감한 그래픽이 사용된 서비스 중 하나다. 최근엔 플랫한 2D 스티커에서 선명한 색감의 3D스티커로 변화했고 앱 아이콘도 3D가 되어 스큐어모피즘 2.0을 뒷받침하는 가장 좋은 예라고 생각한다.
확실히 2D보다 주목도가 높다. 앱 아이콘을 자세히 보면 막대의 나무 질감까지 표현되어있지만 아이스크림 부분은 실제와 다르게 먹을 수 있을 것 같은 질감은 아니다. 이질감과 실제감이 묘하게 공존하는 그래픽이다. 스티커들은 글자나 기호들이 많아 현실 세계의 메타포를 그대로 베꼈다고 보기 어렵다. 새로운 스큐어모피즘은 3차원으로 비현실적인 요소를 구현하며 일종의 판타지를 만들어낸다는 특징이 있다.
이모지도 정말 많은 서비스에서 그래픽 요소로 활용된다. 거의 만물사전이 되어가는 이모지로 아주 쉽고 빠르게 밀도를 올릴 수 있다. 일반 커뮤니케이션에도 광범위하게 쓰이는 만큼 토스나 노션 등 앱 내에서 포인트로 사용되기도 한다.
이쯤되면 만물사전
노션에서 아주 적극적으로 쓰이는 이모지3. 현실감을 주는 인터렉션
스큐어모피즘은 3D툴들의 발전과 맞물려 구조적으로 현실성을 갖추게 되었다. 평면을 쌓아 모사하는 게 아니라 3차원 공간에 실제 형태와 움직임을 반영한 사물을 만들 수 있기 때문이다. 3D 유행 만큼이나 애니메이션과 마이크로 인터렉션에 대한 관심도 큰 편이다. 클래식한 예시로 아이폰의 관성 스크롤부터, 자이로 센서를 활용한 인터렉션이나 드래그 액션에 맞춰 움직이는 요소 등 사용자가 기기를 제어하는 모션에 맞춰 현실감있는 모션을 보여주는 것도 하나의 트렌드라고 생각된다.
(좌) 젠리의 프로필 카드 / (우) 젠리 팝카드젠리는 자이로 센서를 이용해 기울임에 맞춰 반짝이는 카드를 구현했고, 팝카드에서는 흔드는 제스쳐에 따라 오브제들이 흔들린다. 햅틱과 사운드도 적재적소에 활용되고 있는데 이모지를 받거나 보낼 때 나오는 진동과 사운드, 굴러다니는 알에 맞춘 햅틱 등 실제로 움직이는 느낌, 실제로 흔들리는 느낌을 준다. 촉각적인 현실성은 사용자의 만족감을 높여준다.
4. 실제를 반영한 디테일
추상적인 개념일수록 현실감을 주는 디테일이 유용하다. 애플카드, 애플페이의 경우 완전히 새로운 금융 서비스라 할 수 있는데, 약간 과장되긴 했지만 반짝이는 금속 질감이라던가 카드에 새겨진 각인 효과 등이 익숙함을 준다.
또한 시각적으로 완성도를 높여주기 때문에 '잘 완성된 믿을 만한 서비스'라는 안정감이 든다. 애플 카드의 경우 실물과 앱 내의 그래픽이 자연스럽게 이어지며 사용자의 이해를 돕는다. 여기에 애플카드 만의 브랜드 아이덴티티로 그라데이션을 활용하고 있다.
마침 브런치 메인에서도 브런치북이라는 신규 기능을 소개하기 위해 책과 책장을 묘사한 섹션이 추가됐다. 옛날 뉴스 스탠드처럼 질감이나 구체적인 묘사는 없지만 현실 세계의 메타포가 깔끔하게 표현된 것. 현대적인 스큐어모피즘이 드러나는 적절한 예시라 생각한다.
5. 브랜딩 요소
여전히 현실을 모사하는 3차원적 형태였다면 스큐어모피즘 2.0이라 부르지 않았을 것이다. 브랜딩과 마찬가지로 아이덴티티와 잘 맞게 3D가 활용되어야 한다. 우버를 보면 로고에서 확장된 자동차 디자인이 완벽하게 우버를 연상시키진 않지만 브랜드 이미지를 구축하는데 큰 임팩트를 주고 있다. 사용성 향상에 기여했는지는 모르겠다. 하지만 중요하지 않다. 모두가 사용성 향상을 추구하는 와중에 브랜드적으로 사용될 오브제를 발굴한 것만으로도 의미있는 시도로 느껴진다.
우버 디자인 시스템 내에서는 이 3D 오브제를 아이콘으로 분류하고 있다. 아주 작은 부분에 활용되고 있지만 서비스 카테고리를 직관적으로 보여주고, 브랜드 아이덴티티를 적절하게 담아낸다. (자세한 이야기는 우버 미디엄에서 읽을 수 있다.)
그리고 배달의 민족. 왠지 뱃지 사진을 잘 보정한 것 같아서 3D는 아닌 것 같고, 스큐어모피즘이라 보기 애매하다. 그래도 나는 스큐어모피즘이라고 답하고 싶다. 누가봐도 금형뱃지다. 아이콘이어도 되는 작은 요소임에도 너무나 정성스럽게 뱃지 이미지고 정석적인 아름다움은 아니지만 하나 하나 뜯어보게 만든다.
새로운 카테고리 나올 때마다 뱃지를 새로 만드는 걸까뱃지는 예전에 먹찌라는 이름으로 오프라인 프로모션에 쓰인 적이 있다. 현실에서 활용된 적이 있는 아이템을 자연스럽게 앱에 적용해 브랜드 아이덴티티를 일관되게 유지했다고 본다.
6. 나를 표현하는 수단
3D는 일방적으로 사용자에게 어필하기 위한 도구를 넘어 사용자가 자신을 표현할 수 있는 수단으로도 사용된다. 3D 아바타를 활용한 SNS 제페토가 좋은 예다. 사용자가 너무 쉽게, 현실보다 예쁜 자신 만의 아바타를 만들 수 있다는 게 매력 포인트다. 친구들과 함께 찍는 사진, 좀만 신경쓰면 무궁무진하게 커스터마이징할 수 있는 옵션들은 가상의 판타지임에도 적절하게 현실감을 주고 있다.
애플의 미모지도 꾸준히 발전하고 있다. 앞서 언급한 현실감 있는 인터렉션의 최첨단이라 할 수 있는데, 애플은 미모지를 위해 FACET, RealFace, PrimeSense 등의 AR 기술을 큰 돈 들여 구입하고 특허를 내기도 했다. 움직임이 정말 자연스럽기도 하고, 아무렇게나 꾸며도 예쁘다. 사용법도 너무 쉬워서 팬들은 자발적으로 미모지를 활용하고 홍보한다. 애플에서 공개한 미모지 뷰티 튜토리얼(영상)을 보면 고퀄리티 3D 이미지가 주는 새로운 재미를 느껴볼 수 있다.
iOS 13의 미모지지금까지 스큐어모피즘 2.0에 대해 아주 길게 주관적인 생각들을 풀어봤다. 스큐어모피즘 2.0은 어포던스를 주기 위해, 시각적으로 좀 더 강력하게 어필하기 위해, 브랜드 정체성을 보여주기 위해 사용되며, 시각을 넘어 청각적, 촉각적인 인터렉션을 통해 혹은 실제 디테일을 디지털화하여 현실감을 부여하기도 한다. 사용자들은 손쉽게 3D 이미지를 만들게 되었고 스스로 재생산하는 중이다. 3D가 강력한 비주얼 요소라는 반증이다.
모더니즘이 있다면 포스트 모더니즘이 나타나고, 고전주의가 있다면 신고전주의가 나타나는 것처럼 시각예술의 양식은 재해석과 재생산을 반복하며 발전한다. 스큐어모피즘2.0은 과거로의 회귀라기보다는 플랫 UI와 공존하며 발전한 새로운 양태라고 생각한다. 둘 중에 정답이 있는 것은 아니다. 의도와 맥락에 부합하는 시각 요소를 찾아내는 것이 현시대의 디자이너에게 필요한 역량이라는 생각이 든다. 그건 스큐어모피즘일 수도 있고, 플랫일 수도 있고, 또 다른 어떤 것일 수도 있다. 스큐어모피즘 2.0 그 다음에 뭐가 등장할지 정말 궁금해진다.
