티스토리 뷰

UI_UX Design/UI Design 개론

Ch01_4_UI/UX 디자인 최신트랜드

jsBae 2024. 10. 17. 10:11

강의 목표:

  • 최신 UI/UX 디자인 트렌드를 이해하고 적용할 수 있는 능력을 기른다.
  • 사례 연구를 통해 새로운 디자인 접근 방식을 분석한다.

1.맞춤형 일러스트레이션과 스토리텔링 : 언어적 한계를 넘으며, 콘텐츠의 일관성을 높여줌.

맞춤형 일러스트레이션:

  • 일반적인 스톡 이미지 대신, 브랜드의 아이덴티티에 맞는 독창적인 일러스트레이션을 사용하는 추세이다. 이러한 일러스트레이션은 브랜드의 개성을 강화하고, 기억에 남을 만한 시각적 경험을 제공한다.

스토리텔링을 활용한 디자인:

  • 사용자의 감정을 이끌어내고, 더 깊이 있는 사용자 경험을 제공하는 데 중점을 둔다.
  • 브랜드의 핵심 가치를 전달하면서도 사용자가 서비스나 제품에 더 몰입할 수 있도록 돕는다.
  • 사례: Apple의 제품 페이지에서 복잡한 기술 사양을 이야기 형식으로 설명하며, 사용자 경험을 개선하고 있다.

언어적 한계를 넘는 디자인:

  • 시각적 요소를 통해 다양한 언어와 문화권 사용자들이 동일한 경험을 할 수 있도록 함으로써 글로벌 사용자를 고려한 디자인이 강화되고 있다.
  • 이미지와 그래픽, 그리고 직관적인 인터페이스 요소들이 언어를 뛰어넘어 소통하는 수단으로 활용된다.
  • 사례: Airbnb는 맞춤형 일러스트와 스토리텔링을 통해 전 세계 사용자들이 쉽게 접근할 수 있는 경험을 제공하고 있다.

이러한 디자인은 UI/UX에서 감성적 연결과 글로벌 확장성을 동시에 고려하는 새로운 방향으로 자리 잡고 있다.

2.아이소메트릭 디자인

  • 아이소메트릭Isometric 디자인 : 2차원 요소로 3차원 객체를 그리는 방법
  • 넓이와 깊이, 높이 적용 – 이미지에 대한 인식의 향상 ->사용자 경험을 자연스럽게 유도
  • 예: 지도 애플리케이션에서 건물, 거리, 차량 등의 입체적인 묘사. 이 경우, 사용자는 2차원 평면 위에서 공간의 깊이와 위치를 자연스럽게 파악할 수 있다.
  • 사용자 경험 향상:
    • 이러한 입체적 표현은 사용자가 정보의 구조나 맥락을 보다 직관적으로 이해하게 돕는다. 이미지에 대한 인식이 향상됨에 따라, 사용자 경험도 자연스럽게 개선된다.
    • 예: 대시보드 디자인에서 아이소메트릭 차트를 사용하면, 데이터의 양과 흐름을 쉽게 시각화할 수 있다.
  • But 난발된 아이소메트릭 디자인은 오히려 시선이 분산되게 함. – 모든 디자인 요소의 적절한 사용이 정답.
    • 모든 디자인 요소에서 아이소메트릭 스타일을 사용하면, 오히려 시선이 분산되고 정보의 우선순위가 흐려질 수 있다. 이로 인해, 사용자 경험이 복잡해지고, 필요한 정보를 빠르게 찾기 어려워질 수 있다. 아이소메트릭 디자인을 사용하더라도, 디자인 요소 간의 균형을 맞추고 중요한 정보는 단순하고 명확하게 전달하는 것이 중요하다.

