PartGrid.ai
Documentation menu

임베드 테마

지정된 테마와 지원 CSS 변수로 임베드 스타일을 관리해 각 공개 뷰어가 올바른 브랜드 맥락과 일치하도록 합니다.

임베드 테마 작동 방식

임베드 테마는 스토어프런트, 포털, 컬렉션 및 대리점 경험에서 PartGrid 뷰어가 사용하는 시각 시스템을 제어합니다. Theme Library에서 재사용 가능한 테마를 만들고 필요한 버전을 게시한 뒤, 컬렉션이 기본값과 다른 스타일을 사용해야 하는 경우 재정의를 지정합니다.

권한

테마에는 보기, 생성, 편집, 삭제, 지정 및 테마 제안 생성에 대한 별도 권한이 있습니다. 역할에 허용되지 않은 제어는 숨겨지거나 비활성화됩니다. 접근 권한을 확인하거나 변경하려면 역할 생성 및 관리를 참고하세요.

Theme Library 열기

대시보드 또는 Integrations → Embed → Overview에서 Theme Library를 엽니다. 기존 테마를 선택해 편집하거나 필요한 시각 시스템이 아직 없다면 재사용 가능한 테마를 생성합니다.

Basic mode 설정

  • Brand colors: primary, accent, background, surface, text, muted, border 색상을 설정합니다.
  • Typography: 제목과 본문 글꼴, 기본 크기, 줄 높이, 제목 대소문자 및 굵기를 선택합니다.
  • Layout and spacing: 콘텐츠 너비, 섹션 간격, 밀도 및 모션 강도를 조정합니다.
  • Shape and surfaces: 모서리 반경, 패널 및 컨트롤 재정의, 그림자, 페이지 스타일, 패널 스타일 및 색상 모드를 구성합니다.
  • Component styles: 카드, 버튼, 입력, 배지, 탐색, 표, 탭 및 드롭다운의 표현을 선택합니다.
  • Semantic surfaces: 뷰어 캔버스, 패널, 활성 상태 및 탐색의 공통 색상을 설정합니다.
  • Annotations and markers: 분해도 상호작용에 사용되는 선, 핫스팟, 윤곽선 및 활성 글로우 스타일을 설정합니다.

웹사이트에서 초안 생성

역할에 테마 제안 생성 권한이 있으면 Website URL을 입력하고 필요에 따라 Logo URL, 추가 페이지 및 메모를 지정합니다. Generate draft를 선택한 뒤 PartGrid가 추출한 내용을 검토하고 게시 전에 결과를 조정합니다.

테마 버전

활성 테마와 초안

임베드에 테마 지정

Theme Library에서 필요한 기본 테마를 설정한 뒤 Integrations → Embed → Theme selection을 엽니다. 컬렉션과 대리점 컬렉션은 특정 대상에 다른 테마를 선택하지 않는 한 임베드 기본 테마를 사용합니다.

지정 동작

  • Default: 컬렉션 또는 대리점 컬렉션에 재정의가 없을 때 사용됩니다.
  • Collection override: 선택한 테마를 하나의 컬렉션 임베드에 적용합니다.
  • Dealer collection override: 선택한 테마를 하나의 지정 대리점 경험에 적용합니다.
  • 재정의를 제거하려면 기본 테마를 다시 선택합니다.

Advanced mode 사용

Advanced mode를 선택하면 정규화된 전체 테마를 JSON으로 편집할 수 있습니다. Active theme JSON은 활성 버전을, Draft token JSON은 별도의 초안 버전을 제어합니다.

Advanced workflow

  1. 테마 편집기에서 Advanced mode를 선택합니다.
  2. 활성 경험을 직접 변경해야 할 때만 Active theme JSON을 편집하고, 검토용 변경은 Draft token JSON에서 준비합니다.
  3. JSON을 유효한 형식으로 유지합니다. 잘못된 테마 JSON은 저장되지 않습니다.
  4. Reset JSON으로 현재 불러온 활성 또는 초안 값으로 되돌릴 수 있습니다.
  5. 편집한 버전에 따라 Save theme, Save draft 또는 Publish draft를 선택합니다.
  6. 더 넓게 배포하기 전에 영향을 받는 도면 또는 컬렉션을 미리 봅니다.

안정적인 CSS 변수

승인된 사용자 지정 스타일 계약에서 현재 문서화된 안정적인 임베드 변수는 --pf-primary입니다. 다른 테마 키와 런타임 변수는 PartGrid가 별도로 문서화하지 않는 한 스토어프런트 연동 계약으로 지원되지 않습니다.

테마 테스트

영향을 받는 도면 또는 컬렉션을 미리 본 뒤 실제 스토어프런트나 포털 페이지에서도 테스트합니다. 대비, 타이포그래피, 패널, 컨트롤, 핫스팟, 부품 카드, 반응형 레이아웃 및 고객 동작을 확인하세요.

테스트 체크리스트

  • 예상한 기본 테마 또는 컬렉션 재정의가 선택되어 있는지 확인합니다.
  • 의도한 활성 버전이 게시되어 있는지 확인합니다.
  • 데스크톱과 모바일 레이아웃을 모두 확인합니다.
  • Theme Library뿐 아니라 실제 스토어프런트 또는 포털에서도 테마를 테스트합니다.
  • 추가 변경이 아직 활성 뷰어에 영향을 주지 않아야 한다면 초안으로 돌아갑니다.
임베드 테마 | PartGrid documentation