UI & UX, UX & Design

다시 돌아온 스큐어모피즘

플랫 디자인이 유행하기 전을 떠올려보자. 그리 먼 과거도 아닌데 떠올리기 어려운 건 왜일까. 인스타그램 로고의 변화만 봐도 우리가 얼마나 플랫 디자인에 적응해버렸는지 실감하게 된다. 빛이 반사되는 렌즈, 가죽 질감의 폴라로이드 카메라를 그대로 묘사한 스큐어모픽 아이콘이 조금 낯설다. (벌써 인스타그램 아이콘이 리디자인된 지 4년이 지났다.)

그리스어로 ‘Skeuos’는 도구(Tool)를, ‘Morphe’는 형태(Shape)를 의미한다. ‘도구의 원래 형태를 따라가는 양식’으로 의역할 수 있다. 실제 모습과 현상을 재현하는 방식으로, 현실 세계에 대한 직접적인 은유다. 굉장히 직관적인 디자인 방법이라 지금은 트렌드와 멀어졌는데, 아무래도 iOS 6에서 7으로 넘어가는 2013년, 애플이 플랫 디자인을 착용해 다시 대세로 만든 것이 가장 큰 이유다. 이를 뒷받침하는 기술적·문화적 요인은 많지만, 새로운 고찰이 없는 표현 방식인 데다 창의적이라고 보기 힘들다는 시각이 지배적이다. 포토샵 레이어를 몇 백 개 쌓아 현실을 모사(模寫)하는 것은 단순 기술에 가깝기 때문이다. iOS 6과 7의 뉴스스탠드(2013)를 보면 책장을 그대로 옮겨 놓은 듯한 비주얼이다.

스큐어모피즘의 단점은 그뿐만이 아니다. 제작 시간도 꽤나 소요되고, 과도한 묘사로 인해 사용자의 주의를 분산시키기도 한다. 게다가 현실 세계의 메타포가 디지털 세계에 딱 맞게 적용하기 힘들다는 점도 있다. 시간이 흐른 후 플랫하게 담는 것이 힘들어질 정도로 정보의 양이 많아진 상황을 해결하기 위해 UI에서는 공간감을 활용하게 됐다. 정보의 위계를 깊이(Depth)로 보여주게 된 것. 머티리얼은 그림자로 더 중요한 정보 혹은 집중해야 할 요소를 강조하고, iOS는 블러(Blur)를 활용해 중요하지 않은 정보를 가리는 방법을 선택했다.

그리고 현재, 새로운 스큐어모피즘이 등장했다. 이를 스큐어모피즘 2.0이라 부르려 한다. 원래부터 있었지만 플랫 UI와 함께 적절히 변주된 스큐어모피즘. 어디에 사용되고, 어떻게 사용해야 좋을지 짚어보자.


1. 어포던스(Affordance, 행동 유도성)를 높여주는 도구

스큐어모피즘의 가장 큰 장점은 이미 익숙한 형태이기 때문에 사용자가 빠르게 인지할 수 있다는 점이다. 피아노를 칠 줄 아는 사람이라면 아마 개러지 밴드(Garage Band)의 피아노도 쉽게 칠 수 있을 것이다. 실제 피아노를 그대로 가져온 것 같은 인터페이스다.

스큐어모피즘이 각광받을 당시 컴퓨터나 스마트폰은 대중에게 낯선 도구였다. 지금이야 없으면 못 살 정도로 생필품이 됐지만 처음 등장했을 땐 이 도구를 어떻게 사용해야 하는지, 어떤 기능을 활용해야 할지 몰랐다. 그래서 디자이너들은 사용자를 직관적으로 이해시켰어야 했다.

스큐어모피즘은 1970년대 심리학자 제임스 깁슨(James J. Gibson)의 행동 유도성 이론(Theory of Affordance)에서 시작됐다. 탁월한 어포던스(Affordance) 덕분에 현재는 지구촌 전 세대가 디지털 인터페이스에 익숙해질 수 있었던 것. 그래서 복잡한 프로그램들에는 스큐어모피즘이 남아 어포던스를 높인다는 본래 목적을 다 하고 있다.

현재는 AR, VR 등의 신기술의 등장과 함께 스큐어모픽한 UI가 활용되기도 하고, ‘애플워치’처럼 새로운 기기가 등장할 때도 종종 활용된다. 애플워치 1세대의 첫 그래픽 또한 일반 시계와 크게 다르지 않다는 것을 알 수 있다.

