</> MokUI

MokUI 소개

MokUI는 Vanilla JS와 표준 웹 컴포넌트만으로 구성된 경량 UI 라이브러리입니다. 별도의 빌드 도구 없이 CDN 한 줄로 시작할 수 있으며, 완전한 다크 모드와 접근성을 기본으로 제공합니다.

참고 — 이 문서는 데모용 가상 라이브러리 기준으로 작성되었습니다. 모든 코드 예시는 설명을 위한 예제입니다.

설치

패키지 매니저 또는 CDN 중 원하는 방식을 선택하세요. 프로덕션 환경에서는 버전을 고정하는 것을 권장합니다.

bash 
# npm
npm install @mokui/core

# CDN
<script src="https://cdn.mokui.dev/v3/mokui.min.js"></script>

빠른 시작

아래 단계를 따라 첫 번째 컴포넌트를 렌더링해 보세요.

  1. 스크립트를 페이지에 포함합니다.
  2. Mok.init() 를 호출합니다.
  3. 컴포넌트를 마운트합니다.
javascript 
import { Mok } from '@mokui/core';

Mok.init({ theme: 'auto', locale: 'ko' });

const btn = Mok.Button({
  label: '클릭',
  variant: 'primary',
  onClick: () => console.log('clicked!')
});
btn.mount('#app');

테마 설정

MokUI는 CSS 변수 기반의 토큰 시스템을 사용합니다. 아래 표는 주요 토큰 목록입니다.

토큰 설명 기본값
--mok-primary주요 색상#0ea5e9
--mok-radius모서리 둥글기0.75rem
--mok-font기본 서체system-ui

다크 모드

theme: 'auto' 로 설정하면 OS 설정을 자동으로 따릅니다. 수동 전환도 지원합니다.

주의 — 다크 모드 전환 시 localStorage 키 color-theme 를 사용하므로 커스텀 로직과 충돌하지 않도록 주의하세요.

컴포넌트 사용

제공되는 주요 컴포넌트는 다음과 같습니다.

  • Mok.Button — 버튼
  • Mok.Modal — 모달 다이얼로그
  • Mok.Toast — 토스트 알림

Client 초기화

API 클라이언트는 인증 토큰과 함께 초기화합니다.

javascript 
const client = new MokClient({
  baseURL: 'https://api.mokui.dev',
  token: process.env.MOK_TOKEN
});

REST 엔드포인트

주요 엔드포인트 목록입니다. 메서드별로 색상 뱃지가 표시됩니다.

GET /v3/components/{id}

단일 컴포넌트의 메타데이터를 조회합니다.

파라미터타입설명
idstring컴포넌트 고유 ID (필수)
expandboolean상세 속성 포함 여부
POST /v3/components

새 컴포넌트 인스턴스를 생성합니다. 요청 본문은 JSON 형식입니다.

DELETE /v3/components/{id}

지정한 컴포넌트를 영구 삭제합니다. 되돌릴 수 없습니다.

Hooks

라이프사이클 훅을 통해 컴포넌트 동작을 커스터마이즈할 수 있습니다.

자주 묻는 질문

번들러 없이 사용할 수 있나요? — 네, CDN 스크립트만으로 모든 기능을 사용할 수 있습니다.

변경 이력

  • v3.2.0 — Toast 컴포넌트 추가, 접근성 개선
  • v3.1.0 — 다크 모드 자동 감지 지원
이전

시작하기

 다음

REST 엔드포인트
MokUI 문서