사용 설명서 > 개발자 문서 > 번들 규격
번들 구조와 한도
이 글의 목차
번들은 JSON 객체 하나이며 최상위 키는 정확히 네 개입니다. 다른 키가 있으면 거절됩니다.
| 키 | 타입 | 설명 |
|---|---|---|
| format_version | 정수 1 또는 2 | 1 이 기본입니다. 2 는 manifest.state(메모리 상태)와 화면 config 를 쓸 때만 필요합니다. |
| manifest | 객체 | 앱 이름·권한·화면·이벤트·변수·Action 선언. 아래 「manifest」 문서 참고 |
| settings | 객체 | 변수의 현재 값. 모든 키는 manifest.variables 에 선언되어 있어야 합니다. 앱 안에서는 FC.settings 로 읽기 전용으로 접근합니다. |
| client | 객체 | { html, css, js } 세 문자열. 다른 키는 거절됩니다. |
한도
| 항목 | 한도 |
|---|---|
| 번들 전체 | 1MB |
| client.html · client.css · client.js 각각 | 256KB |
| manifest.events | 최대 30개 |
| manifest.actions | 1~5개 |
| manifest.state | 최대 50개 (format_version 2) |
| AI Action 지시문(instruction) | 2000자 이내 |
| AI·Webhook Action 필드(fields) | 1~12개 |
| 이미지 Action 공통 지시(instruction) | 400자 이내 |
| 검색 Action top_n | 1~10 |
| 내보내기 파일(.fcapp.json) 가져오기 | 2MB |
client 파일
- html 은 완전한 문서가 아니라 조각(fragment)입니다. <html>·<head>·<body> 없이 <main> 같은 루트 요소 하나로 시작하세요.
- css 는 일반 CSS 입니다. @import·url(...)·image-set 은 쓸 수 없습니다.
- js 는 한 번 실행되는 스크립트입니다. 즉시 실행 함수 (() => { ... })(); 로 감싸는 것을 권장합니다. DOM 은 document.querySelector 로 직접 찾습니다.
가장 작은 앱(이벤트 하나 보내기)
{
"format_version": 1,
"manifest": {
"name": "클릭 카운터",
"sdk_version": "1",
"permissions": [
"events.emit"
],
"screens": [
{
"key": "main",
"label": "메인"
}
],
"events": [
{
"name": "example.clicked",
"fields": {
"count": {
"type": "number",
"required": true
}
}
}
],
"variables": [
{
"name": "title",
"type": "text",
"default": "클릭 카운터"
}
]
},
"settings": {
"title": "클릭 카운터"
},
"client": {
"html": "<main class=\"app\">\n <h2 data-title>클릭 카운터</h2>\n <p data-count>0</p>\n <button type=\"button\" data-action=\"add\">누르기</button>\n</main>\n",
"css": ".app{font-family:Arial,sans-serif;max-width:480px;margin:auto;padding:24px}\nbutton{padding:10px 16px;border:0;border-radius:8px;background:#4A3094;color:#fff;cursor:pointer}\n",
"js": "(() => {\n let count = 0;\n document.querySelector(\"[data-title]\").textContent = FC.settings.title;\n document.querySelector(\"[data-action=add]\").addEventListener(\"click\", () => {\n count += 1;\n document.querySelector(\"[data-count]\").textContent = String(count);\n FC.event.emit(\"example.clicked\", { count });\n });\n})();\n"
}
}