업무프로세스 개선 - 첫번째 : 왜 아토믹 방법론일까?
디자인팀의 빅피쳐
디자인 시스템을 도입하고 적용하는 이야기에서 우리가 자주 볼 수 있는 단어가 있습니다.
“Atomic(아토믹) 방법론”
안녕하세요, HBsmith의 디자인팀 관리를 맡고 있는 유정빈입니다.
HBsmith는 국내 유일의 QA 자동화 테스트/모니터링 대행 서비스를 제공하고 있는 스타트업입니다.
지난 5월부터 HBsmith 디자인팀에 합류하게 되며, 저희 디자인팀도 현재 라이브 되고 있는 서비스의 다음 단계로 도약을 하기 위한 발판으로서 업무 프로세스를 정비하는 시간을 가져야 한다고 판단이 되었습니다. HBsmith도 아토믹 방법론을 기반으로 업무 프로세스를 정리하고 디자인 시스템 구축을 준비하고 있기에 오늘은 아토믹 방법론이 왜 디자인 시스템에 적합한 방법론이며 이렇게나 많이 활용이 되는지에 대해 조금 살펴보려고 합니다.
왜 많은 디자인 시스템을 도입하는 조직들은 이 방법론의 개념을 기반으로 디자인 시스템을 만들게 되는 걸까요?
아토믹 방법론은 무엇인가?
UI디자인은 애플의 아이폰 등장으로 시작된 모바일 디바이스의 획기적인 발전과 함께 큰 변화를 겪었다고 생각 됩니다. 그 시기부터 사용성에 대한 부분과 함께 UI 디자인에 대한 중요성 또한 크게 부각이 되었습니다. 이런 흐름과 함께 서구권을 중심으로 더 효율적이고 일관성 있는 디자인 프로세스를 위한 디자인 시스템에 대한 논의가 많이 되어 왔으며, 2013년 브래드 프로스트(Brad Frost) 라는 스타일가이드 관련 경험도가 높은 웹디자이너가 제시한 'Atomic Design'이라는 개념이 주목받기 시작합니다.
Atomic Design 방법론은 ‘디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식’ 을 이해하기 쉽도록 생물학적 단위의 개념으로 정의한 방법론입니다.
(Brad Frost의 Atomic design : https://atomicdesign.bradfrost.com/ )아토믹 방법론은 왜 디자인 시스템에 적합한가?
디자인 시스템은 여러 형태와 단위로 존재하지만, 모두가 공통적으로 중요하게 생각하는 부분은 “일관성”과 “확장성” 그리고 업무와 커뮤니케이션의 “효율성”입니다. 이러한 효과를 위해선 모두가 그 기준을 이해하고, 사용하는 데에 어려움이 없어야 합니다. 그리고 개발과 디자인이 이전과 달리 좀 더 긴밀하고 밀접한 관계를 가지고 함께 만들어 나가게 되는 과정을 가지게 됩니다.
아토믹 방법론을 제시한 브래드 프로스트는 위에 언급 했던 바와 같이 스타일 가이드 관련 경험도가 높은 디자이너입니다. 그가 개념을 정리하는 영감은 학창 시절의 연구실에서 얻은 생물학적 지식에서 받았지만, 그 개념이 정리되는 기반을 살펴보면 코드를 통해 UI가 완성되는 결과물의 양상과 동일합니다.
원자의 개념을 통해 분자 구조를 만들 수 있는 가장 간단한 형태인 버튼을 예로 들어 보죠.
위와 같이 분자의 단위는 UI 가장 기본적인 모양과 색을 구성하는 코드로 변환이 가능합니다.
분자는 단독으로 기능은 구현되지 않지만 기능을 내제한 UI 컴포넌트 이며, 유기체의 개념은 단독으로 기능이 구현되는 모듈의 단위가 될 수 있습니다. 이런 개념과 구조적 연계성을 가지고 있고, 설계의 관점에서 접근을 하기 때문에 디자인 시스템의 구축에 ‘아토믹 방법론’의 개념이 가장 널리 그리고 적합하게 사용이 되는 것이라고 생각 됩니다.
물론 아토믹 방법론은 좋은 개념이지만 단위의 연관성이 복잡하다는 단점도 가지고 있습니다.
아래는 '아토믹 방법론'의 기본 개념을 토대로 일부 정의를 보강한 HBsmith 디자인팀의 정의에 대한 내용입니다.
유기체(Organisms) 단계를 개발의 모듈 단위로 개념적 정의를 추가하는 단계를 거쳐 내부적으로 개발 적용 시 구조를 좀 더 효율적이고, 쉽게 이해하기 위한 개념을 추가했습니다. 또한 분자 단위의 정의에서 자주 사용하는 컴포넌트를 기준으로 라이브러리를 분리하는 방식도 거치고 있습니다.
디자인 시스템을 구축하는 다른 조직들 중에는 원자의 단위를 일부 제외하고, 분자 이상의 컴포넌트 단위의 개념을 도입하는 곳도 있습니다.
이렇게 방법론을 그대로 적용을 하거나 단일 사용을 하기 보다는 많은 조직들이 그렇듯 여러가지 좋은 방법들을 찾아 우리의 조직과 서비스에 맞는 프로세스와 시스템을 구축하는 것이 중요하다고 생각 됩니다.
지금까지 왜 '아토믹 방법론'을 사용하는가에 대해 좀 더 실무적인 관점에서의 이야기를 해보았습니다.
디자인 시스템을 구축하며 방법론에 대한 이야기가 나올 때 '왜?' 라는 궁금증을 가지셨을 분들께 조금이나마 공감이나 도움이 될 수 있었기를 바랍니다. 업무 프로세스 개선과 함께 앞으로 더 많은 변화를 가질 HBsmith가 되겠습니다.
감사합니다.
[참고자료]
- https://atomicdesign.bradfrost.com/
- https://blog.hyungsub.com/118
인공지능 QA테스트 자동화 HBsmith 서비스가 궁금하시다면, 아래 메일로 연락부탁드립니다.
✉️ hello@hbsmith.io
무료 평가판 신청
#인공지능 #QA #TEST #모니터링 #아웃소싱 #대행
