[ 토스 기술 블로그 ] SLASH 21 - Day 3 TDS로 UI 쌓기 : 그 많던 코드는 누가 다 치웠을까?

 

TDS로 UI 쌓기: 그 많던 코드는 누가 다 치웠을까?

 

TDS란? 

Toss Desgin System

 

토스는 글꼴이나 애니메이션 등 디자인 관련한 시스템이 존재해서 일관된 UI를 제공한다.

 

이로써 다른 제품을 개발할 떄 쉽게 적용가능해서 생산성을 높인다.

( 역시 큰 회사는 이런게 있구나 )

 

1. 컬러들을 팔레트로 나누어 변수명 ex) blue_700으로 사용

 

이러한 규칙을 사용해서 앱, 웹에 적용하며 디자이너, 기획자랑도 소통이 좋다

 

또한 테마에 적절하게 적용할 수 도 있음

 

2. 상황에 맞는 디자인을 적용

 

예를 들어 검색창 밑에 스크롤 뷰가 있을 때는 처음엔 위에만 fade를 적용해야 하지만 검색창을 클릭하면 아래에 키보드 등이 올라와 아래로 내려갈 때 fade를 적용해줘야하는데 이러한 점 또한 상속을 통해 쉽게 적용 가능하다

 

이미 개발이 되어있는 스크롤 뷰를 건드리지 않고 하는 방법도 있는데 안드로이드 코드는 잘 모르곘다 일단은 그런 방법이 있다고만 하고 넘어갔다.

 

3. 햅틱 (진동같은 기능)

 

일관성 있게 interaction을 적용할 수 있다.

 

4. UI component

 

모든 컴포넌트화 시켜서 개발하기 쉽게 해놨다. ㄷㄷ;

 

약간 flutter 느낌이 강한 것 같다

 

ListView.builder 이런 컴포넌트를 사용하면 간단하게 리스트 뷰를 만들고

 

그 안에 card나 tile등을 넣어서 쉽게 개발할 수 있는데 이러한 것들 처럼 모든 Layout 등을 컴포넌트화 시켰다.