본문으로 이동
토스ㅣSLASH 22 - UIKit으로 만들어진 토스 디자인 시스템, SwiftUI에서 쓸 수 있을까?
컨퍼런스

토스ㅣSLASH 22 - UIKit으로 만들어진 토스 디자인 시스템, SwiftUI에서 쓸 수 있을까?

SLASH 토스 · YouTube

원문 보기

AI 핵심 요약

UIKit 기반 토스 디자인 시스템은 컬렉션 뷰 셀과 셀 아이템 모델에 의존해 SwiftUI처럼 간결하게 쓰기 어렵고, 뷰가 모델을 알아야 하는 제약도 있었다. 이를 개선하기 위해 UIKit 뷰를 담는 컴포넌트를 만들고, 컴포넌트와 모디파이어를 SwiftUI의 `View`로 연결하는 프레젠터를 구현했다. 그 결과 기존 컬렉션 뷰 어댑터와 SwiftUI 양쪽에서 디자인 시스템 컴포넌트를 사용할 수 있게 됐지만, 상태 관리와 코드 간결성은 SwiftUI가 더 나았다. iOS 13과 최신 버전의 동작 차이, 일부 API의 최소 지원 버전 문제를 고려해 SwiftUI로 전면 재작성하기보다 UIKit 기반 시스템의 SwiftUI 지원을 택했으며, 장기적으로는 여러 플랫폼과 서버 드리븐 UI가 공유할 디자인 트리를 지향한다.

  • 셀 아이템 모델과 사이즈 전략을 분리하면 컬렉션 뷰의 표시와 크기 계산을 어댑터에 맡길 수 있다.
  • 컴포넌트가 뷰 생성과 렌더링을 담당하게 하면 UIKit 셀 상속과 뷰의 모델 의존성을 줄일 수 있다.
  • 뷰 모디파이어로 이벤트 처리를 분리하면 컴포넌트 사용부를 간결하게 만들 수 있다.
  • SwiftUI는 iOS 버전별 동작 차이와 API 지원 범위를 직접 확인한 뒤 도입해야 한다.

소개

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

비슷한 학습 자료

컨퍼런스 SLASH

수많은 서비스를 담고 있는 대규모 iOS 앱에 어울리는 아키텍처는 무엇일까요? 프로젝트 간의 의존성과 모듈 간의 결합도를 낮춰, 더 효율적인 서비스 개발, 관리를 이뤄낸 과정을 소개합니다. 이준석, 송범근 / 토스 iOS Developer 발표 자료 👉🏻 https://bit.ly/3J33r5k 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #microfeaturesarchitecture #microfeatures #iosdeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 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

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

프론트엔드 UI/UX

컨퍼런스 SLASH

우리는 왜 컴포넌트를 나누어 개발해야 할까요? 토스가 정의하는 컴포넌트의 역할과 분리 기준을 공유합니다. 한재엽 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3HwAZHj 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-22 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH

프론트엔드 로드맵 1개에 담김

컨퍼런스 SLASH

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

모바일 앱 개발 UI/UX

컨퍼런스 SLASH

토스에서 사용하는 슬랙봇들의 개발 과정과 그동안의 고민을 공유합니다. 임한솔 / 토스 Full Stack Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH

백엔드 풀스택