표준 구성 요소를 사용하면 쉽게 고품질의 일관된 다이어그램을 구축, 사용자 정의, 재사용할 수 있습니다. 이 전문 스타일은 모든 Salesforce 다이어그램 템플릿에 활용되며, 다음과 같은 사용 사례를 다이어그램화하기 위한 파트너 도구에서 사용할 수 있습니다.

Lucid 차트 요소 미로 Google 슬라이드

참조 아키텍처 갤러리에서 구성 요소를 사용하는 방법의 예 보기

다음 섹션에서는 표준 구성 요소에 포함된 머리글, 카드, 아이콘 및 연결기에 대한 자세한 모범 사례를 수집합니다.

머리글은 모든 다이어그램에 표시되어야 하며 다음을 포함해야 합니다.

• 대상이 빠르게 이해할 수 있는 제목
• 다이어그램이 적용하는 항목, 목적 및 의도에 대한 명확한 설명
• (옵션) 작성자를 전달할 로고 또는 회사 이름
• (옵션) 분류로 사용되는 아이콘, 디자인 또는 기호를 명확히 하는 키

크기는 다이어그램 높이의 10% 이상 및 너비의 100% 이상을 차지해야 합니다.

설명의 글꼴 크기는 제목 크기의 반 이상이어야 합니다.

다이어그램 자체에서 제목으로 지정되지 않은 아이콘, 커넥터, 색상 등을 사용할 경우 키를 포함해야 합니다. 가능한 경우 키를 짝수 행으로 그룹화해야 합니다.

다이어그램의 모든 속성을 카드로 표시해야 합니다. 카드는 크기를 조정할 수 있으며 투명하거나 색상으로 채워질 수 있습니다. 다이어그램에서 다양한 개념을 나타내는 데 사용할 수 있는 변형을 제공하는 카드 섹션이 여러 개 있습니다.

다음 예제 카드에 각기 다른 섹션이 설명되어 있습니다. 유일한 필수 카드 콘텐츠는 제목입니다. 기타 섹션은 특정 사용 사례에 필요에 따라 활용할 수 있습니다.

카드 아이콘
카드 아이콘은 카드 속성을 나타내는 시각적 자산입니다.

카드 제목
카드 제목은 카드가 나타내는 속성, 구역 또는 개념을 수집하여 빠르게 이해할 수 있는 카드 이름입니다.

카드 속성
카드 특성은 부동산에 대한 텍스트 기반 세부 사항이며, 목록으로 표시되고 여러 데이터 지점을 수집하고 전달해야 하는 경우 사용됩니다.

카드 바닥글
카드 바닥글은 부동산의 추가 특성을 제공합니다. 예: 패키지/개체/API 이름, 소유권, 기능 등

카드 바닥글 아이콘
바닥글 아이콘 섹션은 속성에 대한 추가 정보를 표시하는 시각적 자산용입니다. 예: 채널, 공유 서비스, 기능 등 다이어그램 키에 바닥글 아이콘을 포함/설명해야 합니다.

다양한 섹션을 사용하면 다양한 용도로 다양한 카드 변형이 제공됩니다. 필요에 따라 카드 해부를 혼합하고 일치시켜 다이어그램에서 해당 변형을 만들 수 있습니다. 아래 예제를 참조하십시오.

이러한 변형을 사용하는 방법에 대한 아이디어는 참조 아키텍처 갤러리를 참조하십시오.

필요에 따라 카드 크기와 색상을 조정하여 유형을 구분하고 명확하고 이해하기 쉬운 다이어그램을 만드는 기능을 활용합니다.

카드는 컨테이너 역할을 수행할 수도 있습니다. 즉, 여러 속성에 대한 그룹화입니다. 다른 카드 안에 카드를 중첩하여 계층적 관계를 나타내거나 필요에 따라 관련 속성을 분류할 수 있습니다.

Salesforce 다이어그램은 다이어그램의 속성 및 기타 영역을 나타내는 추가 아이콘뿐 아니라 기본 Salesforce 제품 로고 집합을 제공합니다.

참조 아키텍처 갤러리에서 아이콘 사용 방법에 대한 예를 확인할 수 있습니다.

추가 아이콘은 Lightning Design System 아이콘을 참조하십시오.

커넥터는 항상 팔꿈치 연결 라인을 사용해야 하며 가독성을 높이기 위해 가능한 한 직선이어야 합니다.

커넥터는 두 카드 간의 관계, 통합 또는 프로세스 단계를 나타냅니다. 선 스타일은 다른 유형의 연결을 나타내며 다이어그램 키에 표시되어야 합니다. 끝점은 통합 또는 프로세스 커넥터의 방향을 나타냅니다. 끝점은 관계 커넥터의 카디널리티 및 서수도 나타냅니다.

약은 연결에 대한 정보를 제공하는 데 사용됩니다. 솔루션 아키텍처 및 상호 작용 프로세스 흐름 다이어그램을 참조하여 알약의 예제 사용을 참조하십시오.

전 세계 약 13억명이 어떤 형태의 장애를 앓고 있으며, 전 세계 인구의 15%를 차지합니다. 액세스 가능성은 모든 뷰어가 다이어그램을 이해할 수 있도록 만드는 것입니다. 다이어그램에 더 쉽게 액세스할 수 있는 두 가지 특정 초점 영역인 화면 판독기 최적화 및 적절한 색 대비 사용이 있습니다.

액세스 가능성을 위한 디자인에 대한 자세한 자료는 Salesforce Design 블로그에서 확인할 수 있습니다.

스크린 리더기
화면 판독기는 파일, 앱 또는 웹 사이트에서 단어를 소리내어 판독하는 소프트웨어 응용 프로그램입니다. 화면 판독기는 명확하게 볼 수 없는 개인에게 다이어그램을 읽을 수 있습니다. 화면 판독기 호환을 위한 최상의 형식은 PDF(Portable Document Format)입니다. 이미지 및 액세스할 수 없는 응용 프로그램과 달리 화면 판독기에서 PDF에 액세스하여 단어, 모양 및 색상을 판독할 수 있습니다. 다른 사람과 공유할 때 다이어그램을 PDF 형식으로 내보내 액세스 가능성을 높일 수 있습니다.

색 대비
다이어그램에 더 쉽게 액세스할 수 있는 또 다른 방법은 색 대비를 높이는 것입니다. 사람들이 텍스트 뒤의 배경색과 텍스트 자체의 색상 사이의 4.5:1 비율을 갖는 웹 컨텐츠 접근성 지침(WCAG) 최소 색상 대비을 충족하면 다이어그램을 더 잘 인식하고 읽을 수 있습니다.

Salesforce 색상 시스템의 각 색상에는 0과 100 사이의 숫자가 연결되어 있습니다. 다이어그램의 색상을 선택할 때 텍스트 뒤의 배경색이 텍스트 색상보다 50점 이상 크거나 작아야 합니다. 예를 들어, 배경색이 80인 경우 텍스트 색상이 30보다 크지 않아야 합니다. 필요에 따라 테두리와 윤곽선에도 50점 규칙을 사용하는 것이 좋습니다.

Salesforce 다이어그램의 입력 사항이나 질문이 있으십니까? 여기에 여러분의 생각을 알려주십시오.