page title

KRDS는 디자인 원칙을 준수하며, 사용자 경험, 서비스 여정, 상호작용을 중심으로 사용자 인터페이스를 제작하는 데 필요한 피그마 라이브러리와 부가적인 리소스를 제공한다.

피그마 라이브러리는 스타일 가이드, 컴포넌트, 기본 패턴, 서비스 패턴으로 구분되며, 디자인 토큰을 통해 하나로 연결되어 있다. 부가적인 리소스는 컴포넌트, 기본 패턴, 서비스 패턴은 제공하지 않으며, 모든 라이브러리를 이용하기 위해서는 피그마 사용을 권장한다.

서체 및 모든 디자인 리소스는 리소스에서 다운로드 할 수 있다.

스케치와 어도비 XD 형식의 파일이며, 색상과 타이포그래피 등 디자인 스타일 요소를 제공한다.

디자인 토큰(Design Tokens)은 디자인 시스템에서 반복적으로 사용되는 디자인 속성을 효율적으로 관리하기 위한 일종의 추상화된 값을 변수로 정의한 코드이다. 색상, 글자, 간격, 그림자 등과 같은 스타일의 속성을 정의하고, 이를 코드로 변환하여 디자인 시스템 전반에 걸쳐 일관된 스타일을 유지할 수 있게 도와준다.

KRDS의 토큰 사용 시 고대비와 반응형과 같은 테마 전환이 가능하며, 프로젝트 전반에 걸쳐 일관된 디자인을 생성하고 디자인 시스템을 더욱 효율적으로 업데이트할 수 있다.

KRDS의 베리어블은 primitive, semantic, mode, responsive 변수 컬렉션으로 구성된다.

Primitive 컬렉션은 원시값으로 사용되는 변수가 등록되어있으며, 실제 UI 요소에 직접 적용되지는 않지만 다른 컬렉션에서 참조되는 기준 값으로 활용된다. Semantic, mode, responsive 컬렉션은 primitive 값에 의미를 부여한 semantic token이 등록되어, 실제 UI에서 사용되는 변수 값으로 구성된다.

이 구조로 primitive token의 value값을 변경하면 모든 관련 스타일이 자동으로 업데이트되어, 시스템 전반에서 일관된 스타일을 유지하고, 유지보수를 간편하게 할 수 있다.

• primitive: color / typo / number (원시값인 primitive token)
• semantic: gap / padding / size-height / radius (구성요소에 일관된 스타일 적용을 위한 semantic token)
• mode: color / border-with / shadow (고대비 테마 전환을 위한 semantic token)
• responsive: typo / layout-gap / card-padding (반응형 테마 전환을 위한 semantic token)

KRDS는 Figma 베리어블 기능을 사용하여 테마 전환이 가능한 구성 요소를 제공한다. 이는 베리어블의 변수 컬렉션에 정의된다. 테마를 전환하려면 구성 요소를 배치하고 appearance 옵션 패널에서 테마 옵션(선명한 화면 모드, 반응형)을 선택한다.

