빈 상태 일러스트레이션을 사용자 지정 이미지로 재정의

기본 빈 상태 일러스트레이션을 사용자 지정 이미지로 수정하거나 재정의하여 시각적 요소가 회사의 브랜딩을 반영하도록 합니다.

시작하기 전에

이미지를 테마에 맞게 만들려면 사용자 지정 SVG를 테마 작성기에 업로드하기 전에 선호하는 텍스트 편집기를 사용하여 코드에 다음 두 개의 디자인 토큰을 추가합니다.

• --empty-state--main-object--fill

• --empty-state--main-object—outline

자세한 내용은 이미지 스타일 작업 문서를 참조하십시오.

필요한 역할: 관리자

이 태스크 정보

중요사항:

사용자 지정 이미지는 작업 공간에 적용되며 에서는 코어 UI지원되지 않습니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > 테마 > 테마 작성기.
   테마 작성기 방문 페이지가 새 탭에서 열리고 홈페이지 뷰에 표시됩니다.
2. 페이지 드롭다운 목록을 사용하여 편집기 페이지 뷰를 선택합니다.

   그림 1. 편집기 페이지 뷰

   

3. 테마 드롭다운 목록에서 편집할 테마를 선택합니다.
4. 일반 스타일 패널에서 이미지 스타일 탭을 선택합니다.
   빈 상태 일러스트레이션은 메인 스테이지에 표시되며 유형별로 그룹화됩니다.

   그림 2. 이미지 스타일 탭 선택됨

   

5. 다음 옵션 중 하나를 사용하여 재정의할 빈 상태 일러스트레이션을 선택합니다.
   • 필터 아이콘 아이콘을 선택하고 빈 상태 범주를 확장하여 재정의할 특정 빈 상태 그림을 선택합니다.
   • 메인 스테이지 내에서 빈 상태 일러스트레이션 목록을 스크롤합니다.
   속성 패널이 자동으로 열립니다.
6. 속성 패널에서 이미지 탭을 선택합니다.

   그림 3. 속성 패널 이미지 탭

   

7. 재정의할 그림의 크게, 중간 또는 작은 이미지 파일을 선택합니다.
   주:

   한 번에 하나의 이미지 크기만 재정의할 수 있습니다.
   이미지 업로드 모달이 나타납니다.

   그림 4. 이미지 업로드 모달

   

8. 다음 옵션 중 하나를 사용하여 사용자 지정 이미지를 업로드합니다.
   • 찾아보기를 선택하고 컴퓨터의 파일 브라우저에서 사용자 지정 이미지 파일을 선택한 다음 열기를 선택합니다.
   • 컴퓨터의 파일 브라우저에서 사용자 지정 이미지 파일을 끌어 모달에 직접 놓습니다.
   크기 및 형식 제한은 이미지 업로드 모달을 참조하십시오. 사용자 지정 이미지가 필요한 크기와 형식을 충족하지 않으면 이미지가 저장되지 않습니다.

   그림 5. 크기 및 형식 제한이 있는 이미지 모달 업로드

   

9. 저장을 선택합니다.
   사용자 지정 이미지는 선택한 빈 상태 범주 내의 메인 스테이지에 나타납니다.

   그림 6. 데이터 추가 사용자 지정 이미지가 표시된 빈 상태 범주

   

   그림 7. 사용자 지정 이미지가 표시된 데이터 빈 상태 범주 추가(이미지에 적용된 설계 토큰)

   

10. 옵션: 기본 빈 상태 그림을 복원하려면 재정의 제거 기호를 선택합니다.

    그림 8. 이미지 제거 재정의

    

11. 옵션: 인스턴스에 테마를 게시하기 전에 편집 내용을 미리 봅니다.
    1. 전역 스타일 패널에서 경험 미리 보기 탭을 선택합니다.

       

    2. 경험 드롭다운 목록에서 미리 보려는 경험을 선택합니다.

       

    3. 새 탭에서 열기 아이콘을 선택하여 새 탭에서 경험을 엽니다.

결과

두 개의 디자인 토큰이 적용된 사용자 지정 이미지를 업로드하면 기본 빈 상태 일러스트레이션과 마찬가지로 색상을 테마 작성기 사용자 지정할 수 있습니다. 색상 사용자 지정에 대한 자세한 내용은 문서를 참조하십시오 빈 상태 일러스트레이션 및 사용자 지정 이미지의 색상 사용자 지정.

테마가 게시되면 새로 고침 시 테마가 적용된 사용자에게 사용자 지정 이미지가 표시됩니다. 테마 게시에 대한 자세한 내용은 을 참조하십시오 를 사용하여 테마 게시 테마 작성기.