아, 어떻게 이런 구성을 생각할 수 있을까!
혼자서 모든 화면을 뚝닥뚝닥 만들어낼 수 있다면 좋겠지만, 시간만 흘러가고 작업이 막히는 경우가 종종 있습니다. 그럴때면 한 번씩 꼭 같은 종류의 앱이나 기능이 아니더라도 다른 사람들의 작업 과정이나 결과물들을 참고하게 되는데요 🙂 보통 잠들기 전, 자주 들르는 사이트들을 돌아다니며 확인하는 경우가 많은데, 이번주부터는 그렇게 만나게 된 매력적인 모바일앱 디자인 사례를 정리해보려고 합니다.
1.Products Catalog by Kirill Kazachek
최근 작년 가을부터 준비한, 커머스와 콘텐츠가 결합된 형태의 서비스를 런칭했는데요! 이 서비스를 기획하며 가장 고민했던 부분은 바로 ‘콘텐츠’들을 한 눈에 확인할 수 있는 리스트뷰 였습니다. 앱을 실행하자마자 만나게 되는 앱의 주요화면이기도 했고, 서비스의 성격을 보여줄 수 있는 공간이기 때문이었죠. 생각만큼 잘 나오지 않았단 생각에 여전히 고민중인 페이지였는데, 위의 사례를 통해 많은 힌트를 얻을 수 있었습니다. 상세페이지로 접근하지 않아도 제품에 대한 여러개의 이미지를 확인할 수 있으며, 타이틀과 설명이 위치한 영역을 스와이프하여 즐겨찾기를 해둘 수 있는 등 유저의 입장에서 꼭 필요한 내용들을 간결하게 표현한 점이 좋았습니다.
2.Free books app design by Nimasha Perera
두번째로 눈에 띄었던 디자인 역시 리스트뷰와 상세페이지였는데요! 첫 번째 사례와 달리 이번에는 책과 관련된 모바일 앱 디자인이었습니다. 컨셉디자인이긴 하지만, 책이라는 콘텐츠의 특성 상 다양한 컬러와 디자인으로 완성된 커버가 있을 수 밖에 없는데 이를 가장 잘 보여줄 수 있는 배경색을 활용했다는 생각이 들었습니다. 덕분에 깔끔하면서도 책의 표지에 집중할 수 있는 환경이 된 것 같고요. 책의 내용을 상세히 확인할 수 있는 페이지에서도 전자책에서 자주 쓰이는 컬러와 텍스트 조합을 통해 눈이 편안해지는 느낌을 주고 있었습니다. 상세페이지로 이동하며, 분위기가 확 달라지는 경우가 있고 이는 상황에 따라 다르게 느껴지겠지만, 사용자 경험을 일관되게 제공하는 것이 정말 중요하다는 생각을 다시 한 번 하게해준 사례가 아닐까 싶네요!
3.Side mini navigation bar by Leo Leung
오른쪽에 배치된 작은 네비게이션이 정말 매력적인 디자인 사례입니다. 만약, 저 네비가 타이틀 위쪽에 자리잡고 있었다면 이미지와 하단 정보로 이어지는 흐름을 막았을 것 같다는 생각이 들었는데요! 오른쪽 사이드에 배치해 한 손으로도 쉽게 다른 콘텐츠로 이동 가능하게 설계된 점이 인상적이었습니다. 캘린더와 일기와 같은 서비스에서도 충분히 활용가능한 요소라는 생각도 들었고요!
4.Mobile audio player by Vladimir Kondriianenko
뮤직플레이어는 정말 많은 사례를 접할 수 있는 카테고리 중 하나입니다. 이미 사용자 경험이라는 측면에서 좋은 사례들이 많이 알려지기도 했고요. 위의 사례의 경우 컬러 조합이 마음에 들어 선택하게 되었습니다. 개인적인 기준이 많은 영향을 끼치기도 했고요. 메인 컬러와 더불어 재생목록을 고정시켜주는 컬러의 조합이 매력적으로 다가온 디자인이었습니다.
5.Profile & Empty States by Murat Gursoy
빈 화면은, 정말 고민이 많이 되는 영역 중 하나입니다. 우리 서비스를 처음 이용하는 유저들에게 ‘비어있는’ 있는 그대로의 화면을 노출시킬 순 없으니.. 이번에 런칭한 서비스에도 예약내역, 문의내역 등 초기에는 비어있을 수 밖에 없는 화면이 몇몇 있었는데, 관심사에 따른 리스트로 이동할 수 있도록 하거나 서비스 소개 페이지로 이동할 수 있도록 구성을 해놓았는데 이동 전 이탈률이 높지 않게 나왔습니다. 이처럼 빈화면을 잘 구성해놓으면 다음 단계를 위한 중요한 역할을 할 수 있게 되는 것이죠! 위의 사례는 빈화면과 실제 콘텐츠로 채워진 화면을 함께 보여주고 있는데, 빈화면일 땐 어떤 내용들을 업로드 하면 좋은지를 아이콘으로 보여주고 있었습니다. 빈화면을 유저를 위한 활용 가이드처럼 활용한 모습이 인상적이었죠! (함께 보면 좋은 내용 : 유저 온보딩을 위한 8가지 주요 방법 / 6.빈 화면의 활용)
함께 보면 좋은 내용