[이상인 칼럼] 커스텀 UI, 주류 디자인 된다

애플이 iOS 15를 공개하자 디자인 업계에서 나온 이야기 중 하나가 UI(User Interface: 사용자 인터페이스) 스타일이 예전의 스큐어모피즘(Skeuomorph)으로 회귀였다. 즉, 사물의 원형을 실감 나게 묘사하는 방식으로 회귀하는 듯 한 인상을 준다.

특히 미모지(개인화 이모티콘)나 앱 아이콘 그리고 인터페이스의 깊이감 등이 확실히 평면적인 2D에서 입체적이고 묘사가 더 들어간 3D로 진화했다.

아이폰 초창기의 스큐어모피즘에서 현재 대세가 된 플랫 디자인(Flat Design: 심플하고 평면적인 디자인 스타일)으로 iOS7 때 바뀐 후 다시 스큐어모피즘으로 돌아가는 것이다.

이러한 변화에는 증강현실의 대두와 같은 기술과 트렌드 변화뿐 아니라 사용자들의 감성적인 부분을 건드리는 다양한 이유가 존재한다. 그래서 하나의 UI 디자인 스타일이나 방향성이 영원히 지속되지 않는다.

디자인할 때 업계의 변화를 장기, 중기, 단기적 시점으로 나눠 타임라인을 만들고 비전 워크(미래 적용 콘셉트 작업) 등을 한다.

일반적으로 장기는 현재 기준에서 5~10년 정도 후의 비전, 중기는 3~5년 정도 후의 비전 그리고 단기는 앞으로 1~3년 안의 변화를 이야기한다. 당연한 이야기지만 단기 예측이 장기 예측보다 더 현실성 있는 작업이고, 이 중에서도 앞으로 다가올 큰 트렌드 중 하나인 커스텀 UI를 주목하고자 한다.

UI는 한국어로 이용자환경, 영어로 유저 인터페이스(User Interface)의 줄임말이다. 흔히 사용하는 버튼과 메뉴, 링크 등을 의미한다. 한마디로 화면을 구성하는 모든 시각적 요소가 바로 UI다.

커스텀 UI는 사용자가 원하는 모습으로 UI 환경을 조정할 수 있는 것을 의미한다. 간단한 예시로 핸드폰 배경화면 바꾸는 것을 들 수 있다. 2~3년 전부터 다크 모드(Dark Mode: UI를 흰색 바탕이 아닌, 검정 바탕 기준으로 대체하는 모드)와 같이 사용자가 선호하는 색상 시스템을 OS에 적용하는 것으로 진화했다.

그런데 이 커스텀 디자인 적용 범위가 최근 대폭 넓어지고 있고, 이번에 구글이 발표한 머테리얼 유(Material You)는 이를 잘 반영한다.

머테리얼 디자인(Material Design)은 구글이 2014년 공개한 그들의 디자인 시스템이다. 동일한 서체, 컬러, 버튼과 같은 UI 요소들을 사용함으로써 구글의 수많은 서비스와 머테리얼 디자인을 활용하는 외부 서비스 사용자 경험을 일관성 있게 묶어주는 역할을 한다.

올해 구글이 공개한 머테리얼 유는 머테리얼 디자인에 기반을 두고 있으면서도 사용자가 거의 모든 영역에 걸쳐 UI를 본인의 취향에 맞게 변화시킬 수 있다. UI 시스템의 기본 컬러 세트가 이전에는 기본(흰색 바탕에 검정 글씨)과 다크 모드(검정 바탕에 흰색 글씨) 두 가지였다면, 이제는 사용자의 선택에 따라 무한한 컬러 시스템 조합이 가능하다.

컬러를 직접 설정에서 선택할 수 있을 뿐 아니라, 인공지능이 이러한 설정을 도와주기까지 한다. 가령 스마트폰 배경화면을 녹색 식물이 있는 사진으로 바꾸면 UI가 그에 맞는 잘 어울리는 녹색 계열 색상으로 알아서 변경된다.

서체의 종류와 굵기 사이즈 등에 변화를 줄 수도 있고, 버튼과 아이콘의 모양이나 둥근 정도 등을 커스텀 가능하다. 또한 사용자가 이러한 개인화 작업을 수행함에 있어 접근성(Accessibility: 신체적 한계가 있는 사람도 사용할 수 있는 수준) 기준에 대해 걱정할 필요 없이, 머테리얼 유가 알아서 색상과 사이즈 대비 등을 계산해 적용한다.

사용자 입장에서 이러한 개인화 작업을 통해 직접 꾸미고 만들어 나가는 유니크한 감정을 느낄 수 있어 심리적으로 더 많은 유대관계가 형성된다. 본인이 사용하는 OS 세상의 공동 개발자가 되는 것이다.

머테리얼 유 수준의 커스텀이 가능한 디자인 시스템을 구축하려면 기본적으로 몇 가지 필수 요건이 충족되어야 한다.

첫 번째는 기본 바탕이 되는 기본 디자인 시스템이 얼마나 안정적으로 구축되어 있는가 여부다. 머테리얼 디자인이라는 기본 값이 탄탄하게 잘 구축되어 있었기 때문에 커스텀 요소라고 하는 일종의 변수(Variants)의 계산과 적용이 가능하다. 그런 의미에서 잘 잡힌 기본 디자인 시스템은 건물의 기둥과 같다. 기둥이 잘 받치고 있어야 다양한 방식으로 건물을 올리고 또 치장할 수 있다.

두 번째는 디자이너들과 엔지니어들의 엄청난 공이 필요하다. 다양한 변수를 계산하기 위해 코드 몇 줄로 해결된다면, 누구나 커스텀 UI를 쉽게 구축할 수 있다.

하지만, 접근성 문제 해결을 위한 색상 컨트라스트 및 보색 적용 등과 같은 문제는, 그 기준을 세우기까지 엄청난 공이 들어간다. 수많은 컬러 세트를 나열하고 일일이 맵핑해가며, UI에 사용 가능한 색상 단계들을 설정한다. 어떻게 주변 다른 색상들로 자동 적용시킬지 디자이너와 엔지니어가 수작업으로 한 땀 한 땀 잡는 시작점은 필수다.

이러한 과정이 지난 후에 머신 러닝과 인공 지능 설정이 빛을 발할 수 있다. 그렇지 않고 무작위 코드 몇 줄로 처음부터 커스텀 UI를 구축하고자 한다면, 그 결과물이 사용자에게 즐거운 경험을 선사하기는 커녕, 시각적 혼란만 불러올 수 있다.

그런 만큼 구글의 머테리얼 유 발표에서 커스텀의 한계를 넓히기 위해 그들이 꽤 오랜 시간 준비한 느낌이 들었다.

구글과 같은 메이저 플레이어가 제대로 된 신호탄을 쏜 이상, 발전된 커스텀 UI를 애플의 iOS에서도 만날 수 있을 확률이 높아졌다.

또한 구글의 자사 플랫폼(1st party) 서비스의 머테리얼 유의 적용은 이미 시작된 만큼, 외부(3rd party) 서비스들에게 빠르게 확산될 것으로 전망된다.

이러한 발전적 개인화 UI의 보급은 디자인의 대명제 중 하나로 여겨졌던, '형태는 기능을 따른다(Form follows function)'라는 말을 '형태는 사용자의 감정을 따른다(Form follows feeling)'로 곧 바뀌게 만들 지 모른다.