사이트마다 다른 알록달록한 색

A different bright color per site

사이트마다 빨강·초록·보라 같은 자기 색을 두지 않아요. 사이트 구분은 이름과 두 글자 표식, 변형의 조합으로 해요.

···

html

<main class="dont-wrap"><section class="dont-col"><p class="dsx-label"><b>하지 않는 것</b>설명용으로 그린 예</p><div class="dont-bad"><div class="dont-site dont-site-a"><i></i><span>아기 수유 가이드<small>모유·분유·혼합수유</small></span></div><div class="dont-site dont-site-b"><i></i><span>월령별 아기 발달 체크<small>2개월부터 24개월까지</small></span></div><div class="dont-site dont-site-c"><i></i><span>신생아 첫 100일<small>황달·배꼽·목욕부터</small></span></div><div class="dont-site dont-site-d"><i></i><span>아기 수면 가이드<small>밤잠·낮잠 리듬</small></span></div><div class="dont-note">사이트마다 다른 대표 색. 하지 않아요.</div></div></section><section class="dont-col"><p class="dsx-label"><b>대신</b>실제 렌더: KRDS RelatedSites list — 모노그램과 이름, 색은 하나</p><div class="dont-real"><section class="rs rs--list" aria-labelledby="family-title" data-astro-cid-m3qsllsz> <div class="container" data-astro-cid-m3qsllsz> <h2 id="family-title" class="rs__title" data-astro-cid-m3qsllsz>함께 보는 육아 사이트</h2> <ul class="rs__list" data-astro-cid-m3qsllsz> <li class="rs__item" data-astro-cid-m3qsllsz> <span class="brand-mark" data-astro-cid-hwn4xkzs><svg width="32" height="32" aria-hidden="true" focusable="false" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="bm55_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="M23.9 22Q23.9 23.4 24.9 24.8Q25.8 26.1 27.7 27.1Q29.5 28.1 32 28.4L32 28.4L30.8 31Q27.8 30.6 25.6 29.3Q23.4 28 22.2 26.1L22.2 26.1Q21.1 28 18.9 29.3Q16.7 30.6 13.8 31L13.8 31L12.5 28.4Q15 28.1 16.8 27.1Q18.7 26.1 19.6 24.8Q20.5 23.4 20.5 22L20.5 22L20.5 20.9L23.9 20.9L23.9 22ZM32.8 32.8L32.8 35.4L23.8 35.4L23.8 43.3L20.6 43.3L20.6 35.4L11.7 35.4L11.7 32.8L32.8 32.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>  <div class="rs__body" data-astro-cid-m3qsllsz> <h3 class="rs__name" data-astro-cid-m3qsllsz> <a href="https://feeding.partnerscoupang.app/" data-astro-cid-m3qsllsz>아기 수유 가이드</a> </h3> <p class="rs__tagline" data-astro-cid-m3qsllsz>모유·분유·혼합수유, 월령별로 차근차근</p> </div> <span class="rs__count num" data-astro-cid-m3qsllsz>글 16편</span> </li><li class="rs__item" data-astro-cid-m3qsllsz> <span class="brand-mark" data-astro-cid-hwn4xkzs><svg width="32" height="32" aria-hidden="true" focusable="false" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="bm56_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="M15.6 21.3L15.6 24L20.3 24L20.3 21.3L23.6 21.3L23.6 31.4L12.4 31.4L12.4 21.3L15.6 21.3ZM15.6 28.8L20.3 28.8L20.3 26.5L15.6 26.5L15.6 28.8ZM30 20.2L30 24.7L33.1 24.7L33.1 27.3L30 27.3L30 32L26.8 32L26.8 20.2L30 20.2ZM30 32.8L30 39.1L17.9 39.1L17.9 40.6L30.7 40.6L30.7 43.2L14.7 43.2L14.7 36.8L26.8 36.8L26.8 35.4L14.7 35.4L14.7 32.8L30 32.8ZM44.3 21.4L44.3 24L37.2 24L37.2 28.7Q40.2 28.6 42.3 28.5Q44.3 28.3 46.3 27.9L46.3 27.9L46.6 30.4Q44.7 30.9 42.6 31Q40.5 31.2 37.1 31.2L37.1 31.2L35.9 31.2L33.9 31.2L33.9 21.4L44.3 21.4ZM51.4 20.2L51.4 24.6L54.6 24.6L54.6 27.2L51.4 27.2L51.4 31.7L48.2 31.7L48.2 20.2L51.4 20.2ZM51.4 32.7L51.4 39L39.3 39L39.3 40.5L52.1 40.5L52.1 43.1L36.2 43.1L36.2 36.6L48.2 36.6L48.2 35.2L36.1 35.2L36.1 32.7L51.4 32.7Z "></path></g></svg></span>  <div class="rs__body" data-astro-cid-m3qsllsz> <h3 class="rs__name" data-astro-cid-m3qsllsz> <a href="https://milestone.partnerscoupang.app/" data-astro-cid-m3qsllsz>월령별 아기 발달 체크</a> </h3> <p class="rs__tagline" data-astro-cid-m3qsllsz>2개월부터 24개월까지, 우리 아이 발달을 차분하게 확인해요</p> </div> <span class="rs__count num" data-astro-cid-m3qsllsz>글 16편</span> </li><li class="rs__item" data-astro-cid-m3qsllsz> <span class="brand-mark" data-astro-cid-hwn4xkzs><svg width="32" height="32" aria-hidden="true" focusable="false" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="bm57_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.3L31 37.1L27.8 37.1L27.8 20.3L31 20.3ZM31.6 40.3L31.6 42.9L15.5 42.9L15.5 35.5L18.8 35.5L18.8 40.3L31.6 40.3ZM20.5 23.8Q20.5 25.3 21.1 26.8Q21.7 28.2 22.9 29.3Q24.1 30.4 26 31L26 31L24.3 33.6Q22.4 32.9 21 31.7Q19.7 30.5 18.9 28.8L18.9 28.8Q18.1 30.6 16.7 31.9Q15.3 33.3 13.3 34L13.3 34L11.6 31.4Q13.5 30.8 14.7 29.6Q16 28.4 16.6 26.9Q17.2 25.4 17.2 23.8L17.2 23.8L17.2 21.5L20.5 21.5L20.5 23.8ZM40.5 24.3Q40.5 25.6 41 26.8Q41.4 28 42.4 29Q43.4 29.9 44.9 30.5L44.9 30.5L43.1 33Q41.7 32.4 40.7 31.4Q39.6 30.5 39 29.1L39 29.1Q38.3 30.7 37.2 31.9Q36.1 33 34.5 33.7L34.5 33.7L32.8 31.2Q34.3 30.5 35.4 29.4Q36.4 28.3 36.9 27Q37.4 25.7 37.4 24.3L37.4 24.3L37.4 21.6L40.5 21.6L40.5 24.3ZM53 20.3L53 34.4L49.9 34.4L49.9 28.5L48 28.5L48 33.7L44.9 33.7L44.9 20.7L48 20.7L48 25.9L49.9 25.9L49.9 20.3L53 20.3ZM45.1 34.7Q47.5 34.7 49.3 35.2Q51.1 35.7 52.1 36.7Q53.1 37.7 53.1 39L53.1 39Q53.1 40.4 52.1 41.3Q51.1 42.3 49.3 42.8Q47.5 43.3 45.1 43.3L45.1 43.3Q42.6 43.3 40.8 42.8Q39 42.3 38.1 41.3Q37.1 40.4 37.1 39L37.1 39Q37.1 37.7 38.1 36.7Q39 35.7 40.8 35.2Q42.6 34.7 45.1 34.7L45.1 34.7ZM45.1 37.1Q42.8 37.1 41.6 37.6Q40.3 38.1 40.3 39L40.3 39Q40.3 39.9 41.5 40.4Q42.8 40.9 45.1 40.9L45.1 40.9Q47.3 40.9 48.6 40.4Q49.8 39.9 49.8 39L49.8 39Q49.8 38.1 48.6 37.6Q47.3 37.1 45.1 37.1L45.1 37.1Z "></path></g></svg></span>  <div class="rs__body" data-astro-cid-m3qsllsz> <h3 class="rs__name" data-astro-cid-m3qsllsz> <a href="https://newborn.partnerscoupang.app/" data-astro-cid-m3qsllsz>신생아 첫 100일</a> </h3> <p class="rs__tagline" data-astro-cid-m3qsllsz>황달·배꼽·목욕부터 주차별 발달까지, 처음 100일을 차근차근</p> </div> <span class="rs__count num" data-astro-cid-m3qsllsz>글 16편</span> </li> </ul> </div> </section></div></section></main>

