> ## Documentation Index
> Fetch the complete documentation index at: https://wb-21fd5541-update-reference-docs-60.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 미디어 패널

> W&B 워크스페이스에서 이미지, 비디오, 오디오, 3D 객체, 포인트 클라우드용 미디어 패널을 추가하고 구성합니다.

미디어 패널은 3D 객체, 오디오, 이미지, 비디오, 포인트 클라우드 등을 포함한 [미디어 객체에 로깅된 키](/ko/models/track/log/media/)를 시각화합니다. 이 페이지에서는 워크스페이스에서 미디어 패널을 추가하고 관리하는 방법을 설명합니다.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-update-reference-docs-60/mqbHajAZFPGPCdlR/images/app_ui/demo-media-panel.png?fit=max&auto=format&n=mqbHajAZFPGPCdlR&q=85&s=a74116cb0533cfa84026d734ba502f52" alt="미디어 패널 데모" width="612" height="663" data-path="images/app_ui/demo-media-panel.png" />
</Frame>

<div id="add-a-media-panel">
  ## 미디어 패널 추가
</div>

워크스페이스 수준 또는 특정 섹션에 미디어 패널을 추가합니다.

특정 섹션에 미디어 패널을 추가하려면 다음 단계를 따르세요.

1. 섹션의 **액션** (<Icon icon="ellipsis" iconType="solid" />) 메뉴를 열고 **Add panels**를 선택합니다.
2. **Media**를 펼칩니다.
3. **3D 객체**, **이미지**, **비디오** 또는 **오디오**를 선택합니다.
4. 패널을 설정한 후 **Apply**를 선택합니다.

