제안 시스템

디자인킷 · 인포그래픽

아이콘 3열 기둥

D-인포그래픽-아이콘3열기둥

아이콘 3열 기둥

언제 쓰는가

전략의 세 축, 서비스 범위 세 가지처럼 대등한 3개 항목. 아이콘·제목·설명·근거 한 줄. 열 3개 고정(4개면 D-인포그래픽-아이콘4칸격자). 값 바꾸는 법: 열마다 아이콘, 순번(.no), 제목, 설명 2~3줄, 아래 근거(굵은 한 줄 + 보조 한 줄) 교체. 가장 먼저 읽힐 열 하나에만 class="hot". 아이콘은 Lucide(ISC) 원문을 인라인으로 넣은 것. 다른 아이콘으로 바꿀 때는 D-아이콘-* 묶음에서 같은 viewBox 의 내용을 복사.

참고

PresentationGO Icon Accent Cards(https://presentationgo.com/?p=153071), infoDiagram Flat Infographics Template(https://www.infodiagram.com/diagrams/infographics-template-ppt-presentation-flat). 아이콘을 맨 위에 두고 제목·설명을 아래로 쌓는 기둥 구성을 참고. 구성 방식만 참고, 코드와 그림은 직접 제작. 아이콘: Lucide v1.52.0(ISC, https://lucide.dev).

조각

<div class="dk dk-col3">
  <div class="dk-card col hot"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg></span><p class="no">축 1</p><h3>검색 접점 확보</h3><p class="ds">구매 직전 검색어에서 상단 노출. 브랜드 키워드 방어와 일반 키워드 확장을 분리 운영</p><p class="ft"><b>대상 키워드 420개</b>월 검색량 기준 상위 선별</p></div>
  <div class="dk-card col"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg></span><p class="no">축 2</p><h3>후기 신뢰 구축</h3><p class="ds">방문 고객 후기 요청 동선 정비. 체험단 콘텐츠는 실제 이용 장면 중심으로 제작</p><p class="ft"><b>후기 월 60건</b>평점 4.5 이상 유지</p></div>
  <div class="dk-card col"><span class="ib"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg></span><p class="no">축 3</p><h3>재방문 전환</h3><p class="ds">첫 구매 고객에게 14일 뒤 메시지 발송. 구매 이력에 따라 제안 상품 구분</p><p class="ft"><b>재구매율 18% 목표</b>현재 11%</p></div>
</div>

스타일

.dk-col3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dk-col3 .col{padding:30px 30px 26px;display:flex;flex-direction:column}
.dk-col3 .ib{width:64px;height:64px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.dk-col3 .ic{width:32px;height:32px}
.dk-col3 .no{margin:22px 0 2px;font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.dk-col3 h3{margin:0;font-size:var(--f-xl);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.dk-col3 .ds{margin:12px 0 20px;font-size:var(--f-body);color:var(--ink2);flex:1}
.dk-col3 .ft{margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:var(--f-sm);color:var(--mu)}
.dk-col3 .ft b{display:block;font-size:var(--f-body)}
.dk-col3 .hot .ib{background:var(--acw);color:var(--ac)}