디자인 시스템, 형태를 넘어서

Slide 1

Slide 1 text

디자인 시스템, 형태를 넘어서 이소영 flex Team

Slide 2

Slide 2 text

SoYoung Design Engineer @ f lex Team Lee

Slide 3

Slide 3 text

Problem

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

형태

Slide 7

Slide 7 text

형태 명사: 사물의 생김새나 모양

Slide 8

Slide 8 text

형태 명사: 컴포넌트의 생김새나 모양

Slide 9

Slide 9 text

형태

Slide 10

Slide 10 text

형태 스타일

Slide 11

Slide 11 text

형태 스타일 커스텀

Slide 12

Slide 12 text

커스텀

Slide 13

Slide 13 text

커스텀 제약

Slide 14

Slide 14 text

커스텀 제약

Slide 15

Slide 15 text

💬 아이콘 커스텀… 💬 ੉ ৔৉੉ ਵ۽ب ಴അ оמ೧ঠ ೞҊ.. 💬 Ӓր Text 형태로도.. 커스텀 제약

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

< SuperSuperBigSelect /

Slide 18

Slide 18 text

SoManySelects

Slide 19

Slide 19 text

< SuperSuperBigSelect / SoManySelects

Slide 20

Slide 20 text

< SuperSuperBigSelect / Requirements Design System

Slide 21

Slide 21 text

SoManySelects A기능 B기능 D기능 C기능 E기능

Slide 22

Slide 22 text

🍝 < Select / 🔥 if else, if else…

Slide 23

Slide 23 text

Design System Expectations Responsibility for

Slide 24

Slide 24 text

디자인 시스템에 무엇을 기대하나요?

Slide 25

Slide 25 text

Design System Definition of

Slide 26

Slide 26 text

형태 기본 스타일 기능 접근성 커스텀

Slide 27

Slide 27 text

< Select / 기능 접근성 커스텀 형태 기본 스타일

Slide 28

Slide 28 text

< Select / color, layout, weight … 형태 기본 스타일

Slide 29

Slide 29 text

< Select / 형태 기본 스타일 color, layout, weight … 기능 • Option List를 여닫기 마우스/키보드 • 키보드 탐색 • 옵션 검색 • 선택된 아이템 표현 • N개 아이템 선택

Slide 30

Slide 30 text

< Select / 형태 기본 스타일 color, layout, weight … 기능 • Option List를 여닫기 마우스/키보드 • 키보드 탐색 • 옵션 검색 • 선택된 아이템 표현 • N개 아이템 선택 접근성 • … • 키보드 탐색 힌트 • popup 요소에 대한 힌트

Slide 31

Slide 31 text

< Select / color, layout, weight … 기능 • Option List를 여닫기 마우스/키보드 • 키보드 탐색 • 옵션 검색 • 선택된 아이템 표현 • N개 아이템 선택 접근성 커스텀 형태 기본 스타일 • … • 키보드 탐색 힌트 • popup 요소에 대한 힌트

Slide 32

Slide 32 text

형태 기본 스타일 기능 접근성 커스텀

Slide 33

Slide 33 text

형태 기본 스타일 기능 접근성 커스텀 A

Slide 34

Slide 34 text

형태

Slide 35

Slide 35 text

형태

Slide 36

Slide 36 text

형태 기본 스타일 기능 접근성 커스텀 A B

Slide 37

Slide 37 text

linear

Slide 38

Slide 38 text

linear FDS 2.0 FDS 1.0

Slide 39

Slide 39 text

linear FDS 2.0 FDS 1.0 일관성이 부족한 props 형태 커스텀 불가능 키보드 지원 안됨 접근성, 기능 지원 부족

Slide 40

Slide 40 text

linear FDS 2.0 FDS 1.0 일관성이 부족한 props 형태 커스텀 불가능 키보드 지원 안됨 접근성, 기능 지원 부족 🎨 OO하게 표현하고 싶은데… 💬 우회책을 찾아서… 💬 써야할지..사용법이… 💬 이것도 디자인 시스템에서 다뤄야 하나..?

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

linear Design System Principles 1 2 3 기능은 형태와 독립적이다. 기본동작을 보장한다. 최소한의 제약만 가진다.

Slide 43

Slide 43 text

linear Design System Principles 1 2 3 기능은 형태와 독립적이다. 기본동작을 보장한다. 최소한의 제약만 가진다.

Slide 44

Slide 44 text

Checkbox / Radio 기능은 형태와 독립적이다.

Slide 45

Slide 45 text

형태만 다를 뿐, 같은 기능 의미 이다. 그리고, 더 많은 variation도 가능하다. Checkbox / Radio 기능은 형태와 독립적이다.

Slide 46

Slide 46 text

Trigger Component 기능은 형태와 독립적이다.

Slide 47

Slide 47 text

Trigger Component 기능은 형태와 독립적이다.

Slide 48

Slide 48 text

Trigger Component 기능은 형태와 독립적이다.

Slide 49

Slide 49 text

Trigger Component 기능은 형태와 독립적이다.

