---
schema_version: "1"
id: 24332535f0818c2d2f1eb9e8b7e59efb06d144b583e253e39115bc8bebb8b954
title: 표준 구성 요소
collection: architect
version: current
locale: ko-kr
portal_url: https://docs.salesforce.com/architect/current/ko-kr/reference-diagrams/guides/kit-of-parts.md
canonical_url: https://architect.salesforce.com/docs/architect/ko-kr/reference-diagrams/guide/kit-of-parts.html
source_site: architect.salesforce.com
content_type: documentation
content_hash: 88a2f980c0025fb59c93c1f6a84425c629b8b6e8247484e1a1a671afa60c7671
products:
- 참조 다이어그램
- Architect Site Content Repo
updated_at: 2024-09-15T00:00:00Z
---
## 표준 구성 요소
표준 구성 요소를 사용하면 쉽게 고품질의 일관된 다이어그램을 구축, 사용자 정의, 재사용할 수 있습니다.
Salesforce는 아키텍처 다이어그램에 대해 Lucid를 권장합니다.
전문 스타일링은 모든 Salesforce 다이어그램 형태 및 템플릿에서 활용됩니다.
Lucidchart의 Salesforce 형태 라이브러리 및 템플릿
[Reference Architecture Gallery](https://architect.salesforce.com/diagrams#reference-architecture-gallery)에서 구성 요소를 사용하는 방법의 예를 찾아보세요.
## 모범 사례
다음 섹션에서는 표준 구성 요소에 포함된 [머리글](#머리글), [카드](#카드), [아이콘](#아이콘) 및 [연결기](#커넥터)에 대한 자세한 모범 사례를 제시합니다.
## 머리글
머리글은 모든 다이어그램에 표시되어야 하며 다음을 포함해야 합니다.
- 청중이 빠르게 이해할 수 있는 제목
- 다이어그램이 적용하는 항목, 목적 및 의도에 대한 명확한 설명
- (선택 사항) 작성자를 나타내기 위한 로고 또는 회사 이름
- (옵션) 분류로 사용되는 아이콘, 디자인 또는 기호를 명확히 하는 키
크기는 다이어그램 높이의 10% 이상 및 너비의 100% 이상을 차지해야 합니다.
설명의 글꼴 크기는 제목 크기의 반 이상이어야 합니다.
다이어그램 자체에서 제목으로 지정되지 않은 아이콘, 커넥터, 색상 등을 사용할 경우 키를 포함해야 합니다. 가능한 경우 키를 짝수 행으로 그룹화해야 합니다.
## 카드
다이어그램의 모든 속성을 카드로 표시해야 합니다. 카드는 크기를 조정할 수 있으며 투명하거나 색상으로 채워질 수 있습니다. 다이어그램에서 다양한 개념을 나타내는 데 사용할 수 있는 변형을 제공하는 카드 섹션이 여러 개 있습니다.
### **카드 해부학**
아래는 각기 다른 섹션이 설명된 예제 카드입니다. 유일한 필수 카드 콘텐츠는 제목입니다. 기타 섹션은 특정 사용 사례에 필요에 따라 활용할 수 있습니다.
**카드 아이콘**
카드 아이콘은 카드 속성을 나타내는 시각적 자산입니다.
**카드 제목**
카드 제목은 카드가 나타내는 속성, 구역 또는 개념을 수집하여 빠르게 이해할 수 있는 카드 이름입니다.
**카드 속성**
카드 속성은 속성에 대한 텍스트 기반 세부 정보로, 여러 데이터 포인트를 수집하고 전달해야 할 때 목록 형태로 사용됩니다.
**카드 바닥글**
카드 바닥글은 속성의 추가 특성을 제공합니다. 예시: 패키지/개체/API 이름, 소유권, 기능 등
**카드 바닥글 아이콘**
바닥글 아이콘 섹션은 속성에 대한 추가 정보를 표시하는 시각적 자산용입니다. 예: 채널, 공유 서비스, 기능 등. 다이어그램 키에 바닥글 아이콘을 포함하거나 설명해야 합니다.
경고: 현재 Lucidchart에 대한 제한으로 인해 템플릿에서 생성된 다이어그램의 바닥글 아이콘이 카드에서 도킹 해제됩니다. 바닥글의 가운데로 아이콘을 끌어 다시 고정해야 합니다.
### **카드 변형**
다양한 섹션을 활용하면 용도에 맞게 여러 가지 카드 변형을 만들 수 있습니다. 필요에 따라 카드의 구성 요소를 조합하여 다이어그램에서 이러한 변형을 만들 수 있습니다. 아래 예시를 확인하세요.
이러한 변형을 사용하는 방법에 대한 아이디어는 [참조 아키텍처 갤러리](https://architect.salesforce.com/diagrams#reference-architecture-gallery)를 참조하십시오.
필요에 따라 카드 크기와 색상을 조정하여 유형을 구분하고 명확하고 이해하기 쉬운 다이어그램을 만드는 기능을 활용합니다.
## **컨테이너**
카드는 여러 속성을 그룹화하는 컨테이너 역할도 할 수 있습니다. 다른 카드 안에 카드를 중첩하여 계층적 관계를 나타내거나 필요에 따라 관련 속성을 분류할 수 있습니다.
## **아이콘**
Salesforce 다이어그램은 다이어그램의 속성 및 기타 영역을 나타내는 추가 아이콘뿐 아니라 기본 Salesforce 제품 로고 집합을 제공합니다.
[참조 아키텍처 갤러리](https://architect.salesforce.com/diagrams#reference-architecture-gallery)에서 아이콘 사용 방법에 대한 예를 확인할 수 있습니다.
_추가 아이콘은 [Lightning Design System 아이콘을 참조하십시오.](https://www.lightningdesignsystem.com/icons/)_
## 커넥터
커넥터는 항상 팔꿈치 연결 라인을 사용해야 하며 가독성을 높이기 위해 가능한 한 직선이어야 합니다.
**커넥터**는 두 카드 간의 관계, 통합 또는 프로세스 단계를 나타냅니다. 선 스타일은 다른 유형의 연결을 나타내며 다이어그램 키에 표시되어야 합니다. 끝점은 통합 또는 프로세스 커넥터의 방향을 나타냅니다. 끝점은 관계 커넥터의 카디널리티 및 서수도 나타냅니다.
**필(Pill)**은 연결에 대한 정보를 제공하는 데 사용됩니다. [솔루션 아키텍처](/docs/architect/ko-kr/reference-diagrams/guide/section-solution-architecture) 및 [상호 작용 프로세스 흐름](/docs/architect/ko-kr/reference-diagrams/guide/section-interaction-process-flow) 다이어그램에서 필(Pill)의 사용 예시를 확인하세요.
## 접근성
전 세계 약 [13억](https://www.salesforce.com/company/legal/508_accessibility/#:~:text=Product%20Accessibility%20Status&text=Around%20the%20world%2C%20approximately%201.3,global%20economy%20that%20includes%20everyone.)명이 어떤 형태의 장애를 앓고 있으며, 전 세계 인구의 15%를 차지합니다. 접근성은 모든 사용자가 다이어그램을 이해할 수 있도록 만드는 것입니다. 다이어그램의 접근성을 높이기 위해 중점을 둘 수 있는 두 가지 영역이 있습니다: 스크린 리더 최적화와 적절한 색 대비 사용.
액세스 가능성을 위한 디자인에 대한 자세한 자료는 [Salesforce Design 블로그](https://medium.com/salesforce-ux/tagged/accessibility)에서 확인할 수 있습니다.
**스크린 리더기**
화면 판독기는 파일, 앱 또는 웹 사이트에서 단어를 소리내어 판독하는 소프트웨어 응용 프로그램입니다. 스크린 리더는 명확하게 볼 수 없는 사용자에게 다이어그램을 읽어줄 수 있습니다. 스크린 리더와의 호환성을 위해 가장 적합한 형식은 PDF(Portable Document Format)입니다. 이미지 및 접근할 수 없는 응용 프로그램과 달리 스크린 리더에서 PDF에 접근하여 단어, 모양 및 색상을 읽을 수 있습니다. 다른 사람과 공유할 때 다이어그램을 PDF 형식으로 내보내면 접근성을 높일 수 있습니다.
**색 대비**
다이어그램에 더 쉽게 액세스할 수 있는 또 다른 방법은 색 대비를 높이는 것입니다.
사람들이 텍스트 뒤의 배경색과 텍스트 자체의 색상 사이의 4.5:1 비율을 갖는 [웹 컨텐츠 접근성 지침(WCAG) 최소 색상 대비](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)을 충족하면 다이어그램을 더 잘 인식하고 읽을 수 있습니다.
[Salesforce 색상 시스템](https://medium.com/salesforce-ux/the-salesforce-color-system-c7c6b5b9c577)의 각 색상에는 0과 100 사이의 숫자가 연결되어 있습니다. 다이어그램의 색상을 선택할 때 텍스트 뒤의 배경색이 텍스트 색상보다 50점 이상 크거나 작아야 합니다. 예를 들어 배경색이 80인 경우 텍스트 색상이 30보다 크지 않아야 합니다. 필요에 따라 테두리와 윤곽선에도 50점 규칙을 사용하는 것이 좋습니다.
**Salesforce 다이어그램의 입력 사항이나 질문이 있으십니까?** [여기](https://docs.google.com/forms/d/e/1FAIpQLSe5RmVA2ZtpfGlR2u436FA4QN6QmJGdAWxtZ_AcRLMAH_US9Q/viewform?usp=sf_link)에서 귀하의 의견을 남겨주시기 바랍니다.