# dsui 이미지 갤러리 : 겹침, 격자, 띠 세 배치

dsui의 이미지 갤러리는 여러 장의 그림을 한 묶음으로 보여 주고, 누르면 크게 열립니다. 겹침\(fan\), 격자\(grid\), 띠\(strip\) 세 가지 배치를 직접 바꿔 볼 수 있습니다.

- Language: ko
- Published: 2026-11-02
- Tags: design-system, image-gallery, dsui
- URL: https://devs7ud.io/playground/image-gallery-layouts
- Translation (en): https://devs7ud.io/en/playground/image-gallery-layouts-en.md

## 이미지 갤러리의 세 가지 배치

dsui의 이미지 갤러리는 여러 장의 그림을 한 묶음으로 보여 주는 부품입니다. 누르면 어두운 배경 위에서 크게 열리고, 배치는 세 가지 중에서 고릅니다.

## 세 가지 배치

`grid`는 네 장까지 격자로 놓고, 넘치면 마지막 칸에 `+N`으로 개수를 알립니다. `strip`은 옆으로 미는 가로 줄입니다. `fan`은 겹쳐 놓은 기울어진 카드로, 하나를 가리키면 이웃이 비켜 줍니다. 들어가지 않는 카드는 `+N` 뒤에 있습니다.

## 크게 열면

누르면 어두운 배경 위에서 크게 열리고, 화살표 버튼, 좌우 화살표 키, 밀기로 넘깁니다. 그림마다 설명과 출처가 함께 나옵니다. Esc, 닫기 버튼, 바깥 클릭으로 닫으면 포커스가 누른 칸으로 돌아옵니다. 마우스를 어두운 영역에 두면 커서가 둥근 닫기 버튼으로 바뀝니다.

| 배치 | 보이는 모습 | 넘치는 그림 |
| --- | --- | --- |
| grid | 네 장까지 격자 | 마지막 칸에 +N |
| strip | 옆으로 미는 줄 | 줄 안에서 이어짐 |
| fan | 겹친 기울어진 카드 | \+N 뒤에 놓임 |

_출처: dsui 이미지 갤러리 컴포넌트 설명_

## 직접 바꿔 보세요

컨트롤 패널에서 배치를 바꾸고, 그림을 눌러 크게 열어 볼 수 있습니다.

[Live demo: image-gallery](https://dsui.vercel.app/items/image-gallery)

## 의견

그림이 여러 장일 때는 몇 장을 한눈에 보여 주느냐가 먼저입니다. 글 중간에는 겹침이, 비교가 필요한 곳에는 격자가 어울립니다.