SLDS 리소스 탐색

학습 목표

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

• 주요 SLDS 1 리소스인 디자인 지침, 구성 요소 청사진 및 디자인 토큰에 대해 설명합니다.
  
• SLDS 1의 디자인, 접근성, 표현 및 어조와 관련된 지침에 대한 SLDS 1 문서에 액세스합니다.
  

디자인 시스템 팀 소개

디자인 시스템 팀이 SLDS 1을 책임진다는 사실은 이미 알고 계실 것입니다. 하지만 책임이 더 있습니다. 이 팀의 공식적인 목표는 다음과 같습니다.

휴먼 가이던스와 내부 도구를 통해 제품 전체에 걸쳐 수준 높고 브랜드와 일치하는 경험 완성

이 목표를 세부적으로 분석해 보겠습니다.

디자인 시스템 팀은 휴먼 가이던스를 통해 디자이너 및 개발자들에게 수준 높고 브랜드와 일치하는 디자인 솔루션을 만들 수 있는 능력을 부여합니다. 이 팀은 작은 변화가 전체 시스템에 영향을 미칠 수 있는 방법과 여러 제품과 여러 이용 사례에 효과적인 요소를 기여하는 방법을 기여자가 이해할 수 있게 돕기도 합니다. 마지막으로, 이 팀은 상호작용 지침과 고급 개념, 디자인 패턴 및 페이지 유형에 관한 시각적 디자인 지침 같은 도구를 만듭니다.

SLDS 1의 세부 요소

SLDS에 대해 자세히 알아보겠습니다. 제품 팀은 제품이 Salesforce 사용자 경험과 일관성을 유지하도록 하기 위해 필요한 모든 디자인 리소스를 lightningdesignsystem.com에서 찾을 수 있습니다.

SLDS 1에서의 디자인 지침을 SLDS 2에서는 패턴이라고 부릅니다. 디자인 지침은 특정 이용 사례를 기반으로 패턴과 구성 요소를 사용하는 방법을 설명합니다. 디자인 지침은 전체적인 Salesforce 사용자 경험에 대해 다음과 같은 질문에 답합니다. 데이터는 어떻게 표시되나요? 데이터는 어떻게 입력되나요? 검색은 어떻게 처리되나요? UI에서 이 정보가 로드 중임을 어떻게 나타내나요? SLDS 1에는 두 가지 유형의 디자인 지침이 있습니다.

구성 요소 청사진은 확인란, 페이지 머리글 및 동적 메뉴 같은 UI 요소에 사용되는 정적이고 프레임워크와 무관하고 액세스가 용이한 HTML 및 CSS입니다. 개발자는 청사진을 사용하여 구성 요소를 만듭니다. Lightning 기본 구성 요소는 일반적으로 전함수적(fully functional)이지만, SLDS의 HTML5와 CSS는 정적입니다. 사용자가 SLDS 청사진과 상호 작용하려면 청사진을 JavaScript 프레임워크와 먼저 통합해야 합니다.

디자인 토큰은 시각적 디자인 속성을 저장하는 이름이 지정된 엔티티입니다. SLDS 1은 토큰을 하드코딩된 값(색상의 16진수 값 또는 간격의 픽셀 값 등) 대신 사용합니다. 토큰은 SLDS 1에서 확장이 용이하고 일관성이 있는 UI를 유지하는 데 도움이 됩니다. 디자이너는 디자인 토큰을 사용하여 시간을 절약하고 일관성을 유지할 수 있습니다. 디자이너가 토큰을 사용하면 토큰 값이 SLDS에서 업데이트될 때마다 토큰의 각 인스턴스가 자동으로 업데이트되고 수동 업데이트가 불필요하다는 더 중요한 장점이 있습니다. 토큰을 사용하여 디자인 속성 값을 설정하면 디자인 시스템 팀이 웹 및 네이티브 앱에서 디자인 요소를 쉽게 업데이트하고 확장할 수 있습니다.

