5. 미디어 관리
이 문서에서는 이미지와 영상 파일을 업로드하고 관리하는 방법을 설명합니다.
5.1. 이미지 (Media)
웹사이트에 사용되는 모든 이미지를 관리합니다.
이미지 라이브러리 열기
- 왼쪽 메뉴에서 Media > 이미지를 클릭합니다.
이미지 업로드하기
방법 1: 라이브러리에서 직접 업로드
- 새로 만들기 버튼을 클릭합니다.
- 파일 선택 영역을 클릭하거나 파일을 드래그합니다.
- 이미지 정보를 입력합니다:
| 필드 | 설명 | 필수 |
|---|---|---|
| 파일 | 업로드할 이미지 파일 | ✓ |
| 대체 텍스트 (Alt) | 이미지 설명 (접근성, 검색엔진용) | |
| 캡션 | 이미지 아래 표시될 설명 |
- 저장 버튼을 클릭합니다.
방법 2: 페이지 편집 중 업로드
블록에서 이미지를 선택할 때:
- 이미지 선택 버튼을 클릭합니다.
- 팝업에서 새로 업로드 탭을 선택합니다.
- 파일을 선택하고 업로드합니다.
- 업로드된 이미지가 자동으로 선택됩니다.
지원 파일 형식
| 형식 | 확장자 | 권장 용도 |
|---|---|---|
| JPEG | .jpg, .jpeg | 사진, 복잡한 이미지 |
| PNG | .png | 로고, 투명 배경 이미지 |
| WebP | .webp | 웹 최적화 이미지 |
| GIF | .gif | 애니메이션 이미지 |
| SVG | .svg | 아이콘, 로고 (벡터) |
권장 이미지 크기
| 용도 | 권장 크기 | 비율 |
|---|---|---|
| 히어로 배경 | 1920 x 1080px 이상 | 16:9 |
| 썸네일 | 800 x 800px | 1:1 |
| 콘텐츠 이미지 | 1200 x 800px | 3:2 |
| 로고 | 400 x 200px | - |
| SNS 공유 이미지 | 1200 x 630px | 1.91:1 |
💡 팁: 큰 이미지를 업로드하면 시스템이 자동으로 여러 크기로 리사이즈합니다.
폴더로 이미지 정리하기
이미지가 많아지면 폴더로 정리할 수 있습니다.
- 이미지 목록 상단의 폴더 드롭다운을 클릭합니다.
- 새 폴더 만들기를 선택합니다.
- 폴더 이름을 입력합니다.
- 이미지를 해당 폴더로 이동합니다.
권장 폴더 구조:
이미지
├── 히어로 (페이지 상단 배경)
├── 프로젝트 (프로젝트 관련)
├── 아티스트 (아티스트 관련)
├── 로고 (파트너/브랜드 로고)
├── 아이콘 (SVG 아이콘)
└── 기타 (분류 안 된 이미지)
이미지 검색하기
- 목록 상단의 검색창에 키워드를 입력합니다.
- 파일명, 대체 텍스트로 검색됩니다.
이미지 크기 정보
업로드된 이미지는 다음 크기로 자동 생성됩니다:
| 크기 이름 | 용도 |
|---|---|
| thumbnail | 목록 썸네일 |
| square | 정사각형 썸네일 |
| small | 작은 이미지 |
| medium | 중간 이미지 |
| large | 큰 이미지 |
| xlarge | 매우 큰 이미지 |
| og | SNS 공유용 |
5.2. 영상 (Videos)
웹사이트에 사용되는 동영상을 관리합니다.
영상 라이브러리 열기
- 왼쪽 메뉴에서 Media > 영상을 클릭합니다.
영상 업로드하기
- 새로 만들기 버튼을 클릭합니다.
- 파일 선택 영역에 영상 파일을 드래그하거나 클릭하여 선택합니다.
| 필드 | 설명 | 필수 |
|---|---|---|
| 파일 | 업로드할 영상 파일 | ✓ |
| 썸네일 | 영상 미리보기 이미지 (수동) |
- 저장 버튼을 클릭합니다.
업로드 제한
| 항목 | 제한 |
|---|---|
| 최대 파일 크기 | 2GB |
| 권장 형식 | MP4 (H.264 코덱) |
| 권장 해상도 | 1920 x 1080px (Full HD) |
⚠️ 주의: 파일 크기가 클수록 업로드 시간이 오래 걸립니다. 안정적인 네트워크 환경에서 업로드하세요.
썸네일 관리
영상의 썸네일(미리보기 이미지)은 두 가지 방식으로 생성됩니다:
자동 생성 (300MB 이하)
- 300MB 이하의 영상은 썸네일이 자동으로 생성됩니다.
- 업로드 후 잠시 기다리면 썸네일이 나타납니다.
수동 업로드 (300MB 초과)
- 300MB를 초과하는 영상은 시스템이 썸네일 자동 생성을 건너뛰므로(
skipped상태), 썸네일을 직접 업로드해야 합니다.
수동 썸네일 업로드 방법:
- 영상 편집 화면에서 썸네일 (수동) 필드를 찾습니다.
- 원하는 이미지를 업로드합니다.
- 저장 버튼을 클릭합니다.
썸네일 상태 확인
영상 목록에서 썸네일 상태를 확인할 수 있습니다:
| 상태 | 설명 |
|---|---|
pending | 대기 중 |
processing | 생성 중 |
completed | 완료 |
failed | 실패 (수동 업로드 필요) |
manual | 수동 업로드됨 |
skipped | 건너뜀 (대용량 파일) |
영상 사용 시 주의사항
- 파일 크기 최적화
- 가능하면 압축된 영상을 사용하세요.
-
HandBrake 등의 도구로 압축 가능합니다.
-
자동 재생 설정
- 배경 영상은 일반적으로 음소거 상태로 자동 재생됩니다.
-
모바일에서는 자동 재생이 제한될 수 있습니다.
-
대체 콘텐츠
- 영상이 로드되지 않을 경우를 대비해 썸네일 이미지가 표시됩니다.
미디어 일괄 관리
여러 파일 선택
- 목록에서 파일 앞의 체크박스를 클릭합니다.
- 여러 파일을 선택합니다.
- 상단의 일괄 작업 메뉴를 사용합니다.
미디어 삭제
⚠️ 주의: 미디어를 삭제하면 해당 미디어를 사용하는 모든 페이지에서 이미지/영상이 표시되지 않습니다.
삭제 전 확인사항: 1. 해당 미디어가 어디에 사용되고 있는지 확인 2. 대체 미디어 준비
미디어 교체
기존 미디어를 새 파일로 교체하려면:
- 미디어 편집 화면으로 이동합니다.
- 기존 파일 옆의 제거 버튼을 클릭합니다.
- 새 파일을 업로드합니다.
- 저장 버튼을 클릭합니다.
💡 팁: 이 방법으로 교체하면 해당 미디어를 사용하는 모든 곳에서 자동으로 새 파일이 적용됩니다.
다음 단계
- 6. 사이트 설정 - 헤더/푸터 설정
- 8. 공통 기능 가이드 - 블록에서 미디어 사용하기