Media

앞에서 "스테인리스 텀블러 500ml" Content를 만들 때, 대표 사진 칸은 비워 두고 넘어갔습니다. 텀블러 상품 페이지에는 제품 사진이 들어가야 합니다. 이 사진처럼 콘텐츠 스튜디오에 올려 두는 이미지·동영상·문서 파일 하나하나가 Media입니다.

Media는 한 번 올려 두면 여러 Content에서 가져다 쓸 수 있습니다. 텀블러 제품 사진을 한 번 올려 두면, 텀블러 상품에 대표 사진으로 연결하고, 같은 사진을 기획전 배너에도 다시 쓸 수 있습니다. 사진을 Content마다 따로 올리지 않아도 됩니다.

이 페이지에서는 Media가 무엇인지 살펴본 뒤, 텀블러 제품 사진을 Media로 올리고 그 사진을 텀블러 Content의 대표 사진으로 연결해 봅니다.

파일을 따로 관리하면 좋은 이유

상품마다 사진을 그때그때 올려서 붙이면, 같은 사진을 여러 상품에 쓸 때 같은 파일을 몇 번이고 다시 올리게 됩니다. 나중에 그 사진을 더 좋은 것으로 바꾸려면, 그 사진을 쓴 상품을 일일이 찾아 하나씩 고쳐야 합니다.

Media는 파일을 Content와 따로 한곳에 모아 두기 때문에 이 문제를 줄여 줍니다. 사진은 Media 목록에 한 번만 올려 두고, Content에서는 그 Media를 골라 연결하기만 하면 됩니다. 같은 사진을 여러 상품에서 함께 쓸 수 있고, 어떤 파일이 올라와 있는지 한 화면에서 모아 볼 수 있습니다.

올리면 자동으로 공개됩니다

여기서 Content와 다른 점이 하나 있습니다. Content는 만든 다음 한 번 더 Publish해야 외부에 공개되지만, Media는 올리기만 하면 자동으로 외부에 공개됩니다. 따로 Publish를 누르지 않아도 됩니다.

파일을 올리면 시스템이 그 파일을 받아 처리하는 과정을 거칩니다. 이미지라면 가로·세로 크기를 읽고, 동영상이라면 길이를 확인하는 식으로 파일의 정보를 정리합니다. 이 처리가 끝나면 그 Media의 상태가 자동으로 Published로 바뀝니다.

Content는 만든 뒤 직접 Publish해야 외부에 공개되지만, Media는 올리면 처리가 끝나는 대로 자동으로 Published가 됩니다.

Published가 된 Media는 그 자체로 외부에 공개됩니다. Content에 연결하지 않아도 공개되며, Content의 대표 사진으로 연결하는 것은 이 사진을 쓰는 한 가지 방법입니다. 처리 시간은 파일에 따라 다릅니다. 사진처럼 작은 파일은 보통 올리자마자 Published가 되고, 큰 동영상처럼 용량이 큰 파일은 처리에 잠깐 시간이 걸릴 수 있습니다. 큰 파일을 올린 직후라 아직 Published가 아니라면, 처리가 끝날 때까지 잠시 기다리면 됩니다.

외부에 공개해도 괜찮은 파일만 올리세요. Published가 된 Media에는 고유한 주소(링크)가 생기고, 그 주소를 아는 사람은 로그인 없이 누구나 그 파일을 열어 볼 수 있습니다. 따로 접근을 막는 장치는 없어서, 주소가 곧 열쇠입니다. 한 번 밖으로 나간 주소는 거두기 어려우니, 신분증 사본이나 공개되면 안 되는 문서처럼 민감한 파일은 올리지 마세요.

텀블러 제품 사진 올리기

이제 텀블러 제품 사진을 Media로 올려 봅니다. 컴퓨터에 저장해 둔 텀블러 사진 파일 한 장(tumbler.png)을 올린다고 하겠습니다. 파일을 올리는 일과 제목·설명을 적는 일은 모두 한 화면에서 끝납니다.

