Cloudwiki/에디터/이미지 업로드
정보:
에디터에서 이미지를 첨부하는 방법, 이미지 편집기(크롭/회전), 기존 이미지 검색 등을 안내합니다. 상위 문서: [[Cloudwiki/에디터]].
# 업로드 방법
툴바의 버튼을 클릭하면 작은 업로드 팝업이 열립니다. 팝업 안에는 두 가지 진입점이 있습니다.
| 위치 | 동작 |
| --- | --- |
| **드래그 영역** | 파일을 영역에 끌어다 놓기 / 영역 클릭 시 파일 선택 다이얼로그 |
| ** 기존 이미지 검색** | 이미 업로드된 이미지를 검색해 다시 사용 |
업로드 팝업이 열려 있는 동안에도 본문 영역으로 직접 파일을 드래그할 수 있도록 일부 영역에서는 드래그앤드롭이 활성화되어 있습니다.
> 이미지 외에 mp4 / webm / ogg 동영상 파일도 동일한 흐름으로 업로드할 수 있습니다. 지원 형식: `image/jpeg`, `image/png`, `image/gif`, `image/webp`, `video/mp4`, `video/webm`, `video/ogg`.
# 업로드 후 편집기
파일을 선택하거나 드래그앤드롭하면 자동으로 **이미지 편집 모달** 이 열립니다.
[+ 편집 모달의 도구 (클릭하여 펼치기)]
| 도구 | 동작 |
| --- | --- |
| 크롭 모드 | 크롭 박스를 표시해 자르기 영역 지정. 박스 안쪽 드래그로 이동, 모서리 드래그로 크기 조절. |
| 크롭 적용 | 현재 크롭 박스로 이미지를 잘라 적용 |
| 좌측 90° | 이미지를 90도 좌측 회전 |
| 우측 90° | 이미지를 90도 우측 회전 |
| 원본 복원 | 모든 편집을 취소하고 원본 상태로 복귀 |
| 사이즈 | 본문 삽입 시 적용할 사이즈 선택 (`icon` / `small` / `medium` / `full(기본)`) |
[-]
크롭 박스 기본 크기는 이미지 중앙의 80% 이며, 최소 10×10 픽셀까지 줄일 수 있습니다.
# 파일명·태그 입력
편집을 마치고 **완료** 를 누르면 파일명 입력 다이얼로그가 표시됩니다.
- **파일명** (확장자 제외): 공백은 `-` 로 변환되고, 위키 슬러그에 부적합한 문자는 자동으로 제거됩니다.
- **태그** (선택): `Enter` 또는 `,` 로 추가, 최대 20개. 나중에 *기존 이미지 검색* 에서 필터로 사용할 수 있습니다.
확정하면 R2 스토리지에 업로드되고, 본문 커서 위치에 다음 형태로 삽입됩니다.
```
{size:선택값}
```
`{size:full}` 은 기본값이라 생략됩니다.
# 기존 이미지 검색
업로드 팝업의 **기존 이미지 검색** 버튼을 누르면 검색 모달이 열립니다.
- **파일명 검색**: 부분 일치
- **태그 필터**: 업로드 시 부여한 태그로 필터링
- **무한 스크롤 / 더 불러오기**: 결과가 많을 경우 페이징
이미지를 클릭하면 사이즈 선택 다이얼로그가 뜨고, 확정 시 본문에 삽입됩니다.
# 삽입된 이미지 사이즈 변경
이미 본문에 삽입된 이미지의 마크다운(`{size:...}`) 끝에 커서를 놓으면 사이즈 자동완성이 표시되어 `icon` / `small` / `medium` / `full` 을 다시 선택할 수 있습니다. 자세한 내용은 [[Cloudwiki/에디터/자동완성#이미지 사이즈 자동완성]] 참고.
# 이미지 사이즈 옵션
| 옵션 | 화면 폭 비율 | 용도 |
| --- | --- | --- |
| `icon` | 글줄 안에 들어가는 작은 크기 | 본문 줄 안에서 인라인으로 사용 |
| `small` | 약 25% | 사이드 보조 이미지 |
| `medium` | 약 50% | 일반 본문 이미지 |
| `full` (기본) | 100% | 와이드 이미지, 다이어그램 |
> 기업 로고 등 줄 안에서 사용해야 하는 이미지는 `{size:icon}` 옵션을 권장합니다.
# 권한 / 제약 사항
- 이미지 업로드는 `media:upload` 권한이 있는 사용자만 가능합니다. 권한이 없으면 툴바의 이미지 버튼이 표시되지 않을 수 있습니다.
- 한 번에 한 개의 파일만 업로드할 수 있습니다.
- 업로드 직후 R2 캐시 갱신까지 짧은 지연이 있을 수 있습니다.