제안 시스템

디자인킷 · 그래프

플라이트 차트(매체 × 주 단위 집행 띠)

D-그래프-플라이트차트

플라이트 차트(매체 × 주 단위 집행 띠)

언제 쓰는가

어느 매체를 어느 주에 얼마나 세게 집행하는지 한눈에. 미디어 플랜의 일정 장. 매체 4~6행, 12주 고정(월 3개). 집중 구간만 강조색, 기본 집행은 회색, 쉬는 주는 비움. 값 바꾸는 법: 행마다 12글자 문자열로 주별 강도 지정: . = 쉬는 주, l = 소량(g1), m = 기본(g2), h = 집중(a). 같은 글자가 이어지면 띠 하나로 그림. 띠 x = 170 + 주 순번 × 60 + 3, width = 주 수 × 60 − 6, 행 y = 46 + 행 × 37. 위 단계 이름(준비·집중·유지)은 4주 묶음의 오른쪽 끝에 놓임. 예산 비중의 합은 100.

참고

위스콘신대 저널리즘 스쿨 미디어 플랜 안내(https://j345manual.journalism.wisc.edu/media-plan/)의 media flowchart(왼쪽에 매체, 위에 기간, 띠로 집행 구간)와 연속·플라이팅·펄싱 구분(https://www.slideshare.net/slideshow/media-scheduling/52057587), Guideline의 주 단위 플라이트 글(https://www.guideline.ai/blog/plan-better-media-flights-with-verified-market-spend) 참고. 직접 제작.

조각

<div class="dk dk-flight">
<div class="dk-card">
<p class="ttl"><span>매체별 주 단위 집행 일정 · 12주</span><span class="lg"><span><i class="c-g1"></i>소량</span><span><i class="c-g2"></i>기본</span><span><i class="c-a"></i>집중</span></span></p>
<svg width="1088" height="270" viewBox="0 0 1088 270" role="img">
<text x="174" y="14" class="k">10월</text>
<text x="414" y="14" class="k">11월</text>
<text x="654" y="14" class="k">12월</text>
<text x="404" y="14" text-anchor="end">준비</text>
<text x="644" y="14" text-anchor="end" class="va">집중</text>
<text x="884" y="14" text-anchor="end">유지</text>
<text x="200" y="36" text-anchor="middle">1주</text>
<text x="260" y="36" text-anchor="middle">2주</text>
<text x="320" y="36" text-anchor="middle">3주</text>
<text x="380" y="36" text-anchor="middle">4주</text>
<text x="440" y="36" text-anchor="middle">5주</text>
<text x="500" y="36" text-anchor="middle">6주</text>
<text x="560" y="36" text-anchor="middle">7주</text>
<text x="620" y="36" text-anchor="middle">8주</text>
<text x="680" y="36" text-anchor="middle">9주</text>
<text x="740" y="36" text-anchor="middle">10주</text>
<text x="800" y="36" text-anchor="middle">11주</text>
<text x="860" y="36" text-anchor="middle">12주</text>
<text x="0" y="36">매체</text>
<text x="910" y="36">역할</text>
<text x="1088" y="36" text-anchor="end">예산 비중</text>
<line x1="170" y1="4" x2="170" y2="268" class="gr"/>
<line x1="410" y1="4" x2="410" y2="268" class="gr"/>
<line x1="650" y1="4" x2="650" y2="268" class="gr"/>
<line x1="890" y1="4" x2="890" y2="268" class="gr"/>
<line x1="0" y1="46" x2="1088" y2="46" class="gr"/>
<text x="0" y="70" class="k md">검색 광고</text>
<text x="910" y="70">상시 수요 대응</text>
<text x="1088" y="70" text-anchor="end" class="v md">34%</text>
<rect x="173" y="54" width="234" height="22" rx="4" class="g2"/>
<rect x="413" y="54" width="234" height="22" rx="4" class="a"/>
<text x="530" y="70" text-anchor="middle" class="on">집중 집행</text>
<rect x="653" y="54" width="234" height="22" rx="4" class="g2"/>
<line x1="0" y1="83" x2="1088" y2="83" class="gr"/>
<text x="0" y="107" class="k md">SNS 광고</text>
<text x="910" y="107">신규 도달</text>
<text x="1088" y="107" text-anchor="end" class="v md">24%</text>
<rect x="293" y="91" width="114" height="22" rx="4" class="g2"/>
<rect x="413" y="91" width="234" height="22" rx="4" class="a"/>
<rect x="653" y="91" width="114" height="22" rx="4" class="g2"/>
<line x1="0" y1="120" x2="1088" y2="120" class="gr"/>
<text x="0" y="144" class="k md">영상 광고</text>
<text x="910" y="144">인지 확보</text>
<text x="1088" y="144" text-anchor="end" class="v md">16%</text>
<rect x="353" y="128" width="234" height="22" rx="4" class="a"/>
<line x1="0" y1="157" x2="1088" y2="157" class="gr"/>
<text x="0" y="181" class="k md">디스플레이</text>
<text x="910" y="181">재방문 유도</text>
<text x="1088" y="181" text-anchor="end" class="v md">12%</text>
<rect x="473" y="165" width="414" height="22" rx="4" class="g2"/>
<line x1="0" y1="194" x2="1088" y2="194" class="gr"/>
<text x="0" y="218" class="k md">체험단·후기</text>
<text x="910" y="218">검색 결과 채움</text>
<text x="1088" y="218" text-anchor="end" class="v md">9%</text>
<rect x="173" y="202" width="234" height="22" rx="4" class="g2"/>
<rect x="653" y="202" width="114" height="22" rx="4" class="g1"/>
<line x1="0" y1="231" x2="1088" y2="231" class="gr"/>
<text x="0" y="255" class="k md">프로모션 페이지</text>
<text x="910" y="255">전환 수용</text>
<text x="1088" y="255" text-anchor="end" class="v md">5%</text>
<rect x="413" y="239" width="234" height="22" rx="4" class="a"/>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

스타일

.dk-flight .dk-card{padding:22px 32px 20px}
.dk-flight .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-flight .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-flight .lg span{display:flex;align-items:center;gap:6px}
.dk-flight .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-flight .lg i.c-a{background:var(--ac)}
.dk-flight .lg i.c-w{background:var(--acw)}
.dk-flight .lg i.c-s{background:var(--soft)}
.dk-flight .lg i.c-g1{background:var(--g1)}
.dk-flight .lg i.c-g2{background:var(--g2)}
.dk-flight .lg i.c-g3{background:var(--g3)}
.dk-flight .lg i.c-g4{background:var(--g4)}
.dk-flight .lg i.c-o{background:none;border:2px solid var(--ac)}
.dk-flight .lg i.c-e{background:var(--soft);border:1px dashed var(--g3)}
.dk-flight .lg i.c-t{width:14px;height:3px;border-radius:0;background:var(--ink)}
.dk-flight .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-flight svg{display:block}
.dk-flight svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-flight svg .a{fill:var(--ac)}
.dk-flight svg .aw{fill:var(--acw)}
.dk-flight svg .sf{fill:var(--soft)}
.dk-flight svg .g1{fill:var(--g1)}
.dk-flight svg .g2{fill:var(--g2)}
.dk-flight svg .g3{fill:var(--g3)}
.dk-flight svg .g4{fill:var(--g4)}
.dk-flight svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-flight svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-flight svg .tg{stroke:var(--g3);stroke-width:1;stroke-dasharray:4 4;fill:none}
.dk-flight svg text.k{fill:var(--ink2)}
.dk-flight svg text.v{fill:var(--ink);font-weight:600}
.dk-flight svg text.va{fill:var(--ac);font-weight:700}
.dk-flight svg text.on{fill:var(--card);font-weight:600}
.dk-flight svg text.big{font-size:24px;font-weight:700}
.dk-flight svg text.md{font-size:16px}
.dk-flight svg .ln{fill:none;stroke:var(--g4);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.dk-flight svg .ln.hot{stroke:var(--ac)}
.dk-flight svg .ln.sub{stroke:var(--g2);stroke-width:2}
.dk-flight svg .dot{fill:var(--ac);stroke:var(--card);stroke-width:2}
.dk-flight svg .dot.m{fill:var(--g4)}
.dk-flight svg .dot.s{fill:var(--g2)}
.dk-flight svg .ol{fill:none;stroke:var(--ac);stroke-width:2.5}
.dk-flight svg .al{stroke:var(--ac);stroke-width:1.5;fill:none}