아토믹 디자인(Atomic Design)의 구조 이해(라이트ver)

아직 익숙하지 않은 아토믹 디자인의 구조에 대해 간단히 정리해보고자 한다

Atomic Design은 디자인 시스템을 중심으로 한 설계 방법에 대해 쓰인 Brad Frost의 책 제목이다.

웹상에 공개된 서적이라 ↓ 링크로 들어가서 읽을 수 있다.

http://atomicdesign.bradfrost.com/

Atomic Design by Brad Frost

Atoms 원자(原子)	UI구조상 더 이상 쪼갤 수 없는 제일 작은 단위	ex) button, input, img ...
Molecules 분자(分子)	Atoms를 조합한 단순한 그룹 단위	ex) label + button + input => 검색창
Organisms 유기체(有機体)	Atoms나 Molecules, 다른 Organisms를 조합하여 만드는 요소	ex) 로고 + 메뉴 + 검색창 => 헤더 사이트맵 + 링크 => 풋터
Templates 템플렛 (テンプレート)	Atoms~Organisms 컴포넌트를 배치한 프레임, 글/그림은 샘플	ex) WP나 블로그의 새 글/이미지 작성 전 형태
Pages 페이지(ページ)	템플렛에 구체적인 콘텐츠를 삽입한 형태	ex) 공개 중인 웹사이트, 웹페이지

이미지 출처 : atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces

클라이언트 프로젝트에서 sass파일을 컴포넌트 분할하여 폴더를 나누는데 작업 중 새로 만들어서 추가하다 보면

이게 atoms인지 molecules인지 헷갈려서 혼자 동공 지진할 때가 있다.

개념 정리를 안 한 탓에....

오늘 정리해보니 확실히 알 것 같아 이제 헷갈리지 않을 듯!