피시본 다이어그램

피시본 다이어그램이란

피시본 다이어그램(이시카와 다이어그램 또는 원인-결과 다이어그램이라고도 함)은 문제의 잠재적 원인을 "결과" — 문제 진술 — 로 끝나는 수평 척추에 매핑합니다. 각 주요 가지는 원인 카테고리를 나타내고, 하위 가지에는 기여 세부 사항이 있습니다. 카오루 이시카와는 1968년 제조업 품질 관리 도구로 이 기법을 도입했습니다. 이후 근본 원인 분석을 위한 구조적 브레인스토밍 방법으로 의료, 소프트웨어 엔지니어링, 비즈니스 운영으로 확산되었습니다. 팀은 레트로스펙티브, DMAIC 개선 단계, 사고 사후 검토에서 이를 활용하여 가장 큰 소리의 가설에 조기 고착되는 것을 방지합니다.

Schematex는 표준 6M 제조 카테고리(Man, Machine, Material, Method, Measurement, Mother Nature/Environment)와 서비스 변형(People, Process, Place, Policy, Procedures, Patron)으로 이시카와(1968) 원인-결과 관례를 따릅니다. 두 가지 작성 스타일 — 구조화 및 컴팩트 — 을 하나의 문서에서 혼합할 수 있습니다. 외부 참조: Ishikawa, K. — Guide to Quality Control (1968) · ASQ Cause-and-Effect Diagram · ISO 9001:2015 §10.2 — Corrective Action.

fishbone·§ Ishikawa 1968
↘ preview
100%
Solder Joint Defect Rate — Root Cause Analysis — Fishbone diagram Ishikawa cause-and-effect diagram. Effect: 3.2% solder joint failure rate. 6 categories. Solder Joint Defect Rate — Root Cause Analysis 3.2% solder joint failure rate Man Operator training gap Shift handover not documented Material Solder paste past shelf life PCB pad oxidation Measurement AOI false-accept rate rising Machine Reflow oven temp drift Squeegee blade worn Method Stencil aperture undersized Pick-and-place speed too high Environment Humidity spike in Q3 ESD grounding gaps
UTF-8 · LF · 19 lines · 634 chars✓ parsed·4.6 ms·7.8 KB SVG

1. 첫 번째 피시본 만들기

가장 간단한 피시본: 카테고리 세 개, 각각 원인 하나, 하나에 하위 원인이 있습니다.

fishbone·§ Ishikawa 1968
↘ preview
100%
API latency spike — Fishbone diagram Ishikawa cause-and-effect diagram. Effect: P99 > 2 s after deploy. 3 categories. API latency spike P99 > 2 s after deploy Code N+1 query in new endpoint Data Index missing on accounts table Infra DB connection pool exhausted
UTF-8 · LF · 9 lines · 273 chars✓ parsed·0.8 ms·4.2 KB SVG

네 가지 규칙이 사용의 80%를 커버합니다:

  1. fishbone으로 시작하고, 선택적으로 따옴표 제목을 붙입니다.
  2. category id "Label"로 각 가지를 선언합니다 — id는 짧은 내부 키이며, "Label"은 다이어그램에 출력됩니다.
  3. id : "원인 텍스트"를 별도 줄에 추가하여 원인을 추가합니다.
  4. 최소 2칸 들여쓰기 후 -로 시작하는 줄을 추가하여 앞선 원인 아래에 하위 원인(2차 가지)을 만듭니다.

주석은 #, //, 또는 Mermaid 스타일의 %%로 별도 줄에 시작할 수 있습니다.


2. 구성 요소

척추와 결과

effect "문제 진술"은 물고기 머리에 텍스트를 배치합니다. effect를 생략하면 파서는 다이어그램 제목으로 대체합니다.

fishbone "Title"
effect "Specific problem statement"

머리는 기본적으로 오른쪽에 위치합니다(config direction = right). config direction = left를 사용하여 반전합니다.

카테고리 (주요 뼈)

category id "Label"로 가지를 선언합니다. id는 원인을 할당하는 데 내부적으로 사용되고, 따옴표로 묶인 "Label"은 다이어그램에 나타납니다.

카테고리는 […] 안에 선택적 속성을 허용합니다:

