연령·성별 피라미드 막대

고객이나 검색 사용자가 어느 연령·성별에 몰려 있는지 보여 주고 타깃을 정하는 장면. 연령대 5~7행. 가운데에 연령 이름, 왼쪽 남성·오른쪽 여성. 핵심 타깃 칸 하나만 강조색, 왼쪽 빈 곳에 요약 숫자. 값 바꾸는 법: 막대 width = 비율 × 17.5(전체 12칸의 합 100%). 남성은 x = 494 − width(왼쪽으로), 여성은 x = 594(오른쪽으로), 행 y = 34 + 순번 × 40. 가장 큰 값이 22%를 넘으면 17.5를 줄여 380px 안에 들어오게 조정. 핵심 타깃 한 칸만 class a, 값 class va. 왼쪽 요약의 큰 숫자 = 핵심 타깃 칸 값.

네이버 데이터랩 검색어트렌드의 성별·연령별 조회 구분(https://datalab.naver.com/keyword/trendSearch.naver, 연령 구간과 성별 분리 제공)과 인구 피라미드 표기(Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Distribution 분류의 population pyramid) 참고. 직접 제작.

<div class="dk dk-pyr">
<div class="dk-card">
<p class="ttl"><span>검색 사용자의 연령·성별 구성 · 전체 100% · 최근 3개월</span><span class="lg"><span><i class="c-g2"></i>남성</span><span><i class="c-g3"></i>여성</span><span><i class="c-a"></i>핵심 타깃</span></span></p>
<svg width="1088" height="276" viewBox="0 0 1088 276" role="img">
<text x="494" y="16" text-anchor="end" class="v md">남성 45%</text>
<text x="594" y="16" class="v md">여성 55%</text>
<line x1="494" y1="26" x2="494" y2="272" class="ax"/>
<line x1="594" y1="26" x2="594" y2="272" class="ax"/>
<text x="544" y="54" text-anchor="middle" class="k md">10대</text>
<rect x="459" y="34" width="35" height="28" rx="3" class="g2"/>
<text x="451" y="53" text-anchor="end" class="v">2%</text>
<rect x="594" y="34" width="52.5" height="28" rx="3" class="g3"/>
<text x="654.5" y="53" class="v">3%</text>
<text x="544" y="94" text-anchor="middle" class="k md">20대</text>
<rect x="336.5" y="74" width="157.5" height="28" rx="3" class="g2"/>
<text x="328.5" y="93" text-anchor="end" class="v">9%</text>
<rect x="594" y="74" width="227.5" height="28" rx="3" class="g3"/>
<text x="829.5" y="93" class="v">13%</text>
<text x="544" y="134" text-anchor="middle" class="k md">30대</text>
<rect x="249" y="114" width="245" height="28" rx="3" class="g2"/>
<text x="241" y="133" text-anchor="end" class="v">14%</text>
<rect x="594" y="114" width="385" height="28" rx="3" class="a"/>
<text x="987" y="133" class="va md">22%</text>
<text x="544" y="174" text-anchor="middle" class="k md">40대</text>
<rect x="301.5" y="154" width="192.5" height="28" rx="3" class="g2"/>
<text x="293.5" y="173" text-anchor="end" class="v">11%</text>
<rect x="594" y="154" width="175" height="28" rx="3" class="g3"/>
<text x="777" y="173" class="v">10%</text>
<text x="544" y="214" text-anchor="middle" class="k md">50대</text>
<rect x="389" y="194" width="105" height="28" rx="3" class="g2"/>
<text x="381" y="213" text-anchor="end" class="v">6%</text>
<rect x="594" y="194" width="87.5" height="28" rx="3" class="g3"/>
<text x="689.5" y="213" class="v">5%</text>
<text x="544" y="254" text-anchor="middle" class="k md">60대 이상</text>
<rect x="441.5" y="234" width="52.5" height="28" rx="3" class="g2"/>
<text x="433.5" y="253" text-anchor="end" class="v">3%</text>
<rect x="594" y="234" width="35" height="28" rx="3" class="g3"/>
<text x="637" y="253" class="v">2%</text>
<text x="0" y="60">핵심 타깃</text>
<text x="0" y="104" class="va hg">22%</text>
<text x="0" y="130" class="v md">30대 여성</text>
<text x="0" y="164" class="k">20~30대 여성 합계 35%</text>
<text x="0" y="184" class="k">같은 연령대 남성의 1.5배</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

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