feconf 2021
feconf 2021
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
개인적인 의견: 인포그래픽 아름다워서 공유용으로 적합.