top of page

Opinions  I  August 21, 2023  I  Written by 권오윤 이사

한가지 확실히 해야 할 것이 있다. 스큐어모피즘과 뉴모피즘으로 펼쳐지는 인터페이스가 아무리 화려한 3D적 표현을 하더라도, 메타버스로 가기 이전의 인터페이스는 2D이다. 2D의 공간적 한계를 극복하는 것도 디자이너들의 과제였다. 일곱번째 트렌드인 글래스모피즘도 그런 시도의 한가지이다.

당신이 알아야 할 UI 디자인 트렌드 10가지 – 3/3편

3D 공간에서는 사물 뒤에 가려진 부분은 그곳에 가면 확인할 수 있다. 하지만 2D의 인터페이스에서는 불가능하다. 글래스모피즘은 ‘성에가 낀 유리’처럼 반투명으로 엘레멘트를 인식하게 함과 동시에 엘레먼트 뒤쪽의 공간을 확인할 수 있게 해준다. 2020년 말에 출시된 Mac Os ‘Big Sur’는 글래스모피즘을 적극적으로 구현한 인터페이스를 선보였다. 필자가 현재 쓰고 있는 OS Mojave와 비교하면 앞과 뒤에 겹겹이 레이어 된 엘레먼트를 통해 공간감을 느낄 수 있게 하는 디자인이다. 글래스모피즘의 중요한 세 가지 요소는 투명도, 옅은 경계, 그리고 선명한 색상이다. 이 세 가지 요소로 주목도가 높으면서도 미니멀한 인터페이스를 구축할 수 있다.

일곱번째 트렌드 : Glassmorphism (글래스모피즘)

​[왼쪽부터 ①Mac OS ‘Big Sur’로 알려진 글래스모피즘, ②엘레먼트의 레이어를 통해 공간이 깊이가 느껴지는 인터페이스]

[왼쪽부터 ①Mac OS ‘Big Sur’로 알려진 글래스모피즘, ②엘레먼트의 레이어를 통해 공간이 깊이가 느껴지는 인터페이스]

볼드한 서체와 마찬가지로 애니메이션/모션도 트렌드라고 이름 붙이기는 어색하지만 사실은 대단히 중요한 트렌드이다. 애니메이션은 ‘생동감’이라는 개념에서 디자인에 하나의 차원을 더한 것이고, 스큐어모피즘과는 또 다른 방식으로 가상공간을 실제화한 것이다. 움직이는 UI는 스토리텔링이 더욱 용이해졌다. 그리고 보다 인터랙티브해졌다. 스크롤을 내릴 때 반응하는 동작이나 페이지를 넘길 때 구현되는 애니메이션은 유저와 인터페이스 간의 관계성을 형성하며 더욱 몰입하기 쉽게 해준다. 재미있는 아이디어와 아름다운 비주얼을 구현한 사례는 대단히 많다. 이런 움직임들이 당신의 정적이고 지루한 웹사이트를 숨 쉴 수 있게 해준다. 제대로만 활용한다면 당신의 제품에 한 차원 높은 소비자 경험을 가능하게 해준다.

여덟번째 트렌드 : Animation/Motion (애니메이션/모션)

​[제품체험을 극대화하게 해주는 모션 UI 인터페이스]
[제품체험을 극대화하게 해주는 모션 UI 인터페이스]

[제품체험을 극대화하게 해주는 모션 UI 인터페이스]

사실 모두 비슷해 보이는 인터페이스에서 차별화를 주기란 쉽지 않다. 일러스트레이션은 자사의 웹사이트를 다른 것들과 시각적으로 구분해주고, 제품에 캐릭터를 부여해준다. 일러스트레이션은 다양한 미적 관점을 가지고, 핸드 드로잉, 디지털, 2D, 3D 등 매우 다양한 방식으로 표현될 수 있다. 특히, 일러스트레이션은 브랜드의 감성적인 측면을 드러내기 때문에 세심하게 기획되어야 한다. 지난 포럼에서도 소개되었던 ‘세일즈포스’는 각 서비스 영역을 대표하는 14개의 캐릭터를 활용한 일러스트레이션을 인터페이스의 전면에 내세우고 있다. 유저에게 친밀감, 따뜻함, 풍요로움 등 여러 가지 감성과 경험을 제공하여 인터랙션과 컨버젼을 높이는 사례는 얼마든지 많다.

아홉번째 트렌드 : Illustration (일러스트레이션)

[왼쪽부터 ①캐릭터를 활용한 일러스트레이션으로 친근한 브랜드퍼스낼리티를 선보이는 세일즈포스, ②일러스트레이션이 비중이 높은 텐트 렌탈 브랜드 ‘핏치’의 홈페이지]

[왼쪽부터 ①캐릭터를 활용한 일러스트레이션으로 친근한
브랜드퍼스낼리티를 선보이는 세일즈포스, ②일러스트레이션이 비중이 높은 텐트 렌탈 브랜드 ‘핏치’의 홈페이지]

어두운 배경에 밝은 텍스트가 얹혀진다면 밝기(휘도)가 크게 줄어들어 눈의 피로가 극적으로 감소한다. 배터리 소모량도 크게 줄어든다. 이런 경향이 최초로 시작된 것은 2016년 트위터가 검은색 배경에 흰색 텍스트로 전환한 다크모드를 처음 제시하면서이다. 애플이 iOS13을 출시하면서 곧바로 다크모드 대열에 합류했다. 각 어플리케이션의 디자이너들은 아이폰에서의 인터페이스가 어떻게 구현될지 고민하지 않을 수 없게 됐다. 눈의 피로를 줄인다는 목적으로 탄생한 기능으로서의 다크모드는 미학적 관점에서 많은 장점들이 가진 하나의 트렌드로 승화되었다. 슬릭한 감성의 세련된 디자인이 구현하는 인터페이스들이 곳곳에서 나타났다. 우리 비포브랜드의 인터페이스도 그런 경향을 근거로 디자인되었다. 검은색 배경에 브랜드 컬러 ‘그린’이 구현되며 영화 매트릭스에서 나왔던 인터페이스의 향수도 느껴진다.

열번째 트렌드 : Dark Mode (다크모드)

​[왼쪽부터 ①2016년, 최초로 다크모드의 인터페이스를 출시한 트위터, ②iOS13부터 다크모드를 채택한 아이폰]

[왼쪽부터 ①2016년, 최초로 다크모드의 인터페이스를 출시한 트위터, ②iOS13부터 다크모드를 채택한 아이폰]

지금까지 열 가지 UI 트렌드를 살펴보았다. 역사적으로 나타난 시기의 차이는 있으나 모든 트렌드가 여전히 조화롭게 채택되며 진화되며 다양한 스타일의 무수한 디자인 템플릿으로 파생되었다. 각기 다양한 모습으로 소비자의 경험과 인터랙션을 제공하기 위해 정교하게 설계되어 있다. 무더운 여름이 지나면, 여러분의 제품과 서비스 체험을 극대화해줄 홈페이지의 스타일을 비포브랜드와 함께 고민해 보시는 것은 어떨까요? 지금까지 긴 내용 읽어주셔서 감사합니다.

[왼쪽부터 ①다크모드를 채택한 NBC 방송의 홈페이지, ②다크모드이지만 다양한 색상을 조화시킨 UI 디자인 템플릿]

[왼쪽부터 ①다크모드를 채택한 NBC 방송의 홈페이지, ②다크모드이지만 다양한 색상을 조화시킨 UI 디자인 템플릿]

bottom of page