AI-KMS Design System

디자인 토큰, 컴포넌트, UX, 패턴 가이드.

Version1.0
Date2026.05.07
작성자AX컨설팅팀 김경임

컬러

Brand #E0282F · Neutral · Semantic 3계층.

Brand · KT Red

Brand 50
#FCE9E9
--color-brand-50
Brand 100
#F8C7C9
--color-brand-100
Brand 300
#E85A5F
--color-brand-300
Brand 500 ★
#E0282F
--color-brand-500
Brand 600
#C81F25
--color-brand-600
Brand 700
#A8161B
--color-brand-700
Brand 900
#6E0F12
--color-brand-900

★ Primary CTA, 핵심 알림, 활성 상태에만 사용.

Neutral · 무채색 시스템

Surface
#FFFFFF
Background
#FAFAFA
Background Muted
#F3F4F6
Border
#E9EAEE
Text Tertiary
#8A8D91
Text Secondary
#55585D
Text Primary
#191A1B

Semantic

Info
#0099E0 · BG #D9F2FF
정보, AI 답변 인용
Success
#6941FF · BG #EFEBFF
완료, 저장 성공
Warning
#007F7F · BG #E1F5F5
검토 필요, 낮은 신뢰도
Error
#E0282F · BG #FCE9E9
오류, 삭제, 차단

타이포그래피

Pretendard · 본문 Medium 500 · 제목 SemiBold 600 이상.

Display 156 / 800 / -1.5px
Pretendard ExtraBold
지식이 흐르는 자리
Display 240 / 700 / -0.8px
Pretendard Bold
AI가 답을 찾아드립니다
Heading 132 / 700 / -0.5px
Pretendard Bold
최근 추가된 문서
Heading 224 / 600 / -0.3px
Pretendard SemiBold
검색 결과 24건
Heading 318 / 600
Pretendard SemiBold
제품 요구사항 정의서
Body Large18 / 500 / 1.7
Pretendard Medium
AI-KMS는 흩어져 있는 사내 지식을 하나의 흐름으로 연결합니다.
Body15 / 500 / 1.6
Pretendard Medium
자연어로 질문하면 AI가 사내 문서에서 답을 찾고, 모든 답변에는 출처가 함께 제공됩니다. 신뢰할 수 있는 답변을 빠르게 받아보세요.
Caption13 / 500
Pretendard Medium
2026년 5월 7일 업데이트 · 김경임
Mono13 / JetBrains Mono
api/v1/search?q=onboarding

스페이싱 & 그리드

4pt 베이스 · 8pt 스케일.

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px

모서리 & 그림자

Radius 4–16px · Elevation 1–4단계.

Elevation 1
카드, 인풋
Elevation 2
드롭다운, 호버
Elevation 3
팝오버, 토스트
Elevation 4
모달, 다이얼로그

아이콘

24px 그리드 · 1.5px 스트로크 라인 아이콘 표준. Lucide / Phosphor 스타일 권장.

search
menu
folder
document
plus
help
ai
bell

버튼

행동의 우선순위와 시각적 위계 구분. KT Common Button 스펙 기반 Primary / Secondary / Tertiary / Danger 4단계 구성.

Variants · 변형

Sizes · 사이즈

Icon Button · 아이콘 버튼

사용 원칙 · Primary는 화면당 1개. Secondary는 보조 액션, Tertiary는 약한 행동(자세히 보기, 더보기), Danger는 되돌릴 수 없는 행동 전용.

인풋

검색·폼 입력·AI 질문에 쓰는 표준 입력 필드.

카드

문서·워크스페이스·컬렉션을 표현하는 기본 카드.

📁
제품팀 워크스페이스
324개 문서 · 마지막 업데이트 2시간 전
📄
2026 Q2 OKR
PRD · 김경임 · 어제 수정됨
✨
AI 답변 모음
최근 7일간 142개 질문

배지 & 태그

