Design Reference Lab

공용 컴포넌트(ui-kit.css)와 디자인 토큰을 실제 스타일로 표시합니다.

Color Tokens

공용 컴포넌트는 --ui-* 토큰을 사용합니다. 기본값은 마켓플레이스의 회색 계열입니다(ui-kit.css). 주 버튼·포커스·선택 표시에만 사이트 공용 primary 토큰을 사용합니다(styles.css).

토큰	Light	Dark	용도
`--ui-surface`	`#ffffff`	`#171717`	카드·패널·입력 필드 배경
`--ui-surface-2`	`#f3f4f6`	`#1d1d1d`	선택된 Chip·Segmented Control 틀·Neutral Badge·Callout 배경
`--ui-border`	`#e6e7ea`	`#2a2a2a`	카드·패널·List Row 테두리
`--ui-border-2`	`#d3d5da`	`#3a3a3a`	hover·선택 상태 테두리, Tag 테두리
`--ui-text`	`#1f2328`	`#edf0f3`	제목·본문
`--ui-muted`	`#565b62`	`#aeb6c1`	설명 텍스트·Chip 텍스트
`--ui-soft`	`#8a8f96`	`#7c828c`	보조 텍스트·아이콘
`--ui-hover`	`#f3f4f6`	`#1d1d1d`	List Row·Text Button의 hover 배경
`--ui-func`	`#5b4bc4`	`#b3a4f5`	기능형 Badge 텍스트
`--ui-func-bg`	`#efecfc`	`#241f3a`	기능형 Badge 배경
`--ui-data`	`#0f6e56`	`#5dcaa5`	데이터형 Badge·「설치됨」 텍스트
`--ui-data-bg`	`#e1f5ee`	`#0e3528`	데이터형 Badge 배경
`--ui-warn`	`#92600c`	`#efb45a`	주의 Badge·Warning Mark·Callout(.is-warn)·Status Tag(.is-warn) 텍스트, 검색어 강조
`--ui-warn-bg`	`#faeeda`	`#34290f`	주의 Badge·Callout(.is-warn)·Status Tag(.is-warn) 배경
`--ui-info`	`#185fa5`	`#60a5fa`	Progress Bar·추천 표시·Status Tag(.is-info) 텍스트
`--ui-info-bg`	`#e6f1fb`	`#15263e`	추천 표시·Status Tag(.is-info) 배경
`--ui-danger`	`#c24747`	`#e39c9c`	오류 문장·필수 표시·삭제 버튼 hover·Warning Mark(.is-danger)·Callout(.is-danger)·Status Tag(.is-danger) 텍스트
`--ui-danger-bg`	`#fff4f4`	`#261a1a`	Callout(.is-danger)·Status Tag(.is-danger)·Editable Table 삭제 hover 배경
`--ui-segment-thumb`	`#ffffff`	`#2a2a2a`	Segmented Control 선택 표시 바탕
primary · 사이트 공용 토큰(styles.css). ui-kit.css가 직접 정의하지 않고 그대로 사용합니다
`--color-primary`	`#276ecc`	`#2a74d4`	Modal 주 버튼 배경, 입력란 포커스 테두리(Modal·Editable Table), 라디오 선택 색, 선택 목록 체크 표시
`--color-primary-hover`	`#2561c3`	`#2561c3`	Modal 주 버튼 hover 배경

Search & Filter

목록 상단의 검색과 필터링에 사용합니다.

Search Input.ui-search · .ui-search-input · 마켓플레이스·어셋

Filter Chip.ui-chips · .ui-chip · 마켓플레이스·어셋

Section Label.ui-section-label · 마켓플레이스

설치됨

Card

Icon Box·Badge·Action Button·Progress Bar로 구성합니다. Filled Primary 버튼은 사용하지 않습니다.

Card.ui-card · .ui-icon-box · .ui-badge(.is-func·.is-data·.is-neutral·.is-warn·.is-strong) · .ui-action(.is-done·.is-ghost) · .ui-actions-row · .ui-progress · 마켓플레이스

Meridian Atlas

Meridian 공식

Human Atlas(BodyParts3D) 위에 정경혈 361혈과 경외기혈을 WHO 표준 위치로 배치. 경락 선·검색·침 아래 구조·자침 시뮬레이션.

기능형 데스크톱 앱 전용

데스크톱 앱 내려받기

웹 브라우저에서는 실행할 수 없습니다

KCD-8 상병 코드셋

Meridian 공식

한국표준질병사인분류 8차. 한방 상용 상병을 큐레이션한 코드셋입니다.

데이터형 차트·청구에 기본 포함

