웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
구글·애플·마이크로소프트 디자인으로 살펴보는 모바일 UI - Mobile UI
Posted by kimdirector | 2015.10.02 | Hit : 4827
구글 머티리얼 애플 플랫 마이크로소프트 모바일 UI 디자인
목록보기이전보기

모바일 UI와 패러다임
 
모바일 UI 디자인 트렌드는 국가나 지역에 관계없이 가장 많은 사람들이 사용하는 구글플레이, 유튜브 등의 앱이 선도한다. 그리고 스마트폰과 운영체제를 개발하는 애플과 구글에서 모바일 UI를 이끌어간다. 많은 사람들이 사용하기 때문에 다수에게 익숙한 모바일 UI가 되기도 하고 때로는 기업에서 새로운 패러다임을 보여주고 사용자들을 따르게 만든다. 스마트폰 UI 트렌드를 이끌어가는 안드로이드, 애플 iOS, 윈도우 8의 디자인 특징과 2015년 모바일 앱 UI 디자인 트렌드를 알아보자.



구글의 머터리얼 UI와 애플의 플랫 UI

모바일 앱의 운영체제를 따라간다. 모바일 UI는 구글의 머터리얼(Material) UI 디자인과 애플의 플랫(Flat) UI 디자인으로 구분된다. 마이크로소프트도 윈도우8로 업데이트하면서 모바일과 PC의 인터페이스를 일치시키려는 시도를 했다.
 
최근의 모바일 앱 UI의 트렌드를 이해하려면 우선 메트로 UI와 메타포 UI, 머터리얼 UI의 개념부터 이해해야 한다. 메트로 UI와 메타포 UI는 각각의 특징과 장단점이 다르기 때문에 어떤 UI가 좋다고 단정적으로 말할 수는 없다. 사용자 입장에서는 모바일 UI를 선택할 수는 없지만 앱을 개발한다면 운영체제의 디자인 특징과 유행에 맞는 형태를 선택해서 개발해야 사용자들이 편안하고 익숙하게 사용할 수 있도록 해야 한다.




구글 아이콘 팩 750개 무료 배포

구글은 2014년 10월, 구글의 새로운 디자인 컨셉트에 맞는 아이콘 팩을 무료로 배포했다. 구글에서 배포한 아이콘 팩에는 750개의 아이콘이 들어있다. 이 아이콘은 저작권에 구애받지 않고 인터넷에서 다운받아서 누구나 사용할 수 있다. 구글의 아이콘 팩을 사용하면 모바일 앱 UI를 개발하는데 큰 부담을 덜 수 있다. 구글 사용자라면 이미 구글 아이콘에 익숙하기 때문에 사용자경험에 관한 문제를 해결할 수 있다.



애플 '매타포 UI'로 사용성 높여

애플의 iOS는 ‘메타포 UI’로 화면을 구성했다. 메타포 UI는 실물을 단순화한 형태의 UI다. UI에 메타포를 사용하면 오프라인에서 익숙한 경험을 그대로 온라인에 옮겨 놓을 수 있어서 사용자는 새로운 UI에 적응하기 위해서 학습할 필요가 없다. 사용자경험 측면에서는 오프라인의 느낌을 모바일에서도 느끼기 때문에 심리적으로도 안정감을 줄 수 있다. 애플의 iOS UI를 ‘스큐어모피즘’이라는 말로 설명하기도 한다.

Skeuomorphism 디자인을 정의하면 원래의 구조에서 꼭 필요한 장식적인 요소들을 그대로 유지한 상태에서 새로운 것을 받아들이는 방식이다. iOS7에서 iOS8로 업그레이드되면서 디지털 스큐어모피즘은 리얼 라이프 메타포(Real-life metaphor)와 미니멀리즘, 플랫 UI 디자인이이 결합된 형태로 나타났다. 리얼 라이프 메타포는 실제 세상에 존재하는 모습과 형태를 그대로 재현하는 형식의 디자인이다.



마이크로소프트 윈도우8에 적용된 메트로 UI

마이크로소프트는 모바일 기기의 UI와 PC의 UI에 공통적으로 적용할 수 있는 윈도우8을 시장에 내놓으면서 새롭게 바뀐 UI를 ‘메트로 UI’라고 했다. 낯선 인산을 주는 윈도우8의 인터페이스는 경계선 없이 면으로만 이루어진 정사각형과 직사각형으로만 구성되어 있다. 마이크로소프트는 모바일 기기에도 마찬가지로 타이포그래피와 면분할로 메뉴를 구성했다. 윈도우8의 UI를 ‘Authentically digital’ 디자인이라는 말로 표현한다. 이전 버전의 윈도우 메뉴와 비교해서 시각적으로 단순하게 표현한 것이 특징이다.

원문 : 네이버 매거진캐스트 > 월간 APP (발행 2015년 6월호)
 
Posted by kimdirector | 2015.10.02 | Hit : 4827
Origin http://navercast.naver.com/magazine_contents.nhn?rid=2598&contents_id=91448
Tags 구글 머티리얼 애플 플랫 마이크로소프트 모바일 UI 디자인
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=468

COMMENT
Commented by kimdirector
2015.10.02 12:01:29 X
3대 모바일 UI에 대한 기본적인 내용을 정리한 정보입니다. 개념정도는 알고 넘어가는 것도 좋을 듯 합니다.
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
기획 모바일 표준화 자바스크립트 런던 리뉴얼 소모품 디자인 웹디자인 레이어 아이패드 폰트 스타일 로고 웹아이덴티티 CIP 크롬 Mockup 실수 웹사이트 보안 제안서 BIP 로고디자인 홈페이지 온라인광고 플랫폼 솔루션 모바일 Odinicon 아이콘 SNS 컨텐츠 기업 웹사이트 경쟁력 솔루션 웹디자인 통합 소프트웨어 매거진 리더