웹을 통해 새로운 창조를 꿈꾸는 인간 - 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
Mobile Life
HOME WEBDESK Mobile Life
UI환경의 변화, 입체에서 평면으로 플랫UI가 주목 받는 이유?
Posted by kimdirector | 2013.07.04 | Hit : 3162
UI 플랫UI 플랫디자인 모바일 웹 사용자 인터페이스 스큐어모피즘 디자인 소프트웨어 GUI 평면 디자인
목록보기이전보기
최근 웹 뿐만 아니라 모바일 전반을 아우르며 디지털 디바이스의 사용자환경(UI : User Interface) 디자인 패러다임이 새롭게 변화하고 있습니다. 사실적인 3차원 인터페이스 디자인에서 심플한 2차원적 인터페이스, 플랫 디자인(flat design) 형태로 급변하며 크게 주목 받고 있는데요. 이러한 UI환경 변화의 이유를 한번 살펴 보겠습니다.
 
지난 몇 년 동안 스큐어모피즘(실제로 존재하는 오브젝트의 특징을 소프트웨어 디자인에 응용하는 스큐어모픽 디자인 경향)은 현대적이고 사용자 중심의 디자인 특징을 보였습니다. 이러한 스큐어모픽 디자인은 매킨토시를 통해 컴퓨터 제품 초기부터 GUI(Graphic User Interface)로 적용하여 애플 소프트웨어에서 애용되어 왔는데요. 일례로, 나무 책장과 흡사한 디자인의 뉴스가판대 앱과 문구점에서 쉽게 접할 수 있는 노란색 노트 느낌을 그대로 적용한 메모 앱을 들 수 있습니다.
(*스큐어모피즘(skeuomorphism): 그리스어로 skeuo는 도구, morphe는 형태를 의미하는 것으로 '원래 도구의 형태를 그대로 따라가는 양식' 정도로 풀이됩니다)

 
 
<스큐어모픽 디자인 사례>
 
스큐어모픽 디자인의 장점은 아날로그적 사용감을 그대로 연결시켜 익숙함을 줌과 동시에 새로운 UI 환경에 대한 낯섦을 경감시켜 주며, 사용자에게 시각적으로 쉽게 어필할 수 있다는 것입니다. 이러한 점이 특별한 매뉴얼 없이도 누구나 쉽게 사용할 수 있도록 하는 애플 제품의 목표와 부합하였고 이에 스큐어모픽 디자인이 채택되었습니다. 이후, 이 디자인은 애플 고유 아이덴티티가 될 만큼 그래픽 철학으로 자리잡았는데요. 그런 까닭에 대다수의 사람들이 이 디자인 형식이 쉽게 바뀌지 않고 진화할 것으로 전망했지만, 애플 내부에서도 과다한 정보, 실질적으로는 사용성을 저해하고 오버 디자인이 적용된 느낌이 든다는 의견처럼 일부 부정적인 목소리가 있기도 했습니다.
 
플랫UI 적용, 급진적 변화를 보인 애플
 

출처: www.creativebloq.com
 
이처럼 디지털 분야에서 스큐어모픽 디자인을 선도하며 고유 아이덴티티처럼 고수해 온 애플도 이제 플랫 디자인으로 급진적 변화를 시작했는데요. 지난 6월 11일 개최된 WWDC 2013에서 OS X와 iOS 7 발표를 통해 애플의 GUI(Graphic User Interface) 디자인이 앞으로 어떤 방향으로 나아갈 지 명확하게 보여주었다고 할 수 있습니다.
 
 
 
 
2차원적인 평면 디자인이 적용된 플랫UI는 애플보다 다소 특성상 차이는 있지만 구글과 MS가 한발 앞서 서로 주도하려는 노력을 기울여 왔습니다. MS는 타이포그래피 기반의 디자인 언어인 윈도우 8의 모던 UI를 통해서 선보였으며 구글은 2011년부터 시작한 구글 사이언스 페어 사이트를 통해 처음 선보이며 점진적으로 Gmail, 구글 드라이브, 캘린더 등 구글 웹 서비스와 모바일 앱 스토어인 구글 플레이 스토어 등을 통해 플랫디자인과 UI를 본격적으로 주도했다고 볼 수 있습니다.
 
이러한 시점에서 애플이 고유 아이덴티티와도 같았던 스큐어모픽 디자인을 과감히 탈피하고 플랫 디자인이 적용된 플랫UI 환경을 선택한 것은 디지털 환경과 사용자 감성 변화를 감안한 인간-컴퓨터 상호작용(HCI :  Human-Computer Interaction) 측면을 심사숙고 하지 않았나 생각됩니다.
 
급변하는 디지털 환경 속에서 디지털 디바이스 다양성과 복잡성의 비중이 날로 커지고 있는데요.  이러한 환경에 빠르고 직관적이며, 효율적으로 대응하기 위해 인간 중심의 인간-컴퓨터간 상호작용을 이룰 수 있는 최적의 인터페이스 환경을 선택할 수밖에 없었을 것입니다. 다시 말해, 애플은 반응형 웹(RWD)에 유연하고 정제된 단순함을 통해 성능 대비 더욱 탁월한 퍼포먼스를 발휘할 수 있는 사용자 인터페이스는 바로 평면의 플랫UI란 결론을 내리게 된 것일지도 모르지요.
 
