그래프 쇼핑몰 INTERNAL

NTT Premium Report 기반 분류 58종 + 인터렉티브 27종(🌀) + 도식화패턴 30종(🧩) 총 115종의 시각화·프레임 카탈로그. 도식화 탭 검색·필터로 빠른 탐색 + 카드의 📖 예시 모달.
카드 = 차트 1종 · 마우스 호버/드래그로 인터랙션 확인 · 와이드 카드는 1행 전체.

Echarts 5.x · Echarts-GL · D3
노트북 1280–1440px 가로 기준

① Donut · 도넛

ECharts

두 범주의 비중을 한 눈에 — 음양·성별·이탈/잔존.

응용 → 중앙에 총합 텍스트, 그라데이션 색상 stop으로 입체감.

② Gauge · 게이지

ECharts★ NEW

단일 KPI를 다이얼로 — 적합도·달성률·균형 점수.

응용 → 격국 강도, 용신 일치율, 90일 KPI 진행률 표시.

③ Radar · 레이더

ECharts

3~8축 다변량 능력치 비교 — 오행, NTT, 환경적합도.

응용 → 평균 도형 점선 + 본인 실선 오버레이.

④ Bar · 수직 막대

ECharts

레이더의 정량 보조 — 십성, 클러스터 점수.

응용 → 본인 막대만 강조색, 임계선(평균) overlay.

⑤ H-Bar · 수평 막대

ECharts

긴 라벨에 적합 — 직무 적합도 Top N.

응용 → 그라데이션으로 등급 구간(상위 25%) 시각화.

㊸ Waffle · 와플 차트

ECharts

10×10 = 100칸 격자로 비율을 직관 표현 — 38%면 38칸이 채워짐.

응용 → 인포그래픽 비율, NPS 분포, 점유율 시각화.

⑥ Treemap · 트리맵

EChartsWIDE

직무 클러스터(부모) × 개별 직무(자식). 면적=적합도.

응용 → 산업별 채용 시장 규모, 콘텐츠 카테고리 점유율.

㊹ Histogram · 히스토그램

ECharts

연속 변수의 빈도 분포 — 평균 마커선과 함께.

응용 → 응답시간 분포, 점수 분포, 가격 분산.

㊺ Stacked 100% · 누적 비율 막대

EChartsWIDE

각 카테고리 합을 100%로 정규화 — 구성비 변화에 집중.

응용 → 분기별 채널 매출 구성, 연령대별 응답 비율.

[63] Density · 커널 밀도

ECharts

히스토그램의 부드러운 버전 — 두 분포의 봉우리·꼬리 비교.

응용 → 두 그룹 점수 분포 비교, 정규성 시각 점검.

[64] Pareto · 파레토

ECharts

막대(빈도) + 누적%(라인) — 80%가 어느 항목에서 나오는지.

응용 → 결함 원인 분석, 매출 기여도 80-20.

[65] Stacked Column · 누적 수직 막대

EChartsWIDE

절대값 기준 누적 수직 — Stacked 100%와 짝, 총량 변화도 함께 봄.

응용 → 분기별 매출 + 채널 구성, 인구 합계 + 연령대별.

[81] Marimekko · 모자이크 비율

ECharts★ NEW

컬럼 폭 = 그룹 크기, 셀 높이 = 내부 비율 — 두 차원의 비중을 면적 하나로.

응용 → 시장×세그먼트 점유율, 채널×제품 매출 매트릭스.

[82] Variwide · 가변폭 막대

ECharts★ NEW

막대 높이 = 값, 막대 폭 = 가중치(표본 수) — 두 지표를 한 면적으로.

응용 → 부서별 평균×인원, 국가별 GDP×인구.

⑨ Chord · 코드 다이어그램

ECharts★ NEW

원주에 카테고리, 호로 양방향 흐름 — 협업/거래 빈도.

응용 → 역할↔역할 협업 강도, 콘텐츠 교차 소비.

⑩ 9-Box · 매트릭스

ECharts

잠재력×성과 9칸 분류 — 본인 펄스 마커.

응용 → 학습성×실행력, 가격×품질 포지셔닝.

⑪ Sankey · 산키

EChartsWIDE

재능 → 산업 → 직무 3단 흐름. 폭=적합도.

응용 → 사용자 여정(소스→페이지→이탈), 예산 배분 흐름.

