한 원본 세 갈래(갈래마다 바뀌는 요소 3개)

왼쪽 원본 하나에서 오른쪽 세 갈래로 뻗고 갈래마다 바뀌는 요소 3개를 같은 열에 맞춰 적는 도식. 한 소재의 3채널 재가공, 기준 소재 1종에서 변형 3종을 만드는 배치 구조에 사용. 갈래 3개 고정, 갈래마다 요소 3개(각 약 16자). 원본 상자만 강조. 값 바꾸는 법: 원본 상자 문구, 열 이름 3개(div.cap), 갈래 3줄(이름 b, 요소 span 3개) 교체. 높이 336px 와 연결선이 3줄 기준 고정값이라 갈래 수는 바꾸지 않음(4·6갈래는 D-도식-허브가지4, 6).

갈래로 나뉘는 흐름 구성은 infoDiagram "Decision Tree PowerPoint Template" https://www.infodiagram.com/diagrams/decision-tree-powerpoint-template-flowchart.html 과 SlideModel 의 decision tree 템플릿 묶음 https://slidemodel.com/templates/tag/decision-tree/ 참고. 코드는 직접 제작. 원본 하나에서 채널별 변형으로 퍼지는 표기는 콘텐츠 재가공(content repurposing) 도해 관행 참고.

<div class="dk dk-fan3">
<div class="org"><span class="dk-lb">그대로 쓰는 것</span><b>원본 소재 1건</b><p>사진·영상 원본, 핵심 메시지</p></div>
<svg width="56" height="336" viewBox="0 0 56 336" aria-hidden="true"><path d="M0 184H22M22 78V290M22 78H52M45 71l7 7-7 7M22 184H52M45 177l7 7-7 7M22 290H52M45 283l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
<div class="rt">
<div class="cap"><span></span><span>형식</span><span>제목 방향</span><span>행동 유도</span></div>
<div class="ln"><b>블로그</b><span>사진 5~6장과 과정 설명 글</span><span>검색어를 담은 제목</span><span>구매·문의 링크</span></div>
<div class="ln"><b>인스타그램</b><span>클립을 이은 15~30초 릴스</span><span>첫 문장으로 멈추게 하는 캡션</span><span>저장, 프로필 링크</span></div>
<div class="ln"><b>유튜브</b><span>과정 전체를 담은 3~4분 영상</span><span>내용이 보이는 제목</span><span>구독, 다음 영상 예고</span></div>
</div>
</div>

.dk-fan3{display:grid;grid-template-columns:230px 56px minmax(0,1fr);align-items:start;height:336px}
.dk-fan3 svg{display:block;color:var(--g3)}
.dk-fan3 .org{align-self:center;margin-top:32px;background:var(--ac);border-radius:var(--r);padding:26px 24px 28px}
.dk-fan3 .org .dk-lb{color:var(--acw)}
.dk-fan3 .org b{display:block;margin-top:4px;font-size:var(--f-xl);font-weight:700;line-height:1.3;color:var(--card)}
.dk-fan3 .org p{margin:10px 0 0;font-size:var(--f-sm);color:var(--acw);line-height:1.45}
.dk-fan3 .rt{height:336px;display:flex;flex-direction:column;gap:14px}
.dk-fan3 .cap,.dk-fan3 .ln{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));column-gap:18px;padding:0 24px;align-items:center}
.dk-fan3 .cap{height:18px;flex:none;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-fan3 .ln{flex:1;min-height:0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.dk-fan3 .ln b{font-size:var(--f-lg);font-weight:700}
.dk-fan3 .ln span{font-size:var(--f-body);color:var(--ink2);line-height:1.4}