구제화된 디자인 시스템을 컴포넌트로 추상화 하기
date
Oct 28, 2023
slug
component-abstraction
summary
버튼 예시로 컴포넌트를 추상화 해보자
thumbnail
status
unpublish

현재 사내에서
디자인 시스템
을 고도화하는 과정에 있다. 디자인 시스템
은 서비스(사내)의 디자인 철학을 정하고 디자이너와 개발자를 포함한 모든 이해 관계자들 간의 커뮤니케이션 코스트를 줄일 수 있는 모든 것이라고 생각한다. 이 과정에서 개발자는 무엇을 해야할까?
프론트엔드 개발자라면 디자인 시스템 원칙으로 정의된
UI
를 UI Kit
로 만들어, 사내 개발자들이 픽셀에 집중하지 않고 로직에 집중할 수 있도록 컴포넌트를 코드로 구체화해야 할 것이다.이 과정에서 문득 드는 고민이 있다. 😟
얼마나 컴포넌트에게자유도
를 주고자유도
를 위해 어느 정도까지추상화
해야 하는 거지..?
Typography 컴포넌트 만들기
텍스트를 표현하는 컴포넌트(Typography)를 구현한다고 가정하자.
import { PropsWithChildren } from "react"; function Typography({ children }: PropsWithChildren) { return <p>{children}</p>; } export default Typography;
위 컴포넌트의 문제점을 뭘 까?