콘텐츠 배포 파일

콘텐츠 배포는 콘텐츠 설명 및 실행시 필요로 하는 모든 파일을 하나의 zip 파일로 만들어 등록합니다. 이때, 배포파일 구조를 설명하는 package.json(배포설명파일)이 zip 파일 루트에 포함되어 있어야 합니다.

서비스 중인 콘텐츠의 업데이트는 전체 파일을 재배포하거나 패치용 파일 (수정된 파일만 포함)만 선택적으로 배포 가능하며, 배포 파일 업로드 시 옵션(전체 교체 (Replace) / 일부 파일 교체(Patch))을 선택합니다.

※ 주의 : 단순 프로그램 수정시 Patch를 선택함으로써 변경이 발생하지 않은 대용량의 데이터 파일을 매번 업로드 해야하는 번거로움을 피할 수 있으나, 이전에 올렸던 파일 중 더이상 사용되지 않는 파일이 여전히 유지될 수 있음에 유의

배포파일에 포함되는 내용

배포 파일의 주요 구성요소는 다음과 같습니다.

package.json: 콘텐츠의 버전 및 정보를 정의하고, 구성 리소스에 대한 정보를 명시하는 파일
(UTF-8 파일 형식으로 저장 필수)
프로그램 소스: HTML, JavaScript, CSS 파일
리소스 정보: 이미지, 음성, 3D 모델 파일 등
소개자료: HTML, 이미지 등

배포파일 구성 (예시)

배포파일에 포함된 폴터 및 파일 구성은 다음과 같습니다.

package.json: 배포 설명 파일
about: 콘텐츠에 대한 설명 파일들이 있는 폴더
  ├ summary.html: 콘텐츠 요약 정보
  ├ manual.html: 콘텐츠 사용법
  └ release.html: 릴리즈 노트
previews: 콘텐츠 설명을 위한 이미지
  ├ 1.image1.png
  ├ 2.image2.gif
  ├ 3.image_error1.png
  ├ ...
  └ 10.image10.jpg
기타 폴더 : 각 콘텐츠의 필요에 따라 구성

주의 : 콘텐츠 설명을 위한 html 파일(위 예시에서 summary.html, manual.html 등 )은 <body> ~ </body>사이 내용만 발췌하여 시스템에 적용되며, <body>가 없을시 전체가 적용됩니다.

package.json 파일 설명

항목명	설명	형식	필수		비고
항목명	설명	형식	신규/교체	패치	비고
manifest-version	설명파일 버전	Number	○	○	1로 고정
version	콘텐츠 버전	String	○	○
title	콘텐츠명	String	○	○
main	시작 HTML 경로	String	○	X
icon	ICON 이미지 파일 경로	String	○	X	256x256 크기
width	콘텐츠 표시 너비	String	○	X	너비, 높이 값이 따라 실행창 크기 결정
height	콘텐츠 표시 높이	String	○	X	너비, 높이 값이 따라 실행창 크기 결정
main-image	대표 이미지 경로	String	○	X
about	설명	Object	○	X
summary	요약 HTML 파일 경로	String	○	X
manual	사용법 HTML 파일 경로	String	○	X
release	출시정보 HTML 파일 경로	String	○	X
previews	미리보기 이미지 파일 경로	Array	○	X	3~10개

package.json 예시

{
  "manifest-version": 1,
  "version": "1.0.1",
  "title": "가상 화학 실험실",
  "main": "main.html",
  "icon": "icon.png",
  "width": "1024px",
  "height": "768px",
  "main-image": "about/image/file-1.png", // 필수. 이미지 가리키는 URL. 외부 URL 가능
  "about": {
    "summary" : "about/summary.html", // 필수
    "manual"  : "about/manual.html", // 필수
    "release" : "about/release.html", // 필수
    "previews": [ // 3 ~ 10 개
       "about/image/file-1.png", // 외부 URL 가능 
       "about/image/file-2.gif", // 외부 URL 가능
    ]
  }
}

이미지 파일 규격 및 용도

콘텐츠 설명을 위한 이미지(icon, main-image, previews 등)는 콘텐츠 상세정보 보기 및 목록 화면에서 사용되며, 다음의 사양을 준수하여 제작할 것을 권고합니다.

아이콘

아이콘 이미지는 홈 화면의 신규 콘텐츠 보기, 마이 페이지의 콘텐츠 이용내역 보기 등 콘텐츠 목록을 표시할 때 사용됩니다.

형식: PNG, GIF, JPEG
크기: 256 x 256px

사용 화면 예시

홈페이지 신규 콘텐츠에서 아이콘 사용 예시 이미지.
홈페이지 신규 콘텐츠

마이페이지 콘텐츠 이용내역에서 아이콘 사용 예시 이미지.
마이페이지 콘텐츠 이용내역

미리보기 이미지

메인 이미지(main-image)는 콘텐츠 목록 및 콘텐츠 상세 화면에서 주 이미지로 사용되며, 기타 미리보기 이미지(previews)는 콘텐츠 상세 화면의 미리보기용 이미지 목록에 표시됩니다.

미리보기 갯수: 3 ~ 10개
이미지 해상도: 가로 1280px 이상
외부 URL 허용. 단 해당 사이트 서비스에서 Cross Origin 접근이 가능해야 함

주의 : 다른 비율의 이미지를 사용할 수 있으나 미리 보기 영역에서 비율을 유지한 채 동일한 높이로 표시되므로 너비가 다르게 보여짐에 유의바랍니다.

미리보기배치-2.png 이미지

사용화면 예시

인기 콘텐츠에서 이미지 사용 예시 이미지.
홈페이지 인기 콘텐츠

콘텐츠 상세 화면에서 이미지 사용 예시 이미지.
콘텐츠 상세

2023. 11. 15 오전 11:00:00 편집

목차 Contents

[VlabON] 콘텐츠 작성 가이드