2026. 11. 04. 확인

사이트와 PRD v1.1을 한 번에 읽는

「KLIC 디자인 시스템」 한눈에 보기

디자이너 · 개발자 · 검토자용

출처 · design.klic.co.kr

차례

이 안내서의 구성

읽기 전에

먼저 기억할 세 가지

1
사이트는 PRD를 살펴보는 HTML 데모입니다

ReUI·Base UI 설치본이나 배포된 KLIC npm 패키지를 담고 있다고 가정하지 않습니다.
2
4계층은 소유권, 7 디멘션은 관점입니다

값이 어디서 오는지는 4계층이, 화면을 무엇으로 검토할지는 7 디멘션이 정합니다.
3
문서에 있다고 검증된 것은 아닙니다

요구사항 61개 가운데 ‘통과’로 기록된 항목은 아직 없습니다. 미검증은 미검증으로 읽습니다.

I.KLIC은 무엇인가

디자이너와 개발자가 같은 언어로 제품을 만드는 공간입니다.

I.KLIC은 무엇인가제공하는 것

예제·토큰·테마와 도구를 한곳에서 제공합니다

KLIC은 값의 출처, 브랜드의 선택, 제품의 의미, 컴포넌트의 동작을 하나로 잇습니다.

컴포넌트
미리보기 · 코드 · 설계 명세
블록
업무 화면 단위의 실행 예시
디자인 토큰
4계층 참조를 JSON으로 내보내기
테마 SDK
테마 · 브랜드 프로필 · 재질
CLI
소스 묶음을 터미널로 가져오기
MCP · API
에이전트와 도구가 같은 레지스트리를 읽음

I.KLIC은 무엇인가규모

컴포넌트 109종 · 실행 블록 247개 · 모션 소스 패턴 884개

109종

컴포넌트(형태 525개)

247개

실행 블록(준비 중 80개는 따로 표시)

61개

블록이 함께 쓰는 구현 모듈

884개

모션 소스 패턴(설치 항목과 별도)

10개

테마(프로필 3 · 재질 4)

컴포넌트는 다섯 갈래입니다

분류	종류
데이터와 표시	41
입력과 선택	34
피드백	15
탐색과 구조	14
개발 도구	5

숫자는 배포마다 바뀝니다2026.11.04 레지스트리(release c2995d1ee74a1aa4) 기준입니다. 모션은 원본 패턴으로 별도 집계합니다. 최신 값은 /api/v1/registry.json 의 counts 로 확인합니다.

I.KLIC은 무엇인가블록

블록은 업무 화면 단위로 56갈래에 묶여 있습니다

분류	실행 블록	예
대시보드	18	배송 경로 현황 카드 · 프로젝트 진행 대시보드
고급 연결선	16	방향 테이퍼 연결 · 오프셋 관계 라벨
타임라인	11	분산 트레이스 워터폴 · 릴리즈 게이트 타임라인
고급 기능	10	SLA 위험 리스크 지수 · 패싯 다중 필터
플로우	9	배포 파이프라인 · 리드 라우팅 플로우
우측 패널·시트	9	작업 상세와 댓글 · 고객 상세와 활동

실행 블록이 많은 여섯 갈래입니다. 나머지는 일정·칸반 보드·카드·설정·알림 등입니다.

I.KLIC은 무엇인가재질과 테마

같은 구조에 네 가지 표면을 입힙니다

Flat
불투명. 명확하고 차분한 기본값
Glass
반투명. 가볍게 겹쳐지는 표면
Solid Glass
높은 불투명도. 깊이와 가독성의 균형
사이트 추천
Liquid Glass
빛나는 가장자리. tint · blur · rim

Liquid Glass는 CSS 근사입니다tint · blur · rim으로 흉내 낸 표현이며 실제 굴절이나 Figma GLASS와 같은 렌더링을 주장하지 않습니다.

테마 10종 · 프로필 3 · 모드 3기본은 KLIC Original(화이트 · 네이비 · 블루). 프로필은 KLIC Core · Studio · Data, 모드는 system · light · dark입니다.

I.KLIC은 무엇인가컴포넌트 화면

