디자인 시스템에 대해 알아보기

학습 목표

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

• 좋은 디자인 시스템의 특성과 기능을 식별할 수 있습니다.
  
• 디자이너 및 개발자가 디자인 시스템을 사용 및 관리하고 시스템에 기여하는 방법에 대해 설명할 수 있습니다.
  
• SLDS(Salesforce Lightning Design System)가 어떻게 개발자가 Salesforce Platform에서 솔루션을 만드는 데 도움이 되는지 설명할 수 있습니다.
  
• SLDS가 대부분의 디자인 시스템과 어떻게, 그리고 왜 다른지 설명할 수 있습니다.
  

이제 SLDS(Salesforce Lightning Design System)는 두 개의 버전으로 나뉩니다.

Salesforce Lightning Design System 2(SLDS 2)는 2025년 봄에 출시되었습니다. 기존의 SLDS는 이제 SLDS 1으로 불립니다.

이번 Trailhead 뱃지는 디자인 시스템 전반, SLDS 전체, 그리고 SLDS 1에 중점을 둡니다. SLDS 2를 자세히 알아보고 싶다면 SLDS 2 시작하기 평가판을 사용해 보세요.

SLDS 2는 스타일 지정 후크를 사용해 구조와 시각적 디자인을 분리하는 새로운 CSS 프레임워크로 구축되었습니다. 스타일 지정 후크는 CSS 맞춤형 속성으로, 이를 활용하면 더욱 심층적인 사용자 정의 및 테마 설정이 가능하므로 고유의 스타일을 더욱 신속하게 만들어 낼 수 있습니다.

SLDS 2는 조직에서 Salesforce Cosmos 테마를 선택하면 사용할 수 있습니다. Salesforce Cosmos 테마 및 SLDS 2 가용성을 확인하세요.

디자인 시스템이란 무엇인가요?

디자인 시스템의 마법과 같은 힘에 대해 깊이 알아보기 전에 디자인 시스템을 정의해 보겠습니다.

좋은 디자인 시스템은 다음과 같습니다.

• 확장이 용이합니다. 디자인 시스템이 발달할수록 기초 요소(빌딩 블록)를 만드는 데 소요되는 시간과 비용이 감소합니다. 개발자는 이런 요소를 여러 제품 및 기능에 재사용합니다.
  
• 효율적입니다. 디자인 시스템을 사용하는 디자이너와 개발자는 사용 편리성과 의미에 집중하여 시간과 노력을 절약할 수 있습니다.
  
• 시각적인 조화를 이룹니다. 디자인 시스템의 상세 지침(패턴, 규칙, 가이드라인)은 용도에 기반을 두고 있습니다. 시스템의 미적 요소는 사용자의 필요에서 비롯됩니다. 표준화된 구성 요소는 시각적 스타일과 브랜드를 모두 강화하므로, 제품 및 기능의 외관이 통일되고 사용자 경험이 일정해집니다.
  
• 공유됩니다. 요소가 재사용 가능하고 문서화되고 접근이 용이하면 프로젝트 일부를 다른 사람에게 넘기거나 다른 사람의 작업을 이어가기가 더 쉬워져서 협업에 유용합니다.
  

지금 만들기 시작

빌딩 블록과 마찬가지로, 디자인 시스템을 사용하면 즉시 만들기 시작할 수 있습니다. 미리 디자인된 구성 요소를 사용하면 복잡한 문제를 해결하고 최고의 사용자 경험을 제공하는 데 집중할 수 있습니다.

디자인 시스템은 디자인을 규모에 따라 관리할 수 있다는 커다란 이점도 있습니다. 구성 요소, 패턴, 규칙 및 지침 라이브러리를 사용하면 디자이너, 개발자, 팀 및 제품 간에 일관성을 유지할 수 있습니다. 디자인 시스템은 요구 사항이 변할 때 함께 변하므로, 디자이너와 개발자는 복잡한 플랫폼 전반에서 인터페이스와 도구를 쉽고 빠르게 업데이트할 수 있습니다.

이해관계자 알기

디자인 시스템의 수준은 이해관계자에 따라 결정됩니다.

• 소비자는 디자인 시스템 요소를 사용하여 앱을 만드는 디자이너, 개발자 및 이해관계자입니다. 디자인 시스템을 만든 회사(Salesforce 등)에 이 회사의 플랫폼에서 앱을 만드는 고객의 에코시스템이 있는 경우, 소비자는 회사 안팎에 모두 있습니다.
  
• 기여자는 디자인 시스템을 구성하는 요소와 패턴을 만듭니다. 각 릴리스마다 새 패턴, 구성 요소 또는 지침이나 기존 요소에 대한 변경 사항을 누구나 제안할 수 있습니다.
  
• 큐레이터는 디자인 시스템 관리인입니다. 엔지니어, 제품 디자이너 및 비주얼 디자이너로 구성되는 큐레이터 팀은 디자인 시스템을 유지관리하고, 시스템 코드를 감독하고, 커뮤니티에 시스템 사용 방법을 가르칩니다. 큐레이터는 제안된 업데이트를 검토하고 업데이트를 통합하여 디자인 시스템을 발전시킵니다.
  

이 글을 읽는 사람은 대부분 SLDS 소비자 또는 기여자일 것입니다.

Salesforce의 Lightning 디자인 시스템

Salesforce는 디자인 시스템을 매우 중시합니다. Salesforce Platform이 매우 강력한 이유 중 하나는 매우 다양한 사용자의 복잡한 요구 사항에 대응하기 때문입니다.

또한 Salesforce는 제품 범위와 직원 수를 모두 확장하면서 매우 빠르게 성장하고 있습니다. Salesforce는 성장할수록 더 많은 사용자 요구 사항에 대응합니다. 그래서 일관된 제품 경험을 효율적으로 규모에 맞게 디자인하는 것이 중요합니다.

Salesforce 팀은 SLDS로 이렇게 할 수 있습니다. 이용 사례별 패턴을 사용하면 디자이너가 반복 실험 속도를 높이고 일관된 솔루션을 더 효율적으로 만들 수 있습니다. 구성 요소 개발자는 항상 깔끔하고 액세스가 용이한 마크업과 픽셀이 완벽하게 맞는 CSS가 있는 최신 프레임워크를 사용하여 더 빨리 작업하고 오류를 줄일 수 있습니다. 고객과 파트너는 Salesforce Platform에서 분명한 설명과 디자인 예시가 포함된 자주 업데이트되고 깔끔하고 일관성 있는 시스템을 사용하여 사용자 정의를 구축하므로, 소프트웨어를 역설계할 필요가 없어집니다.

대부분의 디자인 시스템은 전함수적(fully functional) 코드를 제공합니다. 하지만 SLDS는 Lightning 웹 구성 요소(LWC)와 React 같은 여러 다양한 코드 베이스를 지원하기 때문에 독립성을 유지해야 합니다. Salesforce는 Lightning 기본 구성 요소를 통해 많은 SLDS 구성 요소 디자인을 구현하는 기능적인 코드를 제공합니다. (SLDS와 다른 디자인 시스템의 차이점에 대해 자세히 알아보려면 이 유닛 끝에 있는 리소스를 참조하세요.)

다음에는 SLDS가 탄생했던 아주 한참 전으로 시간 여행을 떠납니다.

리소스

• Salesforce Lightning Design System 1
• Salesforce Lightning Design System 2
• Salesforce 개발자: Lightning 기본 구성 요소 시작하기