LuckyTemplates의 사용자 지정 테마

오늘 게시물에서는 JSON 테마 파일을 직접 편집하고 적용하여 만들 수 있는 사용자 지정에 대해 간단히 검토하겠습니다. 이것은 실제로 LuckyTemplates 자체 내에서 수행할 수 있는 작업에 대한 설명이 아니라 사용자 지정 테마를 수행할 때 LuckyTemplates 외부에서 수행할 수 있는 작업의 예입니다. 이 블로그 하단에서 이 튜토리얼의 전체 비디오를 볼 수 있습니다.

이 항목은 LuckyTemplates 보고서 소비자 또는 일반 LuckyTemplates 개발자를 위한 것이 아니라 JSON 코드를 직접 편집하고 만드는 데 익숙하고 익숙한 사용자를 위한 것입니다.

사용자 정의 테마를 구현하려면 JSON 파일의 구문 및 구조와 개발 환경 도구에 익숙해야 합니다. 저는 Visual Studio 코드를 사용하여 JSON 테마 파일을 개발할 것입니다.

LuckyTemplates 데스크톱 애플리케이션에 이미 내장되어 있는 사용 가능한 사용자 지정을 살펴보겠습니다. 먼저 작업을 보여줄 캔버스가 필요합니다. Visual을 쉽게 구성할 수 있는 간단한 판매 데이터 세트인 LuckyTemplates 실습 데이터 세트를 사용했습니다. 데모 PBIX 파일은 단일 보고서 페이지이며 표준 1280 x 720 보고서보다 약간 더 많은 공간을 제공하기 위해 1600 x 900의 사용자 지정 크기가 사용되었습니다.

목차

• 기본 테마 사용
• 사용자 지정 테마 지정을 위한 JSON 기본 사항에 대한 빠른 검토
• 사용자 정의 테마를 위한 배경 변경
• 제목 텍스트 배경 변경
• 시각적 개체에 그림자 추가
• 제목 텍스트 추가
• 사용자 정의 테마에서 기억해야 할 기타 사항
• 결론

기본 테마 사용

여기에서 기본 테마를 살펴보겠습니다. 테마를 찾아보고 기본 테마를 적용하면…

... 표준 파란색, 주황색 및 보라색을 사용하고 있음을 알 수 있습니다.

어두운 배경에 흰색 텍스트 테마를 선택하면 …

… 이것이 우리가 보게 될 주제입니다.

사용자 지정 테마 지정을 위한 JSON 기본 사항에 대한 빠른 검토

이것은 확실히 LuckyTemplates용 JSON 파일을 개발하는 방법에 대한 포괄적인 리뷰가 아니라 JSON 파일에 대한 몇 가지 간단한 설명입니다.

JSON은 JavaScript Object Notation 의 약자입니다 . 중첩 개체 또는 코드 블록으로 구성된 데이터 파일의 일반 텍스트 형식입니다. 이들 각각에는 고유한 이름-값 쌍 모음이 있습니다.

콜론은 이름-값 쌍을 구분하는 데 사용됩니다. 중괄호는 개체를 둘러싸는 데 사용됩니다. 목록 요소는 쉼표로 구분되며 목록을 지울 수 있습니다. 목록은 배열일 수도 있으며, 이 경우 대괄호로 묶여 있습니다.

LuckyTemplates JSON 파일은 일반적으로 name , colors 및 visuals 의 세 가지 주요 섹션으로 구성됩니다 . 이름 섹션은 실제로 유일한 필수 섹션이며 보시다시피 여기에서 오늘 조사를 시작할 것입니다.

테마를 검색하여 이 테마 파일을 적용해 보겠습니다.

기본 테마로 이동하겠습니다. 기본 색상이 사용된 것을 볼 수 있습니다.

코드 블록 섹션으로 이동하여 대체 색상 세트를 복사해 보겠습니다.

이름 블록 뒤에 쉼표를 추가한 다음 코드를 붙여넣어 JSON 테마 파일에 붙여넣을 수 있습니다.

JSON 테마 파일을 저장하고 LuckyTemplates로 돌아가 스크래치 테마를 적용합니다.

이제 색상이 변경된 것을 볼 수 있습니다.

비주얼 섹션은 지금까지 가장 규모가 크며 여기에서 나머지 작업을 수행합니다. 글꼴, 패밀리 크기 및 색상을 포함하여 텍스트를 쉽게 변경할 수 있습니다.

메모장으로 이동하여 다양한 크기로 설정된 텍스트 클래스 및 글꼴에 대한 코드 블록을 복사해 보겠습니다.

그런 다음 Visual Studio Code로 이동하여 코드 구분을 위한 열을 추가한 다음 코드를 붙여넣습니다.

다시 한 번 테마 파일을 저장합니다. 그런 다음 LuckyTemplates로 돌아가서 테마 파일을 적용합니다. 이제 모든 텍스트가 파란색으로 바뀐 것을 볼 수 있습니다.

우리가 쉽게 할 수 있는 것 중 하나는 텍스트 색상을 변경하는 것입니다. 다시 JSON 파일로 돌아가 파란색을 선택하고 빨간색으로 바꾸겠습니다.

다시 저장하고 LuckyTemplates로 돌아가서 JSON 테마 파일을 한 번 더 가져오겠습니다. 이제 모든 텍스트가 빨간색으로 변경된 것을 볼 수 있습니다.

사용자 정의 테마를 위한 배경 변경

