동적 양식 시작하기

학습 목표

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

• 동적 양식 기반 레코드 페이지와 표준 레코드 페이지의 차이를 설명합니다.
  
• 동적 양식이 가진 이점을 나열합니다.
  
• 레코드 페이지를 동적 양식으로 이전합니다.
  
• 동적 양식 기반 페이지가 어떻게 모바일 기기에 표시되는지 설명합니다.
  

참고

한국어로 학습하시겠어요? Trailhead playground에서 한국어로 실습 과제를 시작하고, 괄호 안에 제공된 번역을 사용해 탐색해 보세요. 영어 데이터를 기반으로 실습 과제 검증이 이루어지므로 영문으로 표시된 값만 복사해 붙여 넣습니다. 한국어 조직에서 실습 과제를 통과하지 못한 경우, (1) 로캘을 미국을 바꾸고 (2) 여기에 제시된 지침에 따라 언어를 영어로 바꾼 후 (3) "Check Challenge(과제 확인)" 버튼을 눌러 다시 진행해 보세요.

원하는 언어로 Trailhead 사용하기 뱃지를 확인해 현지화된 Trailhead 경험을 활용하는 방법에 대해 자세히 알아보세요.

시작하기 전에

이 유닛은 이전 유닛에서 만든 레코드 페이지를 기반으로 합니다. 먼저 이전 유닛을 완료한 다음 동일한 레코드 페이지를 사용하여 이 유닛을 진행하세요.

동적 양식이란 무엇인가요?

동적 양식은 Lightning 앱 빌더를 완전히 새로운 차원으로 끌어올립니다. Salesforce 관리자는 동적 양식으로 Lightning 앱 빌더 내에서 레코드 세부 사항 필드와 섹션을 구성하여 사용자의 마음에 드는 매우 유연하고 동적인 환경을 구축할 수 있습니다.

지금 Salesforce Org를 떠올려 보세요. 약간 다른 몇 가지 페이지 버전으로 여러 프로필이나 레코드 유형을 지원할 수 있습니다. 그리고 100개 이상의 필드를 포함한 페이지 레이아웃이 있을 수도 있습니다. 다양한 사용자가 동일한 개체에 대해 다른 필드를 사용하기 때문입니다. 페이지 레이아웃에 필드가 많을수록 Record Detail(레코드 세부 사항) 구성 요소는 사용자 정의할 수 없는 모놀리식 필드 블록이 됩니다.

동적 양식은 Lightning 페이지의 Record Detail(레코드 세부 사항) 구성 요소를 별개의 탭과 아코디언 섹션을 비롯한 페이지의 어느 곳에든 배치할 수 있는 개별 필드 및 섹션 구성 요소로 나눕니다. 가시성 규칙을 사용하면 필요시 봐야 할 필드만 최종 사용자에게 표시할 수 있습니다.

동적 양식은 다음을 제공합니다.

• 페이지 레이아웃에서 즉시 업그레이드: 원하는 곳에 필드와 섹션을 배치합니다.
  
• 동적 레이아웃: 가시성 규칙을 사용하여 필드와 섹션을 표시하고 숨깁니다.
  
• 더 간단한 레이아웃 관리:
  
  • 페이지 레이아웃 편집기를 사용하지 않고 Lightning 앱 빌더에서 페이지의 필드와 섹션을 관리합니다.
    
  • 구성 요소 가시성 규칙을 정의하면 필요한 페이지 레이아웃 및 레코드 유형 수를 줄일 수 있습니다.
    
  • 페이지 레이아웃을 할당할 필요 없이 Lightning 페이지를 할당할 수 있습니다.
    

동적 양식은 어떻게 작동하나요?

동적 양식은 Fields(필드)라는 새 탭을 구성 요소 창에 추가합니다. Fields(필드) 탭에는 Field Section(필드 섹션) 구성 요소와 필드 목록이 있습니다. Field Section(필드 섹션) 구성 요소는 페이지의 어느 곳에든 배치할 수 있으며, 필드는 Field Section 구성 요소 내부의 어느 곳에든 배치할 수 있습니다.

동적 양식은 두 가지 방법으로 사용할 수 있습니다.

• 새로운 Lightning 레코드 페이지를 생성합니다. 그런 다음 Lightning 앱 빌더 구성 요소 창에서 Fields(필드) 탭을 클릭하고 페이지에서 섹션과 필드를 원하는 곳으로 드래그합니다.
  
