6,000여개 이상의 모바일앱 디자인 사례와 화면 구성 요소 정보를 확인할 수 있는 곳! ‘Shots’

–

150여개가 넘는 아이폰 앱디자인 사례를 확인하고 싶다면? ‘MOBBIN’을 통해 우리가 특정화면을 설계하는데 있어 ‘참고할만한사례’를 한 곳에서 볼 수 있는 방법을 소개 드린 적 있는데요! ‘Mobbin’은 아이폰X 해상도에 맞춰 운영자가 다양한앱을 직접 사용해보며 주요화면을 상황에 따라 정리 해놓은 곳입니다. 상황에 따라 다양한 사례를 쉽게 확인 할 수 있어 기획과정에 많은 도움을 받을 수 있죠. ‘Mobbin’과 같은 서비스는 해당 프로덕트를 담당하는 기획자나 디자이너, 개발자들이 만든 ’결과물’을 보는 것에 초점이 맞춰져 있습니다. 그런데 오늘, 이와 조금 다른 측면에서 사례를 확인 할 수 있는 서비스를 발견하여 소개하고자 합니다 🙂

–

–

‘Shot’의 메인 화면모습입니다. 이렇게 보면 기존에 ‘지금 써보러 갑니다’를 통해 소개한 UI 사례들을 큐레이션, 소개해주는 서비스와 크게 다르지 않은데요! 재밌는점은 특정화면을 우리에게 ‘보여주는’ 방식에 있습니다.

–

–

처음 보셨던 화면에서 ‘틱톡’의 스플래시 화면을 기억하시나요? 로고와 함께 ‘Tik Tok’이라고 심플하게 쓰여 있는 화면을 말이죠. 그때만(?) 해도 우리가 틱톡을 실행 할 때마다 보는 일 반적인 스플래시 화면이었는데, 마우스 오버시 내용이 조금 다르게 바뀝니다. ‘UI Elements’라는 이름으로 화면 내 어떤 구성요소가 포함 되어 있는지 확인 할 수 있도록 말이죠. 

–

–

뭐지, 하고클릭 하는순간 ‘Shot’의 매력이 시작됩니다. 화면 구성요소들이 어떻게 적용되어있는지 위치, 사이즈, 정렬방법, 컬러등의 분석값을 정리해서 보여주기 때문이죠. 게다가 이런내용들을 HTML로 다운로드 받는 것도 가능합니다. 

–

–

아니 뭐 이런? 생각으로 다시 한 번 천천히 사례들을 살펴봤는데요! 스플래시 화면은 아주 기본적인 화면이라 구성요소가 많지 않으니, 조금 더 복잡한 커머스의 상세화면 사례를 클릭해 봤습니다. 분석값을 로딩하는데 시간이 소요됐지만 결과는 상당히 만족스러웠습니다. 뒤로가기 아이콘부터 iOS 상태바, 검색아이콘, 장바구니 아이콘, 상품이미지, 타이틀, 소개 텍스트까지 모든 구성요소의 상세내용을 확인 할 수 있었기 때문이죠.

보통 화면을 구성하는데 있어 공통적으로 포함되는 내용과, 그 화면에만 포함되는 내용이 있는데요! 후자의 경우 어느범위까지 한 화면에서 보여줘야 하는지를 많이 고민하게 됩니다. 또, 우선 순위에 따라 강조를 달리 하기도하죠. ‘Shot’에서는 이런 상세 내용들을 사례별로 확인 할 수 있어 유용합니다. 정말 유용합니다.

–

–

잠시 숨을 고르고, 기본적인 뼈대가 어떻게 구성되어 있는지 확인해봤습니다. 아무리 간단한 웹 서비스라도 구성 방법을 먼저 확인해야 하는데 사례들이 좋아 푹 빠져있었네요. 먼저 서비스의 ‘구분’에 따라 사례 확인이 가능합니다. 지도, 쇼핑, 음악, 소셜, 채팅, 카메라 등으로 말이죠. 뿐만아니라 iOS, AOS 등의 플랫폼에 따라, 태그와 추가된 년도에 따라 사례를 더 세분화하여 확인 할 수 있습니다. 

–

–

제가 늦게 만났을 뿐, 이미 2017년부터 열심히 사례가 등록되고 있던 곳이기에 이미 6,000여개 이상을 확인 할 수 있다는점도 매력적인 부분입니다. 물론, 모든 기능이나 사례 확인을 무료로 할 수 있는건 아닙니다. 회원가입시 1크레딧이 무료로 제공되고 있는데 이크레딧은 분석값을 HTML로다 다운로드 받을 때 1개씩 차감됩니다. 크레딧을 얻기 위해서는 사례를 등록하거나, 월 10달러, 연 99달러의 멤버쉽에 가입해야합니다. 

그럼에도 불구하고 6,000여개가 넘는 서비스 별 화면을 구성 요소에 따라 자세히 뜯어볼 수 있다는 점은 무료로도 어느정도 사용이 가능하다는 점에서, 또 유료로 결제를 할 만큼 매력적이라는 생각이 드는 서비스가 바로 ‘Shots’입니다. 지금까지 만났던 모바일 앱 디자인 사례 큐레이션 서비스와는 분명 다른 점이기도 하고요! 

6,000여개가 넘는 모바일 앱 디자인 사례와 그에 따른 구성요소를 확인하고 싶으시다면! 이 곳을 통해 더 자세한 내용을 확인해보세요!

–

함깨 보면 더 도움이 될거에요!

모바일 앱에서의 ‘로딩 애니메이션’ 어떻게 활용하면 좋을까?

‘UX WRITING’ 파헤치기, 첫 번째 : UX WRITING이란 무엇일까요?

모바일 디자인을 위한 플랫폼 별 가이드와 다양한 리소스 모음 ‘LEARN MOBILE DESIGN’

이 기능에는 어떤 소리가 어울릴까? ‘UI SOUND’사례를 한 곳에서 확인해보세요!

앱스토어와 구글 플레이 스토어에서의 전환율 높이기, ‘스크린샷’의 역할!

–