Slide 50

Slide 50 text

Trigger Component 기능은 형태와 독립적이다.

Slide 51

Slide 51 text

Trigger Component 기능은 형태와 독립적이다. < Modal / < Dialog /

Slide 52

Slide 52 text

linear Design System Principles 1 2 3 기능은 형태와 독립적이다. 기본동작을 보장한다. 최소한의 제약만 가진다.

Slide 53

Slide 53 text

많은 기본 기능 🤔

Slide 54

Slide 54 text

적은 기본 기능 🤔

Slide 55

Slide 55 text

Scroll영역 기본동작을 보장한다

Slide 56

Slide 56 text

Scroll영역 기본동작을 보장한다

Slide 57

Slide 57 text

Scroll영역 기본동작을 보장한다

Slide 58

Slide 58 text

접근성 기본동작을 보장한다

Slide 59

Slide 59 text

id modal title id id modal description id 접근성 기본동작을 보장한다 Public Interface Internal Implements

Slide 60

Slide 60 text

접근성 기본동작을 보장한다

Slide 61

Slide 61 text

접근성 기본동작을 보장한다 Public Interface Internal Implements

Slide 62

Slide 62 text

linear Design System Principles 1 2 3 기능은 형태와 독립적이다. 기본동작을 보장한다. 최소한의 제약만 가진다.

Slide 63

Slide 63 text

기본동작이 아닌 것은 정의하지 않는다. linear Design System Principles 1 2 3 기능은 형태와 독립적이다. 최소한의 제약만 가진다.

Slide 64

Slide 64 text

dateType ❌ 구체적인 타입 기본기능이 아닌것 < ActivityLog /

Slide 65

Slide 65 text

set❌ 🙆 구체적인 형태 기본기능이 아닌것

Slide 66

Slide 66 text

linear Design System Principles 1 2 3 기능은 형태와 독립적이다. 기본동작을 보장한다. 최소한의 제약만 가진다.

Slide 67

Slide 67 text

자유로운 커스텀 최소한의 제약만 가진다.

Slide 68

Slide 68 text

자유로운 커스텀 최소한의 제약만 가진다.

Slide 69

Slide 69 text

자유로운 커스텀 최소한의 제약만 가진다. 👀

Slide 70

Slide 70 text

자유로운 커스텀 최소한의 제약만 가진다.

Slide 71

Slide 71 text

, 자유로운 커스텀 최소한의 제약만 가진다.

Slide 72

Slide 72 text

자유로운 커스텀 최소한의 제약만 가진다. 모든 케이스를 List, List.Item에서 정의할 수 없다.

Slide 73

Slide 73 text

자유로운 커스텀 최소한의 제약만 가진다.

Slide 74

Slide 74 text

linear Principle to Practice

Slide 75

Slide 75 text

Checkbox / Radio 기능은 형태와 독립적이다.

Slide 76

Slide 76 text

/ / Checkbox / Radio 기능은 형태와 독립적이다.

Slide 77

Slide 77 text

/ / Checkbox / Radio 기능은 형태와 독립적이다.

Slide 78

Slide 78 text

/ / Checkbox / Radio 기능은 형태와 독립적이다.

Slide 79

Slide 79 text

Trigger Component 기능은 형태와 독립적이다.

Slide 80

Slide 80 text

Trigger Component 기능은 형태와 독립적이다.

Slide 81

Slide 81 text

https://kentcdodds.com/blog/compound-components-with-react-hooks Trigger Component 기능은 형태와 독립적이다. Compound Component “ ”

Slide 82

Slide 82 text

https://kentcdodds.com/blog/compound-components-with-react-hooks Trigger Component 기능은 형태와 독립적이다. Context API “ ”

Slide 83

Slide 83 text

https://kentcdodds.com/blog/compound-components-with-react-hooks Trigger Component 기능은 형태와 독립적이다.

Slide 84

Slide 84 text

Trigger Component 기능은 형태와 독립적이다.

Slide 85

Slide 85 text

1. root에 context선언 https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx Trigger Component 기능은 형태와 독립적이다.

Slide 86

Slide 86 text

1. trigger reference를 context를 통해 공유 https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx Trigger Component 기능은 형태와 독립적이다.

Slide 87

Slide 87 text

1. trigger reference를 context를 통해 공유 2. trigger 위치 기반으로 Content위치 결정 https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx Trigger Component 기능은 형태와 독립적이다.

Slide 88

Slide 88 text

Scroll영역 기본동작을 보장한다

Slide 89

Slide 89 text

Scroll영역 기본동작을 보장한다

Slide 90

Slide 90 text

Scroll영역 기본동작을 보장한다

Slide 91

Slide 91 text

Scroll영역 기본동작을 보장한다 scrollTop이 title영역 이상일 때

Slide 92

Slide 92 text

접근성 기본동작을 보장한다 Public Interface Internal Implements

Slide 93

Slide 93 text

접근성 기본동작을 보장한다 https://github.com/radix-ui/primitives/tree/main/packages/react/collection ItemSlot: ref, value, disabled prop을 알 수 있음

