에스페이지는 파일 업로드 기능을 제공하지 않습니다.
HTML, CSS와 JavaScript처럼 텍스트로 작성할 수 있는 파일은 만들 수 있지만, 이미지나 PDF 같은 파일을 프로젝트에 직접 업로드하거나 저장할 수는 없습니다.
페이지에 이미지를 표시하거나 PDF 파일을 제공하려면 파일을 외부 서비스에 업로드하고, 생성된 파일 URL을 HTML이나 CSS에 입력해야 합니다.
파일을 외부 서비스에 업로드하고, 에스페이지에서는 해당 파일의 URL을 사용합니다.
/public은 파일 업로드 공간이 아닙니다
/public 폴더에 페이지 파일을 만들면 해당 파일과 연결되는 공개 URL이 생성됩니다.
하지만 /public은 내 기기에 있는 파일을 업로드하는 저장 공간이 아닙니다.
예를 들어 다음과 같은 폴더를 만들더라도 이미지 파일을 직접 업로드할 수는 없습니다.
/public/images이미지와 PDF를 비롯한 일반 파일은 외부 파일 호스팅 서비스에 업로드하고 URL로 연결해야 합니다.
이미지 표시하기
이미지를 업로드할 수 있는 외부 서비스에 파일을 업로드한 뒤 이미지 URL을 복사합니다.
https://example.com/images/flowers.jpg복사한 URL을 에스페이지에서 <img> 요소의 src 속성에 입력합니다.
<img
src="https://example.com/images/flowers.jpg"
alt="A bouquet of colorful flowers"
>미리보기 화면에 이미지가 표시됩니다.
PDF 등 일반 파일 연결하기
PDF 파일도 외부 서비스에 업로드한 뒤 URL로 연결합니다.
<a
href="https://example.com/files/company-profile.pdf"
target="_blank"
rel="noopener"
>
View Company Profile
</a>방문자가 링크를 클릭하면 브라우저에서 PDF가 열리거나 기기로 다운로드됩니다. 실제 동작은 방문자의 브라우저와 파일 호스팅 서비스의 설정에 따라 달라질 수 있습니다.
다른 종류의 파일도 같은 방법으로 연결할 수 있습니다.
<a href="https://example.com/files/sample.zip">
Download Sample Files
</a>파일 호스팅 서비스가 해당 파일 형식을 지원하고 공개 URL을 제공한다면 이미지나 PDF가 아닌 파일도 사용할 수 있습니다.
파일을 업로드할 외부 서비스 선택하기
파일을 업로드하고 공개 URL을 제공하는 서비스는 다양합니다.
Amazon S3와 함께 Cloudflare R2, Backblaze B2, DigitalOcean Spaces 같은 S3 호환 오브젝트 스토리지를 사용할 수 있습니다.
에스페이지에서 간단하게 이미지와 PDF를 사용할 수 있도록 제공되는 에스페이지 전용 파일 호스팅 서비스 Essedrop을 이용할 수도 있습니다.
중요한 것은 서비스의 종류가 아니라 업로드한 파일에 방문자의 브라우저가 접근할 수 있는 URL을 제공하는지입니다.
방문자의 브라우저가 직접 접근할 수 있고, 외부 웹사이트에서의 사용이 허용된 파일 URL이라면 에스페이지에서 사용할 수 있습니다.
S3 호환 스토리지 사용하기
파일이 많거나 저장 공간과 도메인을 직접 관리하고 싶다면 Amazon S3 또는 S3 호환 오브젝트 스토리지를 사용할 수 있습니다.
대표적인 서비스는 다음과 같습니다.
서비스에 가입하고 버킷을 만든 뒤 적절한 설정을 하고 파일을 업로드하면 다음과 같은 파일 URL을 사용할 수 있습니다.
https://files.example.com/images/flowers.jpg<img
src="https://files.example.com/images/flowers.jpg"
alt="A bouquet of colorful flowers"
>S3 호환 서비스는 저장 용량과 파일 전송량을 세밀하게 관리할 수 있지만, 버킷과 공개 접근 설정이 필요하므로 처음 사용하는 사람에게는 다소 복잡할 수 있습니다.
간단하게 파일을 업로드하고 URL을 사용하려면 일반 파일 호스팅 서비스가 더 편리할 수 있습니다.
Essedrop 사용하기
Essedrop은 에스페이지에서 사용할 파일을 업로드하고 URL로 제공하기 위해 개발된 에스페이지 전용 파일 호스팅 서비스입니다.
기본적인 사용 흐름은 다음과 같습니다.
- Essedrop에 파일을 드래그 앤 드롭으로 업로드합니다.
- 생성된 파일 URL을 클릭하여 복사합니다.
- 에스페이지의 HTML이나 CSS에 URL을 붙여넣습니다.
- 페이지를 저장하고 미리보기에서 파일이 표시되는지 확인합니다.
- 변경사항을 공개 사이트에 적용합니다.
Essedrop은 복잡한 설정 없이 에스페이지에서 사용할 파일의 URL을 간단하게 만들고 싶을 때 편리합니다.
Essedrop은 에스페이지에 포함된 업로드 기능이 아니라 별도로 제공되는 파일 호스팅 서비스입니다. 파일 업로드와 관리는 Essedrop에서 진행합니다.
현재 이미지와 PDF 파일을 지원합니다. 지원하는 파일 형식과 이용 조건은 Essedrop에서 확인할 수 있습니다.
파일 URL 확인하기
파일 URL을 에스페이지에서 사용하기 전에 브라우저의 주소창에 직접 입력해 파일이 표시되는지 확인하는 것이 좋습니다.
- URL이
https://로 시작하는지 - 로그인하지 않아도 파일에 접근할 수 있는지
- 파일 공유 화면이 아니라 파일 자체가 열리거나 다운로드되는지
- 외부 웹사이트에서 파일을 사용하는 것이 허용되는지
파일이 표시되지 않을 때
외부 파일이 페이지에 표시되지 않는다면 다음 내용을 확인하세요.
- 파일 URL의 주소가 정확한지
- 파일 URL을 브라우저에서 직접 열 수 있는지
- 로그인하지 않아도 파일에 접근할 수 있는지
- 파일 공유 화면이 아니라 파일 자체의 URL을 사용했는지
- 외부 웹사이트에서 파일을 사용하는 것이 허용되는지
- 파일이 삭제되거나 URL이 변경되지 않았는지
S3 호환 서비스를 사용한다면 버킷이나 파일의 공개 접근 설정도 확인하세요.
다음 단계
외부 파일을 사용하는 방법을 이해했다면 다음 문서로 넘어가세요.
- 페이지와 공통 디자인에 CSS 적용하기: CSS
- 프로젝트 안의 텍스트 파일을 페이지에 삽입하기: 파일 포함하기
- Markdown 문서에 이미지 추가하기: Markdown
- 여러 페이지에서 공통 이미지와 디자인 사용하기: 레이아웃
- 변경사항을 공개 사이트에 반영하기: 공개, 적용과 전체 적용