Do More, with less. - Design System
UI 개발의 일반적인 문제 (디자인 시스템)
1. 코드를 디자인에 일치시키는 어려움
2. 소통의 어려움
3. 엄격함과 유연함 사이의 어려움
디자인 시스템을 도입하면 무엇이 나아질지 궁금, 운영하는 디자인 시스템을 한층 더 고도화 하고 싶다
UI 개발의 일반적인 문제 : 버튼, 색상 : 버튼이라는 같은 의도의 UI 각기 다른 모양
디자인의 파편화 : 같은 역할을 하는 부품의 디자인이더라도 일관성을 맞추기 힘듦
UI 개발 플로우 : 남이 짠 코드를 짤꺼 보고 코드 재활용 / 그냥 새로 구현하는게 맘 편하다.
팀의 규모가 커질수록 중복코드, 파편화가 커지고 + 유지보수가 어려운 UI 코드가 커짐.
디자인 시스템 :
Single Source of Truth : 데이터의 사본이 존재할 가능성을 없애라.
버튼의 의도 : 클릭하면 눌리고 어떤 액션을 실행하는 UI
1. 비주얼 언어 : 컬러토큰의 예 :
2. 컴포넌트 : 의 생김새나 디자인을 함. 보통, 눌림, 로딩상태 : 몇가지 옵션안에서 만들어지고 재사용 기회를 늘림
3. 패턴 : 사용처 제약함.
하나의 버튼을 바탕으로
Design System at Scale :
keep code in sync L 가이드를 잘못 이해하고 구현 : 코드를 디자인에 일치시키능데 어려움
우리는 서로다른 언어를 원해요 : 소통의 어려움 (비주얼 중심의 디자이너 언어 & 기능 중심의 개발자 언어)
strictness VS flexiboility : 엄격함과 유연함 사이의 어려움
-> 다시 돌아보는 Single Source of Truth (스펙 정의 측면에서의 ) : 스케치 컴포넌트 / 개발 :리액트 라이브러리 ()각각 다른 싱글 트리 ㅣ 디자인과 코드사이에 의존관계를 만들수 있을까?
기존 디자인 툴의 한계 ㅣ 심볼은 하나의 버튼 색상 4종류
프레이머 ㅣ UI 기반으로 디자인 툴 + 리액트 기반의 프로토타이핑 도구 : addPropertyControls 라는 API를 제공해줌
코드 컴포넌트 : 디자인 요소를 리액트 컴포넌트로 구현 ㅣ 디자ㅏ인패널을 통한 prop 설정, ajax 구현도 가능
개발 라이브럴리 -> 구현결과물 : 디자인 코드컴포넌트
- 우리는 서로 다른 언어를 원한다. -> 소통의 어려움
Hand-Off 도구 : 제플린, 피그마 등
- 자체 핸드오프 개발하ㅏ기 : 프레이머에서 children 화면 연결
기본적인 핸드오프 연결
자체 핸드오프 개발하기
기존 툴의 한계를 뛰어넘어 요소 선택 구현하기
DOM에 data attributes로 컴포넌트 정보 삽입, data-tds-tyoe이 지정된 경우에만 선택가능
:: 자체 핸드오프 개발하기
Design Syntax Tree (DST)
Element : 각 노드를 표현허는 요소
Renderer : 특정목적에 따라 렌더링하는 모듈
디자인을 구조화하다 -> 개발자가 디자인 시안을 보고 코드로 변화하는 과정을 자동화
핸드오프 도구의 근본 목적 달성 = 디자인을 코드로 옮기기
UI 개발 플로우
- 엄격함과 유연함을 갈등
엄격한 디자인 시스템의 장점, 디자인의 제약, UI의 파편화
디자인 재사용률, 유지보수 포인트 - 개발 생산성 증가 up
엄격함 대신 유연함이 필요할 때
디자인 시스템이 효율적이긴 하지만 제품을 위한 최고의 디자인은 아님, 패턴 가이드에 벗어나는 UI를 실현
디자인 시스템의 구멍을 넘나드는 이유
디자인 시스템에 컴포넌트가 있는 줄 몰랐다. 구멍인줄은 알았는데 자유롭게 쓰고 싶었다. 컴포넌트를 쓰긴 했는데 패턴을 어긴지 몰랐다. 개발 생산성의 저하 ..
엄격함과 유연함 사이의 균형 맞추기
엄격함 만들기, 디자인 시스템 가이드 문서를 더 친절하게 만들기. 디자인 시스템에 익숙하지 않은 디자이너와 개발.
이미 디자인 시스템 자체는 유연한데도 사람들은 커스첨 UI를 쓰고 있었다 - 2만가지 이상 조합이 가능한 UI 를 표현할 수 잇는 컴포넌트 디자인이지만. 이 컴초넌트를 어케 활용하는지 알수 없어서
디자인 시스템을 활용하여 표현한 것이 개발 생산성을 훨씬 높임
디자인 시스템 Coverage 계산기 ㅣ 디자인 시스템 더 잘 활용하게 넛지. 디자인 권장 패턴에 맞게 만들었는지 체크,
커버리지 100% 만들고 넛지 효과 : 갈수록 기능이 많아져가는 디자인 시스템.
학습비용 -? 모든 기능을 활용하지 않게 됨 - 다시 파편화
해결법 ㅣ 디자인 시스템의 패턴 사용률을 실시간으로 표기
코드 기반의 디자인 툴 : React + DST
프론트엔드 시스템 엔지니어링?
UI 작업방식에서 일정한 패턴을 발견하고 시스템화하여 효율화하기
중복작업 줄이기. 자동화하기 조직규모의 복잡성이 커져도 퀄리티와 생산성 유지하기..
프론트엔드 시스템 엔지니어링
? 디자이너와 프론트 엔드 개발자의 경계가 허물어질까?
UI 코딩하는 작업이 완전히 사라질 수 있을까?