속성효과
color: "#hex"16진수 색상 문자열가지 및 라벨 색상
side: top / side: bottomtop, bottom이 가지를 상단 또는 하단 레일에 강제 배치 (기본값: 교대)
order: N정수레일 내 위치 — 번호가 낮을수록 꼬리에 가깝게
category rework "Rework" [color: "#E53935", side: top, order: 1]

원인 (작은 뼈)

두 가지 스타일이 허용되며 하나의 다이어그램에서 혼합할 수 있습니다:

스타일 A — 구조화. 카테고리를 먼저 선언하고 id : "텍스트"로 원인을 할당합니다:

category code "Code"
category infra "Infra"
code : "N+1 query in endpoint"
code : "Missing cache layer"
infra : "Auto-scaling lag"

스타일 B — 컴팩트. 카테고리 라벨과 원인을 한 줄에, ; 또는 ,로 구분합니다:

category Code: N+1 query; Missing cache; Synchronous call
category Infra: Auto-scaling lag; CDN misconfigured

컴팩트 스타일에서 id는 라벨 텍스트에서 자동 파생됩니다(소문자, 공백 → 하이픈). 원인 텍스트는 따옴표가 선택 사항입니다.

fishbone·§ Ishikawa 1968
↘ preview
100%
Conversion rate drop — Fishbone diagram Ishikawa cause-and-effect diagram. Effect: Checkout conversion -12% MoM. 3 categories. Conversion rate drop Checkout conversion -12% MoM UX Confusing multi-step form Slow page on mobile Pricing Price-anchoring missing No annual discount shown Coupon field too prominent Trust No payment security badge
UTF-8 · LF · 10 lines · 344 chars✓ parsed·0.9 ms·5.0 KB SVG

스타일 C — Mermaid 마인드맵 약식. 최상위 독립 줄이 카테고리가 되고, 들여쓰기된 - 항목이 해당 카테고리 아래의 1단계 원인이 됩니다:

fishbone "Why is the site slow?"
effect "Page LCP > 4s"
Content
  - heavy hero image
  - too much above-the-fold text
Tech
  - JS bundle too large
  - render-blocking CSS

3. 하위 원인 (2차 가지)

1단계 원인 이후에 최소 2칸 들여쓰기로 - 줄을 추가하여 하위 원인을 연결합니다. - 대시는 구문의 일부이며, 텍스트가 그 뒤에 옵니다.

method : "Stencil aperture undersized"
  - "Tolerance spec from 2018 board revision"
  - "No re-validation after material change"
method : "Pick-and-place speed too high"
  - "Speed limit lifted during overtime run"

하위 원인은 부모 갈비뼈에서 분기하는 더 짧고 좁은 가지로 나타납니다.

fishbone·§ Ishikawa 1968
↘ preview
100%
Medication error increase — Fishbone diagram Ishikawa cause-and-effect diagram. Effect: Errors up 18% in Q3. 2 categories. Medication error increase Errors up 18% in Q3 Process CPOE alert fatigue 5-Rights verification skipped People Float staff unfamiliar with unit Handoff communication gaps
UTF-8 · LF · 12 lines · 420 chars✓ parsed·0.6 ms·4.0 KB SVG

4. 설정 옵션

config key = value 줄은 헤더 이후 어디에나 나타날 수 있습니다. 알 수 없는 키와 값은 조용히 무시됩니다.

설정 키기본값효과
directionright / left (또는 ltr / rtl)right결과 머리가 나타나는 쪽
sidesboth, top, bottomboth척추의 어느 절반에 가지를 배치할지
densitycompact, normal, spaciousnormal갈비뼈 사이 간격 — 겹침 전에 몇 개의 가지가 맞는지에 영향
slope (또는 ribslope)gentle, normal, steep, 또는 숫자(0–3)normal (0.6)갈비뼈 각도 — 완만 대 가파른 대각선
causeside (또는 cause-side)head, tail, bothhead갈비뼈의 어느 쪽에서 하위 원인이 분기할지
width정수 px자동캔버스 너비 재정의
height정수 px자동캔버스 높이 재정의
config direction = left
config density = compact
config slope = gentle
config sides = top

5. 라벨 및 주석

  • 다이어그램 제목: fishbone "Website Traffic Drop" — 첫 줄, 선택 사항.
  • 결과 라벨: effect "30% organic traffic decline" — 물고기 머리의 문제.
  • 카테고리 라벨: category id "Human-readable name" — 가지에 출력됨.
  • 원인 텍스트: 따옴표 "like this" 또는 따옴표 없음(컴팩트 스타일에서는 공백 허용).
  • 하위 원인 텍스트: 선행 - 이후, 따옴표 여부 무관.
  • 주석: #, //, 또는 %% — 줄의 시작(선택적 선행 공백 이후). 동일한 마커가 이중 따옴표 문자열 밖에서 후행 주석도 시작합니다.

6. 예약어 및 이스케이프

줄 시작에서 예약됨: fishbone(헤더), effect, category, config.

- 접두사는 들여쓰기된 줄에서 하위 원인 마커로 예약됩니다. 원인 텍스트 시작에 리터럴 하이픈-대시를 포함하려면 따옴표를 사용하십시오: code : "- old deprecated path".

구조화 스타일 원인 텍스트의 공백이 있는 문자열은 이중 따옴표로 묶어야 합니다: code : "N+1 query". 컴팩트 스타일(category Label: ...)에서는 ; 또는 , 구분자까지 텍스트가 이어지며 따옴표는 선택 사항입니다.

