링크세상 링크모음
링크세상 링크모음 링크 애니 웹툰 링크 드라마 영화 링크 세상의모든링크

SLDS를 사용한 Salesforce Lightning UI 모범 사례 – DevFacts | 기술 블로그 | 개발자 커뮤니티

소개

Salesforce에서는 Salesforce 선언적 접근 방식과 Aura/LWC(Lightning Web Components) 구성 요소를 사용하여 UI를 사용자 정의할 수 있습니다. 또한, 풍부한 UI를 위해 SLDS를 사용하고 있습니다.

왜 SLDS인가?

사용자 정의 UI 개발에서 SLDS는 Salesforce 경험을 위해 즉시 사용 가능한 HTML 및 CSS(Cascading Style Sheets) UI 요소를 제공합니다.

설계 원칙

프론트엔드 개발 중에는 다음 영역에 집중해야 합니다.

  • 명쾌함 – 사람들이 자신 있게 보고, 이해하고, 행동할 수 있도록 하십시오.
  • 효율성 – 사람들이 더 효율적이고, 더 스마트하고, 더 빠르게 일할 수 있도록 지원해야 하는 요구 사항을 지능적으로 예측합니다.
  • 일관성 – 동일한 문제에 동일한 솔루션을 적용하여 친숙함을 조성하고 직관력을 강화합니다..
  • 아름다움 – 사려 깊고 우아한 장인정신을 통해 사람들의 시간과 관심에 대한 존중을 보여주세요. 사려 깊고 우아한 장인정신을 통해 사람들의 시간과 관심에 대한 존중을 보여주세요.

사용자 정의 – 핵심을 변경하지 마십시오

Lightning Design System의 스타일을 취소하는 사용자 정의 CSS를 작성하는 경우 사용자 정의하는 대신 재정의하는 것입니다.

예 :

영기

위의 예에서는 LWC 및 Aura 구성 요소 CSS 예를 모두 사용했습니다.

  • LWC 예제에서는 패딩을 적용하려고 합니다. 여기서는 표준 slds 코어 패딩 속성을 재정의하는 처음 두 줄입니다.
  • Aura 예에서는 마진을 적용하려고 합니다. slds 코어 마진을 재정의하는 첫 번째 줄입니다. 두 번째 줄이 가장 좋은 방법입니다.

디자인 토큰

디자인 토큰은 여백 및 간격 값, 글꼴 크기 및 계열, 색상의 16진수 값과 같은 시각적 디자인 속성을 저장하는 명명된 엔터티입니다.

Lightning 웹 구성 요소는 전역 액세스로 표시된 모든 Lightning Design System 디자인 토큰을 사용할 수 있습니다.

Lightning 웹 구성 요소의 CSS에서 디자인 토큰을 참조하려면 –lwc- 접두사를 사용하고 camelCase에서 토큰 이름을 참조하십시오.

디자인 토큰이 왜 중요한가요?

예를 들어보겠습니다. 우리는 경험 클라우드에 새로운 커뮤니티 포털을 구축할 예정입니다. Figma를 기반으로 제작되었습니다. 모든 웹페이지에는 다음 섹션이 있습니다.

  • 머리글
  • 사이드바
  • 콘텐츠
  • 보행인

이 모든 섹션에서 일부 속성은 예를 들어 모든 페이지에 공통됩니다.

글꼴 색상, 글꼴 크기, 글꼴 모음, 여백 또는 패딩 등 이러한 종류의 속성을 디자인 토큰에서 유지 관리할 수 있으므로 CSS 파일이 깔끔한 구조로 유지됩니다.

CSS 스타일링

첫 번째는 좋은 CSS 위생을 실천하는 것입니다. 몇 가지 경험 법칙(MDN에서 자세히 알아보세요!):

  • 클래스와 함께 유형 선택기를 사용하지 마십시오. 예를 들어,

