LG U+에서 진행하는 유레카(URECA) 융합 프로젝트인 'POV' 팀프로젝트를 진행하면서 Atom 기반의 디자인 시스템을 구축하고, 이를 바탕으로 컴포넌트로 확장해나가는 Bottom-up 방식으로 프론트엔드 설계를 진행하였다.

결과적으로, TypeScript와 Storybook을 활용하여 리액트 디자인 시스템을 구축하였다.

• 최종 결과물
  • Figma
  • Storybook
  • NPM
  • Design System repo

해당 시리즈에서는 어떻게 디자인 시스템을 구축했는지 방법을 다루고, 디자인 시스템을 도입한 이유와 그 과정에서 고민한 부분들, 어떤 이점이 있었는지에 대해 풀어보려고 한다.

시리즈에 담을 내용들은 다음과 같다.

• 디자인 시스템 이해하기
• Storybook로 컴포넌트 문서화하기
• 디자인 시스템 구축하기
• 디자인 시스템 라이브러리 NPM에 배포하기
• 기존 프로젝트에 Storybook 적용하기

디자인 시스템

디자인 시스템은 디자인 및 개발을 효율적으로 관리하기 위한 일관된 UI 패턴, 컴포넌트, 코드 등을 포괄하는 시스템이다.

이는 단순히 UI 컴포넌트나 스타일 가이드의 모음이 아니라, 제품의 일관성과 효율성을 높이는 데 필요한 모든 요소를 포함한다.

기업에서도 일종의 디자인 시스템 가이드를 만들기도 하고, 이 디자인 시스템 가이드를 활용하여 혼란을 방지하고 효율적인 작업이 가능하도록 한다.

실제 유니콘 기업인 토스는 여러 시행 착오를 통해 디자인 시스템을 구축, 1000 시간을 절약했다고 알려져있다.

디자인 시스템 도입 이전의 문제점

해당 프로젝트에서 디자인 시스템의 영역은 필수 구현 사항이 아닌 옵션의 영역이었지만, 이전 프로젝트에서 겪었던 문제점들을 개선하기 위해 도입하게 되었다.

[컴포넌트의 파편화]

이전에 2번의 프로젝트 경험을 하면서, 이전 프로젝트에서는 여러 팀원들이 각기 다른 방식으로 개발하면서 페이지의 일관성이 떨어지고 컴포넌트 코드의 중복으로 인해 효율적이지 않은 경험을 하였다.

Tailwindcss, bootstrap 등과 같은 UI 라이브러리, emotion, styled 등 디자인을 구현하기 위한 방식은 다양하지만, 자칫하면 일관되지 않은 디자인 및 중복적인 코드가 대량 발생하고 코드의 유지보수 또한 저하될 수 있다.

따라서 엔지니어링 측면에서 비효율적인 작업을 방지하고자 디자인 시스템 도입하는 것이 좋을 것이라 판단하였다.

디자인 시스템의 기대 효과

물론 디자인 시스템을 구축하기 위해서는 초기 세팅에 시간이 들 것이다.

하지만 향후 프로젝트 규모가 커졌을 때를 생각한다면 디자인 시스템으로 프로젝트를 관리하는 것이 결국엔 시간을 줄이는 것이라 판단했다.

다음과 같은 기대 효과를 가지고 디자인 시스템을 구축했다.

• UI 컴포넌트를 통합적으로 관리
• 일관된 사용자 경험 제공
• 개발자 입장의 생산성 및 재사용성 향상

아토믹 패턴 (Atomic design)

어떤식으로 디자인 패턴을 디자인 시스템에 도입했는지 상세하게 설명하기 전에, 아토믹 패턴이 무엇인지부터 알아보도록 하겠다.

아토믹 패턴(Atomic Design) 은 UI 컴포넌트를 체계적으로 구성하기 위한 디자인 방법론이다.

이는 생화학에서 영감을 받아 디자인 요소를 원자(Atoms), 분자(Molecules), 생물체(Organisms), 템플릿(Templates), 페이지(Pages)의 5가지 계층으로 나눔으로써 복잡한 사용자 인터페이스를 효율적으로 관리하고 재사용성을 극대화할 수 있도록 한다.

왜 아토믹 패턴을 도입했을까?

위에서 설명한 문제점을 어느정도 해결할 수 있을 것이라고 판단했다. 디자인 시스템을 통해 서비스의 고유한 타이포그래피, 컬러 팔레트, 버튼 등 디자인의 기초 요소들을 만들고 이것을 기반으로 공통 컴포넌트 또한 잘 정의하여 위 문제들을 해결할 수 있을 것이다.

이전에 프로젝트 디렉토리 구조를 공부하면서 아토믹 패턴에 대해 다음과 같은 부분을 알고 있었다.

• 전형적인 Bottom-Up 기반의 개발 방법
• 훌륭한 구조를 위해 더욱 빡빡하게 구축하는 일종의 방법론
• 현재보다는 미래를 위한 구현에 가까울 수 있다.

해당 지식을 바탕으로 이번 프로젝트에 적용해보면서 더욱 체계적인 구조로 가져가고 싶었고, 향후 프로젝트에 어떤 이점이 있을지 경험해보고자 아토믹 패턴은 디자인 시스템의 초석을 가지게 되었다.

컴포넌트 적용 흐름

