[Day 20] 아토믹 디자인 & 디자인 시스템

📍목차
1. 아토믹 디자인
2. 디자인시스템

---

1. 아토믹 디자인

웹 디자이너 브래드 프로스트(Brad Frost)가 제안한 디자인 시스템 구축 방법론으로, 화학의 원소 주기율표에서 영감을 받아

가장 작은 단위인 원자부터 페이지 전체에 이르기까지 UI 구성 요소를 체계적으로 분해하고 조합하여 모듈화

 

** 성능이 업데이트될 때, 유지보수가 편리해진다

1) 디자인 토큰: 색상, 글자, 여백 같은 디자인의 기본이 되는 것들

2) 원자: 더 이상 나눌 수 없고, 나누면 기능을 잃는 가장 작은 UI 구성요소

ex. 라벨 / 입력 필드 / 버튼

3) 분자: 여러 개의 원자가 모여 분자를 구성

ex. 체크박스 리스트

4) 유기체: 인터페이스 디자인에서 뚜렷한 섹션을 형성 → 플랫폼에 따라서 구성은 달라질 수 있음

ex. 헤더 / 로고 / 메뉴 / 검색창

-------------------------------------------------------------- 여기까기만 화학에 비유한 것

5) 템플릿: 페이지를 만들 수 있도록 여러 개의 유기체, 분자로 구성

ex. 와이어프레임

6) 페이지: 템플릿에 실제 컨텐츠를 넣어 만든 구체적인 결과물 → 디자인의 최종 결과물

---

2. 디자인 시스템 

제품이나 서비스를 일관성 있고 효율적으로 설계하고 개발하기 위해 필요한 모든 요소를 한데 모은 종합적인 가이드이자 도구 모음.

단순히 시각적 요소만을 모아 놓은 스타일 가이드(Style Guide)나 컴포넌트 라이브러리(Component Library)를 넘어,

디자인 원칙과 표준, 그리고 디자인팀과 개발팀이 공유하는 공통된 언어를 포괄하는 포괄적인 체계

 

- 반복 사용될 것 같은 영역 표시

- 컬러 뽑기

- 텍스트 뽑기

반복될 영역 (요소)

컬러, 텍스트 뽑기

 

설정

 

---

실습 내용. 디자인 시스템 클론 제작

 

좋은 피드백 받아서 기부니가 좋음 ㅎ