Slide 94

Slide 94 text

접근성 기본동작을 보장한다 https://github.com/radix-ui/primitives/tree/main/packages/react/collection 1. useCollection

Slide 95

Slide 95 text

접근성 기본동작을 보장한다 https://so-so.dev/react/make-select/#ೞטইې-ف-ѐ੄-focusח-হ׮ 2. useListNavigation

Slide 96

Slide 96 text

접근성 기본동작을 보장한다 https://so-so.dev/react/make-select/#ೞטইې-ف-ѐ੄-focusח-হ׮

Slide 97

Slide 97 text

기본동작을 보장한다 접근성

Slide 98

Slide 98 text

linear Design System Practices 1 2 3 기능은 형태와 독립적이다. 기본동작을 보장한다. 최소한의 제약만 가진다. • Primitive Component Checkbox • Trigger Component • Scroll 영역 • 접근성 • 추상화된 인터페이스

Slide 99

Slide 99 text

Next linear + a

Slide 100

Slide 100 text

저도 공감하는데 … linear가 조합형으로 잘 만들어져있어서 기본적으로 모든 UI 를 구현 가능하지만 반대급부로 디자인 레벨에서 자주 쓰이는 패턴도 사용처별로 매번 정의해야하는 불편함이 있다고 느낍니다. linear가 순수한 조각의 역할이라 이를 조합한 형태로 자주 사용하는데, 이렇게 조합된 세트를 컴포넌트를 재활용할 수 있으면 좋겠습니다. 예를 들어 …. 조합에 대한 비효율

Slide 101

Slide 101 text

Slide 102

Slide 102 text

Slide 103

Slide 103 text

linear? 조합에 대한 비효율 linear 요구사항 요구사항 요구사항 희망사항 이상한 사항 linear • 높은 확장성 • 자유롭게 조합 가능 Primitive Component • 컴포넌트마다 추상화, 조합의 용이성 등 이 모두 다름 ??????

Slide 104

Slide 104 text

linear extension. 조합에 대한 비효율 linear • 높은 확장성 • 자유롭게 조합 가능 • 반복작업의 비효율을 줄임 • 구체적인 dataType을 다룰수도 있음. • 특정 기능 을 위해 존재할 수 있음 linear 추가기능 linear extension Primitive Component

Slide 105

Slide 105 text

linear extension. 조합에 대한 비효율 linear linear extension < TextField / < PriceField / < Avatar / < CheckableAvatar /

Slide 106

Slide 106 text

Recap

Slide 107

Slide 107 text

디자인 시스템, 형태를 넘어서

Slide 108

Slide 108 text

디자인 시스템, 어떻게 정의할 것인가

Slide 109

Slide 109 text

디자인 시스템, 어떻게 정의할 것인가 • 형태가 강하게 결합된 디자인 시스템의 문제점 • 다양한 상황을 대응할 수 없음 디자인 시스템이 병목이 됨

Slide 110

Slide 110 text

디자인 시스템, 어떻게 정의할 것인가 • 형태가 강하게 결합된 디자인 시스템의 문제점 • 다양한 상황을 대응할 수 없음 디자인 시스템이 병목이 됨 • 디자인 시스템을 형태/기능/접근성/커스텀 네 가지 구성 정의

Slide 111

Slide 111 text

디자인 시스템, 어떻게 정의할 것인가 • 형태가 강하게 결합된 디자인 시스템의 문제점 • 다양한 상황을 대응할 수 없음 디자인 시스템이 병목이 됨 • 디자인 시스템을 형태/기능/접근성/커스텀 네 가지 구성 정의 • flex design system linear • 컴포넌트의 기능은 형태와 독립적이어야 한다. • 기본 동작을 보장한다. • 최소한의 제약만 정의한다. Primitive Component • Primitive Component의 문제점 • 조합에 대한 비효율

Slide 112

Slide 112 text

What Reference Design Platform 💬 Component 추상화 레벨이… 💬 Dropdown / Select를 구분해야할까? 💬 Figma Component 인터페이스… 💬 Popover / Dropdown … 💬 유연함을 유지하면서 파편화를 줄이려면… 💬 컴포넌트에서 다루는 기본 의 범위… 💬 코드와 디자인의 일치…

Slide 113

Slide 113 text

How Reference primitives internal package Main Ariakit tamagui accessibility Others..

Slide 114

Slide 114 text

디자인 시스템, 어떻게 정의할 것인가 • 형태가 강하게 결합된 디자인 시스템의 문제점 • 다양한 상황을 대응할 수 없음 디자인 시스템이 병목이 됨 • 디자인 시스템을 형태/기능/접근성/커스텀 네 가지 구성 정의 • flex design system linear • 컴포넌트의 기능은 형태와 독립적이어야 한다. • 기본 동작을 보장한다. • 최소한의 제약만 정의한다. • Primitive Component의 문제점 Primitive Component • 조합에 대한 비효율 • 감사합니다. • Design Platform Team, flex FE Chapter, FEConf