본문으로 이동
토스ㅣSLASH 22 - UX와 DX, 그 모든 경험을 위한 디자인 시스템
컨퍼런스

토스ㅣSLASH 22 - UX와 DX, 그 모든 경험을 위한 디자인 시스템

SLASH 토스 · YouTube

원문 보기

AI 핵심 요약

토스 디자인 플랫폼 팀은 제품과 개발자가 늘면서 디자인 시스템 사용 방식이 파편화되고, UI 구현과 문구의 일관성을 유지하기 어려워지는 문제를 다뤘다. Android에서는 TDS 컴포넌트와 Kotlin DSL로 레이아웃 코드를 간결하게 하고, UX 라이팅 규칙을 디자인 도구의 보이스 톤 메이커뿐 아니라 코드 린트와 런타임 오버레이로 확장했다. 또 디자인 신택스 트리(DST)를 바탕으로 Android Studio 플러그인이 Kotlin DSL이나 XML 코드를 생성하도록 해 반복 작업과 컴포넌트 사용 편차를 줄였다. 디자인 시스템은 UI 요소를 제공하는 데 그치지 않고, 디자인부터 개발·검증까지 이어지는 경험을 함께 설계해야 한다는 점을 강조했다.

  • 컴포넌트의 모양뿐 아니라 애니메이션, 인터랙션, 접근성까지 시스템으로 정의하면 제품 간 사용자 경험을 일관되게 만들 수 있다.
  • Kotlin DSL은 레이아웃 보일러플레이트를 줄이고, UI 코드 안에서 실험 분기와 간단한 연산을 자연스럽게 작성하게 해준다.
  • UX 라이팅 규칙은 디자인 도구에만 두지 말고 코드 린트와 런타임 검사로 연결해야 출시 후 화면의 문구도 점검할 수 있다.
  • 디자인 신택스 트리(DST)를 공통 명세로 삼으면 플랫폼 간 구현 차이를 줄이고, 디자인 의도에 맞는 코드 생성과 검증을 지원할 수 있다.

소개

토스 디자인 플랫폼 팀은 단순히 UI 요소를 개발하고, 컴포넌트화하는 것 이상의 디자인 시스템을 꿈꿉니다. 더 좋은 사용자 경험을 제공하기 위한 크고 작은 고민들이 개발자 경험 곳곳에 어떤 모습으로 스며들었는지 공유합니다. 박민수 / 토스 Android Developer 발표 자료 👉🏻 https://bit.ly/3HiTKOj 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH

비슷한 학습 자료

컨퍼런스 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

서비스가 지속적으로 최고의 사용자 경험을 제공하기 위해서는 개발자 경험(DX)이 뒷받침되어야 합니다. 토스에서 SSR을 도입하면서 겪었던 다양한 어려움과 이 를 수호하기 위한 해결법을 공유합니다. 박서진 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3ObL3Y9 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH

프론트엔드 데브옵스 · 인프라

컨퍼런스 SLASH

UIKit로 만들어진 토스 디자인 시스템을 SwiftUI에서 사용할 수 있을까요? 토스 디자인 시스템을 사용하는 방법의 과거와 현재 그리고 미래를 소개합니다. 강준구 / 토스 iOS Developer 발표 자료 👉🏻 https://bit.ly/3MKYi0V 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH

모바일 앱 개발 UI/UX

컨퍼런스 SLASH

토스ㅣSLASH 22 - 예고편

컨퍼런스 SLASH

오직 사용자를 위한, 토스 개발자들의 노하우를 모두에게 공개합니다. 토스 개발자 컨퍼런스 SLASH22, 자세한 정보는 👉🏻 https://bit.ly/3NB0B7o *컨퍼런스 및 세션에 대한 문의는 SLASH 운영팀 이메일(slash@toss.im)로 연락해주시기 바랍니다. #토스 #개발자컨퍼런스 #SLASH

컨퍼런스 SLASH

TDS(Toss Design System)로 구성되어 있는 토스의 제품들. 복잡한 화면도 단숨에 개발할 수 있도록 큰 힘이 되어주는 TDS를 개발자들이 사용하고, 확장하는 과정을 공유합니다. 박민수 / 토스 Android Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH

모바일 앱 개발 UI/UX

컨퍼런스 SLASH

토스에서 기술 혁신이 가지는 의미는? 토스 개발자들이 기술을 대하는 태도와 SLASH에서 다룰 이야기를 소개합니다. 이형석 / 토스 Head of Technology 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH