또 하나의 즐거움, 모바일 앱 컨셉 디자인 살펴보기
지난주, 이번주에 만난 매력적인 모바일앱 디자인 사례 5 를 통해 이미 적용되었거나, 컨셉으로 만들어진 모바일 앱 디자인 사례를 공유드린 적 있는데요! 원래는 혼자 공부를 하기 위해 찾아보기 시작한 내용들인데 계속 정리를 해줬으면 좋겠다는 이야기를 들어 일주일에 한 번씩은 매력적인 앱 디자인 사례를 공유드리려고 합니다. 노하우가 생기면, 특정 분야의 앱을 모으거나 동일한 기능을 다르게 표현한 UI 등을 정리해보겠습니다 🙂
Followfeed UI by Daniel Klopper
위의 이미지는 해먹남녀의 iOS앱 ‘취향설정’ 과정을 캡쳐한 모습입니다. 일주일에 요리를 몇 번 하는지, 몇 인분의 요리를 하는지와 주 메뉴들을 선택하면 관련된 레시피 콘텐츠를 맞춤형으로 제공받을 수 있죠. ‘맞춤형’ 콘텐츠의 제공은 사용자로 하여금 스스로 정보를 찾아야 하는 불편함을 줄여주고, 원하는 내용을 연달아 볼 수 있게 도와주는 중요한 역할을 하게 됩니다. 문제는, 사용자에게 최소 1번 이상의 정보를 추가로 받아야 한다는 점이죠. 이 과정을 귀찮게 느끼는 순간 사용자를 위한 ‘취향 저격’은 커녕 앱을 지속적으로 사용할 이유를 만들어주는데 실패할 가능성이 높아집니다.
오늘 처음으로 소개드릴 앱디자인 사례는 ‘사용자 맞춤형 콘텐츠’ 제공을 위한 UI입니다. ‘Unsplash‘는 대표적인 스톡이미지 제공 서비스로 저도 커버이미지 사용을 위해 자주 찾는 곳인데요! 위의 이미지는 ‘Unsplash’를 바탕으로 만들어진 컨셉 디자인으로, 사용자가 피드에서 먼저 확인하고 싶은 주제를 선택하는 과정이 포함되어 있습니다. 이 UI가 재미있게 다가온 이유는 상-하 스크롤을 사용한 것이 아니라 좌-우 스와이프를 통해 주제를 확인하고 선택할 수 있도록 설계되어 있다는 점이었습니다. 또한 주제에 맞는 텍스트와 이미지를 함께 넣어 사용자가 원하는 주제를 바로 선택할 수 있도록 도와주고 있었습니다. 페이지 전환이나 스크롤을 하지 않고도 한 눈에 확인하고 선택할 수 있어 더욱 매력적이었던 사례입니다.
+추가 국내 사례 : 서울해프닝
서울해프닝은, 테마별 소규모 문화 콘텐츠를 큐레이션 해주는 서비스입니다. 앱을 실행하고 ‘Start’를 선택하면 원하는 느낌의 ‘하루’를 선택할 수 있는 화면을 만날 수 있는데요. 키워드와 함께 이미지를 보여주고, 마음에 들면 아래로 끌어내려 담아둘 수 있으며 마음에 들지 않는 경우 다른쪽으로 던지는 식으로 과정이 진행됩니다.
4개의 사진을 선택하면, 그에 맞는 콘텐츠를 바로 추천해주고 상세 내용을 확인할 수 있도록 도와줍니다. 추천 받은 콘텐츠가 마음에 들지 않는 경우 다시 한 번 선택을 할 수 있죠.
2.Woman Clothing eCommerce Mobile App by Mahesh Kantariya
최근 커머스들을 보면 스크롤을 최대한 줄이는 것과 동시에 사용자가 여러 페이지를 이동하지 않고도 상품 정보를 최대한 많이 볼 수 있게 유도하고 있는데요. 예전에는 제품 상세 페이지에서 상-하로 이어지는 내용이 많았다면, 이제는 좌-우 스와이프를 통해 대표 이미지를 확인하고 상세 정보를 확인할 수 있도록 구성된 사례가 많아지고 있습니다. 세로이미지의 활용 사례 역시 많아지고 있고요. 위의 이미지는 공팔리터의 제품 상세페이지 모습으로 제품 이미지를 양쪽으로 이동하며 확인할 수 있으며 화면을 위로 끌어올리면 그 때 상세 정보를 확인할 수 있도록 구성해놓았습니다.
두 번째 사례는 비슷한 맥락의 UI를 보여주고 있는데, 메인페이지에 스크롤이 전혀 들어가 있지 않은 모습이었습니다. 상단 슬라이드와 하단 인기 카테고리 영역 두 가지로 나뉘어 있는데 카테고리 영역의 경우 좌-우로, 한손으로도 손쉽게 확인이 가능하도록 구성되어 있었습니다. 카테고리를 선택하면 제품 리스트를 확인할 수 있으며, 그 중 하나를 선택하면 세로로 적용되어 있는 제품 대표 이미지를 확인할 수 있었죠.
+추가 국내 사례 : 프로젝트 앤
프로젝트 앤’은 국내외 유명브랜드와 신진디자이너 브랜드의 옷·가방 등 패션상품을 소비자에게 빌려주는 서비스입니다..(SK플래닛에서 서비스) 위의 이미지는 프로젝트 앤의 제품 리스트 화면으로 겉으로 보기엔 기존 커머스와 비슷한 것 같지만, 제품 이미지를 좌-우로 움직여 다른 이미지를 확인할 수 있도록 구성해놓았습니다. 상세페이지에 들어가지 않고도 제품에 대한 더 많은 정보를 얻을 수 있는 것이죠.
3.Fill information by Daisy
위의 이미지는 왼쪽부터 캔고루, 주말에 뭐하지, 신디포스트의 모바일앱 화면입니다. 신디포스트를 제외하면 제가 일주일에 한 번 이상은 꾸준히 쓰고 있는 서비스이기도 하고요. 이들은 모두 회원가입 또는 이후에 사용자의 추가 정보를 받고 있습니다. 서비스를 알게된 경로, 선호 정보, 성별 그리고 결혼여부와 자녀가 있는지도 물어보고 있죠. 캔고루의 경우에는 전시 정보를 제공해주고, 주모의 경우 주말에 가볼만한, 해볼만한 콘텐츠를 제공해주며, 신디포스트는 나와 딱 맞는 정보나 소식을 제공해주기에 위와 같은 과정은 꼭 필요하다고 볼 수 있습니다. 문제는, 사용자가 정보를 입력하는 화면, 폼이라고 할 수 있는데요. 그 전에, 왜 이 정보를 입력해야 되는지에 대한 명확하고 구체적인 설명이 있어야 하는 것은 물론이고, 입력하는데 어려움이 없게 느껴야 스스로 입력할 가능성이 높아지기 때문입니다. 그런 측면에서 봤을 때, 위의 서비스들은 좋은 사례가 아니라는 생각이 들고요.
컨셉 디자인이기에 정확히 어떤 성격의 서비스인지는 알 수 없지만, 위의 사례는 정보를 입력하는 또 다른 방법을 보여주고 있습니다. 성별과 생년월일, 키와 같이 기본적인 정보를 묻는 것은 동일하지만 삽화를 활용하여 정보의 성격을 명확하게 보여주고 있고, 숫자와 텍스트를 직접 입력하는 방식이 아니라 탭을 하거나 좌-우로 움직여 선택할 수 있는 방식을 활용하고 있기 때문입니다.
함께 보면 좋은 내용
