About

지란지교시큐리티 디자인 시스템은 보안 솔루션 제품군이 공유하는 하나의 UI 언어입니다.

왜 만드나

제품마다 메인 컬러가 다르고 출시 시기도 다르지만, 사용자는 같은 회사의 제품을 씁니다. 리뉴얼이나 신규 제품을 시작할 때마다 무채색·서체·간격·컴포넌트를 새로 정하지 않도록, 메인 컬러를 제외한 나머지 기본 구성을 이 시스템이 제공합니다.

디자이너

Figma 라이브러리의 컴포넌트를 쓰고, 이 가이드의 예제·Props 로 변형과 상태를 확인합니다

개발자

React 제품은 @jiran/ds-react 패키지를 설치하고 각 페이지 React 탭 코드를 그대로 씁니다. 그 외에는 HTML+CSS 탭 코드에 assets/style.css + assets/ds.js(동작)

제품 적용

Design Token에서 --accent-* 만 제품 메인 컬러로 바꿉니다

역할별 단계 안내는 Getting started를 참고하세요.

제공하는 것

Gray Scale, 타이포그래피, 간격·반경·엘리베이션, 아이콘 규칙, 컴포넌트 30개(Desktop, 코드 포함), 패턴 11개, 토큰

제품이 정하는 것

Accent Primary(제품 메인 컬러). 헤더의 Accent 선택으로 각 제품 컬러가 적용된 모습을 미리 볼 수 있습니다

브랜드 컬러

#FF7F00은 제품 UI 의 Accent 로 쓰지 않습니다. 이 시스템은 관리자 웹 제품 기준이며, 브랜드 디자인 시스템은 별도로 제작합니다

플랫폼

Desktop 웹 (관리 콘솔) 우선

기획팀 디자인파트가 운영하며, Figma 라이브러리와 이 가이드를 함께 갱신합니다. 제안·기여 절차는 Contribution을 참고하세요.