• 기존 레코드 페이지를 열고 몇 번 클릭하기만 하면 동적 양식 이전 마법사를 사용하여 해당 레코드 세부 정보를 이전할 수 있습니다.
  

이번 유닛에서는 두 번째 옵션인 페이지 이전을 살펴보겠습니다.

대부분의 표준 LWC 지원 개체에서 동적 양식(데스크톱 및 모바일)을 지원합니다(단, 지원하지 않는 예외도 있음). LWC 지원 개체 목록은 레코드 홈 페이지용 LWC 이전을 참조하세요. Lightning 앱 빌더에서 개체에 대한 레코드 페이지를 열었지만 구성 요소 패널에서 Fields(필드) 탭을 확인할 수 없는 경우, 해당 개체에 대해 동적 양식이 지원되지 않습니다. 예를 들어 Note(메모) 개체는 고정된 레이아웃을 가지고 있으므로 동적 양식을 지원하지 않습니다. 동적 양식은 LWC가 지원되지 않는 개체에서 지원되지 않습니다. 예를 들어 LWC가 지원되지 않는 Campaigns(캠페인), Products(제품), Tasks(작업)에서는 페이지 레이아웃의 정보를 사용합니다.

레코드 페이지를 동적 양식으로 이전하기

동적 양식을 사용하면 기존 레코드 페이지의 필드와 섹션을 Lightning 앱 빌더의 개별 구성 요소로 이전할 수 있습니다. 그런 다음 페이지의 나머지 구성 요소와 같은 방식으로 구성하고 사용자에게 필요한 필드와 섹션만 제공합니다.

그럼 과정을 자세히 살펴봅시다.

1. Setup(설정)의 Quick Find(빠른 찾기) 상자에 App Builder(앱 빌더)를 입력한 다음 Lightning App Builder(Lightning 앱 빌더)를 선택합니다.
   
2. 지난 유닛에서 만든 New Opportunity(새 기회) 페이지의 Edit(편집)를 클릭합니다.
   
3. Details(세부 정보) 탭을 클릭한 다음 레코드 세부 정보를 클릭합니다.
   이렇게 하면 Record Detail(레코드 세부 사항) 구성 요소가 선택되고 속성 창에 해당 속성이 표시됩니다.
   
4. 속성 창에서 Upgrade Now(지금 업그레이드)를 클릭하면 동적 양식 이전 마법사를 시작할 수 있습니다.
   

5. 마법사를 단계에 따라 진행하고 Opportunity Layout(기회 레이아웃)을 선택한 다음 Finish(마침)를 클릭합니다.
   
6. Save(저장)를 클릭합니다.
   

잠깐만요! 필수 필드가 누락된 것이 분명합니다. 필수 필드 없이 페이지를 저장하고 누락된 필수 필드에 값이 없는 경우 사용자는 레코드를 생성, 편집, 복제한 후 저장할 수 없습니다.

7. Cancel(취소)을 클릭하고 누락된 항목을 알아보겠습니다.
   
8. 구성 요소 팔레트에서 Fields(필드) 탭을 클릭합니다.
   

Universally Required Fields(일반 필수 필드) 중 Details(세부 정보) 탭에 Forecast Category(예측 범주)가 누락되었습니다. 그 이유는 무엇일까요? 레이아웃에서 필드를 이전하는 경우 개체에 대한 일반 필수 필드가 이전 작업을 한 원본 레이아웃에 없다면 자동으로 추가되지 않습니다. (Opportunity Layout(기회 레이아웃) 페이지 레이아웃에서 Forecast Category(예측 범주)가 없음을 확인할 수 있습니다.)

9. Details(세부 정보) 탭을 클릭하고 Forecast Category(예측 범주) 필드를 Opportunity Information(기회 정보) 섹션으로 드래그합니다.
   
10. 페이지를 한 번 더 저장합니다.
    

Fields(필드) 탭에 필요한 필드를 모두 갖추고 있어도 업그레이드 마법사에서 페이지 레이아웃을 선택하는 이유는 무엇일까요? 이러한 필드는 모두 손으로 직접 페이지로 드래그할 수 있습니다. 하지만 그 대신 페이지 레이아웃을 선택하면 업그레이드 마법사가 해당 페이지 레이아웃의 필드와 섹션을 가져와서 페이지에 자동으로 추가합니다. 클릭 몇 번만으로 완료할 수 있습니다!

이전된 페이지는 다음과 같습니다. 각 섹션은 구성 요소이며 섹션 내부의 각 필드도 마찬가지입니다.

