대기업의 디자인 시스템 사례

안녕하세요, 게으른 사부작이입니다!

 

오늘은 디자인 시스템 시리즈의 심화 주제로, 대기업의 디자인 시스템 사례를 살펴보려고 해요. 지금까지 스타트업을 위한 경량 디자인 시스템, 유지보수 방법 등을 알아봤으니, 이제 대기업이 어떻게 디자인 시스템을 활용하는지 배워볼 차례예요. 대기업의 디자인 시스템은 규모와 복잡성이 달라서 정말 많은 영감을 주는데, 저도 처음엔 이런 시스템을 보면서 감탄했던 기억이 있답니다. 그럼 저와 함께 대기업의 대표적인 디자인 시스템을 분석해볼까요?

 

ChatGPT 생성 이미지

IBM 디자인이 왜 이렇게 멋질까 고민했어요

제가 처음 IBM의 제품 UI를 봤을 때의 일이에요. 깔끔하고 일관된 디자인, 직관적인 사용자 경험에 감탄하면서 "IBM 디자인이 왜 이렇게 멋질까?" 하고 고민했어요. IBM은 IT 업계의 거대 기업으로, 서버부터 AI 플랫폼(왓슨)까지 다양한 제품을 다루잖아요. 이런 다양한 제품에서 어떻게 통일된 경험을 제공할 수 있는지 궁금했죠. 그러다 IBM의 Carbon 디자인 시스템을 알게 됐어요. Carbon은 IBM의 모든 제품에 일관된 디자인 언어를 적용하는 시스템으로, 디자이너와 개발자가 협업하기 쉽게 설계됐더라고요. IBM 외에도 Shopify 같은 대기업의 디자인 시스템이 눈에 띄었어요. Shopify는 전자상거래 플랫폼으로 유명한데, 그들의 Polaris 디자인 시스템도 정말 체계적이어서 감탄했죠. 대기업의 디자인 시스템은 규모가 크고 복잡한 만큼, 스타트업과는 다른 접근법이 필요하다는 걸 알게 됐어요. 오늘은 IBM의 Carbon과 Shopify의 Polaris를 분석하면서, 규모에 따른 차이점도 함께 알아볼게요!

대기업 디자인 시스템 분석: Carbon(IBM)과 Polaris(Shopify)

대기업의 디자인 시스템은 제품과 팀의 규모가 크기 때문에, 일관성과 확장성을 유지하는 데 중점을 둬요. IBM의 Carbon과 Shopify의 Polaris를 통해 구체적으로 살펴볼게요.

1. IBM의 Carbon 디자인 시스템

Carbon은 IBM이 2014년부터 개발해온 디자인 시스템으로, 현재는 오픈소스로 공개돼 있어 누구나 참고할 수 있어요. IBM은 전 세계 수십만 명의 직원과 다양한 제품(클라우드, AI, 데이터 분석 등)을 다루는 대기업이라, Carbon은 확장성과 유연성에 초점을 맞췄어요.

주요 특징:

