---
title: "예제"
description: "코드와 함께 보는 라이브 데모. 보이는 모든 파일이 페이지에서 실제로 실행됩니다. 복사하거나 StackBlitz에서 열어 보세요."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/ko/docs/examples"
---

> Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt)

각 예제는 작은 Vue 앱입니다. `DnDProvider`가 들어 있는 `index.vue`와 필요한 컴포넌트로 이루어져
있습니다. 데모 아래의 코드 탭은 그 데모를 실행하는 바로 그 파일들입니다.

## 앱

실제로 만들 때와 같은 방식으로 만든 완전한 인터페이스입니다. 여러 리스트, 규칙, 오버레이, 키보드가
함께 동작합니다.

<card-group>
<card icon="i-lucide-square-kanban" title="프로젝트 보드" to="/docs/examples/board">

순서를 바꿀 수 있는 컬럼, WIP 제한, Done 전의 확인, 다중 선택, 휴지통.

</card>

<card icon="i-lucide-calendar-days" title="주간 캘린더" to="/docs/examples/calendar">

요일과 30분 단위를 넘나들며 드래그하고 그리드에 스냅되는 일정.

</card>

<card icon="i-lucide-folder-open" title="파일 관리자" to="/docs/examples/file-manager">

폴더 트리와 파일 그리드: 선택 사각형으로 고르고, 폴더에 놓고, Alt로 복사합니다.

</card>

<card icon="i-lucide-blocks" title="블록 에디터" to="/docs/examples/block-editor">

핸들로 옮기고, 중첩하고, "/" 메뉴나 사이드바에서 끌어오는 Notion 같은 블록.

</card>

<card icon="i-lucide-chess-knight" title="체스" to="/docs/examples/chess">

합법적인 수가 빛나고, 손에 든 기물이 칸이 거부되는 이유를 알려 주며, 폰은 무엇으로 승진할지 묻고,
봇은 실제 드래그로 응수합니다.

</card>

<card icon="i-lucide-text-cursor-input" title="폼 빌더" to="/docs/examples/form-builder">

팔레트에서 가져온 Nuxt UI 필드를 행 안에 나란히 놓고, 라이브 미리보기에서 입력하고, Vue 코드로
내보냅니다.

</card>

<card icon="i-lucide-pen-tool" title="디자인 캔버스" to="/docs/examples/design-canvas">

확대·축소되는 캔버스 위의 프레임과 레이어, 스마트 가이드, Alt로 복제, 그리고 디자인의 트리 그
자체인 레이어 패널.

</card>

<card icon="i-lucide-layout-template" title="페이지 빌더" to="/docs/examples/page-builder">

페이지 위에서 실제 모습으로 바뀌는 섹션, 컬럼 사이를 오가는 요소, 같은 데이터를 쓰는 레이어 트리,
그 자리에서 하는 편집.

</card>

<card icon="i-lucide-table-2" title="데이터 테이블" to="/docs/examples/data-table">

작업 2,000개를 담은 Nuxt UI 테이블: 가상화되고, 검색할 수 있고, 행의 그립으로 정렬합니다.

</card>
</card-group>

## Sitemap

See the full [sitemap](https://zizigy.github.io/vue-dnd-kit/sitemap.md) for all pages.