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

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 11분

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

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

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

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

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

    의 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-기본입니다.

    그림 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);
}