⑫ Synergy Matrix · 직무×역량 매트릭스

ECharts

HR 8직무 × 8역량 적합도 매트릭스 — 일반 히트맵·인접행렬 패턴 통합. 진한 칸 = 강한 매치.

응용 → 직무-역량 매칭, 멘토-멘티, 부서×스킬 커버리지, 단어 공출현.

㊻ Arc · 호 다이어그램

ECharts

한 축 위 노드들을 호로 연결 — 인접하지 않은 관계가 큰 호로 드러남.

응용 → 등장인물 동반 출현, 시퀀스 데이터 연관, 책 페이지 인용.

㊽ Bipartite · 양분 그래프

ECharts

두 집합 사이의 연결만 — 좌(사람) ↔ 우(역할) 매칭 시각화.

응용 → 멘토–멘티, 사용자–제품, 작가–도서 매칭.

[66] Hive Plot · 하이브 플롯

ECharts

3개 축 위에 노드 정렬 — Arc보다 정형, 유형별 연결을 한눈에.

응용 → 3-tier 아키텍처 의존, 입력→처리→출력 흐름.

[67] Dendrogram · 직교 트리

ECharts

위→아래 직교 분기 — 계층 클러스터링 결과 표현에 표준.

응용 → 사용자 군집화, 분류 체계, 종 분류.

[68] Mind Map · 마인드맵

EChartsWIDE

중심 노드에서 좌우로 확장되는 트리 — 아이디어 발산형 구조.

응용 → 브레인스토밍 결과, 학습 로드맵, 커리큘럼 설계.

[83] Edge Bundling · 곡선 묶음

ECharts★ NEW

계층 트리의 leaf 사이 연결을 곡선으로 묶음 — 시각적 잡음을 줄여 흐름이 보임.

응용 → 부서 간 협업 흐름, 모듈 의존성, 항공 노선 묶음.

[84] Galaxy Force · 다중 중심

ECharts★ NEW

3개 그룹이 각자의 중심을 형성하며 떠다니는 force — 군집 분리가 자연스럽게.

응용 → 사용자 페르소나 클러스터, 학파/진영 구분, 추천 그룹.

⑭ Line · 라인(대운)

EChartsWIDE

대운 10년 단위 흐름 + 현재 위치 ★ 마커.

응용 → 매출 분기, 사용자 LTV 곡선.

⑮ Polar Rose · 방사형

ECharts

시간대별(0–24시) 활동 강도 폴라차트.

응용 → 감정 일주기, 트래픽 시간대 분포.

⑯ Smooth Area · 강화 곡선

ECharts

90일 가이드를 1년으로 확장한 누적 영역.

응용 → 학습 누적, 코호트별 잔존 곡선 비교.

⑰ Calendar · 캘린더 히트맵

ECharts★ NEWWIDE

365일 격자에 일자별 강도 — GitHub 잔디 스타일.

응용 → 명상/일지 작성, 운세 길흉일 캘린더.

⑱ Stream · 스트림 그래프

ECharts★ NEW

시간 따른 카테고리별 비중 변화 — 부드러운 강.

응용 → 관심 키워드 변천, 매출 카테고리 점유 변화.

㊾ Step Line · 계단 라인

ECharts

변동 시점에만 값이 점프 — 상태 전이를 정확히 표현.

응용 → 가격 변경 이력, 버전 출시, 정책 시행.

㊿ Range Area · 신뢰구간 영역

EChartsWIDE

최저/최고 사이를 음영 영역으로 + 중앙값 라인 — 불확실성과 추세를 한 화면에.

응용 → 예측 신뢰구간, 일중 가격 변동 폭, 응답시간 P5–P95.

[51] Gantt · 간트 차트

EChartsWIDE

작업별 시작–종료 막대 — 일정 의존성과 병렬성이 한눈에.

응용 → 프로젝트 일정, 채용 단계, 콘텐츠 발행 캘린더.

[69] Dual Axis · 이중축

ECharts

매출(막대) + 성장률(라인) — 단위가 다른 두 지표를 한 차트에.

응용 → 가격 vs 판매량, 사용자수 vs 전환율.

[70] Sparkline Grid · 미니 라인 격자

ECharts

2×3 격자에 6개 미니 시계열 — 대시보드 헤드라인.

