SLDS 리소스 탐색
학습 목표
이 유닛을 완료하면 다음을 수행할 수 있습니다.
- 주요 SLDS 리소스인 디자인 지침, 구성 요소 청사진 및 디자인 토큰에 대해 설명합니다.
- SLDS의 디자인, 접근성, 표현 및 어조와 관련된 지침에 대한 SLDS 문서에 액세스합니다.
디자인 시스템 팀 소개
디자인 시스템 팀이 SLDS를 책임진다는 사실은 이미 알고 있습니다. 하지만 책임이 더 있습니다. 이 팀의 공식적인 목표는 다음과 같습니다.
휴먼 가이던스와 내부 도구를 통해 제품 전체에 걸쳐 수준 높고 브랜드와 일치하는 경험 완성
이 목표를 세부적으로 분석해 보겠습니다.
디자인 시스템 팀은 휴먼 가이던스를 통해 디자이너 및 개발자들에게 수준 높고 브랜드와 일치하는 디자인 솔루션을 만들 수 있는 능력을 부여합니다. 이 팀은 작은 변화가 전체 시스템에 영향을 미칠 수 있는 방법과 여러 제품과 여러 이용 사례에 효과적인 요소를 기여하는 방법을 기여자가 이해할 수 있게 돕기도 합니다. 마지막으로, 이 팀은 상호작용 지침과 고급 개념, 디자인 패턴 및 페이지 유형에 관한 시각적 디자인 지침 같은 도구를 만듭니다.
SLDS의 세부 요소
SLDS에 대해 자세히 알아보겠습니다. 제품 팀은 제품이 Salesforce 사용자 경험과 일관성을 유지하도록 하기 위해 필요한 모든 디자인 리소스를 lightningdesignsystem.com에서 찾을 수 있습니다.
디자인 지침은 특정 이용 사례를 기반으로 패턴에 대해 설명합니다. 패턴은 청사진(문서화되고 액세스가 용이한 CSS)과 연결됩니다. 소비자는 청사진을 사용하여 Lightning Experience로 웹 및 네이티브 애플리케이션을 만듭니다. 디자인 지침은 전체적인 Salesforce 사용자 경험에 대해 다음과 같은 질문에 답합니다. 데이터는 어떻게 표시되나요? 데이터는 어떻게 입력되나요? 검색은 어떻게 처리되나요? UI에서 이 정보가 로드 중임을 어떻게 나타내나요? SLDS에는 두 가지 유형의 디자인 지침이 있습니다.
-
청사진은 일종의 디자인 지침이며, 확인란, 페이지 머리글 및 동적 메뉴 같은 UI 요소에 사용되는 정적이고 프레임워크와 무관하고 액세스가 용이한 HTML 및 CSS입니다. 개발자는 청사진을 사용하여 구성 요소를 만듭니다. (청사진의 전체 이름은 구성 요소 청사진입니다. 사람들은 종종 청사진을 구성 요소로 지칭하지만, 이 말은 정확하지 않습니다. 구성 요소는 일반적으로 전함수적(fully functional)이지만, SLDS의 HTML5와 CSS는 정적입니다. 사용자가 SLDS 청사진과 상호작용할 수 있으려면 청사진을 JavaScript 프레임워크와 먼저 통합해야 합니다.)
-
토큰은 또다른 유형의 디자인 지침으로, 시각적 디자인 속성을 저장하는 이름이 지정된 엔티티입니다. Salesforce에서는 토큰을 하드코딩된 값(색상의 16진수 값 또는 간격의 픽셀 값 등) 대신 사용합니다. 토큰은 확장이 용이하고 일관성이 있는 UI를 유지하는 데 도움이 됩니다. 디자이너는 디자인 토큰을 사용하여 시간을 절약하고 일관성을 유지할 수 있습니다. 디자이너가 토큰을 사용하면 토큰이 SLDS에서 업데이트될 때마다 토큰의 각 인스턴스가 자동으로 업데이트되고 수동 업데이트가 불필요하다는 더 중요한 장점이 있습니다. 토큰을 사용하여 디자인 속성을 표시하면 디자인 시스템 팀이 웹 및 네이티브 애플리케이션에서 디자인 요소를 쉽게 업데이트하고 확장할 수 있습니다.
추가 리소스
SLDS는 다음도 포함합니다.
-
도구 - SLDS로 더 빠르고 쉽게 만들기 위해 사용할 수 있는 API, 플러그인 및 디자인 키트 등
-
표현 및 어조 지침 - 앱 또는 온라인에서 모두 분명하고 일관되고 매력적인 Salesforce 콘텐츠를 만들기 위해 사용합니다. 이 지침은 공식 커뮤니케이션부터 화면 지침 및 오류 메시지에 이르는 모든 Salesforce 텍스트에 적용됩니다.
-
접근성 지침 - 장애인이 Salesforce 애플리케이션을 인지, 이해 및 탐색하고, 앱과 상호작용하고, 앱에 기여하는 데 도움이 됩니다. Salesforce는 모든 애플리케이션이 모든 사용자에게 인지, 조작 및 이해하기 쉽고 강력해야 한다는 WC3 WCAG 2.0 AA 산업 표준을 준수하도록 하기 위해 노력합니다. 몇 가지 예를 들면 다음과 같습니다.
- 모든 마우스 기반 동작을 대체하는 키보드 상호작용 제공
- 모든 양식 필드 및 버튼에 올바른 레이블 지정
- 모든 이미지, 비디오, 아이콘 및 SVG의 텍스트 기반 대체 수단 제공
각 SLDS 구성 요소는 ID, 작동 모델 및 상태를 보조 기술에 알려야 하고, ARIA 마크업을 사용하여 보조 기술 사용자가 구성 요소를 확인할 수 있게 해야 합니다. 접근성에 대해 자세히 알아보려면 아래 리소스를 참조하세요.
SLDS의 미래
Salesforce는 디자인 시스템 분야의 산업 리더입니다. SLDS는 세계 최초의 오픈 소스 엔터프라이즈 디자인 시스템입니다. 현재 SLDS 팀은 차세대 디자인 시스템에 대해 다음과 같이 질문하고 있습니다. 디자인 시스템이 인공 지능을 어떻게 사용할 수 있나요? Lightning 웹 구성 요소를 어떤 JavaScript 플랫폼에서든 누구나 사용할 수 있게 하는 것이 가능한가요? 코드를 다시 쓰지 않고 이렇게 할 수 있나요? 어떻게 하면 여러 디자인 시스템이 서로를 토대로 계속 발전하면서 이용 사례를 다른 테마로 확장할 수 있나요?
답이 무엇이든, 질문은 계속 떠오를 것입니다. Salesforce와 함께 SLDS의 지속적인 발전 과정에 계속 참여하시기 바랍니다.