Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

SoYoung210
October 15, 2022

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

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

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

SoYoung210

October 15, 2022
Tweet

More Decks by SoYoung210

Other Decks in Programming

Transcript

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

    View Slide

  2. SoYoung
    Design Engineer @
    f
    lex Team
    Lee

    View Slide

  3. Problem

    View Slide

  4. View Slide

  5. View Slide

  6. 형태

    View Slide

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

    View Slide

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

    View Slide

  9. 형태

    View Slide

  10. 형태
    스타일

    View Slide

  11. 형태
    스타일 커스텀

    View Slide

  12. 커스텀

    View Slide

  13. 커스텀
    제약

    View Slide

  14. 커스텀
    제약

    View Slide

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

    View Slide

  16. View Slide

  17. <
    SuperSuperBigSelect /

    View Slide

  18. SoManySelects

    View Slide

  19. <
    SuperSuperBigSelect / SoManySelects

    View Slide

  20. <
    SuperSuperBigSelect /
    Requirements
    Design System

    View Slide

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

    View Slide

  22. 🍝
    <
    Select / 🔥
    if else, if else…

    View Slide

  23. Design System
    Expectations Responsibility for

    View Slide

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

    View Slide

  25. Design System
    Definition of

    View Slide

  26. 형태


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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. 형태


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

    View Slide

  33. 형태


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

    View Slide

  34. 형태


    View Slide

  35. 형태


    View Slide

  36. 형태


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

    View Slide

  37. linear

    View Slide

  38. linear
    FDS 2.0
    FDS 1.0

    View Slide

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

    View Slide

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

    View Slide

  41. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. 많은 기본 기능
    🤔

    View Slide

  54. 적은 기본 기능
    🤔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  74. linear
    Principle to Practice

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  99. Next
    linear + a

    View Slide

  100. 저도 공감하는데 …


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


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


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


    예를 들어 ….


    조합에 대한 비효율

    View Slide

  101. 저도 공감하는데 …


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


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


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


    예를 들어 ….


    조합에 대한 비효율
    해결이 필요하다.

    View Slide

  102. 저도 공감하는데 …


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


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


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


    예를 들어 ….


    조합에 대한 비효율
    해결이 필요하다. 어디서? 어떻게?

    View Slide

  103. linear?
    조합에 대한 비효율
    linear
    요구사항
    요구사항
    요구사항
    희망사항 이상한 사항
    linear
    • 높은 확장성


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

    View Slide

  104. linear extension.
    조합에 대한 비효율
    linear
    • 높은 확장성


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


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


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

    View Slide

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

    View Slide

  106. Recap

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide