[Unit 4] Atomic Design

Atomic Design

Atomic Design
최근 기술발전으로 인해 웹 환경이 빠르게 변화하고 있어 이런 변화에 따라, 디자이너와 프론트엔드 개발자들은 환경에 상관없이 일관된 사용자 경험을 제공하는게 더욱 중요해 졌다.
기존의 웹 디자인 방식은 각 페이지마다 디자인 요소를 개별적으로 만들고 관리하는 방식이었다. 하지만 이 방식은 프로젝트 규모가 커질수록 관리하기 어렵고, 일관성을 유지하기 어렵다.
이 문제를 해결하기 위해 아토믹 디자인이 등장했다.

아토믹 디자인은 UI를 물질의 가장 작은 단위인 원자(atom)처럼 최대한 쪼개고, 조합해 점진적으로 확장시켜 일관성 있는 디자인 시스템을 구축하는 것을 목표로 한다.

아토믹 디자인 구성요소

아토믹 디자인의 구성요소로는 원자에서 시작해, 분자, 유기체, 템플릿, 페이지가 있다.
이 구성요소는 웹을 여러 부분이 모인 하나의 전체이자, 동시에 여러 부분으로 이루어진 집합으로 이해하는 접근 방식에 가깝다.
이 접근 방식은 UI를 체계적이고 재사용 가능한 모듈로 구성하도록 도와준다.

• 원자(Atoms)
  디자인의 가장 기본적이고, 더이상 쪼갤 수 없는 구성 요소를 의미
  
• 분자(Molecules)
  원자들이 모여 하나의 단위로 작동하는 UI의 집합
  분자는 원자들이 결합해 더 복잡한 구조를 이루는 중간단계
  
• 유기체(Organisms)
  원자와 분자 더 나아가 유기체로도 구성될 수 있는 조금 더 복잡한 UI 구성 요소
  페이지의 특정 섹션, 헤더와 사이드바 같은 것들이 유기체로 만들어질 수 있다.
  
  
• 템플릿(Templates)
  블로그 게시물을 생각해보면 게시물의 내용은 각기 다르지만 모두 동일한 레이아웃을 사용한다. 그리고 여기에는 헤더, 게시물제목, 작성자정보, 본문 내용, 댓글 영역 등이 포함된다.
  이를 템플릿으로 만들어 요소들이 어떻게 배치되고 상호작용하는지 정의할 수 있다.
• 페이지(Page)
  아토믹 디자인에서는 데이터와 디자인의 분리가 중요하다.
  그래서 데이터 없이 단순한 UI요소들의 집합을 템플릿,
  데이터와 디자인이 합쳐진 요소를 페이지로 구분한다.
  페이지는 복제한 템플릿에 실제 콘텐츠들을 채워 넣은 요소로 완성된 UI이고 가장 구체적인 단계이다.
  
  
  아토믹 디자인 장점
• 모듈화와 재사용
• 유지 보수의 편리함
• 확장성

내용 참조, 출처 : 코드스테이츠
이미지 출처 : 코드스테이츠