2022-02-22 TIL

Fact

• 기존 프로젝트에 Atomic Design Pattern을 고려 중인데 생각해야 할 것이 참 많다. 어떤 것을 기준으로 원자, 분자, 유기체, 템플릿, 페이지로 나눌 것인지? 내가 생각하기엔 정답이 명확하지 않다. 이미 짜인 코드를 위 구조대로 분리하려고 하니 머리가 아프다.

Feelings

• 다크 모드 기능을 구현하던 중 컴포넌트를 추상화하고 정리의 필요성을 느껴 Atomic Design Pattern을 도입하려고 하고 있다. 물론 현재 내 문제를 Atomic Design Pattern이 해결해 줄 수는 있겠지만 효율성이 좋은지는 모르겠다.
• 구조를 5개로 나누는 건 너무 많다. 내가 보기에도 분자인지 유기체인지 무엇으로 구분해야 할지 감이 안 오는 컴포넌트들이 있고, 진짜 재사용하지 않을 것 같은 컴포넌트들이 있는데, 어떻게 분리하는 게 좋을지 솔직하게 모르겠다. 그냥 패턴을 참고만 하고 어떻게 하면 효율적으로 사용할 수 있는지 생각해 봐야겠다.

Findings

구글 검색만으로도 쉽게 Atomic Design Pattern이 뭔지 알 수 있었다. 간단하게 요약하면 컴포넌트를 5가지 레벨로 패턴화 한 것이다.

• atom (원자)
• molcules (분자)
• organism (유기체)
• template (템플릿)
• page (페이지)

소프트웨어는 끊임없이 변하기 때문에 변경에 유연하게 대응하는 코드를 작성해야 한다. 자연스럽게 변경에 잘 대응하고 변경에 따른 영향 범위를 최소화 할 수 있도록 컴포넌트를 디자인해야 하고 패턴으로부터 이 목적을 달성할 수 있으면 유용하다고 볼 수 있다.

물론 아토믹 디자인 패턴이 내 문제를 100% 해결해 줄것이라고 생각하지 않는다. 여러 글들을 읽어보면 장점은 존재하나 단점도 존재하는 패턴이라고 생각한다. 예를 들자면 사라마다 기준이 다르다 어떤 사람이 생각하기엔 분자가 될 수 있고, 또 다른 사람이 생각하기엔 유기체가 될 수 있다. 서로 상의 없이 구조를 나누다보면 혼란을 낳을수 있고, 기존의 원자나 분자에서 한 부분만 변경해서 사용하고 싶으면 새로운 컴포넌트를 정의해야한다. 결국 확장 가능한 컴포넌트라고 할 수 없다고 생각한다. 하지만 현재 내가 겪고 있는 문제를 위에서 말한 패턴이 도움을 줄 수 있다고 생각했다.

아토믹 디자인 패턴 읽기 좋은 글

Future Action

• 패턴을 참고만하고 효율적으로 컴포넌트를 유연하게 만드는 방법이 없을까? 최대한 공부해서 적용해야겠다.