SLDS 2의 아키텍처는 SLDS 1과는 다릅니다.

SLDS 2는 구조와 시각적 스타일이 분리되어 있어 진정한 사용자 정의 및 테마 설정 기능을 제공하며, 다크 모드를 위한 기반을 마련합니다. SLDS 2는 시각적 언어로 CSS 맞춤형 속성을 우선시하며, 디자인 토큰의 사용량을 줄입니다. SLDS 2는 맞춤 구현을 위한 청사진보다 기본 제공되는 Lightning 기본 구성 요소를 더 중점적으로 고려합니다. 이는 향후 릴리스에서 선보일 AI 지원 구성 요소의 기반입니다.

SLDS 2에는 그 외에도 다양한 특징이 있습니다. 이 자료에서 더욱 자세한 정보를 살펴보고 디자인 코드를 SLDS 2로 이전하는 법을 확인하세요.

추가 리소스

SLDS 1에는 다음도 포함됩니다.

• 도구 - SLDS로 더 빠르고 쉽게 만들기 위해 사용할 수 있는 API, 플러그인 및 디자인 키트 등
  
• 표현 및 어조 지침 - 앱 또는 온라인에서 모두 분명하고 일관되고 매력적인 Salesforce 콘텐츠를 만들기 위해 사용합니다. 이 지침은 공식 커뮤니케이션부터 화면 지침 및 오류 메시지에 이르는 모든 Salesforce 텍스트에 적용됩니다.
  
• 접근성 지침 - 장애인이 Salesforce 앱을 인지하고 이해 및 탐색하고, 앱과 상호 작용하고, 앱에 기여하는 데 도움이 됩니다. Salesforce는 모든 앱이 모든 사용자에게 인지, 조작 및 이해하기 쉽고 강력해야 한다는 WC3 WCAG 2.0 AA 산업 표준을 준수하기 위해 노력합니다. 몇 가지 예를 들면 다음과 같습니다.
  

• 모든 마우스 기반 동작을 대체하는 키보드 상호작용 제공
  
• 모든 양식 필드 및 버튼에 올바른 레이블 지정
  
• 모든 이미지, 비디오, 아이콘 및 SVG의 텍스트 기반 대체 수단 제공
  

각 SLDS 1 구성 요소는 ID, 작동 모델 및 상태를 보조 기술에 알려야 하고, ARIA 마크업을 사용하여 보조 기술 사용자가 구성 요소를 확인할 수 있게 해야 합니다. 접근성에 대해 자세히 알아보려면 아래 리소스를 참조하세요.

SLDS의 미래

Salesforce는 디자인 시스템 분야의 산업 리더입니다. SLDS 1은 세계 최초의 오픈 소스 엔터프라이즈 디자인 시스템입니다. 현재 SLDS 팀은 차세대 디자인 시스템인 SLDS 2에 대해 고민을 거듭하고 있습니다.

디자인 시스템이 인공 지능과 에이전트를 어떻게 사용할 수 있을까요? Lightning 웹 구성 요소를 어떤 JavaScript 플랫폼에서든 누구나 사용할 수 있게 하는 것이 가능한가요? 코드를 다시 쓰지 않고 이렇게 할 수 있나요? 어떻게 하면 여러 디자인 시스템이 서로를 토대로 계속 발전하면서 이용 사례를 다른 테마로 확장할 수 있나요?

답이 무엇이든, 질문은 계속 떠오를 것입니다. Salesforce와 함께 SLDS의 지속적인 발전 과정에 계속 참여하시기 바랍니다.

리소스

• WCAG(Web Content Accessibility Guidelines) 2.0(영문)
• Salesforce Lightning Design System 1: 디자인 지침
• Salesforce Lightning Design System 1: 청사진 개요
• Salesforce Lightning Design System 1: 디자인 토큰
• Salesforce Lightning Design System 1: 표현 및 어조
• Salesforce Lightning Design System 1: 접근성 개요