영상은 50분 분량입니다.
아래는 주요 내용의 캡처입니다.
FCConf 2021 Design System 영상을 본 후의 노트 https://youtu.be/LmLchZ4tCXc?si=4MNQDShuBiWYlhC6
디자인 시스템 구현, 그리고 그다음…코드와 디자인을 일치시키는 과제
텍스트가 너무 길어지면 세로로 표시되는 문제 디자인 시스템을 도입한 후에도 새로운 문제가 생겨났습니다.
1. 코드와 디자인 매칭 2. 디자이너와 개발자가 소통하는 데 사용하는 서로 다른 언어 3. 엄격성과 유연성 간의 문제 Framer 사용 가능한 모든 경우를 그려야 하는 문제 Framer가 다른 디자인 도구와 가장 다른 점 중 하나는 모든 요소가 React 구성 요소로 만들어졌다는 것입니다.
Before After 개발에 사용된 구성 요소를 사용하여 디자인 구성 요소를 만듭니다.
각각을 클릭하여 레이어 이름을 확인해야 했습니다.
신입 직원이 이것이 디자인 시스템인지 알아내는 데 걸리는 학습 곡선은 더 높아졌습니다.
자체 핸드오프를 개발했습니다.
더 쉽게 만들 수 없을까요? -> 디자인 구문 트리(DST) 구현 DST는 React 노드의 트리를 모방하여 디자인 시스템으로 만든 화면에 대해 기계에서 구문 분석할 수 있는 구조(트리 구조)를 만드는 것을 목표로 합니다.
핸드오프 도구를 사용하는 근본적인 이유를 생각해 보면… 디자인을 개발로 옮기는 것입니다.
DST를 통해 자동화합니다.
Before After 3. 엄격함과 유연성 사이의 난제 해결 좌: 디자인 시스템 미사용 우: 디자인 린터 만들어봤다!
!
!
결론: 생산성 향상.. !
!
사실 저희 회사 조직은 프론트엔드 개발자 2명, 디자이너 2명으로 위에 나열한 토스와 같은 대규모 조직에서 발생하는 문제는 없지만 언젠가 대규모 팀에 적용하면 생산성이 확실히 높아질 겁니다.
핸드오프와 dst 도구를 오픈소스로 공개해줬으면 좋겠어요… . 안 하실 거죠? 하. 분명 회사의 자산이에요.