2. 작지만 강하게 어필하는 시각요소

그라데이션 2.0과 더불어 3D는 더욱 풍성한 그래픽을 표현하기 위해 사용된다. 플랫 디자인에 익숙해진 사용자들에게 간결한 비주얼로 어필하기 힘들어진 것이다. 평면적인 일러스트, 아이콘, 사진보다 더 강력하고, 감각적인 경험을 주는 요소로 3D가 등장했다. 최근 3년간의 디자인 트렌드 기사를 보면 3D가 빠진 적이 없을 정도로 각광받고 있다. 타이포그래피, 스팟 그래픽, 히어로 이미지 등 거의 모든 곳에서 3D 아트워크가 트렌드로 자리 잡는 중이다.

위치 공유 SNS인 젠리(Zenly)는 일반적인 서비스라면 과하다고 적용하지 못했을 과감한 그래픽이 사용된 서비스 중 하나다. 최근엔 플랫한 2D 스티커에서 선명한 색감의 3D스티커로 변화했고 앱 아이콘도 3D가 돼 스큐어모피즘 2.0을 뒷받침하는 좋은 예라고 생각한다.

확실히 2D보다 주목도가 높다. 앱 아이콘을 자세히 보면 막대의 나무 질감까지 표현했지만 아이스크림 부분은 실제와 다르게 먹을 수 있을 것 같은 질감은 아니다. 이질감과 실재감이 묘하게 공존하는 그래픽이다. 스티커들은 글자나 기호가 많아 현실 세계의 메타포를 그대로 베꼈다고 보기 어렵다. 새로운 스큐어모피즘은 3차원으로 비현실적인 요소를 구현하며 일종의 판타지를 만들어낸다는 특징이 있다.

이모지도 정말 많은 서비스에서 그래픽 요소로 활용된다. 거의 만물사전이 되어가는 이모지로 아주 쉽고 빠르게 밀도를 올릴 수 있다. 일반 커뮤니케이션에도 광범위하게 쓰이는 만큼 앱 내에서 포인트 요소로 자주 활용된다.

3. 현실감을 주는 인터랙션

스큐어모피즘은 3D 툴의 발전과 맞물려 구조적으로 현실성을 갖추게 됐다. 평면을 쌓아 모사하는 게 아니라 3차원 공간에 실제 형태와 움직임을 반영한 사물을 만들 수 있기 때문이다. 3D 유행만큼이나 애니메이션과 마이크로 인터랙션에 대한 관심도 큰 편이다. 클래식한 예시로 아이폰의 관성 스크롤부터, 자이로 센서를 활용한 인터랙션이나 드래그 액션에 맞춰 움직이는 요소 등 사용자가 기기를 제어하는 모션에 맞춰 현실감 있는 모션을 보여주는 것도 하나의 트렌드다.

젠리는 자이로 센서를 이용해 기울임에 맞춰 반짝이는 카드를 구현했고, 팝카드에서는 흔드는 제스처에 따라 오브제들이 흔들린다. 햅틱과 사운드도 적재적소에 활용되고 있는데 이모지를 받거나 보낼 때 나오는 진동과 사운드, 굴러다니는 알에 맞춘 햅틱 등 실제로 움직이는 느낌, 실제로 흔들리는 느낌을 준다. 촉각적인 현실성은 사용자의 만족감을 높여준다.

4. 현실을 반영한 디테일

추상적인 개념일수록 현실감을 주는 디테일이 유용하다. 애플카드, 애플페이의 경우 완전히 새로운 금융 서비스라 할 수 있는데, 약간 과장됐다 하더라도 반짝이는 금속 질감이나 카드에 새겨진 각인 효과 등이 익숙함을 준다.

또한 시각적으로 완성도를 높이기 때문에 ‘믿을 만한 서비스’라는 안정감이 든다. 애플카드의 경우 실물과 앱 내의 그래픽이 자연스럽게 이어지며 사용자의 이해를 돕는다. 여기에 애플카드만의 브랜드 아이덴티티로 그라데이션을 활용하고 있다.

마침 브런치 메인에서도 브런치북이라는 신규 기능을 소개하기 위해 책과 책장을 묘사한 섹션이 추가됐다. 옛날 뉴스 스탠드처럼 질감이나 구체적인 묘사는 없지만 현실 세계의 메타포가 깔끔하게 표현된 것. 현대적인 스큐어모피즘이 드러나는 적절한 예시라 생각한다.