기존의 Record Detail(레코드 세부 사항) 구성 요소가 페이지에서 제거되었습니다. 이는 의도적인 조치입니다. 페이지에 Dynamic Forms(동적 양식) 필드와 Record Detail(레코드 세부 사항) 구성 요소가 모두 있으면 이중화를 유발할 뿐만 아니라 페이지에 오류가 발생할 수 있습니다.

섹션 내부의 필드가 다소 흩어져 있는 것처럼 보여도 잘못된 것은 아닙니다. Lightning 앱 빌더 미리보기에서는 필드 섹션의 밀도 설정이 무시됩니다. Lightning 앱 빌더 미리보기에서는 항상 필드 섹션에 대한 Comfy(편하게 보기) 설정이 표시됩니다. 페이지가 사용자에게 표시될 때 적절한 밀도 설정이 적용됩니다.

페이지 사용자 정의하기

Record Detail(레코드 세부 사항)을 개별 필드 구성 요소로 나눴지만, 여전히 페이지에 필드가 상당수 있기 때문에 성능 문제가 발생할 수 있습니다. 이를 해결하려면 우선순위가 낮은 필드를 페이지가 로드될 때 컨텐츠가 보이지 않는 탭이나 아코디언 섹션으로 이동하는 방법을 사용할 수 있습니다.

먼저 페이지를 최적화합니다. 우선 비어 있는 Other Information(기타 정보) 섹션을 삭제합니다.

1. 캔버스에서 Details(세부 정보) 탭을 클릭합니다.
   
2. Other Information(기타 정보) 섹션 위로 마우스를 가져간 다음 를 클릭하여 삭제합니다.
   

다음으로 새 탭을 추가합니다.

1. 다시 Details(세부 정보) 탭을 클릭합니다.
   
2. Tabs(탭) 속성 창에서 Add Tab(탭 추가)을 클릭합니다. 새로운 Details(세부 정보) 탭 항목이 표시됩니다.
   
3. 새로운 Details(세부 정보) 탭 항목을 클릭합니다.
   
4. Tab Label(탭 레이블) 목록에서 Custom(사용자 정의)을 선택합니다.
   상단에 있는 Custom(사용자 정의)을 찾으려면 Tab Label(탭 레이블) 목록에서 위로 스크롤해야 할 수도 있습니다.
   
5. Custom Label(맞춤형 레이블)에 More Details(추가 세부 정보)를 입력하고 나서 Done(완료)을 클릭합니다.
   
6. 속성 창에서 새로운 More Details(추가 세부 정보) 탭을 Activity(활동) 탭 위로 드래그합니다.
   

이제 필드 섹션을 Details(세부 정보)에서 More Details(추가 세부 정보)로 이동합니다.

1. 캔버스에서 Details(세부 정보) 탭을 클릭하고 Opportunity Information(기회 정보) 섹션을 축소합니다(다음 단계에서 드래그할 수 있도록 세로 공간을 줄입니다).
   
2. Additional Information(추가 정보) 섹션에서 를 클릭하고 해당 섹션을 More Details(추가 세부 정보) 탭으로 드래그합니다.
   한 탭에서 다른 탭으로 항목을 옮기려면 항목에서 을 클릭한 다음 대상 탭으로 드래그하고 잠시 커서를 그 위에 둡니다. 해당 항목을 옮길 탭이 열리면 마우스 버튼을 떼면 됩니다. 마우스 대신 키보를 사용하는 경우 복사 및 붙여넣기 키보드 명령을 사용해서 구성 요소를 옮길 수 있습니다. 자세한 내용은 Lightning 앱 빌더에서 키보드 탐색 및 단축키에서 확인하세요.
   
3. Description Information(설명 정보) 및 System Information(시스템 정보) 섹션에도 동일한 작업을 수행하고 Additional Information(추가 정보) 섹션 아래에 배치합니다.
   
4. Additional Information(추가 정보) 섹션에서 Tracking Number(추적 번호) 필드를 Delivery/Installation Status(배송/설치 상태) 아래에 배치합니다.
   
5. Description Information(설명 정보) 섹션을 클릭합니다.
   
6. Description Information(설명 정보) 섹션 속성 창에서 Label(레이블) 필드를 클릭하고 드롭다운 상단까지 스크롤한 다음 Custom(사용자 정의)을 선택합니다.
   
7. Custom Label(사용자 정의 레이블) 필드에 Description(설명)을 입력합니다. 잘 아시다시피 이러한 변경 작업은 매우 사소하고 따분합니다. 하지만 동적 양식을 사용하면 필드 섹션의 이름을 원하는 대로 지정할 수 있습니다. 창의력을 발휘해 보세요!
   

Additional Information(추가 정보) 섹션에는 5개의 필드가 있는데 사용자가 사실상 Main Competitor(s)(주요 경쟁사) 필드를 볼 필요는 없습니다. 바로 여기서 동적 양식이 진가를 발휘합니다. Lightning 앱 빌더에서 관련 필드만 남겨두고 섹션을 사용자 정의할 수 있으며, 이 경우 페이지 레이아웃 편집기를 전혀 사용하지 않습니다.

마지막으로 불필요한 필드를 삭제합니다.

1. Additional Information(추가 정보) 섹션에서 Main Competitor(s)(주요 경쟁사) 필드에 마우스를 가져가 을 클릭하여 삭제합니다.
   
2. Details(세부 정보) 탭을 클릭합니다.
   
3. Opportunity Information(기회 정보) 섹션을 확장한 다음 Primary Campaign Source(기본 캠페인 소스) 필드를 삭제합니다.
   
4. Next Step(다음 단계) 필드를 삭제합니다.
   열이 자동으로 조정되는 방식을 확인합니다.
   
5. Stage(단계) 필드를 Close Date(종료 날짜) 필드 위로 드래그합니다.
   
6. 페이지를 저장합니다.
   

여기에서 변경한 사항은 동적 양식으로 수행할 수 있는 작업을 보여주는 간단한 예입니다. 원본 Record Detail(레코드 세부 정보) 블록에 100개 이상의 필드가 있는 페이지의 경우, 이러한 최적화로 페이지 성능을 크게 향상할 수 있습니다. 표시하는 필드 수가 더 적은 페이지는 로딩 속도가 더 빠릅니다. 그리고 사용자는 필요한 필드에 액세스하기 위해 많이 스크롤하지 않아도 됩니다.

교차 개체 필드 추가

Lightning 레코드 페이지에서 동적 양식을 사용하면 교차 개체 필드를 통해서 관련 개체의 데이터를 추가할 수 있습니다. 구성 요소 팔레트의 Fields(필드) 목록에서 조회 관계 필드의 세부 사항을 확인할 수 있습니다. 이를 위해서는 화살표 아이콘(>)이 표시된 필드를 찾은 다음 화살표를 클릭하면 됩니다.

Opportunity(기회) 페이지에 몇 가지 Campaign(캠페인) 필드를 추가해 보세요.

1. 구성 요소 팔레트에서 Fields(필드) 탭을 클릭합니다.
   
2. Field Section(필드 섹션) 구성 요소를 System Information(시스템 정보) 바로 위에 있는 More Details(세부 정보) 탭으로 드래그합니다.
   
3. 속성 창에서 필드 섹션의 Custom Label(사용자 정의 레이블)을 Campaign Information(캠페인 정보)으로 바꿉니다.
   
4. Primary Campaign Source(기본 캠페인 소스) 필드를 새 Campaign Information(캠페인 정보) 섹션에 추가합니다.
   
5. 구성 요소 팔레트의 Fields(필드) 섹션에서 Primary Campaign Source(기본 캠페인 소스) 필드 옆의 화살표를 클릭합니다.
   팔레트에서 교차 개체 필드를 살펴보면 클릭한 개체와 연관된 필드를 반영하도록 팔레트의 필드가 변경된 것을 알 수 있습니다. Fields(필드) 탭 상단의 브레드크럼은 현재 위치를 나타냅니다.
   
6. 다음 필드들을 캠페인 정보 섹션에 추가합니다.
   
   • Campaign Name(캠페인 이름)
     
   • Campaign Owner(캠페인 소유자)
     
   • 활성
     
   • 설명
     
7. 페이지를 저장합니다.
   

물론 기회에 조직의 캠페인이 연결되어 있지 않으면 Campaign Information(캠페인 정보) 섹션은 비어 있게 됩니다. 나중에 페이지에서 이 섹션이 어떻게 나타나는지 확인하기 위해 먼저 해당 기회에 캠페인을 추가해 봅시다.

1. App Builder(앱 빌더) 헤더에서 Back(뒤로 가기) ()을 클릭합니다.
   
2. 앱 시작 관리자()에서 Opportunities(기회) 탭을 찾아 선택합니다.
   
