개발자가 프로젝트에 KRDS HTML Component Kit을 설치하여 디자인 시스템을 쉽게 적용할 수 있도록 가이드라인을 제공한다.
이 페이지의 구성
다음 튜토리얼 동영상을 통해 프로젝트에 HTML Component Kit 설치, 디자인 토큰 추출, 스타일 사용자화, 디자인 토큰 수정 등을 학습할 수 있다.
NPM 설치 후 사용 시 유의 사항
별도의 설치 없이 사용하고자 하는 경우 다음과 같이 페이지 내에 CSS와 JavaScript 파일을 로드하여 사용한다.
디자인 툴에서 제작한 디자인 토큰은 내보내기 기능을 통하여 JSON 파일로 내려받을 수 있다.
이 JSON 파일을 CSS variable 형식으로 변환하여 컴포넌트 스타일링에 이용하면 이후 디자인이 수정되더라도 json 파일만 업데이트하여 수정 사항을 간단히 반영할 수 있다.
피그마 툴에서의 디자인 토큰 추출에 대한 상세한 설명은 튜토리얼 영상에서 확인할 수 있다.
디자인 토큰과 CSS variable의 전체 속성은 디자인 토큰 목록 에서 자세히 확인할 수 있다.
KRDS 디자인 요소를 모두 사용할 경우, 사용자 SCSS 파일에 다음과 같이 입력한다.
구성요소를 개별적으로 사용하는 경우, 공통 SCSS 파일을 먼저 불러온 뒤 개별 구성요소를 가져온다.
다음과 같은 방식으로 페이지 내에 JavaScript 파일을 로드하여 사용한다.
디자인 토큰은 디자인 파일에서 수정한 뒤 코드에 적용하는 것이 원칙이지만
디자인 파일에서 직접 토큰을 관리할 수 없는 경우 코드에서 토큰값을 수정할 수 있다.
디자인 토큰 수정 시에는 원본 코드값을 직접 수정하지 않고 프로젝트의 CSS 또는 SCSS 파일에 필요한 토큰 값(CSS variable)을 재선언한다.