동적 양식 시작하기

학습 목표

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

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

참고

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

원하는 언어로 Trailhead 사용하기 뱃지를 확인해 현지화된 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(새 기회) 페이지를 엽니다.
   
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 - Mobile(레코드 세부 사항 - 모바일) 구성 요소가 페이지 하단에 추가되었으며 기존 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(추가 세부 정보) 탭으로 드래그합니다.
   
3. Description 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개 이상의 필드가 있는 페이지의 경우, 이러한 최적화로 페이지 성능을 크게 향상할 수 있습니다. 표시하는 필드 수가 더 적은 페이지는 로딩 속도가 더 빠릅니다. 그리고 사용자는 필요한 필드에 액세스하기 위해 많이 스크롤하지 않아도 됩니다.

동적 양식 지원 레코드 페이지를 모바일 친화적으로 만들기

페이지 이전 프로세스의 일부로 Record Detail(레코드 세부 사항) 구성 요소가 페이지에서 제거됩니다. 그리고 데스크톱과 휴대전화 폼 팩터를 모두 지원하는 레코드 페이지를 동적 양식으로 이전하면 Record Detail - Mobile(레코드 세부 정보 - 모바일) 구성 요소가 페이지에 추가됩니다. 

Record Detail - Mobile(레코드 세부 정보 - 모바일) 구성 요소는 모바일 전용 컨테이너에서 원본 Record Detail(레코드 세부 정보) 구성 요소를 표시합니다. 따라서 데스크톱과 휴대전화 모두를 지원하는 페이지에서 데스크톱 사용자는 Field Section(필드 섹션) 구성 요소를 볼 수 있고, 모바일 사용자는 Record Detail - Mobile(레코드 세부 정보 - 모바일) 구성 요소를 볼 수 있습니다.

그렇지만 이 상황은 딱히 이상적이지 않습니다. 모바일 사용자는 데스크톱 사용자가 보는 것과 동일한 선별된 필드 세트를 볼 수 있어야 합니다. 다행히 Dynamic Forms on Mobile(모바일의 동적 양식)로 해결할 수 있습니다. 

그럼 조직에서 동적 양식 지원 레코드 페이지를 모바일화합시다.

1. Setup(설정)에서 Quick Find(빠른 찾기) 상자에 Mobile(모바일)을 입력하고 Salesforce Mobile App(Salesforce 모바일 앱)을 선택합니다.
   
2. Dynamic Forms and Dynamic Highlights on Mobile(모바일의 동적 양식 및 동적 하이라이트)을 활성화합니다. 
   

토글을 전환하면 동적 양식을 사용하는 레코드 페이지는 이제 데스크톱과 모바일 사용자 모두에게 동일한 사용자 정의 필드를 표시할 수 있습니다. 이 시점 이후 동적 양식을 사용하기 위해 생성하고 업그레이드하는 향후의 모든 레코드 페이지는 모바일에서 사용자 정의 필드를 자동으로 표시하며 Record Detail - Mobile(레코드 세부 정보 - 모바일) 구성 요소를 포함하지 않게 됩니다.

하지만 New Opportunity Page(새 기회 페이지)가 토글을 전환하기 전에 생성되었으므로 모바일 사용 준비를 마치기 전에 한 가지 작업을 더 해야 합니다. Dynamic Forms on Mobile(모바일의 동적 양식)을 활성화하고 기존 동적 양식 지원 레코드 페이지에 Record Detail - Mobile(레코드 세부 정보 - 모바일) 구성 요소가 있는 경우, 사용자는 계속해서 모바일 기기에서 Record Detail - Mobile 구성 요소만 볼 수 있습니다. 이는 수정할 수 있습니다.

모바일 사용자에게 데스크톱 사용자와 동일한 동적 양식 환경을 제공하려면 Record Detail - Mobile(레코드 세부 정보 - 모바일) 구성 요소를 기존 페이지에서 제거해야 합니다. 

1. Setup(설정)의 Quick Find(빠른 찾기) 상자에 App Builder(앱 빌더)를 입력한 다음 Lightning App Builder(Lightning 앱 빌더)를 선택합니다.
   
2. New Opportunity Page(새 기회 페이지) 옆에 있는 Edit(편집)을 클릭합니다.
   
3. 캔버스에서 Details(세부 정보) 탭을 클릭합니다.
   
4. Record Detail - Mobile(레코드 세부 정보 - 모바일) 구성 요소 위로 마우스를 가져가서 를 클릭하여 삭제합니다.
   
5. 페이지를 저장합니다.
   

다음 유닛에서는 데스크톱과 모바일 모두에서 완료된 New Opportunity Page(새 기회 페이지)를 살펴볼 예정입니다.

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

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

리소스

• Salesforce 도움말: 동적 양식 팁 및 고려 사항
• Salesforce 도움말: Lightning Experience 레코드 페이지 만들기 및 구성
• Salesforce 도움말: 동적 양식의 필수 및 읽기 전용 필드
• Salesforce 도움말: 모바일의 동적 양식