UI/UX 디자인의 최신 추세

UI/UX 디자인의 최신 추세

디자인 추세

1. 맞춤형 일러스트레이션과 스토리텔링
맞춤형 일러스트레이션은 웹 사이트와 모바일 앱의 이야기를 보여주거나 플랫폼의 분위기를 설정해 시각적 스토리텔링을 만들고 앱의 기능과 이점을 제시한다. 이러한 일러스트레이션은 실제 세계와 유사한 시각적 연관성을 설정함으로써 직관적인 상호작용을 제공하고 화면을 역동적이고 활기차게 한다. 그레이디언트를 활용하거나 그림자를 적용해 상표 가치의 독창성을 표현하는 것은 물론, 사용하고 있는 페이지의 언어가 모국어가 아닌 경우 발생할 수 있는 텍스트 인식의 문제를 해결해 접근성을 향상하고 콘텐츠의 일관성을 높여 준다. 

2. 아이소메트릭 디자인 Isometric
아이소메트릭 디자인은 2차원 요소로 3차원 객체를 그리는 방법이다. 평면 디자인에 넓이와 깊이, 그리고 높이를 더함으로써 각 요소가 매력적으로 보이고 사용자가 더 쉽게 이해하는 것이 가능하다. 이런 이유로 아이소메트릭 디자인은 인포그래픽 분야에서 빠르게 퍼져나가면서 최신 추세로 자리 잡게 되었다. 

3. 과감한 색상과 그레이디언트 사용
2019년 이후로는 더욱 과감한 색상과 그레이디언트가 혼합된 그래픽 사용이 가속화될 것으로 전문가들은 예측하다. 과감한 색상이나 그레이디언트와 함께 겹치는 효과를 적용하면 공간감을 부여하고 구조화된 인터페이스를 생성할 수 있다. 특히 그레이디언트는 우리가 현실 세계에서 보는 방식과 같이 플랫폼에 현실감과 깊이를 더하기 때문에 자연스러운 표현이 가능하며, 극한의 색상을 사용하면 시선의 분산을 막아 필요한 요소에만 집중할 수 있도록 해 준다. 

4. 3D 입체 디자인과 애니메이션
3D 입체 디자인은 아이소메트릭 디자인과 함께 최근에 주목받는 추세이다. 3D 디자인은 2D 디자인보다 시간이 오래 걸리지만, 사실적으로 보이게 할 수 있고 사진으로는 담지 못하는 표현도 가능하다. 정적인 디자인뿐 아니라 동적인 애니메이션으로도 사용되며, 화면을 가득 채운 3D 영상이나 애니메이션으로 다양한 시뮬레이션을 통해 사용자의 흥미를 자극할 수 있다. 최근 로딩 화면은 로딩 시간을 지연시키면서 브랜드 화면을 애니메이션으로 구현하는 추세이며, 이를 통해 브랜드 콘셉트를 명확하게 제공하고 사용자 경험을 개인화한다. 또 작은 팝업과 알림에도 사용자의 주의를 환기하기 위한 애니메이션이 사용된다. 동적인 화면의 또 하나의 추세는 리퀴드 애니메이션이다. 5G와 함께 통신 속도가 빨라지고 기기의 사양이 상향됨에 따라 액체, 홀로그램과 같은 동적 요소의 활용이 눈에 띈다.

5. 큰 타이포그래피와 가변 폰트 
기존에는 폰트의 크기나 두께의 변화가 어려워 이미지 처리를 하거나 사용된 모든 폰트를 제공해야 했지만, 최근에는 하나의 폰트로 다양한 변화가 가능한 가변 폰트가 빠르게 확산하고 있다. 가변 폰트는 화면의 크기나 마우스 스크롤에 따라 다양하게 변화하는 폰트이다.

---

UI/UX 추세

1. 음성 사용자 인터페이스
클릭과 탭을 기반으로 했던 UI는 음성 인식 서비스인 삼성의 빅스비, 애플의 시리, 아마존의 알렉사, 구글의 오케이 구글과 함께 독보적인 시스템을 구축하여 성장 속도를 높이고 있다. 음성 사용자 인터페이스는 급속히 발전하고 있지만, 혼잡한 상황에서 음성 사용이 어렵거나 잘못된 내용이 인식되었을 때 수정하거나 삭제하는 부분 등에 개선이 필요해 아직 GUI를 따라잡지는 못하고 있다. 하지만 음성 기능은 내비게이션 기능이 적고 버튼이나 메뉴가 필요 없이 매우 직관적이어서 꾸준히 성장하고 있다. VUI는 터치스크린, 마우스, 키보드에 의존하는 대신 핸즈프리방식으로 상호작용하는데, 이러한 방식이 정착되면 시각 장애인이나 문맹자도 편리하게 서비스를 사용할 수 있을 것이다. 

2. 제스처와 엄지손가락 친화적 인터페이스
스마트 기기가 발전하고 종류가 다양해지면서 화면 공간을 최대한 확보하는 것이 중요해졌다. 결국 물리적 버튼인 홈 버튼이 없어졌고, 탐색에 절대적으로 필요한 접근 방법인 제스처를 기반으로 한 인터페이스의 중요성이 커졌다. 제스처 기반의 인터페이스에서는 엄지손가락 영역이 미치는 부분이 가장 중요하므로 자주 사용하는 제어나 탭 메뉴는 인터페이스 하단에 배치된다. 또 자연스러운 동작 범위에서 벗어난 영역에 있는 콘텐츠에서는 클릭할 수 있는 요소를 배제하기도 한다. 

3. 마이크로 인터랙션
마이크로 인터랙션은 놓치기 쉬운 사소한 부분에서 한 가지 목적을 위한 이벤트를 세심하게 구현하는 것을 말한다. 주로 모바일 플랫폼에서 미묘한 시각적 효과를 내기 위해 사용되는 작은 애니메이션 형태로 구현된다. 마이크로 인터랙션은 인터페이스를 더 직관적으로 인식할 수 있도록 하는 배려라고 할 수 있다. 디자인의 밋밋함을 극복할 수 있도록 애니메이션 형태로 구현되면서 인터페이스를 역동적으로 나타내 콘텐츠에 더 집중할 수 있게 만들어 주는 마이크로 인터랙션은 최근 화면에 애니메이션을 삽입하려는 시도와 함께 가장 많이 활용되고 있다.

4. 단순화된 인증
아마도 지금껏 로그인을 위해 아이디나 비밀번호 찾기를 시도해 보지 않은 사용자는 드물 것이다. 일정 기간이 지나면 비밀번호를 강제로 변경해야 하고, 일정 글자 이상의 비밀번호 등록, 특수문자 사용, 대소문자 혼용 등의 규칙이 부여되면서 더 이상 같은 비밀번호를 사용할 수 없게 되었고, 복잡해진 암호를 페이지마다 기억하는 일이 어려워졌다. 앞으로는 더 많은 장치와 서비스를 이용하면서 디지털 계정을 보유해야 하므로 비밀번호 없는 시스템은 사용자가 더 원활하게 작업을 할 수 있게 할 뿐만 아니라 보안 강화에도 도움이 될 것이다.

 

2023.04.06 - [UXUI 디자인] - UX 디자인 프로세스와 개발 방법

UX 디자인 프로세스와 개발 방법

2023.04.05 - [UXUI 디자인] - 모바일 앱의 종류

모바일 앱의 종류