토스 #1

토스 앱 서비스의 주요 기능들을 하나씩 엑슈어로 벤치마킹을 하여, 엑슈어의 기능성에 대해 공유하고자 합니다.

 

첫번째로는 토스 앱의 첫 화면에서 상단 네비바 영역을 작업하였습니다.

 

프로토 타이핑 주소 : dfe5gh.axshare.com

Untitled Document

토스 상단 내비의 주요한 점은 배경의 투명도를 조절한 점입니다. 스크롤은 조금씩 천천히 하게되면 각각의 영영마다 투명도 값이 달라지는 것을 확인할 수 있습니다.

실제 토스에서는 몇단계를 두어 작업하였는지는 정확히 모르지만, 저는 5단계로 10%, 30%, 50%, 70%, 100%로 작업을 진행하였습니다.

 

실제 엑슈어 인터랙션 작업물은 공유드립니다. 앱이라 높이 값이 적어, 스크롤이 빠르게 내려갈 경우 엑슈어 기능상 인식을 하지 못하는 경우가 있습니다. 이런 경우를 대비하기 위해, 최대값과 최솟값에는 따로 최종 인터랙션 결과물을 넣어주어 해당 문제를 해결하였습니다.

 

2편에는 토스의 홈 제일 하단에 보면 편집 기능이 있습니다. Drag & Drop 기능을 활용하여 현재 구현이 되어있는데, 이 부분을 엑슈어로 구현 하도록 하겠습니다.

홈 편집 금액 숨기기 기능