제안 시스템

디자인킷 · 반폭

반폭 · 순환 고리 4단

D-반폭-순환고리4단

반폭 · 순환 고리 4단

언제 쓰는가

진단, 가설, 실행, 검증처럼 끝나면 처음으로 돌아가는 운영 주기를 절반 칸에. 단계 4개 고정. 단계 이름 3자 이내, 설명 7자 이내. 가운데에 주기 한 줄. 강조색은 시작 단계 하나. 값 바꾸는 법: 상자 네 개는 시계 방향 순서(위 → 오른쪽 → 아래 → 왼쪽)로 고정 좌표. 상자마다 첫 줄 text(번호 + 단계 이름)와 둘째 줄 text(설명)를 교체. 강조할 상자의 rect class 를 "f-w", 첫 줄 글자 class 를 "va t14" 로. 가운데 두 줄(주기, 반복 단위) 교체. 화살표 좌표는 건드리지 않는다.

참고

PDCA 순환 도식의 일반 구성과 SlideModel(https://slidemodel.com)의 4단 순환 도식 배치(위·오른쪽·아래·왼쪽 상자와 모서리 화살표)를 참고. 직접 제작.

조각

<div class="dk dkh dkh-g-cycle"><div class="dk-card"><p class="dk-lb">월간 운영 주기</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 250" preserveAspectRatio="xMidYMid meet" role="img">
<rect x="144" y="0" width="112" height="50" rx="8" class="f-w"/><text x="200" y="21" text-anchor="middle" class="va t14">01 진단</text><text x="200" y="39" text-anchor="middle" class="k">지표 점검</text><rect x="284" y="100" width="112" height="50" rx="8" class="f-s"/><text x="340" y="121" text-anchor="middle" class="v t14">02 가설</text><text x="340" y="139" text-anchor="middle" class="k">개선안 도출</text><rect x="144" y="200" width="112" height="50" rx="8" class="f-s"/><text x="200" y="221" text-anchor="middle" class="v t14">03 실행</text><text x="200" y="239" text-anchor="middle" class="k">소재·입찰 조정</text><rect x="4" y="100" width="112" height="50" rx="8" class="f-s"/><text x="60" y="121" text-anchor="middle" class="v t14">04 검증</text><text x="60" y="139" text-anchor="middle" class="k">전후 비교</text>
<path d="M262 25 Q340 25 340 88" class="ar"/><path d="M340 156 Q340 225 270 225" class="ar"/><path d="M138 225 Q60 225 60 162" class="ar"/><path d="M60 94 Q60 25 130 25" class="ar"/>
<polygon points="335,87 345,87 340,96" class="f-g3"/><polygon points="271,220 271,230 262,225" class="f-g3"/><polygon points="55,163 65,163 60,154" class="f-g3"/><polygon points="129,20 129,30 138,25" class="f-g3"/>
<text x="200" y="122" text-anchor="middle" class="v t14">4주 1회전</text><text x="200" y="141" text-anchor="middle">월 단위 반복</text>
</svg></div>
<p class="nt">예시 문구 · 실제 내용으로 교체</p></div></div>

스타일

.dkh-g-cycle .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-cycle .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-cycle .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-cycle .cv{flex:1;min-height:0;position:relative}
.dkh-g-cycle .cv svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-g-cycle svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dkh-g-cycle svg .k{fill:var(--ink2)}
.dkh-g-cycle svg .v{fill:var(--ink);font-weight:600}
.dkh-g-cycle svg .va{fill:var(--ac);font-weight:700}
.dkh-g-cycle svg .on{fill:var(--card);font-weight:600}
.dkh-g-cycle svg .t14{font-size:14px}
.dkh-g-cycle svg .f-a{fill:var(--ac)}
.dkh-g-cycle svg .f-w{fill:var(--acw)}
.dkh-g-cycle svg .f-s{fill:var(--soft)}
.dkh-g-cycle svg .f-c{fill:var(--card)}
.dkh-g-cycle svg .f-g1{fill:var(--g1)}
.dkh-g-cycle svg .f-g2{fill:var(--g2)}
.dkh-g-cycle svg .f-g3{fill:var(--g3)}
.dkh-g-cycle svg .f-g4{fill:var(--g4)}
.dkh-g-cycle svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dkh-g-cycle svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dkh-g-cycle svg .ar{fill:none;stroke:var(--g3);stroke-width:1.5}