---
code: "SCH-14"
id: "c-sch-onion"
tab: "schemas"
kind: "schema"
title: "Onion Layers · 동심원 다층"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "layer"
dataShape: "4-cell diagram with 중심→바깥 동심 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["layer", "중심→바깥 동심", "4cells", "Onion", "Core-Augmented", "perimeter", "친밀도"]
gallery: "https://graph.heal7.com/#SCH-14"
js: "/sku/SCH-14.js"
---

# [SCH-14] Onion Layers · 동심원 다층

> AI 붙여넣기 카드. 갤러리 런타임(`main.js`)이 아니라 이 파일을 가져와라.

## 언제 가져가나
중심에서 동심원으로 확장 — 핵심 → 주변 영향권으로의 동심 계층.

**응용** Core-Augmented Product, 영향권 단계, 보안 perimeter, 친밀도 원.

## 데이터 모양
- family: `layer`
- dataShape: 4-cell diagram with 중심→바깥 동심 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: layer, 중심→바깥 동심, 4cells, Onion, Core-Augmented, perimeter, 친밀도

- schema.type: `layer`
- schema.cells: `4`
- schema.axis: `중심→바깥 동심`


## 의존
svg · load `low` · library `SVG`

## 붙여넣는 법
1. 라이브러리 없음. svg viewBox 0 0 400 240
2. 아래 body 를 svg 안에 넣는다
3. 색 변수(`${gold}` 등)는 T 토큰으로 치환한다

```js
const T = {
  "bg": "transparent",
  "fg": "#ece8f5",
  "sub": "#a59bbd",
  "grid": "rgba(255,255,255,.08)",
  "gold": "#e8c069",
  "royal": "#6b8cff",
  "rose": "#e07a9f",
  "teal": "#6dd2c4",
  "plum": "#b487e8"
};
const gold = T.gold, royal = T.royal, rose = T.rose, teal = T.teal, plum = T.plum, fg = T.fg, sub = T.sub;
const stroke = 'rgba(255,255,255,.18)';
const fill1 = 'rgba(232,192,105,.10)';
const fill2 = 'rgba(107,140,255,.10)';
const host = document.querySelector('#chart');
const body = `
    ${[
      [85, 'rgba(232,192,105,.10)', gold],
      [65, 'rgba(180,135,232,.14)', plum],
      [45, 'rgba(107,140,255,.18)', royal],
      [25, 'rgba(232,192,105,.32)', gold]
    ].map(([r,fill,strokeC])=>`<circle cx="200" cy="115" r="${r}" fill="${fill}" stroke="${strokeC}" stroke-width="1.5"/>`).join('')}
    <text x="200" y="118" text-anchor="middle" fill="${gold}" font-size="11" font-weight="700">Core</text>
    <text x="200" y="83"  text-anchor="middle" fill="${fg}"  font-size="10" font-weight="600">서비스</text>
    <text x="200" y="62"  text-anchor="middle" fill="${fg}"  font-size="10" font-weight="600">확장 기능</text>
    <text x="200" y="42"  text-anchor="middle" fill="${fg}"  font-size="10" font-weight="600">주변 생태계</text>
    <text x="200" y="225" text-anchor="middle" fill="${sub}" font-size="11">동심원 4겹 · Core → Augmented</text>
  `;
host.innerHTML = '<svg viewBox="0 0 400 240" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style="overflow:visible">' + (typeof body === 'string' ? body : '') + '</svg>';
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 3911-4470
- gallery: https://graph.heal7.com/#SCH-14
- raw js: https://graph.heal7.com/sku/SCH-14.js

```js
`
    ${[
      [85, 'rgba(232,192,105,.10)', gold],
      [65, 'rgba(180,135,232,.14)', plum],
      [45, 'rgba(107,140,255,.18)', royal],
      [25, 'rgba(232,192,105,.32)', gold]
    ].map(([r,fill,strokeC])=>`<circle cx="200" cy="115" r="${r}" fill="${fill}" stroke="${strokeC}" stroke-width="1.5"/>`).join('')}
    <text x="200" y="118" text-anchor="middle" fill="${gold}" font-size="11" font-weight="700">Core</text>
    <text x="200" y="83"  text-anchor="middle" fill="${fg}"  font-size="10" font-weight="600">서비스</text>
    <text x="200" y="62"  text-anchor="middle" fill="${fg}"  font-size="10" font-weight="600">확장 기능</text>
    <text x="200" y="42"  text-anchor="middle" fill="${fg}"  font-size="10" font-weight="600">주변 생태계</text>
    <text x="200" y="225" text-anchor="middle" fill="${sub}" font-size="11">동심원 4겹 · Core → Augmented</text>
  `
```

## 시나리오
- Core-Augmented Product — 본질 → 부가 서비스
- 보안 perimeter — Trust·DMZ·External
- 친밀도 원 — 가족·친구·지인·낯선이
- SoR/SoE — 시스템 영향권 단계

## 관련 SKU
`c-sch-pyramid`, `c-sch-hub`