구제화된 디자인 시스템을 컴포넌트로 추상화 하기

date
Oct 28, 2023
slug
component-abstraction
summary
버튼 예시로 컴포넌트를 추상화 해보자
thumbnail
status
unpublish
(출처/참고 : Anatomy of a Design System, Adobe 디자인 시스템 디자이너 Nate Baldwin)
(출처/참고 : Anatomy of a Design System, Adobe 디자인 시스템 디자이너 Nate Baldwin)
현재 사내에서 디자인 시스템을 고도화하는 과정에 있다.
디자인 시스템은 서비스(사내)의 디자인 철학을 정하고 디자이너와 개발자를 포함한 모든 이해 관계자들 간의 커뮤니케이션 코스트를 줄일 수 있는 모든 것이라고 생각한다.
이 과정에서 개발자는 무엇을 해야할까?
프론트엔드 개발자라면 디자인 시스템 원칙으로 정의된 UI를 UI Kit 로 만들어, 사내 개발자들이 픽셀에 집중하지 않고 로직에 집중할 수 있도록 컴포넌트를 코드로 구체화해야 할 것이다.
이 과정에서 문득 드는 고민이 있다. 😟
얼마나 컴포넌트에게 자유도를 주고 자유도를 위해 어느 정도까지 추상화해야 하는 거지..?

Typography 컴포넌트 만들기

텍스트를 표현하는 컴포넌트(Typography)를 구현한다고 가정하자.
import { PropsWithChildren } from "react";

function Typography({ children }: PropsWithChildren) {
  return <p>{children}</p>;
}

export default Typography;
위 컴포넌트의 문제점을 뭘 까?