3.과감한 색상과 그레이디언트 사용

  • 공감각 효과: 색상과 그라디언트는 사용자에게 시각적으로 풍부한 경험을 제공하며, 공감각적인 반응을 유도할 수 있다.
  • 원근감과 현실감: 그라디언트는 2D 디자인에서도 원근감을 더해줌으로써 보다 현실적인 느낌을 제공한다.
  • 시선의 집중: 복잡한 화면에서 사용자 시선을 분산시키지 않고, 중요한 요소에 자연스럽게 집중할 수 있도록 도와준다.

4.3D 입체 디자인과 애니메이션

  • 사실적 표현: 3D 디자인을 통해 현실감 넘치는 시각적 요소들을 표현할 수 있다. 특히 복잡한 객체나 장면을 보다 구체적이고 실감 나게 묘사할 수 있다.
  • 동적 애니메이션: 3D 애니메이션을 통해 사용자에게 흥미를 유도하며, 동적 요소가 추가됨으로써 상호작용을 더욱 풍부하게 만든다. 예를 들어, 로딩 화면에서 애니메이션을 적용하면 사용자가 기다리는 동안의 경험을 더 즐겁게 할 수 있다.
  • 리퀴드 애니메이션: 5G 통신 기술의 발전으로 인해, 더 빠르고 부드러운 애니메이션이 가능해지면서 액체나 홀로그램처럼 복잡한 동적 요소를 더 자주 사용할 수 있게 되었다. 이러한 요소들은 사용자 경험을 한층 더 향상시키며, 시각적 몰입감을 제공하는 데 큰 역할을 한다
  • https://codepen.io/konstantindenerz/pen/qBMvXNK

5.큰 타이포그래피와 가변 폰트

  • 큰 타이포그래피와 가변 폰트는 최근 UI/UX 디자인에서 인기 있는 트렌드로 자리 잡고 있다. 이 두 가지 요소는 웹사이트와 애플리케이션의 시각적 매력을 강화하고, 사용자 경험을 더욱 향상시키는 중요한 도구로 사용된다.
  • 큰 타이포그래피:
    • 강력한 시각적 충격: 큰 글자는 주목을 끌며, 메시지를 강하게 전달하는 데 효과적이다. 헤드라인이나 중요한 정보에 큰 타이포그래피를 사용하면 사용자의 시선을 집중시킬 수 있다. 이는 브랜드 아이덴티티를 강조하거나, 중요한 콘텐츠를 빠르게 전달하고자 할 때 자주 사용된다.
    • 간결함과 가독성: 큰 글자를 사용하면 복잡한 정보를 단순화할 수 있으며, 읽기 쉽고 직관적인 인터페이스를 제공하는 데 도움이 된다.
    • 예: Apple과 같은 브랜드는 제품의 핵심 메시지를 강조하기 위해 웹사이트나 광고에서 큰 타이포그래피를 자주 사용한다.
  • 가변 폰트(Variable Fonts):
    • 동적인 사용자 맞춤형 경험: 가변 폰트는 하나의 폰트 파일로 다양한 두께, 너비, 기울기를 조정할 수 있는 기능을 제공한다. 이는 웹사이트 로딩 속도를 향상시키며, 폰트를 더 효율적으로 사용할 수 있도록 도와준다.
    • 적응형 디자인: 사용자의 디바이스, 화면 크기, 해상도에 따라 폰트의 스타일을 유연하게 변경할 수 있기 때문에, 반응형 웹 디자인에서 특히 유용하다.
    • 예시: Google Fonts에서 제공하는 가변 폰트들은 다양한 웹사이트에서 광범위하게 사용되고 있으며, 특히 성능 최적화와 유연성 면에서 좋은 평가를 받고 있다.

6.음성 사용자 인터페이스 : 음성 사용자 인터페이스 Voice user interface VUI

  • 음성 사용자 인터페이스(Voice User Interface, VUI)는 음성 명령을 통해 사용자가 기기나 애플리케이션과 상호작용하는 인터페이스를 의미한다. 이 기술은 스마트폰, 스마트 스피커, 차량 내 시스템 등에서 널리 사용되고 있으며, 최근 몇 년 동안 빠르게 발전하고 있다. 음성 인식을 통해 사용자는 텍스트 입력이나 터치 없이도 편리하게 기기를 제어할 수 있다.

VUI의 주요 특징:

  1. 핸즈프리 인터랙션: 사용자는 음성 명령만으로 기기를 제어할 수 있어 운전 중이거나 손이 자유롭지 않은 상황에서 매우 유용하다. 이를 통해 사용자 경험을 크게 향상시킬 수 있다.
  2. 더 적은 네비게이션:GUI(그래픽 사용자 인터페이스)보다 더 직관적인 상호작용이 가능하다. 사용자는 화면을 탐색할 필요 없이 음성 명령으로 원하는 작업을 빠르게 수행할 수 있다.
  3. 오류와 오인식 문제:아직 기술적인 제한으로 인해 음성 명령의 오류나 오인식 문제가 발생할 수 있다. 특히 복잡한 문맥이나 발음 차이로 인해 잘못된 인식을 할 가능성이 존재하며, 이로 인해 수정 및 삭제 등의 기능 개선이 필요하다.
  4. 인터넷 및 플랫폼 연결:VUI는 단일 기기에 국한되지 않고, 인터넷과 다양한 플랫폼을 통해 정보를 제공하거나 기기를 제어할 수 있다. 이는 스마트홈 시스템에서 특히 유용하며, 여러 디바이스가 연동되어 음성 명령을 실행할 수 있다.
  • 대표적인 VUI 적용 사례:
    • Amazon Alexa, Google Assistant, Apple Siri와 같은 가상 비서는 일상적인 작업(날씨 확인, 음악 재생, 일정 관리 등)을 음성으로 처리할 수 있는 대표적인 VUI 플랫폼이다.
    • 자동차 내 음성 제어 시스템: 운전 중에 손을 사용하지 않고도 내비게이션, 통화, 음악 등을 제어할 수 있어 안전성과 편리성을 높인다.

UI/UX 트렌드

제스처와 엄지손가락 친화적 인터페이스

  • 화면 공간을 최대한 확보하는 것이 중요:제스처를 기반 인터페이스
  • 물리적 버튼인 홈 버튼 삭제
  • 제스처 : 엄지손가락 영역이 미치는 부분이 가장 중요
    • 물리적 버튼 삭제: 최근 많은 모바일 기기에서 홈 버튼과 같은 물리적 버튼이 사라지고, 화면 상에서의 제스처로 대체되고 있다. 예를 들어, 아이폰에서는 홈 버튼 대신 위로 스와이프하는 제스처로 홈 화면으로 이동한다.
    • 화면 공간의 효율적 사용: 제스처를 사용함으로써 화면의 많은 부분을 정보나 콘텐츠를 표시하는 데 사용할 수 있어, 더 넓은 공간을 확보할 수 있다.
    • 사용성 고려: 제스처는 직관적이지만, 과도하게 복잡한 제스처나 비일관적인 제스처는 사용자가 학습해야 할 부담을 증가시킬 수 있다. 따라서, 제스처 디자인에서는 일관성과 직관성이 중요하다.

