디자인 아틀라스
EN
⟳ 디자인 프로세스

아토믹 디자인

Atomic design

원자(atom)·분자(molecule)·유기체(organism) 화학 비유로 인터페이스를 작은 부품부터 조립해 올라가는 브래드 프로스트의 방법론.

다른 이름: Atoms molecules organismsBrad Frost
···
html
<div class="stage">
  <div class="lbl" id="lbl">atoms</div>
  <div class="canvas" id="canvas"></div>
</div>
css
.stage{width:94%;height:88%;display:flex;flex-direction:column;gap:8px}
.lbl{font:700 11px/1 monospace;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.canvas{flex:1;position:relative;border:1px dashed var(--line);border-radius:10px;overflow:hidden}
.pc{position:absolute;border-radius:5px;transition:left .7s ease,top .7s ease,width .7s ease,height .7s ease,background .7s ease;}
.atomc{background:var(--accent)}
.atomc.alt{background:var(--accent-2)}
.atomc.alt2{background:var(--accent-3)}
.molc{background:transparent;border:1.5px dashed var(--muted);border-radius:8px}
.orgc{background:var(--surface);border:1px solid var(--line);border-radius:10px}
js
const canvas = document.getElementById('canvas');
const lbl = document.getElementById('lbl');
function box(cls, l, t, w, h) {
  const d = document.createElement('div');
  d.className = 'pc ' + cls;
  d.style.left = l + '%'; d.style.top = t + '%'; d.style.width = w + '%'; d.style.height = h + '%';
  canvas.appendChild(d);
  return d;
}
const a1 = box('atomc', 10, 15, 8, 14);
const a2 = box('atomc alt', 22, 15, 8, 14);
const a3 = box('atomc alt2', 34, 15, 8, 14);
const stages = [
  function () { lbl.textContent = 'atoms'; },
  function () {
    lbl.textContent = 'molecules';
    a1.style.left = '8%'; a1.style.top = '40%'; a1.style.width = '10%'; a1.style.height = '20%';
    a2.style.left = '20%'; a2.style.top = '40%'; a2.style.width = '10%'; a2.style.height = '20%';
    a3.style.left = '32%'; a3.style.top = '40%'; a3.style.width = '10%'; a3.style.height = '20%';
  },
  function () {
    lbl.textContent = 'organisms';
    a1.style.left = '10%'; a1.style.top = '65%'; a1.style.width = '34%'; a1.style.height = '22%';
    a2.style.left = '10%'; a2.style.top = '65%'; a2.style.width = '34%'; a2.style.height = '22%';
    a2.style.background = 'transparent';
    a3.style.left = '10%'; a3.style.top = '65%'; a3.style.width = '34%'; a3.style.height = '22%';
    a3.style.background = 'transparent';
  },
  function () {
    lbl.textContent = 'atoms';
    a1.style.left = '10%'; a1.style.top = '15%'; a1.style.width = '8%'; a1.style.height = '14%'; a1.style.background = '';
    a2.style.left = '22%'; a2.style.top = '15%'; a2.style.width = '8%'; a2.style.height = '14%'; a2.style.background = '';
    a3.style.left = '34%'; a3.style.top = '15%'; a3.style.width = '8%'; a3.style.height = '14%'; a3.style.background = '';
  },
];
let s = 0;
setInterval(function () { stages[s % stages.length](); s++; }, 1600);

브래드 프로스트가 제안한 다섯 단계 모델입니다. 원자는 라벨·인풋·버튼처럼 더 쪼갤 수 없는 가장 작은 요소, 분자는 원자 몇 개가 모여 기능을 갖춘 단위(라벨+인풋+버튼 = 검색창), 유기체는 분자·원자가 모여 화면의 독립된 구역을 이루는 것(헤더, 상품 카드 목록)입니다. 그 위에 템플릿(실제 콘텐츠 없이 배치만 잡은 뼈대)과 페이지(실제 콘텐츠를 채운 최종 화면)가 있습니다.

디자인 시스템의 컴포넌트 구조와 자주 겹치지만 같은 말은 아닙니다. 디자인 시스템이 "무엇을 만들 것인가"의 목록이라면, 아토믹 디자인은 그 목록을 어떤 위계로 나누고 이름 붙일지에 대한 사고방식(멘탈 모델)에 가깝습니다. 원자·분자·유기체라는 이름 자체를 그대로 쓰지 않는 팀도 많습니다.

핵심은 "원자 → 분자 → 유기체"가 순서대로 밟는 프로세스가 아니라는 점입니다. 실제로는 유기체 단위로 화면을 구상하다가 거꾸로 필요한 원자를 뽑아내는 경우가 더 흔합니다.

언제 쓰나

컴포넌트 목록에 이름 붙이고 위계를 정할 언어가 필요할 때, 특히 디자인 시스템을 처음 설계하며 "이 컴포넌트는 얼마나 작아야 재사용 가능한가"를 논의할 때 씁니다.