컴포넌트마다 기본형과 추가형을 나란히 비교합니다

KLIC 컴포넌트 컬렉션 화면 — design.klic.co.kr/#components 화면 캡처(2026.10.30). 그림을 누르면 크게 볼 수 있습니다.

1
분류로 좁히기
AI와 에이전트, 버튼과 액션처럼 쓰임새로 묶여 있습니다.
2
이름 · 형태 검색
현재 카탈로그는 109종 · 525형태입니다. 화면 캡처는 2026.10.30 당시(104종 · 520형태)입니다.
3
형태 나란히 보기
기본형과 추가형을 같은 화면에서 비교합니다.
4
동작 · API
형태별 코드와 동작 가이드로 이어집니다.

II.설계 기준

값의 소유권은 4계층이, 화면과 행동의 검토는 7 디멘션이 맡습니다.

II.설계 기준4계층 토큰

값은 네 계층을 한 단계씩만 거쳐 내려옵니다

4

Component

실제 부품의 속성을 역할에 연결

klic.component · 113개

3

Semantic

행동 · 본문 · 입력 · 오류 같은 제품 역할

klic.semantic · 248개

2

Brand

브랜드가 고른 팔레트 · 간격 · 반경 · 컨트롤 척도

klic.brand · 247개

1

Primitive

브랜드와 상관없이 변하지 않는 원시 값과 척도

klic.primitive · 3,143개

literal 값은 Primitive만 가집니다. 나머지 계층은 바로 아래 계층을 가리키는 alias만 씁니다(결정 D01).

개수는 현재 토큰 산출물의 계층별 전체 정의 수(합계 3,751개, 2026.11.04 확인)입니다.

II.설계 기준토큰 탐색기

토큰 탐색기에서 값이 어디서 왔는지 따라갑니다

KLIC 디자인 토큰 탐색기 화면 — design.klic.co.kr/#tokens 화면 캡처(2026.10.30).

1
계층별 개수
계층마다 지금 적용된 토큰과 전체 정의 수를 봅니다.
2
계층 · 브랜드 고르기
계층 탭과 브랜드(KLIC Core 등)를 바꿔 비교합니다.
3
그룹을 펼쳐 참조 보기
button · input 그룹 안에서 네 계층의 연결을 봅니다.

II.설계 기준브랜드 예외

브랜드 예외는 값이 아니라 참조만 바꿉니다

제한	계약
경로	기존 Semantic leaf의 정확한 경로만
타입	기존 leaf · 정책 · 대상 Brand leaf의 타입이 모두 같음
값	승인된 Brand leaf의 alias 하나만
금지	literal, Primitive 직접 참조, 새 경로, 타입 변경, 삭제

설명용 B fixture(기술 계약 §1)

# Brand: lg 척도가 2.5rem 원시 값을 고름
klic.brand.dimension.control.height.lg
  {klic.primitive.dimension.step.10}
# Semantic: 기본 행동 크기가 lg 를 가리킴
klic.semantic.size.action.default
  {klic.brand.dimension.control.height.lg}

기본 Button 2.25→2.5rem, Input은 2.25rem 유지

이 예시는 시험용 fixture이며 제품 기본값이 아닙니다. 승인 단위는 브랜드 + 경로 + 타입 + 대상이고 사유 · 소비자 diff · 검토자 기록을 붙입니다.

II.설계 기준7 디멘션

7 디멘션으로 화면과 행동을 함께 검토합니다

디멘션	이렇게 설계합니다
크기와 비율	콘텐츠 길이와 조작 영역을 함께 설계합니다. 고정 높이로 긴 문구를 자르지 않습니다.
타이포그래피	본문 · 레이블 · 제목의 역할을 나눕니다. 좁은 화면에서는 줄바꿈과 재배치를 먼저 합니다.
색과 대비	블루는 행동과 선택, 네이비와 중립색은 정보 위계입니다. 상태는 색만으로 전하지 않습니다.
배치와 정렬	DOM 읽기 순서와 보이는 순서를 맞춥니다. 표 · 다이어그램 스크롤은 그 영역에서 관리합니다.
간격과 그룹화	레이블 · 컨트롤 · 도움말을 한 묶음으로 둡니다. 밀도는 글자 축소가 아니라 간격으로 표현합니다.
표면과 깊이	표면 · 반경 · 경계 · 그림자의 역할을 나눕니다. 도킹 패널은 문서의 보조 영역입니다.
상호작용과 피드백	로딩 · 빈 상태 · 오류 · 완료를 구분하고 복구 행동을 줍니다. 포커스와 선택 상태를 함께 유지합니다.

