[프로덕트 디자인] Atomic Design System, 과연 효율적일까?

Atomic Design System

웹 디자인을 구성하는 디자인 요소들을 계층적으로 구성하여 일관된 디자인 가이드라인을 제공하는 디자인 시스템

5가지 구성요소

1. 원자(Atoms): 디자인의 기본 단위로써, 버튼, 텍스트, 아이콘 등과 같이 가장 작은 단위의 디자인
2. 분자(Molecules): 원자들이 조합되어 형성되는 더 복잡한 디자인 요소로써, 검색 폼, 네비게이션 바, 카드 등과 같이 여러 원자들이 함께 동작하는 요소
3. 유기체(Organisms): 분자들이 조합되어 더 큰 디자인 요소로써, 헤더, 푸터, 사이드바 등과 같은 것들
4. 템플릿(Templates): 디자인의 구조와 레이아웃을 정의하는 요소로써, 페이지의 전체적인 구성을 표현하는 요소
5. 페이지(Pages): 실제 컨텐츠가 표시되는 곳으로써, 웹 페이지의 실제 화면

장점

• 일관된 디자인 가이드라인을 공유하여 팀 내에서 효율적인 디자인 작업을 진행할 수 있습니다.
• 재사용 가능한 디자인 요소들을 활용하여 디자인 작업을 빠르게 진행할 수 있습니다.
• 계층적인 구조로 디자인이 구성되어 있어 디자인 변경이 필요한 경우에도 일관된 방식으로 수정이 가능합니다.
• 다양한 디자인 툴이나 코드 기반의 디자인 시스템을 활용하여 디자인 요소들을 구성할 수 있습니다.
• 피그마를 사용한다면, 프로토타입 설정이 간편합니다

단점

• 다양한 요소들을 분리하여 조합하므로, 초기설정이 복잡할 수 있습니다.
• 학습 곡선이 존재합니다. 다양한 조합으로 조립하는 작업이 익숙하지 않은 디자이너나 개발자에게는 작업이 어려울 지도 모릅니다.
• 엄격한 가이드라인과 꾸준한 관리가 필요합니다. 여기에는 팀원간의 커뮤니케이션도 포함됩니다.
• 디자인 유연성이 제한됩니다. 디자인 시스템과 가이드라인 안에서 움직여야하다보니, 요소들을 자유롭게 조합하고 변경하는 데서 어려움이 있을 수 있습니다.

도입하기 전 체크사항

아래는 atomic design system을 적용하기 전 확인해 보면 좋을 리스트입니다.

회사 규모 : 스타트업 , 중견 , 중소, 대기업 등

회사 규모의 경우, 디자인시스템을 도입하는 과정에 있어서 중요합니다, 업무 방식이 이미 시스템적으로 짜여진 조직이라면 atomic design system을 도입하기가 어려울 수 있습니다.

디자이너 인원 수 (중요)

그들이 직접 가이드라인을 짜고, 시스템을 만드는 주체라는 점에서 중요합니다. 너무 적은 인원수로 시스템을 도입하게 되면, 효율적이지 않은 디자인 시스템을 만들 수 있습니다.

관계자들의 업무 스타일 혹은 조직문화

업무스타일 혹은 조직문화는 atomic design system을 학습시키고 도입을 설득하는 데 중요합니다. 함께 쓰는 팀원이 학습하는 데 시간이 오래 걸리거나, 비효율적이라고 느끼면 쓰는 이유가 없는 것과 다름 없으니까요.

그렇다면, 어떻게 활용해야 좋을까?

결과적으로 저는 자주 쓰일 요소들에 한해 원자에서 유기체까지만 atomic화 해 사용합니다. 이를테면 footer, GNB, textfield, button, tooltop 같은 것들 말이죠.

자세한 설명에 앞서 제가 일하는 상황을 알려드리겠습니다.

• 회사 규모 : 스타트업
• 디자이너 1명(본인),
• 인하우스 프론트 개발자 1명
• 아웃소싱 개발자 다수
• 조직 문화 : 유연하게 움직이는 대신, 전사적으로 확립된 시스템은 부족
• 관계자 업무 스타일 : 팀플인듯 갠플인듯, 갠플인들 팀플인듯

위 상황 속에서, 언제 어디서나 일관되게 사용할 수 있는 디자인 시스템을 만들기란 불가능했습니다. 사실 시도는 해보았으나 이내 그만뒀죠. 이유는 디자인 시스템을 만들기 위해, 한번에 끝낼 작업을 두번하고 있다는 생각 때문이었습니다.
또 다른 이유는 작업의 제한성이었습니다. 원자를 만들고 그것보다 더 확장된 요소를 만들 때, 그대로 써도 되는 경우도 있었지만, 여러 요인들로 인해 수정을 해야하는 상황도 있었죠. 이 경우에는 design system 자체를 수정하거나 혹은 상황에 적용하기 어려운 기존 요소를 어떻게든 쓸 수 밖에 없었습니다.

---

아래는 atomic design system을 처음으로 제안한 bradfrost의 웹사이트입니다. 실무에서 온전히 사용하긴 어려움이 있지만 그래도 꽤나 멋진 이론이라고 생각합니다. 관심 있는 분들은 아래 링크에서 atomic design system에 대해 더 자세히 알아보세요!

https://atomicdesign.bradfrost.com