마이크로 인터랙션

  • 마이크로 인터랙션(Micro-interaction)은 UI/UX 디자인에서 작은 상호작용을 의미하며, 사용자가 인터페이스와 상호작용할 때 발생하는 세밀한 이벤트들을 말한다. 이 상호작용은 보통 한 가지 특정 목적을 가지고 있으며, 사용자 경험을 더 직관적이고 매끄럽게 만들어준다. 마이크로 인터랙션은 사용자에게 피드백을 제공하거나, 현재 시스템 상태를 보여주는 역할을 한다.
  • 마이크로 인터랙션Micro-interaction은 놓치기 쉬운 사소한 부분에서 한 가지 목적을 위한 이벤트를 세심하게 구현하는 것
  • 마이크로 인터랙션의 주요 요소:
    • 비밀번호 입력: 사용자가 비밀번호를 입력할 때 점진적으로 나타나는 텍스트 필드 효과나 잘못된 입력 시 진동 효과 등이 여기에 해당한다.
    • 스와이프(Swipe): 스와이프 동작을 할 때 애니메이션이나 화면 전환 효과는 마이크로 인터랙션의 대표적인 예다. 사용자는 작은 피드백을 통해 동작이 정상적으로 이루어졌음을 즉각적으로 알 수 있다.
    • 애니메이션: 버튼을 클릭했을 때의 시각적 변화나 애니메이션도 마이크로 인터랙션의 일종으로, 사용자가 클릭한 것을 명확하게 인식할 수 있도록 돕는다.
    • 현재 시스템 상태: 로딩 중이라는 것을 보여주는 애니메이션, 버튼의 색 변화 등은 시스템이 현재 처리 중이라는 정보를 사용자에게 제공한다.
    • Call to Action (CtA): 중요한 동작을 유도하는 버튼이나 링크는 마이크로 인터랙션을 통해 강조되며, 사용자의 눈길을 사로잡는다.
  • 예제
    • Facebook - 사용자가 '좋아요'를 클릭할 때마다 다양한 감정을 표현하는 애니메이션이 함께 재생된다. 이 애니메이션은 각 감정에 따라 미묘한 차이를 두어 사용자 경험을 극대화한다.
    • Apple iPhone - 가상 키보드를 사용할 때 작은 진동으로 사용자에게 피드백을 주며, 이를 통해 사용자가 입력이 제대로 되었음을 즉각적으로 인지할 수 있다.

단순화된 인증

  • 단순화된 인증(Simplified Authentication)은 최근 UI/UX 트렌드 중 하나로, 사용자에게 더 편리하고 빠른 인증 과정을 제공하는 데 중점을 둔다. 이 트렌드는 복잡한 비밀번호나 여러 단계의 보안 인증을 줄이면서도 보안을 유지할 수 있는 방식을 모색한다. 이를 통해 사용자는 간단한 방법으로 시스템에 접근할 수 있고, 개발자는 더 나은 사용자 경험을 제공할 수 있다.
  • 단순화된 인증의 대표적인 예시:
  1. 비밀번호 없는 로그인 (Passwordless Login):
    • 예시: Slack, Microsoft, Google 등에서 제공하는 비밀번호 없는 로그인 방식은, 이메일 또는 SMS로 전송된 일회용 코드(OTP)를 통해 사용자가 로그인할 수 있게 한다. 이 방법은 사용자가 복잡한 비밀번호를 기억할 필요 없이 간단히 로그인할 수 있도록 도와준다.
    • 장점: 사용자의 불편함을 줄이고, 비밀번호 도난으로 인한 보안 문제를 예방할 수 있다.
  2. 생체 인식 인증 (Biometric Authentication):
    • 예시: Apple의 Face ID, Touch ID 및 Android의 지문 인식 기술은 비밀번호를 입력하지 않고도 기기나 서비스에 로그인할 수 있도록 한다.
    • 장점: 빠르고 직관적이며, 사용자의 고유한 생체 데이터를 활용해 높은 수준의 보안을 제공한다.
  3. 소셜 로그인 (Social Login):
    • 예시: Facebook, Google 또는 Apple 계정을 사용하여 여러 웹사이트나 앱에 로그인하는 방식은 단순한 클릭 몇 번으로 사용자를 인증할 수 있게 해준다.
    • 장점: 새로운 계정을 만들 필요 없이 이미 사용하는 소셜 미디어 계정으로 빠르게 로그인할 수 있다.
  4. 싱글 사인온(SSO, Single Sign-On):
    • 예시: 기업에서 자주 사용하는 SSO는 사용자가 한 번의 로그인만으로 여러 애플리케이션이나 서비스를 이용할 수 있게 한다. Google Workspace나 Microsoft Azure Active Directory와 같은 서비스에서 주로 제공된다.
    • 장점: 기업 내 여러 시스템을 하나의 인증으로 접근할 수 있어 편리하며, 보안 관리도 더 쉬워진다.
  • 단순화된 인증의 장점:
    • 사용자 편의성: 복잡한 비밀번호를 기억하거나 여러 단계를 거칠 필요가 없어 사용자 경험을 크게 개선할 수 있다.
    • 보안 강화: 비밀번호를 줄이거나 없애면서, 보안을 유지하거나 강화할 수 있다. 생체 인식이나 OTP는 비밀번호 기반 인증보다 보안성이 높다.
    • 빠른 접근성: 로그인 과정이 간단해져 사용자가 더 빠르게 원하는 서비스나 애플리케이션을 사용할 수 있다.
    • 이러한 트렌드는 특히 모바일 기기나 스마트 디바이스에서 매우 중요한 역할

