디자인 시스템 (Design System)

개요·정의

디자인 시스템(Design System)은 여러 제품과 화면에서 반복해서 사용하는 디자인 요소와 사용 규칙을 하나의 체계로 정리한 것이다. 색과 서체, 아이콘, 간격뿐 아니라 버튼과 입력창 같은 컴포넌트, 화면 구성 방식, 움직임, 접근성 기준까지 포함할 수 있다.

앱 하나의 화면을 예쁘게 맞추는 것과는 다르다. 수십 개의 서비스와 수백 명의 디자이너·개발자가 동시에 작업해도 버튼의 높이와 색, 오류 메시지, 메뉴의 동작이 제각각 달라지지 않도록 공통 기준을 만든다.

최근 디자인 시스템에서는 디자인 토큰(Design Token)과 컴포넌트가 중요한 역할을 한다. 특정 파란색을 화면마다 직접 입력하는 대신 `Primary Color`처럼 역할을 정하고 값을 연결하면 브랜드 색이 바뀌었을 때 여러 제품을 한꺼번에 수정할 수 있다. 버튼이나 메뉴 역시 디자인 파일과 실제 코드에서 같은 구조를 공유하는 방향으로 발전하고 있다.

특징

디자인 시스템은 가장 작은 값부터 시작한다. 색, 글자 크기, 간격, 모서리 반경, 그림자 같은 기본 값을 정하고 이를 토큰으로 관리한다. 그 위에 버튼과 체크박스, 카드, 메뉴 같은 컴포넌트를 만든다.

컴포넌트에는 모양뿐 아니라 상태도 포함된다. 버튼이라면 기본 상태와 눌렀을 때, 사용할 수 없을 때, 키보드로 선택됐을 때가 모두 필요하다. 같은 버튼을 여러 서비스가 공유하면 사용자는 제품이 바뀌어도 익숙한 방식으로 조작할 수 있다.

규칙은 기기마다 그대로 복사하지 않는다. 스마트폰과 스마트워치는 화면 크기와 사용 시간이 다르고, 데스크톱은 마우스와 키보드를 함께 사용한다. 하나의 디자인 언어를 유지하면서 각 기기에 맞는 컴포넌트와 배치를 따로 마련해야 한다.

디자인과 개발을 연결하는 역할도 크다. 디자인 도구에만 존재하는 버튼이 아니라 실제 코드 라이브러리까지 함께 관리하면 새로운 화면을 만들 때 이미 검증된 부품을 가져다 쓸 수 있다. 수정 사항도 여러 서비스에 빠르게 반영할 수 있다.

사례

구글 머티리얼 3 익스프레시브

구글은 2025년 머티리얼 3 익스프레시브(Material 3 Expressive)를 공개하며 안드로이드와 Wear OS의 디자인 시스템을 크게 확장했다. 색과 서체뿐 아니라 다양한 형태의 컴포넌트, 스프링 애니메이션, 형태가 변하는 모션, 동적 색상 체계를 하나의 규칙으로 묶었다.

스마트폰과 원형 스마트워치에 같은 화면을 축소해서 넣는 방식도 피했다. 화면 크기에 따라 컴포넌트의 형태와 배치를 조정하고, Wear OS에서는 원형 화면의 가장자리를 활용하는 버튼과 목록을 별도로 설계했다. 디자인 시스템이 단순한 스타일 가이드가 아니라 여러 기기의 실제 작동 규칙까지 포함하는 사례다.

애플 리퀴드 글래스

애플은 2025년 iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26, tvOS 26을 하나의 새 디자인 언어로 묶으면서 리퀴드 글래스(Liquid Glass)를 도입했다.

반투명 효과만 추가한 것은 아니다. 탭 바와 사이드바, 버튼 같은 탐색·조작 요소를 콘텐츠 위에 놓이는 별도의 레이어로 규정하고, 애플의 기본 컴포넌트를 사용하는 앱은 새로운 형태와 동작을 자연스럽게 적용받도록 했다. 아이폰부터 맥과 애플워치까지 서로 다른 운영체제를 하나의 디자인 체계로 연결한 대규모 사례다.

마이크로소프트 플루언트 2

플루언트 2(Fluent 2)는 마이크로소프트가 웹, 윈도우, iOS, 안드로이드 제품에 사용하는 디자인 시스템이다. 색과 서체, 간격, 모서리, 아이콘을 디자인 토큰으로 관리하고 실제 개발에 사용할 수 있는 컴포넌트 라이브러리를 함께 제공한다.

최근에는 일반 UI 컴포넌트뿐 아니라 코파일럿 같은 생성형 AI 서비스를 위한 별도의 UI 키트와 행동 규칙까지 범위를 넓혔다. 하나의 디자인 시스템이 화면 스타일을 통일하는 수준을 넘어 새로운 AI 인터페이스의 구조와 행동까지 관리하는 방향을 보여준다.