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’사례를 한 곳에서 확인해보세요!

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