<Info>
  패널을 추가하는 다른 방법은 [수동으로 패널 추가](/ko/models/app/features/panels#add-a-panel-manually)를 참조하세요.
</Info>

미디어 패널 설정에 대한 자세한 내용은 다음 섹션을 참조하세요.

<div id="configure-a-media-panel">
  ## 미디어 패널 구성하기
</div>

미디어 패널을 수동으로 추가하면 미디어 유형을 선택한 뒤 해당 패널의 설정 페이지가 열립니다.

기존 패널을 구성하려면 패널 위에 마우스를 올리고 오른쪽 상단의 톱니바퀴 아이콘(<Icon icon="gear" iconType="solid" />)을 선택합니다. 다음 섹션은 미디어 패널 설정 UI의 탭 및 설정 그룹에 해당합니다.

<div id="display">
  ### 표시
</div>

**표시** 탭에서 패널의 모양과 동작 방식을 설정하세요. 사용 가능한 설정은 미디어 유형에 따라 달라집니다.

<div id="viewer-settings">
  #### 뷰어 설정
</div>

미디어 패널을 보는 방식과 상호작용 방식을 설정합니다.

* **패널 제목**: 패널 제목을 지정합니다.
* **패널 모드**: 미디어 패널의 레이아웃을 지정합니다. 다음 모드 중에서 선택합니다.
  * **갤러리**(기본값): 열 수와 그리드에서 run, step 또는 index별로 하나의 항목을 표시할지 여부를 지정합니다. 다른 옵션을 선택하지 않으면 run별로 하나의 항목이 표시됩니다.
  * **그리드**: 열 수, x축, y축을 지정합니다. 기본 x축은 **로그 단계**이고 기본 y축은 **Run**입니다.
  * **비교**: 최대 4개의 미디어 항목을 나란히 비교합니다. 필요에 따라 step 또는 index별로 항목을 펼쳐 표시할 수 있습니다. 자세한 내용은 [Compare mode](#compare-mode)를 참조하세요.
* **미디어 키**: 표시할 이미지, 비디오 또는 기타 미디어가 포함된 로깅된 W\&B 필드를 지정합니다.
* **슬라이더 키**: 패널의 step 슬라이더에 사용할 키를 지정합니다. 기본값은 **Step**입니다.

<div id="appearance">
  #### 모양
</div>

패널에서 미디어를 표시하는 방식을 설정합니다.

* **이미지 부드럽게 처리**: 이미지가 더 자연스럽게 보이도록 부드럽게 처리합니다.

<div id="navigation-playback">
  #### 내비게이션 및 재생
</div>

run의 여러 지점에서 로깅된 미디어를 탐색하는 방식을 설정합니다.

* **Snap to step**: 표시하거나 숨깁니다. 활성화하면 스테퍼가 *Stride length*만큼 이동한 후 다음 기존 step으로 이동합니다. 비활성화하면 기존 step과 일치하지 않더라도 **Stride length**만큼 이동합니다.
* **Stride length**: 비디오 재생 중 왼쪽 및 오른쪽(빼기 및 더하기 버튼)을 사용할 때마다 이동할 step 수를 지정합니다. 이 설정은 비디오 미디어 패널에서만 사용할 수 있습니다.
* **Video seek step**: 비디오 재생 중 왼쪽 및 오른쪽(빼기 및 더하기 버튼)을 사용할 때 앞으로 또는 뒤로 건너뛸 시간을 지정합니다. 이 설정은 비디오 미디어 패널에서만 사용할 수 있습니다.

<div id="sync">
  ### Sync
</div>

섹션의 비디오용 step 슬라이더가 동기화되어 함께 움직일지 설정합니다. 이 설정은 비디오 미디어 패널에서만 사용 가능합니다.

<div id="sync-video-playback">
  #### 비디오 재생 동기화
</div>

섹션 내 미디어 패널 전체에서 비디오 재생을 동기화합니다.

* **비디오 자동 재생**: 워크스페이스 또는 패널을 열면 비디오가 자동으로 재생됩니다.
* **비디오 반복 재생**: 재생이 끝나면 비디오를 자동으로 다시 재생합니다.

<div id="layout">
  ### Layout
</div>

패널에서 개별 미디어 항목을 정렬하고 표시하는 방식을 구성합니다.

<div id="grid-organization">
  #### 그리드 및 구성
</div>

패널에 표시할 미디어 항목과 배치 방식을 설정합니다.

* **열 수**: 패널에 표시할 열의 수를 지정합니다.
* **열 콘텐츠**: 열 간에 달라지는 차원을 지정합니다.
  * **Run**: 각 열은 서로 다른 run을 나타냅니다.
  * **로그 단계**: 각 열은 run 내의 서로 다른 로깅 단계를 나타냅니다.
  * **예시 인덱스**: 각 열은 로깅된 미디어의 서로 다른 인덱스를 나타냅니다. 예를 들어 \[`img0`, `img1`, `img2`]를 로깅하면 각 열은 인덱스 0, 1, 2를 나타냅니다.
* **포함할 최대 run 수**: 패널에 표시할 최대 run 수를 지정합니다.
* **미디어 표시 제한**: 각 run에 대해 표시할 미디어 항목 수를 지정합니다.
  * **모두 표시**: 각 run에 로깅된 모든 미디어 항목을 표시합니다.
  * **미디어 제한**: 각 run에 표시할 미디어 항목 수를 제한합니다. 표시할 최대 항목 수를 지정합니다.

<div id="fit-alignment">
  #### 맞춤 및 정렬
</div>

W\&B에서 미디어 항목을 로드하고 크기를 조정하는 방식을 설정합니다.

<Tabs>
  <Tab title="이미지">
    **Image fit and resolution** 설정에서 패널에 이미지를 표시하는 방식을 선택하세요. 사용 가능한 옵션은 배포 유형에 따라 다릅니다.

    <Note>
      이 설정은 [**비교** 모드](#compare-mode)에서는 적용되지 않습니다.
    </Note>

    W\&B Multi-tenant Cloud의 경우:

    * **Thumbnails**(기본값): 더 빠르게 로드할 수 있도록 작은 미리보기를 로드합니다. W\&B는 썸네일이 패널에 맞도록 크기를 조정합니다.
    * **Original image**: 전체 해상도 이미지를 로드하고 패널에 맞도록 크기를 조정합니다.

    W\&B Dedicated Cloud 및 W\&B Self-Managed의 경우:

    * **Default**(기본값): 선택한 패널 모드의 기본 이미지 크기를 사용합니다.

    모든 배포 유형의 경우:

    * **사용 가능한 공간에 맞춤**: 전체 해상도 이미지 파일을 로드하고 패널을 채우도록 크기를 조정합니다. 표시 영역을 벗어나는 이미지 부분을 보려면 스크롤하세요.
    * **Original size**: 로깅된 픽셀 크기로 전체 해상도 이미지 파일을 로드합니다. 표시 영역을 벗어나는 이미지 부분을 보려면 스크롤하세요.

    <Note>
      Multi-tenant Cloud에서는 패널에서 선택한 미디어 로드 옵션과 관계없이 전체 화면 뷰에서 항상 전체 해상도 이미지를 로드합니다.
    </Note>
  </Tab>

  <Tab title="비디오">
    패널에 비디오를 표시하는 방식을 선택하세요:

    <Note>
      이 설정은 [**비교** 모드](#compare-mode)에서는 적용되지 않습니다.
    </Note>

    * **Use original size**: **갤러리** 모드에서 비디오를 원래 크기로 표시합니다. 이 옵션을 끄면 W\&B는 비디오의 가로세로 비율을 유지하면서 패널 공간을 최대한 활용하도록 비디오 크기를 조정합니다. **그리드** 모드에서는 각 비디오가 그리드 너비를 채웁니다.
    * **비디오 스트리밍 사용 안 함**: 비디오의 스트리밍 재생을 끕니다.
  </Tab>

  <Tab title="3D 객체">
    패널에 3D 객체를 표시하는 방식을 선택하세요:

    * **오른손 좌표계**: 기본 왼손 좌표계 대신 오른손 좌표계로 포인트 클라우드를 플로팅합니다.
  </Tab>
</Tabs>

<div id="overlays">
  ### 오버레이
</div>

세그멘테이션 마스크 또는 바운딩 박스와 함께 로깅한 이미지와 포인트 클라우드에는 이 탭이 표시됩니다. 이 탭을 사용해 다음 작업을 수행하세요:

* 이름으로 오버레이를 검색하고 필터링합니다.
* 오버레이 색상을 사용자 지정합니다.

<div id="configure-all-media-panels-in-a-section">
  ## 섹션의 모든 미디어 패널 구성
</div>

섹션의 모든 미디어 패널이 동일한 설정을 공유하고 워크스페이스 수준의 기본 설정을 재정의하도록 하려면 섹션 수준 기본값을 구성하세요.

섹션의 모든 미디어 패널에 대한 기본 설정을 사용자 지정하여 미디어 패널의 워크스페이스 설정을 재정의하려면 다음과 같이 하세요.

1. 섹션의 톱니바퀴 아이콘을 클릭해 설정을 엽니다.
2. **Media settings**를 클릭합니다.
3. 나타나는 드로어에서 **표시**, **Layout** 또는 **Sync** 탭을 클릭해 섹션의 기본 미디어 설정을 구성합니다. 이미지, 비디오, 오디오, 3D 객체에 대한 설정을 구성할 수 있습니다. 표시되는 설정은 섹션의 현재 미디어 패널에 따라 달라집니다.

**표시** 또는 **Layout** 미디어 설정의 개별 항목에 대한 자세한 내용은 [Configure a media panel](#configure-a-media-panel)을 참고하세요. **Sync** 탭은 개별 미디어 패널에서는 사용할 수 없으며, 섹션 또는 워크스페이스 수준에서만 사용할 수 있습니다.

**Step slider syncing**이 켜져 있으면 동일한 step 슬라이더를 가진 섹션의 미디어 패널이 동기화된 상태로 유지됩니다. step 슬라이더 syncing을 켜려면 다음과 같이 하세요.

1. **Sync** 탭을 클릭합니다.
2. \*\*키별 슬라이더 동기화 (Step)\*\*를 켭니다.

<div id="configure-all-media-panels-in-a-workspace">
  ## 워크스페이스의 모든 미디어 패널 구성하기
</div>

워크스페이스의 모든 섹션에서 미디어 패널에 일관된 기준을 적용하려면 워크스페이스 수준의 기본값을 구성하세요.

워크스페이스의 모든 미디어 패널에 대한 기본 설정을 사용자 지정하려면 다음 단계를 따르세요.

1. 톱니바퀴 아이콘과 **Settings** 레이블이 있는 워크스페이스의 설정을 클릭합니다.
2. **Media settings**를 클릭합니다.
3. 표시되는 드로어에서 **표시** 또는 **Layout** 탭을 클릭해 워크스페이스의 기본 미디어 설정을 구성합니다. 이미지, 비디오, 오디오, 3D 객체에 대한 설정을 구성할 수 있습니다. 표시되는 설정은 워크스페이스의 현재 미디어 패널에 따라 달라집니다.

**Sync** 탭을 제외한 각 설정에 대한 자세한 내용은 [미디어 패널 구성하기](#configure-a-media-panel)를 참고하세요. **Sync** 탭은 개별 미디어 패널에서는 사용할 수 없으며, 섹션 또는 워크스페이스 수준에서만 사용할 수 있습니다.

**Step slider syncing**이 켜져 있으면 동일한 step 슬라이더를 사용하는 섹션의 미디어 패널이 동기화된 상태로 유지됩니다. step 슬라이더 동기화를 켜려면 다음 단계를 따르세요.

1. **Sync** 탭을 클릭합니다.
2. \*\*키별 슬라이더 동기화 (Step)\*\*를 켭니다.

각 설정에 대한 자세한 내용은 [미디어 패널 구성하기](#configure-a-media-panel)를 참고하세요.

<div id="compare-mode">
  ## Compare mode
</div>

Compare mode를 사용하면 run, step 또는 인덱스를 조합해 이미지나 비디오 2\~4개를 선택하고 하나의 그리드에서 볼 수 있습니다. 하나 이상의 파일을 다운로드하거나 탭을 전환하지 않고도 미디어를 비교할 수 있습니다.

Compare mode는 다음과 같은 경우에 유용합니다:

* 새 체크포인트나 run이 기준선 또는 이전 체크포인트보다 더 나은 출력을 생성하는지 확인합니다.
* 현재 run을 동일한 step 또는 인덱스의 이미 검증된 체크포인트와 비교해 성능 회귀를 포착합니다.
* 레퍼런스 미디어와 생성된 미디어를 나란히 보면서 모델 출력을 정답 데이터와 비교해 검증합니다.
* 생성된 이미지나 비디오가 트레이닝 step에 따라, 또는 서로 다른 체크포인트나 run에 따라 어떻게 달라지는지 검토합니다.

Compare mode는 diffusion 또는 생성 모델과 같은 이미지/비디오 생성 워크플로, 멀티모달 평가, 비전 실험, 그리고 미디어를 로깅하고 이를 run, step 또는 인덱스별로 비교해야 하는 기타 워크플로에 유용합니다.

Compare mode를 사용하려면 다음을 수행합니다:

1. 워크스페이스에서 미디어 패널(이미지 또는 비디오용)을 엽니다.
2. **Panel mode**를 **Compare**로 설정합니다.
3. 열 수와 fan out 모드를 지정해 그리드의 크기와 밀도를 설정합니다. 최적의 그리드 구성은 run이 미디어를 로깅하는 방식에 따라 달라집니다.
   * **Number of columns**: 각 행에 표시할 항목 수입니다. `1`부터 `4`까지 설정할 수 있습니다.
   * **Fan out**: 그리드의 각 행에 표시할 미디어 단위를 제어합니다. 최적의 설정은 run별 각 step에 로깅하는 미디어 수와, 빠르게 점검만 할지 아니면 심층 분석이 필요한지에 따라 달라집니다.
     * **None** (기본값): fan-out을 적용하지 않습니다. 각 그리드 열은 하나의 run을 나타내고, 각 그리드 행은 로깅된 이미지 또는 비디오를 나타냅니다.
       <Frame>
         <img src="https://mintcdn.com/wb-21fd5541-update-reference-docs-60/pNPbU2oGKQGA13-e/images/models/compare-mode-fan-out-none.png?fit=max&auto=format&n=pNPbU2oGKQGA13-e&q=85&s=ea4830b77dffdcdb065fbfc56e4fc3a0" alt="두 개의 run과 fan out 없음이 설정된 compare mode의 미디어 패널을 보여주는 스크린샷" width="1132" height="718" data-path="images/models/compare-mode-fan-out-none.png" />
       </Frame>
     * **Step**: step 축을 따라 fan out합니다. 각 그리드 열은 하나의 run을 나타내고, 각 그리드 행은 run:step 조합에서 처음 로깅된 이미지 또는 비디오를 보여줍니다.
       <Frame>
         <img src="https://mintcdn.com/wb-21fd5541-update-reference-docs-60/pNPbU2oGKQGA13-e/images/models/compare-mode-fan-out-by-step.png?fit=max&auto=format&n=pNPbU2oGKQGA13-e&q=85&s=dfa2e52f175623ab77b30c9ed3efc35f" alt="두 개의 run과 step 기준 fan out이 설정된 compare mode의 미디어 패널을 보여주는 스크린샷" width="1132" height="718" data-path="images/models/compare-mode-fan-out-by-step.png" />
       </Frame>
     * **Index**: 인덱스 축을 따라 fan out하며, step마다 여러 항목을 로깅할 때 유용합니다(예: `run.log({"images": [img0, img1, img2, img3]})`). 각 행 셀은 지정된 run:step:index 조합에서 로깅된 이미지 또는 비디오를 보여줍니다.
       <Frame>
         <img src="https://mintcdn.com/wb-21fd5541-update-reference-docs-60/pNPbU2oGKQGA13-e/images/models/compare-mode-fan-out-by-index.png?fit=max&auto=format&n=pNPbU2oGKQGA13-e&q=85&s=c3bb1fa661b17df1c12ddc5de57517ed" alt="두 개의 run과 index 기준 fan out이 설정된 compare mode의 미디어 패널을 보여주는 스크린샷" width="1132" height="718" data-path="images/models/compare-mode-fan-out-by-index.png" />
       </Frame>
4. 특정 변수가 단일 타일(**Individual**)에 영향을 줄지, 아니면 모든 타일(**Linked**)에 영향을 줄지 설정합니다.
   * **Media key**: 기본값은 **Linked**입니다.
   * **Run**: 기본값은 **Individual**입니다.
   * **Step**: 기본값은 **Linked**입니다.
   * **Index**: 기본값은 **Linked**입니다.

W\&B가 선택한 내용을 저장하므로 패널을 다시 설정하지 않고도 나중에 같은 비교로 돌아올 수 있습니다.

<div id="interact-with-a-media-panel">
  ## 미디어 패널 사용하기
</div>

미디어 패널을 추가하고 설정한 후에는 다음 상호작용을 사용해 로깅된 미디어를 단계별로 살펴보고, 비교하고, 자세히 확인할 수 있습니다.

* 미디어 패널을 설정하려면 패널 위에 커서를 올린 다음 상단의 톱니바퀴 아이콘을 클릭합니다.
* 미디어 패널의 step 슬라이더를 이동하려면 **Cmd + 왼쪽 또는 오른쪽 화살표 키**(macOS) 또는 **Ctrl + 왼쪽 또는 오른쪽 화살표 키**(Windows or Linux)를 사용합니다. 섹션 또는 워크스페이스에서 **키별 슬라이더 동기화**가 켜져 있으면, 한 미디어 패널에서 step 슬라이더를 움직일 때 동일한 step 슬라이더 키를 사용하는 다른 미디어 패널의 step 슬라이더도 함께 이동합니다.
* 미디어 패널 상단의 스테퍼를 사용해 미디어 run을 차례대로 확인합니다. step 슬라이더를 이동하려면 UI 컨트롤을 사용합니다.
* 미디어 패널을 클릭하면 전체 화면 모드로 볼 수 있습니다. 전체 화면 모드를 종료하려면 패널 상단의 화살표 버튼을 클릭합니다.
* 전체 화면 모드를 종료하지 않고 섹션의 패널 사이를 이동하려면 패널 아래의 **이전** 및 **다음** 버튼 또는 왼쪽 및 오른쪽 화살표 키를 사용합니다.
* 이미지를 전체 화면 모드로 보는 동안 오른쪽 상단의 확대/축소 컨트롤을 클릭해 확대하거나 축소합니다. 기본적으로 이미지는 화면에 맞게 조정됩니다. 확대된 이미지는 클릭한 채 드래그해 이동할 수 있습니다. 키보드 단축키를 사용해 확대, 축소, 확대 비율 100%로 재설정 또는 화면에 맞춤도 할 수 있습니다. [키보드 단축키](/ko/models/app/keyboard-shortcuts#media-panels)를 참조하세요.
* 세그멘테이션 마스크와 함께 로깅된 이미지의 경우 표시 방식을 사용자 지정하거나 각 항목을 켜거나 끌 수 있습니다. 패널 위에 커서를 올린 다음 아래쪽 톱니바퀴 아이콘을 클릭합니다.
* 바운딩 박스와 함께 로깅된 이미지 또는 포인트 클라우드의 경우 표시 방식을 사용자 지정하거나 각 항목을 켜거나 끌 수 있습니다. 패널 위에 커서를 올린 다음 아래쪽 톱니바퀴 아이콘을 클릭합니다.
* 미디어 컨트롤을 사용해 비디오를 재생, 일시 중지 또는 정지합니다. 왼쪽 및 오른쪽 화살표 키를 사용해 설정된 **video seek step**만큼 앞으로 또는 뒤로 건너뜁니다. **비디오 재생 동기화**가 켜져 있으면 섹션의 모든 비디오가 동기화되어 재생됩니다. **비디오 반복 재생**이 켜져 있으면 섹션의 비디오는 자동으로 다시 시작되어 중지할 때까지 계속 재생됩니다.