신뢰 줄이 대가성 문구보다 먼저

Trust line comes before the disclosure

글 머리에서는 「기관 자료 6곳과 대조 · 마지막 확인일」이 먼저 보이고, 쿠팡 파트너스 문구는 그 뒤에 와요.

···
html
<main class="dsx dsx--one"><p class="dsx-label"><b>실제 렌더</b>KRDS PostHeader band — 점선과 이름표는 아틀라스가 얹은 설명이에요</p><header class="ph ph--band" data-astro-cid-jgzlacy3> <div class="container ph__inner" data-astro-cid-jgzlacy3> <div class="ph__main" data-astro-cid-jgzlacy3> <nav class="crumbs crumbs--slash" aria-label="현재 위치" data-astro-cid-goxg7r6x> <ol data-astro-cid-goxg7r6x> <li data-astro-cid-goxg7r6x>  <a href="/" data-astro-cid-goxg7r6x>홈</a> </li><li data-astro-cid-goxg7r6x> <span class="crumbs__sep" aria-hidden="true" data-astro-cid-goxg7r6x>/</span> <a href="/category/stages/" data-astro-cid-goxg7r6x>단계별 이유식</a> </li> </ol> </nav>   <h1 class="ph__title" data-astro-cid-jgzlacy3>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</h1> <p class="ph__lead" data-astro-cid-jgzlacy3>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class="ph__trust num" data-astro-cid-jgzlacy3> <span data-astro-cid-jgzlacy3>  <a href="#sources" data-astro-cid-jgzlacy3>기관 자료 6곳과 대조</a> </span> <span data-astro-cid-jgzlacy3> <time datetime="2026-10-13" data-astro-cid-jgzlacy3>2026년 10월 13일</time> 확인
</span> <span class="ph__muted" data-astro-cid-jgzlacy3> 작성 <time datetime="2026-10-13" data-astro-cid-jgzlacy3>2026년 10월 13일</time> </span> <span class="ph__muted" data-astro-cid-jgzlacy3> 
약 6분
</span> </p>  <p class="disclosure ph__disclosure" data-astro-cid-jgzlacy3> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.6 12C3.6 7.36081 7.36081 3.6 12 3.6C16.6392 3.6 20.4 7.36081 20.4 12C20.4 16.6392 16.6392 20.4 12 20.4C7.36081 20.4 3.6 16.6392 3.6 12ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM13 7.59375V13.5938H11V7.59375H13ZM13 17.0938V15.0938H11V17.0938H13Z" fill="currentColor"></path> </g></svg> 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. </p> </div>  </div> </header></main>
css
.dsx--one,.dsx{padding-top:34px}.ph__trust{outline:2px dashed #c2410c;outline-offset:3px;position:relative}.ph__trust::before{content:'1 신뢰 줄 — 출처와 확인일';position:absolute;bottom:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.ph__disclosure{outline:2px dashed #c2410c;outline-offset:3px;position:relative}.ph__disclosure::before{content:'2 대가성 문구 (14px)';position:absolute;top:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.ph__disclosure{margin-top:12px}.ph__trust{margin-top:34px}

이 사이트들은 쿠팡 파트너스 링크로 수익을 얻는 육아 정보 글이에요. 독자가 처음 눈에 담는 것이 광고 문구면 글 전체가 광고처럼 읽혀요. 그래서 글 머리에서 가장 먼저, 가장 진하게 보이는 것은 이 글이 어떤 자료를 근거로 했고 언제 확인했는지예요.

네 팩 모두 글 머리(PostHeader) 안에서 같은 순서를 지켜요. 제목과 한 줄 요약, 그다음 신뢰 줄(기관 자료 n곳, 확인일), 그다음 대가성 문구예요. 신뢰 줄은 대가성 문구보다 진하게 그리고, 대가성 문구는 색 상자 대신 얇은 테두리 한 줄로 조용히 써요. 검사 스크립트에는 이 순서를 재는 항목이 없고, 글 머리 컴포넌트가 순서를 정해 지켜요. 다만 근거의 바탕은 기계가 봐요. seo:audit 은 글마다 출처가 0개면 오류, 2개 미만이면 경고를 내요.

대가성 문구를 숨기는 건 아니에요. 문구는 그대로 있고 14px 크기도 그대로예요. 쿠팡 링크가 실제로 있는 글에서는 글 머리와 상품 묶음 바로 위, 두 곳에 나와요.

언제 쓰나

글 머리 순서를 바꾸고 싶을 때, 또는 광고 문구를 더 눈에 띄게(혹은 덜 보이게) 만들고 싶을 때 떠올려요. 먼저 신뢰 줄이 위에 있는지부터 봐요.

페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.