상태·카테고리·신뢰도를 표시하는 작은 라벨. KT Callout 팔레트 그대로 사용.

AI 답변 검토 완료 검토 필요 중요 초안

UX 원칙

디자인 결정의 3가지 기준.

P · 01

Seamless Connect

매끄러운 연결

검색 → 답변 → 출처 → 원문까지 인지 흐름을 끊지 않는다.

P · 02

Trust by Source

출처로 신뢰를

모든 AI 답변은 근거 문서를 함께 표시한다.

P · 03

Progressive Reveal

단계적 노출

핵심부터 상세까지 단계적으로 공개한다.

UX Writing

KT Seamless Flow 기반 언어 원칙 — 간결·정중·구체.

원칙

간결하게
불필요한 수식어와 중복 표현 제거.
정중하게
사용자를 존중하는 어조. 명령형 대신 안내형.
구체적으로
"오류 발생" 대신 "검색 결과를 불러오지 못했어요"처럼 명확하게.

Do & Don't

✓ Do
검색 결과를 불러오지 못했어요. 다시 시도해주세요.
✗ Don't
에러가 발생하였습니다. (Error 500)
✓ Do
아직 답변이 충분하지 않아요. 더 구체적으로 질문해보시겠어요?
✗ Don't
답변 불가. 정보가 없습니다.

AI Agent

AI 응답은 일반 UI와 다른 시각 언어. 출처 표시와 신뢰도 필수, 사용자가 답변 근거를 즉시 확인 가능해야 함.

AI 답변 버블

AI Assistant · 신뢰도 92%
Q. 신규 입사자 온보딩 일정은 어떻게 되나요?
신규 입사자 온보딩은 입사일부터 2주간 진행됩니다. 1주차에는 회사 소개와 도구 셋업, 2주차에는 팀별 OJT가 이루어집니다.
📄 신규 입사자 가이드 v2.3 📄 온보딩 체크리스트

AI 답변 표기 원칙 · ① 시작 인디케이터(녹색 점)로 AI 응답임을 명시 ② 신뢰도 % 표기 ③ 출처 문서를 칩 형태로 명시 ④ 강조 정보는 굵게 표시 ⑤ 답변이 끝난 후에는 "도움이 되었나요?" 피드백 컴포넌트 연결

목업 예시

디자인 시스템을 적용한 실제 화면 예시. 무채색 베이스 위 KT 레드 절제 사용.

홈
🔍 무엇이든 물어보세요…
최근 활동
📄
2026 Q2 제품 로드맵
2시간 전 · 김경임
✨
AI: "온보딩 프로세스는 어떻게 되나요?"
3시간 전 · 출처 4개
📁
디자인팀 워크스페이스
어제 · 12명 활성
AI 답변
신뢰도 92%
Q. 신규 입사자 온보딩 일정은?
신규 입사자 온보딩은 입사일부터 2주간 진행됩니다. 1주차에는 회사 소개와 도구 셋업, 2주차에는 팀별 OJT가 이루어집니다.
출처
📄
신규 입사자 가이드 v2.3
HR · 2026.04.12 업데이트
📄
온보딩 체크리스트
People팀 · 2026.03.20

디자인 토큰

개발자가 바로 쓰는 CSS 변수 토큰. Tailwind / Figma Variables와 1:1 매핑.

TokenValue용도
--color-brand-500#E0282FKT 시그니처. Primary CTA, 핵심 강조
--color-text-primary#191A1B본문 텍스트 (기본)
--color-text-secondary#55585D보조 텍스트
--color-border#E9EAEE기본 구분선, 카드 보더
--color-info#0099E0정보 콜아웃 (KT Negative)
--color-success#6941FF긍정 상태 (KT Positive · 보라)
--space-416px기본 패딩, 간격
--radius-md8px버튼, 인풋, 카드 모서리
--shadow-20 2px 8px rgba(25,26,27,0.08)드롭다운, 호버 그림자
--font-sansPretendard모든 본문/UI 텍스트