늘 혁신을 추구해 온 애플이 향후 얼만큼 진화된 플랫UI 표본을 보여줄지는 쉽게 단언할 수 없지만, 지금까지 보여준 역량에 빗대어 볼 때 적지 않은 기대감을 갖게 하는 점도 간과할 수 없는데요. 구글 중심의 안드로이드 OS 진영에서 보여주고 있는 플랫UI의 진일보도 매우 빠른 터라 향후 플랫UI의 진화는 나날이 가속화 될 것으로 보입니다.

급부상하는 플랫UI 차별화된 특징은?
 
이처럼 급부상하며 주목 받고 있는 플랫UI의 차별화된 특징은 다음과 같이 다섯 가지를 손꼽습니다. 첫째, 심플함을 들 수 있는데요. 장식이 과하지 않으며 직관적 정직함을 담고 있지요. 둘째, 트렌디하다는 것입니다. 신선하여 깔끔함을 느끼게 하고 가벼움과 모던함을 병행하고 있어 나아가 타이포그래피와 여백은 하나의 요소를 더욱 강조되게 합니다. 셋째, 사용성이 높다는 것입니다. 각 요소에 인지를 집중할 수 있어 사용성이 높아집니다. 넷째, 효율적입니다. 목적이 명확한 디자인으로 사용자로 하여금 효율적으로 목표에 달하도록 합니다. 마지막으로 유연함입니다. 정형화된 이미지 요소가 아닌 컬러 링크로 대체하고, 패턴화된 백그라운드 대신 단순한 배경처리로 다양한 디바이스 환경에 쉽게 적용할 수 있도록 합니다.
  
   
 

플랫디자인 표본이 되는 좋은 사례들
 
     
   
앞서도 잠깐 언급했지만, 구글 사이언스 페어(www.googlesciencefair.com) 사이트는 한마디로 플랫디자인의 기준을 제시하고 있다고 해도 과언이 아닌데요. 이 사이트는 대비되는 원색 사용으로 강한 첫인상을 줍니다. 또한, 타이포와 그리드를 강조한 플랫 디자인은 하나의 혁신으로 주목 받았던 타이포그래피 기반 윈도우 8의 메트로UI를 연상케합니다. 잘 짜인 정보구조, 세심한 콘텐츠 배치로 사용자들이 쉽게 목적과 서비스를 이해하도록 하기 때문에 앞서 언급한 플랫디자인의 사용성과 효율성을 그대로 입증하고 있다고 할 수 있습니다.
 
이 밖에도 해외 IT 및 디자인 커뮤니티를 통해 작년 말부터 서서히 모습을 보여 온 플랫 디자인 및 플랫UI 관련 사례들이 지금은 하루가 멀다 하고 연구에 도움이 될 만큼 범람하듯 쏟아져 나오고 있는 상황인데요.
 
이처럼 UI환경이 급진적으로 변화하며 플랫디자인(flat design), 플랫UI가 주목 받는 이유는? 복잡한 디지털 환경을 벗어나, 조금은 심플하면서도 인간 본연의 감성에 충실하고자 하는 원초적 열망, 이와 같이 업체가 현재 직면한 과제에 휴리스틱(Heuristic)이 작용했기 때문이 아닐까요?
 
끝으로, 플랫UI를 적용한 다양한 모바일 웹과 앱, 그리고 사용자 인터페이스 환경은 향후 우리들의 일상으로 깊이 스며들게 될 것입니다. 이 플랫UI가 갖고 있는 심플한 디자인 스타일과 이와 함께 제공되는 장점을 혁신으로 받아들여야 하는지, 아니면 크게 주목하지 않아도 되는 또 하나의 트렌트로 보아야 하는지는 여러분 대답에 달려 있습니다.
 
<참고>
blog.usabilla.com/
www.googlesciencefair.com
www.creativebloq.com
 
l 글 김현욱 (http://www.designlog.org/ , 필명: ‘마루’)

 
Posted by kimdirector | 2013.07.04 | Hit : 3162
Origin http://www.designlog.org/2512427
Tags UI 플랫UI 플랫디자인 모바일 웹 사용자 인터페이스 스큐어모피즘 디자인 소프트웨어 GUI 평면 디자인
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=Mobile_Life&no=39

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Popular 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
아이패드 UI 아웃소싱 플래시 Kit 빅데이터 제스처 카피 위험 웹타이포그래피 홈페이지 웹디자인 라이트박스 Flash 클라이언트 그래픽 가이 가와사키 타이포그래피 사이트 직장 플래시 프로그래머 웹타이포그래피 디자인 웹디자인 모빌리티 컨퍼런스 다운로드 UX Layoutit 로고디자인 웹사이트 쇼핑몰 트랜드 생산성 근무형태 구직 로고디자인 소통