디자인 시스템: 협업의, 협업을 위한, 협업에 의한
안녕하세요! 저는 아테나스랩 디자인 챕터의 Ken입니다. 입사 이후 아테나스랩에서 오늘학교의 다양한 기능들을 만들고 있습니다. 그 중에서 디자인 시스템에 대해서 이야기해보려고 합니다!
디자인 시스템이란?
디자인 시스템은 버튼, 얼럿, 모달 등의 컴포넌트를 통해 개발자, 디자이너 그리고 기획자의 커뮤니케이션 리소스를 줄여주는 시스템으로, 고유의 디자인 원칙을 가집니다. 디자인 시스템을 제작할 때 서비스에 적용하고자 하는 디자인 원칙을 먼저 정의한 후에 디자인 가이드라인을 만듭니다. 그리고 컴포넌트를 통해 디자인의 통일성을 맞춰주며 상황별 의사결정에 대한 정확한 기준을 제안합니다. 이렇게 만들어진 디자인 시스템은 서비스가 커지고 많은 기능들이 추가되더라도 디자인의 방향성을 잃지 않게 중심을 잡아줍니다.
디자인 시스템을 구축하면 무엇이 좋을까요?
디자인 시스템을 구축하면 먼저, 디자인 챕터 내에서 커뮤니케이션을 효율적으로 진행할 수 있습니다. 디자인은 디자이너의 주관이 크게 반영될 수 있는 영역인데, 디자인 시스템을 구축해 놓으면 디자이너 간의 통일성을 가질 수 있어 커뮤니케이션의 오류를 방지할 수 있기 때문입니다.
두 번째는 스쿼드 단위의 제품을 개발할 때 드는 시간을 단축할 수 있습니다. UI 하나하나의 디자인들을 통일시켜 타 챕터뿐만 아니라 디자인 챕터 내부에서도 “어떤게 맞는거에요?, 이 상황에서는 어떤 UI를 사용해야 하는 거에요?” 등의 커뮤니케이션 리소스들을 줄여 개발에 드는 시간을 단축 시킬 수 있습니다. 또 앞으로의 팀 확장을 대비해 디자인 시스템을 구축하면서, 기존의 디자인들을 체계화하고 정리하는 시간들을 통해 디자인 챕터 내부에서 일관되고 명확한 기준에 따른 방향성을 가지고 디자인 결과물을 만들어낼 수 있습니다.
챕터, 스쿼드라는 단어가 생소하실텐데, 햄버거를 예를 들어 설명해보겠습니다. 스쿼드* 단위의 제품을 햄버거로 가정할 때, 챕터는 햄버거를 구성하는 양상추, 패티, 빵과 같다고 보시면 됩니다. 즉, 각각의 재료가 모여 하나의 햄버거가 완성되듯, 각각의 챕터의 리소스가 모여 하나의 제품이 개발되는 것입니다.
세 번째는 기존의 디자인을 체계화하고 정리함으로써 디자인을 할 때 일관되고 명확한 기준에 따른 방향성을 가지고 디자인을 할 수 있습니다.
*스쿼드 : 팀 내 조직 단위를 뜻하는 말로 PO를 비롯해 클라이언트/서버 개발자, 디자이너, PM으로 구성된 일종의 미니 스타트업 (회사 안의 작은 회사)
디자인 시스템은 어떻게 만들었나요?
오늘학교 디자인은 어땠었나요?
오늘학교에 디자인 시스템을 구축하기 전에는 앱 내에서 사용하는 디자인의 통일성이 없었습니다. 😱 이는 얼럿이나 모달, 토스트가 필요할 때 개발하는 개발자에 따라 다르게 디자인이 생성되었기 때문이었습니다. 왜 개발자별로 다르게 생성하게 될 걸까요? 어느 상황에 어떤 UI를 사용해야 하는지 정해진 것이 없었으며, 어느 작업자는 가운데 정렬, 어느 작업자는 타이틀을 넣으며 다양한 방식으로 반영되고 있었기 때문입니다.
또 각각의 챕터별로 같은 UI를 다른 방식으로 불러서 발생하는 의사소통의 오류도 존재했습니다. 디자인의 통일성을 위해서 먼저, 상황별로 필요한 얼럿, 모달, 토스트 메세지에 필요한 요소와 문구를 정리했습니다. 또한, 취소 버튼, 타이틀, 디바이더 등의 UI의 네이밍 용어를 정리하고 이를 모든 챕터에서 사용할 수 있도록 했습니다.
우선은 디자인 통일부터!
디자인 시스템의 구축에 앞서 디자인을 통일하는 작업의 선행이 필요하다고 판단했습니다. 각각의 디자인이 더 나은 사용성을 가지게 하고, 디자인이 매력적으로 보이게 하는 것도 중요하지만, 앱 서비스의 화면이 같은 브랜드로 느껴지도록 통일성을 유지하는 게 더 중요하다고 생각했기 때문입니다. 통일된 UI 디자인은 사용자가 편하게 인터페이스를 다룰 수 있게 하는 동시에 익숙함과 안정감을 주기 때문입니다. 반대로 통일되지 않은 UI 디자인은 사용자로 하여금 제대로 관리되고 있지 않다는 이미지를 심어줄 수 있어 서비스의 신뢰도가 하락하고, 사용자가 같은 UI를 사용하더라도 사용방식이 다른 경우에는 학습을 해야 한다는 불편함도 유발합니다. 이를 해결하기 위해 먼저 통일성이 가장 떨어지던 모달과 얼럿의 디자인을 통일시키는 작업을 했습니다.
디자인 원칙을 세우자!
디자인 시스템 구축을 위해 오늘학교의 디자인 원칙 4가지를 정했습니다. 4가지 원칙과 이 원칙의 배경이 되는 아테나스랩의 문화에 대한 내용을 소개합니다.
1. 사용자가 답이다
- 아테나스랩 팀의 문화적 원칙 중 사용자(고객)에 대한 정의는 다음과 같습니다.
사용자: 사용자에 대하여
사용자에게 초점을 맞춥니다 Focus on the user
모든 이유의 가장 끝단에는 사용자가 있어야 합니다
- 사용자의 사용 행태나 패턴을 파악해 데이터를 기반으로 디자인한다.
- 데이터 이면의 맥락을 파악할 수 없음으로 UT, 사용자 인터뷰를 활용한다.
- 모든 사항들을 데이터로 판단할 수 없다면 기존 서비스의 경험을 존중한다. 그리고 보편적인 사람들의 행동 경험을 기반으로 판단한다.
- 빠르게 판단하고 시도해 가설을 검증한다.
2. 과거를 잊은 팀에게는 미래가 없다.
‘그때는 맞고 지금은 틀리다’
- 장점이 뚜렷한 디자인더라도, 기존 디자인에 익숙한 유저들이 있을 수 있기에 신중히 고민한다.
- 급진적인 변화는 지양한다.
3. 누구나 쉽게 사용할 때까지
- 기능의 뎁스를 최소화한다.
- 한 화면에서 텍스트, 이미지의 우선순위를 파악하고 정보를 제공한다.
- 시각적인 피로도를 줄이기 위해 색상대비를 체크한다.
- 한 화면에 한 버튼, 행동을 유도하는 CTA는 최대한 하나만 쓸 수 있도록 한다.
- 모바일의 한정된 공간을 인지하고, 사용자가 찾고자 하는 정보를 찾기 위해 불편함이 없도록 한다.
4. 우리는 오늘학교입니다.
- 오늘학교가 가지고 있는 맥락에 따른 경험을 제공한다.
- 브랜드 정체성을 위해 급진적인 브랜드 컬러의 변경은 지양한다.
- 오늘학교 웹, 앱의 디자인 시스템의 통일성을 지켜나간다.
스타일 가이드를 정립하자!
컴포넌트의 기반을 다지기 위해서는 스타일 가이드를 제작해야 할 필요가 있었습니다. 스타일 가이드는 모든 UI 요소에서 사용하고 있는 기본적인 요소들을 분류하고, 컬러, 간격, 폰트, 그림자 등의 각 상황별 사용방법과 규칙 등을 포함하고 있습니다. 스타일 가이드를 정립하는 것만으로도 디자인 챕터 내부에서는 확실한 기준을 가지고 디자인 작업을 할 수 있고, 타 챕터에서는 작업되는 디자인이 어떤 맥락으로 진행되는지 파악할 수 있게 해줍니다. 스타일 가이드 덕분에 새로운 디자이너가 합류했을 때도 일관된 디자인을 만들어낼 수 있었고, 타 챕터에서 컬러코드를 쉽게 찾을 수 있었으며, UI의 구성요소나 SVG 파일을 재사용할 수 있게 되어 필요한 요소를 찾아 사용할 수 있었습니다.
컴포넌트화!
스타일 가이드가 정립된 이후에는 컴포넌트화 작업을 진행했습니다. 각각의 컴포넌트에서 상황별 사용법을 정리하여, 모든 챕터에서 어떤 상황에 어떤 컴포넌트를 사용해야 하는지에 대해 확인할 수 있도록 했습니다. 컴포넌트 작업은 Figma에서 Autolayout 기능으로 제작했고, Variant 기능을 통해 저희가 사용하고 있는 케이스별로 디자인 가이드라인을 정리했습니다. 가이드라인은 디자인 챕터가 업무를 함에 있어 기준점이 되어 디자인 챕터에서 할 수 있는 액션과 할 수 없는 액션을 구분해주었습니다. 이를 통해 타 챕터에게 왜 할 수 없는지에 대해 설명할 수 있어 의사소통이 편리해졌습니다.
버튼 레이블(버튼 안의 텍스트)로 예시를 들어보겠습니다. 버튼 레이블에는 사용자의 행위가 나타나야 하기 때문에 사용자의 행동의 의도와 관련된 용어를 사용하는 것이 좋습니다. 버튼 레이블만 보더라도 사용자는 자신이 어떤 행동을 하는지 인지할 수 있어야 합니다. 왼쪽 예시 이미지에서 사용자는 “확인”이라는 행위를 하는 것일까요? ”확인”이라는 워딩보다는 오른쪽 예시 이미지의 “로그아웃”이라는 워딩이 사용자가 수행하려는 행동이므로, “로그아웃”을 버튼 레이블로 사용하는 것이 좋습니다. 버튼만 봐도 사용자가 버튼을 누르면 어떤 행동을 하게 되는지 분명하게 느낄 수 있어야 한다고 생각합니다.
컴포넌트화 작업 중에 가장 어려웠던 것은 컴포넌트가 어떻게 앱 상에 반영되는지 확인하는 것이었습니다. 저는 스쿼드에 소속된 팀원으로서 기능 개발을 해야 했고, 디자인 챕터에 소속된 팀원으로는 컴포넌트화 작업을 해야 했습니다. 따라서 작업이 완료된 컴포넌트가 어느 시기에 앱 상에 반영되는지 확인하는 것이 어려웠습니다.
이를 해결하기 위해 첫번째로 저는 클라이언트 챕터와의 원활한 의사소통을 목적으로 앱 하단의 탭별로 이슈를 구분하여 지라(JIRA, 협업툴의 일종)에 업로드하였습니다. 두번째로 저는 지라(JIRA) 이슈를 슬랙(Slack, 메신저의 일종)에 연동해 완료여부를 실시간으로 파악할 수 있도록 했습니다. 그리고 마지막으로 작업이 완료되어 앱 상에 반영된 컴포넌트를 다시 노션(Notion) 페이지에 업데이트 하여 관리하였습니다. 덕분에 컴포넌트화가 어디까지 진행되고 있는지 클라이언트 챕터와 디자인 챕터가 확인할 수 있게 되었습니다.
현재까지도 컴포넌트화 작업을 진행하며 오늘학교의 UI를 변경하고 있습니다. 오늘학교 UI 요소 전체를 모두 컴포넌트화하게 된다면, 하나의 코드로 구성되어 디자인의 통일성을 유지할 수 있고, 다른 기능 개발의 속도도 더욱 빨라지게 될 것입니다.
이 글을 마치며
지금 디자인 시스템을 구축하기 전의 저를 되돌아봤을 때, 처음에 너무 겁을 먹었구나 싶습니다. 디자인 시스템을 구축하는 게 쉬운 일은 아니지만, 그저 “어디가 부족하네”, “이건 이렇게 하면 되는구나”, “다른 곳은 어떻게 기준을 잡았지”라는 생각으로부터 시작하여 지금의 디자인 시스템을 구축한 걸 보니 겁을 많이 냈었던 것 같습니다. 또한 100% 완성되는 시스템은 없다는 생각이 들었습니다. 효율적인 업무를 위해 시스템은 계속 수정되고 개선될 테니까요. 이번에 디자인 시스템을 구축하게 되어 조금이나마 팀에 기여하고 개인적으로 성장한 팀원이 된 것 같아 뿌듯함을 느낍니다.
저와 디자인 챕터뿐만 아니라 오늘학교를 만들어 나가는 아테나스랩의 모든 구성원이 더 좋은 서비스를 제공하기 위해 치열하게 고민하고 노력하고 있습니다. 그리고 그 과정에서 효율적인 업무 방식에 대해 탐색하고 다양한 방법을 시도하고, 그에 대한 의견을 서로 주고받고 있습니다. 앞으로 더 발전해나갈 아테나스랩과 오늘학교의 모습이 기대가 됩니다. 기회가 되면 컴포넌트화 작업이 끝난 후 오늘학교가 얼마나 변화했는지에 대해서도 글을 쓸 수 있었으면 좋겠습니다. 감사합니다. 🙏🏻
저희 아테나스랩과 함께 성장하실 분을 찾고 있습니다! 🕶
좋은 서비스를 만드는 것에 더불어, 저희 아테나스랩과 더 나은 기술을 고민하고 서로 자극이 될 수 있는 조직을 만들며 성장하고 싶은 분들은 아래 채용 중 포지션 페이지를 참고해 주세요 🎉
채용 중 포지션 : https://prompie.com/s/alq3upis/
