> For the complete documentation index, see [llms.txt](https://docs.waveon.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.waveon.io/editor/file-upload.md).

# 파일 업로드

Chat 패널에서 파일을 업로드하여 AI에게 참고 자료로 제공할 수 있습니다.

***

### 지원 파일 형식

#### 이미지

| 형식   | 확장자         | 용도           |
| ---- | ----------- | ------------ |
| PNG  | .png        | 스크린샷, 디자인 시안 |
| JPEG | .jpg, .jpeg | 사진, 이미지      |
| GIF  | .gif        | 애니메이션 참고     |
| WebP | .webp       | 웹 최적화 이미지    |

#### 문서

| 형식    | 확장자   | 용도           |
| ----- | ----- | ------------ |
| PDF   | .pdf  | 기획서, 디자인 가이드 |
| Word  | .docx | 요구사항 문서      |
| Excel | .xlsx | 데이터 구조, 목록   |
| CSV   | .csv  | 데이터 샘플       |
| Text  | .txt  | 텍스트 내용       |

***

### 업로드 방법

#### 방법 1: + 버튼

1. Chat 입력창 왼쪽의 **+** 버튼 클릭
2. **"이미지/파일 추가"** 선택
3. 파일 선택

#### 방법 2: 드래그 앤 드롭

파일을 Chat 입력창 영역으로 드래그합니다.

#### 방법 3: 붙여넣기

클립보드에 복사된 이미지를 **Ctrl+V** (Mac: Cmd+V)로 붙여넣습니다.

* 스크린샷 캡처 후 바로 붙여넣기
* 다른 앱에서 이미지 복사 후 붙여넣기

***

### 업로드 후 표시

업로드된 파일은 입력창 위에 칩 형태로 표시됩니다.

#### 이미지 파일

* 썸네일 미리보기 표시
* X 버튼으로 제거 가능

#### 문서 파일

* 파일 아이콘 + 파일명 표시
* X 버튼으로 제거 가능

***

### 활용 예시

#### 디자인 참고

```
[디자인 이미지 업로드]

이 디자인을 참고해서 만들어줘.
- 색상은 최대한 비슷하게
- 레이아웃 구조 따라해줘
- 폰트는 기본 폰트 사용해도 돼
```

#### 데이터 구조 참고

```
[Excel 파일 업로드]

이 엑셀 파일의 컬럼 구조를 기반으로
입력 폼과 테이블을 만들어줘.
각 컬럼에 맞는 입력 타입을 사용해줘.
```

#### 기획서 기반 개발

```
[PDF 기획서 업로드]

이 기획서의 3페이지에 있는 화면을 구현해줘.
기능 명세는 4페이지를 참고해.
```

#### 기존 앱 참고

```
[스크린샷 업로드]

이 앱의 테이블 디자인을 참고해서
우리 직원 목록 테이블도 비슷하게 만들어줘.
```

#### 로고/이미지 추가

```
[로고 이미지 업로드]

이 로고를 헤더 왼쪽에 추가해줘.
크기는 높이 40px로 맞춰줘.
```

***

### 여러 파일 업로드

한 번에 여러 파일을 업로드할 수 있습니다.

1. * 버튼 → 파일 선택 시 여러 파일 선택 (Ctrl/Cmd 클릭)
2. 또는 여러 파일을 한 번에 드래그 앤 드롭

```
[이미지 3장 업로드]

이 3개 화면을 순서대로 만들어줘.
1번 이미지: 로그인 화면
2번 이미지: 대시보드
3번 이미지: 설정 화면
```

***

### 파일 크기 제한

| 파일 유형 | 최대 크기 |
| ----- | ----- |
| 이미지   | 10MB  |
| 문서    | 20MB  |

{% hint style="warning" %}
파일이 너무 크면 업로드가 실패할 수 있습니다. 이미지는 압축하거나, 문서는 필요한 페이지만 추출하세요.
{% endhint %}

***

### AI가 파일을 이해하는 방식

#### 이미지

* 시각적 요소 인식 (레이아웃, 색상, 컴포넌트)
* 텍스트 인식 (이미지 내 텍스트)
* 디자인 패턴 파악

#### 문서

* 텍스트 내용 추출
* 표/데이터 구조 인식
* 문서 구조 파악 (제목, 본문, 목록 등)

***

### 팁

{% hint style="success" %}
**구체적인 지시와 함께**

파일만 업로드하지 말고, 어떤 부분을 참고해야 하는지 구체적으로 설명하세요.

```
❌ [이미지 업로드] "이거 만들어줘"

✅ [이미지 업로드] "이 이미지의 카드 디자인을 참고해서
   직원 정보 카드를 만들어줘. 그림자 효과와 둥근 모서리 적용해줘."
```

{% endhint %}

{% hint style="info" %}
**고해상도 이미지 권장**

디자인 참고용 이미지는 고해상도일수록 AI가 더 정확하게 인식합니다.
{% endhint %}

{% hint style="info" %}
**필요한 부분만 캡처**

전체 화면보다 필요한 부분만 캡처하면 AI가 더 집중해서 분석합니다.
{% endhint %}