# 파일 업로드

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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.waveon.io/editor/file-upload.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.