면접관이 가끔 물어보는 디자인 시스템 구축 방법론 - 아토믹 디자인
1. 아토믹 디자인이란? 아토믹 디자인(Atomic Design) 은 2013년 미국의 디자이너 Brad Frost가 제안한 디자인 시스템 구축 방법론입니다. 이 방법론은 화학의 원자(Atom), 분자(Molecule), 유기체(Organism) 등 생물학 및 화학에서 차용한 계층적 구조를 UI 구성에 적용한 것입니다. 목표는 UI 구성요소를 작은 단위로 나누어 재사용성과 일관성을 높이고, 궁극적으로 효율적인 디자인 시스템을 만드는 데 있습니다. 2. 핵심 철학: 구성의 계층화 Brad Frost는 사용자 인터페이스(User Interface)는 더 작은 단위의 구성 요소들이 조합되어 형성된다고 보았습니다. 이를 아래와 같이 다섯 단계로 나누어 설명합니다 2.1 Atom (원자) - 정의: 가장 기본 단위의 UI 요소. 더 이상 나눌 수 없는 최소 단위입니다. - 예시: HTML 태그(<button>, <input>, <label>), 색상, 폰트, 간격 등 - 특징: 기능은 없고 스타일 중심이며, 디자인 시스템의 가장 작은 구성 블록 2.2 Molecule (분자) - 정의: 두 개 이상의 원자들이 결합해 기능을 수행하는 UI 요소입니다. - 예시: <label> + <input>을 결합한 검색창, 버튼 + 아이콘 등 - 특징: 단일 목적의 UI 기능 수행, 재사용 가능성이 높은 구성 2.3 Organism (유기체) - 정의: 여러 개의 분자나 원자가 결합되어 복잡한 UI 구조를 형성합니다. - 예시: 헤더(header) 영역 - 로고, 내비게이션, 검색창 포함. - 특징: 비교적 독립적인 UI 단위, 페이지 내 주요 구조를 이룸. 2.4 Template (템플릿) - 정의: 유기...