brunch

라이킷 275 댓글 6

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 티그리스 디자인팀 Jan 03. 2023

2023 UI/UX 디자인 트렌드

올해를 시작하며 다시 한번 짚어보는 디자인 흐름

A. 사용성을 위한 UX 기획

1) 마이크로카피와 UX라이팅

'토스' 앱 실행화면

마이크로카피의 사전적 정의는 '사용자의 인터페이스에서 사용자가 취하는 행동에 직접 관련된 단어나 문구'라고 합니다. 사용자가 서비스를 이용하며 받을 수 있는 불쾌감을 최소화하고 호감도를 높이기 위해서는 버튼의 텍스트 하나까지도 신중하게 고려해야 합니다. 또한 브랜딩 관점에서도 모든 카피에 브랜드 아이덴티티가 일관되게 녹아들어야만 합니다. 마이크로카피는 서비스 곳곳에 자사의 브랜딩을 녹여낼 수 있는 디테일하고 유용한 도구입니다. 실무에서 UI/UX를 디자인하다 보면 라이팅이 얼마나 중요한 것인지 절실하게 깨달을 수 있습니다. 토스 같은 기업에서 UX라이터 직군을 따로 세팅하며 그 중요성이 더욱 널리 알려지기 시작했습니다.

2) 섬세한 마이크로 인터랙션

이미지 출처 - https://userguiding.com/blog/microinteraction/

마이크로 인터랙션이란, 사용자의 행동에 따라 피드백되는 작은 요소를 뜻합니다. 이는 사용자에게 서비스 이용이 즐거운 경험으로 느껴지게 합니다. 사소한 요소로 생각될 수 있으나, 사용자가 반복되는 행동에서 즐거움을 찾을 수 있는 중요한 역할을 합니다. 최근에는 LottieFiles 등의 라이브러리 덕분에 UX/UI디자이너가 마이크로 인터랙션을 디자인하기 더 쉬워졌습니다.

B. UI 디자인과 비주얼

1) 큰 폰트 크기와 몰입감 있는 경험

https://www.apple.com/kr/

애플, 마이크로소프트, 삼성, 테슬라, 루이뷔통 등 브랜드 가치가 가장 높은 기업의 랜딩페이지는 좋은 UI 트렌드 레퍼런스입니다. 위 사이트들은 크고 두꺼운 폰트를 사용해 높은 몰입감을 선사합니다. H1타이틀뿐 아니라, H2, H3, 심지어 본문에까지도 굵고 큼직한 폰트를 활용해 간결하고 견고한 느낌을 주고 가독성을 확보합니다. 많은 기업 웹사이트가 한 번에 보이는 정보를 최소화하고 크고 굵은 폰트를 사용하는 방향으로 리뉴얼되고 있는 추세입니다. 많은 정보를 동시에 노출시켜 몰입을 방해하는 디자인은 더욱 지양하는 게 좋습니다. 이는 미니멀리즘과도 연관성이 높습니다. '간편하고, 유익하며, 단순한' 디자인은 점점 더 트렌드로 자리 잡고 있습니다.

2) 글래스모피즘

Windows 11에 적용된 글래스모피즘 UI

글래스모피즘 표현은 반투명 재질을 사용하여 다른 요소 간의 시각적 계층을 표현하는 그래픽 스타일입니다. 3D 그래픽, 아이콘 등 비주얼 요소보다도 UI에서 주로 사용되는 명칭인데요, 특징으로는 아래 레이어가 은은하게 비쳐 보이는 투명도와 약간 밝은 경계선, 희미한 내부 그림자 등이 있습니다. 대표적으로 2020년 11월 출시된 Mac OS인 빅서(Big Sur)부터 시스템 UI스타일로 채택되고 Windows 11에서도 차용하며 인기를 끌고 있습니다. 사실 글래스모피즘은 과거에도 윈도우 비스타(2006)나 iOS 7(2013)등에서 이미 등장한 적 있습니다. 당시에는 큰 호평을 받지 못했으나, 최근의 크고 굵은 폰트 스타일 및 미니멀리즘 디자인과 좋은 조합을 보여주며 트렌드로 자리 잡았습니다. Figma의 'Background Blur' 효과 등을 통해 UI디자이너가 시안에 구현하기도 매우 간편해졌습니다. 글래스모피즘 UI와 함께 비슷한 유리 재질 스타일의 3D그래픽 및 애니메이션도 유행하고 있습니다.

3) 클레이모피즘 3D

https://dribbble.com/shots/17333620-Claymorphism-Mobile-App

클레이모피즘은 부드러운 점토 느낌의 디자인 표현기법입니다. 일반적으로 3D 그래픽에 많이 활용되는 모습인데요, 2023년에도 더 많이 유행할 것으로 보입니다. 무광~반광에 가까운 하이라이트와 부드러운 곡선 형태가 특징입니다. 3D비주얼이나 이를 이용한 애니메이션, 혹은 UI목업이미지 등에 적극적으로 활용되고 있습니다. UI디자인에도 레이어의 내ㆍ외부 그림자 등을 이용해 접목이 시도되고 있으나 아직 실제로 구현된 스타일을 주변에서 찾아보기는 쉽지 않습니다.

