토스 앱 분석기 (UX 심리학, 모션 등등 토스같은 앱 개발을 위한 추천 안드로이드 라이브러리)

OO처럼 만들어주세요

개발자나 디자이너들이 요구사항으로 위와 같은 말을 들으면 굉장히 당황한다.

 

요구사항대로 만들 수 있으면 좋겠지만 그렇지 못하는게 현실이다.

그래도 비슷하게 흉내라도 내야 퀄리티가 좋아지지 않겠는가!

 

이번에 UX 공부도 할 겸 토스 앱을 분석할 일이 생겨서 토스 앱을 분석하는 김에 작성해본다.

분석과 함께 사용할 수 있는(토스를 흉내낼 수 있는) 라이브러리와 기술들을 함께 소개해볼까 한다.

 

토스의 UX 심리학

먼저 토스 앱을 굉장히 잘 분석해놓은 글을 발견해서 첨부한다.

내 폰의 유일한 송금앱, 토스

해당 글에 따르면, 토스의 UX는 6가지의 심리학이 담겨있다고 한다.

1. 밀러의 법칙 (Millar's Law) - 콘텐츠 개수는 7개 내외가 적당하다.
2. 피츠의 법칙 (Fitt's Law) - 엄지손가락이 닿기 쉬운 곳에 배치해야 한다.
3. 힉의 법칙 (Hick's Law) - 선택지를 최소화 해서 복잡하지 않게 보여준다.
4. 폰 레스토프 효과 (Von Rerstorff Effect) - 강조할 항목은 눈에 띄게 표시한다.
5. 도허티 임계 - 0.4초 이내에 콘텐츠를 표시하지 않으면 지루해진다.
6. 심미적 사용성 효과 (Aesthetic-Usability Effect)

 

실제로 토스 앱을 사용해보면 1레이아웃 1콘텐츠가 기본이라는 것을 알 수 있다.

본인 인증 과정부터 이체 과정 대부분 사용자들이 복잡하지 않도록 최소한의 내용을 표시하여 심플함을 유지하고 있다.

이에 관해 자세한 내용은 위에 첨부한 링크를 통해 자세하게 확인하면 된다.

 

토스의 모션

특히, 토스는 모션 그래픽을 적극적으로 사용하는 것으로 알려져 있다.

이 얘기를 하기 전에 토스 공식 피드에 올라온 토스 그래픽 디자이너의 글을 읽고 와보자.

모션, 토스가 금융을 즐겁고 쉬운 경험으로 만드는 방법

위 글을 보고 그동안 토스 앱을 사용하면서 신경도 안쓰던 부분들이 눈에 보이기 시작했다.

토스 앱을 사용하다 보면 유난히 사용성이 좋다고 느꼈었는데 모션 그래픽이 큰 역할을 했다고 생각한다.

아이콘 하나하나 다양한 모션 이펙트를 통해 더욱 직관적이고 재밌는 상황을 연출하기 때문이다.

 

토스는 웹뷰 VS 네이티브

개발자들 사이에서 유명한 논란(?)거리인 토스는 웹뷰냐 네이티브냐에 대해 얘기해보겠다.

 

결론부터 말하자면 토스는 네이티브와 웹뷰를 조화롭게 잘 사용하고 있다.

정말 자연스럽게 네이티브와 웹뷰를 섞어놓아 구별하기 힘들 정도로 최고의 사용성을 제공해주는 것이 특징이다.

 

안드로이드에서는 개발자 옵션에서 레이아웃을 확인할 수 있는 기능이 있는데 이걸 통해 웹뷰 정도를 구별할 수 있다.

물론 플러터로 제작된 앱도 웹뷰랑 구분이 힘들지만 과연 토스가 플러터를 사용했을까 생각하면 웹뷰가 맞다.

차이가 보이는가?

첫번째 사진은 웹뷰, 두번째 사진은 네이티브, 세번째 사진은 Compose로 구현된 화면이다.

 

웹뷰는 위 사진처럼 레이아웃의 구조가 나오지 않는다.

네이티브는 두번째 사진처럼 레이아웃의 범위가 모두 표시가 되고, 빨간색으로 채워진 부분이 Padding 속성을 적용한 영역이 된다.

만약 레이아웃의 범위는 보이는데 Padding 속성이 안보인다? 그러면 Compose로 작성된 화면이다.

 

어쨌든 토스는 네이티브와 웹뷰를 기가막히게 잘 섞어 쓰기 때문에 iOS와 안드로이드 모두 동일한 내용을 부담없이 제작할 수 있는게 아닌가 싶다.

 

토스 따라해보기

본격적으로 토스 앱 처럼 심플하면서 화려한 UX를 제작해보자.

물론 똑같이 따라하는 것이 아니라 토스 앱처럼 보일 수 있는 여러 라이브러리를 소개해보겠다.

 

Lottie

먼저 가장 유명하고도 토스에서도 적극적으로 사용하는 Lottie가 있다.

Lottie는 에어비엔비에서 개발한 오픈소스 라이브러리이며 Json 기반 애니메이션 파일 형식으로 앱, 웹 등 여러 플랫폼에서 모두 사용할 수 있는 애니메이션 라이브러리이다.

벡터 기반의 애니메이션으로 용량도 적고 확대해도 픽셀이 보이지 않는 장점이 있다.

여러 기업에서 사용중이며 적용도 굉장히 간편하기 때문에 많이들 사용하는 라이브러리이다.

 

안드로이드에서는 해당 라이브러리 종속성을 추가하고 사용하면 된다.

implementation "com.airbnb.android:lottie:$lottieVersion"

다음은 사용할 애니메이션을 다운받거나, 직접 만들어서 사용하면 된다.

다른 사용자들이 만든 애니메이션을 사용하려면 아래 로티 파일 사이트에서 json 파일을 다운받아 사용하면 된다.

Featured animations from our community

만약 직접 만드는 경우, 일러스트레이터와 에프터이펙트 같은 툴을 사용해서 애니메이션을 제작하고 Bodymovin 플러그인으로 추출하면 Json 형태의 애니메이션 파일을 생성할 수 있다.

 

제작된 json 파일을 안드로이드 패키지의 Res/Raw 폴더에 넣고 레이아웃에서는 아래처럼 태그를 사용하기만 하면 적용이 된다!

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/progress"
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/progress"/>

 

Android View Animations

토스 앱에서는 버튼이나 텍스트가 상황에 맞게 흔들거리거나 눌리는 효과가 다양하게 제공된다.

가장 유사하다고 생각하는 라이브러리라고 생각해서 가져와봤다.

GitHub - daimajia/AndroidViewAnimations: Cute view animation collection.

iOS의 기본 이펙트에서 영감받아 제작된 라이브러리이기에 iOS도 지원하는 라이브러리가 있다.

 

Gradle에 라이브러리 종속성을 추가해주고 사용하면 된다.

implementation 'com.daimajia.androidanimations:library:2.4@aar'

사용할 때는 YoYo 객체를 참조해 여러가지 설정을 해서 적용하고 싶은 레이아웃이나 텍스트에 적용하면 된다.

YoYo.with(Techniques.Tada)
    .duration(700)
    .repeat(5)
    .playOn(findViewById(R.id.edit_area));

 

Shimmer

페이스북에서 제작한 반짝이는 애니메이션을 쉽게 구현할 수 있도록 제작된 라이브러리이다.

Shimmer for Android

 

고작 반짝이는 효과가 뭐가 필요하다고 생각이 들겠지만 스켈레톤 UI를 제작하는데 많이 사용하는 라이브러리이다.

 

스켈레톤UI?
스켈레톤 UI는 보통 웹사이트나 앱에서 데이터가 렌더링 되기 전 먼저 보일 화면의 윤곽을 그려주는 로딩 애니메이션이라고 한다.

기본적으로 로딩이라 하면은 Progress 아이콘이 빙글빙글 도는걸 생각하지만, 최근에는 아래의 예시처럼 스켈레톤 UI를 사용해 로딩화면을 보여줌으로써 사용자들의 체감 로딩 시간을 줄여주고 데이터가 렌더링 되기 전 미리 레이아웃의 위치를 파악하고 다음 행동을 빠르게 진행할 수 있다는 장점을 가지고 있어 자주 사용한다.

물론 구현은 굉장이 어렵다.

어쨌든 스켈레톤 UI를 제작하는 방법은 다양하지만 가장 많이 사용하는 Shimmer 라이브러리를 통해 반짝이는 효과로 스켈레톤 UI를 많이 제작한다.

 

마찬가지로 Gradle에 라이브러리 종속성을 추가하고 사용하면 된다.

 implementation 'com.facebook.shimmer:shimmer:0.5.0'

레이아웃에서는 다음과 같이 태그를 추가해 사용할 수 있다.

<com.facebook.shimmer.ShimmerFrameLayout
     android:id="@+id/shimmer_view_container"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
>
     ...(your complex view here)...
</com.facebook.shimmer.ShimmerFrameLayout>

FrameLayout으로 구성되어 있으며 Shimmer 라이브러리는 반짝이는 효과밖에 없기 때문에 스켈레톤 UI를 제작하고 제작한 스켈레톤 UI를 해당 FrameLayout으로 감싸주어 사용하는 형태이다.

 

ShimmerRecyclerView

페이스북에서 제작한 Shimmer 라이브러리를 RecyclerView 형태로 제작한 파생 라이브러리이다.

Shimmer는 일반 레이아웃에서 사용이 가능하지만 안드로이드는 RecyclerView 내부에 데이터가 있는 경우가 많기에 제작된 라이브러리이다.

GitHub - sharish/ShimmerRecyclerView

Gradle에 다음을 추가하여 사용하자.

implementation 'com.github.sharish:ShimmerRecyclerView:v1.3'

사용 방법은 Shimmer와 유사하게 ShimmerRecyclerView가 들어갈 자리에 해당 태그를 사용해 사용하면 된다.

<com.cooltechworks.views.shimmer.ShimmerRecyclerView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/shimmer_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:shimmer_demo_child_count="10"
        app:shimmer_demo_grid_child_count="2"
        app:shimmer_demo_layout="@layout/layout_demo_grid"
        app:shimmer_demo_layout_manager_type="grid"
        app:shimmer_demo_angle="20"
        />

라이브러리 소개는 이정도만 하겠다.

 

마치며

토스 앱을 분석하면서 느낀점은 토스 앱이 생각보다 기능이 많은 것은 아니지만 자체적으로 웹뷰로 기능을 추가해 굉장이 다양한 기능을 제공하는 것처럼 보이는 것이 인상깊었다.

이게 네이티브랑 구분이 안갈 정도로 자연스럽게 만들었다는것도 정말 대단한 것 같다.

진행중인 프로젝트들도 지금은 정적인 모습이 많았는데 토스 앱을 보니 모션을 적극적으로 사용해서 화려하고 생동감 있으면서 단순하게 바꾸도록 계획해보려 한다.

그러기 위해서는 디자이너분이 조금 더.. 갈ㄹ

아무튼 모션 적용을 위해 오랜만에 에펙을 만져볼까 고민중이다.