최근 토스 메인화면에 변경점이 생겼다.

계좌들을 보여주던 카드 그룹의 하단영역 더보기 버튼을 4개로 나누어 각각 해당하는 메뉴에 빠르게 진입할 수 있게되었다.

그런데 자세히 보면 UX 변화뿐만 아니라 독특한 그라디언트 사용이 눈에 띈다.

상단 중앙을 기점으로 Radial 형태의 그라디언트가 넓고 옅게 적용된 모습을 볼 수 있다. 라인 또한 바깥으로 빠질수록 알파값을 낮추어 경계를 흐리게 처리하였다. 이러한 디자인은 새로워 보여서 눈길이 갔다.

그렇다면 어떤 이유로 이러한 디자인을 채택했을까? 분석을 해보았다.

토스의 홈 화면은 기본적인 카드 리스트 타입이다. 카드의 Fill 컬러는 화이트이며 구분을 위해 전체 BG 컬러를 그레이로 가져간다. 또한 카드에 Drop Shadow는 따로 넣지 않은 것으로 보인다. 그리고 이번 업데이트를 위해서는 카드 하단에 4개의 버튼이 추가되어야했다.

만약 좌측처럼 버튼의 컬러 전체를 그레이로 가져간다면 버튼과 배경의 구분감이 약해진다.

하지만 우측처럼 그라디언트를 사용할 경우 버튼의 컬러는 최대한 살리면서 자연스럽게 그룹핑된 카드로 보일 수 있다.

물론 이러한 그라디언트 버튼은 디자인적으로 정답에 가깝다고 하기는 모호하다. 하지만 토스는 그레이 컬러의 버튼을 넣기 어려운 구조에서 가능한 최선의 디자인을 반영한 것으로 생각된다.

이 외에도 최근 토스 사용중에 그라디언트가 인상적인 화면들이 몇몇 보였는데 이것들을 정리해보고 싶어졌다.

아래는 내가 틈틈이 캡쳐했던, 사소하지만 눈길이 가는 토스의 그라디언트 사용 사례이다.

1. 소비 • 수입 내역 / 계좌 개설

해당 탭에 진입하면 최근 결제한 내역의 리스트가 생성되는데 이때 그라디언트가 등장했다가 사라진다.

계좌 개설 탭 또한 진입시 섹션별로 그라디언트 효과를 노출한다.

보통 새로운 리스트가 생성되면 전체 Fill 값을 채우는것이 일반적인데 사소한 차이지만 새로웠다.

2. 카드값

2월 1일 카드의 그라디언트가 좌측 상단에서 대각선으로 이어진다.

상/하, 좌/우 그라디언트 사용은 흔하지만 대각선 방향은 자주 못본 것 같다.

3. 증권 / 혜택 받고 결제하기

증권의 그라디언트는 조금 특이하다. 보통 이러한 디자인에서 원형 아이콘 주변에 드롭 쉐도우를 주는 케이스는 흔하다. 그러나 토스 처럼 아이콘을 기점으로 우측으로 길게 빼는 경우는 처음 보는 것 같다.

우측 화면인 특별 혜택에는 남은 시간 밑에 배경을 레드 컬러의 Drop Shadow로 표현했다. 매우 새롭지는 않지만 보통은 텍스트에만 컬러를 사용하거나 면으로 감싸서 강조하는 경우가 흔하다.

4. 증권 피드 콘텐츠

그라디언트로 표기된 단어를 탭 하면 그 의미를 툴팁 형태로 제공한다.

특이한 점은 좌-우로 균일하게 이어지는 형태가 아니라 우측 끝의 2자까지만 그라디언트가 적용된다.

5. 애플 프로모션

카드 우측 상단에는 모니터의 컬러와 동일한 보라색 그라디언트가 적용되었다.

또한 버튼과 텍스트에도 그라디언트 모션을 적용하였다. 일반적인 토스 CTA 버튼에서는 볼 수 없었던 연출이다.

마치며

토스는 평준화된 플랫 스타일 안에서 지속적으로 고민하고 발전시키려는 모습이 느껴진다. 그것이 매우 작은 디자인 요소일지라도 말이다.

대부분이 비슷비슷한 모바일 프로덕트 디자인에서 이러한 작은 디테일들은 새로움을 느끼게 한다.

이 외에도 화면 어딘가에는 아직 발견하지 못한 멋진 디자인이 있을 것이다. 앞으로도 사용하면서 열심히 찾아봐야겠다.