응용 → 핵심 KPI 6종 한눈에, 부서별 트렌드.

[71] Event Timeline · 이벤트 타임라인

EChartsWIDE

시간축 위 양쪽으로 펼쳐지는 이벤트 마커 + 카테고리별 색상.

응용 → 제품 런칭 히스토리, 인시던트 기록, 캠페인 이력.

[85] Horizon Chart · 호라이즌

ECharts★ NEWWIDE

좁은 띠 안에서 양/음을 색 레이어로 압축 — 좁은 공간에 큰 변동 폭을 담는다.

응용 → 다중 종목 가격 패널, 다중 센서 비교, 부서별 KPI 한 화면.

[86] Spiral Time · 시간 나선

ECharts★ NEW

시간을 안→밖 나선으로 감아 주기성과 누적을 동시에 — 한 바퀴 = 한 주기.

응용 → 24시간 사이클 누적, 월별/연도별 패턴, 학습 사이클.

⑲ 3D Bars · 입체 막대

ECharts-GLWIDE

8캐릭터 × 5오행 매트릭스를 3D로. 자동 회전.

응용 → 부서×분기 매출, 지역×제품 판매량 비교.

⑳ Globe · 키워드 글로브

ECharts-GL

3D 구체에 핀 배치 — 본인 키워드(황금) vs 참고.

응용 → 도시 클러스터, 글로벌 사용자 분포.

㉒ Surface3D · 3D 표면

ECharts-GL

2변수 함수 지형도 — 두 축 조합의 적합도 표면.

응용 → 시간×난이도 학습효율, 금리×기간 수익곡면.

[52] 3D Cluster · 클러스터 산점

ECharts-GL

카테고리별 색상으로 분리된 입체 군집 — 회전으로 분리도 확인.

응용 → K-means 결과, 페르소나 클러스터, 제품 군집.

[53] 3D Path · 입체 경로

ECharts-GLWIDE

시간을 따라 공간을 이동하는 헬릭스/궤적 — 동선과 흐름을 입체로.

응용 → 사용자 여정, GPS 트랙, DNA 나선.

[72] 3D Bubble · 입체 버블

ECharts-GL

크기까지 4번째 변수로 — 3축 + 크기 + 색 = 5차원 시각화.

응용 → 다변량 제품 매핑, 도시 인구·소득·면적·만족도.

[73] 3D Network · 공간 네트워크

ECharts-GL

노드(scatter3D) + 엣지(lines3D)를 입체 공간에 — 회전으로 층 분리 확인.

응용 → 분자 모형, 도시 간 항로, 신경망 구조.

[74] 3D Heatmap · 입체 히트맵

ECharts-GLWIDE

2D 히트맵을 막대 높이로 한 차원 더 — 거리감으로 강도 인식 강화.

응용 → 지역별 트래픽 강도, 시간×요일 활동 입체.

[87] 3D Contour Surface · 등고선 표면

ECharts-GL★ NEWWIDE

3D 표면 위에 등고선 색대 — 지형의 고저와 등고를 동시에 인식.

응용 → 적합도 지형(loss surface), 압력장, 지형 모델링.

[88] DNA Helix · 이중 나선

ECharts-GL★ NEW

두 가닥 나선 + 가로 연결선 — 회전하면 페어링 구조가 명확해진다.

응용 → 분자/생체 시각화, 페어링 데이터, 시간×시간 비교 입체.

㉓ Overlay Radar · 듀얼 레이더

ECharts

두 출처(NTT vs 명리) 다각형 일치/격차.

응용 → AS-IS vs TO-BE, 자기평가 vs 동료평가.

㉕ Funnel · 깔때기

ECharts

단계별 통과율 — 진로 단계, 전환 깔때기.

응용 → 가입→유료 전환, 매칭→면접→입사.

㉖ Pictorial · 캐릭터 배치

ECharts

8캐릭터 좌표 + 본인 강조 마커.

응용 → MBTI 분포, 페르소나 거리 매핑.

㉗ Box+Strip · 박스 분포 + 개별 점

ECharts

HR 부서별 평가점수 분포 — 5분위 박스 + 개별 직원 점 오버레이. 박스플롯·스트립 패턴 통합.

응용 → 부서별 연봉/평가 분포, 코호트 응답시간 SLA + 본인 위치, 시험점수 모집단.

