디자인 시스템에서 왜 아토믹 디자인 방법론을 적용하나?

디자인 시스템에서 왜 아토믹 디자인 방법론을 적용하는가?

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

디자인 시스템 구축을 진행하면서 아토믹 디자인 방법론에 대한 공부를 하게 되었는데요, 왜 아토믹 디자인 시스템을 적용하는가에 대하여 글을 더 써보려고 합니다.

왜 아토믹 디자인을 사용하나?

UI설계 방법 - 아토믹 디자인

아토믹 개념정리

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

아토믹 디자인 방법론의 '장점'

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

1) 컴포넌트 재활용성을 극대화하는 방식으로 설계할 수 있습니다.

2) React의 렌더링 최적화에 효과적인 설계 방법 중 하나입니다. 상태를 분산해 적용하기 때문에 상태 변화에 따른 렌더링이 작은 범위로 이루어져 성능을 최적화시키기 좋습니다.

3) 어플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있으며, 스타일 가이드와 같은 도구에서 볼 수 있습니다. 그리고 통합 개발을 할 때, 백엔드 어플리케이션의 로직에 의존하지 않는다는 장점이 있습니다.

4) 특정 컴포넌트에 CSS가 강하게 결합되어 있기 때문에 CSS를 훨씬 잘 관리할 수 있습니다. 이를 위해서는 어플리케이션의 구조에 따라 컴포넌트에서 사용되는 CSS만 렌더링하도록 해야 합니다.

아토믹 디자인 방법론의 '단점'

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

1) 사전에 디자이너, 개발자 동료들과 아토믹 디자인 방법론에 대한 학습이 있어야 수월하게 진행할 수 있습니다.

2) Atomic 디자인 방식으로 UI가 디자인되지 않으면, 작성해야 할 컴포넌트가 많아지게 됩니다.

3) 컴포넌트에 대한 유지보수가 어려워집니다. 컴포넌트들이 많아짐으로 인해, 관리해야 할 대상이 많아지게 되고 자연스럽게 유지보수가 어려워집니다.

4) 재활용성을 위해 특정 계층의(Atoms, Molecules) 컴포넌트가 지나치게 복잡해지게 됩니다.

5) 아토믹 디자인의 틀에 맞추기 위해, 작업해야 하는 시간이 더 늘어납니다.

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

디자이너와 개발자의 디자인 시스템

디자이너와 개발자가 고려하는 재사용성

아토믹 방법론을 사용하는 디자인 시스템을 만드는 이유는 디자이너와 개발자의 이해관계에 있습니다.

디자이너는 디자이너의 입장에서 아래와 같은 부분을 고려하여 디자인을 합니다.

재사용성

유지보수성

확장성

개발자 역시 개발자의 입장에서 객체지향성, 유지보수, 확장성, 재사용성을 고려하여 코드를 작성(컴포넌트를 제작)합니다. 디자이너가 신경을 많이 쓰지 않는데 개발자들의 입장에서는 코드를 짤 때 간결성이 중요합니다. 간결성이란 잘짠 효율적인 코드를 뜻하는데 이는 성능이슈에서도 중요합니다. 그래서 디자이너는 디자인시스템을 만들때 아토믹 디자인 방법론을 적용하여 개발자가 효율적인 코드를 작성할 수 있도록(효율적으로 컴포넌트를 제작할 수 있도록) 재사용이 가능하고 유지보수가 가능하며 확장성이 있도록 시스템을 만들고 가이드 라인을 정립해야합니다.

결론

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

디자이너와 개발자가 각자 포지션에서 고려해야하는 '재사용성'에 대해 가장 적용하기 좋은 것이 '아토믹 디자인 방법론'입니다.