Design credit

디자인 출처 표기

Every page footer says where the design came from. With KRDS the prescribed sentence is mandatory, and the audit fails without it.

···
html
<main class="dsx dsx--one"><p class="dsx-label"><b>실제 렌더</b>KRDS SiteFooter columns — 점선과 이름표는 아틀라스가 얹은 설명이에요</p><footer class="ft ft--columns" data-astro-cid-aed25q6h> <div class="container ft__inner" data-astro-cid-aed25q6h> <div class="ft__about" data-astro-cid-aed25q6h> <a class="ft__brand" href="/" data-astro-cid-aed25q6h> <span class="brand-mark" data-astro-cid-hwn4xkzs><svg width="28" height="28" aria-hidden="true" focusable="false" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="bm50_om-id"><rect x="0" y="0" width="64" height="64" fill="#fff"></rect></mask><path x="0" y="0" width="64" height="64" fill="#256EF4" d="M16,0 h32 a16,16 0 0 1 16,16 v32 a16,16 0 0 1 -16,16 h-32 a16,16 0 0 1 -16,-16 v-32 a16,16 0 0 1 16,-16"></path><g><path fill="#FFFFFF" d="M31 20.2L31 43.4L27.8 43.4L27.8 20.2L31 20.2ZM18.5 21.9Q20.2 21.9 21.6 22.9Q23 23.9 23.8 25.8Q24.6 27.6 24.6 30.1L24.6 30.1Q24.6 32.6 23.8 34.4Q23 36.3 21.6 37.3Q20.2 38.3 18.5 38.3L18.5 38.3Q16.7 38.3 15.3 37.3Q13.9 36.3 13.1 34.4Q12.4 32.6 12.4 30.1L12.4 30.1Q12.4 27.6 13.1 25.8Q13.9 23.9 15.3 22.9Q16.7 21.9 18.5 21.9L18.5 21.9ZM18.5 24.8Q17.6 24.8 16.9 25.4Q16.2 26 15.9 27.2Q15.5 28.4 15.5 30.1L15.5 30.1Q15.5 31.8 15.9 33Q16.2 34.2 16.9 34.8Q17.6 35.4 18.5 35.4L18.5 35.4Q19.4 35.4 20 34.8Q20.7 34.2 21.1 33Q21.4 31.8 21.4 30.1L21.4 30.1Q21.4 28.4 21.1 27.2Q20.7 26 20 25.4Q19.4 24.8 18.5 24.8L18.5 24.8ZM54.2 33.1L54.2 35.7L49.3 35.7L49.3 43.3L46 43.3L46 35.7L41.3 35.7L41.3 43.3L37.9 43.3L37.9 35.7L33.1 35.7L33.1 33.1L54.2 33.1ZM43.6 21Q46.1 21 48 21.6Q49.9 22.3 51 23.5Q52 24.7 52 26.2L52 26.2Q52 27.8 51 28.9Q49.9 30.1 48 30.7Q46.1 31.3 43.6 31.3L43.6 31.3Q41.1 31.3 39.2 30.7Q37.3 30.1 36.3 28.9Q35.2 27.8 35.2 26.2L35.2 26.2Q35.2 24.7 36.3 23.5Q37.3 22.3 39.2 21.6Q41.1 21 43.6 21L43.6 21ZM43.6 23.6Q42.1 23.6 40.9 23.9Q39.8 24.2 39.2 24.8Q38.5 25.4 38.5 26.2L38.5 26.2Q38.5 27 39.2 27.6Q39.8 28.2 40.9 28.5Q42.1 28.8 43.6 28.8L43.6 28.8Q45.2 28.8 46.3 28.5Q47.4 28.2 48.1 27.6Q48.7 27 48.7 26.2L48.7 26.2Q48.7 25 47.3 24.3Q46 23.6 43.6 23.6L43.6 23.6Z "></path></g></svg></span>  <span data-astro-cid-aed25q6h>이유식 단계별 가이드</span> </a> <p class="ft__desc" data-astro-cid-aed25q6h>첫 숟가락부터 돌 이후 밥까지, 단계별로 차근차근</p> </div> <nav class="ft__links" aria-label="사이트 정보" data-astro-cid-aed25q6h> <a href="/about/" data-astro-cid-aed25q6h>소개·편집 원칙</a><a href="/disclaimer/" data-astro-cid-aed25q6h>의학 정보 면책</a><a href="/privacy/" class="ft__strong" data-astro-cid-aed25q6h>개인정보처리방침</a><a href="/rss.xml" data-astro-cid-aed25q6h>RSS</a> </nav> <nav class="ft__family" aria-label="함께 보는 육아 사이트" data-astro-cid-aed25q6h> <p class="ft__label" data-astro-cid-aed25q6h>함께 보는 육아 사이트</p> <ul data-astro-cid-aed25q6h> <li data-astro-cid-aed25q6h> <a href="https://feeding.partnerscoupang.app/" data-astro-cid-aed25q6h>아기 수유 가이드</a> </li><li data-astro-cid-aed25q6h> <a href="https://milestone.partnerscoupang.app/" data-astro-cid-aed25q6h>월령별 아기 발달 체크</a> </li><li data-astro-cid-aed25q6h> <a href="https://newborn.partnerscoupang.app/" data-astro-cid-aed25q6h>신생아 첫 100일</a> </li> </ul> </nav> <div class="ft__legal" data-astro-cid-aed25q6h> <p data-astro-cid-aed25q6h><strong data-astro-cid-aed25q6h>이 사이트는 쿠팡(주)의 공식 사이트가 아닌 독립 정보 사이트입니다.</strong></p> <p data-astro-cid-aed25q6h>이 사이트의 글은 일반적인 정보이며 진료를 대신하지 않아요. 아이의 상태가 걱정되면 소아청소년과 전문의와 상담하세요.</p> <p data-astro-cid-aed25q6h>쿠팡 파트너스 링크가 있는 글에는 그 사실을 함께 적어 두어요.</p> <p class="ft__credit" data-design-credit data-astro-cid-aed25q6h> <a href="https://www.krds.go.kr" rel="noopener" data-astro-cid-aed25q6h>본 저작물은 행정안전부에서 2024년 작성하여 공공누리 제1유형으로 개방한 ‘범정부 UI/UX 디자인시스템(KRDS)’을 이용하였으며, 해당 저작물은 ‘KRDS 디자인시스템 홈페이지(www.krds.go.kr)’에서 무료로 다운받으실 수 있습니다.</a>  <a href="/about/#credits" data-astro-cid-aed25q6h>디자인·글꼴 출처</a> </p> <p class="num" data-astro-cid-aed25q6h>© 2026 이유식 단계별 가이드</p> </div> </div> </footer></main>
css
.dsx--one,.dsx{padding-top:34px}[data-design-credit]{outline:2px dashed #c2410c;outline-offset:3px;position:relative}[data-design-credit]::before{content:'디자인 출처 — KRDS 는 이 문장이 꼭 필요해요';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}.ft__credit{margin-top:34px}

All four packs take a design someone else published and adapt it for these sites. A condition of using it is stating the license and where it came from, so every site footer (SiteFooter) carries one line in the data-design-credit spot. The sentence differs by pack: Primer states “Primer Primitives (MIT) · Octicons (MIT)”, and Carbon and shadcn list their own licenses and fonts.

KRDS is stricter. It is released under the Korean public-sector “KOGL Type 1” license, so the exact credit sentence set by the Ministry of the Interior and Safety must appear. For every page built with KRDS, seo:audit looks for that sentence in the footer and reports an error if it is missing. The About page also has a separate “design and font credits” section.

Government emblems, the “official e-government site” strip and the KRDS logo are not brought in, so the sites are not mistaken for government sites. For the same reason Primer and Carbon do not use the GitHub or IBM logos or names.

When to use

Think of it when trimming the footer, or when switching to KRDS. However short the footer gets, the credit line stays.

Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.