2016 모바일 인터랙션 베스트 15
UX 디자인 배우기 #61
Today UX 아티클
Medium에 올라온 Proto.io의 글 TheBest Mobile Interaction Designs of 2016을 원저자의 허락을 받아 번역한 글입니다.
저희 Proto.io는 앱 디자인에 대단히 열광하기 때문에 2016년도 모바일 인터랙션 디자인의 최고 중 최고를 한 곳에 모아보고 싶었습니다. 아래 15개의 앱과 콘셉트는 정말로 유저를 염두에 두고 매끄럽고 직관적인 디자인으로 즐거움을 주는 데 초점을 두었습니다.
자 함께 보시면서 왜 아래와 같은 모바일 인터랙션 디자인이 수백만 앱 중에서도 눈에 띄었는지 배워봅시다.
Eleken이 제안한 Health Tracker 콘셉트
Eleken의 대담한 컬러 선택은 매끄러운 UI 애니메이션 및 전환 효과와 멋지게 균형을 이루어, 탐색하기 쉬우면서도 건강 데이터를 읽기 쉽게 만들었습니다.
Triple Bogey by Vince de Asis
Vince de Asis가 만든 Triple Bogey 앱 콘셉트 덕분에 이제 골프를 하면서 스코어 기록을 스타일 있게 할 수 있게 되었습니다. 저는 특히 처음에 크게 떴던 메인 이미지가 점수판이 뜨면서 줄어드는 방식과 필터를 적용했을 때 이미지가 아름다운 배경화면으로 전환되면서 유저의 시각적 초점이 바뀌게 해주는 방식을 좋아합니다.
Houses for Rent App by K. Park
지역을 클릭했을 때 뜨는 태그의 슬라이드 아웃 효과(slide-out effect)는 정말 매력적입니다. 오른쪽으로 스와이핑 해서 화면을 전환하는 것도 쉽게 익숙해질 수 있습니다. 이 앱에서는 아주 멋진 UI 디자인과 함께 매우 다양한 UI 애니메이션의 영감을 주고 있습니다.
New Project for MarketMe by Barthelemy Chalvet
이 디자인에서 디자이너 Barthelemy Chalve가 내비게이션 옵션을 보여주는 방식은 매우 독특합니다. 훌륭한 모바일 인터랙티브 디자인을 입혀서 흔한 UI 요소를 돋보이게 한 좋은 사례입니다. 메뉴는 출렁이는 화려한 애니메이션 효과를 보이며 미끄러져 올라갑니다. 더불어 화면 우측 코너에 꽃이 피듯이 파란색 검색 버튼이 등장합니다.
Cloudy with a Chance of Doge by Minh Pham
Minh Pham이 만든 이 날씨 앱 콘셉트는 실물과 똑같은 일러스트레이션을 만들었습니다. 번개가 번쩍이고 비가 쏟아지는데 Doge가 우산을 쓰고 있고 “WOW much thunder”이라는 문구가 뜹니다. 실제로 기기에 비가 오는 것 같이 만들었죠.
Wallet App Concept by Cleveroad
이 앱 콘셉트의 UI 디자인은 클래식한 머티리얼 디자인 스타일에 적절한 모바일 애니메이션을 추가해서 생동감을 더했습니다. 카테고리 선택 시 사용하는 아이콘 슬라이더는 평범한 리스트형 뷰의 좋은 대체 디자인입니다. 새로운 지출을 추가할 때 보이는 스크린 전환 효과는 신속하면서도 효과적입니다.
BUCKiTDREAM by BUCKiTDREAM Inc
여러분이 혼자 있는 걸 좋아하건 주기적으로 공유하는 걸 좋아하건 상관없이 BUCKiTDREAM은 여러분의 버킷리스트를 계속 따라가고 삶에서 더 많은 것을 이루는 데 도움이 되는 아름다운 앱입니다. Lukáš Straňák의 Dribbble에 올라온 위의 짧은 샷을 보면, 여러 번의 스크린 전환이 매끄럽게 이뤄지는 것을 볼 수 있습니다. 저는 특히 “Discover” 뷰에서 어두운 색으로 오버레이 된 채팅 대화창 형식의 리스트 뷰로 전환되는 효과가 정말 좋습니다.
Swipe to Travel App Concept by Fantasy
새로운 Swipe to Travel 앱 콘셉트를 보면 기존의 여행 앱보다 약간 앞서가고 있음을 볼 수 있습니다. Tinder 스타일의 카드 레이아웃과 스와이핑 움직임이 더해진 결과, 세계 일주 관광객들이 다음 목적지를 어디로 정할지 결정하는 데 도움이 되는 재미있는 모바일 앱이 만들어졌습니다.
Finance App by Nikolay Apostol
Nikolay Apostol 이 만든 아주 멋진 모션 디자인이 들어간 재무관리 앱을 보면, 추가로 취할 수 있는 액션을 보여주는 데 왼쪽과 오른쪽으로 카드를 스와이핑 하는 액션을 사용했습니다. 잘 적용한 그림자와 모션은 효과적으로 합쳐져서 문자로 적힌 내용이 없어도 액션의 의미를 잘 전달합니다.
Animated UI Flow of Mr Meow App by Daz_Qu
앱 UI에서 아무 곳에서나 바운스 효과를 준다고 해서 모바일 앱의 훌륭한 모션 디자인이 되는 건 아닙니다. 하지만, 이 사례에서는 바운스 되는 고양이들과 중국의 수호 사자가 즐거움의 레벨을 좀 더 끌어올려 줍니다. 우리가 이미 고양이 캐릭터에 대해 가지고 있는 애정을 차치하고라도, 이 앱의 모션 디자인은 편안함을 잘 활용했기 때문에 특히나 흥미롭습니다.
Volo by SK techx Co.
Volvo는 여행의 동반자가 되는 앱으로 모든 여행의 기억을 함께 기록하여 보관할 수 있습니다. 특정 기억을 선택해서 들어가면 어디든 따라다니면서 뜨는 버튼으로 여행 기록을 적을 수 있게 해서 앱의 여러 섹션 사이를 오가기 쉽게 만들었습니다.
Craigslist App Concept Ivan Bjelajac for Bien
우리 모두 Craigslist의 디자인이 정말 별로라는 사실에 동의할 수 있을 것이라고 생각합니다. 운 좋게도 Ivan Bjelajac이 우리에게 Craigslist가 디자인을 우선으로 생각하고 앱을 만들면 삶이 어떻게 바뀔지 맛볼 수 있게 해주었습니다. 그의 콘셉트를 보면 카테고리를 묶어 주어, 탭을 하면 썸네일이 들어간 리스트 스크린이 자연스럽게 넘어가도록 만들었을 뿐만 아니라 그 카테고리에 해당되는 탑 키워드를 보여주기도 합니다.
Rukkus by Rukkus Inc.
Rukkus는 인터랙티브 한 좌석 배치도를 제공할 뿐만 아니라 Seat360을 이용해 좌석 뷰를 VR로 제공합니다. 그들은 구체적인 경기를 쉽게 탭 할 수 있게 만들고 가격과 뷰를 기반으로 선택을 할 수 있게 만들면서 효율성을 가장 우선순위로 두었습니다. 이 앱은 유저가 앱에서 어떻게 움직이는지 정말 제대로 이해한 모바일 인터랙션 디자인의 훌륭한 사례입니다.
Silvercar by Silvercar
미묘하지만 효과적인 모바일 UI 애니메이션과 강렬하면서도 아름다운 사진으로 가득한 멋진 자동차 렌탈 앱입니다.
Canva by Canva
전문적인 탬플릿을 사용하여 Canva는 유저를 창의력을 마음껏 뽐낼 수 있는 주도적인 자리에 놓습니다. 커스터마이즈 할 수 있는 소셜 미디어부터 시작해서 자기만의 eBook을 만드는 것까지, 이 앱은 여러분의 니즈를 충족시키기 위해 선택한 탬플릿 하단에 필요한 툴이 뜨게 해서 탬플릿을 스크롤한 후 선택한 것을 편집하기 쉽게 만들었습니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
