SLDS를 개발한 방법과 이유 알아보기

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

• Salesforce Lightning Design System 개발에 영향을 미친 조건에 대해 설명할 수 있습니다.
  
• SLDS 디자인 시스템 팀의 목표를 설명할 수 있습니다.
  

옛날 옛적에

상상하기 힘들 수 있지만, Salesforce에 항상 포괄적인 디자인 시스템이 있지는 않았습니다. 아주 한참 전으로 시간 여행을 떠나 이제 SLDS 1(Salesforce Lightning Design System 1)이라고 하는 시스템의 기원에 대해 함께 알아보겠습니다.

SLDS 1이 지금의 디자인 시스템으로 성장하는 과정은 간단하지 않았습니다. 이 시스템은 Salesforce의 성장, 기술 변화, 그리고 증가하는 사용자 요구 사항에 대응하여 발전했습니다. SLDS 1은 빠른 성장과 변화에 보조를 맞추기 위해 확장해야 했습니다. SLDS 1이 과거에 거쳐온 과정을 알면 지금의 SLDS 1과 SLDS 2의 발전 과정, SLDS의 다음 단계를 이해하는 데 도움이 될 수 있습니다.

이 이야기는 Lightning Experience 출범 2년 전인 2013년에 시작합니다. Salesforce는 빠르게 성장하고 있으며, Salesforce Platform의 첫 모바일 버전인 Salesforce1 출범을 앞두고 있습니다. 회사가 빠르게 성장하는 가운데, 디자이너와 개발자들은 모든 Salesforce 앱에 걸쳐 일관된 경험을 보장하고 회사 및 플랫폼과 함께 발전하는 디자인 시스템의 기초를 다져야 할 필요성이 있음을 인식합니다.

그래서 용기 있는 비전가들로 구성된 이 팀은 Salesforce1 출범과 함께 패턴 라이브러리를 문서화하고 디자인 팀을 위한 첫 스타일 가이드를 작성하기 시작합니다. Salesforce1 엔지니어링 팀은 네이티브 운영 체제와 웹 앱에서 모두 사용할 수 있는 스타일 가이드 값을 설명하는 용어로 디자인 토큰을 선택합니다.

Landmark Design System

오래된 영화에서 달력 페이지를 빨리 젖혀 시간이 지남을 묘사하는 장면을 보신 적이 있나요? 느긋하게 앉아서 페이지가 젖혀지는 것을 보세요. 와, 2015년 초가 되었습니다! Salesforce 디자이너 및 개발자는 패턴 라이브러리 및 토큰을 확장된 CSS(Cascading Style Sheets) 프레임워크와 결합하여 LDS(Landmark Design System)를 만들었습니다.

Landmark Design System이 모든 플랫폼과 호환되도록 하기 위해, 팀은 디자인 시스템에 더 많이 사용되는 전함수적(fully functional) 구성 요소 대신 HTML 청사진을 중심으로 LDS를 만듭니다. 이 시스템은 확장된 CSS 프레임워크와 디자인 모범 사례를 따르는 광범위한 UI 상호작용 패턴도 포함합니다. 그 결과, 이 디자인 시스템의 여러 요소는 서로 조화를 이루어 수준이 일관되게 높은 사용자 경험을 완성합니다.

Lightning의 등장

매우 인상적이지만, Landmark Design System 팀은 여기서 안주하지 않습니다. 팀은 새 디자인 시스템을 출범하면서 Lightning Experience라는 포괄적인 시각적 언어를 사용해 Salesforce Classic(Aloha) 사용자 인터페이스를 다시 디자인하여 모든 주요 Salesforce 제품의 외관과 느낌을 바꿔놓습니다. 점점 많은 제품 팀이 Lightning Experience를 선택합니다. Lightning Experience에 대한 Landmark Design System 팀의 목표는 다음과 같습니다.

• 영업 사용자가 더 빨리 판매할 수 있게 지원
  
• 서비스 사용자의 생산성 증대
  
• 모든 사용자에게 최신 사용자 인터페이스 제공
  

그리 큰 목표는 아니죠?

새로운 이름

2015년에는 디자이너와 개발자가 모두 디자인 시스템을 더 쉽게 사용할 수 있도록 디자인 지침을 CSS 프레임워크와 합칩니다. 롤아웃과 동시에, Lightning Experience는 모바일에서 데스크톱으로 확장됩니다. 첫 Salesforce 디자인 시스템 팀은 Landmark CSS 프레임워크를 업데이트하고 Salesforce 전체의 채택을 장려합니다.

Landmark 채택이 증가하고, Salesforce CEO 겸 창립자인 Marc Benioff는 Landmark의 잠재력을 인정하여 이름을 SLDS(Salesforce Lightning Design System)로 바꿉니다. 2016년 초에 SLDS CSS 프레임워크가 핵심 Salesforce 코드에 추가됩니다. SLDS는 이제 SLDS 1로 불립니다.

SLDS 1은 초기에 Sales Cloud(2015년 겨울에 토큰과 스타일 가이드 문서를 사용하기 시작함), Salesforce Mobile 및 Service Cloud(2016년 여름) 등에 채택되었습니다. 채택이 증가하자 SLDS 1 엔지니어들은 UX 디자이너들과 손잡고 핵심 패턴 및 문서를 표준화합니다. 고객 요청에 대응하여, Salesforce는 v1.lightningdesignsystem.com에서 세계 최초의 오픈 소스 엔터프라이즈 디자인 시스템을 출범하여 누구나 SLDS 1을 사용할 수 있게 합니다.

SLDS 1 및 SLDS 2의 현재와 SLDS의 미래

2018년에 Salesforce Platform은 Salesforce Platform 전체에 영향을 미치는 정기 업데이트를 배포하고 있는 SLDS 1을 완전히 수용합니다. 이 디자인 시스템은 성장하면서 Salesforce의 확장하는 여러 제품군에 걸쳐 최고급 지원 및 거버넌스를 실현한다는 미션을 달성하는 데 어려움을 겪기도 했습니다. 3년 동안 5배의 성장을 이루었지만, 고객에게 일관된 사용자 경험을 꾸준히 제공하기 위해서는 여러 기업 인수, 신제품, 기술 변화, 주요 릴리스마다 바뀌는 우선 순위를 신중하게 고려해야 했습니다. SLDS 팀은 각 릴리스마다 패턴을 업데이트할 뿐만 아니라, 제품 포트폴리오 전반에 걸친 새로운 디자인 요소를 SLDS 1에 통합하여 고객이 지속적으로 일관된 경험을 누릴 수 있도록 하는 것을 목표로 합니다.

SLDS 1에 대한 반응은 전반적으로 긍정적이었고, 이 시스템을 채택하고 시스템의 컨셉트 및 거버넌스 모델 요소를 자사 조직에서 그대로 사용하는 고객 및 파트너가 계속 증가했습니다. 디자인 시스템 팀은 끊임없이 피드백을 구하면서 소비자와 기여자의 요구 사항을 모두 충족하기 위해 시스템을 업데이트합니다. 또한 기하급수적인 기업 성장과 같은 새로운 과제가 등장함에 따라, SLDS는 종합적인 비전을 유지하면서 이러한 과제를 해결하기 위해 신중하게 발전해 왔습니다. 최신 디자인 시스템인 SLDS 2는 이처럼 다양한 요구 사항을 아우르는 혁신적 결과물을 만들고자 애써 온 디자인 팀의 노력이 맺은 결실입니다.

리소스

• Salesforce Lightning Design System 1
• Salesforce Lightning Design System 2