Skip to main content
3월 5~6일에 샌프란시스코의 TDX 또는 Salesforce+에서 열리는 AI 에이전트 시대를 위한 개발자 컨퍼런스에 참여하세요. 지금 등록하기.

Salesforce Starter와 함께 비즈니스 성장시키기

하나의 앱으로 영업, 서비스, 마케팅 영역에서 고객 관계를 강화하세요.

30일 무료 평가판 시작하기

예상 시간

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 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 페이지 제작을 손쉽게 합니다. 도구의 부분별 설명은 다음과 같습니다.

Lightning 앱 빌더 UI

머리글 (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 도움말에서 Trailhead 피드백을 공유하세요.

Trailhead에 관한 여러분의 의견에 귀 기울이겠습니다. 이제 Salesforce 도움말 사이트에서 언제든지 새로운 피드백 양식을 작성할 수 있습니다.

자세히 알아보기 의견 공유하기