디자인 시스템(Design System)

쉬운 설명

일관된 제품 화면을 만들기 위한 원칙, 컴포넌트, 패턴, 규칙의 체계.

실제로는 이렇게 만나요

색상과 간격 토큰, Button·Input 컴포넌트, 오류 메시지 규칙, Figma 라이브러리와 코드 문서를 함께 운영할 수 있습니다.

• 이런 거 할 때 나와요 버튼과 입력창을 화면마다 새로 만들지 않고 재사용하면 디자인과 개발 속도, 접근성을 함께 안정시킬 수 있습니다.
• 이렇게 생겼어요 디자인 시스템(Design System)은(는) Design Token, Component, Figma 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
• 나오는 화면 예시 프로덕트 / 협업 작업을 하다가 Design Token, Component, Figma를 확인하는 화면

헷갈리기 쉬운 점

컴포넌트 모음만으로는 충분하지 않습니다. 언제 어떤 패턴을 써야 하는지와 변경 관리 기준도 필요합니다.

왜 알아두면 좋을까요?

버튼과 입력창을 화면마다 새로 만들지 않고 재사용하면 디자인과 개발 속도, 접근성을 함께 안정시킬 수 있습니다.