II.설계 기준충돌 해결

규칙이 부딪히면 정보 · 조작 · 접근성을 먼저 지킵니다

1
정보 · 조작 · 접근성 보존
핵심 정보, 상태의 의미, 입력, 포커스와 조작 경로를 지킵니다.
2
구조와 읽기 순서 재배치
줄바꿈 · 열 전환 · 행동 묶음 · 패널 배치를 먼저 조정합니다.
3
승인 범위에서 간격 · 표면 조정
공간이 모자라다는 이유만으로 자동 compact나 글자 축소를 하지 않습니다.
4
남는 제약과 검증 기록
적용 범위 · 대안 · 영향 · FR/AT · 실제 검증을 남깁니다.

규칙마다 맡는 곳이 다릅니다

값	토큰
읽기 순서 · 정보 관계	DOM
배치 · 넘침	CSS recipe
실행 · 복구	상태 · 동작 계약

Preset은 다섯 번째 계층이 아닙니다API가 허용한 설정 조합일 뿐이며 업무 데이터 · 상태 · 권한은 따로 다룹니다.

II.설계 기준검증 분류

설계가 끝나면 여섯 갈래로 검증합니다

R
반응형
폭과 확대율에 따른 재배치와 정보 보존
A
접근성
키보드 · 이름 · 역할 · 대비 · 보조기술 동작
D
디자인
시각 위계 · 토큰 · 표현의 일관성
I
인터페이스
컨트롤의 상태와 상호작용 계약
U
사용자 흐름
완료 · 취소 · 실패 뒤의 복구 경로
S
보안
신뢰 경계 · 입력 처리 · 권한과 남용 방지

KLIC-WCAG-KRDS의 검증 분류입니다. 7 디멘션이나 토큰 위계를 대신하지 않습니다.

II.설계 기준적용 기준

화면에 적용할 때는 네 가지 숫자를 기준으로 봅니다

4.5:1

일반 텍스트 대비. 큰 텍스트는 3:1(WCAG 1.4.3)

24px

포인터 대상의 최소 24×24 CSS px(WCAG 2.5.8)

320px

이 너비에서도 정보와 기능 보존. 1280px를 400% 확대한 것과 같음(WCAG 1.4.10)

200%

텍스트를 두 배로 키워도 내용 · 기능 손실 없음(FR17)

기준이 있다고 통과한 것은 아닙니다표 · 지도 · 다이어그램처럼 두 방향 배치가 필요한 영역은 예외 여부를 따로 확인하고, 실제 제품에서 상태와 화면마다 증거를 남깁니다.

II.설계 기준색

블루는 행동, 네이비는 글, 표면은 중립색입니다

KLIC Blue행동 · 선택 · 진행#245fc2

Navy본문 텍스트#132c46

Neutral표면 · 패널#f5f7fb

Amber경고

Red위험 · 오류

성공블루 + 체크 아이콘 + 분명한 문구

초록 계열은 쓰지 않습니다초록 · 민트 · 세이지 · 틸과 초록빛이 도는 중립색을 들이지 않습니다(KLIC 에이전트 스킬 규칙).

색 값은 KLIC Original 테마의 라이트 모드 값입니다(/api/v1/themes.json). 경고 · 위험 견본은 이 안내서의 색입니다.

III.PRD v1.1

개정 기준일 2026-10-25. v1.0의 FR01–FR35 · AT01–AT26 번호를 그대로 유지합니다.

III.PRD v1.1문서의 효력(§1)

PRD는 확정 · 제안 · 예시 · 미검증을 나눠 적습니다

