Component 4장 카드뉴스

버튼·카드·메뉴처럼 반복해서 쓰이는 화면 조각을 한 번 만들어 두고 여러 곳에서 가져다 쓰는 단위로, 2013년 미국 Meta(전 Facebook)가 React를 발표하며 현대 웹·앱 개발의 표준이 된 개념입니다.

예전에는 같은 모양의 버튼을 화면마다 따로 그렸어요. 컴포넌트는 '버튼 한 번만 잘 만들어 두고 어디서든 가져다 쓰자'는 발상입니다. 한국의 토스·당근·네이버는 1,000개 이상의 컴포넌트로 화면을 조립하고, 미국 Apple·Google도 같은 방식을 씁니다. AI 시대에는 v0·Cursor 같은 도구가 컴포넌트 코드를 자동 생성해, 비전공자도 디자인 시스템 부품으로 화면을 만들 수 있습니다.

[토스 TDS 컴포넌트] 구분: 토스는 1,200개 이상 컴포넌트를 Figma·React 양쪽으로 관리. 수치: 신규 화면 출시 시간 60% 단축 {{src:토스 디자인|https://design.toss.im/}}. 결과: 디자이너·개발자가 회의 없이 동일 부품 사용. [shadcn/ui · 오픈소스 컴포넌트] 구분: 미국 1인 개발자 Shadcn이 만든 오픈소스 컴포넌트 모음. 수치: