[UI] 아토믹 디자인이란 무엇인가?

해당 글은 추후에 수정 보완될 수 있습니다. (1/15)

본론

아토믹 디자인 패턴은 UI 설계 방법 중 하나입니다. 복잡한 화면을 가장 작게 분해할 수 있는 원자 단위까지 나눔으로써, 각 요소 간 컴포넌트 재활용성은 높이고 복잡한 화면 구성을 쉽게 처리해주는 접근 방식 중 하나입니다.

아토믹 디자인이란

아토믹 디자인이란 브랜드 포트에 의해 만들어진 UI 설계 방법론입니다. 참고링크

Atom

해당 설계의 최소 단위. form, input ,button 같은 HTML의 태그나 최소의 기능을 가진 기능의 커스텀 태그 컴포넌트. 설계에 따라 속성에 따른 스타일 주입이 들어갈 수 있습니다. Card System에서 제목, 내용, footer 들이 각각 이에 해당됩니다.

Molecule

Atom들을 최소의 역할을 수행할 수 있게 합한 그룹. 입력을 받기 위한 form + label + input이 해당 됩니다. Card System에서 제목 + 내용 + footer들이 합쳐진 하나의 Card가 이에 해당됩니다.

Organisms

배치를 위한 layout 단위로 하나의 인터페이스를 형성하는 그룹. header, navigation 등이 이에 해당됩니다. Card System에서 Card들이 Grid layout으로 형성된 집합이 이에 해당됩니다.

Template

실제 Organisms들을 레이아웃이나 데이터 흐름을 연결합니다. 클래스 시스템의 클래스로, 객체의 설계도, 페이지의 설계도입니다.

Page

정의된 Template에 데이터를 넣어 뷰를 완성시키는 단계입니다. 클래스 시스템의 인스턴스, 객체의 구현체, 페이지 설계도로 그린 페이지 그 자체입니다.

아토믹 디자인의 장점

아토믹 디자인의 장점은 5단계로 컴포넌트를 나누면서, 자연스럽게 컴포넌트 재활용성을 높이는 구조로 컴포넌트를 설계하게 된다는 점입니다.

1) 컴포넌트 재활용성을 극대화하는 방식으로 설계할 수 있습니다.
2) React의 렌더링 최적화에 효과적인 설계 방법 중 하나입니다. 상태를 분산해 적용하기 때문에 상태 변화에 따른 렌더링이 작은 범위로 이루어져 성능을 최적화시키기 좋습니다.
3) 어플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있으며, 스타일 가이드와 같은 도구에서 볼 수 있다. 그리고 통합 개발을 할 때, 백엔드 어플리케이션의 로직에 의존하지 않는다는 장점이 있다.
4) 특정 컴포넌트에 CSS가 강하게 결합되어 있기 때문에 CSS를 훨씬 잘 관리할 수 있다. 이를 위해서는 어플리케이션의 구조에 따라 컴포넌트에서 사용되는 CSS만 렌더링하도록 해야 한다.

아토믹 디자인의 단점

아토믹 디자인의 단점은 틀에 맞추다보니, Props가 많아지게 되고 재활용성은 높지만 실질적인 역할에 충실하지 못할 수 있습니다.

1) 사전 학습이 있어야 수월하게 진행할 수 있다.
2) Atomic 디자인 방식으로 UI가 디자인되지 않으면, 작성해야 할 컴포넌트가 많아지게 됩니다.
3) 컴포넌트에 대한 유지보수가 어려워집니다. 컴포넌트들이 많아짐으로 인해, 관리해야 할 대상이 많아지게 되고 자연스럽게 유지보수가 어려워집니다.
4) 재활용성을 위해 특정 계층의(Atoms, Molecules) 컴포넌트가 지나치게 복잡해지게 됩니다.
5) 아토믹 디자인의 틀에 맞추기 위해, 작업해야 하는 시간이 더 늘어납니다.

아토믹 디자인은 적용되어야 하면 개발만 패턴 적용되면 안되고 디자인도 애초에 아토믹 패턴으로 가야한다고 하네요. 이런 부분에서 현실적으로 딱 떨어지지 않는 면이 많이 있었습니다. 개인적으로는 전체적인 부분을 다 머릿 속으로 그리면서 UI를 만들면 괜찮은 접근방법일 것 같은데, 그렇지 못한 상황에서는 비용이 크다는 생각이 들었습니다. 변화에 유동적이지 못하고 별 다른 기능이 없음에도 여러 컴포넌트들을 만들어야 하는 단점이 있습니다. 그로인해 오랜 시간이 소요되게 됩니다.

여러분의 선택은?

팀 단위로 소프트웨어를 개발할 때, 아토믹 디자인 패턴을 적용하는 것은 협업을 높일 수 있다고 봅니다. 단점은 팀에서 새로운 방식에 적응하기 위한 학습이 필요하고, 제대로 학습하지 못했을 경우 오해와 혼란을 야기 할 수 있다고 생각합니다. 전체적인 UI가 전부 나오고 변경 가능성이 낮다면, 좋은 선택입니다만. Agile하게 개발하는 조직에서는 선택하기 어려운 부분이 있습니다.

참고 링크

https://sumini.dev/guide/009-dont-use-atomic-design/
https://velog.io/@minkuk90/93%EC%9D%BC%EC%B0%A8
https://bradfrost.com/blog/post/atomic-web-design/