이번 글에서는 코드잇이 디자인 시스템을 만들게 된 배경과 흥미로운 제작 사례들을 공유하려고 해요.
<aside>
코드잇의 브랜드, 파운데이션, 컴포넌트, 앞으로 추가될 패턴(컴포넌트의 조합)까지 코드잇만의 디자인 방식과 규칙들을 아래 사이트에서 확인해볼 수 있어요.
코드잇 디자인 시스템 사이트 메인
</aside>
디자인 시스템을 만드는 이유는 UI의 통일성, 효율성을 위한 것만은 아니에요. 비즈니스 목표 달성, 교육 경험의 핵심이 흔들리지 않게 빠른 실험과 개선이 가능하도록 돕는 것이 목표였습니다.
코드잇은 프로그래밍 콘텐츠 플랫폼을 시작으로, 현재는 LMS(강의 탐색, 커뮤니티, 챌린지 등), 강의실, AI 면접 솔루션 케이드, 코드잇 팀즈, 코드잇 스프린트까지 다루는 글로벌 인재 인프라 기업으로 성장했어요. 프로덕트가 늘어나면서 이를 관리하는 어드민 프로덕트 역시 함께 늘어났고요.
현재 코드잇에는 2–3명의 프로덕트 디자이너가 일하고 있는데요, 적은 인원으로 다양한 도메인을 동시에 다루다 보니 리소스 부족과 비효율을 줄일 수 있는 구조가 필요했어요. 그리고 브랜드가 늘어나고 제품이 확장되더라도 각 프로덕트의 개성을 해치지 않기 위해, 공통으로 반드시 필요한 요소만 시스템화하는 것을 원칙으로 삼았습니다.
처음 진행했던 작업 중 하나는 컬러의 시스템화였어요.
코드잇 강의실은 색상 테마 설정 기능을 제공하는데, 디자인 시스템이 없던 시기에는 다크 모드를 화면마다 별도로 디자인해야 했어요.
이 과정에서 디자이너마다 색상을 다르게 사용하는 문제가 반복적으로 발생했습니다.
이런 문제를 해결하기 위해 색상 규칙을 정리하고, 라이트 모드와 다크 모드가 자동으로 대응될 수 있도록 디자인 시스템을 구성했습니다.
라이트 모드(Light Mode)에 매칭된 다크 모드(Dark Mode) 토큰이 자동으로 적용
매칭된 컬러 토큰 덕분에 라이트 모드만 디자인해도 클릭 한 번으로 다크 모드까지 함께 설계할 수 있게 되었어요.
Appearance 기능을 통해 원하는 테마로 쉽게 변경