새로 쓰는 사용 설명서

아토믹 디자인 패턴은 디자인 요소들을 컴포넌트 단위로 구성하여 이를 조합하여 사용하는 것이 중요한 컨셉인 만큼, 가장 최소 단위인 아톰단계의 컴포넌트에서의 조합성과 재사용성이 얼마나 잘 구현되었는지가 중요하다고 할 수 있다. 예를 들면 html에서 공간을 나눌 때 사용하는 div태그는 박스 구조의 웹 구조를 구현할 때 사용할 수 있는 가장 기본적인 단위로서 여러 속성을 사용한다. 가장 기본적으로는 사이즈, 패딩, 마진, 위치, 백그라운드 색상, 백그라운드 이미지 등등을 사용하여 그 하위에 여러 컴포넌트를 위치시킨다. 해당 요소를 아토믹 디자인 패턴으로 구현한다면 Box컴포넌트로 그 역할을 구현할 수 있을 것이다. 하지만 아토믹 디자인 패턴으로 컴포넌트를 구성한 이상, 해당 컴포넌트에 디자인 속성을 넘겨줄..

웹 사이트를 돌아다니다 보면 위 그림과 같이 한 섹션에 여러 개의 카드 영역이 한 줄에 일정 간격을 두고 배치된 것을 본 적이 있을 것이다. 위 캡처본과 같이 구글에서 검색 카테고리를 보여주는 부분인데, 이미지, 동영상.. 등과 같은 카테고리를 담고 있는 하나의 섹션이 있고, 섹션 안에 카테고리 아이템이 일정 간격을 두고 한 줄로 배치되어 있다. 아토믹 디자인 패턴을 공부하면서 해당 부분을 추상화하는 방법은 나름대로 연구해보았다. 먼저, 구글 검색 카테고리 영역을 보면 가장 먼저 떠오는 것이 카테고리아이템을 담을 전체 섹션과, 아이템을 한 줄로 배치해 줄 컴포넌트로 구성되어 있음을 알 수 있다. 그리고 먼저, 아톰에 해당하는 요소로 FlexBox, Section을 떠올렸고, FlexBox와 Section..