Lightning 앱 빌더 시작하기

학습 목표

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

• Lightning 앱 빌더가 Lightning Experience 및 모바일 앱을 위한 반응형 앱 및 사용자 정의 페이지 빌드에 어떤 도움이 되는지 이해합니다.
  
• Lightning 앱 빌더 사용자 인터페이스의 레이아웃을 이해합니다.
  
• Lightning 페이지와 Lightning 구성 요소 간의 차이를 설명합니다.
  

Lightning 앱 빌더 둘러보기

사용자는 바쁩니다. 거래를 마감하고, 최고의 서비스를 제공하고, 잠재 고객과 고객에게 마케팅을 합니다. 사용자 정의된 페이지를 만들면 사용자의 손가락 끝에 핵심 정보를 배치하여 간편한 레코드 업데이트 및 추가 인터페이스를 제공할 수 있습니다.

Lightning 앱 빌더는 Salesforce 모바일 앱 및 Lightning Experience를 위한 사용자 정의 페이지를 쉽게 생성하도록 지원하는 포인트 앤 클릭 도구로, 사용자에게 필요한 모든 것을 한 자리에서 제공합니다.

그게 다가 아닙니다. Setup(설정)의 App Manager(앱 관리자)에서 Lightning 앱을 편집하면 앱 설정을 관리할 수 있도록 Lightning 앱 빌더로 이동합니다. Lightning 앱 빌더에서 앱 브랜드, 탐색, 옵션을 업데이트하고 해당 앱에 할당된 Lightning 페이지를 관리할 수 있습니다.

이 모듈에서는 Lightning 페이지 생성에 대해 알아보겠습니다.

Lightning 앱 빌더 작동 방식

Lightning 앱 빌더를 사용하면 다음을 구축할 수 있습니다.

• 표준 페이지로 드릴다운되는 단일 페이지 앱
  
• 이번 분기의 주요 영업 잠재 고객이나 주요 리드 등을 추적하는 앱과 같은 대시보드 스타일 앱
  
• 사용자가 입력하고 제출한 비용을 모니터링하는 Expense(비용) 앱과 같이 특정 작업을 해결하기 위한 '포인트' 앱.
  
• 사용자의 필요 사항에 맞춰 맞춤화된 개체별 사용자 정의 레코드 페이지
  
• 사용자가 가장 많이 사용하는 구성 요소 및 기능을 포함하는 사용자 정의 홈 페이지
  

Lightning 페이지는 Salesforce 모바일 앱 또는 Lightning Experience에서 사용할 페이지를 설계하도록 지원하는 사용자 정의 레이아웃입니다. Lightning 페이지는 구성 요소를 포함하는 영역으로 구성돼 있습니다.

앞으로 만들 페이지 중 하나를 살짝 보여드리겠습니다.

Lightning 페이지의 구조는 페이지를 보는 기기에 맞춰 조정됩니다. 페이지 생성 시 선택한 템플릿은 특정 기기에서 페이지가 표시되는 방식을 제어합니다. Lightning 페이지의 템플릿이 페이지를 영역으로 분할합니다.

Lightning 구성 요소

Lightning 구성 요소는 간결하고 구성 및 재사용이 가능한 요소로, 이를 Lightning 앱 빌더에서 Lightning 페이지에 추가할 수 있습니다.

Lightning 페이지는 다음 구성 요소를 지원합니다.

• 표준 구성 요소 - 표준 구성 요소는 Salesforce에서 구축한 Lightning 구성 요소입니다.
  
• 사용자 정의 구성 요소 - 사용자 정의 구성 요소는 여러분이나 다른 사람이 만든 Lightning 구성 요소입니다. Lightning 앱 빌더에서 작동할 사용자 정의 Lightning 구성 요소를 구성할 수 있습니다.
  
• AppExchange의 타사 구성 요소 - AppExchange는 Lightning 구성 요소를 위한 마켓플레이스를 제공합니다. Lightning 앱 빌더에서 사용하도록 이미 구성 및 준비된 구성 요소를 포함하는 패키지를 찾을 수 있습니다.
  

'19년 봄 릴리스(API 버전 45.0)를 기준으로, 두 가지 프로그래밍 모델인 Lightning 웹 구성 요소 모델과 오리지널 Aura 구성 요소 모델을 사용하여 Lightning 구성 요소를 만들 수 있습니다. Lightning 웹 구성 요소는 HTML과 최신 JavaScript를 사용하여 만든 사용자 정의 HTML 요소입니다. Lightning 웹 구성 요소와 Aura 구성 요소는 한 페이지에서 공존하고 상호 호환됩니다.

Lightning 앱 빌더 사용자 인터페이스

Lightning 앱 빌더의 사용자 인터페이스는 Lightning 페이지 제작을 손쉽게 합니다. 도구의 부분별 설명은 다음과 같습니다.

머리글 (1)

Lightning 페이지에서 작업할 때 머리글에서는 레이블을 표시하며 수정한 마지막 10개 페이지를 볼 수 있는 페이지를 포함합니다. 또는 저장하지 않고 설정으로 돌아가거나 Lightning 앱 빌더 도움말을 더 볼 수도 있습니다.

앱을 편집하는 경우 머리글에서는 앱의 이름을 표시하며 앱 설정 탭을 포함합니다. 앱 설정 탭에서는 브랜딩, 탐색, 유틸리티 모음 등 앱의 옵션을 구성할 수 있습니다. 앱 컨텍스트에서 Pages(페이지) 목록에는 현재 앱과 연결된 활성 Lightning 페이지가 모두 표시됩니다.

도구 모음 (2)

도구 모음의 버튼을 사용하여 페이지 콘텐츠를 잘라내고(), 복사하고(), 붙여 넣을() 수 있으며, Lightning 페이지를 실행 취소하고(), 복구하고(), 저장하고, 활성화할 수 있습니다. 페이지를 다양한 형식으로 보고, 캔버스를 새로 고침하고, 보기에 맞게 캔버스 크기를 조정할 수도 있습니다.

구성 요소 팔레트 (3)

구성 요소 팔레트에는 Lightning 페이지에 지원되는 모든 표준 및 맞춤형 Lightning 구성 요소가 있습니다. 구성 요소를 클릭하고 드래그하여 페이지에 추가합니다. 레코드 페이지에서 구성 요소 팔레트 상단의 Fields(필드) 탭에는 레코드 페이지에 추가할 수 있는 개체 필드가 있습니다.

사용자 정의 구성 요소가 많다면 검색 필드에 텍스트를 입력하여 원하는 것을 쉽게 찾을 수 있습니다. 창 하단 버튼을 사용하여 AppExchange에서 타사 사용자 정의 구성 요소에 액세스할 수 있습니다.

Lightning 페이지 캔버스 (4)

캔버스 영역에서는 페이지를 구축할 수 있습니다. 페이지에서 구성 요소를 드래그하여 순서를 변경합니다.

속성 창 (5)

페이지에서 선택한 항목에 따라 속성 창에는 전체 페이지 속성 또는 선택한 구성 요소의 속성이 표시됩니다. 구성 요소를 볼 때 브레드크럼의 Page(페이지)를 클릭하여 페이지 속성에 액세스합니다.

Lightning 페이지 유형

Lightning 앱 빌더에서 다양한 유형의 Lightning 페이지를 만들 수 있습니다. 저희가 살펴볼 것은 다음의 세 가지 유형입니다.

앱 페이지

앱 페이지를 사용하여 Salesforce 모바일 앱 및 Lightning Experience 탐색 메뉴에 바로 추가할 수 있는 타사 앱을 위한 홈 페이지를 만듭니다. 그러면 사용자에게 중요한 개체 및 항목에 빠르게 액세스할 수 있는 앱 홈 페이지가 제공됩니다.

홈 페이지

특정 사용자 유형과 관련된 기능을 갖춘 홈 페이지를 만들고 여러 앱 또는 앱-프로필 조합에 사용자 정의 페이지를 할당합니다. 사용자 정의 페이지는 Lightning Experience에서만 지원됩니다.

레코드 페이지

레코드 페이지를 활용하면 사용자의 필요 사항에 맞게 설정된 개체의 레코드 페이지 사용자 정의 버전을 만들 수 있습니다. 사용자 정의 레코드 페이지는 Lightning Experience 및 Salesforce 모바일 앱에서 지원됩니다. 

먼저 홈 페이지부터 살펴봅시다.

리소스

• Salesforce 도움말: Lightning 앱 빌더
• Salesforce 도움말: Lightning 페이지
• 공식: Lightning 앱 빌더 Trailblazer Community