[55] Bullet · 불릿 차트

ECharts

실제값(굵은 막대) + 목표(세로선) + 성과 구간(배경 밴드).

응용 → KPI 대시보드, 영업 목표 달성률, 단일 게이지 대체.

[56] Lollipop · 막대사탕

ECharts

가는 선 + 끝 원 — 막대보다 가벼운 시각, 정렬된 비교에 적합.

응용 → 항목별 점수, 변화량 ↑↓, 순위 시각화.

[75] Slope · 기울기 변화

ECharts

두 시점 사이 라인 — 기울기 부호로 ↑↓ 직관 인지.

응용 → Before/After 점수, 분기 간 순위 변동.

[76] Dumbbell · 덤벨 차트

ECharts

시작/끝 두 점을 선으로 연결 — 변화 폭 시각화.

응용 → 정책 전후 지표, 코호트 시작/종료 비교.

[77] Tornado · 영향 토네이도

EChartsWIDE

HR 이직률에 영향 주는 요인 8종을 중앙축 좌우(↓완화/↑가속)로 정렬 — Mirror Bar 패턴 통합.

응용 → HR 이직 영향 요인, 매출 민감도, 남/여 분포 비교, 정책 임팩트.

[90] Bump · 순위 변동

ECharts★ NEW

시점별 순위가 위/아래로 교차하는 곡선 — slope의 다중 시점 버전.

응용 → 분기별 매출 순위, 키워드 트렌드 순위, 리그 순위 변동.

㉘ Liquid Gauge · 물결 게이지

SVG+CSS🌀 LIVE

물이 차오르는 액체 게이지 — 두 겹 사인파 애니메이션.

응용 → 진행률, 만족도, 잔여 에너지·체력 표시.

㉙ Bar Race · 막대 레이스

ECharts🌀 LIVE

2초마다 갱신되는 순위 변동 막대 — 실시간 리더보드.

응용 → 분기별 매출 1위, 후보 키워드 상승률, 국가별 백신 보급.

㉚ 본인 자원 지도 · Weak Ties

ECharts🌀 DRAG

본인을 중심으로 가족·동료·멘토·친구·약한연결까지 21개 관계 노드를 force layout으로 시각화. 노드를 드래그하면 따라 움직이고, 호버 시 인접 관계가 강조됩니다.

응용 → Granovetter의 「약한 연결의 힘(weak ties)」 — 멘토로 가는 다리는 가까운 관계가 아니라 약한 연결에서 만들어집니다.

㉛ Radial Tree · 방사형 트리

ECharts🌀 EXPAND

중심에서 뻗어나가는 계층 — 노드 클릭으로 접고 펼침.

응용 → 진로 트리, 조직도, 의사결정 분기.

㉜ Lines Effect · 흐름 트레일

ECharts🌀 FLOWWIDE

원호 경로 위로 빛 꼬리(trail)가 흐르는 다중 라인 — 흐름의 방향과 강도.

응용 → 항공/물류 노선, 자금 흐름, 데이터 파이프라인 토폴로지.

㉝ Parallel · 평행 좌표

ECharts🌀 BRUSH

5축 다변량 표본을 라인으로 — 축을 드래그해 부분집합 필터링.

응용 → 스펙 비교(노트북·자동차), 후보군 다차원 스크리닝.

㉞ Pictorial Bar · 아이콘 막대

ECharts

사람 아이콘으로 채운 막대 — 정량을 직관적 픽토그램으로.

응용 → 인구·인원수 비교, 사용자 비율 인포그래픽.

㉟ Animated Bubble · 애니메이션 버블

ECharts🌀 LIVE

2초마다 위치·크기 갱신 — 시간에 따라 떠다니는 클러스터.

응용 → Gapminder 스타일 국가 지표, 시장 점유율 변화.

㊱ Polar Area · 극좌표 영역

ECharts

극좌표 위 부드러운 영역 — 회전 대칭 데이터를 입체적으로.

응용 → 풍향·풍속 장미, 방위별 노이즈, 24시간 활동 곡선.

㊲ Candlestick · 캔들스틱

EChartsWIDE

금융 차트의 표준 — OHLC 캔들 + 거래량 + 이동평균선.

응용 → 주가·코인 시세, 일일 변동성 추이, A/B 분포 일별.