구분	상태	효력
4계층 · 7축 · klic. 정본	확정	라이브러리 공통 계약
현재 Site 구현 기준선	확정	저장소의 package.json · bun.lock과 구현 파일이 정본
ReUI Base UI + Nova + Neutral	제안	소비 앱의 이관 후보. 현재 Site의 설치 사실이 아님
A/B 높이, PageTitle 24→30px	예시	회귀 fixture · 산술 예시. 제품 기본값으로 올리지 않음
소비 앱 지원 환경 · 업무 · 브랜드 승인	미결정	해당 앱 출시의 단계 0 조건
제품 접근성 적합성 · 성능 수용	미검증	문서 승인이나 단위 테스트로 통과 처리하지 않음

III.PRD v1.1결정 계약(§4)

여덟 가지 결정 가운데 일곱은 확정, 하나는 예시입니다

ID	결정	확인 방법
D01	Component → Semantic → Brand → Primitive, 비Primitive는 alias만	token-contract.test.mjs
D02	Semantic 예외는 승인된 다른 Brand leaf로의 같은 타입 remap만	allowlist 부정 fixture · 소비자 diff
D03	타이포 속성은 독립 typed leaf, composite 부분 병합 없음	미지원 타입 거부
D04	배포 프로필별 CSS 생성, 번들마다 Light/Dark 전체 map	compileThemeCSS · 테마 전환
D05	DTCG 2025.10 참고 제한 프로파일, 전체 적합성 주장 없음	TOKEN_CONTRACT §3
D06	CSS 이름은 점을 하이픈으로, 충돌하면 빌드 실패	숫자 · 하이픈 · group/leaf fixture
D07	출시 판정은 선언한 제품 · 기능 단위	VALIDATION_PLAN §1

D08(예시): PageTitle 1.5→1.875rem은 예시이며 사이트 프로필의 제목 크기와 별개입니다.

III.PRD v1.1출시 등급(§5)

출시는 제품 · 기능 단위로 B0 · B1 · B2로 판정합니다

B0

출시 차단

토큰 무결성 · 입력 유실 · 실행 불가 · 모달 탈출 불가

영향 범위 배포 차단 · 무결성은 예외 없음

B1

출시 전 필수

선언한 범위의 동작 · 반응형 · 접근성 · 원본 이관

기능 보류 또는 노출을 실제로 뺀 축소 출시

B2

후속 개선

선택적 문서 편의 · 추가 예제 · 비필수 최적화

책임자 · 기한을 남기고 후속 진행

접근성 실패는 B2로 내리지 않습니다적용 가능한 WCAG 실패를 예외 승인으로 적합하다고 표시하지 않습니다. 지금의 FR · AT는 모두 B0 또는 B1입니다.

III.PRD v1.1단계 0(§5)

제품을 내보내기 전에 여섯 가지를 확정합니다

입력	남길 것	책임 역할 · 기한
기준선	소스 commit · lockfile · 설치 계열 · CSS · 토큰 profile	FE · 첫 배포 전
브랜드	사업 브랜드와 Site 표현 profile 구분, 승인 값	DS · 제품 · 첫 배포 전
지원 환경	OS · 브라우저 정확한 버전, locale · dir · IME · 보조기술 조합	QA · 접근성 · 수용시험 전
대표 업무	주요 사용자 · 권한 · 경로 · 실패 회복	제품 · 수용시험 전
사람과 승인	담당자 · 검토자 계정, gate 승인자, 결정 기한	제품 · 수용시험 전
가상화 도입	행 · 열 · 문자 길이 · 갱신 · 기기 · 예산	FE · QA · 지원 선언 전

실제 담당자 이름과 소비 앱 환경은 PRD에 없습니다. PRD도 이 부분을 “확인할 수 없습니다”라고 적습니다.

III.PRD v1.1요구사항 추적

요구사항 61개 가운데 ‘통과’ 기록은 아직 없습니다

FR 35개 + AT 26개 = 61개. 결정은 모두 확정이지만 검증 상태는 이렇습니다.

35개

미검증

FR 17 · AT 18

16개

부분 검증

FR 12 · AT 4

6개

조건부 검증

채택할 때만 적용(FR)

4개

조건부 미채택

아직 쓰지 않는 기능(AT)

함께 보기통과 0 · 실패 0 · 출시 등급 B0 19개, B1 42개 · 담당자 실명 배정 0건

출처: /design/requirements-v1.1.json(2026-10-25). 단위 테스트는 정적 계약의 증거이며 보조기술 · 실제 확대 · IME 시험을 대신하지 않습니다.

III.PRD v1.1적대검토 처분(§7)

검토 지적 12건 가운데 9건을 그대로 받아들였습니다

9건

채택

2건

부분 채택(기준선 미확정 · 광범위 gate)

1건

조건부 채택(가상화 성능)

지적	판정	반영하거나 제한한 이유
Semantic override	채택	Brand alias만 허용하고 브랜드 · 경로 · 타입 · 대상 allowlist를 검사
광범위 gate	부분 채택	제품 · 기능 단위 등급을 정의. 접근성 실패 면제는 받아들이지 않음
가상화 성능	조건부 채택	도입 전에 측정 입력 · 예산 확정. 쓰지 않는 엔진 개발은 요구하지 않음

III.PRD v1.1검증 계획 §3

확대 시험은 네 가지를 따로따로 합니다

1
Page zoom 100→200%
내용 · 레이블 · 오류 · busy · 조작 · 포커스를 확인하고 전후 글자 크기를 기록합니다.
2
텍스트만 200%
Firefox의 텍스트만 확대로 시험합니다. 없는 기능을 지원한다고 주장하지 않습니다.
3
Reflow 320 CSS px
1280px를 400%로 확대한 너비와 같은지 실제 값을 기록합니다.
4
Text spacing
아래 네 속성만 함께 바꾸고 내용 · 기능 손실을 봅니다.

사용자 stylesheet(검증 계획 §3)

* { line-height:1.5 !important;
    letter-spacing:.12em !important;
    word-spacing:.16em !important; }
p { margin-block-end:2em !important; }

기본 디자인 값이 아닙니다시험용 값이며, 매 시험 뒤 설정을 처음으로 되돌립니다.

IV.쓰는 법

브라우저에서 둘러보고, 터미널과 에이전트에서는 같은 이름으로 가져옵니다.

IV.쓰는 법둘러보기

세 곳을 차례로 보면 구조가 잡힙니다

1

직접 눌러 보고 고르기

갤러리에서 컴포넌트를 조작합니다. 이름을 누르면 미리보기 · 코드 · 설계 명세가 나옵니다.

#components

2

값의 출처 이해하기

토큰 탐색기에서 최종 값과 네 계층의 참조를 봅니다. A/B fixture로 높이 변화를 비교합니다.

#tokens

3

화면이 바뀌는 순간 보기

리사이즈 실험실에서 컨테이너 폭만 바꿔 제목 · 본문 · 입력이 다르게 변하는 방식을 비교합니다.

#lab

제품에 적용할 때는 실제 설치본 · 브랜드 · 지원 환경을 고정하고 PRD의 수용시험을 수행합니다.

IV.쓰는 법연결 방식

웹 · API · CLI · MCP가 같은 레지스트리를 읽습니다

방식	상태	할 수 있는 일
API	공개 · GET만 · 쓰기 없음	/api/v1/ 아래 레지스트리 · 디자인 기준 · 테마 JSON 조회
CLI	사용 가능 · npm 발행 0.0.4	list · search · get · source · contract · plan · add · mcp · theme
MCP	원격 · stdio, 공개 읽기 전용	읽기 도구 9개: 검색 · 항목 · 계약 · 모션 · 테마 조회
WebMCP	브라우저가 지원할 때 · 열린 탭만	도구 11개(읽기 9개 · klic_open_item · klic_open_motion)
Agent Skill	npm 발행 · klic-design 0.0.4	에이전트에 KLIC 디자인 규칙을 연결
테마 키트	사용 가능	테마 10 · 프로필 3 · 재질 4 · 모드 3 조합을 번들로

출처: /api/v1/capabilities.json · release c2995d1ee74a1aa4 (2026.11.04). Figma는 매니페스트와 이관 안내만 있고 실시간 동기화는 없습니다.

