KTC Smart Lab — 공통 UI 요소

기준 문서. 대시보드(홈)·시료 화면에 실제 반영된 요소를 IBM Carbon 컴포넌트 카테고리 순서로 정리했다. 새 디자인은 이 문서의 요소를 그대로 사용하고, 여기에 없는 요소는 IBM Carbon Design System에서 적합한 컴포넌트를 골라 이 톤(직각 모서리 · Pretendard · #0f62fe 액센트 · IBM 그레이 스케일 · 0.16px/−0.3px 자간)으로 변환해 추가한 뒤 이 문서에도 등재한다. 대시보드 전용 요소는 dashboard.html에 별도 정리. 챔버 상세 화면은 이 문서 범위 밖.

01Breadcrumb

대시보드 — 실(Room) 확대 화면 상단

Dashboard 2F 환경내구성

02Button

시료 — Drawer 푸터 · 신규접수 · 조건 설정 / 높이 40px 기본, 푸터에서 보조:주요 = 3:7 비율

저장
Primary(blue) #0f62fe → hover #0043ce · 저장·다음 등 진행 액션
직접 입력
Primary(dark) #393939 → hover #161616 · 업로드·직접 입력 등
취소
Secondary → hover #f4f4f4
조건 설정
Ghost(소형 30px) → hover #e0e0e0
신규접수
CTA(아이콘+굵은 라벨)
아이콘 버튼(32px · 아이콘 20px) → hover #e0e0e0 · title 툴팁 필수 · 예: 챔버 상세로 이동(시험중 상세 패널)
취소
저장
패널 푸터 버튼 비율 — 보조 flex:3 · 주요 flex:7 (저장은 파란색)
이력 상세
성적서 다운로드
Disabled — #e0e0e0 면 + #a8a8a8 글자 + cursor not-allowed · 예: 성적서 다운로드는 보고 단계에서만 활성

03Content switcher

대시보드 — 알람만 보기 / 온습도·상세 보기 토글 (아이콘 38×40px)

선택 = #161616 배경 + 흰 아이콘 · 비선택 = 흰 배경 + #525252

04Data table

시료 — 접수/등록/이력 목록. 헤더 44~46px · 행 52~54px · hover #f7f9fb · 셀 16px/−0.3px

Total 48
최신순
시료 ID접수번호시험 항목단계상세 상태
M-103R-2608-015 HAST (130°C / 85%RH, 96h) 시험중 이상
M-108R-2608-009 보드레벨 충격시험 보고
시각구분변경 항목 · 이전값변경자
08-19 11:40이상챔버 압력 2.3atm 초과시스템
변형 — 회색 헤더(#e0e0e0) 테이블: 모달·이력용, 헤더 색 #393939

05Date picker (기간 선택)

공통 조회 바 — 시료·시험 서브페이지 공용. 세그먼트 44px · 기본 선택 1주 · 최대 1년 제한(안내 모달) · 검색바(시료ID·접수번호·의뢰자·담당자)와 한 행

당일
1주
1개월
1년
직접 지정
~
직접 지정 — 158×40 · #f4f4f4 면 + 1px #8d8d8d 밑줄 · 미입력 placeholder yyyy-mm-dd · 숫자만 입력하면 하이픈 자동 · 적용/초기화 버튼으로 닫힘 · 유효성 오류는 alert popup

06Dropdown

시료 — 목록 정렬(32px) / 대시보드 — 레이어 선택(40px) · 열린 메뉴 항목 34~40px, hover #eef1f6

최신순
정렬 드롭다운 32px
전체 층
레이어 선택 40px (대시보드)
전체 층
1F
2F
열린 메뉴 — 선택 항목 #eef1f6 + #0f62fe

06Dropdown — 장비 선택 (인라인 수정)

시험 수행 — 계획 단계 상세 패널. 장비 값 우측 연필로 진입, 체크로 확정 · 취소로 복귀

HA-01 초가속 항온항습 시험기
트리거 32px · 상태점(원형 9px) + ID 14px/600 + 장비명 13px #525252 · 우측 체크(완료 #0f62fe)/X(취소)
HA-01 초가속 항온항습 시험기 TH-01 항온항습기 TS-01 열충격시험기
항목 40px · 현재 값 #eef2f6 · 상태점 = 가동 중 #24a148 / 경고 #f1c21b / 위험 #da1e28 / 유휴 #c6c6c6 (실시간 영상 레이어와 동일)

07Empty state

시험 수행·시험 이력 — 초기(미선택) 우측 상세 패널. 카드가 선택되기 전에는 하이라이트도 없다

시험을 선택하세요
회색 헤더 밴드(46px #e0e0e0) 유지 + 중앙 돋보기(#c6c6c6) + 안내 15px #8d8d8d — "…를 선택하세요"

08File uploader

시료 접수 — 신청서/이미지 업로드 (Drag & Drop)

신청서 업로드
또는 Drag & Drop 하세요

09Link

전 화면 공통 — 텍스트 액션 (모두 읽음으로 표시, 항목 추가 등)

기본 링크 #0f62fe 항목 추가

10Modal

시료 — 저장 확인 / 안내 / QR 발급 / 이력 상세. 오버레이 rgba(22,22,22,.4)

저장하시겠습니까?
아니오
확인 모달 — 바탕 #f4f4f4 · 하단 56px 버튼 1:1 (단일 액션이면 확인 하나)
이력 상세 M-103 · R-2608-015
대형 콘텐츠 모달 본문…
대형 모달 — 다크 타이틀바 52px(#161616) + 부제 #c6c6c6

11Notification

공통 — 토스트(3초 자동 소멸) / 실시간 경보 토스트(자동 소멸 없음 · X로 닫으면 localStorage에 기억되어 전 화면·재방문에도 재노출 금지) / 벨 배지. 알림 패널 전체는 탑바우측.dc.html 마스터가 원본

저장되었습니다
성공 토스트 — 화면 중앙 · 체크 #42be65
이상 진동 감지 C-05 · 1Y 진동 RMS 4.8mm/s · 임계 4.0mm/s 초과
경보 토스트 — 420px · 화면 중앙 고정 · 닫기 전까지 유지 · 아이콘 22px · 제목 17px/600 · 본문 15px
벨 배지 — 8px 빨간 닷 (숫자 없음)

12Number input

시료 접수 — 시료수(44px 스텝퍼) / 방법·항목 표 내 인라인 스텝퍼(22px)

44px 스텝퍼 + 헬퍼 텍스트 "최대 99 EA" (13px #6f6f6f)

13Popover

탑바 — 사용자 정보 레이어 (원본: 탑바우측.dc.html). 헤더 48px #e0e0e0 · 폭 250px

사용자 정보
한신애 신뢰성평가팀 · 책임연구원 sahan@ktc.re.kr
마이페이지
로그아웃

14Progress bar

대시보드 — 시험 카드 진행률 (4px 바 + % 라벨)

50%

15Progress indicator

시료 접수 Drawer — 단계 스텝 (26px 원 + 2px 연결선)

기본 정보
2 시료 정보
3 시료 이미지
완료 = 파란 원+체크 · 현재 = 파란 테두리 · 대기 = 회색 테두리 · 연결선 완료 #0f62fe / 대기 #e0e0e0

시료 이력 — 진행 타임라인 (56px 원 + 1px 세로선)

시험중
08-19 09:12한신애
조건 세팅 후 시험 개시

16Radio button

시료 접수 — 성적서 구분 (16px 원 · 그룹 배경 #f4f4f4)

국문 영문

17Search

시료 — 상단 검색바 44px (흰 면 · 그림자 없음)

18Structured list

시료 등록 — 배정 가능 장비 (행 52px · 선택 = 2px 파란 아웃라인)

HH-01 고온고습 전압인가시험기 가동 중
HT-01 고온시험기 유휴
상태 닷 — 가동 #24a148 · 유휴 #c6c6c6 · 경고 #f1c21b · 위험/통신오류 #da1e28

19Tabs

시료 — 탑바 텍스트 탭 / 모달 언더라인 탭 / 알림 카운트 탭 / 컨테인드 탭

시료 접수 시료 등록 시료 보관 현황 시료 이력
변경 이력
시험 스펙
사용 계측기
전체8
경보3
시험3

컨테인드 탭 (Carbon Contained Tabs) — 시료 등록 '등록 대기/보류'. active = 흰 면 + 2px #0f62fe 상단 보더 + 600, inactive = #e0e0e0 면(hover #d1d1d1) + 인접 구분선 1px #8d8d8d. 탭 아래 콘텐츠와 2px 간격

등록 대기8
등록 보류2

20Tag

시료 단계 태그 / 경보 표시 표준 2종 / 층 요약 배지 / 칸반 카드 상태 점

칸반 카드 상태 점 10px 원형(시험중 컬럼에만) — 이상 #da1e28 깜빡임 1.1s · 검토 #f1c21b · 정상 #24a148 · 텍스트 없음, title 툴팁으로 상태명

19-1 단계 태그 — 시료 이력·목록

24px pill · 파스텔 면 + 동계열 진한 글자(#161616 아님) · hover는 채도 +8% / 명도 −7%

접수 등록 계획 시험중 완료 보고 default
접수 등록 계획 시험중 완료 보고 hover

19-2 경보 표시 표준 ① 등급 아이콘

쓰는 곳: 챔버 상세 알람 리스트 · 대시보드 카드 툴팁 · 알림 패널·경보 토스트. 위험 = 빨간 팔각형 느낌표(#da1e28) · 경고 = 노란 삼각형 느낌표(#f1c21b) · 15~18px · 깜빡임 없음 · 다크·밝은 표면 공통

위험 경고
과전류 18.4A / 한계 16.0A 과전압 242V / 한계 240V 다크 표면 동일 아이콘

19-3 경보 표시 표준 ② 시료·센서 경보 칩

쓰는 곳: 챔버 카드 안 시료 셀 · 챔버 상세 센서 · 시험 툴팁의 시료 항목. 9px 사각 칩(radius 0) · 0.7s 깜빡임 + glow. 텍스트 라벨을 붙이지 않고 칩만으로 상태를 표기

정상 재시험 · 경고 이상 · 위험

선택 기준 — 알람의 등급을 글자로 읽혀야 하면 ①, 개별 대상(시료·센서) 위에 표기하면 ②. 같은 화면에서 둘을 섞지 않는다.

19-4 층·실 요약 배지

알람 위험 2 · 경고 3 알람 경고 1 층 상태 안정

21Text input

시료 접수 폼 — 라벨 14px #525252 · 필드 44px. 편집 = 흰 배경 + 2px #0f62fe 밑줄 / 읽기 = #f4f4f4 + 1px #8d8d8d

회사명 편집 가능
접수번호
R-2608-041
읽기 전용
시료수
EA
필수 항목입니다

22Tile

시료 — KPI 타일(숫자 34px Light) / 이력 — 단계 필터 타일(클릭 시 2px 아웃라인). 카드 그림자 0 4px 12px rgba(0,0,0,.10)

21-1 상태 버튼 (단계 필터) — default / hover

시료 이력·접수·등록 상단. 면 = 단계 태그와 같은 파스텔, hover = 채도 +8% / 명도 −7%. 라벨 14px/600 · 숫자 30px Light · 단위 13px #525252. 선택 시 2px #0f62fe 아웃라인

접수
4
등록
4
계획
8
시험중
16
완료
8
보고
8

default — 접수 #c6c6c6 · 등록 #d2e376 · 계획 #e8d9b8 · 시험중 #a7f0ba · 완료 #bcdcf0 · 보고 #d7c1ff

접수
4
등록
4
계획
8
시험중
16
완료
8
보고
8

hover — 접수 #b8b8b8 · 등록 #cfe45d · 계획 #e3ce9f · 시험중 #8bf0a5 · 완료 #a1d0ed · 보고 #c3a2ff

21-2 KPI 타일

보관 중
57
시험중
4

23Tooltip

대시보드 — 카드 hover 다크 툴팁 / GNB — 사이드바 블루 툴팁

HH-01 고온고습 전압인가시험기
온도 경고 · 임계 근접
사이드바 열기

24UI shell

공통 프레임 스펙 — 마스터 파일이 원본이므로 여기서는 수치만 기록

· GNB 사이드바 — 폭 64px · #161616 · 로고 영역 49px · 확장 패널 230px(#161616, 항목 42px)
· 탑바 — 높이 49px(대시보드 48px) · #393939 · 탭 18px/자간 0.16px · 우측 아이콘 셀 52px · 셀 경계 1px #525252 · hover #525252
· 탑바 우측(영상 + 벨 알림 + 사용자 메뉴) — 탑바우측.dc.html 마스터를 dc-import로 사용, 개별 화면에서 복제 금지
· 팝업/패널 타이틀바 — 48px #e0e0e0 (16px/600) · 대형 모달은 52px #161616 (18px/600 흰색)
· 콘텐츠 영역 — 배경 #f4f4f4 · 패딩 24px · 카드 간격 16px