/라이브러리
시작하기
시작하기
DESIGN THAT CONNECTS.

좋은 디자인을,
당신의 제품으로.

아이디어가 인터페이스가 되는 순간.
섬세한 컴포넌트와 완성도 있는 블록으로
당신의 다음 경험을 만드세요.

블록 둘러보기 컴포넌트 만나보기
104 Components실행 231개 · 준비 80개 · 전체 311개Designed by KLIC

HTML 데모와 klic-interface-library@0.0.1 토큰·테마 SDK, CSS·TypeScript·CLI 패키지를 제공합니다. bun run pack:npm로 빌드합니다. CLI 기본 런타임은 Bun이며 발행 후 bunx --bun으로 실행합니다. npx는 Node.js 호환 경로입니다. 두 소비 경로를 로컬 검증했으며 npm 공개 발행 전입니다. 컴포넌트·블록은 별도 React API가 아닌 참고 소스 작업 폴더입니다. npm·Bun 패키지 안내 ↗ 제공 범위 ↗

ONE SYSTEM. ENDLESS POSSIBILITIES.
작은 디테일, 큰 차이.
Workspace•••
YOUR NEXT WORKSPACE

더 명확한 하루.

K
샘플 데이터
Project progress84%이번 주의 흐름
Active projects 12Completed 08Team members 06
새로운 경험을 설계하세요Design system · In progress
Aa
BUILT ON A FOUNDATION하나의 기준, 다채로운 경험.klic.
INTERFACE / 001
CRAFTED FOR REAL EXPERIENCES

디자인의 감각과 개발의 기준이 만나는 곳.

Components Blocks Design tokens CLI MCP API
ONE SYSTEM · FOUR MATERIALS

같은 구조, 서로 다른 깊이.

배치와 글꼴, 블루 아이덴티티를 유지하며 네 가지 표면을 비교하세요.

내 화면에 적용하기 ↗

Flat

WORKSPACE / 01↗

프로젝트 진행률

78%
24 개 작업 완료+12.4%
✓ 정상 진행Q4 · 2026

불투명 · 명확하고 차분한 기본값

Glass

WORKSPACE / 01↗

프로젝트 진행률

78%
24 개 작업 완료+12.4%
✓ 정상 진행Q4 · 2026

반투명 · 가볍게 겹쳐지는 표면

Solid Glass

추천
WORKSPACE / 01↗

프로젝트 진행률

78%
24 개 작업 완료+12.4%
✓ 정상 진행Q4 · 2026

높은 불투명도 · 깊이와 가독성의 균형

Liquid Glass

WORKSPACE / 01↗

프로젝트 진행률

78%
24 개 작업 완료+12.4%
✓ 정상 진행Q4 · 2026

빛나는 가장자리 · tint, blur, rim

Liquid Glass는 tint · blur · rim을 사용한 CSS 광학 근사 표현이며 네이티브 굴절을 재현하지 않습니다.

THE COLLECTION / 01

작은 디테일에서,
완성된 화면까지.

업무의 복잡함을 덜어내는 인터페이스.
직접 열어보고, 움직여보고, 당신의 방식으로 바꾸세요.

전체 블록 탐색
SELECTED LIVE PREVIEWS
Dashboard / Knowledge01

Workspace intelligence

정보를 한눈에, 업무를 한곳에.

Kanban / Collaboration02

A clearer workflow

팀의 다음 움직임이 보이는 보드.

Calendar / Planning03

Time, beautifully arranged

계획부터 실행까지, 하나의 흐름.

Flow / Automation04

Everything is connected

복잡한 연결을 명확한 경험으로.

Diagram / Service05

서비스의 연결을 한눈에

서비스 관계와 장애의 영향을 한눈에 살펴보세요.

Flow / Parallel06

함께 움직이는 실행 흐름

병렬로 진행되는 작업과 합류 지점을 명확하게.

Authentication / Glass07

A considered first impression

첫 만남부터 느껴지는 완성도.

Form / Interaction08

Details that do the work

작은 입력에도 분명한 기준.

Onboarding / Guided tour09

자연스럽게 시작하는 경험

첫 사용부터 다음 행동까지, 친절한 화면 안내.

Chart / WBS10

WBS 작업 분해

작업 계층과 의존 관계를 하나의 계획으로.

Chart / Sankey11

생키 흐름

유입부터 전환까지, 수량의 흐름을 읽으세요.

Chart / Gantt12

간트 일정

일정과 진행률, 선후행 관계를 함께 비교하세요.

231개의 실행 예시는 59개의 구현 모듈을 공유합니다. 준비 중인 항목은 라이브러리에서 별도로 표시합니다.

MAKE IT YOURS / 02

보는 것에서,
만지는 경험으로.

테마와 밀도를 바꿔보세요.
같은 설계가 다른 분위기로 연결됩니다.

LIVE COMPONENTS
Design workspace

다음 아이디어의 시작.

좋은 경험은 작은 선택에서 시작됩니다.

팀과 함께 만들기

샘플 동작을 직접 체험해보세요.

YOUR DESIGN LANGUAGE
Aa명확한 위계.
기분 좋은 리듬.
정교함일관성가능성
Ready to build100%
토큰의 연결 살펴보기
FROM DESIGN TO CODE / 03

좋은 디자인을,
더 가까운 개발로.

브라우저에서 찾은 바로 그 컴포넌트.
에이전트와 터미널에서도 같은 이름으로 연결하세요.

Your tools.
Our design language.

검색하고, 구조를 확인하고, 소스를 가져오세요. 웹·MCP·CLI·API가 같은 레지스트리를 읽습니다.

CLI 다운로드 MCP 연결 안내 OpenAPI 다운로드
~/KLIC
codex mcp add klic --url https://design.klic.co.kr/api/v1/mcp
●

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

연동 문서에서 자세히 보기
YOUR NEXT CHAPTER

다음 경험은,
여기서 시작됩니다.

KLIC 라이브러리 시작하기
컴포넌트와 블록 전체 목록

컴포넌트와 블록 전체 목록

항목별 미리보기, 실제 소스와 설계 적용 지침을 살펴보세요.

컴포넌트 · 104
블록 · 221
↑ ↓ 이동Enter 열기ESC 닫기