Yourssu Design System을 설계하며
Yourssu Design System을 설계하며 깨달은 것들
작년에 시작한 YDS가 어느덧 본격적인 다크모드 대응을 앞두고 있다. 그 동안 설계했던 디자인 시스템의 구조를 소개하고 그 과정에서 얻었던 러닝들을 함께 공유하여, 우리가 무엇을 어떻게 배우고 성장했는지 정리해보고자 한다.
YDS의 구조
Yourssu Design system은 유어슈 프로덕트에서 사용할 디자인의 원칙과 구성요소를 모아둔 시스템으로, 기본적인 색깔이나 폰트 등의 시각적인 스타일 부터 버튼, 탑바 등의 디자인 구성요소, 더 나아가 여백과 애니메이션 같은 디자인 원칙까지 정의하는 집합 구조이다.
색깔, 아이콘, 타이포그래피와 같은 Foundation
박스버튼, 체크박스, 토글과 같은 Atom
탑바, 바텀바와 같은 Component 등등
단체마다 정의하는 바가 조금씩 달랐지만, 모두 일관적인 디자인 원칙과 요소들을 미리 정의해둔다는 점은 같았다. YDS는 디자인 요소를 Foundation, Atom, Component로 분류하도록 하였다.
이 시스템을 쉽고 간단하게 이해해 보기 위해 YDS Topbar의 예시를 가져왔다. Foundation의 Color와 Icon이 Atom의 PlainButton을 구성하고, 이 버튼이 Component의 TopBar 오른쪽 검색버튼 요소로 들어간다.
시스템에 대한 더 자세한 설명은 이 글에서는 줄이려고 한다. 지난 2021 Road to Pro 디자인 시스템 세션을 참고하거나 유어슈 YDS 깃허브 링크를 통해 더 확인해 볼 수 있다.
2021 Road to Pro YDS 디자인 세션
-> 2021 Road to Pro YDS 디자인 세션
YDS OS 별 깃허브 링크
YDS 적용 프로세스
유어슈 디자인-개발 프로세스에서 실제로 YDS가 어떻게 적용되는지 로그인 화면을 만드는 과정으로 먼저 확인해보자.
먼저, 디자이너는 피그마 라이브러리로 미리 정의해둔 Topbar, SuffixTextField, PasswordTextField, Boxbutton, Plainbutton 컴포넌트를 인스턴스로 가져와 화면을 구성하고 배치한다. 그러면 개발자는 이를 보고 각 OS별 YDS 라이브러리에서 대응되는 코드 객체를 사용해 로그인 화면을 개발한다.
디자이너와 개발자가 단순 레이아웃 뿐만 아니라 기본적인 엣지나 에러 케이스 등을 미리 합의해 두었기 때문에 매번 대응할 필요 없이 효율적으로 컴포넌트를 사용하고 적용할 수 있다.
우리가 느낀 장점
먼저, 팀 내에서 디자인의 일관성을 유지하기 쉬워졌다. 많은 회사에서 디자인 시스템을 구축하지만, 사람이 특히 많이 바뀌고 하나의 프로덕트를 유지해야하는 유어슈 동아리에서 더욱 유용하다고 느꼈다.
위 사진처럼 동아리 내 서로 다른 디자이너가 제작한 화면이어도, 비슷한 톤앤매너와 합의된 규칙들을 통해 어떠한 상황에도 일관적인 이미지와 사용자경험을 전달할 수 있었다.
또한 불필요한 커뮤니케이션 시간이 단축되었다. YDS에서 현재 Topbar라고 불리는 컴포넌트는 안드로이드에서는 Appbar(또는 Actionbar)로, IOS에서는 Navigation bar 라고 불렸다. 서로의 용어를 통일하는 것 외에도 기능과 제약사항을 명확하게 합의하면서 소통의 오류가 크게 감소했다.
마지막으로 재사용성이 크게 향상되었다. 대부분의 컴포넌트들은 어떤 상황과 케이스에서 빈번하게 사용되며 화면이 달라도 비슷하게 기능한다. 디자이너와 개발자는 이전에 잘 만들어둔 컴포넌트들을 다시 사용할 수 있게 되며 초기 단계에서 불필요한 레거시 디자인과 코드가 많이 사라지게 되어 팀의 생산성이 크게 향상될 수 있었다.
더 나아갈 길
유어슈 디자인 시스템 tf는 v1을 지나 현재 v2를 진행하고 있다. v1에서는 Foundation과 Atom 위주로 시스템의 기초를 쌓는데에 집중했다면, v2에서는 실제 프로덕트인 숨쉴때 커뮤니티에 이를 적용한다. 반영 과정에서 기존 컴포넌트를 수정하고 추가하면서 함께 다크모드와 문서화 작업을 진행하고 있다.
아직 해야할 것이 많지만, 유어슈의 좋은 디자이너들과 개발자들이 TF와 함께 성장하는 모습을 보면 남은 것도 잘 진행할 수 있을거라 믿는다.