이제 페이지 배경을 보고 팔레트에서 두 번째로 어두운 색상으로 설정해 보겠습니다. Notepad++로 이동하여 페이지 배경 코드 블록을 잡고 복사합니다.

그런 다음 Visual Studio Code로 이동하여 코드를 붙여넣습니다.

그런 다음 LuckyTemplates로 이동하고 다시 한 번 스크래치 테마를 적용하여 새 배경을 확인합니다.

제목 텍스트 배경 변경

제목 텍스트 배경을 가장 어두운 테마 색상으로 변경하고 텍스트 색상을 흰색으로 변경하여 데모를 완성해 보겠습니다. 보시다시피 JSON 테마 파일을 통해 테이블 ​​및 행렬 스타일을 설정하기 위한 적절한 구문을 찾지 못했습니다. 그래서 인터페이스를 사용하여 두 비주얼의 스타일을 none 으로 변경했습니다 .

Notepad++로 돌아가 제목 배경에 대한 JSON 코드 블록을 복사해 보겠습니다.

그런 다음 Visual Studio Code로 이동하여 코드를 붙여넣습니다.

다시 테마를 저장하고 LuckyTemplates로 돌아가 테마를 한 번 더 적용합니다.

시각적 개체에 그림자 추가

또한 몇 가지 테마 옵션을 보여주는 몇 가지 작은 독립 실행형 데모도 있습니다. 테마를 기본 옵션으로 다시 설정해 보겠습니다. 모든 시각적 개체에 그림자를 추가하려면 visualStyles 및 dropShadow 구문을 사용할 수 있습니다.

LuckyTemplates로 이동하여 해당 테마 파일을 적용하면 모든 시각적 개체에 그림자가 있음을 알 수 있습니다.

제목 텍스트 추가

모든 시각적 개체에 제목 텍스트가 있는지 확인하려면 Visual Studio Code에서 visualStyles, 제목, 표시 및 텍스트 구문을 사용하여 자리 표시자 제목 텍스트를 추가할 수 있습니다.

LuckyTemplates로 이동하여 해당 테마 파일을 적용하면 나머지 시각적 개체는 모두 제목과 함께 이미 수정되었기 때문에 시각적 개체 중 하나만 변경되었음을 알 수 있습니다.

새 페이지로 이동하여 새 테이블을 만들고 원하는 채널과 측정값을 가져오려면 기본 제목 텍스트가 있습니다.

우리가 할 수 있는 또 다른 일은 새 이미지가 컨테이너에 맞게 확장되는 방식에 영향을 주는 것입니다. 기본 테마로 재설정하고 이미지를 삽입하면 종횡비가 유지되는 것을 볼 수 있습니다.

테마 파일을 사용하여 이미지 배율을 설정하려면 visualStyles, image, imageScaling 및 image ScalingType 구문을 사용할 수 있습니다.

LuckyTemplates로 전환하여 해당 테마를 추가하면 이제 기존 시각적 개체에 대해 가로 세로 비율을 변경할 수 있음을 알 수 있습니다.

그리고 새 시각적 개체를 추가하면 크기 조정이 이제 적합하도록 설정되었음을 다시 확인할 수 있습니다.

사용자 정의 테마에서 기억해야 할 기타 사항

JSON 파일의 페이지 배경 투명도 설정이 고려되지 않은 것 같아서 데모 시작 전에 인터페이스를 사용하여 페이지 배경 투명도 수준을 0으로 설정했습니다.

테이블 및 매트릭스 스타일에 대한 설정도 고려되지 않는 것 같습니다. 그래서 인터페이스를 사용하여 테이블과 행렬 스타일을 없음으로 설정했습니다.

순서는 JSON 테마 파일에서 중요한 것 같습니다. 따라서 특정 설정이 고려되지 않는 경우 코드에서 관심 있는 설정을 더 높거나 더 일찍 재정렬해 보십시오.

기존 시각적 개체는 특히 서식 설정이 이미 적용된 경우 테마 파일에 완전히 응답하지 않을 수 있습니다.

테마, 회사 로고, 아이콘 및 배경 만들기
보고서에 대한 LuckyTemplates 색상 테마를 선택하는 방법
매력적인 LuckyTemplates 색상 팔레트를 만드는 방법

결론

JSON 코딩, 특히 LuckyTemplates에서 상대적으로 초심자라면 제가 사용한 모든 예를 소금 한 알과 함께 살펴보세요. LuckyTemplates 내의 JSON 테마 코딩에 경험이 많고 친숙한 사람들이 훨씬 더 좋고 읽기 쉬운 코드를 생성할 것으로 기대합니다.

마지막으로, 초기 경험 중 일부를 공유하고 사용자 정의 테마에서 찾은 몇 가지 사용자 정의를 보여주고 싶었습니다. LuckyTemplates JSON 테마에 사용할 수 있는 다양한 설정이 있으며 사용 가능한 온라인 리소스를 조사하는 데 시간과 노력을 투자할 의향이 있는 사용자는 유용한 테마 파일을 반복적으로 개발할 수 있습니다.

훌륭한 출발점은 PowerBI.tips의 고급 테마 생성기의 속성 탭입니다. 여기에서 UI를 사용하여 모든 또는 특정 시각적 유형에 대한 JSON 테마 파일을 생성할 수 있습니다. LuckyTemplates 도구 상자에 사용자 지정 JSON 테마 코딩을 추가하여 보고서를 표준화하고 향후 작업을 절약하는 데 도움이 되기를 바랍니다.

그렉