이는 CSS 특이성을 높이고 향후 문제를 일으킬 가능성이 있는 마크업에 대한 종속성을 만듭니다.

  • 길고 중첩된 선택자를 사용하지 마세요. 이는 CSS에 특이성 문제가 있다는 주요 위험 신호이며 이를 해결하지 않으면 상황은 더욱 악화될 것입니다.
  • * 규칙 과 같은 범용 선택기를 사용하지 마세요. 그 범위가 너무 넓어서 예측하기가 너무 어렵습니다. 스타일 충돌에 대비하고 있습니다.
  • !important 선언을 망치로 사용하지 마세요. 드문 예외에도 불구하고 이는 또 다른 위험 신호입니다. !important 선언을 최후의 수단으로 사용하는 경우 그 이유를 진단해야 합니다.

즉, CSS를 이렇게 작성하지 마세요! 이것은 나쁜 CSS의 최종 보스와 같습니다.

중점 분야

일관되고 효과적인 구현을 보장하기 위해 따라야 할 몇 가지 핵심 사항이 있습니다.

  • SLDS 문서를 따르십시오. Salesforce Lightning Design System 개발자 가이드는 주요 리소스입니다. 자세한 지침과 예시가 포함된 요소를 제공합니다.

참고: https://www.lightningdesignsystem.com/

  • 반응성을 고려한 디자인: SLDS에는 다양한 화면 크기에서 작동하는 반응형 구성 요소가 함께 제공됩니다. 반응성이 뛰어나도록 구성 요소와 레이아웃을 개발하여 모든 장치에서 일관된 경험을 보장합니다.
  • SLDS CSS 클래스 및 유틸리티 클래스: SLDS는 구성 요소의 스타일을 지정하는 데 사용할 수 있는 CSS 클래스 및 유틸리티 클래스 세트를 제공합니다. 일관성을 유지하고 사용자 정의 CSS를 줄이기 위해 가능한 한 이러한 클래스를 고수하십시오.
  • SLDS 구성요소 사용: SLDS는 다음과 같은 사전 구축된 구성요소 모음을 제공합니다.
  • 버튼,
  • 양식,
  • 모달,
  • 목록보기
  • 테이블 등.

사용자 정의 구성 요소를 구축하는 대신 이러한 구성 요소를 활용하십시오. 이는 잘 테스트되었으며 액세스 가능하며 일관된 사용자 경험을 보장합니다.

  • 웹 접근성: 다음 접근성 지침에 따라 SLDS 구현을 확인하세요.
  • 의미적 마크업을 사용하세요.
  • 이미지에 대체 텍스트를 제공하고,

접근성 도구로 구성요소를 테스트하여 모든 사람이 사용할 수 있는지 확인하세요.

참조: https://www.w3.org/

  • 웹 성능 최적화: SLDS 구현을 최적화하세요.
  • HTTP 요청 수 최소화
  • CSS 및 JavaScript용 SLDS CDN 사용
  • 작성한 사용자 정의 코드를 최적화하십시오.
  • SLDS 업데이트를 확인하세요: Salesforce는 정기적으로 새로운 구성 요소, 기능 및 지침을 사용하여 SLDS를 미세 조정합니다. 이러한 업데이트를 계속 확인하고 이를 디자인에 구현하세요. 이는 최신 개선 사항을 활용하고 향후 릴리스와의 호환성을 보장하는 데 도움이 됩니다.
  • 모든 주요 브라우저와 기기에서 테스트하세요. SLDS는 다양한 브라우저와 장치에서 작동하도록 만들어졌습니다. 다양한 브라우저, 운영 체제 및 장치에서 구현을 철저히 테스트하여 모든 것이 제대로 작동하는지 확인하십시오.
  • 사용자 정의를 문서화하십시오. SLDS 구성 요소를 사용자 정의하거나 새 구성 요소를 생성해야 하는 경우 모듈 자체에 변경 사항을 문서화하면 다른 개발자가 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다.

이러한 모범 사례를 따르면 SLDS를 사용하여 효과적이고 유지 관리가 가능하며 사용자 친화적인 웹 애플리케이션을 만들 수 있습니다.