아토믹 디자인 패턴의 재사용성을 위한 고려 사항

아토믹 디자인 패턴은 디자인 요소들을 컴포넌트 단위로 구성하여 이를 조합하여 사용하는 것이 중요한 컨셉인 만큼, 가장 최소 단위인 아톰단계의 컴포넌트에서의 조합성과 재사용성이 얼마나 잘 구현되었는지가 중요하다고 할 수 있다.

예를 들면 html에서 공간을 나눌 때 사용하는 div태그는 박스 구조의 웹 구조를 구현할 때 사용할 수 있는 가장 기본적인 단위로서 여러 속성을 사용한다.

가장 기본적으로는 사이즈, 패딩, 마진, 위치, 백그라운드 색상, 백그라운드 이미지 등등을 사용하여 그 하위에 여러 컴포넌트를 위치시킨다.

해당 요소를 아토믹 디자인 패턴으로 구현한다면 Box컴포넌트로 그 역할을 구현할 수 있을 것이다.

하지만 아토믹 디자인 패턴으로 컴포넌트를 구성한 이상, 해당 컴포넌트에 디자인 속성을 넘겨줄 방식을 잘 선택해야 할 것이다.

예를 들면 color, padding, margin과 같은 경우에는 box컴포넌트에서만 사용하는 디자인 속성이 아닌, 이미지나, 텍스트에서도 사용할 수 있는 만큼, 커스텀 컴포넌트로 구성한 아톰 컴포넌트의 디자인 속성을 값을 넘겨주는 데 있어서도 고민을 해야하고, 여러 컴포넌트를 사용하더라고 디자인 관련 속성은 동일하게 사용할 수 있도록 구성해야 할 것 이다.

그리고 아토믹 디자인 패턴으로 개발을 해보면서 여러가지 이슈가 있었지만 그중에서 동료 개발자 분과 의견을 달리 한 것이 컴포넌트이 역할 분담을 어디까지 할 것인지? 그 경계에 대한 입장에 차이가 있었다.

본인은 하나의 컴포넌트에서 너무 많은 역할을 부담하기 보다는 디자인 구성 요소 별로 컴포넌트를 나누어서 역할을 하도록 하는 걸 생각을 했었다.

예를 들면 박스 컴포넌트의 역할을 하나의 페이지에서 여러 구역으로 나누고, 하위 컴포넌트를 담는 역할을 한다고 하면, 다음과 같은 속성을 가지게 된다.

1. flex

2. background

3. position

4. padding

5. margin

...

이 중에서도 나는 처음에는 flex, position에 따라 박스 컴포넌트를 나누는 게 어떨까 생각을 했고, 이것이 컴포넌트를 사용할 때, 의미적으로 분리하여, 유지보수에 의미를 부여하고 싶었다.

하지만 이 방식을 하나의 큰 문제가 있었으니, 애초에 하나의 컴포넌트에서 처리할 수 있던 스타일 속성을 여러 컴포넌트로 나누었으니 실제로 사용할 때는 flex 박스에 position 박스를 중첩해서 사용하는 경우에 생겨나기 시작했고, 이로 인해 HTML 요소들이 너무 많이 겹쳐있게 되어 결국에는 디버깅과 유지보수에도 큰 이득이 없다는 것을 깨달았다.

이처럼 아토믹 패턴을 사용할 때, 디자인 속성들이 분배를 잘하는 것도 중요하다는 걸 알 수 있었다.

 

앞으로도 아토믹 디자인 패턴을 사용하면서 어떤 걸 고려 해야 할 지 알아 보려한다.