웹토리 콘텐츠 제작 규격 (v2, 2026-10-29)

웹토리 마켓에 올리는 아이콘 · 이모티콘 · 스킨 · 테마 세트 · 홈페이지 템플릿 · 섹션 디자인 · 사진·그림 묶음 · 움직임 묶음 · 로고 키트 · 글꼴 · 3D 모델 · 마인드맵 틀의 공통 규격입니다.
웹토리 마켓은 자유 마켓이에요. 따로 정해진 제작 도구는 없어요. 일러스트레이터, 피그마, 포토샵, AI 도구 등 무엇으로 만들어도 이 규격대로 zip을 묶으면 올릴 수 있어요. 편집기 안의 크리에이터 모드를 쓰면 규격에 맞는 zip을 바로 만들 수 있어요 (선택).
사람이 만든 것과 AI로 만든 것 모두 같은 규격을 따르며, 웹토리 AI 제작 규칙과 같은 숫자를 씁니다.

• 서버 자동 검사: 올리는 순간 서버가 자동으로 확인해요. 틀리면 이유를 알려 주고 올라가지 않아요.
• 자동 고침: 서버가 고칠 수 있는 것(이름, SVG 크기 정보 등)은 올릴 때 알아서 고치고, 무엇을 고쳤는지 알려 줘요 (9장).
• 검수 확인: 관리자가 검수할 때 확인해요. 맞지 않으면 거절 이유와 함께 돌려줘요.
• Webtory 맞춤 배지: 고칠 것도 알림도 없이 규격 그대로면 자동으로 붙고, 마켓 인기순에서 앞에 보여요 (10장).

1. 한눈에 보기

공통 한도(서버 자동 검사): zip 하나 20MB (3D 모델·사진만 32MB), 풀었을 때 전체 60MB, 파일 300개까지, 파일 하나 2MB (사진 10MB · 글꼴 10MB · 3D 모델 30MB).

2. 파일 이름 규칙 (서버 자동 검사)

종류_블록_이름_번호.확장자
icon_features_coffee_01.svg
emoji_reviews_wow_02.gif
skin_banner_clay-blue_01.json

블록 이름: any menu banner textimage gallery contact footer product features bigimage spec reviews cta notice faq form board slider tabs counter popup pricing team map video logos timeline social text divider countdown row cards free clock calc calendar weather noticepop slidepop music

이름이 규칙에 맞으면 편집기가 알맞은 블록 자리에 자동으로 넣어 줘요 (예: icon_features_… → 특징 블록의 아이콘 칸).

상품 종류마다 넣을 수 있는 파일 (서버 자동 검사):

3. 종류별 규격

3-1. 아이콘 icon

예시 (두 가지 톤 별):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
  <path class="f" d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z"/>
</svg>

3-2. 이모티콘 emoji

3-3. 스킨 skin

스킨은 블록 디자인 값(JSON) 과 그에 쓰는 그림(bg_, ui_)을 묶은 것이에요.

JSON 모양 (서버 자동 검사: JSON 객체여야 하고 style은 객체):

{
  "name": "클레이 블루",
  "block": "banner",
  "style": { "bg": "#e6eef9", "color": "#2c3a55", "pad": "l", "align": "center", "width": "wide", "round": true, "rad": 18, "font": "round", "anim": "up", "hover": "lift" }
}

style에 쓸 수 있는 값 (이것 말고는 편집기가 무시해요):

스킨 그림 크기 (검수):

스킨 색 규칙 (검수): 주 색 1개 + 보조 색 1~2개. 밝은·어두운 버전은 이름 끝에 -light, -dark.

3-4. 테마 세트 theme

한 가지 색 묶음으로 맞춘 스킨 + 아이콘 + 이모티콘을 상품 하나로 팔거나 나눠요. 받는 사람은 한 번에 홈페이지 전체 분위기를 맞출 수 있어요.

3-5. 홈페이지 템플릿 template

편집기에서 만든 홈페이지 전체를 템플릿으로 팔거나 나눠요. 받은 사람은 시작 화면 템플릿 목록에서 골라 바로 고쳐 써요.

3-6. 섹션 디자인 section

블록 여러 개를 한 번에 넣는 '섹션'이에요 (예: 특징 3칸 + 문의 버튼).

3-7. 📷 사진 photo (사진·그림 묶음)

내가 찍은 사진(그림도 돼요)을 팔거나 나누는 상품이에요. 회원은 캔디로 사서 홈페이지 사진 칸·배경에 바로 넣어요.
가장 쉬운 방법: 편집기 마켓 → 크리에이터 → 📷 사진 올리기. 사진만 고르면 아래 규격(이름·방향·정보 지우기·미리보기·manifest)을 자동으로 맞춰서 올려요.

photoRights (manifest.json):

"photoRights": { "own": true, "origin": "shot", "people": "none", "property": "none", "author": "활동명" }

산 사람 이용 조건 (마켓 상세 화면에 그대로 보여요)

• 할 수 있어요: 내가 만드는 홈페이지·상세페이지 어디에나 (의뢰받은 것 포함, 개수 제한 없음) · 자르기·밝기·글씨 얹기 같은 편집 · 내 가게·회사 홍보 (광고 배너·SNS 소개 포함) · 작가 이름 표시는 안 해도 돼요
• 안 돼요: 원본 파일을 그대로 팔거나 나눠 주기 (다른 마켓·사진 사이트 포함) · 로고·상표로 등록 · 사진 속 사람을 나쁘게 보이게 쓰기 (성인·정치·약·차별 광고 등) · 사진이 주인공인 굿즈(액자·티셔츠·달력) 만들어 팔기

3-8. 움직임 묶음 anim

