디자인 출처 표기

Design credit

모든 페이지 맨 아래에 이 디자인을 어디서 가져왔는지 적어요. KRDS 를 고르면 정해진 문장을 그대로 써야 하고, 빠지면 검사가 막아요.

···
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}

네 팩은 모두 남이 공개한 디자인을 가져와 우리 사이트에 맞게 다듬은 거예요. 라이선스를 밝히는 것이 사용 조건이고, 그래서 사이트 발(SiteFooter) 안 data-design-credit 자리에 출처를 한 줄 써요. 팩마다 문장이 달라요. Primer 는 「디자인 토큰: Primer Primitives(MIT) · 아이콘: Octicons(MIT)」, Carbon 과 shadcn 도 각자 라이선스와 글꼴을 적어요.

KRDS 는 더 엄격해요. 공공누리 제1유형이라 행정안전부가 정한 출처표기 문장을 그대로 넣어야 해요(「본 저작물은 행정안전부에서 2024년 작성하여 공공누리 제1유형으로 개방한…」). seo:audit 이 KRDS 로 빌드한 모든 페이지의 발에서 이 문장을 찾고, 없으면 오류를 내요. 소개 페이지에도 「디자인·글꼴 출처」가 따로 있어요.

정부 상징, 「공식 전자정부 누리집」 띠, KRDS 로고는 가져오지 않아요. 정부 사이트로 오해받지 않게 하려는 거예요. 같은 이유로 Primer 와 Carbon 도 GitHub·IBM 로고와 이름은 넣지 않아요.

언제 쓰나

푸터를 짧게 줄이고 싶을 때, 또는 팩을 KRDS 로 바꿀 때 떠올려요. 푸터를 어떻게 줄여도 출처 줄은 지우지 않아요.

페이지로 열기 ↗

항목 추가 요청

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