디자인킷 · 도식
허용·금지 2단 체크 카드
D-도식-허용금지2단
언제 쓰는가
해도 되는 것과 해서는 안 되는 것을 좌우 2단 목록으로 맞세우는 체크 카드. 리뷰 확보 방법, 광고 표현 허용 범위, 협찬 표기 기준에 사용. 칸 2개 고정, 칸마다 항목 3~5개, 문구 2줄(약 32자). 금지 쪽 표시만 강조색. 아래 결론 1줄. 값 바꾸는 법: 칸 제목(h3)과 항목 문구 교체. 칸마다 3~5개, 양쪽 개수는 같게. 예시의 "구매 확정 후 포인트 적립 혜택"은 공식 혜택 자리이므로 광고주 혜택으로 교체. 아래 결론 줄은 지워도 됨.
참고
허용과 금지를 좌우로 맞세우는 방식은 브랜드 가이드라인의 do · don't 장과 플랫폼 운영 정책 안내 페이지 구성 참고. 표시는 CSS 로 그린 직접 제작.
조각
<div class="dk dk-okno"> <div class="pair"> <div class="c ok"><h3>해도 되는 것</h3><ul> <li><i></i>실제 구매 고객에게 정중한 리뷰 작성 요청</li> <li><i></i>구매 확정 후 포인트 적립 혜택을 상품 페이지에 안내</li> <li><i></i>배송 상자에 솔직한 후기를 부탁하는 카드 동봉</li> <li><i></i>부정 리뷰에 사실 기반의 정중한 답글</li> </ul></div> <div class="c no"><h3>해서는 안 되는 것</h3><ul> <li><i></i>구매 없이 리뷰만 남기는 가구매·품앗이</li> <li><i></i>매크로·대행 업체를 통한 대량 생성</li> <li><i></i>같은 문구 복사를 유도해 부자연스러운 패턴 생성</li> <li><i></i>금전·사은품을 대가로 부정 리뷰 삭제·수정 요구</li> </ul></div> </div> <p class="dk-say">조작 적발 시 리뷰 삭제를 넘어 계정 제재 대상</p> </div>
스타일
.dk-okno{display:flex;flex-direction:column;gap:18px}
.dk-okno .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.dk-okno .c{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 30px 10px}
.dk-okno h3{margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line2);font-size:var(--f-xl);font-weight:700;line-height:1.3}
.dk-okno .no h3{color:var(--ac);border-bottom-color:var(--ac)}
.dk-okno ul{list-style:none;margin:0;padding:0}
.dk-okno li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:center;min-height:62px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--f-body);color:var(--ink);line-height:1.45}
.dk-okno li:last-child{border-bottom:0}
.dk-okno li i{position:relative;width:22px;height:22px;border-radius:50%}
.dk-okno .ok li i{background:var(--g4)}
.dk-okno .ok li i::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border-right:2px solid var(--card);border-bottom:2px solid var(--card);transform:rotate(45deg)}
.dk-okno .no li i{background:var(--ac)}
.dk-okno .no li i::before,.dk-okno .no li i::after{content:"";position:absolute;left:5px;top:10px;width:12px;height:2px;background:var(--card);transform:rotate(45deg)}
.dk-okno .no li i::after{transform:rotate(-45deg)}