설치됨

초진 문진 선택지

공개 선택지 목록

초진 문진에 사용하는 환자 표현 목록입니다.

데이터형 차트 연계

HIRA 청구 커넥터

Meridian 공식

건강보험심사평가원 청구포털 자동연동 커넥터. 환자 데이터에 접근합니다.

기능형 차트 연계 · 심사

Meridian Atlas

데스크톱 앱 · 설치 중

설치 중에는 Action Button 대신 Progress Bar를 표시하고, 완료되면 다시 버튼을 표시합니다.

기능형

다운로드 중... 60%

Card기본 · Hover 시 테두리 색만 진해집니다

KCD-8 상병 코드셋

Meridian 공식

한국표준질병사인분류 8차. 한방 상용 상병을 큐레이션한 코드셋입니다.

설치됨

Text Button & Dropdown Menu

테두리 없는 텍스트 버튼이며, hover 시 배경색을 표시합니다. 한 행에서 강조할 버튼 하나에만 테두리를 적용합니다.

Text Button.ui-text-button(.is-outlined) · 어셋

마켓플레이스

Dropdown Menu.ui-menu-wrap · .ui-menu · .ui-menu-item · 어셋 「새로 만들기」. 모달을 여는 항목은 button, 페이지로 이동하는 항목은 a 요소

왼쪽 「새로 만들기」 버튼을 누르면 메뉴가 열립니다.

Danger Text Button.ui-text-button.is-danger · 코드셋 「구독 해지」. 평소에는 같은 글자 버튼이고 Hover 시 빨간 계열을 표시합니다. 동작이 하나면 메뉴에 넣지 않습니다

Switch.ui-switch · 코드셋 「차트에 표시」, 운영 설정. 설정 하나를 켜고 끕니다

Tag.ui-tag · 어셋 List Row 끝의 출처 표시

공식원내

Panel & List Row

Panel Header(Icon Box·제목·설명·개수) 아래에 List Row를 배치합니다.

Panel.ui-panel · .ui-icon-box.is-tone(.is-herb·.is-formula·.is-acupoint·.is-noncovered·.is-material) · .ui-rows · .ui-row(.is-static) · .ui-row-more · .ui-row-empty · 어셋

처방

차트 처방 입력에 사용하는 항목

한약 처방TCMID·원내 처방2처방 보험 한약제제별표1 296종 중 구비0구비 침구 처방혈위 구성4처방

선택지 목록

차트 입력 필드의 선택 값

표준경혈공식 성별원내

맥상Static Row(클릭 불가)공식

플러그인

설치된 확장 기능

설치된 플러그인이 없습니다.

Code Block & Description

개발자 문서의 설정 예시와 API 설명에 사용합니다.

Code Block.ui-code-box · .ui-code-bar · .ui-code-copy · .ui-code-file · 개발자 문서

터미널

curl -X POST http://localhost:3101/api/mcp/hanja/convert \
  -H "Content-Type: application/json" \
  -d '{ "text": "足三里", "useAI": false }'

text는 독음으로 변환할 한문이며 필수 값입니다. useAI의 기본값은 false입니다.

Segmented Control.ui-segment · 개발자 문서·마켓플레이스. 선택지 2~4개, 선택 표시는 ui-segment.js

Description List.ui-deflist · 개발자 문서

인증: 앱 토큰(병원·권한 범위 연결)
발급: 소속 병원 원장
문서: 로그인 후 열람

Compact Description List.ui-deflist.is-compact · 개발자 문서 인증 방식 카드. 좁은 카드 안에서 사용합니다

인증: 앱 토큰. 병원과 권한 범위에 연결
발급: 소속 병원 원장
문서: 로그인 후 열람

Callout.ui-note · 개발자 문서

응답의 output은 변환된 문장, tokens는 글자별 독음입니다.

Warning Mark · Callout · Status Tag

경고 표시·경고 안내·상태 표시에 사용합니다. 기준은 차트 세부 페이지입니다. 주의는 노랑, 청구 반려처럼 진행을 막는 경우는 빨강을 사용합니다.

Warning Mark.ui-warn-mark(.is-danger) · ⚠ 하나를 표시하고 이유는 Hover 문장(title)으로 표시합니다

작약⚠

초진⚠

M54.5 요통⚠

Status Tag.ui-tag(.is-square)(.is-warn·.is-danger·.is-info·.is-data) · 누르지 않는 상태 표시. 설명은 Hover 문장으로 표시합니다

기본급여제한반려접수확정

개발 중인 기능급여제한반려접수확정

