---
code: "SCH-21"
id: "c-sch-journey"
tab: "schemas"
kind: "schema"
title: "Customer Journey · 고객 여정"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "journey"
dataShape: "5-cell diagram with 좌→우+감정 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["journey", "좌→우+감정", "5cells", "Customer Journey", "UX", "페인포인트", "전환"]
gallery: "https://graph.heal7.com/#SCH-21"
js: "/sku/SCH-21.js"
---

# [SCH-21] Customer Journey · 고객 여정

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

## 언제 가져가나
단계별 고객 경험 + 감정 곡선 — 어느 단계에서 좌절하고 환희하는지 가시화.

**응용** UX 페인포인트 식별, 전환 깔때기 진단, 서비스 블루프린트.

## 데이터 모양
- family: `journey`
- dataShape: 5-cell diagram with 좌→우+감정 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: journey, 좌→우+감정, 5cells, Customer Journey, UX, 페인포인트, 전환

- schema.type: `journey`
- schema.cells: `5`
- 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 = `
    ${['인지','고려','구매','사용','옹호'].map((lab,i)=>{
      const x = 30 + i*73;
      const cs = [royal,plum,gold,teal,rose][i];
      const moods = ['🤔','🧐','😊','😍','💖'];
      return `<rect x="${x}" y="35" width="64" height="38" rx="6" fill="${fill1}" stroke="${cs}" stroke-width="1.5"/>
              <text x="${x+32}" y="58" text-anchor="middle" fill="${fg}" font-size="11" font-weight="700">${lab}</text>
              <text x="${x+32}" y="92" text-anchor="middle" font-size="20">${moods[i]}</text>`;
    }).join('')}
    ${(()=>{
      const pts = [[62,150],[135,168],[208,135],[281,108],[354,118]];
      const path = pts.map((p,i)=> (i===0?'M':'L')+p[0]+','+p[1]).join(' ');
      return `<path d="${path}" fill="none" stroke="${gold}" stroke-width="2.5"/>` +
        pts.map(p=>`<circle cx="${p[0]}" cy="${p[1]}" r="5" fill="${gold}"/>`).join('');
    })()}
    <text x="20" y="155" fill="${sub}" font-size="9">감정</text>
    <text x="20" y="115" fill="${sub}" font-size="9">↑ 긍정</text>
    <text x="20" y="180" fill="${sub}" font-size="9">↓ 부정</text>
    <text x="200" y="225" text-anchor="middle" fill="${sub}" font-size="11">5단계 + 감정 곡선 — 페인포인트 식별</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-21
- raw js: https://graph.heal7.com/sku/SCH-21.js

```js
`
    ${['인지','고려','구매','사용','옹호'].map((lab,i)=>{
      const x = 30 + i*73;
      const cs = [royal,plum,gold,teal,rose][i];
      const moods = ['🤔','🧐','😊','😍','💖'];
      return `<rect x="${x}" y="35" width="64" height="38" rx="6" fill="${fill1}" stroke="${cs}" stroke-width="1.5"/>
              <text x="${x+32}" y="58" text-anchor="middle" fill="${fg}" font-size="11" font-weight="700">${lab}</text>
              <text x="${x+32}" y="92" text-anchor="middle" font-size="20">${moods[i]}</text>`;
    }).join('')}
    ${(()=>{
      const pts = [[62,150],[135,168],[208,135],[281,108],[354,118]];
      const path = pts.map((p,i)=> (i===0?'M':'L')+p[0]+','+p[1]).join(' ');
      return `<path d="${path}" fill="none" stroke="${gold}" stroke-width="2.5"/>` +
        pts.map(p=>`<circle cx="${p[0]}" cy="${p[1]}" r="5" fill="${gold}"/>`).join('');
    })()}
    <text x="20" y="155" fill="${sub}" font-size="9">감정</text>
    <text x="20" y="115" fill="${sub}" font-size="9">↑ 긍정</text>
    <text x="20" y="180" fill="${sub}" font-size="9">↓ 부정</text>
    <text x="200" y="225" text-anchor="middle" fill="${sub}" font-size="11">5단계 + 감정 곡선 — 페인포인트 식별</text>
  `
```

## 시나리오
- UX 페인포인트 식별 — 감정 저점 단계
- 전환 깔때기 진단 — 어디서 이탈
- 서비스 블루프린트 — 프론트·백 매핑
- 채용 후보자 경험 (Candidate Journey)

## 관련 SKU
`c-sch-funnel`, `c-sch-5flow`