디자인 시스템 파운데이션 파헤치기
디자인 시스템: 파운데이션 가이드를 시작하며
다양한 기업의 디자인 시스템프롤로그
지금까지 가이드 브런치 북 시리즈를 연재하며, 일반적으로 많이 쓰이는 컴포넌트와 M3 Expressive의 컴포넌트에 대해 알아보았습니다. 이제는 디자인 시스템 중 파운데이션에 대해 정리할 차례가 되었다고 생각하여 글을 쓰게 되었습니다.
본 글은 '디자인 시스템: 파운데이션 가이드'의 프롤로그이며, 본 브런치 북에서는 디자인 시스템의 구성요소 중 하나인 파운데이션(Foundation)에 대해 알아봅니다.
디자인 시스템의 구성
디자인 시스템(Design System)은 단순히 컴포넌트의 모음이 아니라, 일관된 경험을 만들기 위한 원칙과 자산의 집합입니다. 디자인 시스템의 구성요소는 이름 붙이기에 따라 다르지만 일반적으로는 파운데이션(Foundations)과 컴포넌트(Components)를 포함하고 있습니다.
디자인 시스템의 뼈대 역할을 하는 파운데이션디자인 시스템마다 패턴(Patterns), 스타일(Styles)과 같은 요소를 포함하기도 하지만, 본 브런치 북에서는 컬러, 타이포그래피, 그리드, 간격 등과 같이 일관성과 직관성을 위한 디자인 시스템의 기본 규칙을 파운데이션이라고 부르겠습니다.
위 개념이 헷갈리시는 분은 아래 글을 참고하시면 좋을 것 같습니다.
주요 기업의 파운데이션 구성
애플(Apple) · 구글(Google) · 마이크로소프트(MS)의 파운데이션 구성디자인 시스템은 기업의 철학, 기술, 사용자 경험을 담고 있기 때문에 구성과 내용이 모두 다릅니다. 빅테크 중 애플(Apple), 구글(Google), 마이크로소프트(MS)의 파운데이션은 어떻게 구성되어 있을까요?
애플(Human Interface Guideline)
애플은 Foundations라는 이름으로 모든 파운데이션 요소를 포함하고 있습니다. Color, Layout, Motion와 같은 시각적인 요소 외에 Accessibility, Privacy와 같은 개념적인 내용도 포함합니다.
구글(Material Design 3)
구글은 Foundations와 Styles라는 두 개의 항목으로 나누어 파운데이션 요소를 포함하고 있습니다. 비교적 시각적인 요소들을 Styles로 분류한 것을 알 수 있습니다.
마이크로소프트(Flent 2)
마이크로소프트는 Design Language라는 명칭으로 파운데이션을 소개하고 있습니다.
이렇듯 디자인 시스템의 구성은 기업이나 프로덕트마다 구성하고 정의하기 나름이며, 파운데이션 요소 역시 다양하게 분류 및 그룹핑하고 있습니다.
본 브런치 북의 목표
테크 거인들의 파운데이션을 함께 뜯어봅시다.'디자인 시스템: 파운데이션 가이드'는 기업별 파운데이션의 내용과 방향성을 뜯어봅니다. 컬러, 레이아웃, 모션 등 익숙하지만 체계적으로 찾아보기 어려운 요소들을, 실제 디자인 가이드라인을 중심으로 명확하게 설명합니다.
그리고 기업마다 파운데이션을 어떻게 차별화, 최적화하고 있는지 살펴보고자 합니다. 단순히 가이드를 정리할 뿐 아니라, 각 파운데이션의 목적과 맥락을 이해하고 내 것으로 쉽게 익힐 수 있도록 구성했습니다. 이 시리즈를 끝까지 읽고 나면, 앞으로 디자인 시스템을 스스로 공부해 나갈 수 있는 힘이 생기도록 말이죠.
마치며
변화하는 디자인 시스템과 파운데이션최근에도 구글의 Material 3 Expressive나 애플의 Liquid Glass와 같은 디자인 시스템의 내용들이 업데이트되고 있습니다. 본 브런치 북은 파운데이션의 기본적인 내용을 정리하면서도, 기업들의 동향과 트렌드에 대해서도 전달되었으면 하는 바람입니다.
그럼 매주 파운데이션과 관련된 주제로 찾아뵙겠습니다. 파운데이션이 아닌 컴포넌트에 대해 궁금하신 분들은 아래 브런치 북을 참고해 주세요.