Callout.ui-note(.is-warn·.is-danger) · 기본은 참고 정보, .is-warn은 주의, .is-danger는 진행을 막는 오류

처방명·출전·시대는 수정해도 지난 차트의 표기가 바뀌지 않습니다.

4주를 넘겨 치료하려면 10월 20일까지 보험사에 진단서를 제출해야 합니다.

"M54"는 불완전코드입니다. 더 세분화된 하위 코드를 선택하세요.

Editable Table

행마다 입력란을 배치하고 행을 추가·삭제하는 표입니다. 기준은 원내 처방 모달의 구성 약재 표입니다. 이름 입력란은 검색 결과를 Dropdown으로 표시하고, 결과가 없으면 새 항목 만들기를 표시합니다.

Editable Table.ui-edit-table(--ui-edit-cols) · .ui-edit-head · .ui-edit-row · .ui-edit-num · .ui-edit-cell(.is-select) · .ui-edit-pick · .ui-edit-unit · .ui-edit-del · .ui-edit-add · .ui-drop · 원내 처방

약재용량포제

Collapse

요약 아래의 상세 내용을 접어서 표시합니다. 높이 전환은 CSS로 처리합니다.

Collapse.ui-collapse-toggle · .ui-collapse · .ui-collapse-inner · 릴리스 노트

명세서 일괄 작성부터 청구파일 생성까지 청구 관리에서 처리합니다.

진료월 명세서 일괄 작성
청구파일 생성, 청구번호 진료월별 부여

Modal

Step Indicator·가로 슬라이드·Footer 버튼으로 구성합니다. 주 버튼은 채움, 보조 버튼은 텍스트 형태이며, 세부 규칙은 「모달 단계 흐름과 하단 버튼」 문서를 따릅니다.

Modal.ui-modal · .ui-modal-card · .ui-modal-steps · .ui-modal-track · .ui-modal-foot · 어셋 「새로 만들기」 모달 5종·목록 모달

공용 컴포넌트 미적용 샘플이 페이지 전용 샘플입니다. 공용 컴포넌트 편입 여부는 해당 디자인을 사용하는 페이지가 생길 때 결정합니다.

Pagination

목록·검색 결과 화면에 사용하는 페이지 이동 패턴입니다. 연구실 논문·고전 검색·처방 검색·본초 상세 화면에서 사용합니다.

Numbered Pagination

Search Variants

제출 버튼·필터·태그 입력을 결합한 검색 UI입니다. 공용 Search Input에는 아이콘과 입력 필드만 있습니다.

Classic Search

Filter Search

Notion Style Input

감기 두통

Animated Tabs

선택한 탭으로 인디케이터가 이동하고, 콘텐츠가 슬라이드되며 전환되는 탭 UI입니다.

Preview State

탭 라벨을 클릭하면 인디케이터가 스프링 애니메이션으로 이동하고, 패널은 짧은 페이드·슬라이드로 전환됩니다.

Transition Recipe

transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
transition: opacity 220ms ease, translate 240ms ease;

AI Chat

메시지 말풍선·상태 배지·입력창으로 구성한 기본 채팅 UI입니다.

실제 채팅 페이지 열기

Research Assistant

원문에서 "습담" 관련 구절을 우선 정리해드릴까요?

09:41

응. 처방 추출기 기준으로 정리해줘.

09:42

좋아요. 우선 동의보감/방약합편 순으로 후보 처방 5개를 보여드릴게요.

09:42

Comment Input

프로필·본문 입력·비밀댓글 옵션·우측 하단 작성 버튼으로 구성한 댓글 작성 UI입니다.

김다빈 마지막 방문 2시간 전

댓글을 입력해 주세요. 서로 존중하는 표현으로 대화를 이어가면 더 좋은 인사이트를 만들 수 있어요.

Design Reference Lab

Color Tokens

Search & Filter

Card

Meridian Atlas

KCD-8 상병 코드셋

초진 문진 선택지

HIRA 청구 커넥터

Meridian Atlas

KCD-8 상병 코드셋

Text Button & Dropdown Menu

Panel & List Row

처방

선택지 목록

플러그인

Code Block & Description

Warning Mark · Callout · Status Tag

Editable Table

Collapse

Modal

공용 컴포넌트 미적용 샘플이 페이지 전용 샘플입니다. 공용 컴포넌트 편입 여부는 해당 디자인을 사용하는 페이지가 생길 때 결정합니다.

Pagination

Numbered Pagination

Search Variants

Classic Search

Filter Search

Notion Style Input

Animated Tabs

Preview State

Transition Recipe

Interaction Notes

AI Chat

Comment Input