테마 가능 빈 상태 이미지 작업

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 07월 31일
  • 소요 시간: 11분

    • 테마 가능한 빈 상태 이미지를 추가하여 빈 상태를 사용자 지정하고 사용자 경험을 개선합니다. 빈 상태에는 사용자가 컨텐츠를 추가하거나 작성하기 위한 지침 또는 작업이 포함됩니다.

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

    그림 1. 빈 상태 이미지
    사용 가능한 데이터가 없습니다. 빈 상태 이미지입니다.

    12가지 빈 상태 이미지 유형을 사용할 수 있으며 각 유형에는 소형, 중형 및 대형 버전이 포함됩니다. 그러나 UX 스타일을 사용하여 테마 작성기 테마를 만들 때 이미지 기록이 생성되지만 기록은 비어 있습니다. 이 경우 테마는 기본적으로 기본 시스템 빈 상태 테마 가능 이미지를 사용합니다. 이러한 이미지를 재정의하려면 문서를 테마에 대한 테마 가능 빈 상태 이미지 사용자 지정참조하십시오.

    의 UI 빌더일러스트레이션 구성 요소를 사용하여 사용자 지정 경험에 빈 상태 이미지를 삽입할 수 있습니다 . Illustration 구성 요소는 사용 가능한 모든 빈 상태 이미지를 표시합니다. 일러스트레이션 구성 요소에 대한 자세한 내용은 Horizon Design System 빈 상태를 참조하십시오.

    의 UI 빌더사용자 지정 그림 구성요소를 사용하여 사용자 지정 이미지를 추가할 수도 있습니다.

    테마 후크가 있는 테마 가능 빈 상태 이미지

    다음 이미지는 각 선택에 필요한 테마 후크와 함께 검색 결과 없음 빈 상태 이미지를 나타냅니다.

    그림 2. 검색 결과 없음(악센트 단색)
    검색 결과 없음 빈 상태, 이미지, 악센트, 단색 변형. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.

    이 변형에 필요한 테마 후크는 $now-color_interactive-1입니다.

    그림 3. 검색 결과 없음(악센트 윤곽선)
    검색 결과 없음 빈 상태, 이미지, 강조, 윤곽선 변형. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.

    이 변형에 필요한 테마 후크는 $now-color_interactive-3입니다.

    그림 4. 검색 결과 없음(미묘한 윤곽선)
    검색 결과 없음 빈 상태 이미지, 미묘한 윤곽선 변화. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.

    이 변형에 필요한 테마 후크는 $now-color_border-secondary입니다.

    그림 5. 검색 결과 없음(제목, 어두운 세부 묘사)
    검색 결과 없음 빈 상태 이미지, 주제 어두운 세부 사항 변화. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.

    이 변형에 필요한 테마 후크는 $now-color_border-3차입니다.

    그림 6. 검색 결과 없음(피사체 조명 세부 묘사)
    검색 결과 없음 빈 상태 이미지, 피사체 조명 세부 사항 변화. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.

    이 변형에 필요한 테마 후크는 $now-color_background-secondary입니다.

    그림 7. 검색 결과 없음(제목 채우기)
    검색 결과 없음 빈 상태 이미지, 제목 채우기 변형. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.

    이 변형에 필요한 테마 후크는 $now-color_background-primary입니다.

    그림 8. 검색 결과 없음(제목 개요)
    검색 결과 없음 빈 상태 이미지, 제목 개요 변형. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.

    이 변형에 필요한 테마 후크는 $now-color_border-secondary입니다.

    그림 9. 검색 결과 없음(대상 섀도)
    검색 결과 없음 빈 상태 이미지, 주제 그림자 변형. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.

    이 변형에 필요한 테마 후크는 $now-color_border-secondary입니다.

    빈 상태 표시등 모드 토큰

    그림 10. 메인 객체 빈 상태 이미지
    메인 개체 빈 상태 이미지. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.
    메인 오브젝트 빈 상태 이미지를 재정의하는 데 사용되는 테마 후크입니다.
    • now-illustration--empty-state--main-object--outline
    • now-illustration--empty-state--main-object--fill
    그림 11. 기본 객체 빈 상태 이미지
    기본 객체 빈 상태 이미지. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.
    기본 객체의 빈 상태 이미지를 재정의하는 데 사용되는 테마 후크입니다.
    • now-illustration--empty-state--primary-object--outline
    • now-illustration--empty-state--primary-object--primary-fill
    • now-illustration--empty-state--primary-object--tertiary-fill
    • now-illustration--empty-state--primary-object--main-detail
    • now-illustration--empty-state--primary-object--detail
    • now-illustration--empty-state--primary-object--shadow
    그림 12. 3차 객체 빈 상태 이미지
    3차 객체 빈 상태 이미지입니다. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.
    3차 객체 빈 상태 이미지를 재정의하는 데 사용되는 테마 후크입니다.
    • now-illustration--empty-state--tertiary-object--outline
    • now-illustration--empty-state--tertiary-object--primary-fill
    • now-illustration--empty-state--tertiary-object--tertiary-fill
    • now-illustration--empty-state--tertiary-object--main-detail
    • now-illustration--empty-state--tertiary-object--detail
    • now-illustration--empty-state--tertiary-object--shadow
    그림 13. 배경 빈 상태 이미지
    배경 빈 상태 이미지. 텍스트 설명은 다음 테마 후크 정보를 참조하십시오.
    배경 빈 상태 이미지를 재정의하는 데 사용되는 테마 후크입니다.
    • now-illustration--empty-state--background--lines
    • now-illustration--empty-state--background--tertiary-lines
    • now-illustration--empty-state--background--object-outline
    • now-illustration--empty-state--background--object-detail
    • now-illustration--empty-state--background--object-shadow
    • now-illustration--empty-state--background--object-fill

    빈 상태 표시등 모드 대체

    표 1. 빈 상태 라이트 모드 폴백 스타일 선언
    객체 스타일 선언
    메인 객체 
    
 .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);
}
    기본 객체 
    
 .primary-object--outline {
  fill:rgb(var(--empty-state--primary-object--outline),
      var(--primary-object--outline), var(--now-color--border--secondary),
    176,181,191);
}
    		 
    
 .primary-object--primary-fill {

      fill:rgb(var(--empty-state--primary-object--primary-fill),
      var(--primary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .primary-object--tertiary-fill {

      fill:rgb(var(--empty-state--primary-object--tertiary-fill),
      var(--primary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .primary-object--main-detail {

      fill:rgb(var(--empty-state--primary-object--main-detail), var(--primary-object--main-detail),
      var(--now-color--border--secondary), 176,181,191);
}
    		 
    
 .primary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .primary-object--shadow {
  fill:rgb(var(--empty-state--primary-object--shadow),
      var(--primary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    세 번째 객체 
    
 .tertiary-object--outline {
  fill:rgb(var(--empty-state--tertiary-object--outline),
      var(--tertiary-object--outline), var(--now-color--border--secondary), 176,181,191);
}
      
    
 .tertiary-object--primary-fill {

      fill:rgb(var(--empty-state--tertiary-object--primary-fill),
      var(--tertiary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .tertiary-object--tertiary-fill {

      fill:rgb(var(--empty-state--tertiary-object--tertiary-fill),
      var(--tertiary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .tertiary-object--main-detail {

      fill:rgb(var(--empty-state--tertiary-object--main-detail),
      var(--tertiary-object--main-detail), var(--now-color--border--secondary),
      176,181,191);
}
    		 
    
 .tertiary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .tertiary-object--shadow {
  fill:rgb(var(--empty-state--tertiary-object--shadow),
      var(--tertiary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    배경 객체 
    
 .background--lines {
  fill:rgb(var(--empty-state--background--lines),
      var(--background--lines), var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--tertiary-lines {

      fill:rgb(var(--empty-state--background--tertiary-lines), var(--background--tertiary-lines),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-outline {

      fill:rgb(var(--empty-state--background--object-outline), var(--background--object-outline),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-detail {
  fill:rgb(var(--empty-state--background--object-detail),
      var(--background--object-detail), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .background--object-shadow {
  fill:rgb(var(--empty-state--background--object-shadow),
      var(--background--object-shadow), var(--now-color--background--tertiary),
      228,230,234);
}
    		 
    
 .background--object-fill {
  fill:rgb(var(--empty-state--background--object-fill),
      var(--background--object-fill), var(--now-color--background--primary),
    255,255,255);
}