2024. 2. 3. 19:29ㆍ클론코딩/TDS(Toss Design System)
안녕하세요 홍벨로퍼입니다!
오랜만에 인사드리는것 같네요!
오랜만에 돌아온만큼 재미있는 프로젝트를 진행해보려고 합니다!
개인적으로 토스앱을 정말 사랑하고 그만큼 많이 애용하고있는데요 😘
그래서 토스앱에서 사용하고있는 TDS를 직접 최대한 카피해서 만들어보고 공유하고자 합니다!
그래서 오늘은 토스의 버튼 디자인 시스템을 같이 관찰해보고 분석한뒤,
React-Native로 재사용할수있는 컴포넌트를 만들어봅시다!
앱 살펴보기
토스 앱에는 화살표와 함께 동작하는 버튼이 있습니다.
이 버튼은 누르게되면 살짝 작아졌다가 다시 튕겨져 나오는 행동을 보이고있는데요
예전부터 이 통통 튀는 UI를 만들어서 재사용해보고 싶다는생각이 들었었습니다!
분석
개발에 앞서 먼저 UI를 분석을 해봅시다!
먼저 해당 컴포넌트의 경우 다음과같은 행동방식을 취하고있습니다
버튼을 눌렀을때 버튼이 살짝 작아졌다가 손가락이 화면에서 떼어지면 다시 원상태로 돌아오는 행동을 보이면서 버튼에 등록되어있는 Action을 실행하게됩니다.
프로토타이핑
위의 분석결과를 바탕으로 토스앱의 스크린샷, 화면녹화를 통해서 이미지를 가져온 뒤, XD를 이용해서 프로토 타이핑을 해보았습니다!
프로그래밍(React-Native)
먼저 애니메이션이 적용이 되지않은 레이아웃을 만들어 봅시다!
[line:18 - line:40] : <TouchableOpacity>를 이용해서 버튼을 먼저 정의하고 타이틀과 화살표 이미지를 넣어줍니다!
그다음, 애니메이션을 하드코딩해서 레이아웃에 적용해봅시다!
버튼이 눌렸을때 scale 속성을 이용해서 버튼을 작게했다가 다시 크게만든다면 해당 애니메이션을 구현할 수 있습니다.
TouchableOpacity에있는 onPressIn, onPressOut을 활용해서 버튼을 눌렀을때와 떼었을때의 이벤트를 받아옵니다.
TouchableOpacity컴포넌트는 버튼을 눌렀을때 버튼의 opacity가 0이되는 default 설정이 있는데 해당 설정을 저희는 사용하지않기때문에 activeOpacity속성을 1로 정의합니다 [Line: 37]
애니메이션의 경우 성능이 낮은 핸드폰에서 실행할 때(주로 안드로이드) 애니메이션 프레임이 끊기는 현상이 생길 수 있습니다. 그래서 useNativeDriver로 디바이스의 리소스를 활용하여 애니메이션의 프레임이 끊어지지않게 코드를 작성합니다 [Line: 44]
중간 체크!
이후 이제 코드를 정리하고 컴포넌트화를 해서 재사용 가능하게 만들어봅시다! 🎉
코드 재사용화 할수있게 만들기
이전에있던 코드들을 모두 옮겨서 새로운 컴포넌트에 코드를담고, 컴포넌트를 사용하는 사용자에게 줄수있는 다양한 옵션을 추가하였습니다!
.
.
.
이번 프로젝트를 진행하면서 느꼈던 부분은 확실히 TDS를 만들려면 디자이너와의 소통을 통해서 애니메이션 속도나 scale크기 등 디자이너분들의 컨셉을 이해할수있는 시간이 꼭 필요하다는 생각이 들었습니다.
또한 토스에서 사용하고있는 버튼 컴포넌트는 타이틀 - 화살표만 있는것이 아니라 다양한 형태의 버튼이 있기때문에 해당 버튼을 시작으로 여러가지 버튼들의 옵션을 계속 고도화해서 만들어 보려고합니다!
TDS 모두 클론하는 그날까지! 👍
읽어주셔서 감사합니다 :)
좋아요는 큰 힘이 됩니다! ❤️