㊳ Real-time Stream · 실시간 라인

ECharts🌀 LIVE

1초마다 새 값이 우측에서 들어오고 좌측에서 빠지는 슬라이딩 윈도 — 모니터링 차트의 표준.

응용 → CPU·메모리·트래픽 모니터링, 실시간 동시접속자, 센서 시계열.

㊴ Multi-Ring Gauge · 다중 링

ECharts🌀 LIVE

4개 KPI를 동심원으로 — 진행·만족·효율·신뢰. 2초마다 갱신.

응용 → 대시보드 헤드라인, OKR 4축 동시 추적.

㊵ Sunburst Drill · 줌 선버스트

ECharts🌀 CLICK

조각을 클릭하면 그 영역이 중심이 되어 확대 — 같은 차트로 여러 단계 탐색.

응용 → 메뉴/카테고리 드릴다운, 회계 계정 트리, 폴더 사이즈 분석.

㊶ Concentric Radial · 원형 누적 막대

ECharts

폴라 좌표 위 누적 가로막대 — 항목별 구성비를 둥글게.

응용 → 시간대별 작업 비중, 채널별 매출 구성, 감정 스펙트럼.

㊷ Particle Constellation · 파티클 네트워크

Canvas🌀 MOUSEWIDE

자유롭게 떠다니는 입자들이 일정 거리 안에서 서로 연결되어 별자리를 이룸. 마우스를 가까이 가져가면 입자가 끌려옵니다.

응용 → 인터랙티브 히어로 배경, 네트워크 토폴로지 살아있는 느낌, 데이터 인스피레이션 보드.

[58] Brush Scatter · 브러시 산점

ECharts🌀 SELECT

툴박스의 사각형/올가미로 점들을 드래그 선택 — 선택된 점만 강조됨.

응용 → 이상치 인스펙션, 코호트 정의, 다중 차트 linked view.

[59] Hex Bin · 6각 격자

ECharts🌀 HOVER

6각형 셀로 빈도/밀도 — 격자 정사각보다 시각적 균형이 부드러움.

응용 → 지리 격자 인구 밀도, 산점도 빈도 표현, 커버리지 맵.

[60] Network Pulse · 펄스 네트워크

ECharts🌀 RIPPLE

중요 노드에서 동심원 파장이 퍼지는 effectScatter — 영향력의 시각화.

응용 → 인플루언서 전파, 장애 영향 범위, 알림 발송 흐름.

[61] Counter Tiles · 카운터 타일

DOM🌀 COUNT

0부터 목표값까지 부드럽게 카운트업 — 대시보드 헤드라인 KPI.

응용 → 가입자 수, 매출 합계, 처리 건수 강조.

[62] Audio Wave · 사운드 웨이브

Canvas🌀 LIVEWIDE

다중 주파수 사인파가 합성되어 흐르는 살아있는 파형 — 색 그라디언트 + 트레일.

응용 → 음성 인터페이스 비주얼라이저, 라이브 스트림 인디케이터, 명상/사운드 앱.

[78] Pie Race · 비중 레이스

ECharts🌀 LIVE

2초마다 비중이 변하는 로즈 도넛 — 점유율 변동을 회전감 있게.

응용 → 시장 점유율 변화, 투표 진행 상황, 카테고리 트렌드.

[79] Liquid Multi · 다중 물병

SVG🌀 LIVE

3개 SVG 게이지 동시 — 에너지·집중·회복을 액체 레벨로.

응용 → 다축 헬스 메트릭, 자원 잔량 대시보드.

[80] Heat Pulse · 펄스 매트릭스

ECharts🌀 LIVEWIDE

시간×요일 24×7 셀이 1.5초마다 색을 바꿔 깜빡이는 라이브 매트릭스.

응용 → 실시간 트래픽 매트릭스, 서버 부하 히트맵, 채팅 활성도.

[91] Magnetic Field · 자기장

Canvas🌀 MOUSE

격자 위 화살표가 마우스 위치를 향해 자기장처럼 정렬 — 거리에 따라 강도 변화.

응용 → 인터랙티브 히어로 배경, 영향력 시각화, 추천 흐름 인스피레이션.

[92] Orbital Loader · 궤도 로더

Canvas🌀 LIVE

서로 다른 속도로 도는 다중 궤도 — 행성 시스템의 시각적 비유.

