UI_UX Design/UI Design 개론

ch04_1_모바일 UI/UX 디자인의 종류

jsBae 2024. 10. 29. 18:02

학습목표

- 모바일 디자인 트렌드 변화와 그 특징을 알아본다.

모바일 UI/UX 디자인의 개요

모바일 디자인은 제한된 화면 크기와 터치 중심의 인터랙션 환경에서 사용자 경험을 최적화하기 위한 시각적‧기능적 설계를 의미한다. 데스크톱 환경과 달리 모바일은 손가락 제스처, 가시성(Visibility), 탭과 스와이프 중심의 흐름, 즉시성(Instant feedback) 등이 중요한 요소로 작용한다. 따라서 모바일 UI/UX 디자인은 단순히 화면을 축소한 버전이 아니라, 사용 맥락(Context) 과 사용자 행동 패턴에 기반한 별도의 접근이 필요하다.

모바일 디자인 트렌드의 변화

 

iOS가 점차 머티리얼 디자인을 받아들이는 추세
플랫 + 머티리어 디자인은 각각 장단점이 있으므로 유동적으로 사용하는 것이 바람직

스큐어모픽 디자인(Skeuomorphic Design)

  • 현실의 객체를 디지털로 구현한 사실적이고 3차원적인 디자인
    -> 익숙한 소재를 모방해 사용자의 친숙함과 편안함
  • 아날로그감성을 디지털로 재현 (종이질감, 카메란 렌즈효과)
  • iOS7이후 사라짐
  • 초창기 애플에서는 스큐어모픽 디자인을 활용해 스마트폰에 현실감을 적용(질감, 색감, 빛, 엠보싱 등)
    -> 사용자는 터치스크린 환경에 빠르고 친숙하게 적응
  • 다양한 기기에서 일관된 느낌을 주기 어려움
    -> 콘텐츠에 집중하는데 효과적이지 않음
  • 그래픽 요소의 과다 사용으로 인해 비용적인 측면에서도 효율적이지 않다.

플랫 디자인(Flat Design)

 
•입체적이고 복잡한 그래픽 요소를 배제하고 단순한 구성과 컬러를 통해 사용자가 직관적으로 인식할 수 있게 하는 2차원적인 평면 방식 디자인.
•Window8 메트로 UI는 사각형 타일
•레이아웃은 그리드를 기반으로 규칙적으로 구성
•그림자,빛,질감,심도 배제
•Bitmap -> Vector 활용 (다양한  디바이스 활용)
•RWP(Responsive web Design)발전
 

•장점 : 단순한 면 분할, 대비가 높은 컬러, 입체적 요소를 배제한 아이콘, 가독성 높은 타이포그래피, 손쉬운 반응형 디자인 전환, 빠른 로딩 등 => 기능 중심

•단점 : 

  • 그림자와 깊이감이 부족해 직관적으로 형태를 알아보기 어려울 수 있음.
  • 평면 적이기 때문에 어떤 요소가 중요하며 요소에 어떤 기능이 있는지 알기 어려움
  • 클릭 이 가능한 영역의 구분도 모호.
  • 지나친 단순화로 인해 중요한 기능을 놓치거나 서비스를 이해하지 못하게 될 수 있음
  • 레이아웃, 폰트, 컬러로 독창성을 표현 - but 한계성 (유사한 디자인 양상)
  • 이 후 blur, 그라디언트로 입체감과 우선 순위 표현-> 플랫2.0

머티리얼 디자인(Material Design)

 

•물질의 질감이나 광원 효과, 그림자 효과 등을 통해 디자인에 깊이감을 더한 것

•디자인보다는 단순하고 편리한 기술 개발에 주력했던 구글이 디자인 중심 으로 개편되면서 발표한 것이다

 

 

•머티리얼 디자인은 3차원의 Z축을 이용해 표면에 높낮이를 구현. 

•요소 간의 우선순위를 그림자를 통해 나타내므로 정보 구조를 표현하기에 적합.

•머티리얼 디자인은 플랫 디자인의 장점인 단순함을 유지하면서 스큐어모피즘의 시각적 다양성을 추가해 사용성을 더 끌어올린다.

•초기 iOS interface : Bas ording의 관성 스크롤 (Inertial Scrolling)

애플의 초기 iOS 인터페이스는 단순히 시각적 요소를 아름답게 배치하는 수준을 넘어, 현실 세계의 물리적 감각을 디지털 환경에 이식한 혁신적인 설계로 주목받았다. 그 중심에는 Bas Ording이 개발한 ‘관성 스크롤(Inertial Scrolling)’ 기술이 있다. 이러한 물리적 반응은 단순한 시각 효과를 넘어, 사용자가 화면을 ‘읽고, 탐색하며, 조작하는 행위’ 를 자연스럽고 직관적으로 느끼게 하는 중요한 UX 요소가 되었다.

  • 관성 스크롤은 현실 세계의 물리적 원리를 UI에 반영하여 사용자가 보다 직관적으로 화면을 읽고 탐색할 수 있게 했다.
  • 탄성이 느껴지는 관성 스크롤 – 스크롤이 관성이 붙었던 것처럼 점점 줄어드는 속도로 구현- UI에 현실적 요소 반영 - 모바일 환경에의 ‘읽기＇를 가능. 이는 실제 물체가 마찰력에 의해 속도가 줄어드는 현상과 유사하게 느껴져, 사용자에게 ‘손으로 조작하는 듯한 감각적인 경험’ 을 제공하였다.
  • 지니 효과(Genie Effect): 시각적 은유를 통한 현실감 확장  
    • 맥 OS에서 창을 최소화하면 dock으로 빨려 들어가는 지니 효과
    • 이는 단순히 그래픽적 장식이 아니라, 사용자가 ‘현재 행동이 어떤 결과를 낳는가’ 를 즉시 이해할 수 있도록 돕는 피드백(Feedback) 기능을 한다. 즉, 시각적 은유(Visual Metaphor)를 통해 디지털 행위의 결과를 현실적인 감각으로 전달하는 것이다

•뉴모피즘(Neumorphism)

  • 빛과 그림자로 사실적, 미래적인 특징
  • 배경과 동일한 색상 톤의 미묘한 그림자와 하이라이트로 입체감을 표현한다.
  • 보다 더 촉각적이다.(행동유도성:affordance를 높인다.)
  • 시각적 위계에 저촉
  • https://dribbble.com/ 플랫폼 사용한 디자이너 Alex Plyuto가 뉴모피즘 디자인 스타일을 대중화하기 시작한 것으로 알려져 있다.

728x90
반응형