5. 브랜딩 요소

여전히 현실을 모사하는 3차원적 형태였다면 스큐어모피즘 2.0이라 부르지 않았을 것이다. 브랜딩과 마찬가지로 아이덴티티와 잘 맞게 3D가 활용돼야 한다. 우버를 보면 로고에서 확장된 자동차 디자인이 완벽하게 우버를 연상시키진 않지만 브랜드 이미지를 구축하는데 큰 임팩트를 주고 있다. 사용성 향상에 기여했는지는 모르겠다. 하지만 중요하지 않다. 모두가 사용성 향상을 추구하는 와중에 브랜드적으로 사용될 오브제를 발굴한 것만으로도 의미 있는 시도로 느껴진다.

우버 디자인 시스템 내에서는 이 3D 오브제를 아이콘으로 분류하고 있다. 아주 작은 부분에 활용되고 있지만 서비스 카테고리를 직관적으로 보여주고, 브랜드 아이덴티티를 적절하게 담아낸다. (자세한 이야기는 우버 미디엄에서 읽을 수 있다.)

그리고 배달의 민족. 왠지 배지(Badge) 사진을 잘 보정한 것 같아서 3D는 아닌 것 같고, 스큐어모피즘이라 보기 애매하다. 그래도 나는 스큐어모피즘이라고 답하고 싶다. 누가 봐도 금형배지다. 아이콘이어도 되는 작은 요소에 정성을 더한 것을 보면, 정석적인 아름다움은 아니지만 하나하나 뜯어보게 만든다.

배지는 예전에 먹찌라는 이름으로 오프라인 프로모션에 쓰인 적이 있다. 현실에서 활용된 적이 있는 아이템을 자연스럽게 앱에 적용해 브랜드 아이덴티티를 일관되게 유지했다.

6. 나를 표현하는 수단

3D는 일방적으로 사용자에게 어필하기 위한 도구를 넘어 사용자가 자신을 표현할 수 있는 수단으로도 사용된다. 3D 아바타를 활용한 SNS 제페토가 좋은 예다. 사용자가 너무 쉽게, 현실보다 예쁜 자신만의 아바타를 만들 수 있다는 것이 매력 포인트다. 친구들과 함께 찍은 사진, 조금만 신경 쓰면 무궁무진하게 커스터마이징할 수 있는 옵션들은 가상의 판타지임에도 적절하게 현실감을 선사한다.

애플의 미모지도 꾸준히 발전하고 있다. 앞서 언급한 현실감 있는 인터랙션의 최첨단이라 할 수 있는데, 애플은 미모지를 위해 FACET, RealFace, PrimeSense 등의 AR 기술을 큰돈 들여 구입하고 특허를 내기도 했다. 움직임이 정말 자연스럽기도 하고, 아무렇게나 꾸며도 예쁘다. 사용법도 쉬워서 팬들은 자발적으로 미모지를 활용하고 홍보한다. 애플에서 공개한 미모지 뷰티 튜토리얼(영상)을 보면 고퀄리티 3D 이미지가 주는 새로운 재미를 느낄 수 있다.

지금까지 스큐어모피즘 2.0의 역할에 대해 알아봤다. 스큐어모피즘 2.0은 어포던스를 주기 위해, 시각적으로 좀 더 강력하게 어필하기 위해, 브랜드 정체성을 보여주기 위해 사용되며, 시각을 넘어 청각적, 촉각적인 인터랙션을 통해 혹은 실제 디테일을 디지털화해 현실감을 부여하기도 한다. 사용자들은 손쉽게 3D 이미지를 만들었고 스스로 재생산하는 중이다. 3D가 강력한 비주얼 요소라는 방증이다.

모더니즘이 있다면 포스트모더니즘이 나타나고, 고전주의가 있다면 신고전주의가 나타나는 것처럼 시각예술의 양식은 재해석과 재생산을 반복하며 발전한다. 스큐어모피즘2.0은 과거로의 회귀라기보다는 플랫 UI와 공존하며 발전한 새로운 양태다. 둘 중에 정답이 있는 것은 아니다. 의도와 맥락에 부합하는 시각 요소를 찾아내는 것이 현시대의 디자이너에게 필요한 역량이 아닐까? 그건 스큐어모피즘일 수도 있고, 플랫일 수도 있고, 또 다른 어떤 것일 수도 있다. 스큐어모피즘 2.0 다음에 어떤 디자인이 등장할지 궁금하다.

Comments
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts