스타일 사전 설정 작업

Dynamics 365 Commerce의 소매 관심 그룹이 Yammer에서 Viva Engage로 이동했습니다. 새 Viva Engage 커뮤니티에 액세스할 수 없는 경우 이 양식(https://aka.ms/JoinD365commerceVivaEngageCommunity)을 작성하여 추가하고 최신 토론에 계속 참여하세요.

이 문서에서는 Microsoft Dynamics 365 Commerce 사이트 작성기에서 사이트 스타일 사전 설정을 사용하는 방법에 대해 설명합니다.

스타일 사전 설정은 사이트 테마 전체에 걸쳐 작성 가능한 모든 스타일 값의 저장된 집합입니다. 사이트 작성기에서 사이트의 모양을 즉시 변경하는 데 사용할 수 있습니다. 스타일 사전 설정을 사용하면 Commerce 사이트 작성기 작성자가 CSS(Cascading Style Sheet)를 사용하거나 테마를 배포하지 않고도 사이트 전체에서 스타일 값 세트를 빠르게 변경, 프리뷰 및 활성화할 수 있습니다. 글꼴 스타일, 버튼 스타일 및 사이트 색은 스타일 사전 설정을 통해 관리할 수 있는 스타일 변수의 일반적인 예입니다.

사이트에서 사용할 수 있는 스타일 변수 집합은 사이트의 테넌트에 배포되는 테마 및 모듈 라이브러리에 의해 결정됩니다. Dynamics 365 Commerce 온라인 소프트웨어 개발 키트(SDK)를 사용하면 개발자가 지정된 테마에 필요한 만큼 많이 (또는 적게) 작성 가능한 스타일 변수를 구현할 수 있습니다. 더 많은 스타일 변수를 활성화함으로써 테마 개발자는 사이트 스타일에 대한 최종 선택을 사이트 작성기 작성자에게 맡길 수 있습니다. 따라서 개발자가 아닌 사용자도 도구 집합을 사용하여 사이트 스타일을 업데이트하고 미리 볼 수 있습니다. 이 기능은 테마를 직접 변경하거나 CSS에서 불필요한 오버헤드가 발생하는 모든 시나리오에도 유용합니다.

작성 가능한 스타일 변수를 사용할 수 있는 테마에는 기본 스타일 사전 설정이 필요합니다. 선택적으로 배포된 테마 패키지의 일부로 추가 사전 설정 옵션을 포함할 수 있습니다. 예를 들어 단일 기본 "modern light" 스타일 사전 설정이 있는 테마를 배포할 수 있습니다. 또는 기본 사전 설정 외에 "modern dark", "vintage light" 또는 "vintage dark"와 같은 추가 스타일 사전 설정 옵션이 포함될 수 있습니다. 이러한 기본 제공 테마 사전 설정은 개발자가 만들며 새 사이트 디자인의 시작점으로 사용할 수 있습니다.

사이트 빌더에서 작성자는 테마의 기본 제공 사전 설정 중에서 선택하거나 활성화된 스타일 변수를 사용하여 고유한 스타일 사전 설정 및 사용자 정의를 만들 수 있습니다. 스타일 사전 설정은 라이브 사이트에서 활성화되기 전에 사이트 작성기에서 미리 볼 수 있습니다. 작성자의 스타일 변경 사항을 검토한 후 라이브 사이트에 대해 스타일 사전 설정을 "활성"으로 설정할 수 있습니다.

스타일 사전 설정 프리뷰

사이트 작성기에서 사이트에 스타일 사전 설정을 프리뷰하려면 다음 단계를 따르세요.

사이트의 왼쪽 탐색 창에서 사이트 설정 > 디자인으로 이동합니다.
디자인 편집기 맨 위에 있는 스타일 사전 설정 탭의 사용 가능한 사전 설정 목록에서 사전 설정을 선택한 다음 보기를 선택하여 사전 설정 편집기로 이동합니다.

현재 사용 가능한 사전 설정 목록에 사전 설정이 없는 경우 사용자 정의 스타일 사전 설정을 만드는 방법에 대한 자세한 내용은 사용자 정의 스타일 사전 설정 만들기를 참조하십시오.

참고

테마에 포함된 사전 설정은 기본 제공 배지로 표시됩니다. 이러한 기본 제공 사전 설정은 읽기 전용입니다. 기본 제공 사전 설정을 사용자 지정 가능한 새 사전 설정으로 복사하려면 사전 설정에 대한 줄임표 버튼(...)을 선택한 다음 다른 이름으로 저장을 선택합니다.
명령 모음에서 미리 보기를 선택합니다.
사이트에서 스타일 사전 설정을 미리 보는 데 사용할 URL을 선택한 다음 확인을 선택합니다.
프리뷰할 채널별 및 언어별 URL 변형을 변형 이름을 선택하여 선택합니다. 새 프리뷰 브라우저 창이 열리고 선택한 스타일 사전 설정이 지정된 페이지에 적용됩니다.

참고

프리뷰 URL은 영구적이고 인증됩니다. 따라서 라이브 사이트에서 "활성"으로 설정하기 전에 복사하고 붙여넣은 다음 검토를 위해 인증된 다른 동료에게 보낼 수 있습니다. 프리뷰 URL은 다른 장치, 다른 브라우저 및 다른 화면에서 스타일을 확인하는 데에도 유용합니다.

팁

스타일 사전 설정을 편집하는 동안, 프리뷰 브라우저 창을 별도의 브라우저 창에 열어 두면 변경 내용을 빠르게 확인하는 데 도움이 될 수 있습니다. 사전 설정에 대한 변경 사항을 저장한 후 열려 있는 프리뷰 브라우저 창을 새로 고쳐 사용자 환경을 확인합니다.

사용자 정의 스타일 사전 설정 만들기

사이트 작성기의 사용자 지정 스타일 사전 설정에서 고객 잔액 페이지를 만들려면 다음 단계를 수행합니다.

사이트의 왼쪽 탐색 창에서 사이트 설정 > 디자인으로 이동합니다.
디자인 편집기 맨 위에 있는 스타일 사전 설정 탭의 명령 모음에서 새 사전 설정을 선택합니다.
새 사전 설정의 이름과 설명을 입력한 후 저장을 선택합니다. 테마의 기본값을 시작점으로 사용하는 새로운 사용자 정의 가능한 사전 설정이 만들어집니다.

참고

또한 해당 사전 설정에 대한 줄임표 버튼(...)을 선택한 다음 다른 이름으로 저장을 선택한 후 기존 사전 설정에서 새 사용자 지정 스타일 사전 설정을 생성할 수 있습니다. 또는 사전 설정 편집기의 명령 모음에서 다른 이름으로 저장을 선택합니다.

전역 및 모듈 형식 스타일 값 수정

테마의 스타일 변수 중 일부는 여러 모듈 유형 간에 공유됩니다. 이러한 스타일 변수를 전역 스타일 변수라고 합니다. 예를 들어 기본 사이트 색, 기본 글꼴 스타일 및 버튼 스타일이 있습니다. 전역 변수를 설정하면 다양한 모듈 유형에서 모양을 변경할 수 있습니다.

일부 스타일 값은 모듈 유형에 고유하거나 선택적으로 기본 전역 값을 재정의해야 할 수 있습니다. 사이트의 테마가 모듈 유형 스타일 변수를 구현한 경우 사이트 빌더 작성자는 전역 설정과 독립적으로 모듈 유형의 스타일을 사용자 정의할 수 있습니다. 모듈 유형 변수는 테마의 전역 스타일 변수를 보강하거나 재정의할 수 있습니다.

참고

사이트의 스타일 값 계층 구조는 다음과 같은 방식으로 동작합니다. 오른쪽에 표시되는 스타일 값은 왼쪽에 있는 스타일 값보다 우선합니다.

테마 기본값 < 전역 스타일 값 < 모듈 유형 스타일 값 < CSS 재정의

사이트 작성기에서 스타일 사전 설정의 전역 또는 모듈 유형 값을 변경하려면 다음 단계를 따르십시오.

사이트의 왼쪽 탐색 창에서 사이트 설정 > 디자인으로 이동합니다.
디자인 편집기 맨 위에 있는 스타일 사전 설정 탭에서 임의의 스타일 사전 설정에 대해 보기를 선택하여 사전 설정 편집기로 이동합니다.
프리뷰를 선택하고, URL 선택 단계를 따라 사전 설정의 전체 브라우저 창 프리뷰를 엽니다. 이 프리뷰 브라우저 창을 열어 둡니다.
사전 설정 편집기의 오른쪽 상단에서 편집을 선택합니다.
편집기에서 스타일 변수 컨트롤을 사용하여 일부 전역 스타일 값을 변경할 수 있습니다.
편집기 상단의 모듈 탭에서 전역 탭의 오른쪽에 있는 스타일을 지정해야 하는 모듈 유형을 선택합니다.
스타일 컨트롤을 사용하여 모듈 유형에 대한 일부 값을 변경할 수 있습니다.
변경 내용을 미리 볼 준비가 되면 명령 모음에서 저장을 선택합니다.
열려 있는 프리뷰 브라우저 창으로 돌아가서 새로 고칩니다. 전체 브라우저 창 프리뷰는 서로 다른 보기 중단점, 다른 브라우저 및 다른 장치 플랫폼에서 스타일 변경 내용을 확인하는 데 유용합니다.
모든 변경 내용이 완료되고 유효성이 검사되면 편집기의 오른쪽 위에 있는 편집 완료를 선택합니다.