IV.쓰는 법에이전트에 연결

에이전트에는 스킬과 MCP를 연결합니다

1스킬 설치 · 연결(Bun)

터미널

$ bun add -d klic-design
$ bunx skills experimental_sync -y

npm이면 npm install -D klic-design 뒤 npx skills experimental_sync -y

2MCP 연결(Codex 예)

터미널

$ codex mcp add klic --url https://design.klic.co.kr/api/v1/mcp

experimental_sync는 실험 기능입니다klic-design 0.0.4가 npm에 발행되어 있습니다. experimental_sync 명령은 실험 기능입니다.

MCP · API는 읽기 전용입니다공개 HTTP MCP 설정입니다. ChatGPT에서는 사이트의 개인 플러그인을 씁니다.

한 패키지로 통합 발행됩니다klic-design 0.0.4에 토큰 · 테마 · CLI · 컴포넌트 · 블록 · 모션이 포함됩니다.

IV.쓰는 법에이전트에게 맡길 때

에이전트에게 맡길 때 다섯 가지를 확인합니다

계약부터 읽고 release · revision을 기록했다(바뀌면 다시 읽음)
ready 항목만 구현으로 쓰고 planned는 제안으로 표시했다
토큰 경로는 klic. 아래에 두고 4계층을 지켰다(없는 이름을 만들지 않음)
카탈로그에 등록된 글꼴만 쓰고 파일 고지를 남겼다
소스는 --dry-run으로 먼저 보고 새 폴더에만 받았다

계약 읽기 · 미리 보기

$ bun klic.mjs contract
$ bun klic.mjs add <kind> <id> --out <새 폴더> --dry-run

출처: /skills/klic-design/SKILL.md. 체크는 이 화면에서만 셉니다.

참고FAQ

자주 헷갈리는 다섯 가지

사이트에 ReUI · Base UI가 설치되어 있나요?

아닙니다. 현재 dependency에 없습니다. ReUI Base UI + Nova + Neutral은 소비 앱의 이관 후보(제안)입니다.

npm으로 바로 설치할 수 있나요?

klic-design 0.0.4가 npm에 발행되어 있습니다. 하나의 패키지에서 Agent Skill · 토큰 · 테마 · CLI · 컴포넌트 · 블록 · 모션을 제공합니다.

A/B 높이나 PageTitle 24→30px는 기본값인가요?

아닙니다. 회귀 fixture와 산술 예시이며 제품 기본값으로 자동으로 올리지 않습니다.

Liquid Glass는 실제 유리처럼 굴절되나요?

tint · blur · rim을 쓴 CSS 광학 근사입니다. 실제 굴절이나 Figma GLASS와 같은 렌더링을 주장하지 않습니다.

문서와 단위 테스트가 있으면 접근성이 검증된 건가요?

아닙니다. 단위 테스트는 정적 계약의 증거입니다. 자동 탐지 결과 0건도 WCAG 적합성 판정이 아니며, 실제 보조기술 · 확대 · IME 시험이 따로 필요합니다.

참고용어집

이 안내서에 나온 용어

alias(참조)값을 직접 쓰지 않고 다른 토큰의 경로를 가리키는 것. 예: {klic.brand.dimension.control.height.md}

ATAcceptance Test. 수용시험 번호(AT01–AT26)

Brand(브랜드 선택)브랜드가 Primitive 가운데 무엇을 쓸지 고른 공통 팔레트·간격·반경·컨트롤 척도

Component(컴포넌트 적용)버튼 높이처럼 실제 부품의 속성을 Semantic 토큰에 연결하는 토큰

DTCGDesign Tokens Community Group 의 토큰 교환 형식. KLIC 은 2025.10 형식을 참고한 제한 프로파일을 쓰며 전체 적합성은 주장하지 않는다

fixture(시험용 고정 입력)시험을 위해 만든 고정 예시. A/B 높이 fixture 는 제품 기본값이 아니다

FRFunctional Requirement. PRD 의 기능 요구사항 번호(FR01–FR35)

gate(관문)출시나 기능 지원 선언 전에 반드시 거쳐야 하는 검토 지점

