Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

SoYoung210
October 15, 2022

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

디자인 시스템의 형태를 넘어서 어떻게 정의할 지에 대한 고민을 담은 발표입니다.

디자인 시스템의 구성요소를 형태/기능/접근성/커스텀 네 가지로 바라보았고,
이를 바탕으로 만들어지고 있는 flex design system인 linear의 principle과 구현에 대해서 이야기 합니다.

SoYoung210

October 15, 2022
Tweet

More Decks by SoYoung210

Other Decks in Programming

Transcript

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

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

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

    List를 여닫기 마우스/키보드 • 키보드 탐색 • 옵션 검색 • 선택된 아이템 표현 • N개 아이템 선택 접근성 커스텀 형태 기본 스타일 • … • 키보드 탐색 힌트 • popup 요소에 대한 힌트
  4. linear FDS 2.0 FDS 1.0 일관성이 부족한 props 형태 커스텀

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

    불가능 키보드 지원 안됨 접근성, 기능 지원 부족 🎨 OO하게 표현하고 싶은데… 💬 우회책을 찾아서… 💬 써야할지..사용법이… 💬 이것도 디자인 시스템에서 다뤄야 하나..?
  6. linear Design System Principles 1 2 3 기능은 형태와 독립적이다.

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

    기본동작을 보장한다. 최소한의 제약만 가진다.
  8. 형태만 다를 뿐, 같은 기능 의미 이다. 그리고, 더 많은

    variation도 가능하다. Checkbox / Radio 기능은 형태와 독립적이다.
  9. linear Design System Principles 1 2 3 기능은 형태와 독립적이다.

    기본동작을 보장한다. 최소한의 제약만 가진다.
  10. id modal title id id modal description id 접근성 기본동작을

    보장한다 Public Interface Internal Implements
  11. linear Design System Principles 1 2 3 기능은 형태와 독립적이다.

    기본동작을 보장한다. 최소한의 제약만 가진다.
  12. 기본동작이 아닌 것은 정의하지 않는다. linear Design System Principles 1

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

    기본동작을 보장한다. 최소한의 제약만 가진다.
  14. <Checkbox /> / <RadioGroup /> <CheckboxPrimitive /> / <RadioGroupPrimitive />

    Checkbox / Radio 기능은 형태와 독립적이다.
  15. <Checkbox /> / <RadioGroup /> <CheckboxPrimitive /> / <RadioGroupPrimitive />

    Checkbox / Radio 기능은 형태와 독립적이다.
  16. <Checkbox /> / <RadioGroup /> <CheckboxPrimitive /> / <RadioGroupPrimitive />

    Checkbox / Radio 기능은 형태와 독립적이다.
  17. 1. trigger reference를 context를 통해 공유 2. trigger 위치 기반으로

    Content위치 결정 https://github.com/radix-ui/primitives/blob/main/packages/react/menu/src/Menu.tsx Trigger Component 기능은 형태와 독립적이다.
  18. linear Design System Practices 1 2 3 기능은 형태와 독립적이다.

    기본동작을 보장한다. 최소한의 제약만 가진다. • Primitive Component Checkbox • Trigger Component • Scroll 영역 • 접근성 • 추상화된 인터페이스
  19. 저도 공감하는데 … linear가 조합형으로 잘 만들어져있어서 기본적으로 모든 UI

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

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

    를 구현 가능하지만 반대급부로 디자인 레벨에서 자주 쓰이는 패턴도 사용처별로 매번 정의해야하는 불편함이 있다고 느낍니다. linear가 순수한 조각의 역할이라 이를 조합한 형태로 자주 사용하는데, 이렇게 조합된 세트를 컴포넌트를 재활용할 수 있으면 좋겠습니다. 예를 들어 …. 조합에 대한 비효율 해결이 필요하다. 어디서? 어떻게?
  22. linear? 조합에 대한 비효율 linear 요구사항 요구사항 요구사항 희망사항 이상한

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

    자유롭게 조합 가능 • 반복작업의 비효율을 줄임 • 구체적인 dataType을 다룰수도 있음. • 특정 기능 을 위해 존재할 수 있음 linear 추가기능 linear extension Primitive Component
  24. 디자인 시스템, 어떻게 정의할 것인가 • 형태가 강하게 결합된 디자인

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

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

    시스템의 문제점 • 다양한 상황을 대응할 수 없음 디자인 시스템이 병목이 됨 • 디자인 시스템을 형태/기능/접근성/커스텀 네 가지 구성 정의 • flex design system linear • 컴포넌트의 기능은 형태와 독립적이어야 한다. • 기본 동작을 보장한다. • 최소한의 제약만 정의한다. Primitive Component • Primitive Component의 문제점 • 조합에 대한 비효율
  27. What Reference Design Platform 💬 Component 추상화 레벨이… 💬 Dropdown

    / Select를 구분해야할까? 💬 Figma Component 인터페이스… 💬 Popover / Dropdown … 💬 유연함을 유지하면서 파편화를 줄이려면… 💬 컴포넌트에서 다루는 기본 의 범위… 💬 코드와 디자인의 일치…
  28. 디자인 시스템, 어떻게 정의할 것인가 • 형태가 강하게 결합된 디자인

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