응용 → 로딩 인디케이터, 다축 진행도, 메디테이션 비주얼.

[93] Force Bubble Cloud · 충돌 버블

Canvas🌀 PHYSICS

엔터티 버블이 척력으로 자유 배치 — 마우스에 끌려와 부딪히며 모이는 인터랙티브 클라우드.

응용 → 키워드 클라우드, 직무 후보군, 팀원 아바타 그룹핑, 흥미·강점 매핑.

[94] Pulse Beat · 심박 라인

Canvas🌀 LIVEWIDE

생체 펄스 리듬을 닮은 라이브 라인 — 일정 주기마다 큰 박동이 좌→우로 흘러감.

응용 → 헬스 데이터 비주얼, 실시간 만족도/NPS, 살아있는 KPI 인디케이터.

TYPE
CELLS

[S1] 2분할 좌우 · Compare

SVG

A vs B 좌·우 비교 — 시선 흐름 왼→오른 기초 패턴.

응용 → Before/After, 현재/목표, 경쟁사 비교, 가설 검증.

[S2] 3단계 흐름 · Flow

SVG

입력→처리→출력 같은 좌→중→우 단방향 시퀀스.

응용 → 비즈니스 프로세스, 데이터 파이프라인, IPO(Input-Process-Output).

[S3] 3단 계층 · Top-Down

SVG

Vision/Strategy/Execution 같은 위→아래 단계적 구체화.

응용 → 전략 캐스케이드, OKR 정렬, 조직 위계.

[S4] 만다라트 3×3 · 9-Block

SVG

중심 핵심 + 8 보조 셀 — 오타니식 목표 분해 / 플랫폼 구조 (수요·공급·제휴·나).

응용 → 목표-수단 분해, 비즈니스 모델 캔버스, 스킬 매트릭스.

[S5] 허브-방사 · Hub Radial

SVG

중심에서 4방향(상하좌우) 발산 — 플랫폼 구조 N방향 일반화.

응용 → 플랫폼(수요-공급-제휴-채널), 핵심가치 4축, 이해관계자 맵.

[S6] 피라미드 · Pyramid

SVG

정점→기반 누적 삼각형 — 좁은 핵심에서 넓은 실행으로 확장.

응용 → Vision-Mission-Action, Maslow, 인구 피라미드, 데이터 위계.

[S7] 2×2 매트릭스 · Quadrant

SVG

두 축 교차로 4사분면 — 우선순위·포지셔닝의 가장 보편적 의사결정 프레임.

응용 → 중요도×긴급도(Eisenhower), 가치×난이도, BCG 성장점유율.

[S8] SWOT · 4-Box

SVG

강점/약점 (내부) × 기회/위협 (외부) 2×2 전략 분석.

응용 → 전략 진단, 사업계획서 기본 분석, PR 입찰 제안.

[S9] 5단계 퍼널 · Funnel

SVG

상→하 폭이 좁아지는 단계별 전환 — 마케팅·세일즈·HR 채용 깔때기.

응용 → AARRR(획득·활성·유지·수익·추천), 채용 단계, 영업 파이프라인.

[S10] PDCA 순환 · Cycle

SVG

Plan→Do→Check→Act 4단계 폐쇄 루프 — 지속 개선 기본 사이클.

응용 → PDCA 품질개선, OODA 의사결정, 애자일 sprint 회고.

[S11] 4-Block 2×2 · 사분면 분할

SVG

9-Block의 간소형 — 4 영역 분류만 필요한 단순 비교에 적합.

응용 → Stop/Start/Continue/Change 회고, 4P 마케팅, 페르소나 4그룹.

[S12] 6-Block 2×3 · 6분할 매트릭스

SVG

9-Block과 4-Block 사이의 균형 — 6개 핵심 요인을 가로 3 × 세로 2로 분해.

응용 → 5W1H, 6 Hat 사고, 가치제안 캔버스 핵심 6요소.

[S13] 5-Stage Flow · 5단계 흐름

SVG

3-Stage Flow 확장 — 입력부터 평가까지 5단계 파이프라인.

응용 → Discover-Define-Develop-Deliver-Evaluate, ML 파이프라인, 사업개발 단계.

[S14] Onion Layers · 동심원 다층

SVG

중심에서 바깥으로 동심원 4겹 — 핵심·서비스·확장·주변 동심 계층화.

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

