2021년 A1 감상문

A1 Do more with less - 디자인 시스템 그 다음은?

팀: toss

발표자님: 이병철

 

발표의 전체적인 내용

통합적인 ui 개발에 필요한 디자인 협업 과정을 소개하는 내용이었습니다.

 

개발자와 디자이너 협업에서의 문제점

원래의 개발 과정은 디자이너들이 페이지의 디자인을 개발자에게 넘겨주면, 개발자들이 디자인을 보고 이미 개발되었던 컴포넌트를 찾고 재사용가능한지에 대한 여부를 확인하고 재사용을 하거나 새로운 컴포넌트를 개발하는 형식의 개발 프로세스가 진행됐다고 합니다. 하지만, 그렇게 됨으로써 같은 컴포넌트라 할지라도 새로 개발되는 경우가 많게 되었습니다. 결과적으로 전체적인 디자인의 통합이 이루어지지 않게 되고 개발 속도 또한 느려지게 됐습니다.

디자인 시스템 도입

이를 해결하기 위해 디자인의 통합을 위해 가장 위의 디자인 시스템을 개발하고, 디자이너와 개발자들이 해당 소스를 사용함으로써 재사용할 수 있는 컴포넌트의 디자인을 항상 새로 개발하는 것이 아닌, 디자인 시스템 내의 소스를 사용하여 이미 디자인된 컴포넌트를 사용할 수 있도록하여 컴포넌트 재사용을 장려하는 시스템입니다.

디자인 시스템을 통한 UI 개발 통합

이런 디자인 시스템을 개발함으로써 ui 통합을 이루어낼 수 있었다고 한다. 이 시스템에 디자이너와 개발자가 더 나은 협업을 이루어낼 수 있게 해주는 기능들을 더 추가해내면서, 토스만의 ui 개발 통합을 이루어낼 수 있었다고 합니다.

목표에 대한 근본적인 목적을 달성하기 위해 개선해야할 사항들에 대한 리스트를 가지고, 해결 방안을 생각해보는 힘을 기를 수 있는 방법에는 어떤 것이 있을까 생각해보는 것도 좋을 것 같다.

 

기억해두면 좋을 점

• 한 컴포넌트 내부 요소들에 대한 소스를 일일이 확인하지 않고, 한 컴포넌트를 클릭하면 그것에 대한 자식 컴포넌트들도 design을 확인할 수 있으면 좋을 것 같다는 생각 → component들의 children을 tree구조로 나타내어 해결. 이것을 그들은 DST(design syntax tree)라고 한다.
• document.elementsFromPoint
• div data attribute 적극 활용

 

 

영상 링크: https://www.youtube.com/watch?v=cTeNxrgBrw8