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

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

View Slide

SoYoung
Design Engineer @
f
lex Team
Lee

View Slide

Problem

View Slide

View Slide

형태

View Slide

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

View Slide

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

View Slide

형태

View Slide

형태
스타일

View Slide

형태
스타일 커스텀

View Slide

커스텀

View Slide

커스텀
제약

View Slide

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

View Slide

View Slide

<
SuperSuperBigSelect /

View Slide

SoManySelects

View Slide

<
SuperSuperBigSelect / SoManySelects

View Slide

<
SuperSuperBigSelect /
Requirements
Design System

View Slide

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

View Slide

🍝
<
Select / 🔥
if else, if else…

View Slide

Design System
Expectations Responsibility for

View Slide

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

View Slide

Design System
Definition of

View Slide

형태

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

View Slide

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

View Slide

<
Select /
color, layout, weight …

View Slide

<
Select /
기능
• Option List를 여닫기 마우스/키보드
• 키보드 탐색
• 옵션 검색
• 선택된 아이템 표현
• N개 아이템 선택

View Slide

<
Select /
기능
• 옵션 검색
접근성
• …
• 키보드 탐색 힌트
• popup 요소에 대한 힌트

View Slide

<
Select /
기능
• 옵션 검색
접근성
커스텀
• …
• 키보드 탐색 힌트
• popup 요소에 대한 힌트

View Slide

형태

기본 스타일

View Slide

형태

기본 스타일
A

View Slide

형태

View Slide

형태

기본 스타일
A B

View Slide

linear

View Slide

linear
FDS 2.0
FDS 1.0

View Slide

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

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

Trigger Component

View Slide

Trigger Component
<
Modal /
<
Dialog /

View Slide

Principles
1 2 3

View Slide

많은 기본 기능
🤔

View Slide

적은 기본 기능
🤔

View Slide

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

View Slide

접근성

View Slide

id modal title id
id modal description id
접근성
Public Interface
Internal Implements

View Slide

접근성

View Slide

접근성
Public Interface
Internal Implements

View Slide

Principles
1 2 3

View Slide

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

View Slide

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

View Slide

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

View Slide

Principles
1 2 3

View Slide

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

View Slide

👀

View Slide


View Slide

,

View Slide

모든 케이스를 List, List.Item에서 정의할 수 없다.

View Slide


View Slide

linear
Principle to Practice

View Slide

Checkbox / Radio

View Slide

/
/
Checkbox / Radio

View Slide

Trigger Component

View Slide

https://kentcdodds.com/blog/compound-components-with-react-hooks
Trigger Component
Compound Component
“ ”

View Slide

Trigger Component
Context API
“ ”

View Slide

Trigger Component

View Slide

1. root에 context선언
https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx
Trigger Component

View Slide

1. trigger reference를 context를 통해 공유
Trigger Component

View Slide

1. trigger reference를 context를 통해 공유
2. trigger 위치 기반으로 Content위치 결정
Trigger Component

View Slide

Scroll영역

View Slide

Scroll영역
scrollTop이 title영역 이상일 때

View Slide

접근성
Public Interface
Internal Implements

View Slide

접근성
https://github.com/radix-ui/primitives/tree/main/packages/react/collection
ItemSlot: ref, value, disabled prop을 알 수 있음

View Slide

접근성
https://github.com/radix-ui/primitives/tree/main/packages/react/collection
1. useCollection

View Slide

접근성
https://so-so.dev/react/make-select/#ೞטইې-ف-ѐ੄-focusח-হ׮
2. useListNavigation

View Slide

접근성
https://so-so.dev/react/make-select/#ೞטইې-ف-ѐ੄-focusח-হ׮

View Slide

접근성

View Slide

Practices
1 2 3
• Primitive Component Checkbox
• Trigger Component
• Scroll 영역
• 접근성
• 추상화된 인터페이스

View Slide

Next
linear + a

View Slide

저도 공감하는데 …

linear가 조합형으로 잘 만들어져있어서 기본적으로 모든 UI 를 구현 가능하지만 반대급부로

디자인 레벨에서 자주 쓰이는 패턴도 사용처별로 매번 정의해야하는 불편함이 있다고 느낍니다.
linear가 순수한 조각의 역할이라 이를 조합한 형태로 자주 사용하는데,

이렇게 조합된 세트를 컴포넌트를 재활용할 수 있으면 좋겠습니다.

예를 들어 ….

조합에 대한 비효율

View Slide





예를 들어 ….

해결이 필요하다.

View Slide





예를 들어 ….

해결이 필요하다. 어디서? 어떻게?

View Slide

linear?
linear
요구사항
요구사항
요구사항
희망사항 이상한 사항
linear
• 높은 확장성

• 자유롭게 조합 가능
Primitive Component
• 컴포넌트마다 추상화, 조합의 용이성 등
이 모두 다름
??????

View Slide

linear extension.
linear
• 높은 확장성

• 자유롭게 조합 가능
• 반복작업의 비효율을 줄임

• 구체적인 dataType을 다룰수도 있음.

• 특정 기능 을 위해 존재할 수 있음
linear 추가기능
linear
extension
Primitive Component

View Slide

linear extension.
linear linear
extension
<
TextField /
<
PriceField /
<
Avatar /
<
CheckableAvatar /

View Slide

Recap

View Slide

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

View Slide

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

View Slide

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

View Slide

• 디자인 시스템을 형태/기능/접근성/커스텀 네 가지 구성 정의

View Slide

• flex design system linear
• 컴포넌트의 기능은 형태와 독립적이어야 한다.
• 기본 동작을 보장한다.
• 최소한의 제약만 정의한다.
Primitive Component
• Primitive Component의 문제점
• 조합에 대한 비효율

View Slide

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

View Slide

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

View Slide

• flex design system linear
• 컴포넌트의 기능은 형태와 독립적이어야 한다.
• 기본 동작을 보장한다.
• 최소한의 제약만 정의한다.
• Primitive Component의 문제점
Primitive Component
• 조합에 대한 비효율
• 감사합니다.
• Design Platform Team, flex FE Chapter, FEConf

View Slide

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

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

SoYoung210

More Decks by SoYoung210

Other Decks in Programming

Featured

Transcript