아토믹 패턴은 위의 사진처럼 5가지의 단계로 분류되어있다. 하지만 프로젝트의 짧은 기간의 제약으로 단계를 간추렸다.

피그마로 Atoms, Molecules 단위로만 컴포넌트를 설계하고, 실제 프로젝트에서 Atoms 단위를 조합해서 템플릿(Templates), 페이지(Pages)의 큰 단위로 채워나가도록 하였다. (Bottom-up 방식)

그리고 스토리북에 배포하여 팀원 간 소통과 협업이 원활하게 이뤄지도록 하였다.

마지막으로 패키지 매니저인 npm에 배포하여 의존성 설치로 패키지로 사용할 수 있게끔 구축하였다.

고려 사항

디자인 시스템을 도입하려고 결정했을 때 두 가지의 고려 사항이 존재했다.

• 프로젝트 적용 시기

  프로젝트 시작 전에 디자인 시스템을 모두 구축해야할지, 프로젝트 도중에 디자인 시스템을 도입할지에 대해 고민하였다.

  보통 현실의 현업에서 디자인 시스템을 미리 구축하고 시작하는 경우가 많이 없다고 한다.

  

  대부분의 경우엔 이미 존재하는 프로젝트가 있고, 나중에 가서 디자인 시스템의 필요성을 느껴 이를 도입하는 흐름이 꽤나 일반적이다.

  필자의 경우는 프로젝트 시작 전에 디자인 시스템을 도입할 수 있는 상황이었기 때문에 멘토님의 조언을 받아 프로젝트를 본격적으로 시작하기 전에 구축하기로 했다.

  하지만 UI 디자인과 개발을 거의 동시에 진행했어야하는 자비없는 일정이었기 때문에 시작 전에 모두 구축할 수는 없다고 판단했다.

  따라서 최대한 빠르게 아토믹 디자인 구현 후 배포해놓고 필요할 때 바로바로 사용할 수 있도록 하였다. 팀으로 진행되는 프로젝트였기 때문에 팀원들간에 공통 컴포넌트를 최소화 하기 위해 최대한 빠르게 구현하기 위해 노력했다.

• 컴포넌트 구분의 모호성

  Atom(분자)와 Molecules(유기체) 사이의 구분이 명확하지 않을 수 있다. 실제로는 두 단계 사이에 여러 중간 단계가 존재할 수 있어, 컴포넌트를 적절히 분류하는 것이 어려울 수 있다.

  이러한 문제점은 멘토링을 진행했을 때, LG 유플러스 멘토님이 조언해주신 부분이다.

  실제 현업에서도 디자인 시스템을 구축하려고 할 때 컴포넌트를 정의하는 영역이 디자이너와 개발자 간의 의사소통 하는 부분에서 굉장히 어렵다고 말씀해주셨다.

  따라서 이 부분은 팀원 간의 충분한 소통과 합의로 이뤄져야하는 부분이라고 생각했다.

  당연히 중간에 수정되는 부분도 생기고 바꾸는 과정에서 난관도 있었지만, 최대한 분자 단위로 나누려고 한 덕에 생각보다 많은 부분에서 수정사항이 생기지는 않았다.

디자인 토큰(design token) 명세

먼저 피그마에 Style-guide를 명세한 후에 UI 페이지를 만들었다. 거기에서 재사용이 될만한 컴포넌트들을 작은 단위로 추출했다.

스타일 가이드에서는 메인 컬러와 테마 모드를 위한 시멘틱 컬러, 타이포그래피, 아이콘, 그리드를 정의했다.

그리고 스타일 가이드를 토대로 스토리북에 해당 디자인 토큰을 문서화했다.

Atom, Molecules 컴포넌트

또한 UI 페이지를 참고해서 UI 패턴이 3회 이상 재사용되는 컴포넌트를 명세했다. '3회'는 개발자에게 유용한 휴리스틱의 방식으로 스토리북팀에서 추천하는 횟수이다.

• 위의 사진처럼 여러 페이지에서 아바타 사진이 들어간 프로필 컴포넌트가 많은 곳에서 쓰이는데, 이를 디자인 시스템으로 구현하게 되면 굉장히 편리하게 컴포넌트를 재사용할 수 있다.

• 이처럼 버튼 등과 같이 웹사이트에 있는 모든 요소를 추출해서 동일한 작업을 수행하지만 다른 객체로 존재하는 모든 컴포넌트를 뽑아내는 작업을 진행한다.

Conclusion

디자인 시스템을 도입하면서 여러가지 고민한 부분이 많았다.

그만큼 설계하고 구현하는 시간도 걸렸다. 하지만 디자인 시스템을 도입하고 개발을 진행하면서 전반적인 UI 구현 난이도 및 반복 시간은 줄어드는 경험을 하였다.

또한, 팀원끼리 스토리북으로 배포된 문서를 참고하며 원활한 개발을 진행할 수 있어서 굉장히 편리했다.

구축을 해두면 바로 가져다가 사용하면 되니까 팀원들의 만족도가 아주 높았다.

UI 가이드라인이 바뀌는대로 모든 컴포넌트에 바로 적용 가능하고, 서비스 확장성을 가져갈 수 있다는 큰 장점이 있다.

이렇게 큰 이점들이 많은만큼 서비스의 활용에 따라 디자인 시스템을 도입하는 것을 추천한다!! 👍🏻