주석 마커(#, //, %%)는 이중 따옴표 문자열 안에 있지 않으면 주석을 시작합니다.

예약된 시퀀스컨텍스트대안
# 줄 시작주석 마커#이 내용의 일부라면 텍스트를 따옴표로 묶음
≥2칸 들여쓰기 후 - 시작하위 원인 마커따옴표 사용: - "- 대시가 있는 텍스트"
category, effect, config, fishbone줄 시작 키워드카테고리 ID로 사용 불가

7. 흔한 실수

작성 내용파서 메시지수정 방법
이전 category cause1 없이 cause1 : "text"FishboneParseError: Unknown category "cause1"원인 할당 전에 category cause1 "Label" 선언
파일 시작 부분에 - "sub-cause" (앞선 1단계 원인 없음)FishboneParseError: Sub-cause … has no preceding Level-1 causeid : "cause" 줄 바로 다음에 하위 원인 줄 배치
1칸 들여쓰기의 - "sub-cause"원인 줄로 처리됨, 하위 원인 아님최소 2칸 들여쓰기
category Code: cause one, cause two컴팩트 스타일로 파싱됨 — ,; 모두 구분자의도한 동작; 두 구분자 모두 작동
config direction = center알 수 없는 값 — 조용히 무시됨, right 유지right 또는 left 사용
config slope = 45범위 초과 (0–3 범위여야 함); 조용히 무시됨프리셋(gentle, normal, steep) 또는 0.5와 같은 값 사용
fishbone: "Title"올바르게 파싱됨 — 키워드 후 콜론은 선택 사항fishbone "Title"fishbone: "Title" 모두 작동
Mermaid 마인드맵 스타일 독립 카테고리암묵적 카테고리로 파싱됨Content 다음에 들여쓰기된 - 항목 줄이 category 없이 작동

8. 문법 (EBNF)

document       = header (blank | comment | effect | category | config | cause | sub-cause | implicit-category)*

header         = "fishbone" ":"? ( WS quoted-string )? NEWLINE
effect         = "effect" ":"? WS quoted-string NEWLINE
config         = "config" WS config-key WS "=" WS config-value NEWLINE
config-key     = "direction" | "width" | "height" | "sides"
               | "slope" | "ribslope" | "density" | "causeside" | "cause-side"
config-value   = bare-word | number | quoted-string

category       = "category" WS id WS label-or-compact ( "[" category-attrs "]" )? NEWLINE
implicit-category
               = bare-text NEWLINE                         # top-level, no ":"

label-or-compact
               = quoted-string                            # structured form: category id "Label"
               | id WS ":" WS compact-causes             # compact form: category Label: cause; cause

category-attrs = category-attr ("," category-attr)*
category-attr  = "color:" quoted-string
               | "side:" ( "top" | "bottom" )
               | "order:" integer

cause          = id WS ":" WS cause-text NEWLINE         # structured form
cause-text     = quoted-string | bare-text

sub-cause      = INDENT≥2 "-" WS cause-text NEWLINE

compact-causes = compact-cause ( (";" | ",") compact-cause )*
compact-cause  = quoted-string | bare-text

comment        = ( "#" | "//" | "%%" ) any NEWLINE
id             = [a-zA-Z] [a-zA-Z0-9_-]*
quoted-string  = '"' any-char-but-unescaped-quote* '"'

권위 있는 소스: src/diagrams/fishbone/parser.ts. 이 문서와 파서가 다를 경우 파서가 우선합니다 — 이슈를 열어주십시오.


9. 표준 준수

Schematex 피시본 다이어그램은 이시카와(1968) 원인-결과 관례를 따릅니다: 라벨이 달린 머리(결과)와 주요 인과 카테고리를 위한 대각선 갈비뼈가 있는 수평 척추, 각 갈비뼈에는 작은 뼈(개별 원인)가 있습니다. 2단계 계층 구조(카테고리 → 원인 → 하위 원인)는 Six Sigma DMAIC 및 ISO 9001 시정 조치 워크플로에서 사용하는 전통적인 "5 Why" 심층 분석 깊이와 일치합니다.

현재 구현된 항목:

  • ✅ 구조화 스타일: category id "Label" + id : "cause"
  • ✅ 컴팩트 스타일: category Label: cause; cause; cause
  • ✅ 들여쓰기된 - 접두사를 통한 하위 원인(레벨 2)
  • ✅ 카테고리별 색상 및 면 재정의
  • direction, density, slope, sides, causeside 설정
  • ✅ 선택적 명시적 width / height
  • ⏳ 레벨 3+ 하위-하위 원인(파서는 자식을 저장하지만 렌더러는 깊이 2에서 클리핑)
  • ⏳ 표준 카테고리 집합 자동 제안 (6M, 8P, 5P)
  • ⏳ 카테고리별 order 렌더링(파싱되지만 아직 레이아웃 엔진에서 적용되지 않음)

참고 문헌:


10. 관련 예제

fishbone·§ Ishikawa 1968
Fishbone diagram — Website traffic drop — Fishbone diagram Ishikawa cause-and-effect diagram. Effect: Traffic decline. 6 categories. Fishbone diagram — Website traffic drop Traffic decline Content Publishing frequency down Content too generic Keyword gaps Low-quality AI content Backlinks High-quality backlinks lost High ratio of low-quality links Referring domain growth stalled Low anchor text diversity Competition New competitors entering AI tools replacing search Weakening brand recall Competitors publishing faster Technical Core Web Vitals failing Crawl coverage drop Crawler blocked by WAF Missing structured data UX Bounce rate rising Poor mobile experience Slow above-fold load Excessive popup ads Algorithm Core Update penalty Weak E-E-A-T signals AI Overviews / SGE cutoff Search intent drift
Website traffic drop root-cause analysis
Ishikawa fishbone for a website traffic drop — six causal categories covering content, technical SEO, backlinks, UX, competition, and algorithm changes.
business & operations

11. 로드맵

계획됨 — 아직 파싱 불가. 오늘 생성된 DSL에서 사용하지 마십시오. 파서가 거부하거나 무시합니다.

  • 레벨 3 하위-하위 원인 — 세 번째 들여쓰기 계층. AST 구조는 지원하지만 렌더러는 현재 레벨 2에서 중단.
  • 카테고리별 causeside 재정의 — 전역이 아닌 개별 카테고리에 cause-side 설정.
  • 표준 카테고리 자동 제안 — 표준 제조 또는 서비스 카테고리 이름을 미리 채우는 template: 6M / template: 8P 약식.
  • 범례 블록 — 다이어그램 옆에 렌더링되는 색상 코딩 키를 선언하는 legend 키워드.
  • metadata: 블록 — 모서리 주석에 표시되는 구조적 키-값 메타데이터(진행자, 날짜, 개정).

더 빨리 필요하다면 GitHub 이슈에서 추적하십시오.

Found this useful?

Schematex is free, fully open source, and zero-dependency. A star helps other developers discover it.