| name | new-miniapp |
| description | Scaffold a new Apps in Toss mini-app by driving the official
`create-ait-app` CLI non-interactively (`--inline`, always `@latest`), then
verifying the `@apps-in-toss/devtools` wiring (mock SDK + panel) the CLI
performs so `npm run dev` runs in a plain browser immediately โ falling back to
manual wiring only when the CLI did not do it. Supports `--tds` and
`--sample iap,iaa` passthrough. Falls back to the bundled react-vite template
with `--local` (offline); `--no-devtools` un-wires devtools afterwards.
The freshly scaffolded project also gets a design guide seeded into it
(tokens, hard rules, icon set, Tossface emoji font wiring) so later sessions
build screens against the same standard โ `--no-design-guide` and
`--no-tossface` opt out of that seeding.
Greenfield only (see `inject-devtools` for existing projects).
Triggered by `/ait:new <app-name> [--template <name>] [--tds]
[--sample <ids>] [--local] [--no-devtools] [--no-design-guide]
[--no-tossface]`.
|
| argument-hint | <app-name> [--template <name>] [--tds] [--sample <ids>] [--local] [--no-devtools] [--no-design-guide] [--no-tossface] |
new-miniapp skill
๋ชฉ์
์ด ๋ฌธ์๋ ๋ก๋๋ ์ฆ์ ํ์ฌ ํด์์ ๋ค๊ฐ ์ง์ ์คํํ๋ ์ง์๋ฌธ์ด๋ค โ skill์
๋ฐฑ๊ทธ๋ผ์ด๋์์ ์คํ๋์ง ์์ผ๋ฉฐ, ๊ธฐ๋ค๋ฆด ์๋ฃ ์ ํธ๋ ์๋ค. ์๋ Step์ ์ง๊ธ
์์๋๋ก ์ง์ ์ํํ๋ค. ("skill์ด ์คํ ์ค์ด๋ ์๋ฃ๋ฅผ ๊ธฐ๋ค๋ฆฌ๊ฒ ๋ค"๋ ํ๋จ์
์ค๋
์ด๋ค โ ์ค์ธก์์ ์ฝํ ๋ชจ๋ธ์ด ์ด ์ค๋
์ผ๋ก scaffold๋ฅผ ์์์กฐ์ฐจ ๋ชป ํ๋ค.)
/ait:new <app-name> ํ ๋ฒ์ผ๋ก ์ ์ฑ์ธํ ์ค ๋ฏธ๋์ฑ ํ๋ก์ ํธ๋ฅผ ๋น ์ํ์์
์์ํ ์ ์๊ฒ ํ๋ค. ์ฌ์ฉ์๊ฐ ๋ฌป๊ธฐ ์ ์ ๋ตํด์ผ ํ ๊ฒ:
- scaffold๋
toss/create-ait-app(๊ณต์ ์ค์บํด๋ CLI)์ ๋น๋ํํ(--inline)์ผ๋ก
ํธ์ถํด ๋ง๋ ๋ค โ ๋ฒ์ ์ ํญ์ @latest(๋ช
์ ํ ์์, maintainer ๊ฒฐ์
2026-08-10). ํ
ํ๋ฆฟ์ ๋ฒ๋ค๋ create-vite ํ๋ฆฌ์
์ ์์ํ๋ค(๊ธฐ๋ณธ
react-ts, ๋ณ์นญ jsโvanillaยทtsโvanilla-ts, ์ ์ฒด ๋ชฉ๋ก์
--list-templates), --tds(TDS ์ปดํฌ๋ํธ ํ + provider, --template๊ณผ
๋์ ์ง์ ๋ถ๊ฐ โ ์๋ ์ฐธ์กฐ), --sample iap,iaa(์ธ์ฑ๊ฒฐ์ ยท์ธ์ฑ๊ด๊ณ ์์ )๋ฅผ
๊ทธ๋๋ก ์ธ ์ ์๋ค.
@apps-in-toss/devtools ๋ฐฐ์ ๊ณผ ๋ฒ๋ค ์ค์ ์ CLI๊ฐ ํ๋ค โ create-ait-app์ด
scaffold ์งํ ait init์ ํธ์ถํด devtools๋ฅผ devDependency๋ก ๋ฃ๊ณ ๋ฒ๋ค๋ฌ ์ค์ ์
unplugin์ ์ฃผ์
ํ๋ฉฐ, apps-in-toss.config.ts์ build/build:vite/deploy
์คํฌ๋ฆฝํธ๋ ๊ฐ์ ์คํ์ด ๋ง๋ ๋ค(์ค์ธก 2026-08-07, create-ait-app@0.2.3). ์์
create-vite ํ
ํ๋ฆฟ์๋ SDK mock์ด ์์ด ๋ธ๋ผ์ฐ์ ์์ SDK ํธ์ถ์ด ์คํจํ์ง๋ง(์ํ
์ฝ๋๊ฐ "์๋๋ฐ์ค์ฑ/ํ ์ค์ฑ์์ ์คํํด์ฃผ์ธ์" alert๋ฅผ ๋์ด๋ค) ์ด ๋ฐฐ์ ๋์ ํ ์ค ์ฑ
์์ด npm run dev๋ก ๋ฐ๋ก ๊ฐ๋ฐํ ์ ์๋ค. ait init์ ์คํจํด๋ CLI๊ฐ "์๋ฃ"๋ก
๋๋ด๋ฏ๋ก ํ์ ๊ฐ๋(Step 3)๊ฐ ์ค์ฌ๋ฅผ, Step 4๊ฐ ๋ฐฐ์ ์ ํ์ธํ๊ณ ํด๋ฐฑํ๋ค.
- ์ด๊ฑด ํ ์ค ์ฑ WebView์์ ๋๋ ์น(DOM) ๋ฏธ๋์ฑ์ด์ง React Native ์ฑ์ด ์๋๋ค.
RN ๋ค์ดํฐ๋ธ ์ปดํฌ๋ํธ๋
react-native import๋ฅผ ์ฐ์ง ์๋๋ค(์ค์น ์ SDK๊ฐ RN์
peer๋ก ์ ์ธํด ๋จ๋ unmet peer react-native ๊ฒฝ๊ณ ๋ ๋ฌด์ํด๋ ๋๋ค).
- ๋์์ธ ๊ฐ์ด๋๋ ํจ๊ป ์ฌ๋๋ค(Step 5-B) โ ํ ํฐยท๊ธฐ๋ณธ CSSยท์์ด์ฝ 6์ข
ยท
docs/design-guide.md์ ์บ๋ฆฌ์ด ๋ฌธ์(AGENTS.mdยทCLAUDE.md), ์ด๋ชจ์ง ์์ฒด
Tossface๊ฐ ๋ค์ด๊ฐ๋ค. ๋์ค์ ์ด๋ค ์ธ์
์ด ํ๋ฉด์ ๋ง๋ค์ด๋ ๊ฐ์ ๊ธฐ์ค(๊ธ์ ํฌ๊ธฐ
ํํยทํฐ์น 44pxยทํ๋จ CTA safe area)์ ๋ฐ๋ฅด๊ฒ ํ๋ ค๋ ๊ฒ์ด๋ค.
--no-design-guide(์ ์ฒด)ยท--no-tossface(์์ฒด๋ง)๋ก ๋บ๋ค.
- ๋ค์ ๋จ๊ณ(
npm run dev โ ์ฝ๋ ์์ โ /ait:design โ npm run build(=
tsc -b && vite build && ait build)๋ก ๋ฒ๋ค ์์ฑ โ console MCP ๋๊ตฌ๋ก
๋ฑ๋กยท์
๋ก๋)๊ฐ ๋ช
ํํ ์๋ด๋๋ค.
์ด skill์ **scaffold ํธ์ถ + ํ์ฒ๋ฆฌ(์ค์น ์ํ ํ์ธ ยท ํ์ ๊ฐ๋ ยท devtools ๋ฐฐ์
ํ์ธ/ํด๋ฐฑ ยท .gitignore์ *.ait ์ถ๊ฐ ยท ๋์์ธ ๊ฐ์ด๋ ์ฃผ์
)**๋ง ๋ด๋นํ๋ค. ์ฝ์
๋ฑ๋กยท๋ฒ๋ค ์
๋ก๋๋ console MCP ๋๊ตฌ(miniapp_create/bundle_upload/
bundle_upload_complete)์ ์ฑ
์ โ ์ฌ๊ธฐ์ ์๋ ํธ์ถํ์ง ์๋๋ค. ์์ฑ๋๋
README/UI/์ฃผ์์ ๊ณผ์ฅยทํ๋ณด์ฑ ๋ฌธ๊ตฌ๋ฅผ ๋ฃ์ง ์๋๋ค.
์
๋ ฅ
-
<app-name> (ํ์): ์ฌ๋์ด ์ฝ๋ ์ด๋ฆ ํ๋ณด. ๋๋ ํ ๋ฆฌ/ํจํค์ง ์ด๋ฆ์ผ๋ก
์ฌ๋ฌ๊ทธํ๋๋ค (kebab-case, ์๋ฌธ์). ๊ณต๋ฐฑยทํน์๋ฌธ์ ํฌํจ ๊ฐ๋ฅ.
-
--template <name> (์ ํ, default react-ts): ์ง์ ๋ชฉ๋ก์ create-ait-app์ด
๋ฒ๋คํ create-vite์์ ๋์ ์ผ๋ก ์ฐ์ถ๋๋ค(getSupportedViteTemplates() โ
index.html ์กด์ฌ + vite dep + dev/build ์คํฌ๋ฆฝํธ + ๋น-SSR ํํฐ ๊ธฐ์ค). ๋ณ์นญ
jsโvanilla, tsโvanilla-ts. ์ค์ ๋ชฉ๋ก์ ์คํ ์์ ์ ํ์ธํ๋ค:
npx -y create-ait-app@latest --list-templates
JSON ๋ฐฐ์ด๋ก ์ง์ ํ
ํ๋ฆฟ๊ณผ "tds"๊ฐ ํจ๊ป ๋์จ๋ค(๋จ "tds"๋ --template์ด
์๋๋ผ ์๋ --tds ํ๋๊ทธ๋ก ์ง์ โ ํผ๋ ๊ธ์ง).
-
--tds (์ ํ): TDS(ํ ์ค ๋์์ธ ์์คํ
) ํตํฉ ๋ณํ. --template๊ณผ ๋์
์ง์ ๋ถ๊ฐ โ CLI๋ --template๊ณผ --tds๋ฅผ ํจ๊ป ์ฃผ๋ฉด ์ฆ์ ๊ฑฐ๋ถํ๋ค
("--template๊ณผ --tds๋ ํจ๊ป ์ฌ์ฉํ ์ ์์ด์.", assertNonInteractiveArgs
์ค์ธก). --tds๋ ๋จ๋
์ผ๋ก ์ง์ ํ๋ค.
์๋ ค์ง ์คํจ(์ค์ธก 2026-08-03, 3/3 ์ฌํ โ ๋น์ ๊ธฐ๋ณธ PM์ด๋ pnpm ๊ธฐ์ค):
TDS ํ
ํ๋ฆฟ์ด ๋์ด์ค๋ vite@6.4.3(โ esbuild@0.25.12)๊ฐ pnpm 11์์
ERR_PNPM_IGNORED_BUILDS๋ฅผ ๋๊ณ , ๊ทธ ์คํจ๊ฐ scaffold ๋จ๊ณ์ install์์
๋๋ฉด CLI๊ฐ ์์ฑ ๋๋ ํฐ๋ฆฌ๋ฅผ ํต์งธ๋ก ์ญ์ ํ๋ค(0.2.3 dist ์ค์ธก:
installDependencies๊ฐ throwํ๊ณ ์ต์์ catch๊ฐ rmSyncํ๋ค โ ์ญ์
๋์์ PM๊ณผ ๋ฌด๊ดํ๋ค). npm ๊ธฐ๋ณธ(--pm npm)์๋ postinstall์ ๋ง๋ ๊ฒ์ดํธ๊ฐ
์์ด ์ด ํธ๋ฆฌ๊ฑฐ๋ ์ฌํ๋์ง ์์ง๋ง ๋ค๋ฅธ ์ด์ ๋ก ์คํจํด๋ ๋๋ ํฐ๋ฆฌ๊ฐ ์ฌ๋ผ์ง๋
๊ฒ์ ๊ฐ๊ณ (์๋ ยง2), --skip-install ์ฐํ๋ 0.2.3์์ ๊ทธ ํ๋๊ทธ๊ฐ ์์ด์ ธ
์ฑ๋ฆฝํ์ง ์๋๋ค. CLI --help๋ "์์ด์ ํธ๋ TDS๋ฅผ ์ถฉ๋ถํ ํ์ฉํ์ง ๋ชปํ๋ฏ๋ก,
์ฌ์ฉ์์๊ฒ TDS ์ฌ์ฉ์ ๋น๊ถ์ฅํ๋ค๊ณ ์๋ดํด ์ฃผ์ธ์"๋ผ๊ณ ๋ช
์ํ๋ค โ ๊ผญ ์๊ตฌํ๋
๊ฒฝ์ฐ๊ฐ ์๋๋ฉด --template(๊ธฐ๋ณธ๊ฐ)์ ๊ถํ๋ค.
-
--sample <ids> (์ ํ): iap, iaa ์ฝค๋ง ๊ตฌ๋ถ โ ์ธ์ฑ๊ฒฐ์ ยท์ธ์ฑ๊ด๊ณ ์์
ํ์ด์ง๋ฅผ scaffold์ ํฌํจ.
-
--local (์ ํ): create-ait-app์ ์ฐ์ง ์๊ณ plugin ๋ด์ฅ react-vite ํ
ํ๋ฆฟ์
๋ณต์ฌํ๋ค. ์คํ๋ผ์ธ/๋คํธ์ํฌ ์ ํ ํ๊ฒฝ ํด๋ฐฑ โ wf 2.x ๊ธฐ๋ฐ ๊ตฌ์ธ๋ ํด๋ฐฑ์ด๋ผ
์ ๋ณธ 3.x์ ํ์์ด ๋ค๋ฅด๋ค(์์ธ๋ references/local-template.md). ์ด ๊ฒฝ๋ก์์๋ง
--no-install์ ์ง์ํ๋ค(react-vite ํ
ํ๋ฆฟ ๊ณ ์ ์ต์
โ create-ait-app์๋
install์ ๋ผ์ด๋ด๋ ํ๋๊ทธ๊ฐ ์์ด ์ ๋ณธ ํธ์ถ์ install๊น์ง ์ํํ๊ณ , ์ด skill์ด
๊ทธ ๊ฒฐ๊ณผ๋ฅผ ยง2-1์์ ํ์ธยท์๋ ด์ํจ๋ค).
ํ๋๊ทธ๋ ์ฌ์ฉ์๊ฐ ์์ฒญํ ๊ฒ๋ง ๋ถ์ธ๋ค โ ํนํ --no-* ๊ณ์ด์ ์ถ์ธกํด์ ๋ถ์ด์ง
๋ง๋ผ. ์ด ํ๋๊ทธ๋ค์ ์ฐ์ถ๋ฌผ์ ๋นผ๋ ๋ฐฉํฅ์ด๋ผ, ์๋ชป ๋ถ์ด๋ฉด ์ฌ์ฉ์๊ฐ ๋ฐ๊ธฐ๋ก ํ ๊ฒ์
์กฐ์ฉํ ๋ชป ๋ฐ๋๋ค. ์์ฒญ์ ๊ทธ ํ๋๊ทธ์ ๋์(๋์์ธ ๊ฐ์ด๋ ยท devtools ยท Tossface ยท
๋ก์ปฌ ํ
ํ๋ฆฟ)์ด ์ด๋ฆ์ผ๋ก ๋ฑ์ฅํ์ง ์์ผ๋ฉด ๋ถ์ด์ง ์๋๋ค. "๊ฐ๋จํ ์ฑ์ผ๋ก",
"์์ UI๋ก", "์ต์ํ์ผ๋ก", "๊ถํ ์์ด" ๊ฐ์ ๋ง์ ๋ง๋ค ์ฑ์ด ๋ฌด์์ ํ๋๋์
๋ฒ์์ด์ง ์ค์บํด๋๊ฐ ๋ฌด์์ ๊น์ ์ฃผ๋๋์ ๋ฒ์๊ฐ ์๋๋ค โ ๊ทธ๋ฐ ํํ์ ์ฐ์ถ๋ฌผ
์ถ์ ์ง์๋ก ํ๋ ํด์ํ์ง ๋ง๋ผ(์ค์ธก: ํ run์ด "๊ถํ์ด๋ ์ธ๋ถ SDK ์์ด ์์ UI"๋ง
์๊ตฌํ ๊ณผ์ ์์ ์๋ฌด๋ ์์ฒญํ์ง ์์ --no-design-guide๋ฅผ ์ค์ค๋ก ๋ถ์ฌ ๋์์ธ
๊ฐ์ด๋ ์ ์ฒด๋ฅผ ๋บ๋ค. ์๋ฃ ๋ณด๊ณ ์ ์ฌ์ค๋๋ก ์ ๊ธฐ๋ ํ์ง๋ง, ์ฌ์ฉ์๋ ๋บ ์๊ฐ์ด ์๋
๊ฒ์ ์์๋ค). ์ ๋งคํ๋ฉด ๋ถ์ด์ง ์๋ ์ชฝ์ด ๊ธฐ๋ณธ๊ฐ์ด๋ค โ ๋นผ๋ ๊ฒ์ ๋์ค์
/ait:designยท/ait:inject-*๋ก ๋๋๋ฆด ์ ์์ง๋ง, ์ ๋ฃ์ ๊ฒ์ ์ฌ์ฉ์๊ฐ ์์์ฑ์ง
๋ชปํ๋ฉด ๋๋๋ฆด ๊ธฐํ ์์ฒด๊ฐ ์๋ค.
ํธ์ถ ์ (์ฌ๋์ ๋ช
๋ น๊ณผ ์์ฐ์ด ์์ฒญ์ ๊ฐ์ skill๋ก ์ด์ด์ง๋ค โ ์ฌ๋์
๋ค์์คํ์ด์ค๊ฐ ๊ทธ๋๋ก ์ค์ง ์๋ ์์ด์ ํธ์์๋ ์๋ ์์ฐ์ด ์ชฝ์ด ์ ๊ท ๊ฒฝ๋ก๋ค):
/ait:new my-mini-app # ๋ง๋ก: "์ฑ์ธํ ์ค ๋ฏธ๋์ฑ ์๋ก ํ๋ ๋ง๋ค์ด์ค. ์ด๋ฆ์ my-mini-app ์ผ๋ก."
/ait:new "๋ด ๋ฏธ๋์ฑ" --tds # ๋ง๋ก: "ํ ์ค ๋์์ธ ์์คํ
๊น์ง ์น์ด์ ๋ฏธ๋์ฑ ๋ง๋ค์ด์ค"
/ait:new my-shop --sample iap # ๋ง๋ก: "์ธ์ฑ๊ฒฐ์ ์์ ๊น์ง ๋ฃ์ ๋ฏธ๋์ฑ my-shop ๋ง๋ค์ด์ค"
/ait:new my-app --local --no-install # ๋ง๋ก: "์คํ๋ผ์ธ ๋ก์ปฌ ํ
ํ๋ฆฟ์ผ๋ก ๋ง๋ค๊ณ ์ค์น๋ ๊ฑด๋๋ฐ์ด์ค"
/ait:new my-app --no-devtools # ๋ง๋ก: "devtools ๋ฐฐ์ ์์ด ๋ฏธ๋์ฑ๋ง ๋ง๋ค์ด์ค"
/ait:new my-app --no-design-guide # ๋ง๋ก: "๋์์ธ ๊ฐ์ด๋๋ ๋ฃ์ง ๋ง๊ณ ๋ฏธ๋์ฑ๋ง ๋ง๋ค์ด์ค"
/ait:new my-app --no-tossface # ๋ง๋ก: "์ด๋ชจ์ง ์์ฒด๋ ๋นผ๊ณ ๋ฏธ๋์ฑ ๋ง๋ค์ด์ค"
์์กด
- ํธ์คํธ์ Node 24+(create-ait-app
engines.node >=24 + Vite ์๊ตฌ์ฌํญ)๋ฉด
์ถฉ๋ถํ๋ค โ npm์ Node์ ๋๋ด๋๋ค. npm ๊ณ ์ ์ CLI์ ํ๊ณ๊ฐ ์๋๋ผ harness์
๊ท์ฝ์ด๋ค: CLI๋ npm/yarn/pnpm 3์ข
์ ์ง์ํ์ง๋ง(--pm <name>) ์ด skill์ ํ์
npm run dev/npm --prefix ํ๋ฆ๊ณผ ํต์ผํ๋ ค๊ณ ํญ์ --pm npm์ผ๋ก ๋ถ๋ฅธ๋ค
(์ฌ์ฉ์๊ฐ ๋ช
์์ ์ผ๋ก ์๊ตฌํ๋ฉด ๊ทธ ๊ฐ์ ๋ง์ถ๋ค). Step 0์ด ์คํ ์ ๊ฒ์ฌํ๋ค.
- ์ธํฐ๋ท ํ์ โ
npx -y๊ฐ create-ait-app์ ๋ฐ์ ํ์ผ ์์ฑ๋ถํฐ
installยทait init๊น์ง ํ ๋ฒ์ ์ํํ๋ค. @apps-in-toss/web-framework์
๋ฒ์ ์ create-ait-app์ด ์๊ธฐ ๋น๋์ ๋ฐ์ ๋ ์ ํ ๋ฒ์ ์ด๋ค(0.2.5ยท0.2.6 dist
์ค์ธก: .github/version-pins/package.json์ 3.1.1์ dependencies์ ๊ทธ๋๋ก
์ด๋ค) โ ๊ณต๊ฐ latest๊ฐ ๋ ๋์๋ ๊ทธ ํ์ ๋ฐ๊ณ , ํ์ create-ait-app์ด ์๋ก
๋ฐํ๋ ๋๋ง ์์ง์ธ๋ค. ์ข
์ CLI๋ "latest" ๋ฆฌํฐ๋ด์ ์จ์ install ์์ ์
registry์ ๋ฌ๋ ธ์๋ค(harness#90 ํญ๋ชฉ1 โ ๊ณต๊ฐ latest๊ฐ 3.x ์ถ์ ๋ค์๋ ํ๋์
2.10.8์ ๊ฐ๋ฆฌํค๋ ์ด๊ธ๋จ์ด ๊ทธ๋ ํ์ธ๋จ). ์คํ๋ผ์ธ์ด๋ฉด --local ํด๋ฐฑ.
์ด skill์ ์ฝ์ ์ธ์ฆ์ ์๊ตฌํ์ง ์๋๋ค. ๋ก๊ทธ์ธ ์์ด ๋น ํ๋ก์ ํธ๋ง
๋ง๋ค๊ณ ๋๋ธ๋ค. ์ฝ์ ๋ฑ๋ก์ ์ฌ์ฉ์๊ฐ ์ค๋น๋์ ๋ ๋ณ๋๋ก.
์คํ ์์
Step 0 โ toolchain ์ฌ์ ๊ฒ์ฌ
node --version(24+)์ ํ์ธํ๋ค. npm์ Node์ ๋๋ด๋๋ฏ๋ก npm --version์ด ์ ์
์๋ตํ๋์ง๋ง ๊ฐ๋ณ๊ฒ ๋ณธ๋ค. ๋น๊ฐ๋ฐ์๊ฐ raw ์
ธ ์ค๋ฅ๋ฅผ ๋ง์ฃผ์น์ง ์๋๋ก, Node
์์/24 ๋ฏธ๋ง์ด๋ฉด ์ฌ๊ธฐ์ ๋ฉ์ถ๊ณ nvm(nvm install 24 && nvm use 24) ๋๋
https://nodejs.org/en/download/ ๋ฅผ ํ ๋ธ๋ก์ผ๋ก ์๋ดํ ๋ค ์ข
๋ฃํ๋ค(Node๋ฅผ ์ค์นํ๋ฉด
npm๋ ํจ๊ป ๋ค์ด์จ๋ค).
1. ์
๋ ฅ ์ ๊ทํ + ์ถฉ๋ ๊ฒ์ฌ
-
<app-name>์ด ๋น์์ผ๋ฉด ๋๋ฌป๋๋ค (์: "์ฑ ์ด๋ฆ์ ์๋ ค์ฃผ์ธ์ (์: my-mini-app)").
-
package_name = slugify(app_name) โ ์๋ฌธ์ โ ๋น-alphanumeric์ -๋ก โ
์ฐ์ - ์์ถ โ ์ ๋ trim. ๋น ๋ฌธ์์ด/์ซ์ ์์์ด๋ฉด npm ํธํ ์ด๋ฆ์ ๋๋ฌป๋๋ค.
-
์ฝ์ ๋ฑ๋ก ์ appName(=package_name)์๋ ๋ณ๋ ๊ท์น์ด ์๋ค๊ณ ๋ณด๊ณ ๋๋ค
(harness#90 ํญ๋ชฉ3, 2026-08-07 โ ์ด skill์ด ์ฝ์ ๊ณต์ ๋ฌธ์๋ก ์ง์ ๊ฒ์ฆํ ๊ฒ์
์๋๋ค): ์๋ฌธ ์๋ฌธ์ยท์ซ์ยทํ์ดํ, 63์ ์ดํ, toss ํฌํจ ๊ธ์ง(apps-in-toss๋
๋ถ๋ถ ๋ฌธ์์ด๋ก ํฌํจํ๋ฏ๋ก /toss/ ํ๋๋ฉด ๋๋ค). CLI๋ slugify๋ ์ด๊ฑธ ๊ฒ์ฌํ์ง
์์ ์๋ฐ์ ์ฝ์ ๋ฑ๋ก(miniapp_create) ๋จ๊ณ์์์ผ ๊ฑฐ๋ถ๋๋ค โ scaffold ์ ์
์ฌ๊ธฐ์ ๋จผ์ ๋ง๋๋ค. 63์ ์ด๊ณผ์ด๊ฑฐ๋ toss๋ฅผ ํฌํจํ๋ฉด ์์ํ์ง ์๊ณ ๋๋ฌป๋๋ค:
package_name์ด ์ฝ์ appName ๊ท์น(์๋ฌธ ์๋ฌธ์ยท์ซ์ยทํ์ดํ, 63์ ์ดํ,
"toss" ํฌํจ ๋ถ๊ฐ)์ ์๋ฐํฉ๋๋ค โ ๋ค๋ฅธ ์ด๋ฆ์ ์๋ ค์ฃผ์ธ์.
-
๋์์ ํ์ฌ cwd ํ์ <package_name>/. ์ด๋ฏธ ์กด์ฌํ๊ณ ๋น์ด์์ง ์์ผ๋ฉด ๊ฑฐ๋ถ:
./<package_name> ๋๋ ํ ๋ฆฌ๊ฐ ์ด๋ฏธ ์์ต๋๋ค. ๋ค๋ฅธ ์ด๋ฆ์ ์ฐ๊ฑฐ๋ ๋๋ ํ ๋ฆฌ๋ฅผ
๋จผ์ ์ ๋ฆฌํด์ฃผ์ธ์. ์๋์ผ๋ก ๋ฎ์ด์ฐ์ง ์์ต๋๋ค.
(create-ait-app๋ ๊ฐ์ ์ํฉ์์ exit 1 ํ์ง๋ง, ์ฐ๋ฆฌ๊ฐ ๋จผ์ ๊ฒ์ฌํด ๋ช
ํํ
ํ๊ตญ์ด ์๋ด๋ฅผ ์ค๋ค. CLI์๋ --force/overwrite๊ฐ ์๋ค.)
--local์ด๋ฉด ์ฌ๊ธฐ์ references/local-template.md๋ฅผ Readํด ๊ทธ ์ ์ฐจ(๋ณต์ฌ +
ํ ํฐ ์นํ + ๋์์ธ ๊ฐ์ด๋ ํ์ธ + install + ์๋ด)๋ก ์งํํ๊ณ , ์๋ 2~6์ ๊ฑด๋๋ด๋ค.
์์ธ๋ 5-B ํ๋ โ ๊ทธ ๋ฌธ์์ L-3b๊ฐ ํ์ธ ๋ชฉ์ ์ผ๋ก ๊ฐ์ ์คํฌ๋ฆฝํธ๋ฅผ ๋ถ๋ฅด๊ณ , ํ
ํ๋ฆฟ์ด
์์ฐ์ ํ๋ฆฌ๋ฒ ์ดํฌ๋ก ๋ด๊ณ ์์ด ์ ์์ด๋ฉด ์ ํญ๋ชฉ์ด skip์ผ๋ก ๋๋๋ค.
2. scaffold โ create-ait-app ๋น๋ํํ ํธ์ถ
scaffold๋ ๋ช
๋ น ํ๋๋ค โ CLI๊ฐ ํ์ผ ์์ฑ โ npm install โ
ait init --app-name <name> --skip-input(devtoolsยท๋ฒ๋ค ์ค์ ๋ฐฐ์ )๊น์ง ์ ๋ถ
์ํํ๋ค. install์ ๋ผ์ด๋ผ ๋ฐฉ๋ฒ์ ์๋ค(--skip-install์ 0.2.3์์ ์ ๊ฑฐ๋๋ค โ
์ง์ ํ๋ฉด ์ ์ ์๋ ์ต์
์ด์์: --skip-install๋ก ์ฆ์ฌํ๊ณ ์ฐ์ถ๋ฌผ์ด 0์ด๋ค,
์ค์ธก 2026-08-10). ๋์์ธ ๊ฐ์ด๋ ์ฃผ์
(5-B)๋ ๊ฐ์ ์ฒด์ธ์ ์๋๋ค โ ๋ณ๋ ๋จ๊ณ๋ก
๋ฏธ๋ฃจ๋ฉด ์ผ๋ถ run์ด ๊ฑด๋๋ฐ๋ ์ค์ธก ์ฌ๋ก๊ฐ ์์ด, scaffold๊ฐ ์ฑ๊ณตํ ๋ชจ๋ run์ด
๋ฐ๋์ ์ฃผ์
๊น์ง ์คํํ๋๋ก ๋ช
๋ น ๋ ๋ฒจ์์ ๊ฒฐํฉํ๋ค:
npx -y create-ait-app@latest <package_name> --inline --pm npm --template react-ts && bash "<์ด skill์ base directory>/../design/scripts/inject-project-guide.sh" "./<package_name>"
์ fence๋ ๊ธฐ๋ณธ๊ฐ --template react-ts๊ฐ ์ด๋ฏธ ์ฑ์์ง ๊ทธ๋๋ก ์คํ๋๋ ๋ช
๋ น์ด๋ค โ
ํ
ํ๋ฆฟ ์์ฒญ์ด ์์ผ๋ฉด ํ ๊ธ์๋ ๋ฐ๊พธ์ง ์๊ณ ์คํํ๋ค. ๋ฐ๊ฟ ๋ฃ๋ ์๋ฆฌ๋ ์
๋ฟ์ด๋ค:
์ฌ์ฉ์๊ฐ ๋ค๋ฅธ ํ
ํ๋ฆฟ์ ์ง์ ํ์ผ๋ฉด react-ts ์๋ฆฌ์ ๊ทธ ์ด๋ฆ, --tds๋ฉด
--template react-ts๋ฅผ ํต์งธ๋ก --tds๋ก ๊ต์ฒด(๋์ ๊ฐ์ด ์ฃผ๋ฉด CLI๊ฐ ๊ฑฐ๋ถํ๋ค โ
์ด๋ ์ฃผ์
์คํฌ๋ฆฝํธ ์ธ์์๋ --tds๋ฅผ ๋ถ์ธ๋ค), --sample์ ์๊ตฌํ์ผ๋ฉด
--template react-ts ๋ค์ --sample iap,iaa๋ฅผ ๋ง๋ถ์ธ๋ค. "ํ
ํ๋ฆฟ ์๊ธฐ๊ฐ ์์์ผ๋
--template์ ๋นผ์"๊ฐ ๊ฐ์ฅ ํํ ๋ญ๋น์๋ค โ ์ด์ ํ๊ธฐ (--template <template> | --tds)๋ฅผ ๋ชจ๋ธ์ด ์ฑ์ฐ์ง ์๊ณ ์ง์ CLI์ ๋น๋ํํ ์คํ์ ํ์ํ ๊ฐ์ด ๋น ์ก์ด์๋ฅผ
๋ฐ๊ณ ์์ผ ๋ค์ ๋ฃ์๋ค(์ค์ธก: 25 run ์ค 19๊ฐ ์ฒซ ํธ์ถ์์ ์ด ์๋ณต์ ํ๊ณ , ๊ทธ ์ฌ์๋๊ฐ
๋ฐฑ๊ทธ๋ผ์ด๋ ์ ํยทํ์์์ ํ์ ์ ์ถ๋ฐ์ ์ด ๋ run์ด ์
์ด๋ค). ๊ธฐ๋ณธ๊ฐ์ด fence์ ๋ฐํ
์์ผ๋ ์ด ์๋ณต์ ์์ด์ผ ํ๋ค.
ํ์ ์ฐ์ง ์๋ ์ด์ ์ ๋จ๋ ์ํ: create-ait-app์ ํญ์ @latest๋ก
๋ถ๋ฅด๋ ๊ฒ์ด ์ ์ฑ
์ด๋ค(maintainer ๊ฒฐ์ 2026-08-10) โ ๋ช
์ ํ์ upstream
๊ฐ์ (์ด skill์ด ์ฐํํ๋ ๊ฒฐํจ์ ์์ ํฌํจ)์ ๋ฐ์ง ๋ชปํ๊ฒ ๋ง๋ ์ชฝ์ด ๋ ์ปธ๋ค.
@apps-in-toss/web-framework์ ๋ฒ์ ์ ์ด skill์ด ์ ํ์ง ์๋๋ค โ
create-ait-app์ด ์๊ธฐ ๋น๋์ ๋ฐ์ ๋ ์ ํ ๋ฒ์ (0.2.5ยท0.2.6์ 3.1.1)์
์ฐ๋ฏ๋ก "์ต์ create-ait-app์ด ๊ณ ๋ฅธ wf"๋ฅผ ๋ฐ๋ ์
์ด๊ณ , ๊ณต๊ฐ latest๋ณด๋ค ๋ค์ผ
์ ์๋ค. ๋์ ์ฐ์ถ๋ฌผ ํ์์ ๋งค run ํ์ฒ๋ฆฌ 0(Step 3)์ด ๊ฒ์ฌํ๋ฏ๋ก,
ํ์์ด ๋ฐ๋๋ฉด ์กฐ์ฉํ ๊นจ์ง๋ ๋์ ๊ทธ ์๋ฆฌ์์ ๋ฉ์ถ๋ค. ๋ค๋ง ํ์ ๊ฐ๋๊ฐ
์ก์ง ๋ชปํ๋ ์ถ์ด ๋จ๋๋ค โ CLI์ ๋์ ๋ณํ(์: ait init ์๋ ํธ์ถ์ด
์ฌ๋ผ์ง๊ฑฐ๋ ๋ฐฐ์ ๋์์ด ๋ฐ๋๋ ๊ฒ)๋ ์ฐ์ถ๋ฌผ ํ์ผ ๋ชฉ๋ก์ด ๊ฐ์ผ๋ฉด ํต๊ณผํ ์
์๋ค. Step 4๊ฐ devtools ๋ฐฐ์ ์ ์ค๋ฌผ๋ก ํ์ธํ๋ ์ด์ ๊ฐ ์ด๊ฒ์ด๊ณ , ๊ทธ๋๋
์ด๊ธ๋๋ฉด ์๋ "ํธ์ถ ๊ท์น" ๋ง๋ฏธ์ ์์น(CLI ์๋ฌ๋ฅผ ๊ทธ๋๋ก ์ ํ๊ณ ์ค๋จ)์
๋ฐ๋ฅธ๋ค. create-ait-app@latest์ dist-tag ์์ฒด๊ฐ ํ๊ฒฝ๋ง๋ค ๋ค๋ฅด๊ฒ ํด์๋ ์
์๋ค๋ ์ํ์ ์๋
"๋ฒ์ ํด์์ด ์คํจํ๋ ๊ฒฝ์ฐ" ํญ๋ชฉ์์ ๋ค๋ฃฌ๋ค.
ํธ์ถ ๊ท์น (create-ait-app 0.2.3 ์์ค ์ค์ธก ๊ทผ๊ฑฐ โ ์คํ ๋ฒ์ ์ @latest ํด์์
๋ฐ๋ฅธ๋ค):
<package_name>(positional)ยท--pm npmยท--template react-ts(๋๋ --tds)๋ฅผ
์ ๋ถ ๋ช
์ โ --inline์ด๋ฉด ์ด ์ค ํ๋๋ง ๋น ์ ธ๋ CLI๊ฐ ์๋ฌ๋ก ์ฆ์ ์ค๋จํ๋ค
(assertNonInteractiveArgs). ํ๋กฌํํธ๋ก ๋น ์ง๋ ๊ฒ ์๋๋ผ ์คํจํ๋ค. fence์
--template react-ts๊ฐ ์ด๋ฏธ ๋ค์ด ์๋ค โ ๊ทธ๊ฒ์ ์ง์ฐ๋ ๊ฒ์ด ๊ณง ์ด ์๋ฌ๋ค.
- ์ค์บํด๋๋
create-ait-app ํ๋๋ค โ npm create @apps-in-toss/app ๊ฐ์
๋ณํ ๋ช
์นญ์ ๊ธฐ์ต์ผ๋ก ์ง์ด๋ด ์๋ํ์ง ๋ง๋ผ(์กด์ฌํ์ง ์๋ ํจํค์ง๋ผ 404๊ฐ ๋๋ค โ
์ค์ธก). ์ fence์ npx -y create-ait-app@latest ํํ ๊ทธ๋๋ก ์ด๋ค.
- ์์ฑ ์์น๋ positional ๊ฒฝ๋ก๋ก ์ง์ ํ๋ค โ
--cwd ํ๋๊ทธ๋ ์๋ค(์ ์ ์๋
์ต์
์ผ๋ก ์ฆ์ ์๋ฌ). ํ์ฌ ๋๋ ํฐ๋ฆฌ์ ๋ง๋ค๋ ค๋ฉด positional์ .์ ์ค๋ค
(npx -y create-ait-app@latest . --inline โฆ). positional์ ํ๋๋ง ๋ฐ๋๋ค โ
๋ ๊ฐ ์ด์์ด๋ฉด ์ ์ ์๋ ์ธ์์์๋ก ๊ฑฐ๋ถํ๋ค.
- ํ์ฌ ์์
๋๋ ํฐ๋ฆฌ์์ ์คํํ๋ค โ ๋ช
๋ น ์์
cd๋ฅผ ๋ถ์ด์ง ๋ง๋ผ. ์ฌ์ฉ์๊ฐ
์์น๋ฅผ ๋ช
์ํ์ง ์์๋ค๋ฉด ์ธ์
์ ์์
๋๋ ํฐ๋ฆฌ๊ฐ ๊ณง ํ๋ก์ ํธ๋ฅผ ๋ ์๋ฆฌ๋ค.
scaffold ์์ cd /tmpยทcd ~ ๊ฐ์ ์ด๋์ ๋ถ์ด๋ฉด ์ฐ์ถ๋ฌผ์ด ์ฌ์ฉ์๊ฐ ์ฐพ์ ์
์๋ ๊ณณ์ ์๊ธด๋ค โ ์ดํ ํ์ฒ๋ฆฌ๊ฐ ์ ๋ถ ํต๊ณผํด๋ ์ฌ์ฉ์ ๋์๋ ๊ฒฐ๊ณผ๋ฌผ์ด ์๋
์คํจ๋ค(์ค์ธก ์ฌ๋ก ์์). ๋๊ตฌ ์
ธ์ cwd๊ฐ ํธ์ถ ์ฌ์ด์ ๋ฆฌ์
๋๋์ง ์ ์ง๋๋์ง๋
์คํ ํ๊ฒฝ๋ง๋ค ๋ค๋ฅด๋ค โ ์ด๋ ์ชฝ๋ ๊ฐ์ ํ์ง ๋ง๋ผ(๋ฆฌ์
์ ๊ฐ์ ํ๊ณ ์๋ ๊ฒฝ๋ก๋ฅผ
๋ค์ ์ฐ๋ค ์ ์ง ํ๊ฒฝ์์ ์ด๊ธ๋ ์ฌ๋ก, ๊ทธ ๋ฐ๋ ์ฌ๋ก ๋ ๋ค ์ค์ธก๋๋ค). cd๋ฅผ ์
๋ถ์ด๋ฉด cwd๋ ์ด๋ ํ๊ฒฝ์์๋ ์์
๋๋ ํฐ๋ฆฌ์ ๋จธ๋ฌผ๋ฌ ์ด ์ฐจ์ด๊ฐ ๋ฌธ์ ๋์ง ์๋๋ค โ
Step 3 ์ดํ์ ๋ชจ๋ ํ์ฒ๋ฆฌ fence๋ cd ์์ด ์ ํ ๊ทธ๋๋ก(์์
๋๋ ํฐ๋ฆฌ ๊ธฐ์ค
./<package_name>/โฆ ์๋ ๊ฒฝ๋ก) ์คํํ๋ค. ์๋ ๊ฒฝ๋ก๊ฐ ๊ฐ์๊ธฐ ์ด๊ธ๋๋ฉด("no such
file" ๋ฑ) ๊ฒฝ๋ก๋ฅผ ๋ฐ๊ฟ๊ฐ๋ฉฐ ์ถ์ธก์ ๊ฑฐ๋ญํ์ง ๋ง๊ณ pwd ํ ๋ฒ์ผ๋ก ํ์ฌ ์์น๋ถํฐ
ํ์ธํ๋ค. "Shell cwd was reset" ์๋ฆผ๋ ํ์ ์ ํธ๊ฐ ์๋๋ค โ ์๋ฆผ๊ณผ ์ค์ cwd๊ฐ
์ด๊ธ๋๋ ํ๊ฒฝ์ด ์์ผ๋, ๋ณด์ด๋ฉด cd๋ก ๋๋ฐ์์น์ง ๋ง๊ณ ํ๋ก์ ํธ๊ฐ
./<package_name>์ ์๋์ง๋ถํฐ ์ฌํ์ธํ๋ค.
--skillsยท--skip-install์ ์กด์ฌํ์ง ์๋๋ค โ 0.2.3์ ํ๋๊ทธ ํ๋ ๊ฐ
ํ๋๊ทธ --pmยท--sampleยท--template, ๋ถ๋ฆฌ์ธ ํ๋๊ทธ
--helpยท--inlineยท--list-templatesยท--tds๊ฐ ์ ๋ถ๋ค(dist ์ค์ธก). ์๋
ํ๋๊ทธ๋ ์ฆ์ ์๋ฌ์ด๋ฏ๋ก "ํน์ ๋๋" ์์ผ๋ก ๋ถ์ด์ง ์๋๋ค. --skills๋ฅผ ํผํ๋
์ด์ ๋ ์ ํจํ๋ค โ ์์ด์ ํธ์ฉ ์ง์ ์ฃผ์
์ ์ด plugin์ skill ์ฒด์ ๊ฐ ๋ด๋นํ๋ค.
npx -y๋ฅผ ์ด๋ค โ -y๋ npx ์ต์ด ์คํ ์ ๋์ค๋ ์ค์น ํ์ธ ํ๋กฌํํธ๋ฅผ
๋น๋ํํ์ผ๋ก ๋๊ธด๋ค(non-TTY ์ธ์
์ด ์ด ํ๋กฌํํธ์์ ๋ฉ์ถ๋ ๊ฒ์ ๋ง๋๋ค).
&& ๋ค ์ฃผ์
์ธ๊ทธ๋จผํธ๋ ์กฐ๋ฆฝํ ๋ ๋นผ๋จน๊ธฐ ๊ฐ์ฅ ์ฌ์ด ๋ถ๋ถ์ด๋ค โ ์๋ตํ์ง
๋ง๋ผ. ์ธ๊ทธ๋จผํธ๋ฅผ ๋บ ์ ์๋ ๊ฒฝ์ฐ๋ ํ๋๋ฟ์ด๊ณ , ๊ทธ ์ธ์๋
์ fence์ ๋ ๋ช
๋ น์ ๊ทธ๋๋ก ๋ก ์คํํ๋ค โ ์ฃผ์
์ ๋ค๋ก
๋ฏธ๋ค ๋ณ๋ ํธ์ถ๋ก ์ชผ๊ฐ์ง ์๋๋ค. โ scaffold๊ฐ
์คํจํด ๊ฐ์ ๋ช
๋ น์ ๋ค์ ๋๋ฆด ๋๋ ์ฃผ์
์ธ๊ทธ๋จผํธ๊ฐ ๋ถ์ ์ ์ฒด ํ ์ค์
์ฌ์คํํ๋ค. ์ค์บํด๋ ๋ถ๋ถ๋ง ๋ฐ๋ก ์ฌ์คํํ๋ฉด ์ฃผ์
์ด ์กฐ์ฉํ ๋น ์ง๋ค(์ค์ธก: ์ฌ์๋
run์ด ์ฒด์ธ์ ์ชผ๊ฐ ์ฑ ์ฃผ์
์ ํ ๋ฒ๋ ์คํํ์ง ์์๋ค). ์ธ์ ๊ท์น: ๋ก
์ค์บํด๋ํ๋ฉด ์คํฌ๋ฆฝํธ์๋ ๋ฅผ, ๋ฉด ๋ฅผ
๋ง๋ถ์ธ๋ค.
์ฑ๊ณต ํ์ ์ exit code๋ก ํ๋ค โ ์๋ฃ ๋ฉ์์ง ๋ฌธ๊ตฌ๋ ๋ฒ์ ๋ง๋ค ๋ค๋ฅด๋ค(0.2.3์
โ
ํ๋ก์ ํธ๊ฐ ์์ฑ๋์ด์.๋ฅผ ๋ธ๋ค). ๋ฌธ๊ตฌ ๋ฌธ์์ด ๋งค์นญ์ผ๋ก ํ์ ํ๋ฉด CLI๊ฐ ๋ฌธ๊ตฌ๋ฅผ
๋ฐ๊ฟ ๋ ์กฐ์ฉํ ์คํํ๋ค. ์ฃผ์
์คํฌ๋ฆฝํธ๋ ๋ด๋ถ๊ฐ fail-soft๋ผ ํญ์ exit 0์ด๋ฏ๋ก
&& ์ฒด์ธ์ด exit code์ ์๋ฏธ๋ฅผ ๋ฐ๊พธ์ง ์๋๋ค โ 0์ด ์๋๋ฉด scaffold/install
์คํจ๋ค. ์๋ฌ๋ก ๋๋๋ฉด stderr๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉ์์๊ฒ ์ ํ๊ณ ์ค๋จํ๋ค:
-
์์ ์คํ๋ผ์ธ์ผ๋ก ๋ณด์ด๋ฉด --local ํด๋ฐฑ์ ์๋ดํ๋ค.
-
create-ait-app@latest์ ๋ฒ์ ํด์์ด ์คํจํ๋ ๊ฒฝ์ฐ โ ์ผ๋ถ ์ฌ๋ด๋ง ํ๋ก์
ํ๊ฒฝ์ ํน์ ๋ฒ์ ยทdist-tag๋ฅผ ๋ชป ๋ด๋ ค์ฃผ๊ฑฐ๋, latest๋ฅผ ๊ณต๊ฐ registry์ ๋ค๋ฅด๊ฒ
์ค๋ค(์ต์ ์ ์จ๊ฒจ ๊ตฌ๋ฒ์ ์ ์ฃผ๊ธฐ๋ ํ๊ณ ๊ณต๊ฐ์ ์๋ prerelease๋ฅผ ์ฃผ๊ธฐ๋ ํ๋ค โ
๊ทธ๋์ ํด์ ์คํจ๋ฅผ "๊ทธ ๋ฒ์ ์ด ์๋ค"๋ก ๋จ์ ํ๋ฉด ์ ๋๋ค). ๊ณต๊ฐ
๋ฏธ๋ฌ(registry.npmmirror.com)ยทjsdelivr๋ก ๊ต์ฐจ ํ์ธํ๊ณ , ๊ทธ ํ๋ก์ ํธ ์ ์ฉ
.npmrc์ registry override๋ --local ํด๋ฐฑ์ผ๋ก ์ฐํํ๋ค(ํธ์คํธ๋ช
์
ํ๋์ฝ๋ํ์ง ์๋๋ค).
-
scaffold ๋จ๊ณ install์ด ์คํจํด ๋๋ ํฐ๋ฆฌ๊ฐ ํต์งธ๋ก ์ฌ๋ผ์ง ๊ฒฝ์ฐ โ CLI๊ฐ
installDependencies ์คํจ๋ฅผ ์ต์์์์ ์ก์ rmSyncํ๊ธฐ ๋๋ฌธ์ด๋ค(0.2.3 dist
์ค์ธก โ ์คํจ ์์ธ๊ณผ ๋ฌด๊ดํ๊ฒ ์ผ์ด๋๋ค). --skip-install๋ ์์ด์ ธ ์๋ ๋ณต๊ตฌ
์๋จ์ด ์๋ค. ์๋ฌ๋ฅผ ๊ทธ๋๋ก ๋ณด๊ณ ํ๊ณ ์ค๋จํ ๋ค ์ ํ์ง๋ฅผ ์ค๋ค: (a) ๊ฐ์ ๋ช
๋ น 1ํ
์ฌ์๋(์ฃผ์
์ธ๊ทธ๋จผํธ๊ฐ ๋ถ์ ์ ์ฒด ํ ์ค ๊ทธ๋๋ก โ ์ค์บํด๋ ๋ถ๋ถ๋ง ์ฌ์คํํ์ง
์๋๋ค), (b) --local ํด๋ฐฑ.
-
package.json์ @apps-in-toss/web-framework๋ create-ait-app์ด ๋ฐ์
์ ํ ๋ฒ์ ์ด๋ค(0.2.5ยท0.2.6 ์ค์ธก "3.1.1" โ ์๊ธฐ ์ ์ฅ์
.github/version-pins/package.json์ ํ์ ๋น๋์ ๋ฃ๋๋ค). ๊ทธ๋์ wf ๋ฒ์ ์
์คํ๋ create-ait-app ๋ฒ์ ์ ๋ฐ๋ผ๊ฐ๊ณ , create-ait-app@latest ํด์์ด ํ๊ฒฝ๋ง๋ค
๋ค๋ฅด๋ฉด wf๋ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค. ์ข
์ CLI๋ "latest" ๋ฆฌํฐ๋ด์ ์จ์ install ์์ ๋ง๋ค
๋ฌ๋๋ค(์ค์ธก: ๊ณต๊ฐ latest๊ฐ 3.0.1์ธ ์์ ์ 3.0.0์ด ์ค์น๋จ). ๊ฒ์ฆยท์ธก์
๋งฅ๋ฝ์์๋ ์ค์ ๋ก ์ค์น๋ ๋ฒ์ ์ npm --prefix ./<package_name> ls @apps-in-toss/web-framework๋ก ํ์ธํด ํญ์ ํจ๊ป ๊ธฐ๋กํ๋ค. ์ด๋ ๊ฒฝ๋ก๋ build
์ ์ ์ก๋ ๊ฒ์ดํธ๋ ํ์ฒ๋ฆฌ 0(Step 3)์ major ํ์ธ์ด๋ค โ ์๋ ๊ทธ ์ ์ฐจ๋ฅผ ๋ฐ๋์
๊ฑฐ์น๋ค.
-
์จ๋ผ์ธ์ธ๋ฐ ํน์ transitive dep ์ค์น๋ง ์คํจํ๋ ๊ฒฝ์ฐ(ํ๋ก์/๋ฏธ๋ฌ
registry๊ฐ ์ผ๋ถ ๋ฒ์ ์ ๋ชป ์ฃผ๋ ํ๊ฒฝ โ ์ค์ธก)๋ --local๋ ๊ฐ์ vite
ํด์ฒด์ธ์ ์ค์นํ๋ค ๊ฐ์ ๋ฌธ์ ๋ฅผ ๋ฐ์ ์ ์๋ค. ๋๋ ํฐ๋ฆฌ๊ฐ ๋จ์ ์๋ค๋ฉด(=
ait init ๋จ๊ณ์์ ์ฃฝ์ ๊ฒฝ์ฐ) package.json์ overrides๋ฅผ ๋ํด ๋ฌธ์
ํจํค์ง๋ฅผ ๋ฏธ๋ฌ์ ์กด์ฌํ๋ ์ธ์ ๋ฒ์ ์ผ๋ก ๊ณ ์ ํ ๋ค npm --prefix ./<package_name> install์ ์ฌ์คํํ๋ ํํผ๋ฅผ ์๋ดํ๋ค. scaffold
๋จ๊ณ์์ ์ฃฝ์ด ๋๋ ํฐ๋ฆฌ๊ฐ ์ฌ๋ผ์ก๋ค๋ฉด ์ ํญ๋ชฉ๊ณผ ๊ฐ์ ์ ํ์ง(์ฌ์๋ยท--local)๋ก
์ฒ๋ฆฌํ๋ค.
์ด๋ ์ธ์ ๋ฒ์ ์ด ๋ฏธ๋ฌ์ ์ค์ฌํ๋์ง๋ ํ๋ณด ๋ฒ์ ์ tarball URL์ curl -I๋ก
HEAD ์์ฒญํด 200/404๋ก ํ์ธํ๋ค(์ค์ธก: baseline-browser-mapping@2.11.7์ด
404, ์ธ์ ํ 2.11.1์ด 200) โ ์๋ฌ ๋ฉ์์ง์ registry URL ํจํด์์ ๋ฒ์ ๋ง
๋ฐ๊ฟ๊ฐ๋ฉฐ ํ์ธํ๋ฉด ๋๋ค:
curl -sI "<์คํจํ tarball URL์์ ๋ฒ์ ๋ง ์ธ์ ๋ฒ์ ์ผ๋ก ์นํ>" | head -1
2-1. ์ค์น ์ํ ์๋ ด
scaffold๊ฐ exit 0์ผ๋ก ๋๋๋ ์์กด์ฑ์ด ๋ค ๊น๋ ธ๋ค๋ ๋ป์ ์๋๋ค. CLI๋ install์
๋ ๋ฒ ํ๋ค โ ์๊ธฐ npm install ํ ๋ฒ, ait init์ด devtools๋ฅผ ๋ฐฐ์ ํ๋ฉฐ ํ ๋ฒ. ์ด
์ค ait init ์ชฝ ์คํจ๋ CLI๊ฐ ์ผํจ๋ค: โ ๏ธ ait init ์คํ์ ์คํจํ์ด์: โฆ
๊ฒฝ๊ณ ๋ง ์ฐ๊ณ ๊ทธ๋๋ก exit 0์ ๋ธ๋ค(0.2.3 dist ์ค์ธก โ runAitInit์ try/catch).
๊ทธ๋์ scaffold ์งํ ํญ์ ์๋ ์๋ ด ์ ์ฐจ๋ฅผ ๋๋ค(์ถ๋ ฅ ํ์ฑ์ ์์กดํ์ง ์๋๋ค).
npm์ postinstall์ ๊ธฐ๋ณธ ์คํํ๋ฏ๋ก ๋จ๋ ์คํจ ์์ธ์ ๋คํธ์ํฌยทregistry ๋ฌธ์ ๋ก
์ขํ์ง๋ค.
์ ์ฐจ:
-
์ค์น ์ํ๋ฅผ ํ์ธ ๊ฒธ ์๋ ด์ํจ๋ค โ ์ด๋ฏธ ์์ ํ ์ค์น๋ผ ์์ผ๋ฉด ์ฌ์ค์ no-op์ด๊ณ ,
๋ฏธ์ค์นยท๋ถ๋ถ์ค์น๋ฉด ์ด ๋ช
๋ น์ด ๋ง์ ์ฑ์ด๋ค:
npm --prefix ./<package_name> install
-
install์ด ์ ์ํ๋ ๋ค ./<package_name>/apps-in-toss.config.ts๊ฐ ์์ผ๋ฉด
ait init์ด ์ค๊ฐ์ ์ฃฝ์ ๊ฒ์ด๋ฏ๋ก, CLI๊ฐ ์๋ดํ๋ ๊ทธ๋๋ก ํ ๋ฒ ์ฌ์คํํ๋ค
(์ด์ install์ด ์ ์์ด๋ผ ์ฑ๊ณตํ ๊ฐ๋ฅ์ฑ์ด ๋๋ค):
(cd ./<package_name> && npx -y ait init --app-name <package_name> --skip-input)
๊ทธ๋๋ ์คํจํ๋ฉด stderr๋ฅผ ๊ทธ๋๋ก ๋ณด๊ณ ํ๊ณ , ์๋ Step 3(ํ์ ๊ฐ๋)์์
์ค๋จ๋๋ค.
3. ํ์ฒ๋ฆฌ 0 โ ํ์ ๊ฐ๋ + ๋์์ธ ๊ฐ์ด๋ ์ฃผ์
์๋ Step 4ยท5์ ์ ์ ๋ "ait init์ด ๋๊น์ง ๋์ ๋ฒ๋ค ์ค์ ๊ณผ ๋น๋ ์คํฌ๋ฆฝํธ๊ฐ
๋ฐฐ์ ๋ ์ฐ์ถ๋ฌผ"์ด๋ค. ํ์ด ์์ผ๋ฏ๋ก ์ด ์ ์ ๋ ๋งค run ํ์ธํ๋ค โ ์ ๋ฒ์ ์ด
์ฐ์ถ๋ฌผ ํ์์ ๋ฐ๊พธ๋ฉด ์ฌ๊ธฐ์ ๋ฉ์ถฐ์ผ, ์ด๊ธ๋ ํ์ ์์์ ํ์ฒ๋ฆฌ๊ฐ ํ๋์ง ์๋๋ค.
ํ์ ํ์ธ๊ณผ ๋์์ธ ๊ฐ์ด๋ ์ฃผ์
์ ํ fence๊ฐ ํจ๊ป ํ๋ค. ๋๋ ๋๋ฉด ํ์ fence๋
๋งค๋ฒ ์คํ๋๋๋ฐ ์ฃผ์
์ชฝ๋ง ์กฐ์ฉํ ๋น ์ง๋ค(์ค์ธก: ์ด run ์ค ์
โ ์๋ "๋์์ธ ๊ฐ์ด๋ ํ์
์ฝ๊ธฐ" ์ฐธ๊ณ ). ์คํ ์ฌ๋ถ๋ฅผ ํ๋จ์ ๋งก๊ธฐ๋ฉด ํ๋ฅ ์ ์ผ๋ก ๋น ์ง๋ฏ๋ก, ๋น ์ง ์ ์๋ fence๋ฅผ
์์ด๋ค.
๊ณ ์น ์๋ฆฌ๋ 1ํ์ ๊ฐ ๋ท๊ณผ ๊ฒฝ๋ก ๋ฌธ์์ด ํ๋๋ฟ์ด๋ค: D(--no-design-guide๋ฉด
1)ยทT(--tds๋ฉด 1)ยทN(--no-tossface๋ฉด 1)ยทP=์ <package_name>, ๊ทธ๋ฆฌ๊ณ
<์ด skill์ base directory>(๊ฐ์ ๋ฌธ์์ด์ด 2๊ตฐ๋ฐ ๋์ค๋ ๋ ๋ค Step 2์ ๊ฐ์ ๊ท์น์ผ๋ก
์ฑ์ด๋ค). ๊ทธ ๋ฐ์๋ ํ ๊ธ์๋ ๊ณ ์น์ง ๋ง๋ผ โ ํนํ bash "$G" "$P" "$@" ๋ ์๋ฆฌ์
ํ๋๊ทธ๋ฅผ ์์ผ๋ก ๋ง๋ถ์ด์ง ๋ง๋ผ. ์คํฌ๋ฆฝํธ ์ธ์๋ 1ํ์ T/N์์ ์
ธ์ด ํ์ํ๋ค.
{ D=0; T=0; N=0; P="./<package_name>"; MK='ait:design-guide'; R=""; OK=1; G=""; S=""; DG=""; TF=""; TE=""; MV=""; E=""; IF=0
test -f "$P/apps-in-toss.config.ts" && node -e "const p=require(require('node:path').resolve('$P','package.json')); process.exit((p.dependencies?.['@apps-in-toss/web-framework'] && /\bait build\b/.test(p.scripts?.build ?? '')) ? 0 : 1)" && echo "ํ์ ์ผ์น" || echo "ํ์ ๋ถ์ผ์น"
if [ "$D" = 1 ]; then echo "๋์์ธ ๊ฐ์ด๋ ์์(--no-design-guide โ ๋ซํ โก)"
elif [ ! -d "$P" ] || [ ! -f "$P/package.json" ]; then echo "๋์์ธ ๊ฐ์ด๋ ์ฃผ์
๋ณด๋ฅ(ํ๋ก์ ํธ ๊ฒฝ๋ก ์๋=$P) โ ๋ซํ์ด ์๋๋ค: ๊ฒฝ๋ก ์นํ์ ๊ณ ์ณ ์ด fence๋ฅผ ๋ค์ ์คํํ๋ค"
else
touch "$P/.ait-design-guide-failed" 2>/dev/null
if [ "$T" = 1 ] && [ "$N" = 1 ]; then set -- --tds --no-tossface; elif [ "$T" = 1 ]; then set -- --tds; elif [ "$N" = 1 ]; then set -- --no-tossface; else set --; fi
dgico() { if node -e "process.exit(require(require('node:path').resolve('$P','package.json')).dependencies?.react?0:1)" 2>/dev/null; then [ -s "$P/src/components/icons.tsx" ]; else [ -s "$P/src/assets/icons/close.svg" ]; fi; }
dgent() { for C in src/index.css src/main.tsx src/main.ts src/index.tsx src/index.ts index.tsx index.ts index.html; do grep -qs 'styles/base.css' "$P/$C" && return 0; done; for C in src/index.css src/main.tsx src/main.ts src/index.tsx src/index.ts index.tsx index.ts index.html; do [ -f "$P/$C" ] && return 1; done; return 0; }
dgok() { grep -qs "<!-- $MK v" "$P/AGENTS.md" && grep -qs "<!-- $MK v" "$P/CLAUDE.md" && [ -s "$P/docs/design-guide.md" ] && { [ "$T" = 1 ] || { [ -s "$P/src/styles/tokens.css" ] && [ -s "$P/src/styles/base.css" ] && dgico && dgent; }; }; }
if dgok; then rm -f "$P/.ait-design-guide-failed"; echo "๋์์ธ ๊ฐ์ด๋ ์์(์ด๋ฏธ ์์)"
else
for C in "<์ด skill์ base directory>/../design/scripts/inject-project-guide.sh" "$CLAUDE_PLUGIN_ROOT/shared/skills/design/scripts/inject-project-guide.sh" "$CLAUDE_PLUGIN_ROOT/skills/design/scripts/inject-project-guide.sh" .claude/skills/design/scripts/inject-project-guide.sh "$HOME/.claude/skills/design/scripts/inject-project-guide.sh"; do
[ -f "$C" ] && { G="$C"; break; }
done
[ -n "$G" ] && { bash "$G" "$P" "$@"; dgok || bash "$G" "$P" "$@"; }
if dgok; then rm -f "$P/.ait-design-guide-failed"; echo "๋์์ธ ๊ฐ์ด๋ ์์(์คํฌ๋ฆฝํธ๋ก ๋ณด์๋จ โ ์คํฌ๋ฆฝํธ=$G)"
else
for C in "<์ด skill์ base directory>/../design/assets/project" "$CLAUDE_PLUGIN_ROOT/shared/skills/design/assets/project" "$CLAUDE_PLUGIN_ROOT/skills/design/assets/project" .claude/skills/design/assets/project "$HOME/.claude/skills/design/assets/project"; do
[ -s "$C/memory-digest.md" ] && [ -s "$C/design-guide.md" ] && { [ "$T" = 1 ] || { [ -s "$C/tokens.css" ] && [ -s "$C/base.css" ] && [ -s "$C/icons.tsx" ] && [ -s "$C/icons/close.svg" ]; }; } && { S="$C"; break; }
done
if [ -z "$S" ]; then
echo "๋์์ธ ๊ฐ์ด๋ ์ฃผ์
์คํจ(์คํฌ๋ฆฝํธ=${G:-๋ชป์ฐพ์} ยท ์์ฐ=๋ชป์ฐพ์)"
echo "์๋ฃ ๋ธ๋ก์ ๊ทธ๋๋ก ๋ฃ์ ์ค: ๋์์ธ ๊ฐ์ด๋: ์ฃผ์
์คํจ โ /ait:design์ผ๋ก ๋์ค์ ๋ฃ์ ์ ์์ต๋๋ค"
else
DG="$S/memory-digest.md"
if [ "$T" = 1 ]; then
TF="$(mktemp "${TMPDIR:-/tmp}/ait.XXXXXX" 2>/dev/null)"
if [ -n "$TF" ] && awk '/^์์ด์ฝ: React/{print "์ด ํ๋ก์ ํธ๋ TDS ๊ธฐ๋ฐ์ด๋ค โ ์ยทํฌ๊ธฐยท์์ด์ฝ์ TDS ์ปดํฌ๋ํธ๊ฐ ์ฃผ๋ ๊ฒ์ ์ด๋ค(์ ํ ํฐ ๋ชฉ๋ก๊ณผ ์์ด์ฝ ํ์ผ ๊ฒฝ๋ก๋ ์ด ํ๋ก์ ํธ์ ์๋ค)."; next} /^์์ด์ฝ: vanilla/{print "1์ธต ํ๋ ๊ท์น์ ํ๋ซํผ ์ ์ฝ์ด๋ผ ๊ทธ๋๋ก ์ ์ฉ๋๋ค โ ๊บพ์ ยท๋ซ๊ธฐยท๊ฒ์์ TDS ์์ด์ฝ ์ปดํฌ๋ํธ๋ก ์ถฉ์กฑํ๊ณ , ํ
์คํธ ๊ธ๋ฆฌํ๋ก ๋์ฒดํ๋ ๊ฒ์ ์ฌ์ ํ ๊ธ์ง๋ค."; next} {print}' "$S/memory-digest.md" > "$TF" 2>/dev/null && [ -s "$TF" ]; then DG="$TF"; else DG=""; OK=0; R="$R digest=FAIL"; fi
fi
mkdir -p "$P/docs" 2>/dev/null
[ -f "$P/docs/design-guide.md" ] || cp "$S/design-guide.md" "$P/docs/design-guide.md" 2>/dev/null
[ -f "$P/docs/design-guide.md" ] || { OK=0; R="$R guide=FAIL"; }
if [ "$T" = 1 ]; then R="$R css=tds-skip icons=tds-skip entry=tds-skip"; else
mkdir -p "$P/src/styles" 2>/dev/null
[ -f "$P/src/styles/tokens.css" ] || cp "$S/tokens.css" "$P/src/styles/tokens.css" 2>/dev/null
[ -f "$P/src/styles/tokens.css" ] || { OK=0; R="$R tokens=FAIL"; }
[ -f "$P/src/styles/base.css" ] || cp "$S/base.css" "$P/src/styles/base.css" 2>/dev/null
[ -f "$P/src/styles/base.css" ] || { OK=0; R="$R base=FAIL"; }
if [ "$N" = 1 ] && grep -q 'tossface\.css' "$P/src/styles/base.css" 2>/dev/null; then
sed -i.aitbak -e '/tossface\.css/d' -e 's/"Tossface", -apple-system/-apple-system/' "$P/src/styles/base.css" 2>/dev/null; rm -f "$P/src/styles/base.css.aitbak"
grep -q 'tossface\.css' "$P/src/styles/base.css" 2>/dev/null && R="$R tossface=FAIL" || R="$R tossface=off"
fi
if node -e "process.exit(require(require('node:path').resolve('$P','package.json')).dependencies?.react?0:1)" 2>/dev/null; then
mkdir -p "$P/src/components" 2>/dev/null
[ -f "$P/src/components/icons.tsx" ] || cp "$S/icons.tsx" "$P/src/components/icons.tsx" 2>/dev/null
[ -f "$P/src/components/icons.tsx" ] || { OK=0; R="$R icons=FAIL"; }
else
mkdir -p "$P/src/assets/icons" 2>/dev/null; IF=0
for I in chevron-down chevron-left chevron-right chevron-up close search; do
[ -f "$P/src/assets/icons/$I.svg" ] || cp "$S/icons/$I.svg" "$P/src/assets/icons/$I.svg" 2>/dev/null
[ -f "$P/src/assets/icons/$I.svg" ] || IF=1
done
[ "$IF" = 0 ] || { OK=0; R="$R icons=FAIL"; }
fi
E=""
for C in src/index.css src/main.tsx src/main.ts src/index.tsx src/index.ts index.tsx index.ts; do
[ -f "$P/$C" ] && { E="$P/$C"; break; }
done
if [ ! -f "$P/src/styles/base.css" ]; then R="$R entry=skip"
elif [ -n "$E" ] && grep -q 'styles/base.css' "$E" 2>/dev/null; then R="$R entry=skip"
elif [ -n "$E" ] && [ "${E%index.css}" != "$E" ]; then
TE="$(mktemp "${TMPDIR:-/tmp}/ait.XXXXXX")" && printf '%s\n' "@import './styles/base.css';" | cat - "$E" > "$TE" && mv "$TE" "$E" && R="$R entry=index.css" || { OK=0; R="$R entry=FAIL"; }
elif [ -n "$E" ] && { [ -f "$P/src/vite-env.d.ts" ] || [ -n "$(find "$P" -maxdepth 1 -name 'tsconfig*.json' -exec grep -l '"vite/client"' {} + 2>/dev/null)" ]; }; then
TE="$(mktemp "${TMPDIR:-/tmp}/ait.XXXXXX")" && printf '%s\n' "import './styles/base.css';" | cat - "$E" > "$TE" && mv "$TE" "$E" && R="$R entry=js" || { OK=0; R="$R entry=FAIL"; }
elif [ -f "$P/index.html" ] && ! grep -q 'styles/base.css' "$P/index.html" 2>/dev/null; then
TE="$(mktemp "${TMPDIR:-/tmp}/ait.XXXXXX")" && awk '/<\/head>/&&!d{print " <link rel=\"stylesheet\" href=\"/src/styles/base.css\" />";d=1}{print}' "$P/index.html" > "$TE" && mv "$TE" "$P/index.html" && R="$R entry=index.html" || { OK=0; R="$R entry=FAIL"; }
else R="$R entry=skip"; fi
fi
if [ "$OK" = 1 ] && [ -n "$DG" ]; then
MV="$(grep -o "$MK v[0-9]*" "$P/AGENTS.md" 2>/dev/null | head -1)"
if [ -n "$MV" ]; then R="$R agents=skip($MV)"
elif { [ -s "$P/AGENTS.md" ] && printf '\n'; printf '<!-- %s v1 -->\n' "$MK"; cat "$DG"; printf '<!-- /%s -->\n' "$MK"; } >> "$P/AGENTS.md" 2>/dev/null; then R="$R agents=new"
else OK=0; R="$R agents=FAIL"; fi
[ "$OK" = 1 ] && { grep -qs "$MK v" "$P/CLAUDE.md" || { { [ -s "$P/CLAUDE.md" ] && printf '\n'; printf '<!-- %s v1 -->\n@AGENTS.md\n<!-- /%s -->\n' "$MK" "$MK"; } >> "$P/CLAUDE.md" 2>/dev/null || { OK=0; R="$R claude=FAIL"; }; }; }
fi
rm -f "$TF" 2>/dev/null
if [ "$OK" = 1 ] && dgok; then rm -f "$P/.ait-design-guide-failed"; echo "๋์์ธ ๊ฐ์ด๋ ์์(์์ฐ ํด๋ฐฑ์ผ๋ก ๋ณด์๋จ โ$R)"
else
echo "๋์์ธ ๊ฐ์ด๋ ์ฃผ์
์คํจ(์คํฌ๋ฆฝํธ=${G:-๋ชป์ฐพ์} ยท ์์ฐ ํด๋ฐฑ โ$R)"
echo "์๋ฃ ๋ธ๋ก์ ๊ทธ๋๋ก ๋ฃ์ ์ค: ๋์์ธ ๊ฐ์ด๋: ์ฃผ์
์คํจ โ /ait:design์ผ๋ก ๋์ค์ ๋ฃ์ ์ ์์ต๋๋ค"
fi
fi
fi
fi
fi; }
์ด fence๋ ํต์งธ๋ก ํ ๋ฒ์ Bash ํธ์ถ๋ก ์คํํ๋ค. ๊ฒ์ฌ ํญ๋ชฉ์ ์ถ๋ ค ์๊ธฐ ์์ผ๋ก ๋ค์
์กฐ๋ฆฝํ์ง ๋ง๋ผ โ ์์ฒด ์กฐ๋ฆฝํ run์ด ๋ ์ธ๊ทธ๋จผํธ๋ง ๋นผ๋จน์ ๊ฒ์ด ์ค์ธก๋๋ค(Step 2 fence๋ฅผ
ํ ์ค๋ก ๋ง๋ ๊ฒ๊ณผ ๊ฐ์ ์ด์ ๋ค). ์์ ์๋ฅด๋ ๋ค๋ฅผ ์๋ฅด๋ ์
ธ ๋ฌธ๋ฒ ์ค๋ฅ๋ก ์ฃฝ๋๋ค(๊ทธ๊ฒ
์์ ์ฅ์น๋ค). ์คํํ ์ง ๋ง์ง๋ ํ๋จํ์ง ๋ง๋ผ โ ๋์์ธ ๊ฐ์ด๋๊ฐ ์ด๋ฏธ ๋ค์ด๊ฐ ์์ผ๋ฉด fence๊ฐ
์ค์ค๋ก ์์(์ด๋ฏธ ์์)์ ์ฐ๊ณ ์๋ฌด๊ฒ๋ ํ์ง ์๋๋ค.
fence๋ ๋ ์ค์ ์ฐ๋๋ค. ์ฒซ ์ค์ด ํ์ ํ์ , ๋์งธ ์ค์ด ๋์์ธ ๊ฐ์ด๋ ํ์ ์ด๋ค.
ํ์์ ์ธ ๊ฐ์ง๋ฅผ ๋ณธ๋ค: apps-in-toss.config.ts ์กด์ฌ, dependencies์
@apps-in-toss/web-framework, scripts.build์ ait build. ์๋ค ๋์ ait init์ด
๋ง๋ค๊ณ (create-ait-app 0.2.3 dist์๋ ์ด ์ค์ ํ์ผ๋ build ์คํฌ๋ฆฝํธ๋ ์ฐ๋ ์ฝ๋๊ฐ
์๋ค) ๊ฐ์ด๋ฐ ํ๋๋ง create-ait-app์ด ์ง์ ์ด๋ค โ ์ด ๋ถ๋ถ์ด "CLI๊ฐ ์๊ธฐ ๋ชซ๊ณผ
ait init ๋ชซ์ ๋ ๋ค ๋๋๋๊ฐ"๋ฅผ ํ์ ํ๋ค. ๋์์ธ ๊ฐ์ด๋ ํ์ ์ ์ด ๊ฐ๋์ ๋ณ๊ฐ๋ผ
๋ฐ๋ก ์๋ "ํ๋๋ผ๋ ์คํจํ๋ฉด ์ค๋จ"์ ๋์์ด ์๋๋ค(fail-soft). ํ์ ๋ถ์ผ์น๋ก
์ค๋จํ ๋ ๋์์ธ ๊ฐ์ด๋ ์ค์ ์ค๋จ ๋ณด๊ณ ์ ์์ง ๋ง๋ผ โ ๊ทธ ์ค์ Step 6์ ์๋ฃ ๋ธ๋ก์์๋ง
์ด๋ค.
-
ํต๊ณผํด๋ ์์ง Step 4๋ก ๊ฐ์ง ์๋๋ค โ ๋ฐ๋ก ์๋ wf major ํ์ธ โ ait bin
ํ์ธ ๋ ์๋ธ์ฒดํฌ๊น์ง ์ด์ด์ ํ๊ณ , ์
์ ๋ค ํต๊ณผํ ๋ค์ Step 4๋ก ๊ฐ๋ค.
-
ํ๋๋ผ๋ ์คํจํ๋ฉด Step 4ยท5๋ฅผ ์งํํ์ง ์๊ณ ์ฆ์ ์ค๋จํ๋ค. ยง2-1 2๋ฒ์
ait init ์ฌ์คํ์ ์์ง ์ ํ๋ค๋ฉด ๊ทธ๊ฒ๋ง ๋จผ์ ์๋ํ๊ณ , ๊ทธ๋ฌ๊ณ ๋ ์คํจํ๋ฉด
์ฌ์ฉ์์๊ฒ ํ ๋ธ๋ก์ผ๋ก ๋ณด๊ณ ํ๊ณ ๋ฉ์ถ๋ค:
scaffold ์ฐ์ถ๋ฌผ์ด ์์ํ ํ์(apps-in-toss.config.ts + package.json์
@apps-in-toss/web-framework ์์กด์ฑ + ait build๋ฅผ ํฌํจํ build ์คํฌ๋ฆฝํธ)๊ณผ
๋ค๋ฆ
๋๋ค โ create-ait-app์ด ์ ๋ฒ์ ์์ ์ฐ์ถ๋ฌผ ํ์์ ๋ฐ๊พผ ๊ฒ์ผ๋ก ๋ณด์
๋๋ค.
์ดํ ํ์ฒ๋ฆฌ๋ฅผ ์งํํ์ง ์๊ณ ์ฌ๊ธฐ์ ์ค๋จํฉ๋๋ค.
์ค์น๋ @apps-in-toss/web-framework์ major๋ ํจ๊ป ํ์ธํ๋ค โ ํ์ ํ์ผ
์ฒดํฌ๋ง์ผ๋ก๋ ๋ถ์กฑํ๋ค. ํ์ฌ create-ait-app์ wf๋ฅผ ์ ํ ๋ฒ์ (3.1.1)์ผ๋ก ๋ฐ์ง๋ง,
create-ait-app@latest๊ฐ ๊ตฌ๋ฒ์ ์ผ๋ก ํด์๋๋ ํ๊ฒฝ(ํ๋ก์๊ฐ ์ต์ ์ ์จ๊ธฐ๋ ๊ฒฝ์ฐ)์ด๋
"latest" ๋ฆฌํฐ๋ด์ ์ฐ๋ ์ข
์ CLI๊ฐ ๋ด๋ ค์จ ๊ฒฝ์ฐ์๋ 2.x๊ฐ ์กฐ์ฉํ ๋ค์ด์ฌ ์ ์๋ค(npm์
latest dist-tag๊ฐ 3.x ์ถ์ ์ดํ์๋ ํ๋์ 2.10.8์ ๊ฐ๋ฆฌํจ ์ด๊ธ๋จ โ harness#90
ํญ๋ชฉ1, 2026-08-07 ์ค์ธก). ์๋ ait bin ํ์ธ์ ์ด๊ฑธ ๋ชป ์ก๋๋ค(2.10.8๋ ait bin์
์ค๋ค):
node -p "require('./<package_name>/node_modules/@apps-in-toss/web-framework/package.json').version"
(npm์ flat node_modules๋ฅผ ์ ์ ํ ๊ฒฝ๋ก๋ค โ ๋ชจ๋
ธ๋ ํฌ ๋ฑ ํ์์ด ๋ค๋ฅด๋ฉด ์ด ๊ฒฝ๋ก๋
๊นจ์ง๋ค. ์๋ devtools sdkVersion auto-detect์ ๊ฐ์ ๋ถ๋ฅ์ ์ ์ฝ์ด๋ค.)
major๊ฐ 3์ด ์๋๋ฉด(์: 2.10.8) ์ฌ์ฉ์ ์๋ต์ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ์ง๊ธ ๋ฐ๋ก
์๋๋ฅผ ์ง์ ์ํํ๋ค โ ์ฝ์ด์ฃผ๊ณ ๋๋ด๋ ์๋ด๋ฌธ์ด ์๋๋ผ ์คํํ๋ ๋ณต๊ตฌ ์ ์ฐจ๋ค.
./<package_name>/package.json์ Edit์ผ๋ก ์ด์ด "@apps-in-toss/web-framework"์
๊ฐ("latest" ๋ฆฌํฐ๋ด์ด๋ 2.x ์ ํ ๋ฒ์ ์ด๋ )์ "^3.0.2"๋ก ๊ณ ์น๊ณ ,
npm --prefix ./<package_name> install์ ์คํํ ๋ค, ์ major ํ์ธ ์ปค๋งจ๋๋ฅผ ๋ค์
๋๋ ค 3.์ผ๋ก ์์ํ๋์ง ๋ณธ๋ค. 3.x๊ฐ ์ฌํ์ธ๋๊ธฐ ์ ์๋ ์๋ ait bin ํ์ธ
์ดํ๋ก ๋์ด๊ฐ์ง ์๋๋ค โ ์ฌํ์ธ ์์ด ์งํํ๋ฉด ์ด ๊ฐ๋๊ฐ ์๋ ๊ฒ๊ณผ ๊ฐ๋ค.
์ธ ๋จ๊ณ๋ฅผ ๋ง์น ๋ค, ์ฌ์ฉ์์๊ฒ๋ ๊ฒฐ๊ณผ๋ง ํ ๋ธ๋ก์ผ๋ก ๋ณด๊ณ ํ๋ค:
์ค์น๋ @apps-in-toss/web-framework๊ฐ <์๋ ์ถ๋ ฅ๋ ๋ฒ์ >(2.x)์ด์์ต๋๋ค โ ์ ๋ณธ
์ฐ์ถ๋ฌผ์ 3.x์
๋๋ค(๊ตฌ๋ฒ์ create-ait-app์ด๋ registry ์๋ต ์ด๊ธ๋จ์ผ๋ก 2.x๊ฐ
๋ค์ด์ค๋ ์๋ ค์ง ์ฌ๋ก๊ฐ ์์ต๋๋ค, harness#90). package.json์ "^3.0.2"๋ก ๊ณ ์น๊ณ
์ฌ์ค์นํด 3.x ์ค์น๋ฅผ ํ์ธํ์ต๋๋ค.
์ฌ์ค์น ํ์๋ major๊ฐ 3์ด ์๋๋ฉด(์: ์ฌ์ค์น๊ฐ ์ฌ์ ํ 2.x๋ฅผ ํด์ํ๋ ๋ฑ) ๋
์ด์ ์๋ ์ฌ์๋ํ์ง ์๊ณ ์ค๋จํด, ์ฌํ์ธ ๊ฒฐ๊ณผ๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉ์์๊ฒ ๋ณด๊ณ ํ๋ค.
major ํ์ธ์ด 1์ฐจ ๊ฒ์ดํธ๋ค. ํต๊ณผํ์ผ๋ฉด ๊ฐ์ ์๋ฆฌ์์ ait bin ์กด์ฌ๋ ๋ณด์กฐ๋ก
ํ์ธํ๋ค โ ๋จ๋
์ผ๋ก๋ 2.x/3.x๋ฅผ ๊ตฌ๋ถํ์ง ๋ชปํ์ง๋ง(2.10.8๋ ait bin์ ์ ๊ณตํ๋ค
โ harness#90 ์ค์ธก, granite bin์ด wf 2.x ์ ์ฉ์ด๋ค) major ํ์ธ ์ดํ์ ์ค์น ๊ณผ์ ์
๋ค๋ฅธ ์ด์์ผ๋ก bin์ด ์ ์๊ฒผ๋์ง ์ก์์ค๋ค. ์ด๊ฒ ์์ผ๋ฉด ์ดํ npm run build/ait build๊ฐ ์กฐ์ฉํ ์คํจํ ์ฑ๋ก ํ์ฒ๋ฆฌ๊ฐ ๊ณ์๋๋ค. ์ ์น๊ฒฉ์ "ํ์ง ๋ง์์ผ
ํ ๊ฒ"์ 2.x ๊ฐ๋ฑ ๊ธ์ง์ ๋ชจ์๋์ง ์๋๋ค โ ์๋ชป ์ค์น๋ 2.x๋ฅผ ์ ๋ณธ 3.x๋ก ์ฌ๋ฆฌ๋
๊ฒ์ด๋ค:
ls ./<package_name>/node_modules/.bin/ait
์์ผ๋ฉด ์ค๋จํ๊ณ npm --prefix ./<package_name> explain @apps-in-toss/web-framework
์ถ๋ ฅ์ ์ฌ์ฉ์์๊ฒ ๋ณด๊ณ ํ๋ค. @apps-in-toss/web-framework๋ฅผ 2.x๋ก ๊ฐ๋ฑํ๋
๋ช
๋ น์ ์ด๋ค ํํ๋ก๋ ์คํํ์ง ์๋๋ค โ ์ ๋ณธ ์ฐ์ถ๋ฌผ์ 3.x์ด๊ณ , ๊ฐ๋ฑ์ ๊ทธ๊ฑธ
๋๋ ๊นจ๋จ๋ฆฐ๋ค.
๋์์ธ ๊ฐ์ด๋ ํ์ ์ฝ๊ธฐ โ ์ fence์ ๋์งธ ์ค์ด ์ ๋ณธ์ด๋ค. ์ฌ๊ธฐ์ ๋ฐ๋ก ์คํํ
๋ธ๋ก์ ์๋ค. ์ข
์ ์๋ ๊ฐ์ ๋ด์ฉ์ ๋ธ๋ก์ด ์ด ์๋ฆฌ์ ๋ฐ๋ก ์์๊ณ , ์ค์ธก์์ ๋น ์ง ๊ฒ์ด
๋ฐ๋ก ๊ทธ๊ฒ์ด๋ค โ ์ด run ์ค ์
์ด ํ์ fenceยทwf majorยทait bin์ ์ ์ ์ํํ๊ณ ๋ค
๋ฒ์งธ์ธ ๊ทธ ๋ธ๋ก๋ง ๊ฑด๋๋ฐ์๋ค. ๊ทธ๋์ ๋ธ๋ก์ ํ์ fence์ ํฉ์ณ Step 3์ ๋จ๋ ์
ธ ํธ์ถ์
ํ๋๋ก ์ค์๋ค.
๊ทธ ํ ์ค์ด ํ์งยท์คํฌ๋ฆฝํธ ๊ฒฝ๋ก ํ์ยทํธ์ถยท์ฌ์๋ยท์์ฐ ํด๋ฐฑยท์ต์ข
ํ์ ์ ๊ฒฐ๊ณผ๋ฅผ ์ ๋ถ
๋ด๋๋ค. ํ์ ๊ณผ ๋ณด์์ ์ฌ๋ฌ ํด์ ๊ฑธ์ณ ์กฐ์จํ๊ฒ ํ๋ฉด ํ๋ฅ ์ ์ผ๋ก ๋๋ฝ๋๋ค โ ์์ฐ ํด๋ฐฑ์ด
5-B์ ์๋ ์์ ์ ๋ค์ฏ run ์ค ๋์ด ์์ฐ์ด ๋ฉ์ฉกํ ์๋๋ฐ๋ ํด๋ฐฑ์ ์๋ํ์ง ์๊ณ ์คํจ๋ก
๋ซ์๊ณ , ํด๋ฐฑ์ ๋ธ๋ก ์์ผ๋ก ๋ค์ธ ๋ค์๋ ๋ธ๋ก ์์ฒด๊ฐ ์ด run ์ค ์
์์ ์คํ๋์ง ์์๋ค.
๊ณ ์น ์ด๋๊ณผ ์ค์ ๋ก ๋จ์ ์๋ ์ด๋์ด ๋ฌ๋๋ ๊ฒ์ด๋ผ, ์ด๋ฒ์๋ ์ด๋์ด ์๋๋ผ fence ์๋ฅผ
์ค์๋ค.
์ด fence๋ ์ด๋ค ๊ฒฝ๋ก๋ก๋ ๋์์ธ ๊ฐ์ด๋๋ก ์์ํ๋ ์ค์ ์ ํํ ํ๋ ์ฐ๋๋ค. ๊ทธ
์ค์ด ์ ๋ณด์ด๋ฉด fence๊ฐ ์คํ๋์ง ์์ ๊ฒ์ด๋ ํต์งธ๋ก ๋ค์ ์คํํ๋ค. ๊ดํธ ์์ด ์์ธ์
ํจ๊ป ์๋ ค์ค๋ค โ ์คํฌ๋ฆฝํธ=<๊ฒฝ๋ก>๋ ์คํฌ๋ฆฝํธ๋ฅผ ์ฐพ์ ๋๋ ธ๋ค๋ ๋ป์ด๊ณ
์คํฌ๋ฆฝํธ=๋ชป์ฐพ์์ ๋ค์ฏ ํ๋ณด ์ด๋์๋ ์์๋ค๋ ๋ป์ด๋ค.
๋์์ธ ๊ฐ์ด๋ ์์(์ด๋ฏธ ์์ | ์คํฌ๋ฆฝํธ๋ก ๋ณด์๋จ โ โฆ | ์์ฐ ํด๋ฐฑ์ผ๋ก ๋ณด์๋จ โ โฆ)
โ ๋ซํ โ ๋ก ์งํํ๋ค.
๋์์ธ ๊ฐ์ด๋ ์์(--no-design-guide โ ๋ซํ โก) โ ๋ซํ โก. ์๋ฃ ๋ธ๋ก์์ ๊ฐ์ด๋
์ค ์์ฒด๋ฅผ ์ธ์ํ์ง ์๋๋ค.
๋์์ธ ๊ฐ์ด๋ ์ฃผ์
์คํจ(โฆ) โ ๋ซํ โข. ๋์งธ ์ค์ด ์๋ฃ ๋ธ๋ก์ ๊ทธ๋๋ก ๋ฃ์
๋ฌธ์ฅ์ด๋ค โ ๊ทธ๋ ์๋ก ์ง์ง ๋ง๊ณ ๊ทธ ์ค์ ์ฎ๊ธด๋ค. ๋ ๋ฐ๋ณตํ์ง ๋ง๊ณ , ์์ผ๋ก ํ์ผ์
๋ง๋ค์ง ๋ง๋ผ.
๋์์ธ ๊ฐ์ด๋ ์ฃผ์
๋ณด๋ฅ(ํ๋ก์ ํธ ๊ฒฝ๋ก ์๋=โฆ) โ ๋ซํ์ด ์๋๋ค. ์๋ฌด๊ฒ๋ ์ฐ์ง
์๊ณ ๋ฉ์ถ ๊ฒ์ด๋ ๊ฒฝ๋ก ์นํ์ ๊ณ ์ณ fence๋ฅผ ๋ค์ ์คํํ๋ค.
์์์ ์บ๋ฆฌ์ด ๋ง์ปค์ ์ฐ์ถ๋ฌผ์ด ์ ๋ถ ์๋ฆฌ์ ์์ ๋๋ง ์ฐํ๋ค โ AGENTS.md์
CLAUDE.md์ ๋ง์ปค, docs/design-guide.md, ๊ทธ๋ฆฌ๊ณ ๋น-TDS๋ฉด tokens.cssยทbase.cssยท
ํ๋ก์ ํธ ๊ณ์ด์ ๋ง๋ ์์ด์ฝ(React๋ฉด icons.tsx, vanilla๋ฉด svg)ยทentry ๋ฐฐ์ ๊น์ง ์ค์ฌ๋ฅผ
๋ณธ๋ค. ์ ๋ณธ ์คํฌ๋ฆฝํธ๋ ๊ฐ๋ณ ํญ๋ชฉ์ด ์คํจํด๋ ๋ง์ปค๋ฅผ ๋ถ์ด๋ฏ๋ก ๋ง์ปค๋ง์ผ๋ก๋ ์ฑ๊ณต์ด
์๋๊ณ , fence๊ฐ ๊ทธ๊ฑธ ์๊ณ ์ฐ์ถ๋ฌผ ์ค์ฌ๋ก ๋ค์ ํ์ ํ๋ค. ํ์ผ ๋ช ๊ฐ๋ง ๋ค์ด๊ฐ๋๋ฐ ์ฑ๊ณต์ผ๋ก
๋ณด๊ณ ๋๋ ๊ฒฝ๋ก๋ ์๊ณ , ๊ทธ๋ ๊ฒ ๊ฑธ๋ฆฐ ํ์์ ๊ทธ ์๋ฆฌ์์ ํด๋ฐฑ์ด ์ฑ์ ๋ณต๊ตฌํ๋ค โ entry
๋ฐฐ์ ๋ง ๋น ์ง ํ๋ก์ ํธ์ fence๋ฅผ ๋ค์ ๋๋ฆฌ๋ฉด ๋ฐฐ์ ์ด ๋ถ๋๋ค. ์คํจ๋ ํ๋ก์ ํธ ์ .ait-design-guide-failed ํ์
ํ์ผ๋ก๋ ๋จ์, ์๋ฃ ๋ธ๋ก ์ง์ Step 5์ .gitignore fence๊ฐ ๊ฐ์ ๋ฌธ์ฅ์ ํ ๋ฒ ๋
์ฐ๋๋ค.
ํด๋ฐฑ์ด ์ฐ๋ฌธ ์ ์ฐจ๊ฐ ์๋๋ผ ์ด fence ์์ ์๋ ์ด์ โ ํ๋ก์ ํธ๋ก ์ฎ๊ฒจ์ง๋ ๋ด์ฉ์
cp/cat์ด ์๋ณธ ๋ฐ์ดํธ๋ฅผ ๊ทธ๋๋ก ๋๊ธด ๊ฒ์ด๋ค. ์๋ณธ์ ์ด์ด ์ฎ๊ฒจ ์ ๋ ์ ์ฐจ๋ฅผ ์ฐ๋ฌธ์ผ๋ก
๋งก๊ธฐ๋ฉด ํ๋ฅ ์ ์ผ๋ก ์ด๊ธ๋๋ค(์ค์ธก: ์คํฌ๋ฆฝํธ ํ์ผ๋ง ์ง์ฐ๊ณ design/assets/project/๋
๋ฉ์ฉกํ ๋จ๊ฒจ ๋ ์กฐ๊ฑด์์ ์๋ ํด๋ฐฑ์ ์๋ํ ๋ run์ด ๋ ๋ค ์๋ณธ์ ํ ๋ฒ๋ Readํ์ง
์๊ณ ์ง์ด๋๋ค. ํ run์ find โฆ -name "tokens.ts"๋ก ํ์ฅ์๋ฅผ ์๋ชป ์ง์ด ๋น์์ด ๋์
๊ทธ๋๋ก ์ฐฝ์ํด ํ์ผ๋ช
ยทTossface CDN URLยทํ๋ ํธ๊ฐ ์ ๋ถ ์๋ณธ๊ณผ ๋ฌ๋๋๋ฐ ์๋ฃ ๋ณด๊ณ ์๋ ๊ทธ
์ฐฝ์ ํ๋ ํธ๋ฅผ "ํ ์ค ๊ณต์ ์์"์ด๋ผ๊ณ ์ ์๊ณ , ๋ค๋ฅธ run์ ๊ฒ์ ์๋ ์์ฒด ์์ด ๋ฐ๋ก
mkdir+Write๋ก ์ง์ด๋ด --space-1~--space-6์ด ํต์งธ๋ก ๋น ์ก๋ค).
์ด๋ ์คํจ๋ ๋์ฒด๋ฌผ์ ์ง์ด๋ด์ง ๋ง๋ผ. ํ ํฐ ๊ฐยทํ๋ ๊ท์นยท์์ด์ฝยท๋ค์ด์ ์คํธ ๋ณธ๋ฌธ์
์ ๋ณธ์ design skill์ assets/project/ ํ์ผ์ด๊ณ , ๊ทธ ๋ฐ์ดํธ๋ฅผ ์ฎ๊ธฐ์ง ๋ชปํ์ผ๋ฉด ์ฃผ์
์
์คํจํ ๊ฒ์ด๋ค โ ๊ทธ๋ด๋ฏํ ํ๋ ํธ๋ ๊ท์น์ ์ฐฝ์ํด ์ฑ์ฐ์ง ๋ง๊ณ ๋ซํ โข์ผ๋ก ์ ์งํ๊ฒ
๋ซ์๋ผ(์ค์ธก: ํ run์ด ์๋ณธ์ ํ ๋ฒ๋ ์ฝ์ง ์์ ์ฑ ์์ ํ๋ ํธ๋ก ํ์ผ 5์ข
์ ์ง์ด๋ด๊ณ
์๋ฃ ๋ณด๊ณ ์๋ ๋์์ธ ๊ฐ์ด๋: ํฌํจ์ผ๋ก ์ ์๋ค โ ํ์ผ์ ์์ง๋ง ํ๋ก์ ํธ๊ฐ ๋ฐ๋ฅผ ๊ธฐ์ค์
์๋ ์ํ์ด๋ฏ๋ก, ์ด๊ฒ์ ์ฑ๊ณต์ด ์๋๋ผ ์์ฅ์ด๋ค). ์ง์ด๋ธ ๋์ฒด๋ฌผ์ ์ ๊ท ์ฐ์ถ๋ฌผ์ฒ๋ผ
๋ณด๊ณ ํ๋ ๊ฒ์ ๊ธ์ง๋ค. ์ด fence ๋ฐ์์
tokens.cssยทbase.cssยทicons.tsxยท์์ด์ฝ svgยทdocs/design-guide.mdยทAGENTS.md์
ait:design-guide ๋ธ๋ก์ ์์ผ๋ก Writeํ๋ ๊ฒ๋ ๊ฐ์ ๊ธ์ง์ ๋ค์ด๊ฐ๋ค โ ์ด
์ฐ์ถ๋ฌผ๋ค์ ์ด fence์ cp/cat ๊ฒฐ๊ณผ๋ก๋ง ์กด์ฌํด์ผ ํ๋ค. fence๊ฐ ์
ธ ์ค๋ฅ๋ก ์ฃฝ์์ผ๋ฉด
๊ทธ๋๋ก ํ ๋ฒ ๋ ์คํํ๊ณ , ๊ทธ๋๋ ์ฃฝ์ผ๋ฉด ์์ผ๋ก ๋ง๋ค์ง ๋ง๊ณ ๋ซํ โข์ผ๋ก ๊ฐ๋ค โ 1ํ์
ํ์ touch๋ ์ด๋ฏธ ์คํ๋์ผ๋ฏ๋ก fence๊ฐ ํต์งธ๋ก ์ฃฝ์ด๋ Step 5๊ฐ ์คํจ ๋ฌธ์ฅ์ ์๋ฃ
๋ธ๋ก์ผ๋ก ์ค์ด ๋๋ฅธ๋ค.
์บ๋ฆฌ์ด ๋ง์ปค๋ ์ฌ๋ ์ค <!-- ait:design-guide v1 -->๊ณผ ๋ซ๋ ์ค
<!-- /ait:design-guide -->์ด๊ณ , grep ๊ฐ๋๊ฐ ๋ค ์ํฉ์ ์ ๋ถ ์ฒ๋ฆฌํ๋ค โ ํ์ผ ์์(์๋ก
์์ฑ)ยท๋ง์ปค ์์(ํ์ผ ๋์ append, ๊ธฐ์กด ๋ด์ฉ ๋ฌด์์)ยทv1(skip)ยท๋ค๋ฅธ ๋ฒ์ (skip). ์์ฝ์
v1์ด ์๋ ๋ฒ์ ์ด ์ฐํ๋ฉด(agents=skip(ait:design-guide v0)) ๋ฎ์ด์ฐ์ง ๋ง๊ณ "๊ฐ์ด๋
๋ฒ์ ์ด ๋ค๋ฆ
๋๋ค โ /ait:design์ผ๋ก ๊ฐฑ์ ํ ์ ์์ต๋๋ค"๋ง ์๋ฆฐ๋ค. AGENTS.md์
๋ค์ด๊ฐ๋ ๋ณธ๋ฌธ์ memory-digest.md ์๋ฌธ ๊ทธ๋๋ก๋ค(ํ ๊ธ์๋ ๊ณ ์ณ ์ฐ์ง ์๋๋ค).
CLAUDE.md์๋ @AGENTS.md ํ ์ค๋ง ๋ฃ๋๋ค โ ๊ฐ์ ๋ณธ๋ฌธ์ ๋ ํ์ผ์ ๋ฃ์ผ๋ฉด ์ธ์
๋ง๋ค
๋ ๋ฐฐ๋ก ์ค๋ฆฐ๋ค. entry ๋ฐฐ์ ์ฐ์ ์์๋ src/index.css ์ต์๋จ @import โ JS entry ์ฒซ
import โ index.html์ <link>์ด๊ณ , ์ฒซ ๋ฒ์งธ๋ก ํด๋น๋๋ ํ๋๋ง ์ด๋ค.
์ด ํ์ ์ Step 2๊ฐ ๋ฐฑ๊ทธ๋ผ์ด๋๋ก ๋์ด๊ฐ๋ค ๋๋ ๊ฒฝ์ฐ์๋ ๊ฑด๋๋ฐ์ง ์๋๋ค โ ์ถ๋ ฅ
์ค(5-B:)์ ๋์ณค์ด๋ ํ์ผ ์ค์ฌ๊ฐ ์ต์ข
ํ์ ์ด๋ค. ์คํฌ๋ฆฝํธ๋ ๋ฉฑ๋ฑ์ด๋ผ ์ด๋ฏธ ์ฃผ์
๋
ํ๋ก์ ํธ์ ๋ค์ ๋์๋ ์ ํญ๋ชฉ skip์ผ๋ก ๋๋ ๋ฌดํดํ๋ค.
์ด ํ์ ์ด ๋ซํ๊ธฐ ์ ์๋ Step 6์ ์๋ฃ ๋ธ๋ก์ ์ธ์ํ์ง ์๋๋ค. ๋ซํ์ ์ธ
๊ฐ์ง๋ฟ์ด๋ค: โ ์์ ํ์ธ, โก --no-design-guide์ ์๋๋ ์์, โข ์คํจ โ
โข์ ์๋ฃ ๋ณด๊ณ ์ ๋์์ธ ๊ฐ์ด๋: ์ฃผ์
์คํจ โ /ait:design์ผ๋ก ๋์ค์ ๋ฃ์ ์ ์์ต๋๋ค
์ค์ ๋ฐ๋์ ํฌํจํด์ผ ๋ซํ ๊ฒ์ด๋ค. ์คํจ ํญ๋ชฉ์ ์๋ฃ ๋ณด๊ณ ์์ ์กฐ์ฉํ ๋นผ๊ณ ์ฑ๊ณต์ฒ๋ผ
๋ณด๊ณ ํ๋ ๊ฒ๋, ์ฑ๊ณต๋ ์คํจ๋ ๋งํ์ง ์๊ณ ํญ๋ชฉ ์์ฒด๋ฅผ ํต์งธ๋ก ๋นผ๋ ๊ฒ๋ ๊ธ์ง๋ค(์ค์ธก:
ํ run์ ์๋ฃ ํ์์ ๊ทธ ํญ๋ชฉ๋ง ๋๋ฝ์์ผฐ๊ณ , ๋ค๋ฅธ run์ ํ์ ์ ์ ํํ ์ฐ๊ณ ๋ 13ํด ๋ค
์๋ฃ ๋ณด๊ณ ์์ "๋์์ธ ๊ฐ์ด๋"๋ฅผ ํ ๋ฒ๋ ์ฐ์ง ์์๋ค). ๊ทธ๋์ ์ด ๋ฌธ์ฅ์ ๊ธฐ์ต์ ๋งก๊ธฐ์ง
์๋๋ค โ ์ fence๊ฐ ์คํจ ์ ํ์ ํ์ผ์ ๋จ๊ธฐ๊ณ , Step 5์ .gitignore fence๊ฐ ์๋ฃ ๋ธ๋ก
์ง์ ์ ๊ทธ ํ์ ์ ๋ณด๊ณ ๊ฐ์ ๋ฌธ์ฅ์ ํ ๋ฒ ๋ ์ฐ๋๋ค.
4. ํ์ฒ๋ฆฌ B โ devtools ๋ฐฐ์ ํ์ธ (๋ธ๋ผ์ฐ์ dev ํ์ฑํ)
๋ฐฐ์ ์ CLI(ait init)๊ฐ ์ด๋ฏธ ํ๋ค โ ์ด ๋จ๊ณ๋ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ๊ณ , ์ ๋ผ
์์ ๋๋ง ์ง์ ๋ฐฐ์ ํ๋ค. ๋จผ์ ๋ ๊ฐ์ง๋ฅผ ๋ณธ๋ค:
node -e "const p=require('./<package_name>/package.json'); console.log('devDep:', p.devDependencies?.['@apps-in-toss/devtools'] ?? '(์์)')"
ls ./<package_name>/vite.config.*
๋ ๋ฒ์งธ๋ก ๋์จ ๊ทธ ์ค์ ํ์ผ์ Readํด @apps-in-toss/devtools/unplugin import์
plugins ๋ฐฐ์ด์ aitDevtools.vite(...) ํญ๋ชฉ์ด ์๋์ง ํ์ธํ๋ค(์ค์ธก 2026-08-07
์ฐ์ถ๋ฌผ: devDependencies์ "@apps-in-toss/devtools": "^3.0.2", vite.config.ts์
import aitDevtools from "@apps-in-toss/devtools/unplugin"; +
plugins: [aitDevtools.vite(), react()]).
- devDep๊ณผ unplugin์ด ๋ ๋ค ์์ผ๋ฉด ์ด ๋จ๊ณ๋ ๋์ด๋ค โ ์๋ฌด๊ฒ๋ ๋ฐ๊พธ์ง ์๊ณ
Step 5๋ก ๋์ด๊ฐ๋ค. CLI๊ฐ ๋ง๋ ํํ(
aitDevtools.vite() ์ธ์ ์์ ๋ฑ)๋ฅผ ์ทจํฅ์ผ๋ก
๊ณ ์ณ ์ฐ์ง ์๋๋ค.
- ํ๋๋ผ๋ ์์ผ๋ฉด ์๋ ํด๋ฐฑ์ ์์๋๋ก ์ํํ๋ค.
--no-devtools๊ฐ ์ง์ ๋์ผ๋ฉด ํ์ธ ๊ฒฐ๊ณผ์ ๋ฌด๊ดํ๊ฒ ์๋ "๋ฐฐ์ ํด์ " ์ ๋ก
๊ฐ๋ค.
4-a. ํด๋ฐฑ โ CLI๊ฐ ๋ฐฐ์ ํ์ง ์์์ ๋
inject skill์ devtools facet๊ณผ ๊ฐ์ ํจํด์ ์ด ์๋ฆฌ์์ ์ํํ๋ค (idempotent โ
์ด๋ฏธ ๋ ๋ถ๋ถ์ ๊ฑด๋๋ฆฌ์ง ์๋๋ค). ์์ธ ํจ์น ํจํด์ด ํ์ํ๋ฉด Read <์ด skill์ base
directory>/../inject/references/devtools.md.
@apps-in-toss/devtools(๊ณต๊ฐ npm ๋ฐํ๋ณธ, 2026-08-04๋ถํฐ @apps-in-toss/*)๋
peer๋ก @apps-in-toss/web-framework >=2.6.0 <3.0.0 || >=3.0.1 <4.0.0์ ์ ์ธํด
์ ํํ 3.0.0๋ง ๋ฒ์์์ ๋น ์ง๋ค. ์ค์น๋ wf๊ฐ ๊ทธ gap์ด๋ฉด unmet peer ๊ฒฝ๊ณ ๊ฐ
๋จ์ง๋ง ์ค์น ์์ฒด๋ ๋งํ์ง ์์ผ๋ ๋์ด๊ฐ๋ฉด ๋๋ค.
-
devDep์ด ์์ ๋๋ง:
npm --prefix ./<package_name> install -D @apps-in-toss/devtools
-
vite.config ํ์ผ์ ์์ ํ๋ค. ์ค์ ์กด์ฌํ๋ ํ์ผ์ ๋จผ์ ํ์ธํ๋ค:
ls ./<package_name>/vite.config.*
ํ์ฅ์๋ ํ
ํ๋ฆฟ์ TypeScript ์ฌ๋ถ๋ก ๊ฐ๋ฆฐ๋ค โ TS ๊ณ์ด(react-tsยทtsยท
--tds) โ vite.config.ts, JS ๊ณ์ด(reactยทjs) โ vite.config.js.
์กด์ฌํ์ง ์๋ ํ์ฅ์๋ก ์ ํ์ผ์ ๋ง๋ค์ง ์๋๋ค: Vite๋ .js๋ฅผ .ts๋ณด๋ค
๋จผ์ ํ์ํ๋ฏ๋ก vite.config.js๊ฐ ์๋ ํ๋ก์ ํธ์ .ts๋ฅผ ์๋ก ๋ง๋ค๋ฉด ๊ทธ
ํ์ผ์ด ์กฐ์ฉํ ๋ฌด์๋ผ ๋ฐฐ์ ์ด ์นจ๋ฌต ์คํจํ๋ค. ๋ ๋ค ์์ผ๋ฉด ์ค๋จํ๊ณ ์ฐ์ถ๋ฌผ ๋ชฉ๋ก์
๋ณด๊ณ ํ๋ค.
ํ์ธ๋ ๊ทธ ํ์ผ์:
import aitDevtools from '@apps-in-toss/devtools/unplugin';
plugins ๋ฐฐ์ด์ aitDevtools.vite({ panel: true }) ์ถ๊ฐ (๋ฐฐ์ด์ด ์์ผ๋ฉด ์์ฑ โ
vanilla js/ts ํ
ํ๋ฆฟ๋ Vite์ด๋ฏ๋ก ๋์ผํ๊ฒ ์ ์ฉ๋๋ค).
optimizeDeps.exclude์ @apps-in-toss/web-framework ๊ณ์ด ์ถ๊ฐ
(๋ด์ฅ react-vite ํ
ํ๋ฆฟ์ vite.config.ts์ ๊ฐ์ ํํ).
์ด ๋ฐฐ์ ์ด ํ๊ฒฝ 1(๋ธ๋ผ์ฐ์ + mock SDK + panel)์ ์ฌ๋ ๊ฒ์ด๋ค โ ์์ผ๋ฉด
--sample๋ก ๋ฃ์ IAP/IAA ์์ ๊ฐ ๋ธ๋ผ์ฐ์ ์์ "์๋๋ฐ์ค์ฑ/ํ ์ค์ฑ์์
์คํํด์ฃผ์ธ์" alert๋ง ๋์ด๋ค.
4-b. ๋ฐฐ์ ํด์ โ --no-devtools
--no-devtools๋ "์ค์น ์ ์ธ"๊ฐ ์๋๋ผ ๋ฐฐ์ ํด์ ๋ค โ CLI์ ๋ฐฐ์ ์ ๋๋
ํ๋๊ทธ๊ฐ ์์ด ์ฌํ์ ๋ผ์ด๋ด๋ ๊ฒ ๋ง๊ณ ๋ฐฉ๋ฒ์ด ์๋ค. ์ ํ์ธ์์ ๋ฐฐ์ ์ด ์์๋ค๋ฉด
์๋ฌด๊ฒ๋ ํ์ง ์๋๋ค.
-
devDependency ์ ๊ฑฐ:
npm --prefix ./<package_name> uninstall @apps-in-toss/devtools
-
ํ์ธ๋ vite.config ํ์ผ์์ @apps-in-toss/devtools/unplugin import ์ค๊ณผ
plugins ๋ฐฐ์ด์ aitDevtools.vite(...) ํญ๋ชฉ์ Edit์ผ๋ก ์ ๊ฑฐํ๋ค. ๋ฐฐ์ด
์์ฒด๋ ๋ค๋ฅธ ํ๋ฌ๊ทธ์ธ(react() ๋ฑ)์ ๊ทธ๋๋ก ๋๋ค.
ํด์ ํ ๊ฒฝ์ฐ Step 6 ์๋ฃ ์๋ด์์ npm run dev ์ค์ ์ค๋ช
์ ์กฐ์ ํ๊ณ
/ait:inject-devtools seam์ ์๋ฆฐ๋ค.
@apps-in-toss/devtools(3.0.2)์ mock์ wf 2.xยท3.x ๋ ํ๋ฉด์ ๋ชจ๋
์ง์ํ๋ค โ ./mock/2x(flat ํจ์ API)์ ./mock/3x(๋ค์์คํ์ด์ค API:
Clipboard.*ยทDevice.*ยทScreen.*ยทTossPay.*ยทcreateAsyncBridge ๋ฑ)๊ฐ ๋ ๋ค
๋ค์ด ์๊ณ , unplugin์ sdkVersion(๊ธฐ๋ณธ 'auto' โ ์๋น์ ํ๋ก์ ํธ์ wf major๋ฅผ
์๋ ๊ฐ์ง)์ด ํ๋๋ฅผ ๊ณ ๋ฅธ๋ค. ์ด skill์ scaffold(wf 3.x)์์๋ 3x facade๊ฐ ๊ณจ๋ผ์ ธ
๋ ํ๋ฉด ๋ค ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ค. ์ฃผ์: ๋ชจ๋
ธ๋ ํฌยทvirtual store์ฒ๋ผ
auto-detect๊ฐ ์ค์ major๋ฅผ ๋ชป ์ฝ๋ ํ๊ฒฝ์์๋
aitDevtools.vite({ sdkVersion: '3' })๋ก ๋ช
์ํด์ผ ํ๋ค โ ์๋ชป๋ ํ๋ฉด์ ๊ณ ๋ฅด๋ฉด
๊ทธ ํ๋ฉด์ ์๋ API๊ฐ ๋ธ๋ผ์ฐ์ ์์ undefined๊ฐ ๋๋ค.
5. ํ์ฒ๋ฆฌ C โ .gitignore
create-ait-app ํ
ํ๋ฆฟ์ .gitignore๋ฅผ ์ด๋ฏธ ํฌํจํ๋ค(create-vite
๊ฒฝ๋กยทTDS ๊ฒฝ๋ก ๋ชจ๋ โ TDS๋ _gitignore๋ฅผ renameํด์ ๋ง๋ ๋ค). ๋จ *.ait๋
๋น ์ ธ ์๋ค. ์์ ๋๋ง ํ ์ค์ appendํ๋ค:
{ D=0; P="./<package_name>"
if [ -f "$P/.ait-design-guide-failed" ]; then echo "์๋ฃ ๋ธ๋ก์ ๊ทธ๋๋ก ๋ฃ์ ์ค: ๋์์ธ ๊ฐ์ด๋: ์ฃผ์
์คํจ โ /ait:design์ผ๋ก ๋์ค์ ๋ฃ์ ์ ์์ต๋๋ค"
elif [ "$D" = 0 ] && ! grep -qs '<!-- ait:design-guide v' "$P/AGENTS.md"; then echo "๋์์ธ ๊ฐ์ด๋ fence ๋ฏธ์คํ โ Step 3์ fence๋ฅผ ์ง๊ธ ๊ทธ๋๋ก ์คํํ๊ณ ๊ทธ ํ์ ์ค์ ์ด๋ค"
fi; test -f "$P/.gitignore" && { grep -qx '\*\.ait' "$P/.gitignore" || printf '\n# Apps in Toss bundle artifacts\n*.ait\n.ait-design-guide-failed\n' >> "$P/.gitignore"; }; }
.gitignore์ ๋ฌด๊ดํ ์ธ๊ทธ๋จผํธ๊ฐ ์์ ํ๋ ๋ถ์ด ์๋ค โ ๋์์ธ ๊ฐ์ด๋ ์ํ์ ๋ง์ง๋ง
์ฌ์ธ์์ด์, Step 3 fence๋ฅผ ์์ ์คํํ์ง ์์ ๊ฒฝ์ฐ๋ฅผ ์ก๋ ๊ฐ์ง๊ธฐ๋ค. ์ธ ๊ฐ๋๋ก ๊ฐ๋ฆฐ๋ค:
ํ์ ํ์ผ์ด ์์ผ๋ฉด ์คํจ๋ก ๋ซํ ๊ฒ์ด๋ ์๋ฃ ๋ธ๋ก์ ๋ฃ์ ๋ฌธ์ฅ์ ํ ๋ฒ ๋ ์ฐ๊ณ , ํ์ ๋
์บ๋ฆฌ์ด ๋ง์ปค๋ ์์ผ๋ฉด fence๊ฐ ์คํ๋ ์ ์ด ์๋ค๋ ๋ป์ด๋ผ ์ง๊ธ ์คํํ๋ผ๊ณ ์ฐ๊ณ , ๊ทธ ๋ฐ์๋
์๋ฌด๊ฒ๋ ์ฐ์ง ์๋๋ค(์ฑ๊ณต=๋ซํ โ , --no-design-guide=๋ซํ โก).
์ฌ๊ธฐ์ ์ฌํ์ ์ ํ์ง ์๋๋ค โ ํ์ ๊ถํ์ Step 3์ fence ํ๋์ ์๋ค. ํ์ ๊ฒ์ฌ๊ฐ
1์์์ธ ๊ฒ์ด ๊ทธ ๋ณด์ฅ์ด๋ค: ๋ง์ปค ๊ฒ์ฌ๋ ํ์ ์ด ์์ ๋๋ง ๋ฐํํ๋ฏ๋ก ์คํจ๋ฅผ ์ฑ๊ณต์ผ๋ก
๋ฎ์ ์ ์๋ค. ๋ง์ปค๋ง ๋ณด๋ ๊ฒ์ฌ๋ฅผ ํ์ ์ผ๋ก ์น๊ฒฉ์ํค๋ฉด ์ ๋๋ ์ด์ ๋ ๊ทธ๋๋ก๋ค โ fence๋
๋ง์ปค์ ๋ํด ์ฐ์ถ๋ฌผ ์ค์ฌ๊น์ง ๋ณด๋๋ฐ ์ด ์๋ฆฌ๋ --tds ์ฌ๋ถ๋ฅผ ๋ชฐ๋ผ ๊ฐ์ ํ์ ์ ์ฌํํ ์
์๋ค. ์ข
์ ์๋ ํ์ ํ์ผ์ ๋ถ์ฌ๊ฐ ์ฑ๊ณต๊ณผ ๋ฏธ์คํ ๋ ๋ค๋ฅผ ๋ปํด ๋ฏธ์คํ์ด ์กฐ์ฉํ ํต๊ณผํ๋ค
(์ค์ธก: ํ run์ โ
๋์์ธ ๊ฐ์ด๋ ์ํ ์ ์์, ๋ค๋ฅธ run์ ๊ฒฝ๋ก๋ฅผ ์๋ชป ์ง์ ์๊ธฐ ์
๊ฒ์ฌ๋ฅผ ์ง์ด๋ด ์๋ฌด ์ถ๋ ฅ๋ ์ ๋์จ ๊ฒ์ ์ ์์ผ๋ก ์ฝ์๋ค โ ๋ ๋ค ์๋ฃ ๋ณด๊ณ ์ ๋์์ธ
๊ฐ์ด๋ ์ค์ด ์์ ์์๋ค). ํ์ ํ์ผ ์ด๋ฆ์ .gitignore์ ํจ๊ป ๋ฃ๋ ๊ฒ์ ์คํจํ
ํ๋ก์ ํธ์ ์ํ ํ์ผ์ด ์ปค๋ฐ๋์ง ์๊ฒ ํ๋ ค๋ ๊ฒ์ด๋ค. ์ด fence๋ ์๋ฃ ๋ธ๋ก
์ง์ ์ ๋ง์ง๋ง ํ์ ์
ธ ํธ์ถ์ด๋ผ, Step 6์ ์ด๋ช ํด ์ ํ์ ์ ๋์ง์ง ์๊ณ ๋ฐฉ๊ธ ๋์จ ์ด
์ถ๋ ฅ๋ง ๋ณด๋ฉด ๋๋ค. ์ธ๊ทธ๋จผํธ๋ฅผ ๋นผ๊ณ .gitignore ๋ถ๋ถ๋ง ์ถ๋ ค ์คํํ์ง ๋ง๋ผ(์ค์ธก ์ ๋ก:
์์ฒด ์กฐ๋ฆฝํ run์ด ํ์ fence ๋์ ์ธ๊ทธ๋จผํธ๋ง ๋นผ๋จน์๋ค).
(test -f ๊ฐ๋๊ฐ ๋ฐ๋์ ์์ ์์ด์ผ ํ๋ค โ ์์ผ๋ฉด grep -qx ... "$P/.gitignore"๊ฐ
ํ์ผ ๋ถ์ฌ๋ก ์คํจํ์ ๋ ||๊ฐ printf ... >>๋ฅผ ๊ทธ๋๋ก ์คํํด *.ait ๋ ์ค์ง๋ฆฌ ๋ถ์์ ํ
.gitignore๋ฅผ ์๋ก ๋ง๋ค์ด ๋ฒ๋ฆฐ๋ค(์ค์ธก ํ์ธ) โ ์๋ ๋ฌธ๋จ์ด ๋งํ๋ "์์ผ๋ฉด ๋ง๋ค์ง ์๊ณ
์ค๋จ"์ด ๋ช
๋ น ๋ ๋ฒจ์์ ๋ฌด๋ ฅํ๋๋ค.)
.gitignore ์์ฒด๊ฐ ์์ผ๋ฉด(์์ ๋ฐ ํ์) ์๋ก ๋ง๋ค์ง ์๊ณ ์ค๋จํด ํ์ฒ๋ฆฌ
0(ํ์ ๊ฐ๋)๋ก ๋๋์๊ฐ๋ค โ create-vite ๊ธฐ๋ฐ ์ฐ์ถ๋ฌผ์ด๋ผ๋ฉด ์์ ์ ์๋
ํ์ผ์ด๋ผ, ์๋ค๋ ๊ฑด ํ์ ๊ฐ์ ์ด ๋ค์ ํ๋ ธ๋ค๋ ์ ํธ๋ค.
(git init ์์ฒด๋ ํ์ง ์๋๋ค โ ์ฌ์ฉ์ ๊ฒฐ์ . Out of scope ์ฐธ์กฐ.)
5-B. ํ์ฒ๋ฆฌ D โ ๋์์ธ ๊ฐ์ด๋ ์ฃผ์
๊ฐ ๋ง๋ ํ๋ก์ ํธ์ ๋์์ธ ๊ฐ์ด๋๋ฅผ ์ฌ๋๋ค โ src/styles/์ ํ ํฐยท๊ธฐ๋ณธ CSS,
์์ด์ฝ 6์ข
, docs/design-guide.md, ๊ทธ๋ฆฌ๊ณ ์์ด์ ํธ ๋ฉ๋ชจ๋ฆฌ๋ก ์ฝํ๋ ์บ๋ฆฌ์ด ๋ฌธ์
(๋ณธ๋ฌธ ์ ๋ณธ AGENTS.md + ๊ทธ๊ฒ์ ๊ฐ๋ฆฌํค๋ CLAUDE.md ํ ์ค)๋ค. ๊ทธ๋์ผ ์ด
ํ๋ก์ ํธ์์ ๋์ค์ ์ด๋ค ์ธ์
์ด ํ๋ฉด์ ๋ง๋ค์ด๋ ๊ฐ์ ๊ธฐ์ค์ ๋ฐ๋ฅธ๋ค. ์ ์ฐจ์ ์ ๋ณธ์
design skill์ references/project-guide.md๋ค.
--no-design-guide๋ฉด ์ด ๋จ๊ณ ์ ์ฒด๊ฐ ์๋ ๊ฒ์ด ๋๋ค(Step 2์์ ์ฃผ์
์ธ๊ทธ๋จผํธ๋ฅผ ๋บ๊ณ ,
Step 3์ fence๋ 1ํ D=1๋ก ๊ทธ ์ฌ์ค์ ๋ฐ์ ์์(๋ซํ โก)์ผ๋ก ๋ซ์๋ค) โ ์ฌ์ฉ์๊ฐ
๋ช
์์ ์ผ๋ก ๋บ ๊ฒ์ด๋ผ ์คํจ ๋ณด๊ณ ๋ ํ์ง ์๊ณ ๋ฐ๋ก Step 6์ผ๋ก ๊ฐ๋ค.
์คํ์ Step 2์ ๋ช
๋ น ์ฒด์ธ์์ ์ด๋ฏธ ์ผ์ด๋ฌ๋ค. ์ด ์ ์ ๊ทธ ์ถ๋ ฅ ๋์ 5-B:
์์ฝ ํ ์ค์ ํด์ํด ๋ณด๊ณ ํ๋ ๊ณณ์ด๋ค. ํ๋๊ทธ ํจ๊ณผ: --tds๋ CSSยท์์ด์ฝยทentry
๋ฐฐ์ ์ ๋นผ๊ณ ๋ค์ด์ ์คํธ์ ์์ด์ฝ: ๋ ์ค๋ง TDS ๋ฌธ๊ตฌ๋ก ๋ฐ๊พธ๋ฉฐ, --no-tossface๋
base.css์ Tossface CDN @import์ ํฐํธ ์คํ ํญ๋ชฉ๋ง ์ง์ด๋ค(.tf ํด๋์ค๋
๋จ๊ธด๋ค).
Step 2 ์ถ๋ ฅ์ 5-B: ์ค์ด ์์ด๋ ์ฌ๊ธฐ์ ์๋ก ํ ์ผ์ ์๋ค โ Step 3์ fence๊ฐ ํ์ผ
์ค์ฌ๋ก ์ด๋ฏธ ํ์ ํ๊ณ ํ์ํ๋ฉด ๋ณด์ํ๋ค. ๊ทธ fence๋ฅผ ํ ๋ฒ๋ ์คํํ์ง ์์๋ค๋ฉด ์ฌ๊ธฐ์ ์
fence๋ฅผ ๋ง๋ค์ง ๋ง๊ณ Step 3์ ๊ทธ fence๋ฅผ ๊ทธ๋๋ก ์คํํ๋ค.
์ ํญ๋ชฉ์ด test -f/grep ๋ฉฑ๋ฑ ๊ฐ๋๋ฅผ ์ธ๋ผ์ธ์ผ๋ก ๊ฐ๊ณ (์ด๋ฏธ ์์ผ๋ฉด ๊ฑด๋๋ฆฌ์ง
์๋๋ค), ๊ฐ๋ณ ์คํจ๊ฐ ๋๋จธ์ง๋ฅผ ์ฃฝ์ด์ง ์์ผ๋ฉฐ(set -e๋ฅผ ์ฐ์ง ์๋๋ค), ๋ง์ง๋ง ์ค์ด
ํญ๋ชฉ๋ณ ์ํ/์คํต์ ํ ์ค๋ก ์์ฝํ๋ค. ์ค์บํด๋๊ฐ ๋ง๋ค์ด ๋ src/index.cssยท
src/App.css๋ ๊ณ ์น์ง ์๋๋ค โ ํ์ผ์ ๋ํ ๋ฟ ๊ธฐ์กด ์คํ์ผ์ ๋์ฒดํ์ง ์๋๋ค.
์ด ๋จ๊ณ๋ scaffold๋ฅผ ์ค๋จ์ํค์ง ์๋๋ค. Step 3(ํ์ ๊ฐ๋) ์คํจ๋ ์ดํ ํ์ฒ๋ฆฌ๊ฐ
๋๊ณ ์ค ์ฐ์ถ๋ฌผ ์์ฒด๊ฐ ์๋ค๋ ๋ป์ด๋ผ ์ฆ์ ๋ฉ์ถ์ง๋ง, ๋์์ธ ๊ฐ์ด๋๋ ๋์ค์
/ait:design์ผ๋ก ๋ค์ ๋ฃ์ ์ ์๋ ๋ถ๊ฐ๋ฌผ์ด๋ค โ ์์ฝ์ FAIL์ด ์์ฌ๋ Step 6๊น์ง
๊ฐ๋ค. ๊ฒฐ๊ณผ ๋ณด๊ณ ๋ ์ฌ๊ธฐ์ ๋ฐ๋ก ๋ฌธ์ฅ์ ์ง์ง ์๋๋ค โ Step 3 fence์ ํ์ ์ค์ด ์ ๋ณธ์ด๊ณ ,
์๋ฃ ๋ธ๋ก์ ๋ฌด์์ ์ธ์ํ ์ง๋ ๊ทธ ์ ์ ๋ซํ ๊ท์น๊ณผ Step 6์ ์ธ์ ๊ท์น์ด ์ ํ๋ค. ์ด๋ฏธ
์์ด์ skip๋ ํญ๋ชฉ์ ๋์ดํ์ง ์๋๋ค.
์์ฝ์ assets=UNRESOLVED๋ FAIL์ด ์์์ด๋ ์ฌ๊ธฐ์ ํด๋ฐฑ์ ๋ค์ ๋๋ฆด ๊ฒ์ ์๋ค โ
์์ฐ ํด๋ฐฑ์ Step 3 fence ์์ ์๊ณ , ๊ทธ fence๊ฐ ์ฐ์ถ๋ฌผ ์ค์ฌ๋ก ์ต์ข
ํ์ ์ ์ด๋ฏธ ๋๋ค.
์ฌ๊ธฐ์ ์ fence๋ฅผ ๋ง๋ค ๊ฒ๋, ๋น ์ง ํ์ผ์ ์์ผ๋ก Writeํ ๊ฒ๋ ์๋ค โ ์ง์ด๋ด๊ธฐ ๊ธ์ง์
Write ๊ธ์ง, ๋ง์ปค ๊ท์ฝ, entry ์ฐ์ ์์๋ ์ ๋ถ Step 3 "๋์์ธ ๊ฐ์ด๋ ์ฃผ์
" ์ ์ ์๋ค.
6. ๋ค์ ๋จ๊ณ ์๋ด + dev ์๋ฒ ๊ธฐ๋
์์ฑ์ด ๋๋๋ฉด ํ ๋ธ๋ก์ผ๋ก ๋ง๋ฌด๋ฆฌ:
<app-name> ์์ฑ ์๋ฃ (./<package_name>/)
๋์์ธ ๊ฐ์ด๋ ํฌํจ: AGENTS.mdยทCLAUDE.md ยท docs/design-guide.md ยท src/styles/(tokens|base).css ยท src/components/icons.tsx ยท ์ด๋ชจ์ง ์์ฒด Tossface
๋ค์ ๋จ๊ณ (๋ช
๋ น์ ๋ชฐ๋ผ๋ ๋ฉ๋๋ค โ ๋ฐ์ดํ ์ ๋ฌธ์ฅ์ ๊ทธ๋๋ก ๋งํด๋ ๊ฐ์ ๋จ๊ณ๋ก ๊ฐ๋๋ค):
cd <package_name>
npm run dev # ๋ธ๋ผ์ฐ์ ์์ devtools panel๊ณผ ํจ๊ป ์คํ
# ๋ง๋ก: "๋ธ๋ผ์ฐ์ ์์ ๊ฐ๋ฐ ์๋ฒ ๋์์ค"
/ait:design # ํ๋ฉด์ ๋ง๋ค๊ฑฐ๋ ๊ณ ์นจ (๋ฐฉ๊ธ ๋ฃ์ ๋์์ธ ๊ฐ์ด๋๋ฅผ ๊ทธ๋๋ก ๋ฐ๋ฆ
๋๋ค)
# ๋ง๋ก: "ํ๋ฉด์ด ์ข ๊ตฌ๋ ค ๋ณด์ฌ. ์์๊ฒ ๊ณ ์ณ์ค."
๋ฐฐํฌ ์ค๋น๊ฐ ๋๋ฉด (๋ฒ๋ค ์ค์ ์ ํ
ํ๋ฆฟ์ ์ด๋ฏธ ํฌํจ):
/ait:design # ๋ฑ๋ก์ฉ ๋ก๊ณ ยท์ธ๋ค์ผยท์คํฌ๋ฆฐ์ท ์ฐ์ถ
# ๋ง๋ก: "๋ฑ๋ก์ฉ ๋ก๊ณ ๋ ์คํฌ๋ฆฐ์ท ๋ง๋ค์ด์ค"
npm run build # tsc -b && vite build && ait build โ ํ๋ก์ ํธ ๋๋ ํฐ๋ฆฌ ์์ <package_name>.ait ์์ฑ (package.json ์)
console MCP # miniapp_create โ bundle_upload โ bundle_upload_complete ๋ก ๋ฑ๋กยท์
๋ก๋
# (์ต์ด 1ํ /mcp ์์ apps-in-toss-console ์ธ๊ฐ ํ์)
/ait:test-on-device # ์ ๋น๋ยท์
๋ก๋ยท์ปดํ์ผ ํ์ธ์ ํ ๋ฒ์ (์ค๊ธฐ๊ธฐ ํ์ธ์ ์ ๊ท ๊ฒฝ๋ก)
# ๋ง๋ก: "๋ง๋ ๋ฏธ๋์ฑ์ ์ค์ ํ ์ค ์ฑ์์ ๋๋ ค๋ณด๊ณ ์ถ์ด"
์ฃผ์: ait build๋ฅผ ๋จ๋
์ผ๋ก ์คํํ๋ฉด dist/๊ฐ ์์ด ์คํจํฉ๋๋ค โ ํญ์ npm run build
(๋๋ vite build ์ดํ)๋ก ์คํํ์ธ์. ๋น๋๊ฐ ์ค๋ ๊ฑธ๋ ค๋ .ait๋ ์๋ฃ ํ
ํ๋ก์ ํธ ๋๋ ํฐ๋ฆฌ ๋ฐ๋ก ์๋(package.json ์)์ ์๊น๋๋ค โ ์์ ํด๋๊ฐ ์๋๋ผ
ํ๋ก์ ํธ ์์
๋๋ค. ์๋ฃ ์ ์ ์๋ค๊ณ ํ๋จํด ์ฌ๋น๋ํ์ง ๋ง์ธ์. ํ์ธ์ ํ์ฌ
์์น๋ฅผ ์ถ์ธกํ์ง ๋ง๊ณ ls ./<package_name>/*.ait ./*.ait 2>/dev/null ํ ํธ์ถ๋ก
โ ๋์ค๋ ์ชฝ์ด ์ฐ์ถ๋ฌผ์
๋๋ค.
์ฐธ๊ณ : ๋ธ๋ผ์ฐ์ mock์ web-framework 2.x(flat ํจ์)ยท3.x(๋ค์์คํ์ด์ค,
Clipboard.* ๋ฑ) ํ๋ฉด์ ๋ชจ๋ ์ง์ํ๋ฉฐ, ์ด ํ๋ก์ ํธ(wf 3.x)์์๋ ์๋
๊ฐ์ง(sdkVersion: 'auto')๋ก 3.x ํ๋ฉด์ด ์ ํ๋ฉ๋๋ค. ๋ชจ๋
ธ๋ ํฌ ๋ฑ ์๋ ๊ฐ์ง๊ฐ
์ด๊ธ๋๋ ํ๊ฒฝ์ด๋ฉด vite.config์ sdkVersion์ ๋ช
์์ ์ผ๋ก ์ง์ ํ์ธ์.
๋ฌธ์๊ฐ ํ์ํ๋ฉด docs MCP(searchDocumentation/getPage)๋ก ์กฐํํ์ธ์.
์ฒซ ์ค ๋ค์ ๋์์ธ ๊ฐ์ด๋ ํฌํจ: ์ค์ 5-B๊ฐ ์ค์ ๋ก ๋ฃ์ ๊ฒ๋ง ๋์ดํ๋ค โ
--tds๋ฉด CSSยท์์ด์ฝ์ด, --no-tossface๋ฉด ์์ฒด ํญ๋ชฉ์ด ๋น ์ง๊ณ , --no-design-guide
๋ฉด ์ค ์์ฒด๋ฅผ ์ธ์ํ์ง ์๋๋ค. 5-B ์์ฝ์์ ์คํจํ ํญ๋ชฉ๋ ๋นผ๊ณ ์ ๋๋ค. ๋จ,
๋ฐ๋ก ์ Step 5์ fence๊ฐ ์๋ฃ ๋ธ๋ก์ ๊ทธ๋๋ก ๋ฃ์ ์ค:์ ์ฐ์์ผ๋ฉด ์ด ์ค์
์๋ตํ๋ ๊ฒ ์๋๋ผ ๊ทธ ์ฝ๋ก ๋ค์ ๋ฌธ์ฅ(๋์์ธ ๊ฐ์ด๋: ์ฃผ์
์คํจ โ /ait:design์ผ๋ก ๋์ค์ ๋ฃ์ ์ ์์ต๋๋ค)์ผ๋ก ๋ฐ๊ฟ ์ธ์ํ๋ค โ ๋ซํ ๊ท์น โข์ด๋ค. ๋ช ํด ์ ํ์ ์
๊ธฐ์ตํด๋ด ๋ฌธ์ฅ์ ์๋ก ์ง์ง ๋ง๊ณ , ๋ฐฉ๊ธ ๊ทธ ์ถ๋ ฅ์ ๊ทธ๋๋ก ์ฎ๊ธด๋ค. ํญ๋ชฉ์ ์กฐ์ฉํ ๋นผ๋ฉด
์ฌ์ฉ์๋ ์ฃผ์
์ด ๋๋์ง ์ ๋๋์ง ์ ์ ์๋ค. ํ์ ์ค์ด ์ฌ๋ฌ ๋ฒ ๋์์ผ๋ฉด ๊ฐ์ฅ ๋์ค
๊ฒ์ด ์ด๊ธด๋ค โ ํ fence ์์์ ์คํฌ๋ฆฝํธ๊ฐ ์คํจํ ๋ค ์์ฐ ํด๋ฐฑ์ผ๋ก ํ๋ณตํ ๊ฒฝ์ฐ๊ฐ ์๋ค.
๋์์ธ ๊ฐ์ด๋ ์ฃผ์
๋ณด๋ฅ(โฆ)๋ ๋ซํ์ด ์๋๋ค โ ์๋ฃ ๋ธ๋ก์ ์ธ์ํ์ง ๋ง๊ณ Step 3์
๊ฒฝ๋ก ์นํ์ ๊ณ ์ณ ๊ทธ fence๋ฅผ ๋ค์ ์คํํ๋ค.
์ด๋ชจ์ง ์์ฒด(Tossface)๋ ๊ธฐ๋ณธ์ผ๋ก ๋ฐฐ์ ๋๋ค(5-B๊ฐ ๋ฃ์ src/styles/base.css
์ฒซ ์ค์ CDN @import). ๋ฒ๋ค ์ฉ๋์ ๋์ง ์์ง๋ง CDN์ ๋ฟ์ง ๋ชปํ๋ ํ๊ฒฝ์์๋
์์คํ
์ด๋ชจ์ง๋ก ์กฐ์ฉํ ํด๋ฐฑํ๋ฏ๋ก, ์๋ฃ ๋ธ๋ก ์๋์ ๋ ์ค์ ํญ์ ๋ง๋ถ์ธ๋ค:
์คํ๋ผ์ธ์์๋ ์ด๋ชจ์ง ์์ฒด๋ฅผ ํ์คํ ๋ ๋ํ๋ ค๋ฉด: /ait:inject-tossface
# ๋ง๋ก: "์ด๋ชจ์ง๋ฅผ ํ ์คํ์ด์ค ์์ฒด๋ก ๋ ๋ํ๊ณ ์ถ์ด"
--no-tossfaceยท--no-design-guideยท--tds๋ก ๋ง๋ค์ด ์์ฒด ๋ฐฐ์ ์ด ์์ผ๋ฉด ์ฒซ ์ค์
์ด๋ชจ์ง ์์ฒด๊ฐ ํ์ํ๋ฉด:์ผ๋ก ๋ฐ๊ฟ ์ธ์ํ๋ค โ ๋ฐฐ์ ์ด ์๋ ํ๋ก์ ํธ์ ์๋
ํ๋ก์ ํธ์ ๊ฐ์ ๋ฌธ์ฅ์ ์ฐ๋ฉด ์ฌ์ฉ์๊ฐ ํ์ฌ ์ํ๋ฅผ ์คํดํ๋ค.
--no-devtools๋ก ๋ง๋ค์์ผ๋ฉด ์๋ฃ ๋ธ๋ก์์ npm run dev ์ค์ ์ฃผ์์
# ๋ธ๋ผ์ฐ์ ์คํ (devtools ๋ฏธ๋ฐฐ์ โ SDK ํธ์ถ์ ์ค๊ธฐ๊ธฐ/์๋๋ฐ์ค ํ์)๋ก ๋ฐ๊พธ๊ณ ,
๊ทธ ์๋์ ๋์ค์ ๋ธ๋ผ์ฐ์ mock ๊ฐ๋ฐ์ด ํ์ํ๋ฉด: /ait:inject-devtools์ ๊ทธ
์์ฐ์ด ๋์น(๋ง๋ก: "์ด ํ๋ก์ ํธ์ ์ฑ์ธํ ์ค devtools ํจ๋์ ๋ถ์ฌ์ค") ๋ ์ค์
๋ง๋ถ์ธ๋ค.
--sample ์์ด ๋ง๋ค์์ผ๋ฉด(= ์ ๋ณธ ํธ์ถ) "๋ฐฐํฌ ์ค๋น๊ฐ ๋๋ฉด" ๋ธ๋ก ์๋์ ํ ์ค์
๋ง๋ถ์ธ๋ค:
๋์ค์ ์ธ์ฑ๊ฒฐ์ /์ธ์ฑ๊ด๊ณ ์์ ๊ฐ ํ์ํด์ง๋ฉด:
cd <package_name> && npx -y create-ait-app@latest add-sample . --inline --sample iap,iaa
(create-ait-app์ add-sample ์๋ธ์ปค๋งจ๋ โ Apps in Toss ํ๋ก์ ํธ๋ก ์ธ์๋๋
๋๋ ํฐ๋ฆฌ์์๋ง ๋์ํ๊ณ --sample์ ์๋ตํ๋ฉด interactive ํ๋กฌํํธ๋ก ๋น ์ง๋ค.
์์ธํ ์ ์ฝ์ Out of scope ์ฐธ์กฐ.)
dev ์๋ฒ ์๋ ๊ธฐ๋
์๋ด ๋ธ๋ก ์ธ์ ์งํ, ์์ด์ ํธ๊ฐ dev ์๋ฒ๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋๋ก ์ง์ ๊ธฐ๋ํ๋ค. Bash
ํธ์ถ ๊ฐ cwd๊ฐ ์ ์ง๋์ง ์์ผ๋ฏ๋ก ์ ๋ ๊ฒฝ๋ก๋ฅผ ์ด๋ค:
# <project_abs_path> = cwd(scaffold ์์ ) + "/" + package_name
npm --prefix <project_abs_path> run dev
run_in_background: true๋ก ์คํํ๋ค. dev ์คํฌ๋ฆฝํธ๋ ์์ create-vite ๊ทธ๋๋ก
vite๋ผ stdout์ ํ์ค ๋ฐฐ๋(VITE vโฆ ready + Local: http://localhost:<port>)๊ฐ
๋ฌ๋ค โ ๊ทธ ํจํด์ ํ์ฑํด URL์ ์๋ฆฐ๋ค(๊ธฐ๋ณธ ํฌํธ 5173, ํ์์ด ๋ค๋ฅด๋ฉด ํฌํธ ํด๋ฐฑ):
dev ์๋ฒ๊ฐ http://localhost:<port> ์์ ์คํ ์ค์
๋๋ค.
๋ธ๋ผ์ฐ์ ์์ ์ด ์ฃผ์๋ฅผ ์ด์ด์ฃผ์ธ์. (๋ธ๋ผ์ฐ์ ๋ ์ง์ ์ฌ์ธ์ โ ์์ด์ ํธ๋ URL๋ง ์๋ ค๋๋ฆฝ๋๋ค.)
์ด์ด์ ๋ค์ ํ ๋ธ๋ก์ ๋ง๋ถ์ธ๋ค:
์ง๊ธ ๋ง๋ค์ด์ง๋ ํ๋ฉด ๋ณด๊ธฐ:
- ๋ฐ์คํฌํ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ํญ์ ๋ฏธ๋์ฑ ๋ ์ด์์์ด ๊นจ์ ธ ๋ณด์
๋๋ค โ ๋ชจ๋ฐ์ผ ํญ์ผ๋ก
๋ด์ผ ์ ์์ ์ผ๋ก ๋ณด์
๋๋ค.
- ํ๋ฉด ํ๋จ์ AIT ๋ฒํผ์ ๋๋ฌ devtools panel์ ์ด๊ณ Viewport ํญ์์
iPhone/Galaxy ํ๋ฆฌ์
์ ๊ณ ๋ฅด๋ฉด ๋ชจ๋ฐ์ผ ํญยทorientation์ผ๋ก ๋ ๋๋ฉ๋๋ค.
- ์ค๊ธฐ๊ธฐ ๋ ๋๋ง ์ฐจ์ด๋ desktop ๋ธ๋ผ์ฐ์ ๋ก๋ ํ์ธํ ์ ์์ต๋๋ค โ ์ต์ข
ํ์ธ์ /ait:debug์ on-device ๊ฒฝ๋ก(ํ๊ฒฝ 3)๋ก ํ์ธ์.
--no-devtools๋ก ๋ง๋ค์๋ค๋ฉด AIT ๋ฒํผยทViewport ํญ์ด ์์ผ๋ฏ๋ก ๋์งธ ํญ๋ชฉ๋ง
๋ธ๋ผ์ฐ์ ์์ฒด ๊ฐ๋ฐ์ ๋๊ตฌ(Chrome ๊ธฐ๊ธฐ ํด๋ฐ/๋ฐ์ํ ๋์์ธ ๋ชจ๋)๋ก iPhone/Galaxy ํ๋ฆฌ์
์ ์ผ์ธ์๋ก ๋ฐ๊ฟ ์ธ์ํ๋ค.
(station 2(dev)๋ station map์ ์๋์ ์ผ๋ก /ait ๋ช
๋ น์ด ์๋๋ผ npm run dev
์์ ๋ช
๋ น์ด๋ค โ dev๋ ์ผํ์ฑ ์ก์
์ด ์๋๋ผ ์ฐ์ ํ๋ก์ธ์ค๋ผ ์ฌ๋์ ๋ช
๋ น์ผ๋ก
๊ฐ์ธ์ง ์๋๋ค. station 1โ2 hand-off๋ ์ด ์๋ด ๋ธ๋ก์ด npm run dev๋ฅผ ์ง์
์ธ์ํ๋ ๊ฒ์ผ๋ก ์ถฉ๋ถํ๋ค.)
Out of scope (์ด skill์ด ํ์ง ์๋ ๊ฒ)
- โ ์ฝ์ ๋ฑ๋กยท๋ฒ๋ค ์
๋ก๋ โ console MCP ๋๊ตฌ(
miniapp_create/bundle_upload/
bundle_upload_complete)์ ์ญํ . ์ธ๊ฐ๋ /mcp์์ apps-in-toss-console
1ํ ์น์ธ(๋ธ๋ผ์ฐ์ OAuth)์ผ๋ก ๋๋๋ค.
- โ ๊ธฐ์กด ํ๋ก์ ํธ์ devtools ์ฃผ์
โ
/ait:inject-devtools
(inject skill์ devtools facet).
- โ ๊ธฐ์กด ํ๋ก์ ํธ์ IAP/IAA ์ํ ์ถ๊ฐ โ create-ait-app์
add-sample
์๋ธ์ปค๋งจ๋๊ฐ brownfield๋ฅผ ์ง์ํ๋ค(npx -y create-ait-app@latest add-sample [directory] --inline --sample iap,iaa, directory ์๋ต ์ cwd .). ๋์์ด
Apps in Toss ํ๋ก์ ํธ๊ฐ ์๋๋ฉด ์ฆ์ ๊ฑฐ๋ถํ๋ค(0.2.3์ inspectSampleProject()
์ค์ธก โ ํ์ ์ dependencies/devDependencies์
@apps-in-toss/web-framework ๋๋ apps-in-toss.config.ts ์กด์ฌ, ์คํจ
๋ฉ์์ง๋ "Apps in Toss ํ๋ก์ ํธ์์๋ง ์์ ์ฝ๋๋ฅผ ์ถ๊ฐํ ์ ์์ด์."๋ค. 0.2.1์ด
์ฐ๋ package.json์ createAitApp ๋ฉํ๋ฐ์ดํฐ ๊ธฐ์ค์ ํ๊ธฐ๋๊ณ 0.2.3์ ๋จ์
์๋ ๊ฑธ ๋ฐ๊ฒฌํ๋ฉด ์คํ๋ ค ์ง์ด๋ค). --sample์ ์๋ตํ๋ฉด interactive checkbox
ํ๋กฌํํธ๋ก ๋น ์ง๋ฏ๋ก ๋น๋ํํ ํธ์ถ์๋ ํญ์ ๋ช
์ํ๋ค. ์ด skill์ greenfield
์ ์ฉ์ด๋ผ ์๋ ํธ์ถํ์ง ์๋๋ค.
- โ Workspace ๋ฑ๋ก / ๋ฉค๋ฒ ์ด๋ / billing โ ์ฝ์ UI์ ์ฑ
์.
- โ Git ์ด๊ธฐํ โ ์ฌ์ฉ์๊ฐ ๊ฒฐ์ (
.gitignore์ *.ait ํ ์ค๋ง ๋ง๋ถ์ธ๋ค โ ํ์ผ
์์ฑ์ ํ์ง ์๋๋ค. ํ
ํ๋ฆฟ์ด ์ด๋ฏธ .gitignore๋ฅผ ํฌํจํ๊ณ ์์ด์๋ค).
- โ create-ait-app ์์ฒด์ ๋ฒ๊ทธ ์์ โ upstream(toss/create-ait-app) ์ด์๋ก.
์ด skill์ ํ์ฒ๋ฆฌ๋ ๊ด์ธก๋ CLI ๋์์ ๋ํ ์ฐํ์ผ ๋ฟ, upstream์ด ๊ทธ ๋์์
๊ณ ์น๋ฉด ํด๋น ํ์ฒ๋ฆฌ๋ ์ ๊ฑฐํ๋ค.
ํ์ง ๋ง์์ผ ํ ๊ฒ
- โ ๊ธฐ์กด ๋๋ ํ ๋ฆฌ ๋ฎ์ด์ฐ๊ธฐ (
<package_name>/์ด ์ด๋ฏธ ์์ผ๋ฉด ์ฆ์ ์ค๋จ).
- โ create-ait-app์
--skip-installยท--skills ํ๋๊ทธ โ 0.2.3์ ์กด์ฌํ์ง
์๋๋ค(์ ์ ์๋ ์ต์
์ผ๋ก ์ฆ์ ์๋ฌ, ์ฐ์ถ๋ฌผ 0). install์ ๋ผ์ด๋ด๋ ์ค๊ณ๋
๋ ์ด์ ์ฑ๋ฆฝํ์ง ์๋๋ค.
- โ
--pm ์๋ต โ non-TTY์์ PM ํ๋กฌํํธ๋ก ๋ฉ์ถ ์ ์๋ค.
- โ
--cwd ํ๋๊ทธ โ ์กด์ฌํ์ง ์๋๋ค(์ ์ ์๋ ์ต์
์ผ๋ก ์๋ฌ). ํ์ฌ
๋๋ ํฐ๋ฆฌ์ ๋ง๋ค๋ ค๋ฉด positional์ .์ ์ค๋ค.
- โ
--template๊ณผ --tds ๋์ ์ง์ โ CLI๊ฐ ๊ฑฐ๋ถํ๋ค("--template๊ณผ --tds๋ ํจ๊ป ์ฌ์ฉํ ์ ์์ด์."). ๋ ์ค ํ๋๋ง ์ด๋ค.
- โ
npm ์คํจ ์ pnpm/yarn์ผ๋ก ์๋ fallback. ๋งค๋์ ์ฐจ์ด๋ ์ฌ์ฉ์๊ฐ
์์ํ๊ณ ๊ฒฐ์ ํด์ผ ํ๋ค.
- โ ์์ฑ๋ ํ๋ก์ ํธ์ ๊ณผ์ฅยทํ๋ณด์ฑ ๋ฌธ๊ตฌ ์ฝ์
. ์์ฑํ๋ README/์ฃผ์์ ๋ฐฐ์ ์
์ค๋ช
ํ๋ ์ต์ํ์ผ๋ก.
- โ
@apps-in-toss/web-framework๋ฅผ 2.x๋ก ๊ฐ๋ฑํ๋ ๋ช
๋ น โ ์ ๋ณธ 3.x ์ฐ์ถ๋ฌผ์
๊นจ๋จ๋ฆฐ๋ค(์ด๋ค ํํ๋ก๋ ๋จ๊ธฐ์ง ์๋๋ค).
- โ (
--local ๊ฒฝ๋ก) JSX/TSX ์์ ํ ํฐ์ ๋๊ฑฐ๋ ํ
ํ๋ฆฟ ์์ง ๋์
โ
references/local-template.md์ ํ ํฐ ๊ท์น ์ฐธ์กฐ.
์ฐธ๊ณ
- ์ง skill:
inject(devtools facet โ ๊ธฐ์กด ํ๋ก์ ํธ์ devtools ์ถ๊ฐ,
debug-console facet โ on-device attach ํจํค์ง ์ค์น, tossface facet โ ์ด๋ชจ์ง
์์ฒด๋ฅผ ๋ฒ๋ค ํฌํจ ๋ชจ๋๋ก ์ ํ), design(ํ๋ฉด ์์ฑยท๊ฐ์ + ๋ฑ๋ก ์ด๋ฏธ์ง ์์ฐ ์์ฑ
โ 5-B๊ฐ ๋ฃ๋ ์์ฐ๊ณผ ์ฃผ์
์ ์ฐจ์ ์ ๋ณธ assets/project/ยท
references/project-guide.md๋ฅผ ์ด skill์ด ์์ ํ๋ค).
- ๊ณต์ ์ค์บํด๋: https://github.com/toss/create-ait-app โ ๋ฒ๋ค๋ create-vite์
์์ํ๋ ํ
ํ๋ฆฟ(+
--tds ๋ณํ), IAP/IAA ์ํ, brownfield add-sample
์๋ธ์ปค๋งจ๋. ์ด skill์ ํธ์ถ ๊ท์นยทํ์ฒ๋ฆฌ ๊ทผ๊ฑฐ๋ create-ait-app@0.2.3 ์์ค
์ค์ธก์ด๋ค(2026-08-10 ๊ธฐ์ค ๊ณต๊ฐ latest) โ @latest๊ฐ ๊ทธ๋ณด๋ค ์ ๋ฒ์ ์ ๋ฐ์
์ด๊ธ๋๋ฉด CLI์ ์๋ฌยท--help๋ฅผ ์ ๋ณธ์ผ๋ก ๋ณธ๋ค.
- devtools (mock + panel + unplugin) ์์ค โ ๊ตฌ repo ์ด๋ ฅ์๋ง ์กด์ฌ(์ฌ์์ฑ์ผ๋ก ๋งํฌ ์๋ฉธ, maintainer ๋ก์ปฌ ๋ฐฑ์
mirror์์ ์ด๋ ๊ฐ๋ฅ)
- ๋ธ๋ผ์ฐ์ mock dev ํ๊ฒฝ ๋ฑ ์ฃผ์ ๋ณ ๊ฐ์ด๋๋ docs MCP(searchDocumentation/
getPage)๋ก ์กฐํํ๋ค.
--local ํด๋ฐฑ ํ
ํ๋ฆฟ ์ ์ฑ
: shared/templates/README.md (react-vite๋ wf
2.x ๊ธฐ๋ฐ ๊ตฌ์ธ๋ ์คํ๋ผ์ธ ํด๋ฐฑ์ผ๋ก ์ ์ง, ๋จ๊ณ์ ํ๊ธฐ ์์ ).