토스ㅣSLASH 21 - TDS로 UI 쌓기 : 그 많던 코드는 누가 다 치웠을까?
SLASH 토스 · YouTube
AI 핵심 요약
토스 Android 개발팀은 제품마다 반복되는 UI 코드와 플랫폼별 표현 차이를 줄이기 위해 Toss Design System(TDS)을 별도 모듈로 구성했습니다. 색상 팔레트와 이미지 리소스를 규칙화하고, 둥근 모서리·페이딩 엣지·햅틱 피드백·애니메이션을 공통 스타일과 컴포넌트로 제공했으며, 커스텀 인플레이터로 기존 레이아웃에도 일부 기능을 적용했습니다. 화면은 TDS 컴포넌트를 조합해 구성하고, 반복적인 XML 코드를 더 간결하게 표현하도록 Kotlin DSL도 도입했습니다. 그 결과 개발자는 세부 구현과 중복 코드보다 화면 구성과 제품 실험에 집중할 수 있다는 점을 공유했습니다.
- 색상은 팔레트 이름으로 관리하고 서버에서 내려받아 빌드 시 리소스로 생성하면 플랫폼 간 명칭과 테마 대응을 일관되게 유지할 수 있습니다.
- 기존 화면을 일괄 수정하기 어렵다면 커스텀 인플레이터로 레이아웃 생성 시 기존 뷰를 TDS 뷰로 대체하는 방법을 고려할 수 있습니다.
- 컴포넌트는 디자인 가이드의 이름과 속성에 맞춰 설계하면 개발자와 디자이너 사이의 구현 커뮤니케이션을 단순화할 수 있습니다.
- Kotlin DSL은 반복적인 XML 레이아웃 코드를 줄이는 데 유용하지만, 발표 당시에는 아직 완성되지 않은 컨벤션으로 제품에 적용되고 있었습니다.
소개
TDS(Toss Design System)로 구성되어 있는 토스의 제품들. 복잡한 화면도 단숨에 개발할 수 있도록 큰 힘이 되어주는 TDS를 개발자들이 사용하고, 확장하는 과정을 공유합니다. 박민수 / 토스 Android Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 23 - 누구나 쓸 수 있는 접근성 높은 토스 만들기
컨퍼런스 SLASH
디지털화로 더 편리해진 금융, 과연 모두에게 편리해졌을까요? 모두가 평등하게, 쉽고 편리한 금융 경험을 할 수 있도록 ‘접근성’을 높인 토스의 노력을 소개합니다. 최동근 / 토스 Andriod Developer 발표 자료 👉🏻 https://bit.ly/42xGdvd 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #디자인시스템 #접근성 #androiddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩...
모바일 앱 개발 UI/UX
컨퍼런스 SLASH
토스의 얼굴, 홈 화면에서의 매끄러운 사용자 경험은 어디에서 비롯되는 것일까요? 다양한 서비스 운영 효율화를 위한 토스 홈팀의 무기, ‘Server Driven UI’를 소개합니다. 윤중현 / 토스 Server Developer 발표 자료 👉🏻 https://bit.ly/3CglOzR 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #serverdrivenui #homedst #serverdeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가...
프론트엔드 백엔드
컨퍼런스 SLASH
토스ㅣSLASH 22 - UX와 DX, 그 모든 경험을 위한 디자인 시스템
컨퍼런스 SLASH
토스 디자인 플랫폼 팀은 단순히 UI 요소를 개발하고, 컴포넌트화하는 것 이상의 디자인 시스템을 꿈꿉니다. 더 좋은 사용자 경험을 제공하기 위한 크고 작은 고민들이 개발자 경험 곳곳에 어떤 모습으로 스며들었는지 공유합니다. 박민수 / 토스 Android Developer 발표 자료 👉🏻 https://bit.ly/3HiTKOj 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드 UI/UX
컨퍼런스 SLASH
토스ㅣSLASH 22 - 예고편
컨퍼런스 SLASH
토스ㅣSLASH 21 - 결제 시스템의 SDK와 API 디자인
컨퍼런스 SLASH
PG 연동 개발자들에게 쉽고 빠른 가이드 제공을 위해, 20년 동안 유지된 기존 시스템에 추상화 레이어를 만들고 SDK와 API를 설계했던 경험을 공유합니다. 추가로 인터페이스의 일관성과 예측 가능성 그리고 TypeScript와 npm 모듈 지원을 위한 시도들까지, 토스페이먼츠 오픈 API의 첫 여정에 대해 공유합니다. 이홍채 / 토스페이먼츠 Technical Product Owner 이현섭 / 토스페이먼츠 Frontend Developer 박순영 / 토스페이먼츠 Server Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im *영상 15분 10초 발표 장표 중 'code(2번째)'를 'message'로 정정하오니 참고해주십시오. #토스 #개발자컨퍼런스 #SLASH
프론트엔드 백엔드 개발 도구