스트로크 일관성

Stroke Consistency

아이콘 세트 전체에서 선의 굵기를 하나의 값으로 고정하는 규칙 — 굵기가 다른 아이콘을 나란히 두면 세트 전체가 어수선해 보인다.

다른 이름: Line weight consistency
···
html
<div class="wrap">
  <div class="row">
    <svg viewBox="0 0 24 24" class="ic"><circle id="a" cx="12" cy="12" r="8" fill="none" stroke="var(--fg)"/></svg>
    <svg viewBox="0 0 24 24" class="ic"><rect id="b" x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="var(--fg)"/></svg>
    <svg viewBox="0 0 24 24" class="ic"><path id="c" d="M6 12l4 4 8-9" fill="none" stroke="var(--fg)" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </div>
  <div class="label" id="lbl">mixed widths — 1 / 3 / 1.6px</div>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.row{display:flex;gap:clamp(14px,5vmin,30px)}
.ic{width:clamp(30px,10vmin,46px)}
#a,#b,#c{transition:stroke-width .5s}
.label{font-size:11px;color:var(--muted)}
js
const a = document.getElementById('a');
const b = document.getElementById('b');
const c = document.getElementById('c');
const lbl = document.getElementById('lbl');
let uniform = false;
function paint() {
  if (uniform) {
    a.style.strokeWidth = '2'; b.style.strokeWidth = '2'; c.style.strokeWidth = '2';
    lbl.textContent = 'consistent \u2014 2px everywhere';
  } else {
    a.style.strokeWidth = '1'; b.style.strokeWidth = '3'; c.style.strokeWidth = '1.6';
    lbl.textContent = 'mixed widths \u2014 1 / 3 / 1.6px';
  }
}
paint();
setInterval(() => { uniform = !uniform; paint(); }, 1600);

스트로크 일관성은 아이콘 세트 전체에서 선의 굵기를 하나의 값으로 고정하는 규칙이다. 개별 아이콘만 보면 1px이든 3px이든 다 멀쩡해 보이지만, 굵기가 다른 아이콘들을 나란히 놓는 순간 세트 전체가 어수선해 보인다 — 뇌가 "이게 같은 시스템에서 나온 건가?"를 굵기 차이로 먼저 판단하기 때문이다.

보통 24px 그리드 기준 1.5px 또는 2px 중 하나를 팀 전체의 기준값으로 정하고, 새 아이콘을 추가할 때마다 그 값을 그대로 상속한다. 크기를 줄이거나 키울 때도(예: 24px 아이콘을 16px로 축소) 스트로크 굵기를 비례해서 같이 줄이지 않고 최소 가독 두께(보통 1px 이상)를 유지하는 경우가 많다 — 비율대로 줄이면 작은 크기에서 선이 너무 가늘어져 안 보이기 때문이다.

가장 자주 깨지는 지점은 외부에서 가져온 아이콘(오픈소스 아이콘팩, 다른 디자이너가 그린 아이콘)을 기존 세트에 섞어 쓸 때다. 출처가 다른 아이콘은 십중팔구 스트로크 굵기 기준이 다르므로, 섞어 쓰기 전에 반드시 굵기를 맞춰 다시 그려야 한다.

언제 쓰나

팀 전체가 공유하는 스트로크 굵기 기준값(보통 1.5px 또는 2px)을 정해두고, 외부에서 가져온 아이콘을 섞을 때 반드시 그 값으로 다시 그리세요. 작은 크기로 축소할 땐 비율보다 최소 가독 두께를 우선하세요.