Home 디자인 UX/UI 여러 종류의 모바일 앱 사례를 화면, 기능 단위로 살펴볼 수 있다면?

여러 종류의 모바일 앱 사례를 화면, 기능 단위로 살펴볼 수 있다면?

2514

 

보지 않고도, 뚝딱 뚝딱 좋은 화면들을 기획하고 만들어낼 수 있다면 더없이 좋겠지만! 기능을 업데이트 하거나 새로운 화면을 설계하는데 있어 ‘사례’들을 살펴보는 일만큼 작업 과정에 큰 도움이 되는 것도 없는 것 같습니다. 제 크롬 북마크에는 ‘UX/UI’라는 폴더가 별도로 존재하고, 하위 폴더로는 플랫폼 별 디자인 가이드와 함께 다양한 사례를 살펴볼 수 있는 웹서비스들이 저장되어 있는데요! 그 중, 가장 최근에 저장된 서비스 하나를 오늘 소개드리려고 합니다. 

 

 

 

‘Mobile-Patterns’는 안드로이드와 iOS 환경에 맞게 제작, 서비스 중인 다양한 모바일 앱을 화면과 기능단위로 살펴볼 수 있는 서비스입니다. 

 

 

 

글을 작성하는 시점에 피처드 되어 있는 모바일 앱 사례는 HQ였는데요! 올 상반기 국내에서도 네이버(정확히는 스노우에서 제작한)의 잼라이브, NBT(캐시슬라이드)의 더퀴즈라이브 등의 라이브 퀴즈쇼 서비스들이 여럿 등장했었는데, 이들의 모티브가 된 서비스가 바로 북미에서 돌풍을 일으킨 HQ입니다. HQ에 대해 ‘Mobile-Patterns’은 라이브 퀴즈쇼에서 댓글을 어떻게 구현했는지, 댓글이 있는 화면과 없는 화면의 차이는 무엇인지 등을 하나씩 스크린샷 형태로 저장, 등록해 간략한 설명과 함께 보여주고 있습니다. 

 

 

 

이렇듯 직접 모바일 앱을 다운로드 받지 않아도, 풍부한 사례를 확인할 수 있는 ‘Mobile-Patterns’. 플랫폼에 따른 분류는 물론이고 특정 행동에 따라, 데이터 유무 등의 상황에 따라, 앱의 성격과 그에 따른 화면 종류에 따라 사례를 볼 수 있도록 구성되어 있습니다. 기존에도 ‘Mobile-Patterns’과 같이 앱 사례를 볼 수 있는 큐레이션 서비스들은 존재했지만, 이렇게 다양한 시각으로 확인할 수 있는 서비스가 부족했던 탓에 개인적으로는 더 만족스럽다는 생각이 들었습니다. 빈 화면, 로딩 중 화면, 데이터를 잘못 입력했을 때의 화면 등 세세하게 확인이 가능하기 때문이죠.

 

 

 

앞서 간략하게 언급했던 내용이지만, 화면에 따라 어떤 상황의 화면인지는 물론, 어떤 특징이 있는지를 운영자들이 간략하게 입력 해놓은 점도 매력적인 부분이었습니다. 위의 이미지를 보면 상단에는 서비스 화면이 있고, 하단에 서비스명, 제공 플랫폼, 스크린 구분이 차례대로 자리잡고 있는데요! 가장 마지막에 설명이 포함되어 있습니다.

 

 

 

특정 화면을 클릭하면, 위와 같이 상세 정보를 확인할 수 있는데요! 보고 있는 화면과 밀접하게 연관된 화면들을 바로 이어서 확인할 수 있다는 점도 좋았습니다. 흐름에 따라 사례들을 살펴볼 수 있으니 말이죠.

 

 

 

그리고 ‘Mobile-Patterns’가 매력적인 또 하나의 이유! 화면 우측 상단을 보면 재생(플레이)아이콘이 자리 잡은 경우가 있는데, 마우스를 가져다 대면 영상으로 재생됩니다. 사례를 정적인 이미지가 아닌, 동적인 모습으로 확인할 수 있는 것이죠. 마이크로 인터렉션들의 경우 이미지로는 제대로 확인하기 어려운 경우가 많은데, 영상으로 어떻게 동작하는지를 자세히 들여다볼 수 있어 좋았습니다. 

 

다만, 하나의 앱과 관련된 화면과 인터렉션들을 거의 모두 수집해 등록하고 있어 누적된 사례들이 많지 않다는 점은 아쉬웠는데요! 그럼에도 불구하고 등록된 사례들을 먼저 살펴보며 충분히 학습할 수 있다는 점에서 만족스러운 ‘Mobile-Patterns’입니다. 누구든 사례를 등록(제보)할 수 있도록 열어두었으니, 점점 콘텐츠들이 많아지지 않을까 싶네요! 전 세계 다양한 모바일 앱 사례를 확인하고 싶으시다면, ‘이 곳‘을 참고해주세요!