[S15] Fishbone · 이시카와 (특성요인도)

SVG

중앙 척추(결과) ← 좌우 가지(원인 카테고리) — 근본원인 분석의 표준 도식.

응용 → 품질 결함 RCA, 장애 원인 추적, 6M(Man·Machine·Method·Material·Measurement·Mother Nature).

[S16] TOWS · 액션 매트릭스

SVG

SWOT 업그레이드 — 외부(기회·위협) × 내부(강점·약점) 교차로 4가지 실행 전략 도출.

응용 → SO(공세)·ST(차별화)·WO(보완)·WT(회피) 전략, SWOT 분석 후속 액션 플랜.

[S17] BCG · 사업 포트폴리오

SVG

시장 성장률 × 시장 점유율 4분면 — 스타·캐시카우·물음표·개 분류.

응용 → 사업 포트폴리오 진단, 투자 우선순위, 제품 라이프사이클 매핑.

[S18] Ansoff · 성장 전략

SVG

제품(기존/신규) × 시장(기존/신규) 2×2 — 4가지 성장 경로.

응용 → 시장침투·시장개발·제품개발·다각화 전략 결정, 신사업 기획서.

[S19] Porter 5 Forces · 산업 구조 분석

SVG

중앙 산업내 경쟁 + 4방향 외부 압력 — 산업 매력도와 경쟁 강도 진단.

응용 → 신규 시장 진입 평가, M&A 산업 분석, 사업계획서 외부 환경 분석.

[S20] Value Chain · 가치사슬

SVGWIDE

Porter 가치사슬 — 지원활동(상단 4) + 본원활동(하단 5) → 마진 창출.

응용 → 원가 구조 분석, 차별화 포인트 식별, 아웃소싱 의사결정.

[S21] Customer Journey · 고객 여정

SVG

인지→고려→구매→사용→옹호 5단계 + 단계별 감정 곡선.

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

[S22] Mind Map · 마인드맵 (방사형)

SVG

중심 주제 + 4 main branch + 각각 2-3 sub branch — 자유 발산 사고.

응용 → 브레인스토밍, 강의 노트, 책 요약, 프로젝트 분해.

[S23] Roadmap · 분기별 타임라인

SVGWIDE

Q1~Q4 가로축 + 다중 트랙별 마일스톤 — 일정 + 우선순위 시각화.

응용 → 제품 로드맵 PR, OKR 분기 계획, 프로젝트 마일스톤 보고.

[S24] Kanban · 칸반 보드

SVG

To Do · In Progress · Done 3 컬럼 — WIP 한도와 흐름 관리의 표준.

응용 → 애자일 sprint 보드, 개인 GTD, 영업 파이프라인 단계별.

[S25] Site IA · 사이트 정보구조

SVG

홈 → 섹션 → 페이지 트리 — 웹사이트 정보구조 가시화 표준.

응용 → 웹·앱 IA 설계, 사이트맵 기획, 검색 카테고리 트리.

[S26] User Flow · 분기 사용자 흐름

SVG

시작 → 액션 → 결정(분기 Y/N) → 종료 — 인터랙션 시나리오 흐름.

응용 → UX 시나리오, 결제 플로우, 온보딩 분기, BPMN 간소화.

[S27] Wireframe · 화면 레이아웃

SVG

Header / Sidebar / Content / Footer — 웹·앱 화면 영역 분할 기본형.

응용 → 화면 와이어프레임, UI 영역 정책, 반응형 그리드 설계.

[S28] Swimlane · 역할별 트랙

SVGWIDE

3 레인(고객·시스템·백엔드) × 4 단계 — 역할별 책임을 가로 흐름으로.

응용 → 서비스 블루프린트, BPMN 프로세스, RACI 시각화.

[S29] Layered Arch · 시스템 계층

SVG

Frontend → API → Service → DB 4계층 stack — 시스템 아키텍처 표현.

응용 → 시스템 아키텍처, MSA 계층, 의존성 매핑, 배포 다이어그램.

[S30] Decision Tree · 의사결정 트리

SVG

루트 질문 → Yes/No 분기 → 잎 결론 — 의사결정/분류 규칙의 표준 구조.

응용 → 정책 분기, 트러블슈팅 체크리스트, 자격 판정, 분류 모델 설명.