이미지 스타일 작업

이미지 스타일을 사용하면 일러스트레이션에 대해 다양한 색상 구성표를 실험하고 기본 일러스트레이션을 사용자 정의 이미지로 바꿀 수 있습니다. 이미지 스타일 기능은 테마의 시각적 요소를 사용자 지정할 수 있는 유연성을 제공합니다.

빈 상태 일러스트레이션

웹 페이지의 구성요소 또는 일부 넥스트 경험 에 데이터가 포함되어 있지 않으면 빈 상태 일러스트레이션이 나타납니다. 빈 상태 일러스트레이션은 테마가 있으며 인스턴스의 테마 색상에 맞게 조정됩니다.

중요사항:

빈 상태 일러스트레이션은 작업 공간에 적용되며 에서 코어 UI지원되지 않습니다.

그림 1. 빈 상태 일러스트레이션

이미지 스타일 기능은 각각 소형, 중형 및 대형 버전을 포함하여 다음과 같은 유형의 빈 상태 일러스트레이션 유형을 제공합니다.

• 첨부 파일 추가
• 데이터 추가
• 완료된 작업
• 완료된 작업
• 오류
• 처음 사용자
• 중단됨
• 활동 없음
• 데이터 없음
• 완료된 작업
• 권한 없음
• 완료된 작업
• 검색 결과 없음
• 완료된 작업
• 오프라인
• 구성되지 않음

사용자 지정 이미지

사용자 지정 이미지를 업로드하여 테마 작성기 기본 빈 상태 일러스트레이션을 대체합니다.

기본 빈 상태 일러스트레이션을 사용자 지정 이미지로 재정의하려면 각 이미지 크기를 개별적으로 업로드합니다. 빈 상태 유형의 한 크기만 재정의하거나 세 가지 크기를 모두 재정의하도록 선택할 수 있습니다. 세 가지 파일 크기 각각에 대한 크기 및 형식 제한은 다음과 같습니다.

표 1. 작은 이미지 크기 및 형식 제한

필드	설명
크기 제한	W56 x H56 픽셀
형식	SVG
파일 크기 제한	2메가바이트

표 2. 중간 이미지 크기 및 형식 제한

필드	설명
크기 제한	W216 X H168 픽셀
형식	SVG
파일 크기 제한	2메가바이트

표 3. 큰 이미지 크기 및 형식 제한

필드	설명
크기 제한	W350 x H318 픽셀
형식	SVG
파일 크기 제한	2메가바이트

빈 상태 일러스트레이션은 색상을 처리하는 두 개의 디자인 토큰에 따라 달라집니다.

• --empty-state--main-object--채우기
• --empty-state--main-object—개요

사용자 지정 이미지는 테마 색상을 자동으로 반영하지 않습니다. 이미지를 테마에 맞게 만들려면 사용자 지정 SVG를 테마 작성기에 업로드하기 전에 선호하는 텍스트 편집기를 사용하여 이러한 토큰을 코드에 추가합니다. 이러한 토큰을 이미지 코드에 추가하면 이미지가 테마 색상을 채택하고 에 업로드할 테마 작성기때 색상을 편집할 수 있습니다.

다음 예는 적용된 디자인 토큰을 보여줍니다.

<style>
    .main-object--outline {
        fill:rgb(var(--empty-state--main-object--outline, var(--main-object--outline, var(--now-color--interactive-3, 51,53,123))));
    }
    .main-object--fill {
        fill:rgb(var(--empty-state--main-object--fill, var(--main-object--fill, var(--now-color--interactive-1, 144,146,213))));
    }
  </style>

• 빈 상태 일러스트레이션 및 사용자 지정 이미지의 색상 사용자 지정
  빈 상태 일러스트레이션과 사용자 지정 이미지에 자동으로 적용되는 색상을 사용자 지정하고 제어하여 브랜드 인지도를 유지하면서 시각적 경험을 매력적으로 유지합니다.
• 빈 상태 일러스트레이션을 사용자 지정 이미지로 재정의
  기본 빈 상태 일러스트레이션을 사용자 지정 이미지로 수정하거나 재정의하여 시각적 요소가 회사의 브랜딩을 반영하도록 합니다.