css

.dont-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.dont-col{min-width:0}
.dont-col+.dont-col{border-left:1px dashed #a8a29e}
@media (max-width:599px){.dont-wrap{grid-template-columns:minmax(0,1fr)}.dont-col+.dont-col{border-left:0;border-top:1px dashed #a8a29e}}
@media (max-width:340px){.dont-wrap .dsx-label{display:flex}}
.dont-bad{padding:8px 16px 22px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--c-text,#1c1917)}
.dont-bad *{box-sizing:border-box}
.dont-real{padding-bottom:12px}
.dont-note{margin-top:12px;font:12px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c}
:root.dark .dont-note{color:#a59c91}
.dont-card{background:#fff;color:#1f2937;border-radius:8px;padding:14px 16px;margin-bottom:12px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.dont-card b{display:block;margin-bottom:4px}

.dont-site{display:flex;align-items:center;gap:10px;border-radius:10px;padding:12px 14px;margin-bottom:10px;color:#fff;font-weight:700}
.dont-site small{display:block;font-weight:400;opacity:.9}
.dont-site-a{background:#e11d48}.dont-site-b{background:#16a34a}.dont-site-c{background:#7c3aed}.dont-site-d{background:#f59e0b;color:#1f2937}
.dont-site i{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.35)}

사이트 열 곳에 각각 다른 대표 색을 주면 한 운영자가 만든 알록달록한 사이트 모음처럼 보여요. 처음에는 사이트마다 대표 색을 두고 글자 대비만 맞춰 주는 방식이었는데, 「알록달록한 색은 없앤다」는 결정으로 폐기했어요. 지금 색은 디자인 팩이 정하고, 사이트는 색을 만들지 않아요.

이 규칙은 기계 검사 대신 구조로 지켜져요. 색 값은 팩의 색 모음 한 곳에만 있고, 새 사이트를 만드는 명령(new:site)은 색을 만들지 않아요. 그래도 사이트가 구분돼야 하니 구분은 세 가지로 해요. 사이트 이름, 팩 글꼴로 그린 두 글자 모노그램, 그리고 컴포넌트 변형의 조합이에요. 오른쪽 「함께 보는 육아 사이트」를 보면 사이트마다 이름과 표식은 다르지만 색은 모두 같아요.

이 말은 팩마다 색이 다르다는 뜻이 아니에요. 팩끼리는 강조색이 달라요(KRDS·Primer·Carbon 은 파랑 계열, shadcn 은 검정에 가까워요). 한 번 팩을 고르면 열 사이트가 같은 색 체계를 쓰는 게 약속이에요.

언제 쓰나

새 사이트를 만들면서 「이 사이트만의 색」을 주고 싶어질 때 떠올려요. 색 대신 이름을 다듬고 표식 두 글자를 고르고 변형을 달리해요.

함께 보기

08함께 보는 사이트Related sites

08함께 보는 사이트Related sites

07색은 기능이 있는 곳에만Color only where it does a job

08변형 고르기How variants get picked

언제 쓰나