KRDS에서 색상 스타일은 로컬 베리어블과 로컬 스타일에서 관리된다. 단색 값(#000000)은 로컬 베리어블에서 관리하며, 그라데이션 색상은 색상 토큰을 사용해 로컬 스타일에 등록하여 사용한다.

색상 관련 토큰은 mode 컬렉션 에서 확인 가능하며, 이는 원시값(색상 변수)에 별칭을 부여한 semantic token이다. Mode 컬렉션은 background, text, icon 등 특정 용도에 맞는 색상 값으로 정의되어 있으며 light/high-contrast 2가지 모드로 제공된다. 원시 값 색상 변수는 #000000 또는 #FFCD29와 같은 단색값으로 등록되며, primitive token에서 확인 가능하다. primitive 컬렉션에는 light 모드와 high-contrast 모드를 위한 두 가지 팔레트가 제공된다.

기관별 색상 스타일 자체 제작시 매직 넘버를 이용하여 컬러 팔레트 만드는 방법을 통해 팔레트를 생성할 수 있다.

로컬 베리어블의 primitive 컬렉션은 서체(문자열 변수), 서체의 두께(문자열 변수), 서체의 자간(숫자 변수)으로 구성되며, responsive 컬렉션에서는 서체의 자간(숫자 변수)과 계층별 서체의 크기가 결합된 semantic token을 확인할 수 있다. Responsive 컬렉션은 반응형을 위한 변수로 모바일 및 데스크톱 테마 전환이 가능한 토큰을 제공한다.

KRDS에서 타이포그래피 스타일은 로컬 베리어블과 로컬 스타일에서 모두 관리된다. 변수는 원시적이고 재사용 가능한 값을 저장하며, 한 번에 하나의 값만 표현 가능하다. 반면에 스타일은 다양한 값의 합성을 저장하며 한 번에 모두 표현된다. 타이포그래피는 서체, 서체의 두께, 크기, 자간, 줄간격 등 다양한 값의 합성으로 구성됨으로 로컬 베리어블만으로 사용할 수 없다. 그러므로 KRDS에서는 로컬 베리어블에 각 요소를 등록하고, 로컬 스타일에서 이를 참조하여 사용한다.

형태를 나타내는 요소 중 래디어스는 버튼, 카드, 컨테이너와 이미지 같은 UI 요소의 모서리에 적용되는 둥글기 값을 말한다.
래디어스는 primitive token 인 원시 값(숫자 변수)에 small-medium-large-xlarge 4단계의 별칭을 지정하여 토큰을 구현한다. 확장형 스타일을 적용하는 기관일 경우 래디어스 비율에 맞게 적용하는 방법을 참고하여 기관에 맞는 래디어스(radius) 값을 설정한 후에 semantic token 에 연결된 숫자 변수를 변경해준다. 이는 구성요소의 일관된 형태 유지 관리에 도움이 될 수 있다.

레이아웃은 정보 구조와 시각적 흐름을 체계적으로 결정하여 사용자가 콘텐츠를 명확히 이해할 수 있도록 돕는다.
레이아웃 관련 토큰은 responsive 컬렉션에서 확인 가능하며, 서브페이지 간격(예.header-breadcrumb)토큰과 텍스트 계층별 간격(예.h2-h3)토큰으로 구성된다. 이는 원시 값(숫자 변수)에 별칭을 부여한 semantic token 이다. 숫자 변수는 24 또는 -8과 같은 숫자 값을 사용하며 반응형 디자인을 적용하는데 적합하다. responsive 컬렉션은 반응형을 위한 변수로 모바일 및 데스크톱 테마 전환이 가능한 토큰을 제공한다.

로컬 베리어블 활용 (레이아웃 스타일)

기관별 레이아웃 스타일 베리어블에 적용하는 방법

1. 1.레이아웃의 프리미티브 토큰 확인하기
   (local variable > number > value 값 확인)
2. 2.레이아웃 값의 시멘틱 토큰 변경하기
   (local variable > responsive > layout-gap > value 값 선택 > number 변수에서 원하는 토큰 선택)

레이아웃 스타일 가이드 자세히 보기

서브 페이지 간격 토큰

• ①header-breadcrumb
• ②breadcrumb-h1
• ③contents-footer
• ④left-contents
• ⑤contents-right

텍스트 계층별 간격 토큰

• ①heading 계층별 간격 (예.h1-h2)
• ②heading 계층별 간격 (예.h2-h2)

공식 전자정보 누리집의 서비스를 이용하는 사용자 누구에게든 정보 이용에 불편함이 없도록 W3C 웹 콘텐츠 접근성 지침 레벨 AA이상의 원칙을 기반으로 시각적 가이드를 제시한다. 기관에 따라 디자인 에셋을 변형하여 사용할 경우 "접근성" 영역에 나열된 지침 사항을 충족하는지 확인해야 한다.