C. 개인화와 사용자 맞춤 서비스

1) 라이트/다크모드 개인화

https://dribbble.com/shots/17361704-Light-Dark-Mode-Switch

어두운 환경에서 서비스를 사용하거나 시각 장애가 있는 사용자의 경우, 다크모드 UI를 유용하게 사용할 수 있습니다. 뿐만 아니라 일반 사용자들도 시각 피로도 감소를 위해 다크모드를 사용하는 사례가 늘어나고 있습니다. 그러나 라이트모드의 가독성이 다크모드에 비해 훨씬 우수하며, 특히 밝은 환경에서는 그 차이가 더욱 두드러지기 때문에 여전히 라이트모드를 선호하는 사용자도 많습니다. 때문에 사용환경 변화에 대한 대응과 개인화를 위해 화면 모드를 전환할 수 있는 기능이 더욱 필수적으로 요구되고 있습니다.

2) 네이티브 데스크톱 앱

https://dribbble.com/shots/19908225-Task-Management-Dashboard

피그마나 슬랙과 같은 많은 차세대 서비스는 네이티브 앱을 설치하지 않아도 브라우저에서 이용할 수 있도록 개발되었습니다. 하지만 연구에 따르면, 사용자들은 데스크톱 방식을 더 편하고 안전하게 느낀다고 합니다. 네이티브 앱은 사용의 속도나 기능면에 있어서 안정성이 높습니다. 또한 브라우저를 거치지 않고 데스크톱에서 직접 알림을 받고 대응할 수 있습니다. 반면 브라우저의 수많은 탭은 사용자의 주의를 산만하게 만들며, 브라우저를 통한 알람도 효율성이 떨어집니다.

D. 앞서 나가는 서비스 기획하기

1) 인클루시브 디자인

다양한 사용자를 포용한다는 의미로 유니버설 디자인과 유사합니다. 다만 정상인을 중심으로 생각하며 정보 취약자의 접근성을 고려하는 유니버셜 디자인과는 달리, 본질적으로 모든 사람의 편리성을 생각한다는 의미에서 인클루시브 디자인이라는 단어를 사용하는 추세입니다. 또한 단순히 접근성을 고려한 서비스/프로덕트 디자인 방법뿐 아니라, 초기 기획단계에서부터 정보 접근에 취약한 소수파를 참여시킨다는 의미로도 사용됩니다. 고령자, 장애인, 외국인 등 취약계층의 참여를 통해 잠재적 요구를 발견하고 기성개념을 타파하는 서비스를 개발한다는 개념입니다.

2) 사용자 경험 현지화

https://www.behance.net/gallery/124980493/Fnar-App-Identity-Interface?tracking_source=search_project

많은 대형 브랜드들이 더 많은 사용자를 확보하기 위해 해외로 서비스를 진출합니다. 그러나 단순히 기존 서비스에서 언어만 바꾼다면 좋은 서비스가 될 수 없습니다. 지역적, 문화적 특성과 시장 환경 등 여러 가지 요인에 따라 서비스의 특성이 달라질 수 있습니다. 예를 들어 아랍 문화권에서는 오른쪽에서 왼쪽으로 글을 읽는 R to L 규칙이 적용됩니다. UX기획 시 텍스트가 오른쪽에서 시작할 수 있다는 가정으로 모든 레이아웃을 설계해야 합니다. 또한 여성 이미지와 같은 인물 사진 사용에 있어서 문화적 요소 등을 신중하게 고려해야 합니다. 중국 출시 경우에는 사용 불가한 해외 서비스 등 검열에 대한 제한사항을 모두 검토해야 합니다. 지원 언어에 따라서 CTA 같은 컴포넌트 설계 시에도 문자 압축률에 따른 텍스트 길이까지 전부 고려해야 합니다.

마치며

전반적인 방향성은 사용자가 더 쉽고 편하게, 심기를 거스르지 않고 서비스를 이용할 수 있도록 하는 것입니다. 미니멀리즘을 기반으로 가장 필요한 정보만을 보여주고, 큼직한 폰트로 눈을 사로잡아 몰입 경험을 극대화합니다. 초기 기획단계부터 더 쉬운 서비스를 고민하며, 커스텀 스크린 모드 기능을 지원하고 작은 카피까지도 놓치지 않는 섬세함이 필요합니다.

팬데믹이 지속되며 더 많은 서비스를 경험해본 사용자들은 기존보다 더 쉽게 질려하고, 거슬리는 요소가 반복되면 더 큰 불쾌감을 느낍니다. 때문에 기획부터 디자인까지 모든 요소를 더 신중하게 고민해야만 사용자를 사로잡는 좋은 서비스가 만들어질 수 있습니다.