3. All Opportunities(모든 기회) 목록 보기를 엽니다.
   
4. Dickenson Mobile Generators를 선택합니다.
   
5. 페이지를 새로 고쳐 새 페이지 형식을 확인합니다.
   
6. More Details(세부 사항 더보기) 탭을 클릭합니다. Campaign Information(캠페인 정보) 섹션 필드가 비어 있는 것을 볼 수 있습니다.
   
7. Edit(편집)을 클릭합니다.
   
8. Primary Campaign Source(기본 캠페인 소스) 필드를 클릭해 User(사용자)를 입력하고 User Conference - Jun 17-19, 2002(사용자 컨퍼런스 - 2002년 6월 17~19일)를 선택합니다.
   
9. Save(저장)를 클릭합니다.
   이제 기회 페이지로 돌아가면 캠페인 필드가 채워져 있을 것입니다.
   

동적 강조 패널 만들기

현재 New Opportunity(새 기회) 페이지는 Highlights Panel(강조 패널) 구성 요소를 사용해서 페이지 최상단에 중요한 레코드 필드를 표시합니다. Highlights Panel(강조 패널)의 필드는 Setup(설정)의 개체 설정에서 사용자 정의된 개체의 축소 레이아웃에서 가져옵니다.

하지만 이제 해당 페이지는 Dynamic Forms(동적 양식)를 사용하므로 Dynamic Highlights Panel(동적 강조 패널) 구성 요소를 사용해 Lightning 앱 빌더에서 레코드 강조 표시를 바로 사용자 정의할 수 있습니다.

Dynamic Highlights Panel(동적 강조 패널)에는 최대 12개의 주요 레코드 필드를 표시할 수 있습니다. 이를 캔버스에 추가하면 Primary Field(기본 필드) 값이 개체의 Name(이름) 필드로 사전 설정됩니다.

1. Setup(설정)의 Quick Find(빠른 찾기) 상자에 App Builder(앱 빌더)를 입력한 다음 Lightning App Builder(Lightning 앱 빌더)를 선택합니다.
   
2. New Opportunity Page(새 기회 페이지) 옆에 있는 Edit(편집)을 클릭합니다.
   
3. 캔버스에서 Highlights Panel(강조 패널) 구성 요소를 클릭한 뒤 아이콘을 클릭해 삭제합니다.
   
4. 구성 요소 팔레트에서 Fields(필드) 탭을 클릭한 뒤 Dynamic Highlights Panel(동적 강조 패널) 구성 요소를 페이지 상단의 비워진 영역으로 드래그합니다.
   
5. Opportunity Name(기회 이름)은 기본적으로 첫 번째 필드로 설정됩니다. 아래의 세 필드를 추가합니다.
   
   • Account Name(계정 이름)
     
   • Close Date(마감 일자)
     
   • Amount(금액)
     

기존 Highlights Panel(강조 패널)에는 개체의 페이지 레이아웃에서 설정하는 빠른 작업 버튼이 있습니다. Dynamic Highlights Panel(동적 강조 패널)에서는 Lightning 앱 빌더를 벗어나지 않고서도 동작을 사용자 정의할 수 있습니다.

1. 캔버스에서 Dynamic Highlights Panel(동적 강조 패널) 구성 요소를 클릭합니다.
   
2. 속성 창에서 Add Action(작업 추가)을 클릭합니다.
   
3. Actions(작업) 필드 내부를 클릭한 뒤 Edit(편집) 작업을 클릭하고 Done(완료)을 클릭합니다.
   
4. 아래의 세 작업을 추가합니다.
   
   • 삭제
     
   • Clone(복제)
     
   • New Case(새 사례)
     
5. 페이지를 저장합니다.
   

동적 양식의 기능을 파악했으니 이제 조직에서 직접 사용해 보세요!

동적 양식에 대한 최신 소식을 확인하고 싶으신가요? 동적 양식 및 작업 Trailblazer Community에 참여하면 제품팀으로부터 질문, 우려 사항, 피드백에 대한 응답을 받을 수 있습니다. 이곳에서 Dynamic Forms and Actions(동적 양식 및 작업) 로드맵도 확인할 수 있습니다.

리소스

• Salesforce 도움말: 동적 양식 팁 및 고려 사항
• Salesforce 도움말: Lightning Experience 레코드 페이지 생성 및 구성
• Salesforce 도움말: 동적 양식의 필수 및 읽기 전용 필드
• Salesforce 도움말: 동적 하이라이트 패널