literal(실제 값)2.25rem, #245fc2 처럼 참조가 아닌 값 그 자체

MCPModel Context Protocol. 에이전트가 외부 도구를 부르는 규약. KLIC 은 공개 읽기 전용 MCP 를 제공한다

Portal대화상자·메뉴처럼 본문 밖 다른 위치에 그려지는 화면 요소. 테마·방향이 같은 문맥을 쓰는지 따로 확인한다

Preset(프리셋)컴포넌트 API 가 실제로 허용한 size·variant·density 같은 설정의 승인된 조합. 토큰의 다섯 번째 계층이 아니다

Primitive(원시 값)브랜드와 상관없이 변하지 않는 색·길이·글꼴 같은 원재료 값. 실제 값(literal)은 이 계층만 가진다

recipe(구현 규칙)행간·줄바꿈·실제 조작 영역처럼 토큰 밖에서 DOM·CSS 로 보장하는 구조 조건

reflow(재배치)좁은 폭이나 확대에서 가로 스크롤 없이 내용을 다시 배치하는 것. 세로 콘텐츠는 320 CSS px 너비가 기준

ReUI이관 후보로 검토한 외부 UI 라이브러리. 현재 사이트에는 설치되어 있지 않다

Semantic(의미와 역할)주요 행동·본문·입력·오류처럼 제품 안에서의 역할을 나타내는 토큰. Brand 를 참조한다

WebMCP브라우저 탭 안에서 기능을 감지해 쓰는 MCP 방식. 열린 탭 범위에서만 동작한다

단계 0소비 제품이나 새 기능을 출시하기 전에 기준선·브랜드·지원 환경·대표 업무·담당자를 확정하는 일

재질(Material)같은 구조에 입히는 표면 표현. Flat · Glass · Solid Glass · Liquid Glass 네 가지

참고원문과 출처

원문은 사이트에서 바로 받을 수 있습니다

문서	담긴 내용	주소(design.klic.co.kr)
PRD v1.1	범위 · 결정 · 단계 0 · 검토 처분	/KLIC_Design_System_PRD_v1.1.md
기술 계약	값과 참조 · 이름 · 테마 출력	/TOKEN_CONTRACT_v1.1.md
검증 계획	최소 표본 · 확대 · 보조기술 · 출시 조건	/VALIDATION_PLAN_v1.1.md
요구사항 추적	FR 35 + AT 26의 상태 · 책임 · 증거	/design/requirements-v1.1.json
공통 디자인 기준	7 디멘션 · 충돌 해결 · 프리셋 범위	/api/v1/design-system.json
출처 · 라이선스	파일별 원문 고지 색인	/licenses/README.md

2026.11.04 기준 레지스트리 release c2995d1ee74a1aa4와 designSystem revision 6f9c8f5e4d7c767f를 확인해 수치를 갱신했습니다. 요구사항·검토 기록은 문서 원문 기준이고, 화면 캡처는 2026.10.30 촬영본입니다.

값의 출처를 알고, 미검증은 미검증으로

감사합니다

사이트 · design.klic.co.kr
PRD 원문 · design.klic.co.kr/KLIC_Design_System_PRD_v1.1.md

「KLIC 디자인 시스템」 한눈에 보기

이 안내서의 구성

먼저 기억할 세 가지

사이트는 PRD를 살펴보는 HTML 데모입니다

4계층은 소유권, 7 디멘션은 관점입니다

문서에 있다고 검증된 것은 아닙니다

I.KLIC은 무엇인가

예제·토큰·테마와 도구를 한곳에서 제공합니다

컴포넌트

블록

디자인 토큰

테마 SDK

CLI

MCP · API

컴포넌트 109종 · 실행 블록 247개 · 모션 소스 패턴 884개

컴포넌트는 다섯 갈래입니다

블록은 업무 화면 단위로 56갈래에 묶여 있습니다

같은 구조에 네 가지 표면을 입힙니다

Flat

Glass

Solid Glass

Liquid Glass

컴포넌트마다 기본형과 추가형을 나란히 비교합니다

분류로 좁히기

이름 · 형태 검색

형태 나란히 보기

동작 · API