1. Media 목록 화면을 여세요.
2. 목록 오른쪽 위의 생성 버튼을 누르세요.
3. 펼쳐진 메뉴에서 단일 Media를 고르세요.

사진을 여러 장 한꺼번에 올리려면 단일 Media 대신 여러 Media를 고르세요. 여기서는 한 장만 올리므로 단일 Media를 씁니다.

"Media 생성" 작성 화면이 열립니다. 이 화면에는 파일을 올리는 영역과 함께 제목·설명 칸이 있습니다.

4. 파일 영역의 파일 찾아보기 버튼을 눌러 컴퓨터에서 텀블러 사진(tumbler.png)을 고르세요. 또는 사진 파일을 점선 영역으로 끌어다 놓으세요.
5. 제목 칸에 스테인리스 텀블러 500ml 정면 컷을 입력하세요.
6. 설명 칸에 흰 배경에서 찍은 텀블러 정면 제품 사진입니다.를 입력하세요.

7. 오른쪽 위의 생성 버튼을 누르세요.

생성을 누르면 사진이 올라가고, 이어서 시스템이 그 파일을 처리합니다. 작성 화면에서는 상태가 Draft로 보이지만, 처리가 끝나면 별도 Publish 없이 자동으로 Published가 됩니다.

제목과 설명은 비워 두고 생성해도 됩니다. 파일 이름만으로는 나중에 어떤 사진인지 알아보기 어려우니 적어 두면 Media 목록이 늘어나도 원하는 사진을 빨리 찾을 수 있습니다. 적어 두지 않았다면 나중에 그 Media를 열어 편집으로 채워 넣어도 됩니다.

공개됐는지 확인하기

올린 사진이 공개됐는지는 Media 목록에서 바로 확인할 수 있습니다. 목록에는 이름, 유형(예: Image), 크기(예: 900 x 900 px), 용량(예: 50 KB)과 함께 맨 오른쪽에 상태 칼럼이 있습니다. 그 사진의 상태가 Published면 공개가 끝난 것입니다.

그 Media를 열어도 오른쪽 상태 영역에서 같은 상태를 볼 수 있습니다.

상태가 Published가 되면 이 사진을 Content에 연결할 수 있습니다.

텀블러 상품에 사진 연결하기

사진이 공개됐으니, 이제 텀블러 Content의 대표 사진 칸에 이 사진을 연결합니다. "상품" Content Type을 만들 때 대표 사진을 Media를 가리키는 Field로 만들어 두었습니다. 그래서 텀블러 상품의 작성 화면에는 대표 사진 칸이 있고, 그 칸에는 글자나 숫자를 적는 대신 미리 올려 둔 Media를 골라 넣습니다.

1. 앞에서 만든 "스테인리스 텀블러 500ml" Content를 여세요.
2. 오른쪽 위의 편집 버튼을 누르세요.

편집 화면을 아래로 내리면 대표 사진 칸이 있습니다. 아직 사진을 연결하지 않았다면 이 칸에 기존 Media 추가와 새 Media 생성 두 버튼이 보입니다.

3. 대표 사진 칸의 기존 Media 추가 버튼을 누르세요.
4. 열린 Media 선택 창에서 올려 둔 텀블러 사진(스테인리스 텀블러 500ml 정면 컷)을 고르세요.

5. 오른쪽 위의 저장 버튼을 누르세요.

연결되면 대표 사진 칸에 고른 Media가 표시됩니다. 칸에는 고른 Media의 제목(스테인리스 텀블러 500ml 정면 컷)이 적힌 항목으로 나타납니다.

새 사진을 그 자리에서 올려 바로 연결하려면 기존 Media 추가 대신 새 Media 생성을 누르세요. 미리 올려 둔 사진이 없을 때 쓰면 됩니다.

이제 이 텀블러 Content를 Publish하면, 연결한 대표 사진도 함께 외부에 공개됩니다.

