얼룩소 디자인 시스템

주의: 본 페이지 내 일부 이미지들은 모바일 환경에 최적화되지 않았습니다. 가급적 태블릿 또는 데스크탑 환경에서 확인하는 것을 권장합니다.

진행 배경

팀 개편 시 디자인, 개발 담당자가 변경되었으나 기존 작업물들에 대한 인수인계가 원활히 이루어지지 않은 탓에 내부에서 서비스의 히스토리에 대해 명확히 파악하는 데에 어려움을 겪고 있었습니다. 또한 서비스에 새로운 기능을 추가하거나 유지보수를 진행할수록 코드와 디자인의 파편화가 심해져 팀원 모두가 제품 전반에 대한 정리와 디자인 시스템 정립의 필요성에 공감하게 되었습니다.

페이지마다 다르게 적용된 버튼 사이즈와 배치

페이지마다 다르게 적용된 버튼 사이즈와 배치

동일한 컨트롤이 페이지마다 다른 방식으로 구현됨

동일한 컨트롤이 페이지마다 다른 방식으로 구현됨

이러한 상황에서 기존 Ruby 기반으로 만들어진 서비스를 Next.js 기반으로 마이그레이션 하기로 결정하고 모든 페이지들을 다시 제작하게 되어 파편화됐던 요소들을 부분적으로나마 통일할 수 있는 기회가 생겼습니다. 또한 신규 디자이너와 프로덕트 매니저의 합류로 팀의 규모가 커지며 디자인 시스템 작업의 우선 순위가 높아졌습니다.

진행 전 고려사항

다른 업무와 병행해야 하는 상황에서 프로젝트에 할당할 수 있는 리소스가 한정적이었기 때문에, 처음부터 완벽을 추구하기 보단 기반을 다지는 데에 더 집중하고 버전 1.0이 아닌 0.x를 목표로 작업을 진행했습니다.

기존 UI가 Tailwind CSS 기반으로 개발된 점을 고려해 디자인 시스템 정의 시에도 이를 참고하여 기본적인 내용은 공유하되 변경이 필요한 부분 위주로 다르게 정의하는 방식으로 작업을 진행했습니다.

또한 효율성과 가독성을 위해 불필요한 요소들은 최대한 덜어내는 방향으로 작업했습니다. 예를 들어 기존 스타일 가이드에 정의되어 있으나 사용하지 않은 색상, 타이포그래피 등은 시스템 정리 과정에서 삭제하기로 결정했습니다.

불필요하게 많이 정의된 색상과 타이포그래피

시스템 구조의 설계

파운데이션 - 컴포넌트 - 패턴의 3단계 구조로 시스템을 설계했습니다.

파운데이션은 시스템을 구성하는 가장 기본적인 요소로, 컬러, 타이포그래피, 아이콘, 스페이싱, 투명도 등이 이에 해당합니다.

컴포넌트는 파운데이션 요소들을 기반으로 만들어집니다. 재사용되는 디자인 요소들로 버튼, 텍스트 필드, 선택 옵션 컨트롤, 탭 등이 포함됩니다.

패턴은 컴포넌트들의 조합으로, 제품 내에서 반복적으로 나타나는 구성들을 패턴으로 정의해 활용합니다. 헤더와 내비게이션 바 등을 예시로 들 수 있으며, 얼룩소 서비스에서는 글 목록 아이템 또한 대표적인 패턴 항목에 해당합니다.

토큰의 정의

기존 스타일 가이드에 다양한 색상과 타이포그래피 스타일이 정의되어 있었으나 일괄적으로 일반적인 네이밍만 적용돼 있어 어떤 상황에 어느 스타일을 사용해야 하는지 파악하는 데에 어려움이 있었습니다. 또한 서비스 내에서 사용하지 않는 톤이나 스케일 등까지 포함해 효율성이 떨어졌습니다.

효율성과 가독성의 개선을 위해 불필요한 스타일은 라이브러리에서 덜어내고 글로벌 토큰 - 시맨틱 토큰의 2단계 구조로 디자인 토큰을 정의했습니다.

글로벌 토큰은 디자인 시스템 내에 어떤 재료(=스타일)가 있는지를 펼쳐 보여주는 역할을 합니다. 재작업 과정을 최소화하기 위해 글로벌 토큰의 정의는 기존 스타일 가이드의 네이밍 방식을 가급적 재활용하는 방향으로 진행했습니다.

시맨틱 토큰은 어디에 어느 재료를 써야 하는지를 알려줍니다. 따라서 토큰 이름만으로도 충분한 설명이 될 수 있도록 네이밍과 위계 설계에 노력을 기울였습니다.

색상 시맨틱 토큰