코딩 중심의 온라인 교육 플랫폼 코드잇에서 자사 디자인 시스템을 소개하는 사이트를 오픈했어요. 이 사이트에서는 코드잇의 디자인 시스템을 크게 브랜드, 파운데이션, 컴포넌트, 패턴의 4가지 분류하여 상세한 가이드라인과 설계 배경을 소개하고 있습니다.
코드잇의 디자인 원칙은 변함없는 경험의 약속, 함께 일하는 즐거움, 일관성 속의 자율성 3가지로, 코드잇은 이러한 원칙 속에서 탄생한 디자인 시스템을 ‘배움의 기쁨’을 일관되게 전하기 위한 약속이라고 정의했습니다.
브랜드 섹션에서는 디자인의 기틀이 되는 정체성과 가치를 담은 키워드, 그리고 브랜드의 로고와 메인 컬러를 다룹니다. 파운데이션 섹션에서는 디자인 시스템의 근간을 이루는 요소들을 정의하며, 라이트 모드와 다크 모드를 고려한 플랫폼의 세부 색상 설계, 타이포그래피, 레이아웃, 아이콘 등을 소개합니다.
컴포넌트 섹션에서는 버튼, 드롭다운, 테이블 등 세부 UI 요소마다 정의된 가이드라인을 소개하며, Do / Don't 예시를 포함해 구성원의 시스템 이해를 돕고 오류를 방지합니다. 아직 콘텐츠 준비 중인 패턴 섹션에서는 개별 컴포넌트를 조합한 형태를 다룰 예정이라고 하네요.
내용이 상세하고 정리가 잘 되어 있어서 디자인 시스템을 공부하거나 설계에 참고가 필요한 분들에게 큰 도움이 될 것으로 보입니다. 특히 컴포넌트 섹션에서는 State에 따른 변화를 바로 반영해서 볼 수 있도록 준비가 되어 있어요.
코드잇 디자인 시스템 사이트는 앞으로도 지속적으로 개선하고 확장해 나갈 예정이라고 해요. 전체 디자인 시스템은 아래의 링크에서 확인할 수 있습니다.
