Component library, Pattern library, Yahoo 2006

한 줄로

재사용 가능한 UI 컴포넌트의 모음입니다. Yahoo!가 2006년 발표한 Yahoo! Design Pattern Library가 첫 공개 사례입니다.

어디서 왔나

2006년, Yahoo!가 공개적으로 Yahoo! Design Pattern Library를 발표했습니다. 자사 내부에서 쓰던 UI 패턴들을 문서화한 것입니다. 이게 디자인 시스템 산업의 시작점 중 하나로 여겨집니다.

이후:

• Twitter Bootstrap (2011): 가장 유명한 공개 컴포넌트 라이브러리.
• Material UI / MUI (2014): React 기반.
• shadcn/ui (2023): copy-paste 방식의 새로운 접근.

Component library vs Pattern library

• Pattern library: 추상적 패턴 (어떻게 디자인할지의 지침). 코드가 없을 수도 있음.
• Component library: 실제 동작하는 코드. import 해서 바로 사용.

현대는 둘이 거의 합쳐졌습니다. Material UI 같은 도구는 둘 다 제공합니다.

도구

• Bootstrap: HTML/CSS 기반.
• MUI (Material UI): React + Material Design.
• Ant Design: 중국 발 React 라이브러리.
• shadcn/ui: Radix UI + Tailwind. 코드를 직접 복사하는 방식.
• Chakra UI: 접근성 우선.
• anti-card (Freeive): 한국 발 안티 디자인 라이브러리.

직접 만들 vs 사용

직접 만들기:

• 브랜드 정체성이 강할 때.
• 외부 의존성을 줄이고 싶을 때.

사용:

• 빠른 출시가 중요할 때.
• 1인 랩 초기.

바이브 메이커가 챙길 한 가지

처음에는 shadcn/ui 같은 copy-paste 라이브러리로 시작합시다. 본인 정체성이 굳어지면 점진적으로 커스텀합니다. 처음부터 직접 만드는 건 시간 낭비입니다.

관련

Atomic design · Design tokens · Storybook