기타 트랜드

다크 모드의 인기

  • 다크 모드의 장점: 배터리 절약, 눈의 피로 감소
  • 사용 예시: iOS, Android, Google Apps 등에서의 다크 모드 적용

뉴모피즘 (Neumorphism) :

  • 뉴모피즘은 스큐어모피즘(Skeuomorphism)과 플랫 디자인(Flat Design)의 혼합된 형태로, 인터페이스 요소가 배경에서 부드럽게 튀어나오거나 함몰된 것처럼 보이는 효과를 준다.
  • ‘부드러운 입체감(soft UI)’ : 3D 효과와 그림자를 사용한 부드러운 시각적 디자인( 음영(Shadow)과 하이라이트(Highlight))
  • 플랫 디자인에서 뉴모피즘으로의 트렌드 이동
  • 예: Apple iOS에서 뉴모피즘 스타일의 일부 요소 적용
  • 장단점: 시각적 매력 대 접근성 문제

글래스모피즘의 시작 – macOS Big Sur (2020)

글래스모피즘이 공식적으로 확산된 계기는 Apple의 macOS Big Sur (2020년 출시)이다. 이 버전에서 Apple은 시스템 전반에 걸쳐 다음과 같은 시각적 변화들을 도입하였다. “Glassmorphism”이라는 용어는 2020년 말 디자이너 커뮤니티인 Dribbble과 Figma Community를 중심으로 급속히 확산되었다. 특히 Michal Malewicz(유럽 UX 디자이너)이 글래스모피즘의 시각 원리를 정리한 포스트 「Glassmorphism in User Interfaces」를 발표하면서 하나의 디자인 트렌드로 자리 잡았다.

  • 반투명 유리 패널(Translucent Frosted Glass Panels): 배경이 희미하게 비치는 카드나 창의 효과.
  • 강한 블러(blur) + 투명도 조절(opacity): 사용자가 레이어의 깊이와 계층을 직관적으로 인식할 수 있도록 함.
  • 배경색과의 상호작용: 시스템 테마(라이트/다크 모드)에 따라 패널의 투명도와 색상이 유동적으로 변함.

이후 Microsoft Windows 11(2021)에서도 비슷한 접근을 채택하였다. ‘Acrylic Design’ 또는 ‘Mica Material’이라는 이름으로, 윈도우 창과 메뉴에서 반투명 유리 질감을 적극적으로 도입함으로써 글래스모피즘의 대중화를 촉진하였다.

그는 글래스모피즘을 다음 네 가지 핵심 요소로 정의하였다:

  1. 투명도 (Transparency) – 유리처럼 반투명하게 처리된 배경.
  2. 블러 효과 (Background Blur) – 뒤의 색상과 형태를 흐릿하게 표현.
  3. 선명한 테두리 (Subtle Border) – 유리판의 가장자리를 암시하는 얇은 하이라이트.
  4. 계층적 깊이감 (Depth through Layers) – 여러 투명한 카드가 겹쳐지며 공간감을 형성.

728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
반응형