• 구성 요소: Carbon은 100개 이상의 컴포넌트(버튼, 입력 필드, 모달 등)를 제공해요. 예를 들어, 버튼 컴포넌트는 Primary, Secondary, Danger 등 다양한 스타일과 상태(활성화, 비활성화)를 지원.
• 가이드라인: 컬러, 타이포그래피, 그리드 시스템, 접근성(Accessibility) 가이드가 체계적으로 정리돼 있어요. 예를 들어, 컬러는 Primary Blue(#0F62FE), Neutral Gray(#D3D3D3) 같은 명확한 팔레트를 정의.
• 개발자 지원: Carbon은 React, Angular 같은 프레임워크와 통합 가능한 코드 스니펫을 제공해요. 개발자가 Figma에서 디자인된 컴포넌트를 바로 코드로 변환할 수 있죠.
• 글로벌 적용: IBM의 제품이 전 세계에서 사용되다 보니, 다국어 지원과 문화적 차이를 고려한 디자인이 포함돼 있어요. 예를 들어, 아랍어 UI를 위한 오른쪽에서 왼쪽(RTL) 레이아웃 지원.

Carbon의 강점은 복잡한 제품군에서의 일관성이에요. IBM은 클라우드 서비스, AI 플랫폼(왓슨), 데이터 분석 도구 등 서로 다른 제품을 다루는데, Carbon 덕분에 사용자 경험이 통일되죠. 저는 Carbon의 접근성 가이드(예: 색상 대비 4.5:1 이상 유지)가 특히 인상적이었어요. 대기업다운 세심함이 느껴졌죠.

2. Shopify의 Polaris 디자인 시스템

Polaris는 Shopify가 2016년부터 개발한 디자인 시스템으로, 전자상거래 플랫폼에 특화돼 있어요. Shopify는 전 세계 수백만 명의 판매자를 지원하는 플랫폼이라, 사용자 중심의 직관성과 확장 가능한 단순성에 중점을 뒀어요.

주요 특징:

• 구성 요소: Polaris는 약 50개의 컴포넌트(카드, 배지, 드롭다운 등)를 제공해요. 예를 들어, 버튼은 Action(주요 행동, 파랑), Monochrome(보조 행동, 회색)으로 단순화.
• 가이드라인: 컬러 팔레트는 기능적 역할 중심으로 정의돼요. Action Blue(#0070F2), Critical Red(#D72C0D)처럼 사용 목적이 명확. 타이포그래피는 Shopify의 자체 폰트(Shopify Sans)를 사용.
• 판매자 중심: Shopify의 주요 사용자인 판매자를 위한 가이드가 돋보여요. 예를 들어, "카드 컴포넌트는 제품 목록에 사용, 최대 3개 버튼 포함" 같은 구체적인 사용 사례 제공.
• 개발자 지원: Polaris도 React 컴포넌트로 제공돼서 개발자가 바로 사용할 수 있어요. Figma 파일도 공개돼 있어 디자이너와의 협업이 쉬워요.

Polaris의 강점은 전자상거래에 특화된 단순성이에요. Shopify는 판매자가 빠르게 상점을 만들고 관리할 수 있도록, 불필요한 복잡성을 줄이고 직관적인 컴포넌트를 제공하죠. 저는 Polaris의 "사용자 중심 가이드"가 정말 유용하다고 느꼈어요. 예를 들어, "Critical Red는 오류 메시지에만 사용" 같은 명확한 규칙 덕분에 UI가 혼란스럽지 않더라고요.

규모별 차이점: Carbon vs. Polaris

Carbon과 Polaris를 비교해보면, 대기업 디자인 시스템이지만 규모와 목적에 따라 접근법이 달라요.

• 제품 규모와 복잡성
  Carbon은 IBM의 방대한 제품군(클라우드, AI, 데이터 분석 등)을 커버해야 하다 보니, 컴포넌트와 가이드라인이 훨씬 많고 복잡해요. 예를 들어, Carbon은 10가지 이상의 버튼 스타일을 제공하지만, Polaris는 2~3가지로 단순화했죠. IBM은 글로벌 대기업으로, 다양한 산업과 사용자층을 다루니까 더 세분화된 시스템이 필요했던 거예요. 반면 Shopify는 전자상거래라는 특정 도메인에 집중하다 보니, Polaris는 단순하고 직관적인 시스템으로 설계됐어요.
• 확장성과 유연성
  Carbon은 글로벌 환경과 다국어 지원, 접근성을 고려해서 유연하게 설계됐어요. 예를 들어, RTL 레이아웃이나 색상 대비 가이드 같은 세부 사항이 포함돼 있죠. Polaris는 판매자라는 특정 사용자 타겟에 맞춰져 있어서, 확장성보다는 실용성에 더 중점을 뒀어요. Shopify의 판매자는 빠르고 직관적인 UI를 원하니까, Polaris는 불필요한 복잡성을 줄이고 "바로 사용할 수 있는" 시스템을 제공하는 데 초점을 맞춘 거예요.
• 팀 규모와 협업
  IBM은 수십만 명의 직원과 수백 개 팀이 Carbon을 사용해요. 그래서 문서화와 교육 자료(튜토리얼, 워크숍)가 매우 체계적이에요. 반면 Shopify는 상대적으로 작은 팀(수천 명 수준)이 Polaris를 관리하고, 판매자 커뮤니티와의 소통에 더 집중하죠. 예를 들어, Polaris는 판매자 피드백을 반영해 "카드 컴포넌트 사용 사례"를 자주 업데이트해요.

저는 두 시스템을 비교하면서, 대기업마다 디자인 시스템의 목표와 접근법이 다르다는 걸 알게 됐어요. IBM은 "모든 걸 포괄하는 시스템"을, Shopify는 "특정 사용자에 최적화된 시스템"을 추구하는 느낌이었어요.

실무 팁: 대기업 시스템에서 배우기

대기업의 디자인 시스템에서 배울 점이 많아요. 먼저, 확장성을 고려하세요. Carbon처럼 다양한 제품과 환경을 지원하려면, 처음부터 유연한 시스템을 설계하는 게 중요해요. 예를 들어, 컬러 팔레트를 기능별로 정의(Primary, Neutral)하면 나중에 확장하기 쉬워요. 또, 사용자 중심 가이드를 만드는 것도 중요해요. Polaris처럼 "이 컴포넌트는 이런 상황에 사용" 같은 구체적인 가이드를 제공하면 팀원들이 쉽게 이해할 수 있죠. 마지막으로, 오픈소스 활용을 추천드려요. Carbon과 Polaris는 모두 오픈소스로 공개돼 있어서, Figma 파일이나 코드 스니펫을 참고해서 나만의 시스템을 만들어볼 수 있어요.

이제 브랜드와 연결해볼게요!

대기업의 디자인 시스템을 살펴보니, 규모와 목적에 따라 시스템 설계가 얼마나 달라지는지 알게 됐어요. IBM의 Carbon은 복잡한 제품군에서 일관성을 유지하는 데 강력했고, Shopify의 Polaris는 전자상거래 사용자에게 최적화된 단순함이 돋보였죠. 이런 시스템을 분석하면서, 디자인 시스템이 단순히 UI를 정리하는 도구가 아니라, 브랜드 경험을 전달하는 중요한 역할을 한다는 걸 느꼈어요. 다음 포스트에서는 디자인 시스템을 브랜드 아이덴티티와 어떻게 연결할 수 있는지 알아볼게요. 여러분은 어떤 대기업 디자인 시스템이 인상적이었나요? 저는 Carbon의 접근성 가이드가 정말 멋지더라고요. 댓글로 여러분의 생각도 공유해주세요!