콘텐츠로 이동

DisplayImageGrid

어떤 노드인가요?

DisplayImageGrid 노드는 사용자 정의 스타일 옵션, 사전 설정된 출력 크기, 유연한 정렬 제어 기능을 통해 여러 이미지를 그리드(Grid) 또는 메이슨리(Masonry) 레이아웃으로 표시할 수 있는 노드입니다. 이미지 갤러리 생성, 여러 생성 결과 비교 전시, 전문적인 출력 품질을 갖춘 정돈되고 시각적으로 매력적인 이미지 컬렉션 구성에 완벽합니다.

언제 사용하나요?

다음과 같은 상황에서 이 노드를 사용합니다:

  • 이미지 갤러리 또는 포트폴리오 제작
  • 여러 이미지 생성 결과 동시 표시
  • 처리된 이미지의 다양한 버전 비교 전시
  • 이미지 컬렉션 또는 앨범 구성
  • 검토를 위한 다중 이미지 옵션 제시
  • 이미지 기반 프레젠테이션 제작
  • 그리드 레이아웃으로 이미지 정리
  • 표준 비디오 해상도(4K, 1440p, 1080p, 720p)로 그리드 내보내기

사용 방법

기본 설정

  1. 워크플로우에 DisplayImageGrid 노드를 추가합니다.
  2. 여러 이미지 소스를 "images" 입력에 연결합니다.
  3. 레이아웃 스타일을 선택하고 외관을 사용자 정의합니다.
  4. 출력 크기 모드(사용자 지정 또는 사전 설정)를 선택합니다.
  5. 모든 이미지가 포함된 그리드가 화면에 표시됩니다.

파라미터 (Parameters)

이미지 입력

  • images: 그리드에 표시할 이미지 리스트

레이아웃 설정

  • layout_style: 이미지 배열 스타일

    • grid: 동일한 크기의 셀을 가진 일반 그리드 레이아웃
    • masonry: 이미지마다 높이가 다른 핀터레스트 스타일 레이아웃

  • grid_justification (그리드 레이아웃 전용): 불완전한 행에 있는 이미지의 가로 정렬 방식

    • left: 이미지를 왼쪽에 정렬 (기본값)
    • center: 이미지를 가운데 정렬
    • right: 이미지를 오른쪽에 정렬

  • columns (1-10, 기본값: 4): 그리드의 열(Column) 개수

  • spacing (0-100, 기본값: 10): 이미지 간의 간격(픽셀 단위)

스타일 옵션

  • crop_to_fit (불리언, 기본값: true): 깔끔한 테두리를 위해 그리드 셀에 딱 맞게 이미지를 자름

  • transparent_bg (불리언, 기본값: false): 단색 배경 대신 투명 배경 사용

  • background_color (16진수 색상, 기본값: #000000): 그리드의 배경색 (기본적으로 표시됨)

  • border_radius (0-500, 기본값: 8): 둥근 모서리 반경 (0은 직각)

출력 설정

  • output_image_size: 사용자 지정 너비 또는 사전 설정 크기 선택

    • custom: 사용자 지정 너비 값 사용
    • preset: 표준 비디오 해상도 사용

  • output_image_width (기본값: 1200): 픽셀 단위의 최대 너비 (custom 선택 시 표시)

  • output_preset: 표준 비디오 해상도 (preset 선택 시 표시)

    • 4K (3840x2160): Ultra HD 해상도
    • 1440p (2560x1440): Quad HD 해상도
    • 1080p (1920x1080): Full HD 해상도
    • 720p (1280x720): HD 해상도

  • output_format: 출력 파일 형식

    • png: 최고 품질, 투명도 지원
    • jpeg: 작은 파일 크기, 투명도 미지원
    • webp: 우수한 압축률을 가진 최신 포맷

출력 (Outputs)

  • output: ImageUrlArtifact 형식의 서식화된 이미지 그리드

예시

일반적인 이미지 그리드 워크플로우:

  1. 여러 GenerateImage 노드를 사용하여 여러 이미지를 생성합니다.
  2. 모든 이미지를 DisplayImageGrid 노드의 "images" 파라미터에 연결합니다.
  3. 레이아웃 설정을 지정합니다:
    • 균일한 타일 형태를 위해 layout_style을 "grid"로 선택
    • 마지막 불완전한 행을 가운데 맞추기 위해 grid_justification을 "center"로 설정
    • 4열 그리드를 위해 columns를 4로 설정
    • 이미지 간 편안한 여백을 위해 spacing을 10으로 설정
  4. 외관을 설정합니다:
    • 어두운 배경을 위해 background_color를 "#000000"(검정)으로 설정
    • 둥근 모서리를 위해 border_radius를 8로 설정
    • 깔끔한 테두리를 위해 crop_to_fit 활성화
  5. 출력 크기를 선택합니다:
    • output_image_size로 "preset" 선택
    • Full HD 출력을 위해 "1080p (1920x1080)" 선택
  6. 정확히 1920×1080 픽셀 크기의 정돈되고 매력적인 레이아웃으로 모든 이미지가 표시됩니다.

중요 참고 사항

  • 유연한 레이아웃: 일반 그리드와 메이슨리 레이아웃 중 자유롭게 선택할 수 있습니다.
  • 사전 설정 크기: 표준 비디오 해상도(4K, 1440p, 1080p, 720p)로 바로 내보낼 수 있습니다.
  • 스마트 스케일링: 프리셋 사용 시 왜곡 없이 맞추기 위해 그리드가 비율에 맞춰 자동으로 조정됩니다.
  • 정렬 제어: 그리드 레이아웃에서 불완전한 마지막 행을 좌측, 중앙, 우측으로 정렬할 수 있습니다.
  • 배경 제어: 단색 배경 또는 투명 배경 중 선택 가능합니다.
  • 사용자 지정 스타일: 색상, 간격, 모서리 둥글기 등을 완벽하게 제어할 수 있습니다.
  • 다중 이미지 지원: 개수에 제한 없이 많은 입력 이미지를 처리할 수 있습니다.
  • 비크롭(No Cropping) 프리셋: 프리셋 사용 시 이미지가 잘리지 않고 필요한 경우 여백(Padding)과 함께 비율에 맞춰 크기가 조정됩니다.

자주 묻는 질문 및 문제 해결

  • 이미지가 표시되지 않음: "images" 파라미터에 이미지가 제대로 연결되어 있는지 확인하세요.
  • 레이아웃 부자연스러움: 더 나은 구성을 위해 columns 및 spacing 값을 조정해 보세요.
  • 이미지가 너무 작음: 전체 그리드 너비를 늘리거나 열(columns) 수를 줄이세요.
  • 프리셋 출력이 예상과 다름: 프리셋 모드는 가로세로 비율을 유지하면서 정확한 해상도 규격 내에 그리드를 맞춥니다.

기술 세부 정보

이 노드는 다음과 같은 반응형 그리드 레이아웃을 생성합니다:

  • 지정된 레이아웃 스타일에 따라 이미지를 자동으로 정렬
  • 그리드에 이미지를 맞추는 동안 가로세로 비율 유지
  • 일관된 간격 및 스타일 적용
  • 일반 그리드 및 메이슨리 레이아웃 모두 지원
  • 프리셋 사용 시 정확한 치수의 캔버스를 생성하고 그리드를 비례 스케일링
  • 그리드 레이아웃에서 가로 정렬(Justification) 적용
  • 필요한 경우 배경 패딩을 주어 그리드를 수직 중앙에 배치

표준 출력 해상도에서 전문가 수준의 이미지 갤러리 및 컬렉션을 제작하는 데 이상적입니다.