feconf 2021

December 2, 2021 · 7 min read

Gracefullight

Owner

A1: Do more, with less

UI 개발의 일반적인 문제

화면마다 매번 새로 디자인 되는 컴포넌트: UI의 파편화로 생산성 감소 새로 구현하는게 맘편해요...

디자인 일관성 다운 -> 중복코드 파편화 -> 유지보수가 어려운 UI 코드 무한루프

디자인시스템 구성요소

토큰: 컬러, 타이포그래피, 사이즈, 여백, 트랜지션…
컴포넌트: 토큰을 가지고 컴포넌트의 생김새 정의
- Primary, fill, normal, disabled…
패턴: Danger fill > 한 화면에 하나만 사용, 경고용도로 사용

스펙을 가지고 스토리북 생성

디자인 시스템 가이드 정의 > 디자인과 개발에 동일한 컴포넌트 구현 및 사용 > 커뮤니케이션 비용 다운, 효율성 일관성, 퀄리티 증가

100명 이상 소통하기에 다른 문제가 생겼다.

코드를 디자인에 일치시키는 어려움 (14:25)
비주얼 중심의 디자이너 언어 <-> 기능 중심의 개발자 언어
- Blue: Primary
- Red: Danger
엄격함과 유연함 사이에 절충이 필요했다.

스케치로 만들고 직접 리액트 컴포넌트를 수동으로 만들었다.

휴먼 에러가 생기고, 스케치컴포넌트와 리액트컴포넌트를 서로 비교해야했다.
디자인과 코드 사이에 의존 관계를 만들어야한다.
기존 디자인툴은 모든 프롭의 조합을 그려놓아야한다. (스티커 붙히기) 파워포인트로 디자인만들기 급..
- 디자인 툴에서도 코드를 사용할 수 있으면 좋을텐데.. > 프레이머로 전환

프레이머

모든 요소가 리액트 컴포넌트로 이루어짐 22:17분
디자이너가 프롭을 정의하고 입력할 수 있음
컨셉 검증을 위해 리액트로 작성된 라이브러리를 프레이머로 옮김
리액트 컴포넌트 수정시 디자인 컴포넌트도 수정되어 코드 동기화가 완료됨

언어가 다른것

제플린, 피그마에서 디자인한건지 디자인시스템컴포넌트인지를 확인하려면 일일히 눌러봐야함
- 토스에서는 손가락 이모지를 앞에 넣어서 명시적으로 이름을 바꿧음
  - button-1. fill-medium-primary (style, size, color)
- 박스에 버튼이 있는경우, 알 수가 없음.. 박스에 들어가는 버튼인지 버튼만을 넣는것인지... (29:49)

왜 디자인을 다시 개발해야하는가? 프레이머로 커스텀 핸드오프 기능 구현

클릭시 전체 자식 노드의 프롭 정보를 노출시킴 (32:09)
개발자와 디자이너의 언어도 일치시킴

DST (Design Syntax Tree)

리액트 노드의 형태를 모방해서 기계가 파싱가능한 트리구조로 추상화 (33:41)
DST Element (34:22) -> DST React Renderer (35:20) (35:38)

{
  "elementType": "AmountTop",
  "properties": {
    "title": "",
    "subtitle": "",
    "button": {
      "elementType": "button",
      "properties": {
        "Title": "",
        "Type": "",
        "Style": "fill"
      }
    }
  }
}

디자인을 바로 코드로 옮기는 목표 달성

엄격함과 유연함

디자인 시스템에 컴포넌트가 있는줄 몰랐어요
구멍인 줄은 알았는데 자유롭게 쓰고 싶었어요
컴포넌트를 쓰긴 했는데 패턴을 어긴지 몰랐어요 등등..
커스텀 컴포넌트 계속 만들면 디자인시스템 도입 이전하고 똑같음
리스트 컴포넌트 스펙 참조 (41:21)
- 디자이너가 컴포넌트 목록을 잘 몰라서 새로 만드는 경우
- 가이드가 힘들었음 (43:26)
- 디자인 시스템 관리자가 매번 패턴 점검 필요

디자인 린터 (디자인 시스템 커버리지 계산기)

권장 패턴이 아닌 경우 알림
DST 를 통해 디자인 분석
크롬 확장프로그램으로
- 프레이머 웹사이트의 html 에서 Dst 정보 파싱
- DST 에서 컴포넌트 관계 분석
- 권장 패턴에 맞게 사용중인지 계산 (권장 패턴 요소 개수 / 전체 요소 개수) (44:50)
- 학습비용과 전파비용을 극복함

React + DST (46:20)

DST 의 스펙만 확장시키면 됨
Server driven UI 나 다른 언어 컴포넌트로 전환도 가능해보임.

A6: swc

많은 벤더가 전환 중

개인적인 의견: 엄청 빨라짐, 아직 롤업 플러그인 지원은 미비, 모든 Node 생태계가 러스트로 이동 중, swcpack 프로덕션 기대

B1: recoil

개인적인 의견: 인포그래픽 아름다워서 공유용으로 적합.

A1: Do more, with less​

A6: swc​

B1: recoil​

A1: Do more, with less

A6: swc

B1: recoil