Best design system examples in 2025
2025년 최고의 디자인 시스템 사례
Key things I’ve learned from studying top design system examples to help you build or improve your own design system.
내 디자인 시스템을 구축하거나 개선하는 데 도움이 되는 최고의 디자인 시스템 사례를 연구하면서 배운 주요 사항들.
As a designer, it’s amazing how much you can learn simply by exploring existing design systems. I’ve studied hundreds of design systems over the years, even before they were called design systems, and in this article I’ll be highlighting what I’ve learned from some of the best design system examples I’ve come across so that you can build your own design system.
디자이너로서 기존 디자인 시스템을 탐색함으로써 얼마나 많은 것을 배울 수 있는지 놀랍습니다. 저는 수년 동안 수백 개의 디자인 시스템을 연구해 왔으며, 그것들이 디자인 시스템이라고 불리기 전에도 그랬습니다. 이 기사에서는 제가 접한 최고의 디자인 시스템 사례에서 배운 내용을 강조하여 여러분이 자신의 디자인 시스템을 구축할 수 있도록 하겠습니다.
There are many similarities across design systems, but there are still lots of details that designers can’t seem to agree on. It’s fascinating to see the differences and the rationale behind the designs.
디자인 시스템 간에는 많은 유사점이 있지만, 디자이너들이 동의하지 못하는 세부 사항이 여전히 많습니다. 디자인의 차이점과 그 뒤에 있는 이론을 보는 것은 매혹적입니다.
Colour systems, component design, and indicating elevation are a few areas of inconsistency across design systems. Luckily, many popular design patterns are similar across design systems, which is great for users, as they won’t need to relearn new patterns.
색상 시스템, 구성 요소 디자인 및 고도를 나타내는 것은 디자인 시스템 전반에 걸쳐 일관성이 없는 몇 가지 영역입니다. 다행히도 많은 인기 있는 디자인 패턴은 디자인 시스템 전반에 걸쳐 유사하여 사용자에게는 새로운 패턴을 다시 배울 필요가 없다는 점에서 좋습니다.
Let’s go over some design system basics before we start exploring the design system examples.
디자인 시스템 예제를 탐색하기 전에 디자인 시스템의 기본 사항을 살펴보겠습니다.
What is a design system?
디자인 시스템이란 무엇인가요?
A design system is like a box of LEGO bricks for digital products. Just as LEGO bricks come in different shapes, sizes, and colours that you can snap together to build anything you can imagine, a design system provides a set of pre-made components, like buttons, icons, and form inputs, that you can combine to create consistent and cohesive user interfaces.
디자인 시스템은 디지털 제품을 위한 LEGO 블록 상자와 같습니다. LEGO 블록이 다양한 모양, 크기 및 색상으로 제공되어 상상할 수 있는 모든 것을 만들기 위해 함께 조립할 수 있는 것처럼, 디자인 시스템은 버튼, 아이콘 및 폼 입력과 같은 미리 만들어진 구성 요소 세트를 제공하여 일관되고 응집력 있는 사용자 인터페이스를 만들 수 있도록 합니다.
Just like with LEGO, where you have instructions to guide you in building a specific model, a design system comes with guidelines that show you how to use the components. This ensures that the website or application you’re building looks and works consistently.
레고와 마찬가지로 특정 모델을 구축하는 데 도움이 되는 지침이 있는 것처럼, 디자인 시스템은 구성 요소를 사용하는 방법을 보여주는 가이드라인을 제공합니다. 이는 당신이 구축하는 웹사이트나 애플리케이션이 일관되게 보이고 작동하도록 보장합니다.
A design system serves as a single source of truth that ensures that all design and development teams are aligned, enabling them to build unified products more efficiently.
디자인 시스템은 모든 디자인 및 개발 팀이 일치하도록 보장하는 단일 진실의 출처로 작용하여, 그들이 보다 효율적으로 통합된 제품을 구축할 수 있도록 합니다.
Benefits of a design system
디자인 시스템의 이점
Having endless design possibilities sounds great in theory, but in practice, it can be frustrating and time consuming. When designing an interface, there are so many options to choose from regarding layout, spacing, typography, and colour, it can quickly get overwhelming.
무한한 디자인 가능성은 이론상으로는 훌륭하게 들리지만, 실제로는 실망스럽고 시간이 많이 소요될 수 있습니다. 인터페이스를 디자인할 때 레이아웃, 간격, 타이포그래피 및 색상에 관해 선택할 수 있는 옵션이 너무 많아 금방 압도당할 수 있습니다.
That’s why having a system of predefined options and guidelines to help you efficiently make design decisions is crucial.
그렇기 때문에 효율적으로 디자인 결정을 내리는 데 도움이 되는 미리 정의된 옵션과 지침 시스템을 갖추는 것이 중요합니다.
Whether you’re working on a small website or a complex web application, a design system is a must-have for many reasons:
작은 웹사이트에서 복잡한 웹 애플리케이션에 이르기까지, 디자인 시스템은 여러 가지 이유로 필수적입니다:
- Consistency: Ensures a uniform look and feel across all products, enhancing the user experience.
일관성: 모든 제품에서 일관된 모양과 느낌을 보장하여 사용자 경험을 향상시킵니다. - Efficiency: Speeds up the design and development process by providing ready-to-use components and design guidelines.
효율성: 사용 가능한 구성 요소와 디자인 가이드를 제공하여 디자인 및 개발 프로세스를 가속화합니다. - Scalability: Makes it easier to scale products by providing a foundation that can grow with the brand or product.
확장성: 브랜드나 제품과 함께 성장할 수 있는 기반을 제공하여 제품의 확장을 용이하게 합니다. - Collaboration: Enhances collaboration between design and development teams by providing a common language and set of tools.
협업: 디자인과 개발 팀 간의 협업을 강화하여 공통 언어와 도구 세트를 제공합니다. - Quality control: Helps maintain high-quality standards across all designs, reducing the risk of errors and inconsistencies.
품질 관리: 모든 디자인에서 높은 품질 기준을 유지하도록 도와주며, 오류와 불일치의 위험을 줄입니다.
Practical UI Figma design system
실용적인 UI 피그마 디자인 시스템
I love design systems so much that I actually created my own. I wanted to share what I’ve learned by creating a lean and powerful Figma design system that’s intuitive, accessible, and beautiful.
나는 디자인 시스템을 너무 사랑해서 실제로 나만의 것을 만들었습니다. 직관적이고 접근 가능하며 아름다운 간결하고 강력한 Figma 디자인 시스템을 만들어 내가 배운 것을 공유하고 싶었습니다.
Creating this design system has truly been a labour of love and I’ve spent thousands of hours crafting every detail. It’s based on logic-driven design guidelines from my UI design book, which has helped thousands improve their interface design skills. Feel free to check it out.
이 디자인 시스템을 만드는 것은 정말 사랑의 노동이었고, 저는 모든 세부 사항을 다듬는 데 수천 시간을 보냈습니다. 이는 제 UI 디자인 책의 논리 기반 디자인 가이드라인을 바탕으로 하며, 이 책은 수천 명이 인터페이스 디자인 기술을 향상시키는 데 도움을 주었습니다. 자유롭게 확인해 보세요.
View the Practical UI Figma Design System
실용적인 UI 피그마 디자인 시스템 보기
3 best design system examples
3가지 최고의 디자인 시스템 예시
Let’s have a look at my top 3 design system examples and I’ll highlight some interesting things I’ve learned from each one.
내 상위 3개 디자인 시스템 예제를 살펴보고 각 예제에서 배운 흥미로운 점들을 강조하겠습니다.
IBM’s Carbon Design System
IBM의 카본 디자인 시스템
IBM’s Carbon Design System is a really well put together design system and it’s often one of my go-to design systems for component research. It’s cleverly designed, practical to use, and has a wealth of detailed and sensible guidance.
IBM의 카본 디자인 시스템은 정말 잘 구성된 디자인 시스템이며, 구성 요소 연구를 위한 나의 주요 디자인 시스템 중 하나입니다. 그것은 기발하게 설계되었고, 사용하기 실용적이며, 풍부한 세부 정보와 합리적인 지침을 제공합니다.
It’s open-source and has a modular framework designed to create consistent, scalable, and accessible digital experiences across IBM’s diverse product suite.
오픈 소스이며 IBM의 다양한 제품군 전반에 걸쳐 일관되고 확장 가능하며 접근 가능한 디지털 경험을 생성하기 위해 설계된 모듈식 프레임워크를 가지고 있습니다.
What I learned 내가 배운 것
Rather than using shadows to indicate depth or elevation, the Carbon design system uses colour. As expected in dark mode, colours get progressively lighter as the elevation level increases. Light mode is a bit different to most design systems though.
그림자를 사용하여 깊이나 고도를 나타내기보다는 Carbon 디자인 시스템은 색상을 사용합니다. 다크 모드에서는 예상대로 고도 수준이 증가함에 따라 색상이 점차 밝아집니다. 라이트 모드는 대부분의 디자인 시스템과는 약간 다릅니다.
Colours simply alternate between white and grey with each level of elevation.
색상은 각 고도 수준에 따라 흰색과 회색이 번갈아 나타납니다.
This unconventional system generally works well for most applications, as they only require a few levels of elevation. Here’s an example dashboard design in light and dark mode.
이 비전통적인 시스템은 일반적으로 대부분의 애플리케이션에서 잘 작동하며, 몇 가지 고도 수준만 필요합니다. 다음은 밝은 모드와 어두운 모드의 대시보드 디자인 예시입니다.
Most design systems only provide usage guidelines for each component, whereas the Carbon design system also covers larger UI patterns such as logins, forms, and filtering. For example, there are many different ways to filter data depending on the context.
대부분의 디자인 시스템은 각 구성 요소에 대한 사용 지침만 제공하는 반면, Carbon 디자인 시스템은 로그인, 양식 및 필터링과 같은 더 큰 UI 패턴도 다룹니다. 예를 들어, 맥락에 따라 데이터를 필터링하는 방법은 여러 가지가 있습니다.
Carbon design system helps designers and developers decide on a suitable pattern based on their specific situation. The following filtering pattern uses a multi-select dropdown menu.
탄소 디자인 시스템은 디자이너와 개발자가 특정 상황에 따라 적합한 패턴을 결정하는 데 도움을 줍니다. 다음 필터링 패턴은 다중 선택 드롭다운 메뉴를 사용합니다.
The next example is of a filtering pattern that’s always on display in the sidenav, for faster and more complex filtering of data.
다음 예시는 데이터의 더 빠르고 복잡한 필터링을 위해 사이드바에 항상 표시되는 필터링 패턴입니다.
Documenting design patterns in this way makes it a lot easier for designers and developers to follow and helps to ensure consistency across applications.
이러한 방식으로 디자인 패턴을 문서화하면 디자이너와 개발자가 따라하기가 훨씬 쉬워지고 애플리케이션 전반에 걸쳐 일관성을 보장하는 데 도움이 됩니다.
The component guidance and colour system is also clever and comprehensive. There’s so much to learn from this design system, even as an experienced designer. That’s what makes it my top design system example.
구성 요소 안내 및 색상 시스템은 또한 영리하고 포괄적입니다. 이 디자인 시스템에서 배울 것이 너무 많습니다. 경험이 풍부한 디자이너로서도 마찬가지입니다. 그것이 이 시스템을 제가 가장 좋아하는 디자인 시스템의 예로 만드는 이유입니다.
View IBM’s Carbon Design System
IBM의 탄소 디자인 시스템 보기
Atlassian Design System Atlassian 디자인 시스템
Looking through the Atlassian Design System, you can very quickly see the meticulous thought and attention to detail that has been put into it.
Atlassian 디자인 시스템을 살펴보면, 그 안에 담긴 세심한 생각과 디테일에 대한 주의를 매우 빠르게 확인할 수 있습니다.
It can initially be a bit overwhelming to digest due to its size and complexity, but when you consider that it’s supporting a whole suite of products, it’s actually relatively concise.
처음에는 크기와 복잡성 때문에 소화하기가 다소 압도적일 수 있지만, 전체 제품군을 지원하고 있다는 점을 고려하면 실제로는 상대적으로 간결합니다.
What I learned 내가 배운 것
Atlassian has treated elevation in a more conventional way that makes a lot of sense. I actually used a similar approach in my Practical UI Figma design system. In light mode they use shadows to indicate depth, while in dark mode they use both shadows and colour.
Atlassian은 고도를 보다 전통적인 방식으로 처리하여 많은 의미를 부여했습니다. 저는 실제로 제 Practical UI Figma 디자인 시스템에서도 유사한 접근 방식을 사용했습니다. 라이트 모드에서는 깊이를 나타내기 위해 그림자를 사용하고, 다크 모드에서는 그림자와 색상을 모두 사용합니다.
They have 4 design tokens to indicate elevation, which should be sufficient for most website applications. One of the elevation tokens sits lower than the default surface level for sunken interface elements.
그들은 대부분의 웹사이트 애플리케이션에 충분해야 하는 고도를 나타내는 4개의 디자인 토큰을 가지고 있습니다. 고도 토큰 중 하나는 움푹 들어간 인터페이스 요소의 기본 표면 수준보다 낮습니다.
Each elevation colour token has a corresponding shadow token for consistency.
각 고도 색상 토큰에는 일관성을 위한 해당 그림자 토큰이 있습니다.
The colour system is also really well designed. I especially like that they use alpha, or transparent, colours alongside more conventional solid colours.
색상 시스템은 정말 잘 설계되어 있습니다. 특히 알파 또는 투명 색상을 더 전통적인 단색과 함께 사용하는 것이 마음에 듭니다.
Using transparent colours for foreground elements helps to ensure that they look consistent when sitting on different background colours. I’ve also used transparent colours in my own Figma design system and I think transparency will become more prevalent once more design teams realise the advantages.
전경 요소에 투명한 색상을 사용하면 다양한 배경 색상 위에서 일관되게 보이도록 하는 데 도움이 됩니다. 저는 제 Figma 디자인 시스템에서도 투명한 색상을 사용했으며, 더 많은 디자인 팀이 그 장점을 깨닫게 되면 투명성이 더 보편화될 것이라고 생각합니다.
The design token naming conventions are also quite intuitive. Design tokens are the basic building blocks used to store and apply design decisions consistently across a digital product.
디자인 토큰 명명 규칙은 또한 매우 직관적입니다. 디자인 토큰은 디지털 제품 전반에 걸쳐 디자인 결정을 일관되게 저장하고 적용하는 데 사용되는 기본 구성 요소입니다.
In simple terms, they’re like little pieces of information that define things like colours, fonts, spacing, and sizes, so that these elements can be used the same way in different places, keeping the design consistent.
간단히 말하면, 그것들은 색상, 글꼴, 간격 및 크기와 같은 것들을 정의하는 작은 정보 조각과 같아서 이러한 요소들이 다양한 장소에서 동일한 방식으로 사용될 수 있어 디자인의 일관성을 유지합니다.
If you’re looking for ideas on how to best name design tokens, it’s worth checking out how Atlassian has done it. They even have a token picker tool to help you find and apply the correct colour token.
디자인 토큰의 최적 이름 짓기에 대한 아이디어를 찾고 있다면, Atlassian이 어떻게 했는지 확인해 볼 가치가 있습니다. 그들은 올바른 색상 토큰을 찾고 적용하는 데 도움을 주는 토큰 선택 도구도 가지고 있습니다.
Those were just a few of my favourite parts of this beautifully designed design system. Their component and UI pattern guidance is also comprehensive and a great learning resource. Definitely one of my favourite design system examples.
이것은 제가 이 아름답게 설계된 디자인 시스템에서 가장 좋아하는 부분 중 몇 가지에 불과합니다. 그들의 컴포넌트 및 UI 패턴 가이드는 포괄적이며 훌륭한 학습 자료입니다. 확실히 제가 가장 좋아하는 디자인 시스템 예시 중 하나입니다.
View the Atlassian Design System
Atlassian 디자인 시스템 보기
Adobe’s Spectrum Design System
Adobe의 스펙트럼 디자인 시스템
There’s lots of interface design fundamentals to learn from Adobe’s Spectrum Design System. Its comprehensive guidance and clear examples almost make it a crash course in UI design.
Adobe의 스펙트럼 디자인 시스템에서 배울 수 있는 인터페이스 디자인 기본 원칙이 많습니다. 그 포괄적인 가이드와 명확한 예시는 거의 UI 디자인의 집중 과정처럼 느껴집니다.
It covers all the basics like colour, typography, and components, but also includes often forgotten details like motion design, copywriting, and inclusive design.
색상, 타이포그래피, 구성 요소와 같은 모든 기본 사항을 다루지만, 모션 디자인, 카피라이팅, 포괄적 디자인과 같은 종종 잊혀지는 세부 사항도 포함되어 있습니다.
What I learned 내가 배운 것
While most design systems use the same sized components across both mobile and desktop, Adobe has chosen to scale up the size of components and typography on mobile devices. This is to account for the fact that our fingers are generally less precise than mouse pointers.
대부분의 디자인 시스템이 모바일과 데스크톱 모두에서 동일한 크기의 구성 요소를 사용하는 반면, Adobe는 모바일 장치에서 구성 요소와 타이포그래피의 크기를 키우기로 선택했습니다. 이는 우리의 손가락이 일반적으로 마우스 포인터보다 덜 정밀하다는 사실을 고려한 것입니다.
Spectrum uses a 1:1.25 scale ratio. This means that a mobile component is 25% larger than its desktop counterpart. There are also 2 separate typography scales across mobile and desktop. Border widths remain consistent across devices.
스펙트럼은 1:1.25 비율을 사용합니다. 이는 모바일 구성 요소가 데스크탑 구성 요소보다 25% 더 크다는 것을 의미합니다. 모바일과 데스크탑 간에 2개의 별도의 타이포그래피 스케일도 있습니다. 테두리 너비는 장치 간에 일관성을 유지합니다.
I’m not sure that the complexity of this scaling system is worth the benefit, but it’s definitely a novel approach.
이 스케일링 시스템의 복잡성이 이점에 비해 가치가 있는지 확신할 수는 없지만, 확실히 새로운 접근 방식입니다.
Words make up the majority of an interface and yet they’re often overlooked in design systems. It’s great to see that Spectrum has a section of their design system guidance dedicated to copyrighting.
단어는 인터페이스의 대부분을 구성하지만 디자인 시스템에서 종종 간과됩니다. 스펙트럼이 저작권에 전념하는 디자인 시스템 가이드의 섹션을 가지고 있다는 것은 훌륭합니다.
It’s quite comprehensive and includes guidance on voice and tone, grammar, and inclusivity. There’s even guidance on how to write error messages to ensure consistency across their products.
이것은 매우 포괄적이며 음성과 톤, 문법 및 포용성에 대한 지침을 포함합니다. 제품 전반에 걸쳐 일관성을 보장하기 위한 오류 메시지 작성 방법에 대한 지침도 있습니다.
Spectrum’s colour system is also cleverly designed and often used by designers as inspiration for their own colour system. Check it out in more detail for a free design lesson on how to create a colour palette.
스펙트럼의 색상 시스템은 또한 영리하게 설계되어 있으며 종종 디자이너들이 자신의 색상 시스템에 대한 영감으로 사용합니다. 색상 팔레트를 만드는 방법에 대한 무료 디자인 수업을 위해 더 자세히 확인해 보세요.
View Adobe’s Spectrum Design System
어도비의 스펙트럼 디자인 시스템 보기
Other great design system examples
다른 훌륭한 디자인 시스템 예시
Once you’ve studied the top 3 design system examples, I’d suggest going through some of the following as well. I’ve provided a brief summary for each design system and highlighted what’s unique about it. Let’s get into these other design system examples.
상위 3개 디자인 시스템 예제를 공부한 후에는 다음의 몇 가지도 살펴보는 것이 좋습니다. 각 디자인 시스템에 대한 간략한 요약을 제공하고 그 고유한 점을 강조했습니다. 이제 이 다른 디자인 시스템 예제들에 대해 알아보겠습니다.
Google’s Material Design System
구글의 머티리얼 디자인 시스템
Google’s Material Design is well-known for its unique “material metaphor,” which mimics physical surfaces to create a natural sense of interaction.
구글의 머티리얼 디자인은 물리적 표면을 모방하여 자연스러운 상호작용 감각을 생성하는 독특한 "머티리얼 은유"로 잘 알려져 있습니다.
Its open-source nature and adaptive design principles, like motion and depth, make it a go-to system for building intuitive and responsive user experiences.
그것의 오픈 소스 특성과 모션 및 깊이와 같은 적응형 디자인 원칙은 직관적이고 반응적인 사용자 경험을 구축하는 데 필수적인 시스템으로 만듭니다.
The main downside to this design system is its complexity. Then again, its complexity is what makes it so flexible and adaptable to different app designs. You could easily spend a week learning about it and still only have scratched the surface.
이 디자인 시스템의 주요 단점은 복잡성입니다. 그러나 그 복잡성이 다양한 앱 디자인에 유연하고 적응할 수 있게 만드는 요소입니다. 이 시스템에 대해 배우는 데 일주일을 쉽게 보낼 수 있으며, 여전히 표면만 긁어봤을 뿐입니다.
I guess that’s why some designers have a specific focus on designing Android apps, as it’s taken them considerable time to learn the ins and outs of Material Design.
그것이 일부 디자이너들이 안드로이드 앱 디자인에 특정한 초점을 맞추는 이유라고 생각합니다. 머티리얼 디자인의 세부 사항을 배우는 데 상당한 시간이 걸렸기 때문입니다.
The colour and theming system is especially clever and versatile, so I’d suggest checking it out if you’re looking to introduce themes to your design system.
색상 및 테마 시스템은 특히 영리하고 다재다능하므로 디자인 시스템에 테마를 도입하려는 경우 확인해 보시기를 권장합니다.
View Google’s Material Design System
구글의 머티리얼 디자인 시스템 보기
Shopify’s Polaris Design System
Shopify의 폴라리스 디자인 시스템
Shopify’s Polaris Design System is one of few design systems focused on e-commerce with tools that streamline product pages, checkout flows, and customer management. If you’re designing an e-commerce website, there’s definitely lots to learn from Polaris.
Shopify의 폴라리스 디자인 시스템은 제품 페이지, 체크아웃 흐름 및 고객 관리를 간소화하는 도구를 갖춘 전자 상거래에 중점을 둔 몇 안 되는 디자인 시스템 중 하나입니다. 전자 상거래 웹사이트를 디자인하고 있다면 폴라리스에서 배울 점이 많습니다.
One of the great things about Polaris is the wealth of visual examples in their guidance material. Rather than simply telling you how to use components or apply colours, it shows you with detailed examples. This makes it much faster and easier to learn.
폴라리스의 훌륭한 점 중 하나는 그들의 안내 자료에 풍부한 시각적 예시가 있다는 것입니다. 구성 요소를 사용하는 방법이나 색상을 적용하는 방법을 단순히 설명하는 대신, 자세한 예시로 보여줍니다. 이는 배우는 과정을 훨씬 빠르고 쉽게 만들어 줍니다.
Polaris’s visual design aesthetics are also top notch, making it a great place to learn not just how to build a functional website but also a beautiful one.
폴라리스의 시각 디자인 미학은 또한 뛰어나서 기능적인 웹사이트를 만드는 방법뿐만 아니라 아름다운 웹사이트를 만드는 방법을 배우기에 훌륭한 장소입니다.
View Shopify’s Polaris Design System
Shopify의 폴라리스 디자인 시스템 보기
Github’s Primer Design System
Github의 프라이머 디자인 시스템
Primer is Github’s developer-first design system that excels in providing a strong foundation for consistency and functionality across code-centric platforms. Its unique focus on open-source collaboration and its extensive CSS framework make it highly customizable and developer-friendly.
프라이머는 코드 중심 플랫폼 전반에 걸쳐 일관성과 기능성을 제공하는 강력한 기반을 제공하는 깃허브의 개발자 우선 디자인 시스템입니다. 오픈 소스 협업에 대한 독특한 초점과 광범위한 CSS 프레임워크 덕분에 매우 사용자 정의 가능하고 개발자 친화적입니다.
Design systems often cater their guidance documentation towards designers, but it’s important to remember that developers also require guidance on how to use the system. It’s great to see that Github provides comprehensive developer documentation.
디자인 시스템은 종종 디자이너를 위한 가이드 문서를 제공하지만, 개발자도 시스템 사용에 대한 지침이 필요하다는 점을 기억하는 것이 중요합니다. Github가 포괄적인 개발자 문서를 제공하는 것을 보니 좋습니다.
If you’re looking for ideas to beef up your usage guidelines for developers using your design system, Primer is definitely worth a look.
디자인 시스템을 사용하는 개발자를 위한 사용 지침을 강화할 아이디어를 찾고 있다면, Primer는 확실히 살펴볼 가치가 있습니다.
View Github’s Primer Design System
Github의 프라이머 디자인 시스템 보기
Apple’s Human Interface Guidelines
애플의 인간 인터페이스 가이드라인
This is probably the most famous of our design system examples, although I wouldn’t say it’s one of the best. Apple’s Human Interface Guidelines (HIG) emphasize intuitive user experiences, refined through years of crafting world-class products.
이것은 아마도 우리 디자인 시스템 예제 중 가장 유명한 것이지만, 최고의 것 중 하나라고는 말할 수 없습니다. 애플의 인간 인터페이스 가이드라인(HIG)은 세계적 수준의 제품을 제작하는 수년간의 경험을 통해 다듬어진 직관적인 사용자 경험을 강조합니다.
What makes HIG unique is its integration with Apple’s hardware and software ecosystems, allowing for deeply immersive and seamless experiences on devices like the iPhone, iPad, and Mac.
HIG의 독특한 점은 Apple의 하드웨어 및 소프트웨어 생태계와의 통합으로, iPhone, iPad 및 Mac과 같은 장치에서 깊이 있는 몰입감과 매끄러운 경험을 가능하게 한다는 것입니다.
Surprisingly, Apple’s Human Interface Guidelines aren’t very easy to consume, as they’re very text heavy with limited visual examples. They’re also not very detailed, which can leave you wondering if you’re using the design system correctly or not.
놀랍게도, 애플의 인간 인터페이스 가이드라인은 텍스트가 많고 시각적 예시가 제한적이어서 소비하기가 그리 쉽지 않습니다. 또한 매우 상세하지 않아서 디자인 시스템을 올바르게 사용하고 있는지 궁금해질 수 있습니다.
This is probably one of the reasons why some designers focus specifically on designing for iOS, as there’s quite a high learning curve.
이것이 아마도 일부 디자이너들이 iOS 디자인에 특히 집중하는 이유 중 하나일 것입니다. 왜냐하면 학습 곡선이 상당히 높기 때문입니다.
View Apple’s Human Interface Guidelines
Apple의 인간 인터페이스 가이드라인 보기
Gov.uk Design System Gov.uk 디자인 시스템
While it’s not the most beautiful design language, the Gov.uk Design System stands out for its strict emphasis on accessibility and inclusion, designed specifically for public services.
비록 가장 아름다운 디자인 언어는 아니지만, Gov.uk 디자인 시스템은 접근성과 포용성에 대한 엄격한 강조로 돋보이며, 공공 서비스를 위해 특별히 설계되었습니다.
With a commitment to ensuring that everyone can access government information and services, it offers high standards for usability, focusing on clarity, simplicity, and accessibility for all citizens.
모든 사람이 정부 정보와 서비스에 접근할 수 있도록 보장하기 위한 약속을 가지고, 명확성, 단순성 및 모든 시민을 위한 접근성을 중시하며 높은 사용성 기준을 제공합니다.
One of the main strengths of this design system is the fact that most of its components and design patterns have been validated by user testing and research. They’ve also been tested to ensure they’re accessible.
이 디자인 시스템의 주요 강점 중 하나는 대부분의 구성 요소와 디자인 패턴이 사용자 테스트와 연구를 통해 검증되었다는 사실입니다. 또한 접근 가능성을 보장하기 위해 테스트되었습니다.
So if you’re doing component research, the Gov.uk design system is a handy resource.
따라서 구성 요소 연구를 하고 있다면, Gov.uk 디자인 시스템은 유용한 자원입니다.
Because it’s focused on usability and accessibility, you’ll also find that the system is relatively simple and easy to follow. If a design system servicing so many people can be this simple, it makes you wonder why other design systems are so complex.
사용성과 접근성에 중점을 두었기 때문에 시스템이 상대적으로 간단하고 따라하기 쉽다는 것을 알 수 있습니다. 이렇게 많은 사람들에게 서비스를 제공하는 디자인 시스템이 이렇게 간단할 수 있다면, 다른 디자인 시스템이 왜 이렇게 복잡한지 궁금해집니다.
Sure, it may lack the flexibility of some design systems, but simplicity is generally a good thing for both the people using the website and the product teams building it.
물론, 일부 디자인 시스템의 유연성이 부족할 수 있지만, 단순함은 일반적으로 웹사이트를 사용하는 사람들과 그것을 구축하는 제품 팀 모두에게 좋은 것입니다.
View Gov.uk Design System
Gov.uk 디자인 시스템 보기
Microsoft’s Fluent 2 Design System
Microsoft의 Fluent 2 디자인 시스템
Microsoft has come a long way with their design language and are now pushing the boundaries with their modern and colourful aesthetic.
마이크로소프트는 디자인 언어에서 많은 발전을 이루었으며, 이제는 현대적이고 다채로운 미학으로 경계를 확장하고 있습니다.
Their comprehensive design system covers web, iOS, Android, and Windows platforms. Guidance for each platform is separated to keep things organised, while the foundational design guidelines are consistent across platforms.
그들의 포괄적인 디자인 시스템은 웹, iOS, Android 및 Windows 플랫폼을 포함합니다. 각 플랫폼에 대한 가이드는 정리를 위해 분리되어 있으며, 기본 디자인 가이드라인은 플랫폼 전반에 걸쳐 일관성을 유지합니다.
While their guidance isn’t super detailed, it’s enough to get by and makes it quick and easy to learn. Microsoft’s Fluent 2 Design System doesn’t excel in any particular area, but it’s a solid design system as a whole.
그들의 가이드는 매우 상세하지는 않지만, 충분히 활용할 수 있으며 빠르고 쉽게 배울 수 있게 해줍니다. Microsoft의 Fluent 2 디자인 시스템은 특정 분야에서 뛰어나지는 않지만, 전체적으로 견고한 디자인 시스템입니다.
This makes it a great example of all the main elements a good design system needs.
이것은 좋은 디자인 시스템에 필요한 모든 주요 요소의 훌륭한 예시가 됩니다.
View Microsoft’s Fluent 2 Design System
Microsoft의 Fluent 2 디자인 시스템 보기
Gitlab Pajamas Design System
Gitlab 파자마 디자인 시스템
One of the things missing from most design systems is community collaboration. GitLab prides itself in being an open source product with thousands of community contributors. There’s also an issue tracker to allow contributors to submit change requests and monitor their progress. This means the system can grow faster and helps to ensure that it’s focused on user needs.
대부분의 디자인 시스템에서 부족한 것 중 하나는 커뮤니티 협업입니다. GitLab은 수천 명의 커뮤니티 기여자가 있는 오픈 소스 제품이라는 점에 자부심을 가지고 있습니다. 기여자가 변경 요청을 제출하고 진행 상황을 모니터링할 수 있도록 하는 이슈 추적기도 있습니다. 이는 시스템이 더 빠르게 성장할 수 있음을 의미하며, 사용자 요구에 집중할 수 있도록 도와줍니다.
GitLab’s Pajamas Design System contains all the usual stuff including colour, typography, and component guidelines. It’s well organised and very comprehensive.
GitLab의 파자마 디자인 시스템은 색상, 타이포그래피 및 구성 요소 가이드라인을 포함한 모든 일반적인 내용을 포함하고 있습니다. 잘 정리되어 있고 매우 포괄적입니다.
The component guidelines are especially noteworthy and explain the structure of components along with providing code examples in both Vue.js and Rails.
구성 요소 가이드라인은 특히 주목할 만하며, 구성 요소의 구조를 설명하고 Vue.js와 Rails 모두에서 코드 예제를 제공합니다.
View Gitlab Pajamas Design System
Gitlab 파자마 디자인 시스템 보기
Twilio’s Paste Design System
Twilio의 Paste 디자인 시스템
Twilio’s Paste Design System is tailored specifically for building messaging experiences, ensuring consistency and accessibility across Twilio’s products.
Twilio의 Paste Design System은 메시징 경험을 구축하기 위해 특별히 설계되어 있으며, Twilio의 제품 전반에 걸쳐 일관성과 접근성을 보장합니다.
What makes it unique is its deep focus on designing interfaces for communication and its commitment to WCAG 2.1 AA accessibility standards.
그것을 독특하게 만드는 것은 커뮤니케이션을 위한 인터페이스 디자인에 대한 깊은 집중과 WCAG 2.1 AA 접근성 표준에 대한 헌신입니다.
If you’re building a messaging application, you’ll find a treasure trove of helpful components and UI patterns in this design system.
메시징 애플리케이션을 구축하고 있다면, 이 디자인 시스템에서 유용한 구성 요소와 UI 패턴의 보물창고를 찾을 수 있습니다.
View Twilio’s Paste Design System
트윌리오의 페이스트 디자인 시스템 보기
Salesforce’s Lightning Design System
Salesforce의 라이트닝 디자인 시스템
Salesforce’s Lightning Design System enables product teams to create intuitive, enterprise-grade applications on the Salesforce platform.
세일즈포스의 라이트닝 디자인 시스템은 제품 팀이 세일즈포스 플랫폼에서 직관적이고 기업 수준의 애플리케이션을 만들 수 있도록 합니다.
Its unique focus is on creating components that integrate directly with Salesforce’s powerful CRM capabilities, making it an ideal choice for building scalable business applications.
그의 독특한 초점은 Salesforce의 강력한 CRM 기능과 직접 통합되는 구성 요소를 만드는 데 있으며, 이는 확장 가능한 비즈니스 애플리케이션을 구축하는 데 이상적인 선택입니다.
I like that Salesforce have created a whole section of guidance on motion design, which they refer to as “kinetics”. Motion design can make a big difference in product design and it’s often put in the “too hard” basket for later.
나는 세일즈포스가 "운동"이라고 부르는 모션 디자인에 대한 전체 가이드를 만든 것을 좋아한다. 모션 디자인은 제품 디자인에 큰 차이를 만들 수 있으며, 종종 "너무 어렵다"는 이유로 나중으로 미뤄진다.
Having clear guidance on motion design principles and patterns helps to ensure that it’s implemented frequently and consistently.
모션 디자인 원칙과 패턴에 대한 명확한 지침이 있으면 자주 일관되게 구현되도록 보장하는 데 도움이 됩니다.
View Salesforce’s Lightning Design System
Salesforce의 라이트닝 디자인 시스템 보기
Vercel’s Geist Design System
Vercel의 Geist 디자인 시스템
Vercel’s Geist Design System is known for its minimalist aesthetic and performance-driven design, catering to web developers who prioritize speed and simplicity.
Vercel의 Geist 디자인 시스템은 미니멀리스트 미학과 성능 중심 디자인으로 유명하며, 속도와 단순성을 우선시하는 웹 개발자들을 위한 것입니다.
It’s particularly unique for its focus on creating ultra-lightweight, responsive designs that align with Vercel’s mission of building the modern web.
특히 Vercel의 현대 웹 구축 미션에 부합하는 초경량 반응형 디자인을 만드는 데 중점을 두고 있어 독특합니다.
It’s clear from the onset that this design system is focused on aesthetics. Components are beautifully crafted and styles are kept clean and minimal. There aren’t many usage guidelines, which opens up the door to inconsistency.
이 디자인 시스템은 미학에 중점을 두고 있다는 것이 처음부터 분명합니다. 구성 요소는 아름답게 제작되었고 스타일은 깔끔하고 미니멀하게 유지됩니다. 사용 지침이 많지 않아 일관성이 결여될 수 있는 여지가 있습니다.
Perhaps they wanted to keep things flexible to encourage innovation? They also didn’t seem to take accessibility into account, as many interface elements have insufficient contrast.
아마도 그들은 혁신을 장려하기 위해 유연성을 유지하고 싶었을 것입니다? 그들은 또한 많은 인터페이스 요소들이 충분한 대비를 갖추지 못했기 때문에 접근성을 고려하지 않는 것처럼 보였습니다.
View Vercel’s Geist Design System
Vercel의 Geist 디자인 시스템 보기
BBC’s GEL Design System
BBC의 GEL 디자인 시스템
BBC’s GEL (Global Experience Language) Design System ensures a cohesive, accessible experience across the BBC’s vast digital offerings, from news to entertainment.
BBC의 GEL(글로벌 경험 언어) 디자인 시스템은 뉴스에서 엔터테인먼트에 이르기까지 BBC의 방대한 디지털 제공물 전반에 걸쳐 일관되고 접근 가능한 경험을 보장합니다.
What sets it apart is its focus on ensuring high levels of accessibility and editorial consistency for a global audience, maintaining the integrity of the BBC brand.
그것을 차별화하는 것은 전 세계 청중을 위한 높은 접근성과 편집 일관성을 보장하는 데 중점을 두고 BBC 브랜드의 무결성을 유지하는 것입니다.
This design system is no spring chicken. It was one of the first large scale design systems I remember seeing early on in my career.
이 디자인 시스템은 결코 새싹이 아닙니다. 제 경력 초기에 제가 처음으로 본 대규모 디자인 시스템 중 하나였습니다.
The way the design guidelines have been structured and presented has clearly influenced many other more recent design systems. You can learn some solid fundamental design principles from this design system example.
디자인 가이드라인이 구성되고 제시된 방식은 분명히 최근의 많은 다른 디자인 시스템에 영향을 미쳤습니다. 이 디자인 시스템 예제에서 몇 가지 확고한 기본 디자인 원칙을 배울 수 있습니다.
View BBC’s GEL Design System
BBC의 GEL 디자인 시스템 보기
Mozilla’s Protocol Design System
모질라의 프로토콜 디자인 시스템
Mozilla’s Protocol Design System is an open-source framework optimized for the web, supporting Mozilla’s mission of keeping the internet open and accessible.
모질라의 프로토콜 디자인 시스템은 웹에 최적화된 오픈 소스 프레임워크로, 인터넷을 개방적이고 접근 가능하게 유지하려는 모질라의 사명을 지원합니다.
Its focus on privacy-first design and support for Mozilla’s products like Firefox and MDN Web Docs makes it uniquely aligned with open-source web principles.
그것은 개인 정보 보호 우선 설계에 중점을 두고 Firefox 및 MDN Web Docs와 같은 Mozilla의 제품을 지원하여 오픈 소스 웹 원칙과 독특하게 일치합니다.
Their usage guidelines are very concise and components are limited, so it’s a quick design system to learn. It goes to show that a lean design system can go a long way.
그들의 사용 지침은 매우 간결하고 구성 요소가 제한적이어서 배우기 쉬운 디자인 시스템입니다. 이는 간결한 디자인 시스템이 큰 효과를 낼 수 있음을 보여줍니다.
View Mozilla’s Protocol Design System
모질라의 프로토콜 디자인 시스템 보기
I hope you’ve found these design system examples helpful and inspiring. Each of them is basically a free UI design course that also teaches you how to scale designs across multiple products and platforms. I definitely found them helpful when building my Practical UI design system. If you’re looking to build your own design system and aren’t sure where to start, I’ve also put together a step by step guide on how to build a design system. Best of luck.
이 디자인 시스템 예제가 도움이 되고 영감을 주었기를 바랍니다. 각각은 기본적으로 여러 제품과 플랫폼에 걸쳐 디자인을 확장하는 방법도 가르치는 무료 UI 디자인 과정입니다. 저는 Practical UI 디자인 시스템을 구축할 때 이들이 매우 유용하다고 느꼈습니다. 자신의 디자인 시스템을 구축하고 싶지만 어디서 시작해야 할지 모르겠다면, 디자인 시스템을 구축하는 방법에 대한 단계별 가이드를 함께 준비했습니다. 행운을 빕니다.
PS If you found this article helpful, share it with others and follow me on Twitter and LinkedIn for daily design tips, tools, resources, and inspiration.
PS 이 기사가 도움이 되었다면 다른 사람과 공유하고 매일 디자인 팁, 도구, 리소스 및 영감을 위해 저를 Twitter와 LinkedIn에서 팔로우하세요.