Ncloud(네이버 클라우드)의 Object Storage에서 html, 이미지 파일이 화면에 출력되지 않고 다운로드 되는 문제 해결방법입니다

개요

Ncloud(네이버 클라우드) Object Storage에 html 파일이나 이미지 파일을 올려두고 사용하는 경우가 많습니다.
그런데 간혹, 웹브라우저나 앱에서 해당 파일을 호출 했을 때 html 페이지나 이미지 파일이 화면에 표시되지 않고 다운로드 되는 현상이 발생하기도 합니다.

이것은 Object Storage에 파일이 등록될 때 파일의 속성을 나타내는 메타 데이터 중에서 파일의 종류를 구분하기 위한 MIME Type에 대한 정보를 담고 있는 Content-Type 항목이 제대로 설정되지 않아서 발생하는 문제입니다. 아래에서 이에 대한 내용을 자세히 정리해보겠습니다.

메타 데이터

메타 데이터는 파일의 속성이나 정보를 나타내는 값으로 Ncloud Object Storage에서는 파일 수정 날짜, 파일 크기 등의 기본으로 설정되는 시스템 메타 데이터와 사용자가 임의로 정의하는 유저 메타 데이터로 구분할 수 있으며 아래와 같이 Console 화면에서 확인할 수 있습니다.

Ncloud(네이버 클라우드)의 Object Storage에서 html, 이미지 파일이 화면에 출력되지 않고 다운로드 되는 문제 해결방법

MIME Type (Media Type)

MIME은 [Multipurpose Internet Mail Extensions]의 약자로 이메일 전송을 위해 만들어진 인터넷 표준 형식으로, MIME Type이란 이메일로 전송되는 컨텐츠나 파일의 종류를 구분하기 위해 정의된 형식입니다. 최근에는 Media Type으로 표현하는 경우도 있습니다.

Content-Type

[Content-Type]은 MIME Type으로 정의된 컨텐츠나 파일을 전송할 때 프로토콜의 Header 값에 정의되는 속성입니다. Content-Type Header와 MIME Type은 이메일에 사용하기 위해 정의되었으나, 지금은 HTTP와 같은 다른 인터넷 프로토콜에서 널리 사용하고 있으며, MIME Type 등록은 IANA(Internet Assigned Numbers Authority)에서 관리하고 있습니다.

Ncloud Object Storage에서도 업로드 된 파일의 종류에 대한 정보를 Content-Type 속성으로 정의하고 있습니다.

오류 상황

예를 들어 Object Storage에 등록된 이미지 파일에 대한 Content-Type 속성이 제대로 정의되지 않았을 경우 아래와 같이 이미지 파일을 호출했을 때 이미지가 화면에 표시되지 않고 다운로드 되는 현상이 나타납니다.

Ncloud(네이버 클라우드)의 Object Storage에서 html, 이미지 파일이 화면에 출력되지 않고 다운로드 되는 문제 해결방법

메타 데이터 변경

문제를 해결하기 위해서는 메타 데이터에 있는 [Content-Type]을 변경해야 하므로, 아래와 같이 콘솔 [Object Storage] - [Bucket Management]에서 해당 파일을 선택하고 [편집] - [메타 데이터 변경] 메뉴를 선택합니다.

Ncloud(네이버 클라우드)의 Object Storage에서 html, 이미지 파일이 화면에 출력되지 않고 다운로드 되는 문제 해결방법

[메타 데이터 관리] 팝업창에서 [Content-Type] 항목에 있는 [수정] 버튼을 클릭합니다.

Ncloud(네이버 클라우드)의 Object Storage에서 html, 이미지 파일이 화면에 출력되지 않고 다운로드 되는 문제 해결방법

이미지나 html 문서에 맞는 값을 입력합니다. 여기서는 png 이미지 파일이므로 [image/png]를 입력했습니다.
html의 경우는 [text/html]이며 기타 다양한 파일들의 MIME Type은 문서의 아래쪽에서 정리해보겠습니다.

Ncloud(네이버 클라우드)의 Object Storage에서 html, 이미지 파일이 화면에 출력되지 않고 다운로드 되는 문제 해결방법

[Content-Type] 값 변경 후에 브라우저의 캐시를 지우고 다시 호출해보면 아래와 같이 이미지가 정상적으로 나타나는 것을 확인할 수 있습니다.

Ncloud(네이버 클라우드)의 Object Storage에서 html, 이미지 파일이 화면에 출력되지 않고 다운로드 되는 문제 해결방법

MIME Type 종류

전체 MIME Type 중에서 자주 사용되는 Type을 정리해보면 다음과 같습니다.

파일 종류 MIME Type
. aac audio/aac
. avi video/x-msvideo
. bin application/octet-stream
. csh application/x-csh
. css text/css
. csv text/csv
. doc application/msword
. docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
. gif image/gif
. html text/html
. ico image/x-icon
. ics text/calendar
. jar application/java-archive
. jpg image/jpeg
. js text/javascript
. json application/json
. md text/markdown
. oga audio/ogg
. ogv video/ogg
. pdf application/pdf
. png image/png
. ppt application/vnd.ms-powerpoint
. pptx application/vnd.openxmlformats-officedocument.presentationml.presentation
. rar application/x-rar-compressed
. sh application/x-sh
. svg image/svg+xml
. tar application/x-tar
. ttf application/x-font-ttf
. txt text/plain
. wav audio/x-wav
. webp image/webp
. woff application/x-font-woff
. xls application/vnd.ms-excel
. xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
. xml application/xml
. zip application/zip

참고 URL

  1. Ncloud Object Storage 기본 가이드
  2. MIME Type 안내
  3. Object Storage 파일의 Content-Type 일괄 적용, 변경하는 방법
Tags: storage