텀블러 Content 자체를 Publish하는 방법은 Content 작성과 발행에서 다룹니다. 연결한 사진이 그 사이에 삭제되면 텀블러 Content의 Publish가 막힐 수 있으니, 연결한 Media는 그대로 두는 것이 좋습니다.

연결한 다음 알아 둘 것

한 사진을 여러 상품에서 함께 쓸 수 있습니다. 텀블러 제품 사진을 텀블러 상품에 연결한 뒤, 같은 사진을 다른 상품이나 기획전 배너에도 똑같이 골라 연결할 수 있습니다. Media는 Content에 복사되는 것이 아니라 연결되는 것이라서, 한 Media를 여러 곳에서 가리킬 수 있습니다.

연결만 끊을 수도, 파일을 지울 수도 있습니다. 텀블러 상품에서 대표 사진을 다른 사진으로 바꾸고 싶다면, 편집 화면에서 연결을 끊고 다른 Media를 고르면 됩니다. 이때 Media 자체는 목록에 그대로 남아 다른 곳에서 계속 쓸 수 있습니다. Media 파일을 아예 없애려면 Media 상세 화면에서 삭제합니다.

발행된 사진은 먼저 발행을 취소해야 지울 수 있습니다. Published 상태의 Media는 바로 삭제되지 않습니다. 삭제를 시도하면 먼저 발행을 취소(Unpublish)하라는 안내가 나옵니다. 그 사진을 열어 Unpublish해 상태를 Draft로 되돌린 뒤 삭제하면 됩니다.

올릴 수 있는 파일 형식과 크기에는 조건을 걸 수 있습니다. "상품" Content Type에서 대표 사진 Field를 만들 때, 이 칸에 올릴 수 있는 파일의 크기나 이미지의 가로·세로 크기에 조건을 걸어 둘 수 있습니다. 조건에 맞지 않는 파일을 연결하려고 하면 저장되지 않습니다. 어떤 조건을 걸 수 있는지는 Content 모델링에서 다룹니다.

사진을 원하는 크기로 받기 (이미지 처리)

같은 텀블러 사진이라도 쓰는 곳마다 알맞은 크기가 다릅니다. 상품 목록의 작은 썸네일에는 작은 사진이, 상세 화면에는 큰 사진이 어울립니다. 크기별로 사진을 따로 만들어 올릴 필요는 없습니다. 발행된 Media의 이미지 주소 뒤에 정해진 스타일 이름을 붙이면, 원본은 그대로 두고 그 자리에서 크기를 줄이고 가벼운 형식으로 바꾼 이미지를 돌려받습니다.

이미지 주소 끝에 /{스타일 이름}을 붙입니다. 예를 들어 텀블러 사진 주소가 https://.../tumbler.png라면, 끝에 /style3을 붙인 https://.../tumbler.png/style3은 같은 사진을 128 × 128 크기로 줄여 WebP(용량이 작은 이미지 형식)로 변환해 돌려줍니다.

고를 수 있는 크기

모든 스타일은 원본 비율을 유지한 채 지정한 크기에 맞춰 줄이고, 품질 100%의 WebP로 변환합니다.

다음으로 할 일

• Content 작성과 발행: 대표 사진을 연결한 텀블러 Content를 Publish해 외부에 공개합니다.
• 상태와 발행: Draft, Published, Changed 같은 상태가 무엇이고 어떻게 바뀌는지 알아봅니다.
• 다국어: 같은 사진을 언어별로 다르게(예: 문구가 박힌 이미지) 담는 방법을 다룹니다. Media는 파일·제목·설명을 언어별로 담을 수 있습니다.
• Content 모델링: 대표 사진처럼 Media를 연결하는 Field를 만드는 방법을 다룹니다.
• API 레퍼런스: 사진을 올리고 연결하는 일을 코드로 직접 할 때 필요한 요청 형식, 파일 형식·크기 제한 같은 기술 명세를 다룹니다.