블록이 나타날 때·마우스를 올릴 때의 움직임이에요. 두 가지 중 하나로 만들어요.

① Lottie (After Effects + Bodymovin, LottieFiles 등에서 내보낸 JSON)

② 움직임 프리셋 (코드 없이 값만)

{ "name": "부드럽게 올라오기", "trigger": "scroll", "effect": "up", "duration": 700, "delay": 0, "stagger": 120, "distance": 40, "easing": "ease-out" }

• 범위를 벗어난 값은 서버가 맞추고, 모르는 값은 빼요. '움직임 줄이기'를 켠 방문자에게는 편집기가 자동으로 꺼요.
• 미리보기는 꼭 넣기 (움직이는 gif 권장).

3-9. 로고 키트 logo

3-10. 글꼴 font

"fontLicense": { "type": "own", "webUse": true, "author": "만든 사람", "source": "https://…", "text": "" }

• webUse: true 가 아니면 올릴 수 없어요. 산 글꼴, '무료 배포 금지'·'웹 사용 금지' 글꼴은 올릴 수 없어요.
• ofl·apache-2.0 은 라이선스 전문이 필요해요: fontLicense.text 에 넣거나 zip 에 OFL.txt / LICENSE.txt 를 넣어요.
• 마켓 상세 화면에 라이선스 종류·만든 사람·출처·전문이 그대로 보여요.

3-11. 3D 모델 model3d

• 편집기 🧊 3D 모델 블록에서 돌려 보고, 휴대폰에서는 AR 로 놓아 볼 수 있어요.
• 남의 모델(게임·영화 캐릭터, 상표가 있는 제품)은 올릴 수 없어요. CC BY 모델은 license: "cc-by" 와 원작자를 설명에 적어 주세요.

3-12. 마인드맵 틀 mindmap

• 파일에는 마인드맵만 들어가고 계정 정보는 없어요. 판매 화면에도 이 안내가 함께 보여요.
• 무료 공유와 유료 판매 모두 할 수 있어요.

4. zip 묶음과 manifest.json

my-cafe-icons.zip
├─ manifest.json          ← 꼭 있어야 해요
├─ preview_01.png         ← 미리보기 (없으면 서버가 자동으로 만들어요)
├─ icon_features_coffee_01.svg
├─ icon_features_cake_01.svg
└─ …

• 폴더 한 겹은 괜찮아요 (안의 파일 이름만 써요). 같은 이름 파일이 두 개면 안 돼요.
• 숨김 파일(.으로 시작)과 __MACOSX 폴더는 자동으로 빼요.
• 그림·JSON이 아닌 다른 파일(설명서, psd 등)은 서버가 자동으로 빼요.

manifest.json (서버 자동 검사):

{
  "kind": "icon",
  "title": { "ko": "카페 아이콘", "en": "Cafe icons", "ja": "カフェアイコン" },
  "description": { "ko": "카페·베이커리 홈페이지에 어울리는 두 가지 톤 아이콘 12개" },
  "story": "만든 이야기, 쓰는 법",
  "price": 0,
  "license": "free",
  "ai": false,
  "tags": ["cafe", "bakery"],
  "previews": ["preview_01.png"],
  "palette": ["#ee6a3a", "#3b4252", "#e6e9ef"]
}

5. 미리보기·썸네일

6. 하면 안 되는 것

7. 라이선스

• 올리는 사람은 그 작품에 대한 권리가 있어야 해요. AI로 만든 것은 ai: true로 표시해 주세요.
• 유료 판매: 결제 수수료를 먼저 뺀 뒤 크리에이터 80% / 웹토리 20%. 매달 1일에 지난달 몫을 정산해요 (환불 기간 7일 지난 금액, 1만 원 이상).

8. 시작 템플릿

종류마다 바로 고쳐 쓰는 zip이 있어요. 그대로 올려도 검사를 통과하게 만들어 두었어요. 이름과 그림만 바꾸면 돼요.

• 아이콘: template-icon.zip 받기
• 이모티콘: template-emoji.zip 받기
• 스킨: template-skin.zip 받기
• 테마 세트: template-theme.zip 받기
• 홈페이지 템플릿: template-template.zip 받기
• 섹션 디자인: template-section.zip 받기
• 사진·그림 묶음: template-photo.zip 받기
• 움직임 묶음: template-anim.zip 받기
• 로고 키트: template-logo.zip 받기
• 글꼴: template-font.zip 받기 (글꼴 파일은 직접 넣어야 해요. 안내 txt 는 지우고 font_any_이름_01.woff2 를 넣으세요)
• 마인드맵 틀: template-mindmap.zip 받기 (광고·코드 블록은 빠지고 코드 칸은 비워져요)

9. 서버가 자동으로 고치는 것 · 알려 주는 것

올리는 순간 서버가 고칠 수 있는 것은 고치고, 응답에 fixed(고친 것)와 warnings(알림)로 알려 줘요. 고친 뒤에도 막아야 하는 것만 오류로 돌려보내요.

10. Webtory 맞춤 배지

• 자동으로 붙어요: 올렸을 때 자동 고침(fixed)도 알림(warnings)도 하나도 없으면 'Webtory 맞춤' 배지가 붙어요. 시작 템플릿은 그대로 올리면 배지를 받아요.
• 관리자 조정: 검수 때 관리자가 배지를 주거나 빼거나 자동 판정으로 되돌릴 수 있어요.
• 혜택: 마켓 인기순에서 배지 작품이 먼저 보이고, 'Webtory 맞춤만 보기' 거르기를 쓸 수 있어요.
• 새 판을 올리면 그 판으로 다시 판정해요 (검수 통과 뒤 반영).